diff --git a/docs/docs/path.md b/docs/docs/path.md
index 88327b4fa2..b1a06a4930 100644
--- a/docs/docs/path.md
+++ b/docs/docs/path.md
@@ -328,6 +328,8 @@ or
 var l = curve.getLength();
 ```
 
+Length of path/curve will be cached.
+
 #### Update length
 
 ```javascript
@@ -338,8 +340,6 @@ or
 curve.updateArcLengths();
 ```
 
-Length of path/curve will be cached.
-
 ### Curves to JSON
 
 ```javascript
diff --git a/docs/site/path/index.html b/docs/site/path/index.html
index 28a918a026..f2c5f2d698 100644
--- a/docs/site/path/index.html
+++ b/docs/site/path/index.html
@@ -3638,22 +3638,22 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#add-line" class="md-nav__link">
-    Add line
+  <a href="#line" class="md-nav__link">
+    Line
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-circleellipsearc" class="md-nav__link">
-    Add circle/ellipse/arc
+  <a href="#circleellipsearc" class="md-nav__link">
+    Circle/ellipse/arc
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-spline" class="md-nav__link">
-    Add spline
+  <a href="#spline" class="md-nav__link">
+    Spline
   </a>
   
     <nav class="md-nav">
@@ -3672,15 +3672,15 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-quadratic-bezier-curve" class="md-nav__link">
-    Add quadratic bezier curve
+  <a href="#quadratic-bezier-curve" class="md-nav__link">
+    Quadratic bezier curve
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-cubic-bezier-curve" class="md-nav__link">
-    Add cubic bezier curve
+  <a href="#cubic-bezier-curve" class="md-nav__link">
+    Cubic bezier curve
   </a>
   
 </li>
@@ -4785,22 +4785,22 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#add-line" class="md-nav__link">
-    Add line
+  <a href="#line" class="md-nav__link">
+    Line
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-circleellipsearc" class="md-nav__link">
-    Add circle/ellipse/arc
+  <a href="#circleellipsearc" class="md-nav__link">
+    Circle/ellipse/arc
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-spline" class="md-nav__link">
-    Add spline
+  <a href="#spline" class="md-nav__link">
+    Spline
   </a>
   
     <nav class="md-nav">
@@ -4819,15 +4819,15 @@
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-quadratic-bezier-curve" class="md-nav__link">
-    Add quadratic bezier curve
+  <a href="#quadratic-bezier-curve" class="md-nav__link">
+    Quadratic bezier curve
   </a>
   
 </li>
         
           <li class="md-nav__item">
-  <a href="#add-cubic-bezier-curve" class="md-nav__link">
-    Add cubic bezier curve
+  <a href="#cubic-bezier-curve" class="md-nav__link">
+    Cubic bezier curve
   </a>
   
 </li>
@@ -4963,23 +4963,41 @@ <h4 id="add-path-object-with-curves">Add path object with curves<a class="header
 <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Path</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span>
 </pre></div></p>
 <h3 id="add-curve">Add curve<a class="headerlink" href="#add-curve" title="Permanent link">&para;</a></h3>
-<h4 id="add-line">Add line<a class="headerlink" href="#add-line" title="Permanent link">&para;</a></h4>
-<ol>
+<h4 id="line">Line<a class="headerlink" href="#line" title="Permanent link">&para;</a></h4>
+<ul>
+<li>Add line object<ol>
 <li>Create line object
-    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Line</span><span class="p">(</span><span class="nx">p0</span><span class="p">,</span> <span class="nx">p1</span><span class="p">);</span> <span class="c1">// p0, p1: {x, y}</span>
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Line</span><span class="p">({</span><span class="nx">x</span><span class="o">:</span> <span class="nx">x0</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="nx">y0</span><span class="p">},</span> <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">x1</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="nx">y1</span><span class="p">});</span>
+</pre></div>
+    or
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Line</span><span class="p">([</span><span class="nx">x0</span><span class="p">,</span> <span class="nx">y0</span><span class="p">,</span> <span class="nx">x1</span><span class="p">,</span> <span class="nx">y1</span><span class="p">]);</span>
 </pre></div></li>
 <li>Add to path
     <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">curve</span><span class="p">);</span>
 </pre></div></li>
 </ol>
-<p>Add line started from previous end point to next point</p>
-<p><div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">endX</span><span class="p">,</span> <span class="nx">endY</span><span class="p">);</span>
+</li>
+<li>Add line started from previous end point to next point
+    <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">endX</span><span class="p">,</span> <span class="nx">endY</span><span class="p">);</span>
 </pre></div>
-or
-<div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">point</span><span class="p">);</span>  <span class="c1">// point : Phaser.Math.Vector2</span>
-</pre></div></p>
-<h4 id="add-circleellipsearc">Add circle/ellipse/arc<a class="headerlink" href="#add-circleellipsearc" title="Permanent link">&para;</a></h4>
-<ol>
+    or
+    <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nb">Math</span><span class="p">.</span><span class="nx">Vector2</span><span class="p">({</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">}));</span>
+</pre></div></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>
+<h4 id="circleellipsearc">Circle/ellipse/arc<a class="headerlink" href="#circleellipsearc" title="Permanent link">&para;</a></h4>
+<ul>
+<li>Add circle/ellipse/arc object<ol>
 <li>Create circle/ellipse/arc object<ul>
 <li>Circle
     <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Ellipse</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">radius</span><span class="p">);</span>
@@ -4988,7 +5006,7 @@ <h4 id="add-circleellipsearc">Add circle/ellipse/arc<a class="headerlink" href="
     <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Ellipse</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">xRadius</span><span class="p">,</span> <span class="nx">yRadius</span><span class="p">);</span>
 </pre></div></li>
 <li>Arc
-    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Ellipse</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">xRadius</span><span class="p">,</span> <span class="nx">yRadius</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">endAngle</span><span class="p">,</span> <span class="nx">clockwise</span><span class="p">,</span> <span class="nx">rotation</span><span class="p">);</span>
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Ellipse</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">xRadius</span><span class="p">,</span> <span class="nx">yRadius</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">endAngle</span><span class="p">,</span> <span class="nx">clockwise</span><span class="p">,</span>     <span class="nx">rotation</span><span class="p">);</span>
 </pre></div></li>
 </ul>
 </li>
@@ -4996,8 +5014,8 @@ <h4 id="add-circleellipsearc">Add circle/ellipse/arc<a class="headerlink" href="
     <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">curve</span><span class="p">);</span>
 </pre></div></li>
 </ol>
-<p>Add circle/ellipse/arc started from previous end point to next point</p>
-<ul>
+</li>
+<li>Add circle/ellipse/arc started from previous end point to next point<ul>
 <li>Circle
     <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">circleTo</span><span class="p">(</span><span class="nx">radius</span><span class="p">);</span>
 </pre></div></li>
@@ -5008,49 +5026,65 @@ <h4 id="add-circleellipsearc">Add circle/ellipse/arc<a class="headerlink" href="
     <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">ellipseTo</span><span class="p">(</span><span class="nx">xRadius</span><span class="p">,</span> <span class="nx">yRadius</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">endAngle</span><span class="p">,</span> <span class="nx">clockwise</span><span class="p">,</span> <span class="nx">rotation</span><span class="p">);</span>
 </pre></div></li>
 </ul>
-<h4 id="add-spline">Add spline<a class="headerlink" href="#add-spline" title="Permanent link">&para;</a></h4>
-<ol>
+</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>
+<h4 id="spline">Spline<a class="headerlink" href="#spline" title="Permanent link">&para;</a></h4>
+<ul>
+<li>Add spline object<ol>
 <li>Create spline object
-    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Spline</span><span class="p">([</span>
     <span class="nx">p0</span><span class="p">,</span>            <span class="c1">// {x, y}, or [x, y]</span>
     <span class="nx">p1</span><span class="p">,</span>            <span class="c1">// {x, y}, or [x, y]</span>
     <span class="c1">// ...</span>
-<span class="p">];</span>
-<span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Spline</span><span class="p">(</span><span class="nx">points</span><span class="p">);</span>
+<span class="p">]);</span>
 </pre></div>
     or
-    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Spline</span><span class="p">([</span>
     <span class="nx">x0</span><span class="p">,</span> <span class="nx">y0</span><span class="p">,</span>
     <span class="nx">x1</span><span class="p">,</span> <span class="nx">y1</span><span class="p">,</span>
     <span class="c1">// ...</span>
-<span class="p">];</span>
-<span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">Spline</span><span class="p">(</span><span class="nx">points</span><span class="p">);</span>
+<span class="p">]);</span>
 </pre></div></li>
 <li>Add to path
     <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">curve</span><span class="p">);</span>
 </pre></div></li>
 </ol>
-<p>Add spline started from previous end point to next point</p>
-<p><div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
+</li>
+<li>Add spline started from previous end point to next point
+    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">;</span>
+<span class="nx">path</span><span class="p">.</span><span class="nx">splineTo</span><span class="p">([</span>
     <span class="nx">p0</span><span class="p">,</span>            <span class="c1">// {x, y}, or [x, y]</span>
     <span class="nx">p1</span><span class="p">,</span>            <span class="c1">// {x, y}, or [x, y]</span>
     <span class="c1">// ...</span>
-<span class="p">];</span>
-<span class="nx">path</span><span class="p">.</span><span class="nx">splineTo</span><span class="p">(</span><span class="nx">points</span><span class="p">);</span>
+<span class="p">]);</span>
 </pre></div>
-or
-<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
+    or
+    <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">splineTo</span><span class="p">([</span>
     <span class="nx">x0</span><span class="p">,</span> <span class="nx">y0</span><span class="p">,</span>
     <span class="nx">x1</span><span class="p">,</span> <span class="nx">y1</span><span class="p">,</span>
     <span class="c1">// ...</span>
-<span class="p">];</span>
-<span class="nx">path</span><span class="p">.</span><span class="nx">splineTo</span><span class="p">(</span><span class="nx">points</span><span class="p">);</span>
-</pre></div></p>
+<span class="p">]);</span>
+</pre></div></li>
+</ul>
 <h5 id="append-point">Append point<a class="headerlink" href="#append-point" title="Permanent link">&para;</a></h5>
 <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">point</span> <span class="o">=</span> <span class="nx">curve</span><span class="p">.</span><span class="nx">addPoint</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
 </pre></div>
 
-<h4 id="add-quadratic-bezier-curve">Add quadratic bezier curve<a class="headerlink" href="#add-quadratic-bezier-curve" title="Permanent link">&para;</a></h4>
+<h4 id="quadratic-bezier-curve">Quadratic bezier curve<a class="headerlink" href="#quadratic-bezier-curve" title="Permanent link">&para;</a></h4>
 <ol>
 <li>Create quadratic bezier curve object
     <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">QuadraticBezier</span><span class="p">(</span><span class="nx">startPoint</span><span class="p">,</span> <span class="nx">controlPoint</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">);</span> <span class="c1">// point: {x, y}</span>
@@ -5073,7 +5107,7 @@ <h4 id="add-quadratic-bezier-curve">Add quadratic bezier curve<a class="headerli
 or
 <div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">quadraticBezierTo</span><span class="p">(</span><span class="nx">endPoint</span><span class="p">,</span> <span class="nx">controlPoint</span><span class="p">);</span>  <span class="c1">// point : Phaser.Math.Vector2</span>
 </pre></div></p>
-<h4 id="add-cubic-bezier-curve">Add cubic bezier curve<a class="headerlink" href="#add-cubic-bezier-curve" title="Permanent link">&para;</a></h4>
+<h4 id="cubic-bezier-curve">Cubic bezier curve<a class="headerlink" href="#cubic-bezier-curve" title="Permanent link">&para;</a></h4>
 <ol>
 <li>Create quadratic bezier curve object
     <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">curve</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Curves</span><span class="p">.</span><span class="nx">CubicBezier</span><span class="p">(</span><span class="nx">startPoint</span><span class="p">,</span> <span class="nx">controlPoint1</span><span class="p">,</span> <span class="nx">controlPoint2</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">);</span> <span class="c1">// point: {x, y}</span>
@@ -5181,13 +5215,13 @@ <h3 id="length-of-path">Length of path<a class="headerlink" href="#length-of-pat
 or
 <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">curve</span><span class="p">.</span><span class="nx">getLength</span><span class="p">();</span>
 </pre></div></p>
+<p>Length of path/curve will be cached.</p>
 <h4 id="update-length">Update length<a class="headerlink" href="#update-length" title="Permanent link">&para;</a></h4>
 <p><div class="codehilite"><pre><span></span><span class="nx">path</span><span class="p">.</span><span class="nx">updateArcLengths</span><span class="p">();</span>
 </pre></div>
 or
 <div class="codehilite"><pre><span></span><span class="nx">curve</span><span class="p">.</span><span class="nx">updateArcLengths</span><span class="p">();</span>
 </pre></div></p>
-<p>Length of path/curve will be cached.</p>
 <h3 id="curves-to-json">Curves to JSON<a class="headerlink" href="#curves-to-json" title="Permanent link">&para;</a></h3>
 <p><div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">json</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
 </pre></div>
diff --git a/docs/site/search/search_index.json b/docs/site/search/search_index.json
index 680df605bb..43f2d9462d 100644
--- a/docs/site/search/search_index.json
+++ b/docs/site/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Phaser \u00b6 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. List of my plugins \u00b6 Anchor : Set position based on visible window. AwaitLoader : Await custom task in preload stage. Away time : Get time from previous closing application to now. BBCodeText : Drawing text with BBCode protocol. Board : Core object of Board system. Board/Field of view : Visible testing, to find field of view. Board/Hexagon map : Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Board/Match : Get matched chess. Board/Mini board : Chess Container, to rotate/mirror/drag chess together. Board/Monopoly : Move through path tiles. Board/Move To : Move chess towards target position with a steady speed. Board/Path finder : Find moveable area or moving path. Board/Shape : Grid (polygon) shape object. Build arcade object : Create arcade body, and inject arcade object methods. Buff data : Data manager with buffs. Bullet : Move game object toward current angle of game object, with a constant speed. Button : Fires 'click' event when touch releasd after pressed. Canvas : Drawing on canvas . Canvas image data : Get image data from texture, or text object. Circle mask image : Load a texture, then apply a circle mask. Clock : A clock to count elapsed time. Conditions table : Check conditions to find passed tests listed in a csv table. ContainerLite : Control the position and angle of children game objects. CSV-scenario : Run script in csv format. CSV-to-hash-table : Hash table indexed by (col-key, row-key) from csv string. Cursor at bound : Map position pf cursor to cursor key state. Drag : Drag game object. Drag-rotate : Get dragging angle around a specific point. Eight direction : Move game object by cursor keys, with a constant speed. Fade-out-destroy : Fade out game object then destroy it. Fade-volume : Fade-in/fade-out volume of sound. Flash : Flashing (set invisible then visible) game object. Flip : Flipping game object to another face by scaling width/height. FSM : Finite state machine. Gashapon : Pick random item from box. Gesture/Pan : Get pan events of a game object. Gesture/Pinch : Get scale factor from 2 dragging touch pointers. Gesture/Press : Get press events of a game object. Gesture/Rotate : Get spin angle from 2 dragging touch pointers. Gesture/Swipe : Get swipe events of a game object. Gesture/Tap : Get tap/multi-taps events of a game object. Grid align : Align objects on quadrilateral or hexagon grid. Grid table : Viewer of grid table, to manipulate game object of each visible cell. Hexagon : Hexagon shape and methods. Input text : Input DOM element. Interception : Predict the intersection position of two game objects with constant moving speed. Life time : Destroy game object when time-out. Line : Draw a line with start/end/body textures. LZ-string : Compress string using LZ-based compression algorithm. Mouse-wheel to up/down : Map mouse-wheeling to (up/down) cursor key state. Move to : Move game object towards target position with a steady speed. Nine patch : Stretchable image. Path follower : Set position of game object on a path. Perlin : Perlin2/Perlin3 noise and simplex2/simplex3 noise. Pop up : Scale up game object. Quest : Question manager. Random place : Place objects randomly inside an area without overlapping. Restorable data : Restorable data manager. Rhombus : Rhombus shape and methods. RotateTo : Rotate game object towards target position with a steady speed. Round-Rectangle : Round rectangle shape. Run-commands : Run commands in array. Scale-down-destroy : Scale down game object then destroy it. Scroller : Drag content. Slow down when dragging released, pull back when out of bounds. Sequence : Run sequence commands in array. Shader/gray-scale : Gray scale post processing filter. Shader/hsl-adjust : Adjust color in HSL domain, post processing filter. Shader/inverse : Inverse color post processing filter. Shader/pixelation : Pixelation post processing filter. Shader/swirl : Swirl post processing filter. Shader/toonify : Draw outlines and quantize color in HSV domain, post processing filter. Shake-position : Shake position of game object. Slider : Drag thumb on a slider bar. Ship : Move game object as a space ship by cursor keys. TagText : Displays text with multi-color, font face, or font size with tags. TCRP.Player : Run commands on time. TCRP.Recorder : Store commands with time. Text/edit : Create an input text object above a text object to edit string content. Text/typing : Typing text on text object. Text/page : Display text page by page on text object. UI/buttons : A container with a group of buttons. UI/chart : Draw chart on canvas. UI/dialog : A container with a title, content, buttons and backgrounds. UI/fixwidthsizer : Layout children game objects into lines. UI/grid sizer : Layout children game objects in grids. UI/gird table : A container with a grid table, slider, and scroller. UI/label : A game object container with an icon, text, and background. UI/menu : A container with buttons and sub-menu. UI/number bar : A container with an icon, slider, text, and background. UI/pages : A container with pages, only current page is visible. UI/Scroll-able panel : A container with a panel, slider, and scroller. UI/sizer : Layout children game objects. UI/slider : A container with a track, indicator, thumb and background. UI/tabs : A container with 4 groups of buttons around a center panel. UI/text area : A container with a text, slider, and scroller. UI/text box : A container with an icon, (typing and paging) text, and background. UI/toast : Show text message for a short while. Virtual joystick : Simulate curosr keys according touch events. Wait events : Wait fired events or callbacks. Webfont-loader : Load web font by google webfont loader in preload stage. XOR : Encrypt or decrypt string by XOR algorithm. Youtube player : Play youtube video on iframe. Deprecated \u00b6 Video : Play video on DOM, or on canvas. Links \u00b6 Bug report or suggestion Discord channel","title":"Home"},{"location":"#phaser","text":"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.","title":"Phaser"},{"location":"#list-of-my-plugins","text":"Anchor : Set position based on visible window. AwaitLoader : Await custom task in preload stage. Away time : Get time from previous closing application to now. BBCodeText : Drawing text with BBCode protocol. Board : Core object of Board system. Board/Field of view : Visible testing, to find field of view. Board/Hexagon map : Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Board/Match : Get matched chess. Board/Mini board : Chess Container, to rotate/mirror/drag chess together. Board/Monopoly : Move through path tiles. Board/Move To : Move chess towards target position with a steady speed. Board/Path finder : Find moveable area or moving path. Board/Shape : Grid (polygon) shape object. Build arcade object : Create arcade body, and inject arcade object methods. Buff data : Data manager with buffs. Bullet : Move game object toward current angle of game object, with a constant speed. Button : Fires 'click' event when touch releasd after pressed. Canvas : Drawing on canvas . Canvas image data : Get image data from texture, or text object. Circle mask image : Load a texture, then apply a circle mask. Clock : A clock to count elapsed time. Conditions table : Check conditions to find passed tests listed in a csv table. ContainerLite : Control the position and angle of children game objects. CSV-scenario : Run script in csv format. CSV-to-hash-table : Hash table indexed by (col-key, row-key) from csv string. Cursor at bound : Map position pf cursor to cursor key state. Drag : Drag game object. Drag-rotate : Get dragging angle around a specific point. Eight direction : Move game object by cursor keys, with a constant speed. Fade-out-destroy : Fade out game object then destroy it. Fade-volume : Fade-in/fade-out volume of sound. Flash : Flashing (set invisible then visible) game object. Flip : Flipping game object to another face by scaling width/height. FSM : Finite state machine. Gashapon : Pick random item from box. Gesture/Pan : Get pan events of a game object. Gesture/Pinch : Get scale factor from 2 dragging touch pointers. Gesture/Press : Get press events of a game object. Gesture/Rotate : Get spin angle from 2 dragging touch pointers. Gesture/Swipe : Get swipe events of a game object. Gesture/Tap : Get tap/multi-taps events of a game object. Grid align : Align objects on quadrilateral or hexagon grid. Grid table : Viewer of grid table, to manipulate game object of each visible cell. Hexagon : Hexagon shape and methods. Input text : Input DOM element. Interception : Predict the intersection position of two game objects with constant moving speed. Life time : Destroy game object when time-out. Line : Draw a line with start/end/body textures. LZ-string : Compress string using LZ-based compression algorithm. Mouse-wheel to up/down : Map mouse-wheeling to (up/down) cursor key state. Move to : Move game object towards target position with a steady speed. Nine patch : Stretchable image. Path follower : Set position of game object on a path. Perlin : Perlin2/Perlin3 noise and simplex2/simplex3 noise. Pop up : Scale up game object. Quest : Question manager. Random place : Place objects randomly inside an area without overlapping. Restorable data : Restorable data manager. Rhombus : Rhombus shape and methods. RotateTo : Rotate game object towards target position with a steady speed. Round-Rectangle : Round rectangle shape. Run-commands : Run commands in array. Scale-down-destroy : Scale down game object then destroy it. Scroller : Drag content. Slow down when dragging released, pull back when out of bounds. Sequence : Run sequence commands in array. Shader/gray-scale : Gray scale post processing filter. Shader/hsl-adjust : Adjust color in HSL domain, post processing filter. Shader/inverse : Inverse color post processing filter. Shader/pixelation : Pixelation post processing filter. Shader/swirl : Swirl post processing filter. Shader/toonify : Draw outlines and quantize color in HSV domain, post processing filter. Shake-position : Shake position of game object. Slider : Drag thumb on a slider bar. Ship : Move game object as a space ship by cursor keys. TagText : Displays text with multi-color, font face, or font size with tags. TCRP.Player : Run commands on time. TCRP.Recorder : Store commands with time. Text/edit : Create an input text object above a text object to edit string content. Text/typing : Typing text on text object. Text/page : Display text page by page on text object. UI/buttons : A container with a group of buttons. UI/chart : Draw chart on canvas. UI/dialog : A container with a title, content, buttons and backgrounds. UI/fixwidthsizer : Layout children game objects into lines. UI/grid sizer : Layout children game objects in grids. UI/gird table : A container with a grid table, slider, and scroller. UI/label : A game object container with an icon, text, and background. UI/menu : A container with buttons and sub-menu. UI/number bar : A container with an icon, slider, text, and background. UI/pages : A container with pages, only current page is visible. UI/Scroll-able panel : A container with a panel, slider, and scroller. UI/sizer : Layout children game objects. UI/slider : A container with a track, indicator, thumb and background. UI/tabs : A container with 4 groups of buttons around a center panel. UI/text area : A container with a text, slider, and scroller. UI/text box : A container with an icon, (typing and paging) text, and background. UI/toast : Show text message for a short while. Virtual joystick : Simulate curosr keys according touch events. Wait events : Wait fired events or callbacks. Webfont-loader : Load web font by google webfont loader in preload stage. XOR : Encrypt or decrypt string by XOR algorithm. Youtube player : Play youtube video on iframe.","title":"List of my plugins"},{"location":"#deprecated","text":"Video : Play video on DOM, or on canvas.","title":"Deprecated"},{"location":"#links","text":"Bug report or suggestion Discord channel","title":"Links"},{"location":"anchor/","text":"Introduction \u00b6 Set position based on visible window. Note Visible window will be changed when scale mode is ENVELOP , WIDTH_CONTROLS_HEIGHT , or HEIGHT_CONTROLS_WIDTH . Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexAnchor from './plugins/anchor.js' ; Install global plugin \u00b6 Install plugin in configuration of game import AnchorPlugin from './plugins/anchor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAnchor' , plugin : AnchorPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var anchor = scene . plugins . get ( 'rexAnchor' ). add ( gameObject , { // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }); left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' } Reset config \u00b6 anchor . resetFromJSON ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n'","title":"Anchor"},{"location":"anchor/#introduction","text":"Set position based on visible window. Note Visible window will be changed when scale mode is ENVELOP , WIDTH_CONTROLS_HEIGHT , or HEIGHT_CONTROLS_WIDTH . Author: Rex Behavior of game object","title":"Introduction"},{"location":"anchor/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"anchor/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"anchor/#import-class","text":"import rexAnchor from './plugins/anchor.js' ;","title":"Import class"},{"location":"anchor/#install-global-plugin","text":"Install plugin in configuration of game import AnchorPlugin from './plugins/anchor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAnchor' , plugin : AnchorPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"anchor/#create-instance","text":"var anchor = scene . plugins . get ( 'rexAnchor' ). add ( gameObject , { // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }); left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' }","title":"Create instance"},{"location":"anchor/#reset-config","text":"anchor . resetFromJSON ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n'","title":"Reset config"},{"location":"angle/","text":"Introduction \u00b6 Convert angle value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Degree <-> Radians \u00b6 Degree to radians var rad = Phaser . Math . DegToRad ( deg ); Radians to degree var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Wrap \u00b6 Wrap angle (radians) in the range of -PI to PI var rad = Phaser . Math . Angle . Wrap ( angle ); Wrap angle (radians) in the range of 0 to 2*PI var rad = Phaser . Math . Angle . Normalize ( angle ); Wrap angle (degrees) in the range of -180 to 180 var deg = Phaser . Math . Angle . WrapDegrees ( angle ); Angle between points \u00b6 Angle from (0,0) to vector (x2 - x1 , y2 - y1) var rad = Phaser . Math . Angle . Between ( x1 , y1 , x2 , y2 ); var rad = Phaser . Math . Angle . BetweenPoints ( point1 , point2 ); Angle between angles \u00b6 Shortest angle (degrees) between 2 angles var deg = Phaser . Math . Angle . ShortestBetween ( angle1 , angle2 ) angle1 , angle2 : Angle in degrees in the range of -180 to 180 deg : Shortest angle in degrees deg > 0 : Counter-ClockWise rotation deg < 0 : ClockWise rotation Rotate around position \u00b6 Rotate a point around x and y by the given angle . var out = Phaser . Math . RotateAround ( point , x , y , angle ); Rotate a point around x and y by the given angle and distance . var out = Phaser . Math . RotateAroundDistance ( point , x , y , angle , distance );","title":"Angle"},{"location":"angle/#introduction","text":"Convert angle value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"angle/#usage","text":"","title":"Usage"},{"location":"angle/#degree-radians","text":"Degree to radians var rad = Phaser . Math . DegToRad ( deg ); Radians to degree var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180","title":"Degree &lt;-&gt; Radians"},{"location":"angle/#wrap","text":"Wrap angle (radians) in the range of -PI to PI var rad = Phaser . Math . Angle . Wrap ( angle ); Wrap angle (radians) in the range of 0 to 2*PI var rad = Phaser . Math . Angle . Normalize ( angle ); Wrap angle (degrees) in the range of -180 to 180 var deg = Phaser . Math . Angle . WrapDegrees ( angle );","title":"Wrap"},{"location":"angle/#angle-between-points","text":"Angle from (0,0) to vector (x2 - x1 , y2 - y1) var rad = Phaser . Math . Angle . Between ( x1 , y1 , x2 , y2 ); var rad = Phaser . Math . Angle . BetweenPoints ( point1 , point2 );","title":"Angle between points"},{"location":"angle/#angle-between-angles","text":"Shortest angle (degrees) between 2 angles var deg = Phaser . Math . Angle . ShortestBetween ( angle1 , angle2 ) angle1 , angle2 : Angle in degrees in the range of -180 to 180 deg : Shortest angle in degrees deg > 0 : Counter-ClockWise rotation deg < 0 : ClockWise rotation","title":"Angle between angles"},{"location":"angle/#rotate-around-position","text":"Rotate a point around x and y by the given angle . var out = Phaser . Math . RotateAround ( point , x , y , angle ); Rotate a point around x and y by the given angle and distance . var out = Phaser . Math . RotateAroundDistance ( point , x , y , angle , distance );","title":"Rotate around position"},{"location":"animation/","text":"Introduction \u00b6 Animation and animations manager. Author: Richard Davey Usage \u00b6 Animation manager \u00b6 Add animation \u00b6 scene . anims . create ({ key : '' , frames : [], defaultTextureKey : null , // time delay : 0 , frameRate : null , duration : null , skipMissedFrames : true , // repeat repeat : 0 , // set to (-1) to repeat forever repeatDelay : 0 , yoyo : false , // visible showOnStart : false , hideOnComplete : false }); frames : An array of {key, frame} Properties { key : '' , frame : '' , // string, or number duration : 0 , visible : true } Every frame in the atlas scene . anims . generateFrameNames ( key ); Frame sequence indexing from start to end var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , start : 0 , end : 0 , suffix : '' , zeroPad : 0 , // outputArray: [], // Append frames into this array }); prefix + Pad(i, zeroPad, '0', 1) + suffix , i: start ~ end Custom frame sequence var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , suffix : '' , zeroPad : 0 , frames : [ ... ] // outputArray: [], // Append frames into this array }); prefix + Pad(frames[i], zeroPad, '0', 1) + suffix Remove animation \u00b6 scene . anims . remove ( key ); Play animation \u00b6 Play scene . anims . play ( key , children ); Stagger play (delay play) scene . anims . staggerPlay ( key , children , stagger ); children : An array of Game Objects to play the animation on stagger : The amount of time, in milliseconds, to offset each play time by Pause all animations \u00b6 scene . anims . pauseAll (); Resume all animations \u00b6 scene . anims . resumeAll (); Reverse animation \u00b6 scene . anims . reverse ( key ); Has animation \u00b6 var exists = scene . anims . exists ( key ); Export/load \u00b6 Export JSON var json = scene . anims . toJSON (); Load from JSON scene . anims . fromJSON ( json ); Load JSON in preload stage javascript scene.load.json(key, url); Load animation in preload stage scene . load . animation ( key , url ); Events \u00b6 On add animation scene . anims . on ( 'add' , function ( key , anim ) {}); On remove animation scene . anims . on ( 'remove' , function ( key , anim ) {}); On pause all animations scene . anims . on ( 'pauseall' , function () {}); On resume all animations scene . anims . on ( 'resumeall' , function () {}); Animation object \u00b6 var anim = scene . anims . get ( key ); Add frame \u00b6 Append frames anim . addFrame ( frame ); frame : scene.anims.generateFrameNames(key, config) Insert frames at index anim . addFrameAt ( index , frame ); frame : scene.anims.generateFrameNames(key, config) Remove frame \u00b6 Remove frame at anim . removeFrameAt ( index ); Remove frame anim . removeFrame ( frame ); Get frame \u00b6 Has frame index var HasFrameAt = anim . checkFrame ( index ); Get frame at index var frame = anim . getFrameAt ( index ); Get last frame var frame = anim . getLastFrame (); Export \u00b6 Export JSON var json = anim . toJSON (); or var jsonString = JSON . stringify ( anim ); Events \u00b6 On start anim . on ( 'start' , function ( currentAnim , currentFrame , sprite ){}); On restart anim . on ( 'restart' , function ( currentAnim , currentFrame , sprite ){}); On complete anim . on ( 'complete' , function ( currentAnim , currentFrame , sprite ){}); On repeat anim . on ( 'repeat' , function ( currentAnim , currentFrame , sprite ){});","title":"Animation"},{"location":"animation/#introduction","text":"Animation and animations manager. Author: Richard Davey","title":"Introduction"},{"location":"animation/#usage","text":"","title":"Usage"},{"location":"animation/#animation-manager","text":"","title":"Animation manager"},{"location":"animation/#add-animation","text":"scene . anims . create ({ key : '' , frames : [], defaultTextureKey : null , // time delay : 0 , frameRate : null , duration : null , skipMissedFrames : true , // repeat repeat : 0 , // set to (-1) to repeat forever repeatDelay : 0 , yoyo : false , // visible showOnStart : false , hideOnComplete : false }); frames : An array of {key, frame} Properties { key : '' , frame : '' , // string, or number duration : 0 , visible : true } Every frame in the atlas scene . anims . generateFrameNames ( key ); Frame sequence indexing from start to end var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , start : 0 , end : 0 , suffix : '' , zeroPad : 0 , // outputArray: [], // Append frames into this array }); prefix + Pad(i, zeroPad, '0', 1) + suffix , i: start ~ end Custom frame sequence var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , suffix : '' , zeroPad : 0 , frames : [ ... ] // outputArray: [], // Append frames into this array }); prefix + Pad(frames[i], zeroPad, '0', 1) + suffix","title":"Add animation"},{"location":"animation/#remove-animation","text":"scene . anims . remove ( key );","title":"Remove animation"},{"location":"animation/#play-animation","text":"Play scene . anims . play ( key , children ); Stagger play (delay play) scene . anims . staggerPlay ( key , children , stagger ); children : An array of Game Objects to play the animation on stagger : The amount of time, in milliseconds, to offset each play time by","title":"Play animation"},{"location":"animation/#pause-all-animations","text":"scene . anims . pauseAll ();","title":"Pause all animations"},{"location":"animation/#resume-all-animations","text":"scene . anims . resumeAll ();","title":"Resume all animations"},{"location":"animation/#reverse-animation","text":"scene . anims . reverse ( key );","title":"Reverse animation"},{"location":"animation/#has-animation","text":"var exists = scene . anims . exists ( key );","title":"Has animation"},{"location":"animation/#exportload","text":"Export JSON var json = scene . anims . toJSON (); Load from JSON scene . anims . fromJSON ( json ); Load JSON in preload stage javascript scene.load.json(key, url); Load animation in preload stage scene . load . animation ( key , url );","title":"Export/load"},{"location":"animation/#events","text":"On add animation scene . anims . on ( 'add' , function ( key , anim ) {}); On remove animation scene . anims . on ( 'remove' , function ( key , anim ) {}); On pause all animations scene . anims . on ( 'pauseall' , function () {}); On resume all animations scene . anims . on ( 'resumeall' , function () {});","title":"Events"},{"location":"animation/#animation-object","text":"var anim = scene . anims . get ( key );","title":"Animation object"},{"location":"animation/#add-frame","text":"Append frames anim . addFrame ( frame ); frame : scene.anims.generateFrameNames(key, config) Insert frames at index anim . addFrameAt ( index , frame ); frame : scene.anims.generateFrameNames(key, config)","title":"Add frame"},{"location":"animation/#remove-frame","text":"Remove frame at anim . removeFrameAt ( index ); Remove frame anim . removeFrame ( frame );","title":"Remove frame"},{"location":"animation/#get-frame","text":"Has frame index var HasFrameAt = anim . checkFrame ( index ); Get frame at index var frame = anim . getFrameAt ( index ); Get last frame var frame = anim . getLastFrame ();","title":"Get frame"},{"location":"animation/#export","text":"Export JSON var json = anim . toJSON (); or var jsonString = JSON . stringify ( anim );","title":"Export"},{"location":"animation/#events_1","text":"On start anim . on ( 'start' , function ( currentAnim , currentFrame , sprite ){}); On restart anim . on ( 'restart' , function ( currentAnim , currentFrame , sprite ){}); On complete anim . on ( 'complete' , function ( currentAnim , currentFrame , sprite ){}); On repeat anim . on ( 'repeat' , function ( currentAnim , currentFrame , sprite ){});","title":"Events"},{"location":"arcade-body/","text":"Introduction \u00b6 Arcade physics body. Author: Richard Davey Usage \u00b6 Get physics body \u00b6 Enable physics world Add existing game object(s) to physics world Add a game object var gameObject = scene . physics . add . existing ( gameObject , isStatic ); isStatic : 0 : Dynamic body 1 : Static body Add game objects scene . physics . world . enable ( gameObjects , isStatic ); gameObjects : An array of game objects, or a group object isStatic : 0 : Dynamic body 1 : Static body Get physics body var body = gameObject . body ; Enable \u00b6 Whether this Body is updated by the physics simulation. Enable (default) body . setEnable (); or body . enable = true ; Disable body . setEnable ( false ); or body . enable = false ; Get var enable = body . moves ; Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity. Enable (default) body . moves = true ; Disable body . moves = false ; Get var moves = body . moves ; Use case Set body.moves to false when game object is controlled by tween or dragging. Destroy \u00b6 Physics body will be destroyed automatically when game object is destroyed. Movement \u00b6 Velocity \u00b6 Set body . setVelocity ( x , y ); or body . setVelocityX ( x ); body . setVelocityY ( x ); Get var vx = body . velocity . x ; var vy = body . velocity . y ; Max speed \u00b6 Set body . setMaxSpeed ( speed ); Get var speed = body . maxSpeed ; Max velocity \u00b6 Set body . setMaxVelocity ( x , y ); Get var vx = body . maxVelocity . x ; var vy = body . maxVelocity . y ; Acceleration \u00b6 Set body . setAcceleration ( x , y ); or body . setAccelerationX ( x ); body . setAccelerationY ( y ); Get var ax = body . acceleration . x ; var ay = body . acceleration . y ; Gravity \u00b6 Set body . setGravity ( x , y ); or body . setGravityX ( x ); body . setGravityY ( y ); Get var gx = body . gravity . x ; var gy = body . gravity . y ; Enables (default) body . setAllowGravity (); Disable body . setAllowGravity ( false ); Drag \u00b6 Reduces speed per second. Set body . setDrag ( x , y ); or body . setDragX ( x ); body . setDragY ( y ); Get var dx = body . drag . x ; var dy = body . drag . y ; Enables (default) body . setAllowDrag (); Disable body . setAllowDrag ( false ); Enable damping (default: false) body . useDamping = true ; Reset position \u00b6 body . reset ( x , y ); Stop \u00b6 Sets acceleration, velocity, and speed to zero. body . stop (); Immovable \u00b6 Enable body . setImmovable (); Disable (defalut) body . setImmovable ( false ); Get var immovable = body . immovable ; Friction \u00b6 If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set body . setFriction ( x , y ); or body . setFrictionX ( x ); body . setFrictionY ( y ); Get var fx = body . friction . x ; var fy = body . friction . y ; Speed \u00b6 The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step. var dx = body . deltaAbsX (); var dy = body . deltaAbsY (); Rotation \u00b6 Allow rotation \u00b6 Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = body . allowRotation ; Angular velocity \u00b6 Set body . setAngularVelocity ( v ); Get var av = body . angularVelocity ; Angular acceleration \u00b6 Set body . setAngularAcceleration ( v ); Get var aa = body . angularAcceleration ; Angular drag \u00b6 Reduces angular speed per second. Set body . setAngularDrag ( v ); Get var ad = body . angularDrag ; Collision \u00b6 Collision bound \u00b6 Rectangle body . setSize ( width , height , center ); center : false to set body's offset to (0, 0). Not work in Graphics object. Circle body . setCircle ( radius , offsetX , offsetY ); Offset \u00b6 body . setOffset ( x , y ); Push out \u00b6 scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects) Callbacks \u00b6 Add collider Point inside \u00b6 var hit = body . hitTest ( x , y ); Is colliding \u00b6 Is colliding this tick var isColliding = body . touching ; isColliding : { none : true , up : true , down : true , left : true , right : true } Was colliding previous tick var wasColliding = body . wasTouching ; wasColliding : { none : true , up : true , down : true , left : true , right : true } Bounce \u00b6 Set body . setBounce ( x , y ); or body . setBounceX ( x ); body . setBounceY ( y ); Get var bx = body . bounce . x ; var by = body . bounce . y ; World bounds \u00b6 Default world bounds Custom world bounds : body . setBoundsRectangle ( bounds ); bounds : A rectangle object . Enable body . setCollideWorldBounds (); Disable (default) body . setCollideWorldBounds ( false ); Get world bounds rectangle var top = body . world . bounds . top ; var bottom = body . world . bounds . bottom ; var left = body . world . bounds . left ; var right = body . world . bounds . right ; Blocked \u00b6 Whether this Body is colliding with a tile or the world boundary. Blocked when moveing down var onFloor = body . onFloor (); // blocked.down Blocked when moveing up var onCeiling = body . onCeiling (); // blocked.up Blocked when moveing left or right var onWall = body . onWall (); // blocked.left || this.blocked.right State var blocked = body . blocked ; blocked : { none : true , up : false , down : false , left : false , right : false } Mass \u00b6 Set body . setMass ( m ); Get var m = body . mass ; Static body \u00b6 Sync \u00b6 Syncs the Bodies position and size with its parent Game Object. body . updateFromGameObject (); Debug \u00b6 Bounds of Body Enable drawing body body . debugShowBody = true ; Color body . debugBodyColor = 0xff00ff ; Direction and magnitude of velocity Enable drawing body body . debugShowVelocity = true ;","title":"Body"},{"location":"arcade-body/#introduction","text":"Arcade physics body. Author: Richard Davey","title":"Introduction"},{"location":"arcade-body/#usage","text":"","title":"Usage"},{"location":"arcade-body/#get-physics-body","text":"Enable physics world Add existing game object(s) to physics world Add a game object var gameObject = scene . physics . add . existing ( gameObject , isStatic ); isStatic : 0 : Dynamic body 1 : Static body Add game objects scene . physics . world . enable ( gameObjects , isStatic ); gameObjects : An array of game objects, or a group object isStatic : 0 : Dynamic body 1 : Static body Get physics body var body = gameObject . body ;","title":"Get physics body"},{"location":"arcade-body/#enable","text":"Whether this Body is updated by the physics simulation. Enable (default) body . setEnable (); or body . enable = true ; Disable body . setEnable ( false ); or body . enable = false ; Get var enable = body . moves ; Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity. Enable (default) body . moves = true ; Disable body . moves = false ; Get var moves = body . moves ; Use case Set body.moves to false when game object is controlled by tween or dragging.","title":"Enable"},{"location":"arcade-body/#destroy","text":"Physics body will be destroyed automatically when game object is destroyed.","title":"Destroy"},{"location":"arcade-body/#movement","text":"","title":"Movement"},{"location":"arcade-body/#velocity","text":"Set body . setVelocity ( x , y ); or body . setVelocityX ( x ); body . setVelocityY ( x ); Get var vx = body . velocity . x ; var vy = body . velocity . y ;","title":"Velocity"},{"location":"arcade-body/#max-speed","text":"Set body . setMaxSpeed ( speed ); Get var speed = body . maxSpeed ;","title":"Max speed"},{"location":"arcade-body/#max-velocity","text":"Set body . setMaxVelocity ( x , y ); Get var vx = body . maxVelocity . x ; var vy = body . maxVelocity . y ;","title":"Max velocity"},{"location":"arcade-body/#acceleration","text":"Set body . setAcceleration ( x , y ); or body . setAccelerationX ( x ); body . setAccelerationY ( y ); Get var ax = body . acceleration . x ; var ay = body . acceleration . y ;","title":"Acceleration"},{"location":"arcade-body/#gravity","text":"Set body . setGravity ( x , y ); or body . setGravityX ( x ); body . setGravityY ( y ); Get var gx = body . gravity . x ; var gy = body . gravity . y ; Enables (default) body . setAllowGravity (); Disable body . setAllowGravity ( false );","title":"Gravity"},{"location":"arcade-body/#drag","text":"Reduces speed per second. Set body . setDrag ( x , y ); or body . setDragX ( x ); body . setDragY ( y ); Get var dx = body . drag . x ; var dy = body . drag . y ; Enables (default) body . setAllowDrag (); Disable body . setAllowDrag ( false ); Enable damping (default: false) body . useDamping = true ;","title":"Drag"},{"location":"arcade-body/#reset-position","text":"body . reset ( x , y );","title":"Reset position"},{"location":"arcade-body/#stop","text":"Sets acceleration, velocity, and speed to zero. body . stop ();","title":"Stop"},{"location":"arcade-body/#immovable","text":"Enable body . setImmovable (); Disable (defalut) body . setImmovable ( false ); Get var immovable = body . immovable ;","title":"Immovable"},{"location":"arcade-body/#friction","text":"If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set body . setFriction ( x , y ); or body . setFrictionX ( x ); body . setFrictionY ( y ); Get var fx = body . friction . x ; var fy = body . friction . y ;","title":"Friction"},{"location":"arcade-body/#speed","text":"The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step. var dx = body . deltaAbsX (); var dy = body . deltaAbsY ();","title":"Speed"},{"location":"arcade-body/#rotation","text":"","title":"Rotation"},{"location":"arcade-body/#allow-rotation","text":"Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = body . allowRotation ;","title":"Allow rotation"},{"location":"arcade-body/#angular-velocity","text":"Set body . setAngularVelocity ( v ); Get var av = body . angularVelocity ;","title":"Angular velocity"},{"location":"arcade-body/#angular-acceleration","text":"Set body . setAngularAcceleration ( v ); Get var aa = body . angularAcceleration ;","title":"Angular acceleration"},{"location":"arcade-body/#angular-drag","text":"Reduces angular speed per second. Set body . setAngularDrag ( v ); Get var ad = body . angularDrag ;","title":"Angular drag"},{"location":"arcade-body/#collision","text":"","title":"Collision"},{"location":"arcade-body/#collision-bound","text":"Rectangle body . setSize ( width , height , center ); center : false to set body's offset to (0, 0). Not work in Graphics object. Circle body . setCircle ( radius , offsetX , offsetY );","title":"Collision bound"},{"location":"arcade-body/#offset","text":"body . setOffset ( x , y );","title":"Offset"},{"location":"arcade-body/#push-out","text":"scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects)","title":"Push out"},{"location":"arcade-body/#callbacks","text":"Add collider","title":"Callbacks"},{"location":"arcade-body/#point-inside","text":"var hit = body . hitTest ( x , y );","title":"Point inside"},{"location":"arcade-body/#is-colliding","text":"Is colliding this tick var isColliding = body . touching ; isColliding : { none : true , up : true , down : true , left : true , right : true } Was colliding previous tick var wasColliding = body . wasTouching ; wasColliding : { none : true , up : true , down : true , left : true , right : true }","title":"Is colliding"},{"location":"arcade-body/#bounce","text":"Set body . setBounce ( x , y ); or body . setBounceX ( x ); body . setBounceY ( y ); Get var bx = body . bounce . x ; var by = body . bounce . y ;","title":"Bounce"},{"location":"arcade-body/#world-bounds","text":"Default world bounds Custom world bounds : body . setBoundsRectangle ( bounds ); bounds : A rectangle object . Enable body . setCollideWorldBounds (); Disable (default) body . setCollideWorldBounds ( false ); Get world bounds rectangle var top = body . world . bounds . top ; var bottom = body . world . bounds . bottom ; var left = body . world . bounds . left ; var right = body . world . bounds . right ;","title":"World bounds"},{"location":"arcade-body/#blocked","text":"Whether this Body is colliding with a tile or the world boundary. Blocked when moveing down var onFloor = body . onFloor (); // blocked.down Blocked when moveing up var onCeiling = body . onCeiling (); // blocked.up Blocked when moveing left or right var onWall = body . onWall (); // blocked.left || this.blocked.right State var blocked = body . blocked ; blocked : { none : true , up : false , down : false , left : false , right : false }","title":"Blocked"},{"location":"arcade-body/#mass","text":"Set body . setMass ( m ); Get var m = body . mass ;","title":"Mass"},{"location":"arcade-body/#static-body","text":"","title":"Static body"},{"location":"arcade-body/#sync","text":"Syncs the Bodies position and size with its parent Game Object. body . updateFromGameObject ();","title":"Sync"},{"location":"arcade-body/#debug","text":"Bounds of Body Enable drawing body body . debugShowBody = true ; Color body . debugBodyColor = 0xff00ff ; Direction and magnitude of velocity Enable drawing body body . debugShowVelocity = true ;","title":"Debug"},{"location":"arcade-gameobject/","text":"Introduction \u00b6 Arcade physics Image/Sprite/Group object. Author: Richard Davey Usage \u00b6 Add physics object \u00b6 Enable physics world Image object \u00b6 Static object, extends from Image object var image = scene . physics . add . staticImage ( x , y , key ); Dynamic object, extends from Image object var image = scene . physics . add . image ( x , y , key ); Sprite object \u00b6 Static object, extends from Sprite object var image = scene . physics . add . staticSprite ( x , y , key , frame ); Dynamic object, extends from Sprite object var image = scene . physics . add . sprite ( x , y , key , frame ); Group \u00b6 Static sprite objects, extends from Group object var group = scene . physics . add . staticGroup ( children , config ); // var group = scene.physics.add.staticGroup(config); Dynamic sprite objects, extends from Group object var group = scene . physics . add . group ( children , config ); // var group = scene.physics.add.staticGroup(config); config var config = { classType : ArcadeSprite , enable : true , setCollideWorldBounds : false , setBoundsRectangle : null , setAccelerationX : 0 , setAccelerationY : 0 , allowDrag : true , allowGravity : true , allowRotation : true setBounceX : 0 , setBounceY : 0 , setDragX : 0 , setDragY : 0 , setGravityX : 0 , setGravityY : 0 , setFrictionX : 0 , setFrictionY : 0 , setVelocityX : 0 , setVelocityY : 0 , setAngularVelocity : 0 , setAngularAcceleration : 0 , setAngularDrag : 0 , setMass : 1 , setImmovable : false , maxSize : - 1 , runChildUpdate : false }; Enable \u00b6 Enable body gameObject . enableBody (); // gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject); Enable and reset position gameObject . enableBody ( true , x , y ); // gameObject.enableBody(true, x, y, enableGameObject, showGameObject); enableGameObject : Also activate this Game Object. showGameObject : Also show this Game Object. Disable body gameObject . disableBody (); // gameObject.disableBody(disableGameObject, hideGameObject); disableGameObject : Also deactivate this Game Object. hideGameObject : Also hide this Game Object. Movement \u00b6 Velocity \u00b6 Set gameObject . setVelocity ( x , y ); or gameObject . setVelocityX ( x ); gameObject . setVelocityY ( y ); Get var vx = gameObject . body . velocity . x ; var vy = gameObject . body . velocity . y ; Max velocity \u00b6 Set gameObject . setMaxVelocity ( x , y ); Get var vx = gameObject . body . maxVelocity . x ; var vy = gameObject . body . maxVelocity . y ; Acceleration \u00b6 Set gameObject . setAcceleration ( x , y ); or gameObject . setAccelerationX ( x ); gameObject . setAccelerationY ( y ); Get var ax = gameObject . body . acceleration . x ; var ay = gameObject . body . acceleration . y ; Gravity \u00b6 Set gameObject . setGravity ( x , y ); or gameObject . setGravityX ( x ); gameObject . setGravityY ( y ); Get var gx = gameObject . body . gravity . x ; var gy = gameObject . body . gravity . y ; Drag \u00b6 Set gameObject . setDrag ( x , y ); or gameObject . setDragX ( x ); gameObject . setDragY ( y ); Get var dx = gameObject . body . drag . x ; var dy = gameObject . body . drag . y ; Enable damping gameObject . setDamping ( value ); Immovable \u00b6 Enable gameObject . setImmovable (); Disable gameObject . setImmovable ( false ); Get var immovable = gameObject . body . immovable ; Friction \u00b6 If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set gameObject . setFriction ( x , y ); or gameObject . setFrictionX ( x ); gameObject . setFrictionY ( y ); Get var fx = gameObject . body . friction . x ; var fy = gameObject . body . friction . y ; Rotation \u00b6 Allow rotation \u00b6 Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = gameObject . body . allowRotation ; Angular velocity \u00b6 Set gameObject . setAngularVelocity ( v ); Get var av = gameObject . body . angularVelocity ; Angular acceleration \u00b6 -Set gameObject . setAngularAcceleration ( v ); - Get var aa = gameObject . body . angularAcceleration ; Angular drag \u00b6 Set gameObject . setAngularDrag ( v ); Get var ad = gameObject . body . angularDrag ; Collision \u00b6 Collision bound \u00b6 Rectangle gameObject . setSize ( width , height , center ); center : false to set body's offset to (0, 0) Circle gameObject . setCircle ( radius , offsetX , offsetY ); Offset \u00b6 gameObject . setOffset ( x , y ); Push out \u00b6 scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects) Callbacks \u00b6 Add collider Point inside \u00b6 var hit = gameObject . hitTest ( x , y ); Bounce \u00b6 Set gameObject . setBounce ( x , y ); or gameObject . setBounceX ( x ); gameObject . setBounceY ( y ); Get var bx = gameObject . body . bounce . x ; var by = gameObject . body . bounce . y ; Enable bounce when colliding with the world boundary gameObject . setCollideWorldBounds (); Disable bounce when colliding with the world boundary gameObject . setCollideWorldBounds ( false ); Mass \u00b6 Set gameObject . setMass ( m ); Get var m = gameObject . body . mass ; Static game object \u00b6 Sync \u00b6 Syncs the Bodies position and size in static game object. gameObject . refreshBody (); Methods of group \u00b6 group . setVelocity ( x , y , step ); group . setVelocityX ( value , step ); group . setVelocityY ( value , step ); group . refresh (); // call this method when position of game objects were changed in static object group Debug \u00b6 gameObject . setDebug ( showBody , showVelocity , bodyColor ); gameObject . setDebugBodyColor ( bodyColor );","title":"Game object"},{"location":"arcade-gameobject/#introduction","text":"Arcade physics Image/Sprite/Group object. Author: Richard Davey","title":"Introduction"},{"location":"arcade-gameobject/#usage","text":"","title":"Usage"},{"location":"arcade-gameobject/#add-physics-object","text":"Enable physics world","title":"Add physics object"},{"location":"arcade-gameobject/#image-object","text":"Static object, extends from Image object var image = scene . physics . add . staticImage ( x , y , key ); Dynamic object, extends from Image object var image = scene . physics . add . image ( x , y , key );","title":"Image object"},{"location":"arcade-gameobject/#sprite-object","text":"Static object, extends from Sprite object var image = scene . physics . add . staticSprite ( x , y , key , frame ); Dynamic object, extends from Sprite object var image = scene . physics . add . sprite ( x , y , key , frame );","title":"Sprite object"},{"location":"arcade-gameobject/#group","text":"Static sprite objects, extends from Group object var group = scene . physics . add . staticGroup ( children , config ); // var group = scene.physics.add.staticGroup(config); Dynamic sprite objects, extends from Group object var group = scene . physics . add . group ( children , config ); // var group = scene.physics.add.staticGroup(config); config var config = { classType : ArcadeSprite , enable : true , setCollideWorldBounds : false , setBoundsRectangle : null , setAccelerationX : 0 , setAccelerationY : 0 , allowDrag : true , allowGravity : true , allowRotation : true setBounceX : 0 , setBounceY : 0 , setDragX : 0 , setDragY : 0 , setGravityX : 0 , setGravityY : 0 , setFrictionX : 0 , setFrictionY : 0 , setVelocityX : 0 , setVelocityY : 0 , setAngularVelocity : 0 , setAngularAcceleration : 0 , setAngularDrag : 0 , setMass : 1 , setImmovable : false , maxSize : - 1 , runChildUpdate : false };","title":"Group"},{"location":"arcade-gameobject/#enable","text":"Enable body gameObject . enableBody (); // gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject); Enable and reset position gameObject . enableBody ( true , x , y ); // gameObject.enableBody(true, x, y, enableGameObject, showGameObject); enableGameObject : Also activate this Game Object. showGameObject : Also show this Game Object. Disable body gameObject . disableBody (); // gameObject.disableBody(disableGameObject, hideGameObject); disableGameObject : Also deactivate this Game Object. hideGameObject : Also hide this Game Object.","title":"Enable"},{"location":"arcade-gameobject/#movement","text":"","title":"Movement"},{"location":"arcade-gameobject/#velocity","text":"Set gameObject . setVelocity ( x , y ); or gameObject . setVelocityX ( x ); gameObject . setVelocityY ( y ); Get var vx = gameObject . body . velocity . x ; var vy = gameObject . body . velocity . y ;","title":"Velocity"},{"location":"arcade-gameobject/#max-velocity","text":"Set gameObject . setMaxVelocity ( x , y ); Get var vx = gameObject . body . maxVelocity . x ; var vy = gameObject . body . maxVelocity . y ;","title":"Max velocity"},{"location":"arcade-gameobject/#acceleration","text":"Set gameObject . setAcceleration ( x , y ); or gameObject . setAccelerationX ( x ); gameObject . setAccelerationY ( y ); Get var ax = gameObject . body . acceleration . x ; var ay = gameObject . body . acceleration . y ;","title":"Acceleration"},{"location":"arcade-gameobject/#gravity","text":"Set gameObject . setGravity ( x , y ); or gameObject . setGravityX ( x ); gameObject . setGravityY ( y ); Get var gx = gameObject . body . gravity . x ; var gy = gameObject . body . gravity . y ;","title":"Gravity"},{"location":"arcade-gameobject/#drag","text":"Set gameObject . setDrag ( x , y ); or gameObject . setDragX ( x ); gameObject . setDragY ( y ); Get var dx = gameObject . body . drag . x ; var dy = gameObject . body . drag . y ; Enable damping gameObject . setDamping ( value );","title":"Drag"},{"location":"arcade-gameobject/#immovable","text":"Enable gameObject . setImmovable (); Disable gameObject . setImmovable ( false ); Get var immovable = gameObject . body . immovable ;","title":"Immovable"},{"location":"arcade-gameobject/#friction","text":"If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set gameObject . setFriction ( x , y ); or gameObject . setFrictionX ( x ); gameObject . setFrictionY ( y ); Get var fx = gameObject . body . friction . x ; var fy = gameObject . body . friction . y ;","title":"Friction"},{"location":"arcade-gameobject/#rotation","text":"","title":"Rotation"},{"location":"arcade-gameobject/#allow-rotation","text":"Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = gameObject . body . allowRotation ;","title":"Allow rotation"},{"location":"arcade-gameobject/#angular-velocity","text":"Set gameObject . setAngularVelocity ( v ); Get var av = gameObject . body . angularVelocity ;","title":"Angular velocity"},{"location":"arcade-gameobject/#angular-acceleration","text":"-Set gameObject . setAngularAcceleration ( v ); - Get var aa = gameObject . body . angularAcceleration ;","title":"Angular acceleration"},{"location":"arcade-gameobject/#angular-drag","text":"Set gameObject . setAngularDrag ( v ); Get var ad = gameObject . body . angularDrag ;","title":"Angular drag"},{"location":"arcade-gameobject/#collision","text":"","title":"Collision"},{"location":"arcade-gameobject/#collision-bound","text":"Rectangle gameObject . setSize ( width , height , center ); center : false to set body's offset to (0, 0) Circle gameObject . setCircle ( radius , offsetX , offsetY );","title":"Collision bound"},{"location":"arcade-gameobject/#offset","text":"gameObject . setOffset ( x , y );","title":"Offset"},{"location":"arcade-gameobject/#push-out","text":"scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects)","title":"Push out"},{"location":"arcade-gameobject/#callbacks","text":"Add collider","title":"Callbacks"},{"location":"arcade-gameobject/#point-inside","text":"var hit = gameObject . hitTest ( x , y );","title":"Point inside"},{"location":"arcade-gameobject/#bounce","text":"Set gameObject . setBounce ( x , y ); or gameObject . setBounceX ( x ); gameObject . setBounceY ( y ); Get var bx = gameObject . body . bounce . x ; var by = gameObject . body . bounce . y ; Enable bounce when colliding with the world boundary gameObject . setCollideWorldBounds (); Disable bounce when colliding with the world boundary gameObject . setCollideWorldBounds ( false );","title":"Bounce"},{"location":"arcade-gameobject/#mass","text":"Set gameObject . setMass ( m ); Get var m = gameObject . body . mass ;","title":"Mass"},{"location":"arcade-gameobject/#static-game-object","text":"","title":"Static game object"},{"location":"arcade-gameobject/#sync","text":"Syncs the Bodies position and size in static game object. gameObject . refreshBody ();","title":"Sync"},{"location":"arcade-gameobject/#methods-of-group","text":"group . setVelocity ( x , y , step ); group . setVelocityX ( value , step ); group . setVelocityY ( value , step ); group . refresh (); // call this method when position of game objects were changed in static object group","title":"Methods of group"},{"location":"arcade-gameobject/#debug","text":"gameObject . setDebug ( showBody , showVelocity , bodyColor ); gameObject . setDebugBodyColor ( bodyColor );","title":"Debug"},{"location":"arcade-world/","text":"Introduction \u00b6 World of Arcade physics engine in phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 var config = { // ... physics : { default : 'arcade' , arcade : { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // gravity: { // x: 0, // y: 0 // }, // checkCollision: { // up: true, // down: true, // left: true, // right: true // }, // fps: 60, // timeScale: 1, // 2.0 = half speed, 0.5 = double speed // overlapBias: 4, // tileBias: 16, // forceX: false, // isPaused: false, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // maxEntries: 16, // useTree: true // set false if amount of dynamic bodies > 5000 } } // ... }; var game = new Phaser . Game ( config ); Control \u00b6 Pause \u00b6 scene . physics . pause (); Resume \u00b6 scene . physics . resume (); Duration per frame \u00b6 Time scale scene . physics . world . timeScale = timeScale ; 1.0 = normal speed 2.0 = half speed 0.5 = double speed FPS scene . physics . world . setFPS ( framerate ); Step \u00b6 Advances the simulation by one step. scene . physics . world . step ( delta ); Collision \u00b6 Set bound \u00b6 See bound in body object , or game object . Collider & callback \u00b6 Add collider Push out scene . physics . add . collider ( objectsA , objectsB ); Performs a collision check and separation between the two physics enabled objects given. var collider = scene . physics . add . collider ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext); If you don't require separation then use overlap instead. var collider = scene . physics . add . overlap ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext); Parameters objectsA , objectsB : A game object An array contains Game objects (Add or remove game objects) Physics group/Group (Add or remove game objects) An array contains Physics group/Group collideCallback : var collideCallback = function ( gameObject1 , gameObject2 ) { // ... } processCallback : Fired when gameObject1 intersects gameObject2, optional. var processCallback = function ( gameObject1 , gameObject2 ) { return true ; // return false will discard remaining collision checking } Remove collider scene . physics . world . removeCollider ( collider ); Deactivate collider collider . active = false ; // Set true to activate again Name of collider (unused by engine) collider . name = name ; Testing wo collider \u00b6 Test overlapping var isOverlapping = scene . physics . world . overlap ( object1 , object2 ); or var isOverlapping = scene . physics . world . overlap ( object1 , object2 , collideCallback ); // var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext); Test colliding, also push out var isCollided = scene . physics . world . collide ( object1 , object2 ); or var isCollided = scene . physics . world . collide ( object1 , object2 , collideCallback ); // var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext); World bounds \u00b6 Enable \u00b6 Body : Set body.setCollideWorldBounds() to enable worldBounds property. World : Set bounds rectangle and enable bounds scene . physics . world . setBounds ( x , y , width , height ); // scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown); Set bounds rectangle scene . physics . world . bounds . setTo ( x , y , width , height ); or scene . physics . world . bounds . x = x ; scene . physics . world . bounds . y = y ; scene . physics . world . bounds . width = width ; scene . physics . world . bounds . height = height ; Enable bounds scene . physics . world . setBoundsCollision (); // scene.physics.world.setBoundsCollision(left, right, up, down); or scene . physics . world . checkCollision . left = left ; scene . physics . world . checkCollision . right = right ; scene . physics . world . checkCollision . up = up ; scene . physics . world . checkCollision . down = down ; Get bounds rectangle var top = scene . physics . world . bounds . top ; var bottom = scene . physics . world . bounds . bottom ; var left = scene . physics . world . bounds . left ; var right = scene . physics . world . bounds . right ; Events \u00b6 World bounds var callback = function ( body , blockedUp , blockedDown , blockedLeft , blockedRight ) { /* ... */ }; scene . physics . world . on ( 'worldbounds' , callback ); Wrap \u00b6 scene . physics . world . wrap ( gameObject , padding ); gameObject: game object group array of game objects Move to \u00b6 Move to position with a steady velocity scene . physics . moveTo ( gameObject , x , y , speed , maxTime ); Move to object with a steady velocity scene . physics . moveToObject ( gameObject , destination , speed , maxTime ); Accelerate to \u00b6 Accelerate to position scene . physics . accelerateTo ( gameObject , x , y , acceleration , xSpeedMax , ySpeedMax ); Accelerate to object scene . physics . accelerateToObject ( gameObject , destination , acceleration , xSpeedMax , ySpeedMax ); Gravity \u00b6 Set scene . physics . world . gravity . x = gx ; scene . physics . world . gravity . y = gy ; Get var gx = scene . physics . world . gravity . x ; var gy = scene . physics . world . gravity . y ; Total Gravity = world.gravity + body.gravity Bodies \u00b6 Closest/furthest \u00b6 Closest var body = scene . physics . closest ( point ); // point: {x,y} Furthest var body = scene . physics . furthest ( point ); // point: {x,y} Debug \u00b6 Draw body & velocity \u00b6 Bounds of dynamic Body Enable drawing body scene . physics . world . defaults . debugShowBody = true ; Color scene . physics . world . defaults . bodyDebugColor = 0xff00ff ; Bounds of static Body Enable drawing body scene . physics . world . defaults . debugShowStaticBody = true ; Color scene . physics . world . defaults . staticBodyDebugColor = 0x0000ff ; Direction and magnitude of velocity Enable drawing body scene . physics . world . defaults . debugShowVelocity = true ; Color scene . physics . world . defaults . velocityDebugColor = 0x00ff00 ; Graphics \u00b6 Draw debug body & velocity on a Graphics object . var graphics = scene . physics . world . debugGraphic ; Set visible scene . physics . world . debugGraphic . setVisible (); Set invisible scene . physics . world . debugGraphic . setVisible ( false ); Update loop \u00b6 scene.sys.events: update Update position & angle of each body Process each collider Update final position of each body Emit worldstep event scene.sys.events: postupdate Draw debug graphics graph TB SceneEventUpdate>\"scene.sys.events: update<br><br>Update arcade world<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.sys.events: postupdate<br><br>Post update arcade world\"] Render SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate --> Render","title":"World"},{"location":"arcade-world/#introduction","text":"World of Arcade physics engine in phaser. Author: Richard Davey","title":"Introduction"},{"location":"arcade-world/#usage","text":"","title":"Usage"},{"location":"arcade-world/#configuration","text":"var config = { // ... physics : { default : 'arcade' , arcade : { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // gravity: { // x: 0, // y: 0 // }, // checkCollision: { // up: true, // down: true, // left: true, // right: true // }, // fps: 60, // timeScale: 1, // 2.0 = half speed, 0.5 = double speed // overlapBias: 4, // tileBias: 16, // forceX: false, // isPaused: false, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // maxEntries: 16, // useTree: true // set false if amount of dynamic bodies > 5000 } } // ... }; var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"arcade-world/#control","text":"","title":"Control"},{"location":"arcade-world/#pause","text":"scene . physics . pause ();","title":"Pause"},{"location":"arcade-world/#resume","text":"scene . physics . resume ();","title":"Resume"},{"location":"arcade-world/#duration-per-frame","text":"Time scale scene . physics . world . timeScale = timeScale ; 1.0 = normal speed 2.0 = half speed 0.5 = double speed FPS scene . physics . world . setFPS ( framerate );","title":"Duration per frame"},{"location":"arcade-world/#step","text":"Advances the simulation by one step. scene . physics . world . step ( delta );","title":"Step"},{"location":"arcade-world/#collision","text":"","title":"Collision"},{"location":"arcade-world/#set-bound","text":"See bound in body object , or game object .","title":"Set bound"},{"location":"arcade-world/#collider-callback","text":"Add collider Push out scene . physics . add . collider ( objectsA , objectsB ); Performs a collision check and separation between the two physics enabled objects given. var collider = scene . physics . add . collider ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext); If you don't require separation then use overlap instead. var collider = scene . physics . add . overlap ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext); Parameters objectsA , objectsB : A game object An array contains Game objects (Add or remove game objects) Physics group/Group (Add or remove game objects) An array contains Physics group/Group collideCallback : var collideCallback = function ( gameObject1 , gameObject2 ) { // ... } processCallback : Fired when gameObject1 intersects gameObject2, optional. var processCallback = function ( gameObject1 , gameObject2 ) { return true ; // return false will discard remaining collision checking } Remove collider scene . physics . world . removeCollider ( collider ); Deactivate collider collider . active = false ; // Set true to activate again Name of collider (unused by engine) collider . name = name ;","title":"Collider &amp; callback"},{"location":"arcade-world/#testing-wo-collider","text":"Test overlapping var isOverlapping = scene . physics . world . overlap ( object1 , object2 ); or var isOverlapping = scene . physics . world . overlap ( object1 , object2 , collideCallback ); // var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext); Test colliding, also push out var isCollided = scene . physics . world . collide ( object1 , object2 ); or var isCollided = scene . physics . world . collide ( object1 , object2 , collideCallback ); // var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext);","title":"Testing wo collider"},{"location":"arcade-world/#world-bounds","text":"","title":"World bounds"},{"location":"arcade-world/#enable","text":"Body : Set body.setCollideWorldBounds() to enable worldBounds property. World : Set bounds rectangle and enable bounds scene . physics . world . setBounds ( x , y , width , height ); // scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown); Set bounds rectangle scene . physics . world . bounds . setTo ( x , y , width , height ); or scene . physics . world . bounds . x = x ; scene . physics . world . bounds . y = y ; scene . physics . world . bounds . width = width ; scene . physics . world . bounds . height = height ; Enable bounds scene . physics . world . setBoundsCollision (); // scene.physics.world.setBoundsCollision(left, right, up, down); or scene . physics . world . checkCollision . left = left ; scene . physics . world . checkCollision . right = right ; scene . physics . world . checkCollision . up = up ; scene . physics . world . checkCollision . down = down ; Get bounds rectangle var top = scene . physics . world . bounds . top ; var bottom = scene . physics . world . bounds . bottom ; var left = scene . physics . world . bounds . left ; var right = scene . physics . world . bounds . right ;","title":"Enable"},{"location":"arcade-world/#events","text":"World bounds var callback = function ( body , blockedUp , blockedDown , blockedLeft , blockedRight ) { /* ... */ }; scene . physics . world . on ( 'worldbounds' , callback );","title":"Events"},{"location":"arcade-world/#wrap","text":"scene . physics . world . wrap ( gameObject , padding ); gameObject: game object group array of game objects","title":"Wrap"},{"location":"arcade-world/#move-to","text":"Move to position with a steady velocity scene . physics . moveTo ( gameObject , x , y , speed , maxTime ); Move to object with a steady velocity scene . physics . moveToObject ( gameObject , destination , speed , maxTime );","title":"Move to"},{"location":"arcade-world/#accelerate-to","text":"Accelerate to position scene . physics . accelerateTo ( gameObject , x , y , acceleration , xSpeedMax , ySpeedMax ); Accelerate to object scene . physics . accelerateToObject ( gameObject , destination , acceleration , xSpeedMax , ySpeedMax );","title":"Accelerate to"},{"location":"arcade-world/#gravity","text":"Set scene . physics . world . gravity . x = gx ; scene . physics . world . gravity . y = gy ; Get var gx = scene . physics . world . gravity . x ; var gy = scene . physics . world . gravity . y ; Total Gravity = world.gravity + body.gravity","title":"Gravity"},{"location":"arcade-world/#bodies","text":"","title":"Bodies"},{"location":"arcade-world/#closestfurthest","text":"Closest var body = scene . physics . closest ( point ); // point: {x,y} Furthest var body = scene . physics . furthest ( point ); // point: {x,y}","title":"Closest/furthest"},{"location":"arcade-world/#debug","text":"","title":"Debug"},{"location":"arcade-world/#draw-body-velocity","text":"Bounds of dynamic Body Enable drawing body scene . physics . world . defaults . debugShowBody = true ; Color scene . physics . world . defaults . bodyDebugColor = 0xff00ff ; Bounds of static Body Enable drawing body scene . physics . world . defaults . debugShowStaticBody = true ; Color scene . physics . world . defaults . staticBodyDebugColor = 0x0000ff ; Direction and magnitude of velocity Enable drawing body scene . physics . world . defaults . debugShowVelocity = true ; Color scene . physics . world . defaults . velocityDebugColor = 0x00ff00 ;","title":"Draw body &amp; velocity"},{"location":"arcade-world/#graphics","text":"Draw debug body & velocity on a Graphics object . var graphics = scene . physics . world . debugGraphic ; Set visible scene . physics . world . debugGraphic . setVisible (); Set invisible scene . physics . world . debugGraphic . setVisible ( false );","title":"Graphics"},{"location":"arcade-world/#update-loop","text":"scene.sys.events: update Update position & angle of each body Process each collider Update final position of each body Emit worldstep event scene.sys.events: postupdate Draw debug graphics graph TB SceneEventUpdate>\"scene.sys.events: update<br><br>Update arcade world<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.sys.events: postupdate<br><br>Post update arcade world\"] Render SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate --> Render","title":"Update loop"},{"location":"array-addremove/","text":"Introduction \u00b6 Add/insert/remove item(s) of an array, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Add item \u00b6 Phaser . Utils . Array . Add ( arr , item ); // Phaser.Utils.Array.Add(arr, item, limit, callback, context); item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked. Insert item at \u00b6 Phaser . Utils . Array . AddAt ( arr , item , index ); // Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context); index : The index in the array where the item will be inserted. item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked. Remove item \u00b6 Phaser . Utils . Array . Remove ( arr , item ); // Phaser.Utils.Array.Remove(arr, item, callback, context); item : An item, or an array of items. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove item at \u00b6 var removed = Phaser . Utils . Array . RemoveAt ( arr , index ); // var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context); removed : Removed item. index : The array index to remove the item from. The index must be in bounds or it will throw an error. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove items between \u00b6 var removed = Phaser . Utils . Array . RemoveBetween ( arr , startIndex , endIndex ); // var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context); removed : Removed items. startIndex : The start index to remove from. callback : The end index to remove to. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove random item \u00b6 var item = Phaser . Utils . Array . RemoveRandomElement ( arr ); Replace item \u00b6 Replaces an element of the array with the new element. The new element cannot already be a member of the array. Phaser . Utils . Array . Replace ( arr , oldItem , newItem ); oldItem : An item in array. newItem : Another item, which is not in array.","title":"Add/remove"},{"location":"array-addremove/#introduction","text":"Add/insert/remove item(s) of an array, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-addremove/#usage","text":"","title":"Usage"},{"location":"array-addremove/#add-item","text":"Phaser . Utils . Array . Add ( arr , item ); // Phaser.Utils.Array.Add(arr, item, limit, callback, context); item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked.","title":"Add item"},{"location":"array-addremove/#insert-item-at","text":"Phaser . Utils . Array . AddAt ( arr , item , index ); // Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context); index : The index in the array where the item will be inserted. item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked.","title":"Insert item at"},{"location":"array-addremove/#remove-item","text":"Phaser . Utils . Array . Remove ( arr , item ); // Phaser.Utils.Array.Remove(arr, item, callback, context); item : An item, or an array of items. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove item"},{"location":"array-addremove/#remove-item-at","text":"var removed = Phaser . Utils . Array . RemoveAt ( arr , index ); // var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context); removed : Removed item. index : The array index to remove the item from. The index must be in bounds or it will throw an error. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove item at"},{"location":"array-addremove/#remove-items-between","text":"var removed = Phaser . Utils . Array . RemoveBetween ( arr , startIndex , endIndex ); // var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context); removed : Removed items. startIndex : The start index to remove from. callback : The end index to remove to. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove items between"},{"location":"array-addremove/#remove-random-item","text":"var item = Phaser . Utils . Array . RemoveRandomElement ( arr );","title":"Remove random item"},{"location":"array-addremove/#replace-item","text":"Replaces an element of the array with the new element. The new element cannot already be a member of the array. Phaser . Utils . Array . Replace ( arr , oldItem , newItem ); oldItem : An item in array. newItem : Another item, which is not in array.","title":"Replace item"},{"location":"array-filter/","text":"Introduction \u00b6 Built-in javascript object. Author: Built-in javascript function Usage \u00b6 Run function for each element \u00b6 arr . forEach ( function ( element , index , arr ) { // }, scope ); Filter elements \u00b6 Creates a new array with all elements that pass the test function. var result = arr . filter ( function ( element , index , arr ) { return true ; // false }, scope ); Find one element \u00b6 var element = arr . find ( function ( element , index , arr ) { return true ; // false }, scope ); Map elements to a new array \u00b6 var newArray = arr . map ( function ( element , index , arr ) { return newElement ; }, scope );","title":"Filter/Map"},{"location":"array-filter/#introduction","text":"Built-in javascript object. Author: Built-in javascript function","title":"Introduction"},{"location":"array-filter/#usage","text":"","title":"Usage"},{"location":"array-filter/#run-function-for-each-element","text":"arr . forEach ( function ( element , index , arr ) { // }, scope );","title":"Run function for each element"},{"location":"array-filter/#filter-elements","text":"Creates a new array with all elements that pass the test function. var result = arr . filter ( function ( element , index , arr ) { return true ; // false }, scope );","title":"Filter elements"},{"location":"array-filter/#find-one-element","text":"var element = arr . find ( function ( element , index , arr ) { return true ; // false }, scope );","title":"Find one element"},{"location":"array-filter/#map-elements-to-a-new-array","text":"var newArray = arr . map ( function ( element , index , arr ) { return newElement ; }, scope );","title":"Map elements to a new array"},{"location":"array-random/","text":"Introduction \u00b6 Random operation of an array, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get random item \u00b6 var item = Phaser . Utils . Array . GetRandom ( arr ); // var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length); Remove random item \u00b6 var item = Phaser . Utils . Array . RemoveRandomElement ( arr ); Shuffle \u00b6 var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Random"},{"location":"array-random/#introduction","text":"Random operation of an array, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-random/#usage","text":"","title":"Usage"},{"location":"array-random/#get-random-item","text":"var item = Phaser . Utils . Array . GetRandom ( arr ); // var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length);","title":"Get random item"},{"location":"array-random/#remove-random-item","text":"var item = Phaser . Utils . Array . RemoveRandomElement ( arr );","title":"Remove random item"},{"location":"array-random/#shuffle","text":"var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Shuffle"},{"location":"array-sort/","text":"Introduction \u00b6 Array sorting, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Built-in array sort \u00b6 var out = arr . sort ( compareFunction ); compareFunction : A function that defines an alternative sort order. function ( a , b ) { // return a - b; } Return a negative value Return 0 Return a positive value Stable array sort \u00b6 var out = Phaser . Utils . Array . StableSort ( arr , compareFunction ); Shuffle \u00b6 var arr = Phaser . Utils . Array . Shuffle ( arr ); Move item \u00b6 Moves the given element to the top of the array. Phaser . Utils . Array . BringToTop ( arr , item ); Moves the given element to the bottom of the array. Phaser . Utils . Array . SendToBack ( arr , item ); Moves the given array element up. Phaser . Utils . Array . MoveUp ( array , item ); Moves the given array element down. Phaser . Utils . Array . MoveDown ( array , item ); Moves an element in an array to a new position. Phaser . Utils . Array . MoveTo ( array , item , index ); Swaps the position of two elements. Phaser . Utils . Array . Swap ( array , item1 , item2 ); Moves the element at the start of the array to the end, shifting all items in the process. Phaser . Utils . Array . RotateLeft ( array , steps ); steps : The number of times to shift the array. Moves the element at the end of the array to the start, shifting all items in the process. Phaser . Utils . Array . RotateRight ( array , steps ); steps : The number of times to shift the array.","title":"Sort"},{"location":"array-sort/#introduction","text":"Array sorting, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-sort/#usage","text":"","title":"Usage"},{"location":"array-sort/#built-in-array-sort","text":"var out = arr . sort ( compareFunction ); compareFunction : A function that defines an alternative sort order. function ( a , b ) { // return a - b; } Return a negative value Return 0 Return a positive value","title":"Built-in array sort"},{"location":"array-sort/#stable-array-sort","text":"var out = Phaser . Utils . Array . StableSort ( arr , compareFunction );","title":"Stable array sort"},{"location":"array-sort/#shuffle","text":"var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Shuffle"},{"location":"array-sort/#move-item","text":"Moves the given element to the top of the array. Phaser . Utils . Array . BringToTop ( arr , item ); Moves the given element to the bottom of the array. Phaser . Utils . Array . SendToBack ( arr , item ); Moves the given array element up. Phaser . Utils . Array . MoveUp ( array , item ); Moves the given array element down. Phaser . Utils . Array . MoveDown ( array , item ); Moves an element in an array to a new position. Phaser . Utils . Array . MoveTo ( array , item , index ); Swaps the position of two elements. Phaser . Utils . Array . Swap ( array , item1 , item2 ); Moves the element at the start of the array to the end, shifting all items in the process. Phaser . Utils . Array . RotateLeft ( array , steps ); steps : The number of times to shift the array. Moves the element at the end of the array to the start, shifting all items in the process. Phaser . Utils . Array . RotateRight ( array , steps ); steps : The number of times to shift the array.","title":"Move item"},{"location":"audio/","text":"Introduction \u00b6 Play sounds, built-in object of phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 Web audio \u00b6 Web audio is the default audio context. Html5 audio \u00b6 var config = { // .... audio : { disableWebAudio : true } // .... }; var game = new Phaser . Game ( config ); No audio \u00b6 var config = { // .... audio : { noAudio : true } // .... }; var game = new Phaser . Game ( config ); Load audio file \u00b6 scene . load . audio ( key , urls ); // urls: an array of file url See loader Decode audio \u00b6 scene . sound . decodeAudio ( key , audioData ); audioData : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Or scene . sound . decodeAudio ( audioFiles ); audioFiles : An array of {key, data} data : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Decoded events \u00b6 Finished decoding an audio data scene . sound . on ( 'decoded' , key ); Finished decoding all audio data scene . sound . on ( 'decodedall' ); Play sound \u00b6 Sound instance will be destroyed when playback ends. scene . sound . play ( key ); Sound instance \u00b6 Create sound instance \u00b6 var music = scene . sound . add ( key ); var music = scene . sound . add ( key , config ); Configuration \u00b6 { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } Play sound instance \u00b6 Start playing music . play (); Start playing with configuration music . play ( config ); config Stop music . stop (); Pause music . pause (); Resume music . resume (); Methods \u00b6 Mute \u00b6 Set music . setMute ( mute ); // mute: true/false // music.mute = mute; Get var mute = music . mute ; Volume \u00b6 Set music . setVolume ( volume ); // volume: 0 to 1 // music.volume = volume; Get var volume = music . volume ; Detune \u00b6 Set music . setDetune ( detune ); // detune: -1200 to 1200 // music.detune = detune; Get var detune = music . detune ; Play-rate \u00b6 Set music . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // music.rate = rate; Get var rate = music . rate ; Seek to \u00b6 Seek to music . setSeek ( time ); // seek: playback time // music.seek = seek; Get current playback time var time = music . seek ; // return 0 when playback ends Loop \u00b6 Set music . setLoop ( loop ); // loop: true/false // music.loop = loop; Get var loop = music . loop ; Properties \u00b6 Duration : duration of this sound var duratuin = music . duration ; Is playing var isPlaying = music . isPlaying ; Is paused var isPaused = music . isPaused ; Events \u00b6 Start playing music . once ( 'play' , function ( music ){}); Playback end music . once ( 'complete' , function ( music ){}); Looping music . once ( 'looped' , function ( music ){}); Pause music . once ( 'pause' , function ( music ){}); Resume music . once ( 'resume' , function ( music ){}); Stop music . once ( 'stop' , function ( music ){}); Set mute music . once ( 'mute' , function ( music , mute ){}); Set volume music . once ( 'volume' , function ( music , volume ){}); Set detune music . once ( 'detune' , function ( music , detune ){}); Set play-rate music . once ( 'rate' , function ( music , rate ){}); Seek to music . once ( 'seek' , function ( music , time ){}); set loop music . once ( 'loop' , function ( music , loop ){}); Play marked sound \u00b6 Sound instance will be destroyed when playback ends. scene . sound . play ( key , marker ); Marker \u00b6 { name : '' , start : 0 , duration : music . duration , config : { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } } Markers in sound instance \u00b6 Add marker \u00b6 music . addMarker ( marker ); Marker Play marked sound \u00b6 music . play ( markerName ); music . play ( markerName , config ); config Audio sprite \u00b6 Load audio sprite \u00b6 scene . load . audioSprite ( key , urls , markersConfig , config ); See loader Format of markersConfig { resources : urls , // an array of audio files spritemap : { markerName0 : { start : 0 , end : 0 }, markerName1 : { start : 0 , end : 0 } // ... } } Play sound \u00b6 Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends. scene . sound . playAudioSprite ( key , markerName , config ); config Sound instance \u00b6 Create a sound instance with markers. var music = scene . sound . addAudioSprite ( key , config ); config Play sound instance \u00b6 music . play ( markerName ); music . play ( markerName , config ); config Sound manager \u00b6 Methods \u00b6 Mute \u00b6 Set scene . sound . setMute ( mute ); // mute: true/false // scene.sound.mute = mute; Get var mute = scene . sound . mute ; Volume \u00b6 Set scene . sound . setVolume ( volume ); // volume: 0 to 1 // scene.sound.volume = volume; Get var volume = scene . sound . volume ; Detune \u00b6 Set scene . sound . setDetune ( detune ); // detune: -1200 to 1200 // scene.sound.detune = detune; Get var detune = scene . sound . detune ; Play-rate \u00b6 Set scene . sound . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // scene.sound.rate = rate; Get var rate = scene . sound . rate ; Analyser \u00b6 Analyser node is only available in Web audio mode . Create analyser node var analyser = scene . sound . context . createAnalyser (); Configure analyser node analyser . smoothingTimeConstant = 1 ; analyser . fftSize = 8192 ; analyser . minDecibels = - 90 ; analyser . maxDecibels = - 10 ; smoothingTimeConstant : Averaging constant with the last analysis frame. 0 (no time averaging) ~ 1 . Default value is 0.8 . fftSize : Window size. 32 , 64 , 128 , 256 , 512 , 1024 , 2048 , 4096 , 8192 , 16384 , and 32768 . Defaults to 2048 . minDecibels : Minimum decibel value for scaling the FFT analysis data. 0 dB is the loudest possible sound, -10 dB is a 10 th of that, etc. The default value is -100 dB maxDecibels : Maximum decibel value for scaling the FFT analysis data. The default value is -30 dB. Set source of analyser node Global volume nodee -> analyser node scene . sound . masterVolumeNode . connect ( analyser ); A sound instance -> analyser node music . volumeNode . connect ( analyser ); Ouput analyser node to audio context analyser . connect ( scene . sound . context . destination ); Create output data array var dataArrayLength = analyser . frequencyBinCount ; var dataArray = new Uint8Array ( dataArrayLength ); Get output data analyser . getByteTimeDomainData ( dataArray ); Retrieve output data for ( var i = 0 ; i < dataArrayLength ; i ++ ) { var data = dataArray [ i ]; }","title":"Audio"},{"location":"audio/#introduction","text":"Play sounds, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"audio/#usage","text":"","title":"Usage"},{"location":"audio/#configuration","text":"","title":"Configuration"},{"location":"audio/#web-audio","text":"Web audio is the default audio context.","title":"Web audio"},{"location":"audio/#html5-audio","text":"var config = { // .... audio : { disableWebAudio : true } // .... }; var game = new Phaser . Game ( config );","title":"Html5 audio"},{"location":"audio/#no-audio","text":"var config = { // .... audio : { noAudio : true } // .... }; var game = new Phaser . Game ( config );","title":"No audio"},{"location":"audio/#load-audio-file","text":"scene . load . audio ( key , urls ); // urls: an array of file url See loader","title":"Load audio file"},{"location":"audio/#decode-audio","text":"scene . sound . decodeAudio ( key , audioData ); audioData : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Or scene . sound . decodeAudio ( audioFiles ); audioFiles : An array of {key, data} data : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance","title":"Decode audio"},{"location":"audio/#decoded-events","text":"Finished decoding an audio data scene . sound . on ( 'decoded' , key ); Finished decoding all audio data scene . sound . on ( 'decodedall' );","title":"Decoded events"},{"location":"audio/#play-sound","text":"Sound instance will be destroyed when playback ends. scene . sound . play ( key );","title":"Play sound"},{"location":"audio/#sound-instance","text":"","title":"Sound instance"},{"location":"audio/#create-sound-instance","text":"var music = scene . sound . add ( key ); var music = scene . sound . add ( key , config );","title":"Create sound instance"},{"location":"audio/#configuration_1","text":"{ mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 }","title":"Configuration"},{"location":"audio/#play-sound-instance","text":"Start playing music . play (); Start playing with configuration music . play ( config ); config Stop music . stop (); Pause music . pause (); Resume music . resume ();","title":"Play sound instance"},{"location":"audio/#methods","text":"","title":"Methods"},{"location":"audio/#mute","text":"Set music . setMute ( mute ); // mute: true/false // music.mute = mute; Get var mute = music . mute ;","title":"Mute"},{"location":"audio/#volume","text":"Set music . setVolume ( volume ); // volume: 0 to 1 // music.volume = volume; Get var volume = music . volume ;","title":"Volume"},{"location":"audio/#detune","text":"Set music . setDetune ( detune ); // detune: -1200 to 1200 // music.detune = detune; Get var detune = music . detune ;","title":"Detune"},{"location":"audio/#play-rate","text":"Set music . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // music.rate = rate; Get var rate = music . rate ;","title":"Play-rate"},{"location":"audio/#seek-to","text":"Seek to music . setSeek ( time ); // seek: playback time // music.seek = seek; Get current playback time var time = music . seek ; // return 0 when playback ends","title":"Seek to"},{"location":"audio/#loop","text":"Set music . setLoop ( loop ); // loop: true/false // music.loop = loop; Get var loop = music . loop ;","title":"Loop"},{"location":"audio/#properties","text":"Duration : duration of this sound var duratuin = music . duration ; Is playing var isPlaying = music . isPlaying ; Is paused var isPaused = music . isPaused ;","title":"Properties"},{"location":"audio/#events","text":"Start playing music . once ( 'play' , function ( music ){}); Playback end music . once ( 'complete' , function ( music ){}); Looping music . once ( 'looped' , function ( music ){}); Pause music . once ( 'pause' , function ( music ){}); Resume music . once ( 'resume' , function ( music ){}); Stop music . once ( 'stop' , function ( music ){}); Set mute music . once ( 'mute' , function ( music , mute ){}); Set volume music . once ( 'volume' , function ( music , volume ){}); Set detune music . once ( 'detune' , function ( music , detune ){}); Set play-rate music . once ( 'rate' , function ( music , rate ){}); Seek to music . once ( 'seek' , function ( music , time ){}); set loop music . once ( 'loop' , function ( music , loop ){});","title":"Events"},{"location":"audio/#play-marked-sound","text":"Sound instance will be destroyed when playback ends. scene . sound . play ( key , marker );","title":"Play marked sound"},{"location":"audio/#marker","text":"{ name : '' , start : 0 , duration : music . duration , config : { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } }","title":"Marker"},{"location":"audio/#markers-in-sound-instance","text":"","title":"Markers in sound instance"},{"location":"audio/#add-marker","text":"music . addMarker ( marker ); Marker","title":"Add marker"},{"location":"audio/#play-marked-sound_1","text":"music . play ( markerName ); music . play ( markerName , config ); config","title":"Play marked sound"},{"location":"audio/#audio-sprite","text":"","title":"Audio sprite"},{"location":"audio/#load-audio-sprite","text":"scene . load . audioSprite ( key , urls , markersConfig , config ); See loader Format of markersConfig { resources : urls , // an array of audio files spritemap : { markerName0 : { start : 0 , end : 0 }, markerName1 : { start : 0 , end : 0 } // ... } }","title":"Load audio sprite"},{"location":"audio/#play-sound_1","text":"Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends. scene . sound . playAudioSprite ( key , markerName , config ); config","title":"Play sound"},{"location":"audio/#sound-instance_1","text":"Create a sound instance with markers. var music = scene . sound . addAudioSprite ( key , config ); config","title":"Sound instance"},{"location":"audio/#play-sound-instance_1","text":"music . play ( markerName ); music . play ( markerName , config ); config","title":"Play sound instance"},{"location":"audio/#sound-manager","text":"","title":"Sound manager"},{"location":"audio/#methods_1","text":"","title":"Methods"},{"location":"audio/#mute_1","text":"Set scene . sound . setMute ( mute ); // mute: true/false // scene.sound.mute = mute; Get var mute = scene . sound . mute ;","title":"Mute"},{"location":"audio/#volume_1","text":"Set scene . sound . setVolume ( volume ); // volume: 0 to 1 // scene.sound.volume = volume; Get var volume = scene . sound . volume ;","title":"Volume"},{"location":"audio/#detune_1","text":"Set scene . sound . setDetune ( detune ); // detune: -1200 to 1200 // scene.sound.detune = detune; Get var detune = scene . sound . detune ;","title":"Detune"},{"location":"audio/#play-rate_1","text":"Set scene . sound . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // scene.sound.rate = rate; Get var rate = scene . sound . rate ;","title":"Play-rate"},{"location":"audio/#analyser","text":"Analyser node is only available in Web audio mode . Create analyser node var analyser = scene . sound . context . createAnalyser (); Configure analyser node analyser . smoothingTimeConstant = 1 ; analyser . fftSize = 8192 ; analyser . minDecibels = - 90 ; analyser . maxDecibels = - 10 ; smoothingTimeConstant : Averaging constant with the last analysis frame. 0 (no time averaging) ~ 1 . Default value is 0.8 . fftSize : Window size. 32 , 64 , 128 , 256 , 512 , 1024 , 2048 , 4096 , 8192 , 16384 , and 32768 . Defaults to 2048 . minDecibels : Minimum decibel value for scaling the FFT analysis data. 0 dB is the loudest possible sound, -10 dB is a 10 th of that, etc. The default value is -100 dB maxDecibels : Maximum decibel value for scaling the FFT analysis data. The default value is -30 dB. Set source of analyser node Global volume nodee -> analyser node scene . sound . masterVolumeNode . connect ( analyser ); A sound instance -> analyser node music . volumeNode . connect ( analyser ); Ouput analyser node to audio context analyser . connect ( scene . sound . context . destination ); Create output data array var dataArrayLength = analyser . frequencyBinCount ; var dataArray = new Uint8Array ( dataArrayLength ); Get output data analyser . getByteTimeDomainData ( dataArray ); Retrieve output data for ( var i = 0 ; i < dataArrayLength ; i ++ ) { var data = dataArray [ i ]; }","title":"Analyser"},{"location":"awaitloader/","text":"Introduction \u00b6 Await custom task in preload stage. Author: Rex Custom File of loader Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'AwaitLoader' , plugin : AwaitLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene) Await task \u00b6 In preload stage: var callback = function ( successCallback , failureCallback ) { // successCallback(); }; this . load . rexAwait ( key , { callback : callback , // scope: scope }); This plugin runs callback to start custom task. Calls successCallback when custom task completed, or failureCallback if error.","title":"Await loader"},{"location":"awaitloader/#introduction","text":"Await custom task in preload stage. Author: Rex Custom File of loader","title":"Introduction"},{"location":"awaitloader/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"awaitloader/#usage","text":"Sample code","title":"Usage"},{"location":"awaitloader/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'AwaitLoader' , plugin : AwaitLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene)","title":"Install plugin"},{"location":"awaitloader/#await-task","text":"In preload stage: var callback = function ( successCallback , failureCallback ) { // successCallback(); }; this . load . rexAwait ( key , { callback : callback , // scope: scope }); This plugin runs callback to start custom task. Calls successCallback when custom task completed, or failureCallback if error.","title":"Await task"},{"location":"awaytime/","text":"Introduction \u00b6 Get time from previous closing application to now. Author: Rex Standalone object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexAwayTime from './plugins/awaytime.js' ; Install global plugin \u00b6 Install plugin in configuration of game import AwayTimePlugin from './plugins/awaytime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAwayTime' , plugin : AwayTimePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Default away-timer \u00b6 Get away-time \u00b6 var awayTime = scene . plugins . get ( 'rexAwayTime' ). awayTime ; // var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime; awayTime : Time in millisecond. key : Save curent time-stamp in key of localstorage . Default value is 'away' . time : Period of saving current time-stamp. Default value is 1000 . Note This action also starts saving current time-stamp periodically into localstorage. Set key \u00b6 scene . plugins . get ( 'rexAwayTime' ). setKey ( key ); key : Save curent time-stamp in key of localstorage Set period \u00b6 scene . plugins . get ( 'rexAwayTime' ). setPeriod ( time ); time : Period of saving current time-stamp.","title":"Away time"},{"location":"awaytime/#introduction","text":"Get time from previous closing application to now. Author: Rex Standalone object","title":"Introduction"},{"location":"awaytime/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"awaytime/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"awaytime/#import-class","text":"import rexAwayTime from './plugins/awaytime.js' ;","title":"Import class"},{"location":"awaytime/#install-global-plugin","text":"Install plugin in configuration of game import AwayTimePlugin from './plugins/awaytime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAwayTime' , plugin : AwayTimePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"awaytime/#default-away-timer","text":"","title":"Default away-timer"},{"location":"awaytime/#get-away-time","text":"var awayTime = scene . plugins . get ( 'rexAwayTime' ). awayTime ; // var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime; awayTime : Time in millisecond. key : Save curent time-stamp in key of localstorage . Default value is 'away' . time : Period of saving current time-stamp. Default value is 1000 . Note This action also starts saving current time-stamp periodically into localstorage.","title":"Get away-time"},{"location":"awaytime/#set-key","text":"scene . plugins . get ( 'rexAwayTime' ). setKey ( key ); key : Save curent time-stamp in key of localstorage","title":"Set key"},{"location":"awaytime/#set-period","text":"scene . plugins . get ( 'rexAwayTime' ). setPeriod ( time ); time : Period of saving current time-stamp.","title":"Set period"},{"location":"base64/","text":"Introduction \u00b6 Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser. Author: Richard Davey Usage \u00b6 Base64 -> Array buffer \u00b6 var arrayBuffer = Phaser . Utils . Base64 . Base64ToArrayBuffer ( base64 ); Array buffer -> Base64 \u00b6 var base64 = Phaser . Utils . Base64 . ArrayBufferToBase64 ( arrayBuffer , mediaType ); mediaType : An optional media type, i.e. audio/ogg or image/jpeg","title":"Base64"},{"location":"base64/#introduction","text":"Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"base64/#usage","text":"","title":"Usage"},{"location":"base64/#base64-array-buffer","text":"var arrayBuffer = Phaser . Utils . Base64 . Base64ToArrayBuffer ( base64 );","title":"Base64 -&gt; Array buffer"},{"location":"base64/#array-buffer-base64","text":"var base64 = Phaser . Utils . Base64 . ArrayBufferToBase64 ( arrayBuffer , mediaType ); mediaType : An optional media type, i.e. audio/ogg or image/jpeg","title":"Array buffer -&gt; Base64"},{"location":"bbcodetext/","text":"Introduction \u00b6 Drawing text with BBCode protocol. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code BBCode \u00b6 Bold : [b]text[/b] Italic : [i]text[/i] Color : [color=red]text[/color] Size : [size=18]text[/size] Stroke : [stroke]text[/stroke] Stroke with color setting : [stroke=red]text[/stroke] Shadow : [shadow]text[/shadow] Underline : [u]text[/u] Underline with color setting : [u=red]text[/u] Image : [img=imgKey] Hit area of words : [area=key]text[/area] Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexBBCodeTextPlugin' , plugin : BBCodeTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text object \u00b6 var txt = scene . add . rexBBCodeText ( x , y , '[b]h[/b]ello' ); // var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . rexBBCodeText ({ x : 0 , y : 0 , padding : { left : 0 , right : 0 , top : 0 , bottom : 0 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom Custom class \u00b6 Define class class MyText extends BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '[b]h[/b]ello' ); Wrap \u00b6 Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width ); Content \u00b6 Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '[b]h[/b]ello' ); // txt.text = '[b]h[/b]ello'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Image \u00b6 Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config} Hit area of words \u00b6 Hitting events \u00b6 Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope ) Draw hit-areas \u00b6 txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"BBCode Text"},{"location":"bbcodetext/#introduction","text":"Drawing text with BBCode protocol. Author: Rex Game object","title":"Introduction"},{"location":"bbcodetext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"bbcodetext/#usage","text":"Sample code","title":"Usage"},{"location":"bbcodetext/#bbcode","text":"Bold : [b]text[/b] Italic : [i]text[/i] Color : [color=red]text[/color] Size : [size=18]text[/size] Stroke : [stroke]text[/stroke] Stroke with color setting : [stroke=red]text[/stroke] Shadow : [shadow]text[/shadow] Underline : [u]text[/u] Underline with color setting : [u=red]text[/u] Image : [img=imgKey] Hit area of words : [area=key]text[/area]","title":"BBCode"},{"location":"bbcodetext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexBBCodeTextPlugin' , plugin : BBCodeTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"bbcodetext/#add-text-object","text":"var txt = scene . add . rexBBCodeText ( x , y , '[b]h[/b]ello' ); // var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . rexBBCodeText ({ x : 0 , y : 0 , padding : { left : 0 , right : 0 , top : 0 , bottom : 0 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom","title":"Add text object"},{"location":"bbcodetext/#custom-class","text":"Define class class MyText extends BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '[b]h[/b]ello' );","title":"Custom class"},{"location":"bbcodetext/#wrap","text":"Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width );","title":"Wrap"},{"location":"bbcodetext/#content","text":"Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '[b]h[/b]ello' ); // txt.text = '[b]h[/b]ello';","title":"Content"},{"location":"bbcodetext/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"bbcodetext/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"bbcodetext/#image","text":"Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config}","title":"Image"},{"location":"bbcodetext/#hit-area-of-words","text":"","title":"Hit area of words"},{"location":"bbcodetext/#hitting-events","text":"Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope )","title":"Hitting events"},{"location":"bbcodetext/#draw-hit-areas","text":"txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw hit-areas"},{"location":"bbcodetext/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"bbcodetext/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"bbcodetext/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"bbcodetext/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"bitmaptext/","text":"Introduction \u00b6 Drawing text by texture, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load bitmap font \u00b6 Load bitmap font from texture and xml configuration scene . load . bitmapFont ( key , textureURL , xmlURL ); Reference: load bitmap font Load retro bitmap font from texture and JSON configuration Load texture in preload stage scene . load . image ( key , url ); Reference: load image Add retro bitmap font var config = { // image image : '' , offset : { x : 0 , y : 0 }, // characters width : 32 , height : 32 , chars : '' , charsPerRow : 10 , // spacing spacing : { x : 0 , y : 0 }, lineSpacing : 0 } scene . cache . bitmapFont . add ( key , Phaser . GameObjects . RetroFont . Parse ( scene , config )); Image : image : The key of the image containing the font. offset : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here. Characters : width : The width of each character in the font set. height : The height of each character in the font set. chars : The characters used in the font set, in display order. Default characters set charsPerRow : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth. Spacing : spacing : If the characters in the font set have horizontal/vertical spacing between them set the required amount here. lineSpacing : The amount of vertical space to add to the line height of the font. Add bitmap text object \u00b6 var txt = scene . bitmapText ( x , y , key , text ); // var txt = scene.bitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . bitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . BitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text ); Set text \u00b6 txt . setText ( '...' ); or txt . text = '...' ; Set align \u00b6 Left aligned txt . setLeftAlign (); Middle aligned txt . setCenterAlign (); Right aligned txt . setRightAlign (); or txt . align = align ; align : 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Set letter spacing \u00b6 txt . setLetterSpacing ( spacing ); or txt . letterSpacing = spacing ; Can be a positive value to increase the space, or negative to reduce it. Set font size \u00b6 txt . setFontSize ( size ); or txt . fontSize = size ; Set font \u00b6 txt . setFont ( key ); // txt.setFont(key, size, align); Get bound \u00b6 var width = txt . width ; var height = txt . height ; or var bounds = txt . getTextBounds ( round ); // bounds = { // local: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // global: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // lines: { // shortest: 0, // longest: 0, // lengths: null // } // }; round : Set true to round the results to the nearest integer. local : The BitmapText based on fontSize and 0x0 coords. global : The BitmapText, taking into account scale and world position. lines : The BitmapText line data. Other properties \u00b6 See game object Appendix \u00b6 Default characters set of retro font \u00b6 Phaser.GameObjects.RetroFont.TEXT_SET1 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~' Phaser.GameObjects.RetroFont.TEXT_SET2 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET3 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ' Phaser.GameObjects.RetroFont.TEXT_SET4 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789' Phaser.GameObjects.RetroFont.TEXT_SET5 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789' Phaser.GameObjects.RetroFont.TEXT_SET6 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' ' Phaser.GameObjects.RetroFont.TEXT_SET7 : 'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39' Phaser.GameObjects.RetroFont.TEXT_SET8 : '0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET9 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!' Phaser.GameObjects.RetroFont.TEXT_SET10 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET11 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'","title":"Static bitmap text"},{"location":"bitmaptext/#introduction","text":"Drawing text by texture, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"bitmaptext/#usage","text":"","title":"Usage"},{"location":"bitmaptext/#load-bitmap-font","text":"Load bitmap font from texture and xml configuration scene . load . bitmapFont ( key , textureURL , xmlURL ); Reference: load bitmap font Load retro bitmap font from texture and JSON configuration Load texture in preload stage scene . load . image ( key , url ); Reference: load image Add retro bitmap font var config = { // image image : '' , offset : { x : 0 , y : 0 }, // characters width : 32 , height : 32 , chars : '' , charsPerRow : 10 , // spacing spacing : { x : 0 , y : 0 }, lineSpacing : 0 } scene . cache . bitmapFont . add ( key , Phaser . GameObjects . RetroFont . Parse ( scene , config )); Image : image : The key of the image containing the font. offset : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here. Characters : width : The width of each character in the font set. height : The height of each character in the font set. chars : The characters used in the font set, in display order. Default characters set charsPerRow : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth. Spacing : spacing : If the characters in the font set have horizontal/vertical spacing between them set the required amount here. lineSpacing : The amount of vertical space to add to the line height of the font.","title":"Load bitmap font"},{"location":"bitmaptext/#add-bitmap-text-object","text":"var txt = scene . bitmapText ( x , y , key , text ); // var txt = scene.bitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . bitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true });","title":"Add bitmap text object"},{"location":"bitmaptext/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . BitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text );","title":"Custom class"},{"location":"bitmaptext/#set-text","text":"txt . setText ( '...' ); or txt . text = '...' ;","title":"Set text"},{"location":"bitmaptext/#set-align","text":"Left aligned txt . setLeftAlign (); Middle aligned txt . setCenterAlign (); Right aligned txt . setRightAlign (); or txt . align = align ; align : 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned","title":"Set align"},{"location":"bitmaptext/#set-letter-spacing","text":"txt . setLetterSpacing ( spacing ); or txt . letterSpacing = spacing ; Can be a positive value to increase the space, or negative to reduce it.","title":"Set letter spacing"},{"location":"bitmaptext/#set-font-size","text":"txt . setFontSize ( size ); or txt . fontSize = size ;","title":"Set font size"},{"location":"bitmaptext/#set-font","text":"txt . setFont ( key ); // txt.setFont(key, size, align);","title":"Set font"},{"location":"bitmaptext/#get-bound","text":"var width = txt . width ; var height = txt . height ; or var bounds = txt . getTextBounds ( round ); // bounds = { // local: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // global: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // lines: { // shortest: 0, // longest: 0, // lengths: null // } // }; round : Set true to round the results to the nearest integer. local : The BitmapText based on fontSize and 0x0 coords. global : The BitmapText, taking into account scale and world position. lines : The BitmapText line data.","title":"Get bound"},{"location":"bitmaptext/#other-properties","text":"See game object","title":"Other properties"},{"location":"bitmaptext/#appendix","text":"","title":"Appendix"},{"location":"bitmaptext/#default-characters-set-of-retro-font","text":"Phaser.GameObjects.RetroFont.TEXT_SET1 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~' Phaser.GameObjects.RetroFont.TEXT_SET2 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET3 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ' Phaser.GameObjects.RetroFont.TEXT_SET4 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789' Phaser.GameObjects.RetroFont.TEXT_SET5 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789' Phaser.GameObjects.RetroFont.TEXT_SET6 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' ' Phaser.GameObjects.RetroFont.TEXT_SET7 : 'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39' Phaser.GameObjects.RetroFont.TEXT_SET8 : '0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET9 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!' Phaser.GameObjects.RetroFont.TEXT_SET10 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET11 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'","title":"Default characters set of retro font"},{"location":"blitter/","text":"Introduction \u00b6 Display of static images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add blitter container \u00b6 Add blitter container var blitter = scene . add . blitter ( x , y , key ); Add blitter container from JSON var blitter = scene . make . blitter ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true }); Custom class \u00b6 Define class class MyBlitter extends Phaser . GameObjects . Blitter { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var blitter = new MyBlitter ( scene , x , y , key ); Add bob object \u00b6 var bob = blitter . create ( x , y ); // var bob = blitter.create(x, y, frame, visible, index); frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using. visible : Should the created Bob render or not? index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list. Add mutiple bob objects \u00b6 var bobs = blitter . createMultiple ( quantity , frame , visible ); quantity : The quantity of Bob objects to create. Add bob object from callback \u00b6 var bobs = blitter . createFromCallback ( callback , quantity , frame , visible ) // var callback = function(bob, i){}; Get bob objects \u00b6 var bobs = blitter . children . list ; Clear all bob objects \u00b6 blitter . clear (); Bob object \u00b6 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. Position \u00b6 Get var x = bob . x ; var y = bob . y ; Set bob . setPosition ( x , y ); // bob.x = 0; // bob.y = 0; or bob . reset ( x , y ); // bob.reset(x, y, frame); Frame \u00b6 Get var frame = bob . frame ; frame : Frame object . Set bob . setFrame ( frame ); Flip \u00b6 Get var flipX = bob . flipX ; var flipY = bob . flipY ; Set bob . setFlip ( boolX , boolY ); // bob.setFlipX(boolean); // bob.setFlipY(boolean); // bob.flipX = flipX; // bob.flipY = flipY; or bob . resetFlip (); // bob.setFlip(false, false) Visible \u00b6 Get var visible = bob . visible ; Set bob . setVisible ( boolean ); // bob.visible = v; Alpha \u00b6 Get var alpha = bob . alpha ; Set bob . setAlpha ( v ); // bob.aplha = v; Tint \u00b6 Get var tint = bob . tint ; Set bob . setTint ( tint ); // bob.tint = tint; tint : Tint value, between 0 and 0xffffff . Destroy \u00b6 bob . destroy (); Data \u00b6 var data = bob . data ; // {}","title":"Blitter"},{"location":"blitter/#introduction","text":"Display of static images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"blitter/#usage","text":"","title":"Usage"},{"location":"blitter/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"blitter/#add-blitter-container","text":"Add blitter container var blitter = scene . add . blitter ( x , y , key ); Add blitter container from JSON var blitter = scene . make . blitter ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true });","title":"Add blitter container"},{"location":"blitter/#custom-class","text":"Define class class MyBlitter extends Phaser . GameObjects . Blitter { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var blitter = new MyBlitter ( scene , x , y , key );","title":"Custom class"},{"location":"blitter/#add-bob-object","text":"var bob = blitter . create ( x , y ); // var bob = blitter.create(x, y, frame, visible, index); frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using. visible : Should the created Bob render or not? index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list.","title":"Add bob object"},{"location":"blitter/#add-mutiple-bob-objects","text":"var bobs = blitter . createMultiple ( quantity , frame , visible ); quantity : The quantity of Bob objects to create.","title":"Add mutiple bob objects"},{"location":"blitter/#add-bob-object-from-callback","text":"var bobs = blitter . createFromCallback ( callback , quantity , frame , visible ) // var callback = function(bob, i){};","title":"Add bob object from callback"},{"location":"blitter/#get-bob-objects","text":"var bobs = blitter . children . list ;","title":"Get bob objects"},{"location":"blitter/#clear-all-bob-objects","text":"blitter . clear ();","title":"Clear all bob objects"},{"location":"blitter/#bob-object","text":"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.","title":"Bob object"},{"location":"blitter/#position","text":"Get var x = bob . x ; var y = bob . y ; Set bob . setPosition ( x , y ); // bob.x = 0; // bob.y = 0; or bob . reset ( x , y ); // bob.reset(x, y, frame);","title":"Position"},{"location":"blitter/#frame","text":"Get var frame = bob . frame ; frame : Frame object . Set bob . setFrame ( frame );","title":"Frame"},{"location":"blitter/#flip","text":"Get var flipX = bob . flipX ; var flipY = bob . flipY ; Set bob . setFlip ( boolX , boolY ); // bob.setFlipX(boolean); // bob.setFlipY(boolean); // bob.flipX = flipX; // bob.flipY = flipY; or bob . resetFlip (); // bob.setFlip(false, false)","title":"Flip"},{"location":"blitter/#visible","text":"Get var visible = bob . visible ; Set bob . setVisible ( boolean ); // bob.visible = v;","title":"Visible"},{"location":"blitter/#alpha","text":"Get var alpha = bob . alpha ; Set bob . setAlpha ( v ); // bob.aplha = v;","title":"Alpha"},{"location":"blitter/#tint","text":"Get var tint = bob . tint ; Set bob . setTint ( tint ); // bob.tint = tint; tint : Tint value, between 0 and 0xffffff .","title":"Tint"},{"location":"blitter/#destroy","text":"bob . destroy ();","title":"Destroy"},{"location":"blitter/#data","text":"var data = bob . data ; // {}","title":"Data"},{"location":"board-bejeweled/","text":"Introduction \u00b6 Match3-like gameplay template. Author: Rex Template Source code \u00b6 Template , minify Usage \u00b6 Sample code Create bejeweled object \u00b6 var bejeweled = new Bejeweled ( scene , { board : { grid : { gridType : 'quadGrid' , x : 30 , y : 30 - 600 , cellWidth : 60 , cellHeight : 60 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 10 , height : 20 // Prepared rows: upper 10 rows }, match : { // wildcard: undefined // dirMask: undefined }, chess : { // pick random symbol from array, or a callback to return symbol symbols : [ 0 , 1 , 2 , 3 , 4 , 5 ], // symbols: function(board, tileX, tileY, excluded) { return symbol; } // User-defined chess game object create : function ( board ) { // Create Game object (Shape, Image, or Sprite) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; }, // scope for callbacks scope : undefined , // moveTo behavior moveTo : { speed : 400 }, // tileZ: 1, }, // callback of matched lines onMatchLinesCallback : function ( lines , board ) { }, onMatchLinesCallbackScope : undefined , // callback of eliminating chess onEliminatingChessCallback : function ( chess , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM }, onEliminatingChessCallbackScope : undefined , // callback of falling chess onFallingChessCallback : function ( board ) { // return eventEmitter; // custom falling task, fires 'complete' event to continue FSM }, onFallingChessCallback : undefined , // input: true }) Configurations Board properties board.width : Board width in tiles. board.height : Board height in tiles. board.grid.x , board.grid.y : World position of tile (0, 0) board.grid.cellWidth , board.grid.cellHeight : The width/height of the cell, in pixels. Chess properties chess.symbols : An array of possible symbols, or a callback to return a symbol. See Generate symbol chess.create , chess.scope : Callback of creating chess object . chess.moveTo.speed : Constant moving speed of chess, in pixel per-second. Callbacks onMatchLinesCallback , onMatchLinesCallbackScope : On matched lines onEliminatingChessCallback , onEliminatingChessCallbackScope : On eliminating chess onFallingChessCallback , onFallingChessCallback : On falling chess Touch input input : Set true to register default touch input logic. It also install Board plugins into Game system. Board height \u00b6 Board is separated into two parts: upper and bottom Bottom : Visible N rows , to swap chess and run matching. Upper : Invisible N rows , chess in these rows will move down, to fill bottom rows. For example, if amount of visible rows is 10 , board.height should set to 20 . Generate symbol \u00b6 Symbols are declared in property chess.symbols in a symbol array like [0, 1, 2, 3, 4, 5] , or a callback to return a symbol. The callback also use chess.scope as the scope. function ( board , tileX , tileY , excluded ) { return symbol } excluded : undefined or a symbol array. Don't return these symbols. Create chess object \u00b6 Return a game object from a callback. function ( board ) { // Create Game object (Image, Sprite, or Shape) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; } Each chess has a symbol value stored in 'symbol' key in private data. Add data changed event of 'symbol` key to change the appearance of game object via new symbol value. Callbacks \u00b6 On matched lines \u00b6 function ( lines , board ) { } lines : An array of matched lines, each line is a built-in Set object . Length of each line ( lines[i].size ) could be 5 , 4 , or 3 . lines[i].entries : An array of chess (Game Object) in a matched line. All chess game objects in matched lines will be eliminated in next stage. Add/remove chess game object in these lines, or add new line in lines array to change the eliminated targets. board : Board object . Get tile position {x,y,z} of a chess game object via var tileXYZ = gameObject . rexChess . tileXYZ ; Get chess game object of a tile position {x,y,z} via var gameObject = board . tileXYZToChess ( tileX , tileY , tileZ ); Get array of neighbor chess of a chess game object via var gameObjects = board . getNeighborChess ( chess , null ); Use cases: Get cross chess of two lines via lineA.intersect(lineB) . Add chess into line(s) to eliminate more chess. On eliminating chess \u00b6 function ( chessArray , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM } chessArray : An array of chess (Game Object) to be eliminated board : Board object Use csees: Accumulate scores via amount of eliminated chess On falling chess \u00b6 Start gameplay \u00b6 bejeweled . start (); Input control \u00b6 Default input \u00b6 Enable default input control var bejeweled = new Bejeweled ( scene , { // ... input : true }); Enable/disable temporarily. Enable bejeweled . setInputEnable (); Disable bejeweled . setInputEnable ( false ); Custom input \u00b6 Discard default input control var bejeweled = new Bejeweled ( scene , { // ... input : false }); Add custom input logic like scene . input . on ( 'pointerdown' , function ( pointer ) { var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess ) { bejeweled . selectChess1 ( chess ); } }, scene ) . on ( 'pointermove' , function ( pointer ) { if ( ! pointer . isDown ) { return ; } var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess && ( chess !== this . bejeweled . selectedChess1 )) { bejeweled . selectChess2 ( chess ); } }, scene ); Helper methods Get chess via worldXY position var chess = bejeweled . worldXYToChess ( worldX , worldY ); Get chess via tileXY position var chess = bejeweled . tileXYToChess ( tileX , tileY ); Get neighbor chess via angle var chess2 = bejeweled . getNeighborChessAtAngle ( chess1 , angle ); chess1 : Chess object, or tileXY position {x, y} . angle : Angle in radius. Get neighbor chess via direction var chess2 = bejeweled . getNeighborChessAtDirection ( chess1 , direction ); chess1 : Chess object, or tileXY position {x, y} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Bejeweled"},{"location":"board-bejeweled/#introduction","text":"Match3-like gameplay template. Author: Rex Template","title":"Introduction"},{"location":"board-bejeweled/#source-code","text":"Template , minify","title":"Source code"},{"location":"board-bejeweled/#usage","text":"Sample code","title":"Usage"},{"location":"board-bejeweled/#create-bejeweled-object","text":"var bejeweled = new Bejeweled ( scene , { board : { grid : { gridType : 'quadGrid' , x : 30 , y : 30 - 600 , cellWidth : 60 , cellHeight : 60 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 10 , height : 20 // Prepared rows: upper 10 rows }, match : { // wildcard: undefined // dirMask: undefined }, chess : { // pick random symbol from array, or a callback to return symbol symbols : [ 0 , 1 , 2 , 3 , 4 , 5 ], // symbols: function(board, tileX, tileY, excluded) { return symbol; } // User-defined chess game object create : function ( board ) { // Create Game object (Shape, Image, or Sprite) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; }, // scope for callbacks scope : undefined , // moveTo behavior moveTo : { speed : 400 }, // tileZ: 1, }, // callback of matched lines onMatchLinesCallback : function ( lines , board ) { }, onMatchLinesCallbackScope : undefined , // callback of eliminating chess onEliminatingChessCallback : function ( chess , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM }, onEliminatingChessCallbackScope : undefined , // callback of falling chess onFallingChessCallback : function ( board ) { // return eventEmitter; // custom falling task, fires 'complete' event to continue FSM }, onFallingChessCallback : undefined , // input: true }) Configurations Board properties board.width : Board width in tiles. board.height : Board height in tiles. board.grid.x , board.grid.y : World position of tile (0, 0) board.grid.cellWidth , board.grid.cellHeight : The width/height of the cell, in pixels. Chess properties chess.symbols : An array of possible symbols, or a callback to return a symbol. See Generate symbol chess.create , chess.scope : Callback of creating chess object . chess.moveTo.speed : Constant moving speed of chess, in pixel per-second. Callbacks onMatchLinesCallback , onMatchLinesCallbackScope : On matched lines onEliminatingChessCallback , onEliminatingChessCallbackScope : On eliminating chess onFallingChessCallback , onFallingChessCallback : On falling chess Touch input input : Set true to register default touch input logic. It also install Board plugins into Game system.","title":"Create bejeweled object"},{"location":"board-bejeweled/#board-height","text":"Board is separated into two parts: upper and bottom Bottom : Visible N rows , to swap chess and run matching. Upper : Invisible N rows , chess in these rows will move down, to fill bottom rows. For example, if amount of visible rows is 10 , board.height should set to 20 .","title":"Board height"},{"location":"board-bejeweled/#generate-symbol","text":"Symbols are declared in property chess.symbols in a symbol array like [0, 1, 2, 3, 4, 5] , or a callback to return a symbol. The callback also use chess.scope as the scope. function ( board , tileX , tileY , excluded ) { return symbol } excluded : undefined or a symbol array. Don't return these symbols.","title":"Generate symbol"},{"location":"board-bejeweled/#create-chess-object","text":"Return a game object from a callback. function ( board ) { // Create Game object (Image, Sprite, or Shape) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; } Each chess has a symbol value stored in 'symbol' key in private data. Add data changed event of 'symbol` key to change the appearance of game object via new symbol value.","title":"Create chess object"},{"location":"board-bejeweled/#callbacks","text":"","title":"Callbacks"},{"location":"board-bejeweled/#on-matched-lines","text":"function ( lines , board ) { } lines : An array of matched lines, each line is a built-in Set object . Length of each line ( lines[i].size ) could be 5 , 4 , or 3 . lines[i].entries : An array of chess (Game Object) in a matched line. All chess game objects in matched lines will be eliminated in next stage. Add/remove chess game object in these lines, or add new line in lines array to change the eliminated targets. board : Board object . Get tile position {x,y,z} of a chess game object via var tileXYZ = gameObject . rexChess . tileXYZ ; Get chess game object of a tile position {x,y,z} via var gameObject = board . tileXYZToChess ( tileX , tileY , tileZ ); Get array of neighbor chess of a chess game object via var gameObjects = board . getNeighborChess ( chess , null ); Use cases: Get cross chess of two lines via lineA.intersect(lineB) . Add chess into line(s) to eliminate more chess.","title":"On matched lines"},{"location":"board-bejeweled/#on-eliminating-chess","text":"function ( chessArray , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM } chessArray : An array of chess (Game Object) to be eliminated board : Board object Use csees: Accumulate scores via amount of eliminated chess","title":"On eliminating chess"},{"location":"board-bejeweled/#on-falling-chess","text":"","title":"On falling chess"},{"location":"board-bejeweled/#start-gameplay","text":"bejeweled . start ();","title":"Start gameplay"},{"location":"board-bejeweled/#input-control","text":"","title":"Input control"},{"location":"board-bejeweled/#default-input","text":"Enable default input control var bejeweled = new Bejeweled ( scene , { // ... input : true }); Enable/disable temporarily. Enable bejeweled . setInputEnable (); Disable bejeweled . setInputEnable ( false );","title":"Default input"},{"location":"board-bejeweled/#custom-input","text":"Discard default input control var bejeweled = new Bejeweled ( scene , { // ... input : false }); Add custom input logic like scene . input . on ( 'pointerdown' , function ( pointer ) { var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess ) { bejeweled . selectChess1 ( chess ); } }, scene ) . on ( 'pointermove' , function ( pointer ) { if ( ! pointer . isDown ) { return ; } var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess && ( chess !== this . bejeweled . selectedChess1 )) { bejeweled . selectChess2 ( chess ); } }, scene ); Helper methods Get chess via worldXY position var chess = bejeweled . worldXYToChess ( worldX , worldY ); Get chess via tileXY position var chess = bejeweled . tileXYToChess ( tileX , tileY ); Get neighbor chess via angle var chess2 = bejeweled . getNeighborChessAtAngle ( chess1 , angle ); chess1 : Chess object, or tileXY position {x, y} . angle : Angle in radius. Get neighbor chess via direction var chess2 = bejeweled . getNeighborChessAtDirection ( chess1 , direction ); chess1 : Chess object, or tileXY position {x, y} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Custom input"},{"location":"board-chessdata/","text":"Introduction \u00b6 Properties of chess, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Add chess data object \u00b6 Chess data will be added to game object via gameObject.rexChess once adding this game object to board, or attach any chess behavior. Get chess data \u00b6 var chessData = gameObject . rexChess ; Set tile Z \u00b6 gameObject . rexChess . setTileZ ( tileZ ); (tileX, tileY) won't be changed. Get tile position \u00b6 var tileXYZ = gameObject . rexChess . tileXYZ ; tileXYZ : Tile position {x,y,z} , return null if this chess is not added to any board. Get board \u00b6 var board = gameObject . rexChess . board ; board : Board object , or null if this chess is not added to any board. Blocker \u00b6 Set gameObject . rexChess . setBlocker (); Disable gameObject . rexChess . setBlocker ( false ); Get var blocker = gameObject . rexChess . blocker ;","title":"Chess data"},{"location":"board-chessdata/#introduction","text":"Properties of chess, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-chessdata/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-chessdata/#usage","text":"","title":"Usage"},{"location":"board-chessdata/#add-chess-data-object","text":"Chess data will be added to game object via gameObject.rexChess once adding this game object to board, or attach any chess behavior.","title":"Add chess data object"},{"location":"board-chessdata/#get-chess-data","text":"var chessData = gameObject . rexChess ;","title":"Get chess data"},{"location":"board-chessdata/#set-tile-z","text":"gameObject . rexChess . setTileZ ( tileZ ); (tileX, tileY) won't be changed.","title":"Set tile Z"},{"location":"board-chessdata/#get-tile-position","text":"var tileXYZ = gameObject . rexChess . tileXYZ ; tileXYZ : Tile position {x,y,z} , return null if this chess is not added to any board.","title":"Get tile position"},{"location":"board-chessdata/#get-board","text":"var board = gameObject . rexChess . board ; board : Board object , or null if this chess is not added to any board.","title":"Get board"},{"location":"board-chessdata/#blocker","text":"Set gameObject . rexChess . setBlocker (); Disable gameObject . rexChess . setBlocker ( false ); Get var blocker = gameObject . rexChess . blocker ;","title":"Blocker"},{"location":"board-fieldofview/","text":"Introduction \u00b6 Visible testing, to find field of view, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var fieldOfView = scene . rexBoard . add . fieldOfView ( chess , { // face: 0, // cone: undefined, // coneMode: 0, // ** pre-test ** // occupiedTest: false, // blockerTest: false, // preTestCallback: undefined, // preTestCallbackScope: undefined, // ** cost ** // costCallback: undefined, // costCallbackScope: undefined, // cost: undefined, // constant cost // debug: { // graphics: undefined, // visibleLineColor: 0x00ff00, // invisibleLineColor: 0xff0000, // log: false, // } }) face : Face of chess. 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . cone : View of cone. Tile position or chess which not in view of cone will be invisible. undefined : Ignore this feature coneMode : Unit of cone , in direction or angle. 'direction' , or 0 : Cone in directions. For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set face : 0, cone : 2, coneMode: 0 'angle' , or 1 : Cone in angle. For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set face : 0, cone : 120, coneMode: 1 Pre-test : Test tiles on visible path. occupiedTest : Set true to test if target tile position is occupied or not. blockerTest : Set true to test blocker property . preTestCallback , preTestCallbackScope : Custom pre-test function, return false to discard cost function. function ( tileXYArray , visiblePoints , fieldOfView ) { // return false; } tileXYArray[0] is current tileXY position of chess. Cost function of each tile on visible path cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. debug : debug.graphics : A graphics object for showing debug messages. debug.visibleLineColor : Color of visible line. Set undefined to not draw any line. debug.invisibleLineColor : Color of invisible line. Set undefined to not draw any line. Set pre-test function \u00b6 fieldOfView . setPreTestFunction ( callback , scope ); callback var callback = function ( tileXYArray , visiblePoints , fieldOfView ) { return false ; } tileXYArray[0] is current tileXY position of chess. Set cost function \u00b6 Constant cost for each non-blocked tile fieldOfView . setCostFunction ( cost ); Get cost via callback fieldOfView . setCostFunction ( callback , scope ); callback var callback = function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. Is tileXY/chess visible \u00b6 var isVisible = fieldOfView . isInLOS ( chess ); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY); chess : Chess object or tileXY visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Get tileXY array in field of view \u00b6 var tileXYArray = fieldOfView . findFOV (); // var tileXYArray = fieldOfView.findFOV(visiblePoints); // var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY); // var out = fieldOfView.findFOV(visiblePoints, out); // var out = fieldOfView.findFOV(visiblePoints, originTileXY, out); visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. out : Returned tileXY array. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array \u00b6 Filter visible tileXY array var out = fieldOfView . LOS ( chessArray ); // var out = fieldOfView.LOS(chessArray, originTileXY); // var out = fieldOfView.LOS(chessArray, out); // var out = fieldOfView.LOS(chessArray, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array with visible points var out = fieldOfView . LOS ( chessArray , visiblePoints ); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY); // var out = fieldOfView.LOS(chessArray, visiblePoints, out); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Face \u00b6 Face direction Get var face = fieldOfView . face ; Set fieldOfView . setFace ( direction ); or fieldOfView . face = direction ; // fieldOfView.face ++; face : 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Debug \u00b6 Clear debug graphics fieldOfView . clearDebugGraphics (); Set color of lines fieldOfView . setDebugLineColor ( visibleLineColor , invisibleLineColor ); visibleLineColor , invisibleLineColor : Set undefined to not draw any line.","title":"Field of view"},{"location":"board-fieldofview/#introduction","text":"Visible testing, to find field of view, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-fieldofview/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-fieldofview/#usage","text":"Sample code","title":"Usage"},{"location":"board-fieldofview/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-fieldofview/#create-instance","text":"var fieldOfView = scene . rexBoard . add . fieldOfView ( chess , { // face: 0, // cone: undefined, // coneMode: 0, // ** pre-test ** // occupiedTest: false, // blockerTest: false, // preTestCallback: undefined, // preTestCallbackScope: undefined, // ** cost ** // costCallback: undefined, // costCallbackScope: undefined, // cost: undefined, // constant cost // debug: { // graphics: undefined, // visibleLineColor: 0x00ff00, // invisibleLineColor: 0xff0000, // log: false, // } }) face : Face of chess. 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . cone : View of cone. Tile position or chess which not in view of cone will be invisible. undefined : Ignore this feature coneMode : Unit of cone , in direction or angle. 'direction' , or 0 : Cone in directions. For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set face : 0, cone : 2, coneMode: 0 'angle' , or 1 : Cone in angle. For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set face : 0, cone : 120, coneMode: 1 Pre-test : Test tiles on visible path. occupiedTest : Set true to test if target tile position is occupied or not. blockerTest : Set true to test blocker property . preTestCallback , preTestCallbackScope : Custom pre-test function, return false to discard cost function. function ( tileXYArray , visiblePoints , fieldOfView ) { // return false; } tileXYArray[0] is current tileXY position of chess. Cost function of each tile on visible path cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. debug : debug.graphics : A graphics object for showing debug messages. debug.visibleLineColor : Color of visible line. Set undefined to not draw any line. debug.invisibleLineColor : Color of invisible line. Set undefined to not draw any line.","title":"Create instance"},{"location":"board-fieldofview/#set-pre-test-function","text":"fieldOfView . setPreTestFunction ( callback , scope ); callback var callback = function ( tileXYArray , visiblePoints , fieldOfView ) { return false ; } tileXYArray[0] is current tileXY position of chess.","title":"Set pre-test function"},{"location":"board-fieldofview/#set-cost-function","text":"Constant cost for each non-blocked tile fieldOfView . setCostFunction ( cost ); Get cost via callback fieldOfView . setCostFunction ( callback , scope ); callback var callback = function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path.","title":"Set cost function"},{"location":"board-fieldofview/#is-tilexychess-visible","text":"var isVisible = fieldOfView . isInLOS ( chess ); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY); chess : Chess object or tileXY visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Is tileXY/chess visible"},{"location":"board-fieldofview/#get-tilexy-array-in-field-of-view","text":"var tileXYArray = fieldOfView . findFOV (); // var tileXYArray = fieldOfView.findFOV(visiblePoints); // var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY); // var out = fieldOfView.findFOV(visiblePoints, out); // var out = fieldOfView.findFOV(visiblePoints, originTileXY, out); visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. out : Returned tileXY array. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Get tileXY array in field of view"},{"location":"board-fieldofview/#filter-visible-tilexy-array","text":"Filter visible tileXY array var out = fieldOfView . LOS ( chessArray ); // var out = fieldOfView.LOS(chessArray, originTileXY); // var out = fieldOfView.LOS(chessArray, out); // var out = fieldOfView.LOS(chessArray, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array with visible points var out = fieldOfView . LOS ( chessArray , visiblePoints ); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY); // var out = fieldOfView.LOS(chessArray, visiblePoints, out); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Filter visible tileXY array"},{"location":"board-fieldofview/#face","text":"Face direction Get var face = fieldOfView . face ; Set fieldOfView . setFace ( direction ); or fieldOfView . face = direction ; // fieldOfView.face ++; face : 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid .","title":"Face"},{"location":"board-fieldofview/#debug","text":"Clear debug graphics fieldOfView . clearDebugGraphics (); Set color of lines fieldOfView . setDebugLineColor ( visibleLineColor , invisibleLineColor ); visibleLineColor , invisibleLineColor : Set undefined to not draw any line.","title":"Debug"},{"location":"board-hexagongrid/","text":"Introduction \u00b6 Hexagon grid object of Board system. Author: Rex Grid object of board Source code \u00b6 Included in board plugin . Usage \u00b6 See board examples . Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var grid = scene . rexBoard . add . hexagonGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , // size: undefined, staggeraxis : 1 , staggerindex : 1 }); x , y : World position of origin tile (i.e. tileX = 0, tileY = 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. size : Distance between center to each corner. Get cellWidth and cellHeight from size if this parameter is not undefined. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd Set world position of tile (0, 0) \u00b6 grid . setOriginPosition ( worldX , worldY ); Set cell size \u00b6 grid . setCellSize ( cellWidth , cellHeight ); Set grid type \u00b6 grid . setType ( staggeraxis , staggerindex ); staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd Get world position \u00b6 var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Get tile position \u00b6 var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Directions \u00b6 staggeraxis = 0 / y 0 : Down-right 1 : Down 2 : Down-left 3 : Up-left 4 : Up 5 : Up-right staggeraxis = 1 / x 0 : Right 1 : Down-right 2 : Down-left 3 : Left 4 : Up-left 5 : Up-right","title":"Hexagon"},{"location":"board-hexagongrid/#introduction","text":"Hexagon grid object of Board system. Author: Rex Grid object of board","title":"Introduction"},{"location":"board-hexagongrid/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-hexagongrid/#usage","text":"See board examples .","title":"Usage"},{"location":"board-hexagongrid/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-hexagongrid/#create-instance","text":"var grid = scene . rexBoard . add . hexagonGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , // size: undefined, staggeraxis : 1 , staggerindex : 1 }); x , y : World position of origin tile (i.e. tileX = 0, tileY = 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. size : Distance between center to each corner. Get cellWidth and cellHeight from size if this parameter is not undefined. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd","title":"Create instance"},{"location":"board-hexagongrid/#set-world-position-of-tile-0-0","text":"grid . setOriginPosition ( worldX , worldY );","title":"Set world position of tile (0, 0)"},{"location":"board-hexagongrid/#set-cell-size","text":"grid . setCellSize ( cellWidth , cellHeight );","title":"Set cell size"},{"location":"board-hexagongrid/#set-grid-type","text":"grid . setType ( staggeraxis , staggerindex ); staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd","title":"Set grid type"},{"location":"board-hexagongrid/#get-world-position","text":"var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get world position"},{"location":"board-hexagongrid/#get-tile-position","text":"var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get tile position"},{"location":"board-hexagongrid/#directions","text":"staggeraxis = 0 / y 0 : Down-right 1 : Down 2 : Down-left 3 : Up-left 4 : Up 5 : Up-right staggeraxis = 1 / x 0 : Right 1 : Down-right 2 : Down-left 3 : Left 4 : Up-left 5 : Up-right","title":"Directions"},{"location":"board-hexagonmap/","text":"Introduction \u00b6 Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Author: Rex Help method of board Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create tile positions \u00b6 Hexagon \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . hexagon ( board , radius ); // var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out); tileXYArray : An array of tile position {x, y} . board : Board object . radius : Radius in tile count. staggeraxis y x Parallelogram \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . parallelogram ( board , type , width , height ); // var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . width , height : Size of parallelogram type\\staggeraxis y x 0 1 2 Triangle \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . triangle ( board , type , height ); // var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . height : Size of Triangle type\\staggeraxis y x 0 1 Retrieve tile positions \u00b6 Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. var tileXYArray = board . fit ( tileXYArray ); Retrieve tile positions var tileXY ; for ( var i = 0 , cnt = tileXYArray . length ; i < cnt ; i ++ ) { tileXY = tileXYArray [ i ]; // ... }","title":"Hexagon map"},{"location":"board-hexagonmap/#introduction","text":"Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Author: Rex Help method of board","title":"Introduction"},{"location":"board-hexagonmap/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-hexagonmap/#usage","text":"Sample code","title":"Usage"},{"location":"board-hexagonmap/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-hexagonmap/#create-tile-positions","text":"","title":"Create tile positions"},{"location":"board-hexagonmap/#hexagon","text":"var tileXYArray = scene . rexBoard . hexagonMap . hexagon ( board , radius ); // var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out); tileXYArray : An array of tile position {x, y} . board : Board object . radius : Radius in tile count. staggeraxis y x","title":"Hexagon"},{"location":"board-hexagonmap/#parallelogram","text":"var tileXYArray = scene . rexBoard . hexagonMap . parallelogram ( board , type , width , height ); // var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . width , height : Size of parallelogram type\\staggeraxis y x 0 1 2","title":"Parallelogram"},{"location":"board-hexagonmap/#triangle","text":"var tileXYArray = scene . rexBoard . hexagonMap . triangle ( board , type , height ); // var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . height : Size of Triangle type\\staggeraxis y x 0 1","title":"Triangle"},{"location":"board-hexagonmap/#retrieve-tile-positions","text":"Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. var tileXYArray = board . fit ( tileXYArray ); Retrieve tile positions var tileXY ; for ( var i = 0 , cnt = tileXYArray . length ; i < cnt ; i ++ ) { tileXY = tileXYArray [ i ]; // ... }","title":"Retrieve tile positions"},{"location":"board-match/","text":"Introduction \u00b6 Get matched chess. Author: Rex Application of Board system Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add match object \u00b6 var match = scene . rexBoard . add . match ({ board : board , // wildcard: undefined // dirMask: undefined }); board : A board object wildcard : A string or a number dirMask : Enable/Disable matching at directions, all directions are enbale by default. Quad grid , 4 directions { 0 : true , // set false to disable left/right matching 1 : true // set false to disable up/down matching } Quad grid , 8 directions { 0 : true , // set false to disable left/right matching 1 : true , // set false to disable up/down matching 4 : true , // set false to disable left-down/right-up matching 5 : true // set false to disable right-down/left-up matching } Hexagon grid { 0 : true , 1 : true , 3 : true } Custom class \u00b6 Define class class MyMatch extends RexPlugins . Board . Match { constructor ( config ) { super ( config ); // ... } // ... } Create instance var match = new MyMatch ( config ); Set board \u00b6 Board object could be assigned later. match . setBoard ( board ); Update symbols \u00b6 Each tile position (tileX, tileY) has a symbol. Update all symbols in board \u00b6 match . refreshSymbols ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); tileXY : Tile position {x, y} board : Board object symbol : A string or a number null : No symbol Updata a symbol \u00b6 match . setSymbol ( tileX , tileY , symbol ); or match . setSymbol ( tileX , tileY , ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); Get symbol \u00b6 var symbol = match . getSymbol ( tileX , tileY ); Dump symbols \u00b6 match . dumpSymobls ( function ( tileXY , symbol , board ) { }, scope ) tileXY : Tile position {x, y} symbol : A string or a number null : No symbol board : Board object Directions mask \u00b6 Enable/Disable matching at directions, all directions are enbale by default. match . setDirMask ( dir , value ); dir : Quad grid , 4 directions : 0 , 1 Quad grid , 8 directions : 0 , 1 , 4 , 5 Hexagon grid : 0 , 1 , 2 value : true or false Match \u00b6 Match-N \u00b6 match . match ( n , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); n : A number, to get matched chess with n equal symbols result : A group of chess { tileXY : [], direction : 0 pattern : symbol } tileXY : An array of tile positions {x, y} direction : Direction of this chess group 0 , 1 , for quad grid with 4 directions 0 , 1 , 4 , 5 , for quad grid with 8 directions 0 , 1 , 2 , for hexagon grid pattern : Matched symbol board : Board object Any match-N \u00b6 var hasAnyMatchN = match . anyMatch ( n ); Match pattern \u00b6 match . match ( pattern , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); pattern : A list of symbols Any match pattern \u00b6 var hasAnyMatchN = match . anyMatch ( pattern );","title":"Match"},{"location":"board-match/#introduction","text":"Get matched chess. Author: Rex Application of Board system","title":"Introduction"},{"location":"board-match/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-match/#usage","text":"Sample code","title":"Usage"},{"location":"board-match/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-match/#add-match-object","text":"var match = scene . rexBoard . add . match ({ board : board , // wildcard: undefined // dirMask: undefined }); board : A board object wildcard : A string or a number dirMask : Enable/Disable matching at directions, all directions are enbale by default. Quad grid , 4 directions { 0 : true , // set false to disable left/right matching 1 : true // set false to disable up/down matching } Quad grid , 8 directions { 0 : true , // set false to disable left/right matching 1 : true , // set false to disable up/down matching 4 : true , // set false to disable left-down/right-up matching 5 : true // set false to disable right-down/left-up matching } Hexagon grid { 0 : true , 1 : true , 3 : true }","title":"Add match object"},{"location":"board-match/#custom-class","text":"Define class class MyMatch extends RexPlugins . Board . Match { constructor ( config ) { super ( config ); // ... } // ... } Create instance var match = new MyMatch ( config );","title":"Custom class"},{"location":"board-match/#set-board","text":"Board object could be assigned later. match . setBoard ( board );","title":"Set board"},{"location":"board-match/#update-symbols","text":"Each tile position (tileX, tileY) has a symbol.","title":"Update symbols"},{"location":"board-match/#update-all-symbols-in-board","text":"match . refreshSymbols ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); tileXY : Tile position {x, y} board : Board object symbol : A string or a number null : No symbol","title":"Update all symbols in board"},{"location":"board-match/#updata-a-symbol","text":"match . setSymbol ( tileX , tileY , symbol ); or match . setSymbol ( tileX , tileY , ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope );","title":"Updata a symbol"},{"location":"board-match/#get-symbol","text":"var symbol = match . getSymbol ( tileX , tileY );","title":"Get symbol"},{"location":"board-match/#dump-symbols","text":"match . dumpSymobls ( function ( tileXY , symbol , board ) { }, scope ) tileXY : Tile position {x, y} symbol : A string or a number null : No symbol board : Board object","title":"Dump symbols"},{"location":"board-match/#directions-mask","text":"Enable/Disable matching at directions, all directions are enbale by default. match . setDirMask ( dir , value ); dir : Quad grid , 4 directions : 0 , 1 Quad grid , 8 directions : 0 , 1 , 4 , 5 Hexagon grid : 0 , 1 , 2 value : true or false","title":"Directions mask"},{"location":"board-match/#match","text":"","title":"Match"},{"location":"board-match/#match-n","text":"match . match ( n , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); n : A number, to get matched chess with n equal symbols result : A group of chess { tileXY : [], direction : 0 pattern : symbol } tileXY : An array of tile positions {x, y} direction : Direction of this chess group 0 , 1 , for quad grid with 4 directions 0 , 1 , 4 , 5 , for quad grid with 8 directions 0 , 1 , 2 , for hexagon grid pattern : Matched symbol board : Board object","title":"Match-N"},{"location":"board-match/#any-match-n","text":"var hasAnyMatchN = match . anyMatch ( n );","title":"Any match-N"},{"location":"board-match/#match-pattern","text":"match . match ( pattern , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); pattern : A list of symbols","title":"Match pattern"},{"location":"board-match/#any-match-pattern","text":"var hasAnyMatchN = match . anyMatch ( pattern );","title":"Any match pattern"},{"location":"board-miniboard/","text":"Introduction \u00b6 Chess Container , to rotate/mirror/drag chess together. Author: Rex Container Game object of chess group Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add Container \u00b6 var miniBoard = scene . rexBoard . add . miniBoard ( x , y , { grid : grid , draggable : undefined , }); grid : Create board object first, then get grid object via board.grid . gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid draggable : Set true to enable dragging events Add chess \u00b6 miniBoard . addChess ( gameObject , tileX , tileY , tileZ ); chess : A game object. tileX , tileY , tileZ : Tile position. Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . These world properties of chess will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Remove chess \u00b6 Remove chess object from board miniBoard . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board miniBoard . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess miniBoard . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object. Main board \u00b6 Put chess to a main-board ( Board object ) with the same tile position in mini-board, or pull chess out from main-board. Put on main-board \u00b6 miniBoard . putOnMainBoard ( mainBoard , tileX , tileY ); // miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align); mainBoard : Board object . tileX , tileY : Tile position to put on. align : Set true to align world position of each chess Game object to grid of main-board. Default is true . or miniBoard . putOnMainBoard ( mainBoard ); To put this mini-board to nearest grid of main-board. Pull out from main-board \u00b6 miniBoard . pullOutFromMainBoard (); Remove all chess from main-board. Put back to previous main-board \u00b6 miniBoard . putBack (); Previous main-board and tile position will be remembered for putting back. Is overlapping to main-board \u00b6 Return true if any chess is overlapping to main-board. miniBoard . isOverlapping ( mainBoard ); or miniBoard . isOverlapping ( mainBoard , tileZ ); Align world position to grid of main-board \u00b6 miniBoard . alignToMainBoard ( mainBoard , tileX , tileY ); mainBoard : Board object tileX , tileY : Tile position on main-board or miniBoard . alignToMainBoard ( mainBoard ); to align this mini-board to nearest grid of main-board. Get current main-board \u00b6 var board = miniBoard . mainBoard ; board : Board object Return null if this mini-board is not at any main-board. Rotate \u00b6 Can rotate \u00b6 miniBoard . canRotate ( n ); n : Rotate to direction current direction + n or miniBoard . canRotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Always return true if this mini-board is not on a main-board. Rotate \u00b6 miniBoard . rotate ( n ); n : Rotate direction to current direction + n or miniBoard . rotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Return true if this rotating request is accepted. var isSuccess = miniBoard . lastTransferResult ; Mirror \u00b6 Can mirror \u00b6 miniBoard . canMirror ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Always return true if this mini-board is not on a main-board. Mirror \u00b6 miniBoard . rotate ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Return true if this mirroring request is accepted. var isSuccess = miniBoard . lastTransferResult ; Touch events \u00b6 Set interactive \u00b6 Enable miniBoard . setInteractive (); Disable miniBoard . setInteractive ( false ); Set drag-able \u00b6 Enable miniBoard . setDragEnable (); Disable miniBoard . setDragEnable ( false ); Drag events \u00b6 Drag-start miniBoard . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* miniBoard.pullOutFromMainBoard(); */ }, scope ); Pull out from main-board for dragging. Dragging miniBoard . on ( 'drag' , function ( pointer , dragX , dragY ){ /* miniBoard.setPosition(dragX, dragY); if (miniBoard.isOverlapping(mainBoard)) { miniBoard.alignToMainBoard(mainBoard); } */ }, scope ); Set world position of mini-board via ( dragX , dragY ), align to nearest grid of main-board if overlapping with that main-board. Drag-end miniBoard . on ( 'dragend' , function ( pointer , dragX , dragY ){ /* miniBoard.putOnMainBoard(mainBoard); if (miniBoard.mainBoard) { } */ }, scope ); Put chess on main-board at nearest grid. Touch event \u00b6 Pointer down at a chess miniBoard . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up at a chess miniBoard . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move to another chess miniBoard . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Mini board"},{"location":"board-miniboard/#introduction","text":"Chess Container , to rotate/mirror/drag chess together. Author: Rex Container Game object of chess group","title":"Introduction"},{"location":"board-miniboard/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-miniboard/#usage","text":"Sample code","title":"Usage"},{"location":"board-miniboard/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-miniboard/#add-container","text":"var miniBoard = scene . rexBoard . add . miniBoard ( x , y , { grid : grid , draggable : undefined , }); grid : Create board object first, then get grid object via board.grid . gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid draggable : Set true to enable dragging events","title":"Add Container"},{"location":"board-miniboard/#add-chess","text":"miniBoard . addChess ( gameObject , tileX , tileY , tileZ ); chess : A game object. tileX , tileY , tileZ : Tile position. Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . These world properties of chess will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask","title":"Add chess"},{"location":"board-miniboard/#remove-chess","text":"Remove chess object from board miniBoard . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board miniBoard . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess miniBoard . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object.","title":"Remove chess"},{"location":"board-miniboard/#main-board","text":"Put chess to a main-board ( Board object ) with the same tile position in mini-board, or pull chess out from main-board.","title":"Main board"},{"location":"board-miniboard/#put-on-main-board","text":"miniBoard . putOnMainBoard ( mainBoard , tileX , tileY ); // miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align); mainBoard : Board object . tileX , tileY : Tile position to put on. align : Set true to align world position of each chess Game object to grid of main-board. Default is true . or miniBoard . putOnMainBoard ( mainBoard ); To put this mini-board to nearest grid of main-board.","title":"Put on main-board"},{"location":"board-miniboard/#pull-out-from-main-board","text":"miniBoard . pullOutFromMainBoard (); Remove all chess from main-board.","title":"Pull out from main-board"},{"location":"board-miniboard/#put-back-to-previous-main-board","text":"miniBoard . putBack (); Previous main-board and tile position will be remembered for putting back.","title":"Put back to previous main-board"},{"location":"board-miniboard/#is-overlapping-to-main-board","text":"Return true if any chess is overlapping to main-board. miniBoard . isOverlapping ( mainBoard ); or miniBoard . isOverlapping ( mainBoard , tileZ );","title":"Is overlapping to main-board"},{"location":"board-miniboard/#align-world-position-to-grid-of-main-board","text":"miniBoard . alignToMainBoard ( mainBoard , tileX , tileY ); mainBoard : Board object tileX , tileY : Tile position on main-board or miniBoard . alignToMainBoard ( mainBoard ); to align this mini-board to nearest grid of main-board.","title":"Align world position to grid of main-board"},{"location":"board-miniboard/#get-current-main-board","text":"var board = miniBoard . mainBoard ; board : Board object Return null if this mini-board is not at any main-board.","title":"Get current main-board"},{"location":"board-miniboard/#rotate","text":"","title":"Rotate"},{"location":"board-miniboard/#can-rotate","text":"miniBoard . canRotate ( n ); n : Rotate to direction current direction + n or miniBoard . canRotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Always return true if this mini-board is not on a main-board.","title":"Can rotate"},{"location":"board-miniboard/#rotate_1","text":"miniBoard . rotate ( n ); n : Rotate direction to current direction + n or miniBoard . rotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Return true if this rotating request is accepted. var isSuccess = miniBoard . lastTransferResult ;","title":"Rotate"},{"location":"board-miniboard/#mirror","text":"","title":"Mirror"},{"location":"board-miniboard/#can-mirror","text":"miniBoard . canMirror ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Always return true if this mini-board is not on a main-board.","title":"Can mirror"},{"location":"board-miniboard/#mirror_1","text":"miniBoard . rotate ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Return true if this mirroring request is accepted. var isSuccess = miniBoard . lastTransferResult ;","title":"Mirror"},{"location":"board-miniboard/#touch-events","text":"","title":"Touch events"},{"location":"board-miniboard/#set-interactive","text":"Enable miniBoard . setInteractive (); Disable miniBoard . setInteractive ( false );","title":"Set interactive"},{"location":"board-miniboard/#set-drag-able","text":"Enable miniBoard . setDragEnable (); Disable miniBoard . setDragEnable ( false );","title":"Set drag-able"},{"location":"board-miniboard/#drag-events","text":"Drag-start miniBoard . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* miniBoard.pullOutFromMainBoard(); */ }, scope ); Pull out from main-board for dragging. Dragging miniBoard . on ( 'drag' , function ( pointer , dragX , dragY ){ /* miniBoard.setPosition(dragX, dragY); if (miniBoard.isOverlapping(mainBoard)) { miniBoard.alignToMainBoard(mainBoard); } */ }, scope ); Set world position of mini-board via ( dragX , dragY ), align to nearest grid of main-board if overlapping with that main-board. Drag-end miniBoard . on ( 'dragend' , function ( pointer , dragX , dragY ){ /* miniBoard.putOnMainBoard(mainBoard); if (miniBoard.mainBoard) { } */ }, scope ); Put chess on main-board at nearest grid.","title":"Drag events"},{"location":"board-miniboard/#touch-event","text":"Pointer down at a chess miniBoard . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up at a chess miniBoard . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move to another chess miniBoard . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Touch event"},{"location":"board-monopoly/","text":"Introduction \u00b6 Move through path tiles, used in monopoly-like application, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var monopoly = scene . rexBoard . add . monopoly ( chess , { face : 0 , // ** cost ** // pathTileZ: 0, // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined }) face : Moving direction. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Cost function pathTileZ : TileZ of path tiles. cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , monopoly ) { return cost ; } Board : monopoly.board Chess game object : monopoly.gameObject Cost of stop : monopoly.STOP Cost of blocker : monopoly.BLOCKER Cost function \u00b6 var callback = function ( curTileXY , preTileXY , monopoly ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . monopoly : Path finder object. monopoly.board : Board object monopoly.gameObject : Chess game object. monopoly.STOP : Cost of stop. Return this value means chess will stop at curTileXY . monopoly.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY . Set cost function \u00b6 Constant cost for each non-blocked tile monopoly . setCostFunction ( cost ); Get cost via callback monopoly . setCostFunction ( callback , scope ); Set face direction \u00b6 monopoly . setFace ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Moving direction Get path toward this face direction. Get path \u00b6 var tileXYArray = monopoly . getPath ( movingPoints ); // var out = monopoly.getPath(movingPoints, out); tileXYArray : Moving path in an array of tile positions {x,y} Uses moveTo behavior to move chess along path.","title":"Monopoly"},{"location":"board-monopoly/#introduction","text":"Move through path tiles, used in monopoly-like application, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-monopoly/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-monopoly/#usage","text":"Sample code","title":"Usage"},{"location":"board-monopoly/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-monopoly/#create-instance","text":"var monopoly = scene . rexBoard . add . monopoly ( chess , { face : 0 , // ** cost ** // pathTileZ: 0, // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined }) face : Moving direction. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Cost function pathTileZ : TileZ of path tiles. cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , monopoly ) { return cost ; } Board : monopoly.board Chess game object : monopoly.gameObject Cost of stop : monopoly.STOP Cost of blocker : monopoly.BLOCKER","title":"Create instance"},{"location":"board-monopoly/#cost-function","text":"var callback = function ( curTileXY , preTileXY , monopoly ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . monopoly : Path finder object. monopoly.board : Board object monopoly.gameObject : Chess game object. monopoly.STOP : Cost of stop. Return this value means chess will stop at curTileXY . monopoly.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY .","title":"Cost function"},{"location":"board-monopoly/#set-cost-function","text":"Constant cost for each non-blocked tile monopoly . setCostFunction ( cost ); Get cost via callback monopoly . setCostFunction ( callback , scope );","title":"Set cost function"},{"location":"board-monopoly/#set-face-direction","text":"monopoly . setFace ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Moving direction Get path toward this face direction.","title":"Set face direction"},{"location":"board-monopoly/#get-path","text":"var tileXYArray = monopoly . getPath ( movingPoints ); // var out = monopoly.getPath(movingPoints, out); tileXYArray : Moving path in an array of tile positions {x,y} Uses moveTo behavior to move chess along path.","title":"Get path"},{"location":"board-moveto/","text":"Introduction \u00b6 Move chess towards target position with a steady speed, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var moveTo = scene . rexBoard . add . moveTo ( chess , { // speed: 400, // rotateToTarget: false, // occupiedTest: false, // blockerTest: false, // sneak: false, }) speed : moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. occupiedTest : Set true to test if target tile position is occupied or not, in moveable testing. blockerTest : Set true to test blocker property in moveable testing. sneak : Set true to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied. occupiedTest will be ignored when sneak is true . Move to destination tile \u00b6 moveTo . moveTo ( tileX , tileY ); // moveTo.moveTo(tileXY); tileXY : Tile position {x,y} Move to neighbor tile \u00b6 moveTo . moveToward ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Move to random neighbor tile \u00b6 moveTo . moveToRandomNeighbor (); Move away or move closer \u00b6 Move away from a tile position moveTo . moveAway ( tileX , tileY ); or moveTo . moveAway ( tileXY ); tileXY : Tile position {x,y} Move closer to a tile position moveTo . moveCloser ( tileX , tileY ); or moveTo . moveCloser ( tileXY ); tileXY : Tile position {x,y} Can move to tile \u00b6 var canMoveTo = moveTo . canMoveTo ( tileX , tileY ); Return true if chess can move to (tileX, tileY) Last move result \u00b6 var lastMoveResult = moveTo . lastMoveResult ; Return true if chess is moved by moveTo.moveTo() , moveTo.moveToward() , or moveTo.moveToRandomNeighbor() Destination \u00b6 var destinationTileX = moveTo . destinationTileX ; var destinationTileY = moveTo . destinationTileY ; var destinationDirection = moveTo . destinationDirection ; Pause, Resume, stop moving \u00b6 moveTo . pause (); moveTo . resume (); moveTo . stop (); Enable \u00b6 Enable/resume (default) moveTo . setEnable (); or moveTo . enable = true ; Disable/pause moveTo . setEnable ( false ); or moveTo . enable = false ; Set speed \u00b6 moveTo . setSpeed ( speed ); // moveTo.speed = speed; Set rotate-to-target \u00b6 moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target Events \u00b6 Try to move on an occupied tile position moveTo . on ( 'occupy' , function ( occupiedChess , gameObject , moveTo ){ // Move away occupiedChess }); On reached target moveTo . on ( 'complete' , function ( moveTo , gameObject ){}); // moveTo.once('complete', function(moveTo, gameObject){}); Status \u00b6 Is moving var isRunning = moveTo . isRunning ;","title":"Move to"},{"location":"board-moveto/#introduction","text":"Move chess towards target position with a steady speed, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-moveto/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-moveto/#usage","text":"Sample code","title":"Usage"},{"location":"board-moveto/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-moveto/#create-instance","text":"var moveTo = scene . rexBoard . add . moveTo ( chess , { // speed: 400, // rotateToTarget: false, // occupiedTest: false, // blockerTest: false, // sneak: false, }) speed : moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. occupiedTest : Set true to test if target tile position is occupied or not, in moveable testing. blockerTest : Set true to test blocker property in moveable testing. sneak : Set true to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied. occupiedTest will be ignored when sneak is true .","title":"Create instance"},{"location":"board-moveto/#move-to-destination-tile","text":"moveTo . moveTo ( tileX , tileY ); // moveTo.moveTo(tileXY); tileXY : Tile position {x,y}","title":"Move to destination tile"},{"location":"board-moveto/#move-to-neighbor-tile","text":"moveTo . moveToward ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Move to neighbor tile"},{"location":"board-moveto/#move-to-random-neighbor-tile","text":"moveTo . moveToRandomNeighbor ();","title":"Move to random neighbor tile"},{"location":"board-moveto/#move-away-or-move-closer","text":"Move away from a tile position moveTo . moveAway ( tileX , tileY ); or moveTo . moveAway ( tileXY ); tileXY : Tile position {x,y} Move closer to a tile position moveTo . moveCloser ( tileX , tileY ); or moveTo . moveCloser ( tileXY ); tileXY : Tile position {x,y}","title":"Move away or move closer"},{"location":"board-moveto/#can-move-to-tile","text":"var canMoveTo = moveTo . canMoveTo ( tileX , tileY ); Return true if chess can move to (tileX, tileY)","title":"Can move to tile"},{"location":"board-moveto/#last-move-result","text":"var lastMoveResult = moveTo . lastMoveResult ; Return true if chess is moved by moveTo.moveTo() , moveTo.moveToward() , or moveTo.moveToRandomNeighbor()","title":"Last move result"},{"location":"board-moveto/#destination","text":"var destinationTileX = moveTo . destinationTileX ; var destinationTileY = moveTo . destinationTileY ; var destinationDirection = moveTo . destinationDirection ;","title":"Destination"},{"location":"board-moveto/#pause-resume-stop-moving","text":"moveTo . pause (); moveTo . resume (); moveTo . stop ();","title":"Pause, Resume, stop moving"},{"location":"board-moveto/#enable","text":"Enable/resume (default) moveTo . setEnable (); or moveTo . enable = true ; Disable/pause moveTo . setEnable ( false ); or moveTo . enable = false ;","title":"Enable"},{"location":"board-moveto/#set-speed","text":"moveTo . setSpeed ( speed ); // moveTo.speed = speed;","title":"Set speed"},{"location":"board-moveto/#set-rotate-to-target","text":"moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target","title":"Set rotate-to-target"},{"location":"board-moveto/#events","text":"Try to move on an occupied tile position moveTo . on ( 'occupy' , function ( occupiedChess , gameObject , moveTo ){ // Move away occupiedChess }); On reached target moveTo . on ( 'complete' , function ( moveTo , gameObject ){}); // moveTo.once('complete', function(moveTo, gameObject){});","title":"Events"},{"location":"board-moveto/#status","text":"Is moving var isRunning = moveTo . isRunning ;","title":"Status"},{"location":"board-overview/","text":"List of board plugins \u00b6 Board \u00b6 Board Grids Quad grid Hexagon grid Chess Shapes \u00b6 Shape Behaviors \u00b6 Move to Applications \u00b6 Path finder Monopoly Field of view Match Hexagon map Mini-board \u00b6 Mini-board Templates \u00b6 Bejeweled","title":"Overview"},{"location":"board-overview/#list-of-board-plugins","text":"","title":"List of board plugins"},{"location":"board-overview/#board","text":"Board Grids Quad grid Hexagon grid Chess","title":"Board"},{"location":"board-overview/#shapes","text":"Shape","title":"Shapes"},{"location":"board-overview/#behaviors","text":"Move to","title":"Behaviors"},{"location":"board-overview/#applications","text":"Path finder Monopoly Field of view Match Hexagon map","title":"Applications"},{"location":"board-overview/#mini-board","text":"Mini-board","title":"Mini-board"},{"location":"board-overview/#templates","text":"Bejeweled","title":"Templates"},{"location":"board-pathfinder/","text":"Introduction \u00b6 Find moveable area or moving path, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var pathFinder = scene . rexBoard . add . pathFinder ( chess , { // occupiedTest: false, // blockerTest: false, // ** cost ** // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined, // cacheCost: true, // pathMode: 10, // A* // weight: 10, // weight for A* searching mode // shuffleNeighbors: false, }) occupiedTest : Set true to test if target tile position is occupied or not, in cost function. blockerTest : Set true to test blocker property in cost function. Cost function cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , preTile , pathFinder ) { return cost ; } Board : pathFinder.board Chess game object : pathFinder.gameObject Cost of blocker : pathFinder.BLOCKER pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 weight : Weight parameter for A* searching mode. cacheCost : Set false to get cost every time. It is useful when cost is a function of (current tile, previous tile). shuffleNeighbors : Shuffle neighbors. Cost function \u00b6 var callback = function ( curTileXY , preTileXY , pathFinder ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . preTileXY.pathCost : Path cost of preTilexY . preTileXY.preNodes : Previous tiles of preTileXY . pathFinder : Path finder object. pathFinder.board : Board object pathFinder.gameObject : Chess game object. pathFinder.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY . Set cost function \u00b6 Constant cost for each non-blocked tile pathFinder . setCostFunction ( cost ); Get cost via callback pathFinder . setCostFunction ( callback , scope ); Set path mode \u00b6 pathFinder . setPathMode ( pathMode ) pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 Find moveable area \u00b6 var tileXYArray = pathFinder . findArea ( movingPoints ); // var out = pathFinder.findArea(movingPoints, out); movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. tileXYArray : An array of moveable tile positions {x,y,pathCost} Get shortest path to a moveable tile \u00b6 var tileXYArray = pathFinder . getPath ( endTileXY ); endTileXY : Tile position of moveable area in last result of pathFinder.findArea() tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. Path mode Path info of each tile is calculated during pathFinder.findArea() Find moving path \u00b6 var tileXYArray = pathFinder . findPath ( endTileXY ); // var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out); endTileXY : Tile position tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. isClosest : Set true to get closest path. Path mode Set pathMode to A* ( 'A*' , 'A*-random' , or 'A*-line' ) to speed up calculating. Cost of tile \u00b6 During or after finding moveable area... Get cost of path from chess to tile var pathCost = pathFinder . tileXYToCost ( tileX , tileY , true ); Get cost of tile var tileCost = pathFinder . tileXYToCost ( tileX , tileY , false );","title":"Path finder"},{"location":"board-pathfinder/#introduction","text":"Find moveable area or moving path, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-pathfinder/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-pathfinder/#usage","text":"Sample code","title":"Usage"},{"location":"board-pathfinder/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-pathfinder/#create-instance","text":"var pathFinder = scene . rexBoard . add . pathFinder ( chess , { // occupiedTest: false, // blockerTest: false, // ** cost ** // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined, // cacheCost: true, // pathMode: 10, // A* // weight: 10, // weight for A* searching mode // shuffleNeighbors: false, }) occupiedTest : Set true to test if target tile position is occupied or not, in cost function. blockerTest : Set true to test blocker property in cost function. Cost function cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , preTile , pathFinder ) { return cost ; } Board : pathFinder.board Chess game object : pathFinder.gameObject Cost of blocker : pathFinder.BLOCKER pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 weight : Weight parameter for A* searching mode. cacheCost : Set false to get cost every time. It is useful when cost is a function of (current tile, previous tile). shuffleNeighbors : Shuffle neighbors.","title":"Create instance"},{"location":"board-pathfinder/#cost-function","text":"var callback = function ( curTileXY , preTileXY , pathFinder ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . preTileXY.pathCost : Path cost of preTilexY . preTileXY.preNodes : Previous tiles of preTileXY . pathFinder : Path finder object. pathFinder.board : Board object pathFinder.gameObject : Chess game object. pathFinder.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY .","title":"Cost function"},{"location":"board-pathfinder/#set-cost-function","text":"Constant cost for each non-blocked tile pathFinder . setCostFunction ( cost ); Get cost via callback pathFinder . setCostFunction ( callback , scope );","title":"Set cost function"},{"location":"board-pathfinder/#set-path-mode","text":"pathFinder . setPathMode ( pathMode ) pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12","title":"Set path mode"},{"location":"board-pathfinder/#find-moveable-area","text":"var tileXYArray = pathFinder . findArea ( movingPoints ); // var out = pathFinder.findArea(movingPoints, out); movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. tileXYArray : An array of moveable tile positions {x,y,pathCost}","title":"Find moveable area"},{"location":"board-pathfinder/#get-shortest-path-to-a-moveable-tile","text":"var tileXYArray = pathFinder . getPath ( endTileXY ); endTileXY : Tile position of moveable area in last result of pathFinder.findArea() tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. Path mode Path info of each tile is calculated during pathFinder.findArea()","title":"Get shortest path to a moveable tile"},{"location":"board-pathfinder/#find-moving-path","text":"var tileXYArray = pathFinder . findPath ( endTileXY ); // var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out); endTileXY : Tile position tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. isClosest : Set true to get closest path. Path mode Set pathMode to A* ( 'A*' , 'A*-random' , or 'A*-line' ) to speed up calculating.","title":"Find moving path"},{"location":"board-pathfinder/#cost-of-tile","text":"During or after finding moveable area... Get cost of path from chess to tile var pathCost = pathFinder . tileXYToCost ( tileX , tileY , true ); Get cost of tile var tileCost = pathFinder . tileXYToCost ( tileX , tileY , false );","title":"Cost of tile"},{"location":"board-quadgrid/","text":"Introduction \u00b6 Quad grid object of Board system. Author: Rex Grid object of board Source code \u00b6 Included in board plugin . Usage \u00b6 See board examples . Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var grid = scene . rexBoard . add . quadGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 0 , // dir: 4 }); x , y : World position of tile (0, 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric dir : 4 or '4dir' : Left/Down/Right/Up 8 or '8dir' : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left Set world position of tile (0, 0) \u00b6 grid . setOriginPosition ( worldX , worldY ); Set cell size \u00b6 grid . setCellSize ( cellWidth , cellHeight ); Set grid type \u00b6 grid . setType ( type ); type 0 , or orthogonal 1 , or isometric Get world position \u00b6 var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Get tile position \u00b6 var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Directions \u00b6 0 : Left 1 : Down 2 : Right 3 : Up 4 : Left-down 5 : Down-right 6 : Right-up 7 : Up-left","title":"Quad"},{"location":"board-quadgrid/#introduction","text":"Quad grid object of Board system. Author: Rex Grid object of board","title":"Introduction"},{"location":"board-quadgrid/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-quadgrid/#usage","text":"See board examples .","title":"Usage"},{"location":"board-quadgrid/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-quadgrid/#create-instance","text":"var grid = scene . rexBoard . add . quadGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 0 , // dir: 4 }); x , y : World position of tile (0, 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric dir : 4 or '4dir' : Left/Down/Right/Up 8 or '8dir' : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left","title":"Create instance"},{"location":"board-quadgrid/#set-world-position-of-tile-0-0","text":"grid . setOriginPosition ( worldX , worldY );","title":"Set world position of tile (0, 0)"},{"location":"board-quadgrid/#set-cell-size","text":"grid . setCellSize ( cellWidth , cellHeight );","title":"Set cell size"},{"location":"board-quadgrid/#set-grid-type","text":"grid . setType ( type ); type 0 , or orthogonal 1 , or isometric","title":"Set grid type"},{"location":"board-quadgrid/#get-world-position","text":"var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get world position"},{"location":"board-quadgrid/#get-tile-position","text":"var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get tile position"},{"location":"board-quadgrid/#directions","text":"0 : Left 1 : Down 2 : Right 3 : Up 4 : Left-down 5 : Down-right 6 : Right-up 7 : Up-left","title":"Directions"},{"location":"board-shape/","text":"Introduction \u00b6 Grid (polygon) shape object. Author: Rex Polygon Shape Game object of Board system Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add shape object \u00b6 Create shape object and add to board var shape = scene . rexBoard . add . shape ( board , tileX , tileY , tileZ , fillColor ); // var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha); board : Board object tileX , tileY , tileZ : Tile position fillColor , fillAlpha : Color of this shape object Create shape object but not add to board var shape = scene . rexBoard . add . shape ( board , x , y , undefined , fillColor , fillAlpha , false ); board : Board object x , y : World position fillColor , fillAlpha : Color of this shape object Set color \u00b6 Fill color polygon . setFillStyle ( color , alpha ) Stroke color polygon . setStrokeStyle ( lineWidth , color , alpha ) No tint methods Uses shape.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Shape"},{"location":"board-shape/#introduction","text":"Grid (polygon) shape object. Author: Rex Polygon Shape Game object of Board system","title":"Introduction"},{"location":"board-shape/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-shape/#usage","text":"Sample code","title":"Usage"},{"location":"board-shape/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-shape/#add-shape-object","text":"Create shape object and add to board var shape = scene . rexBoard . add . shape ( board , tileX , tileY , tileZ , fillColor ); // var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha); board : Board object tileX , tileY , tileZ : Tile position fillColor , fillAlpha : Color of this shape object Create shape object but not add to board var shape = scene . rexBoard . add . shape ( board , x , y , undefined , fillColor , fillAlpha , false ); board : Board object x , y : World position fillColor , fillAlpha : Color of this shape object","title":"Add shape object"},{"location":"board-shape/#set-color","text":"Fill color polygon . setFillStyle ( color , alpha ) Stroke color polygon . setStrokeStyle ( lineWidth , color , alpha ) No tint methods Uses shape.setFillStyle(color, alpha) to change color.","title":"Set color"},{"location":"board-shape/#other-properties","text":"See game object","title":"Other properties"},{"location":"board/","text":"Introduction \u00b6 Core object of Board system. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Install scene plugin \u00b6 Install plugin in configuration of game import BoardPlugin from './plugins/board-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexBoard' , plugin : BoardPlugin , mapping : 'rexBoard' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add board object \u00b6 Quad board var board = scene . rexBoard . add . board ({ grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); Hexagon board var board = scene . rexBoard . add . board ({ grid : { gridType : 'hexagonGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , staggeraxis : 'x' , // 'x'|'y' staggerindex : 'odd' // 'odd'|'even' }, width : 0 , height : 0 }); Configuration grid : gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid width : Board width in tiles height : Board height in tiles Custom class \u00b6 Define class class MyBoard extends RexPlugins . Board . Board { constructor ( scene ) { super ( scene , { grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); // ... } // ... } Create instance var board = new MyBoard ( scene ); Board size \u00b6 Width : Board width in tiles Get var width = board . width ; Set board . setBoardWidth ( width ); Height : Board height in tiles Get var height = board . height ; Set board . setBoardHeight ( height ); Add chess \u00b6 board . addChess ( chess , tileX , tileY , tileZ , align ); chess : A game object. tileX , tileY , tileZ : Tile position. align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Default is true . Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . Kick-out event \u00b6 Board will fire kickout event when adding chess to an occupied grid. board . on ( 'kickout' , function ( chessToAdd , occupiedChess , tileXYZ ){ }) chessToAdd kicks out occupiedChess at tile position tileXYZ ( {x,y,z} ). Remove chess \u00b6 Remove chess object from board board . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board board . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess board . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object. Move chess \u00b6 board . moveChess ( chess , toTileX , toTileY , toTileZ , align ); chess : A game object toTileX , toTileY , toTileZ : Target tile position align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Swap chess \u00b6 board . swapChess ( chessA , chessB , align ); chessA , chessB : Game objects align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Chess -> tile position \u00b6 var tileXYZ = board . chessToTileXYZ ( chess ); chess : A game object tileXYZ : {x,y,z} or null if chess is not added to board. Tile position -> chess \u00b6 Get chess at (tileX, tileY, tileZ) var chess = board . tileXYZToChess ( tileX , tileY , tileZ ); chess : A game object Get chess at (tileX, tileY) var out = board . tileXYToChessArray ( tileX , tileY ); // var out = board.tileXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at tileZ var out = board . tileZToChessArray ( tileZ ); // var out = board.tileZToChessArray(tileZ, out); out : An array of chess Get chess from array of (tileX, tileY) var out = board . tileXYArrayToChessArray ( tileXYArray ); // var out = board.tileXYArrayToChessArray(tileXYArray, out); or var out = board . tileXYArrayToChessArray ( tileXYArray , tileZ ); // var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out); tileXYArray : An array of tileXY {x, y} out : An array of chess World position -> chess \u00b6 Get chess at (worldX, worldY) var out = board . worldXYToChessArray ( worldX , worldY ); // var out = board.worldXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at (worldX, worldY), tileZ var chess = board . worldXYToChess ( worldX , worldY , tileZ ); chess : A game object Get chess at (worldX, worldY) var chess = board . worldXYToChess ( worldX , worldY ); chess : A game object at a tileZ. Contains \u00b6 Is (tileX, tileY) inside board? var isTileInBoard = board . contains ( tileX , tileY ); Does (tileX, tileY, tileZ) have chess? var isTileInBoard = board . contains ( tileX , tileY , tileZ ); Is chess inside board? var isChessInBoard = board . exists ( chess ); chess : A game object For each tile \u00b6 board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); Iteration order : board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); order : 0 , or x+ : Increasing x, increasing y. 1 , or x- : Decreasing x, increasing y. 2 , or y+ : Increasing y, increasing x. 3 , or y- : Decreasing y, increasing x. Or using for-loop for ( var tileY = 0 ; tileY < board . height ; tileY ++ ) { for ( var tileX = 0 ; tileX < board . width ; tileX ++ ) { // ... } } board.width , board.height : Board width/height in tiles. Tile position -> world position \u00b6 var worldXY = board . tileXYToWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = board.tileXYToWorldXY(tileX, tileY, out); World position -> tile position \u00b6 var tileXY = board . worldXYToTileXY ( worldX , worldY ); // tileXY: {x, y} // var out = board.worldXYToTileXY(worldX, worldY, out); World position -> Grid world position \u00b6 var gridWorldXY = board . worldXYSnapToGrid ( worldX , worldY ); // var out = board.worldXYSnapToGrid(worldX, worldY, out); Ring -> tile position \u00b6 Get array of tile position around a ring. var out = board . ringToTileXYArray ( centerTileXY , radius ); // var out = board.ringToTileXYArray(centerTileXY, radius, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. Get array of tile position within a filled ring. var out = board . filledRingToTileXYArray ( centerTileXY , radius ); var out = board . filledRingToTileXYArray ( centerTileXY , radius , nearToFar ); // var out = board.filledRingToTileXYArray(centerTileXY, radius, out); // var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. nearToFar : From near ring to far ring. Default value is true . Shape -> tile position \u00b6 Line -> tile position \u00b6 Get array of tile position along a line defined via ( startWorldX , startWorldY ) to ( endWorldX , endWorldY ) var out = board . lineToTileXYArray ( startWorldX , startWorldY , endWorldX , endWorldY ); // var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out); startWorldX , startWorldY , endWorldX , endWorldY : Start and end pointer of a line out : An array of tile position or var out = board . lineToTileXYArray ( line ); // var out = board.lineToTileXYArray(line, out); line : Line object Circle -> tile position \u00b6 Get array of tile position inside a circle shape var out = board . circleToTileXYArray ( circle ); // var out = board.circleToTileXYArray(circle, out); circle : Circle shape out : An array of tile position Rectangle -> tile position \u00b6 Get array of tile position inside a rectangle shape var out = board . rectangleToTileXYArray ( rectangle ); // var out = board.rectangleToTileXYArray(rectangle, out); rectangle : Rectangle shape out : An array of tile position Ellipse -> tile position \u00b6 Get array of tile position inside a ellipse shape var out = board . ellipseToTileXYArray ( ellipse ); // var out = board.ellipseToTileXYArray(ellipse, out); ellipse : Ellipse shape out : An array of tile position Triangle -> tile position \u00b6 Get array of tile position inside a triangle shape var out = board . triangleToTileXYArray ( triangle ); // var out = board.triangleToTileXYArray(triangle, out); triangle : Triangle shape out : An array of tile position Polygon -> tile position \u00b6 Get array of tile position inside a polygon shape var out = board . polygonToTileXYArray ( polygon ); // var out = board.polygonToTileXYArray(polygon, out); polygon : Polygon shape out : An array of tile position Angle between world position of 2 tiles \u00b6 var radian = board . angleBetween ( tileXY0 , tileXY1 ); radian : Angle between world position of 2 tiles, in radian. tileXY0 , tileXY1 : tile position {x, y} Is angle in cone \u00b6 var isInCone = board . isAngleInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared angle is between face - (cone/2) to face + (cone/2) . Angle in radian. Direction between 2 tiles \u00b6 var direction = board . directionBetween ( chessA , chessB ); chessA , chessB : A chess object, or tile position {x,y} . direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . var direction = board . directionBetween ( chessA , chessB , false ); direction : Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6. Is direction in cone \u00b6 var isInCone = board . isDirectionInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared direction is between face - (cone/2) to face + (cone/2) . Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , or float number between 0~1, 1~2, 2~3, 3~4. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6. Opposite direction \u00b6 var direction = board . getOppositeDirection ( tileX , tileY , direction ); Angle snap to direction \u00b6 var direction = board . angleSnapToDirection ( chess , angle ); chess : Chess object, or tileXY, or undefined . angle : Angle in radius. direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . Align world position to grid \u00b6 Align one chess object board . gridAlign ( chess ); Align all chess board . gridAlign (); Is overlapping with world position \u00b6 var isOverlapping = board . isOverlappingPoint ( worldX , worldY ); or var isOverlapping = board . isOverlappingPoint ( worldX , worldY , tileZ ); Neighbors \u00b6 Neighbor tile position \u00b6 Get neighbor tile position at 1 direction var neighborTileXY = board . getNeighborTileXY ( srcTileXY , direction ); // var out = board.getNeighborTileXY(srcTileXY, direction, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Get neighbor tile position at directions var neighborTileXY = board . getNeighborTileXY ( srcTileXY , directions ); // var out = board.getNeighborTileXY(srcTileXY, directions, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position array of all neighbors Get neighbor tile position at all directions var out = board . getNeighborTileXY ( srcTileXY , null ); // var out = board.getNeighborTileXY(srcTileXY, null, out); out : Tile position array of all neighbors Get direction between 2 tile positions var direction = board . getNeighborTileDirection ( srcTile , neighborTileXY ); direction : Return null if these 2 tile positions are not neighbors. Get neighbor tile position at angle var neighborTileXY = board . getNeighborTileXYAtAngle ( srcTileXY , angle ); // var out = board.getNeighborTileXY(srcTileXY, angle, out); srcTileXY : Tile position {x, y} of source. angle : Angle in radius. neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Neighbor chess \u00b6 Get neighbor chess at 1 direction var neighborChess = board . getNeighborChess ( chess , direction ); // neighborTileZ = tileZ of chess // var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ); chess : A chess object, or tile position {x,y,z} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborChess : A chess object. Get neighbor chess at directions var out = board . getNeighborChess ( chess , directions ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, directions, neighborTileZ); chess : A chess object, or tile position {x,y,z} . directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Chess array of neighbors. Get neighbor chess at all directions var out = board . getNeighborChess ( chess , null ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, null, neighborTileZ); chess : A chess object, or tile position {x,y,z} . out : Chess array of all neighbors. Get direction between 2 chess var direction = board . getNeighborChessDirection ( chess , neighborChess ); direction : Return null if these 2 chess are not neighbors. Are 2 chess neighbors? var areNeighbor = board . areNeighbors ( chessA , chessB ); areNeighbor : Return true if chessA and chessB are neighbors. Tile at direction \u00b6 Get tile position at 1 direction var out = board . getTileXYAtDirection ( srcTileXY , direction , distance ); // var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . distance : A JSON, number, or number array. JSON : Range of distances. {end: 3} is equal to [1,2,3] . { start : 1 , end : 1 , step : 1 } start : Start distance. Default value is 1 . end : End distance. Default value is 1 . step : Step. Default value is 1 . Number, 3 . Array of numbers, [2, 3, 5] : Array of distances. out : A single tile position, if distance is a number. Tile position {x, y} array, if distance is a JSON or an array. Get tile positions at directions var neighborTileXY = board . getTileXYAtDirection ( srcTileXY , directions , distance ); // var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position {x, y} array. Get tile positions at all directions var out = board . getTileXYAtDirection ( srcTileXY , null , distance ); // var out = board.getTileXYAtDirection(srcTileXY, null, distance, out); out : Tile position {x, y} array. Empty tile position \u00b6 Get a random tile position which does not have any chess var tileXY = board . getRandomEmptyTileXY ( tileZ ); // var out = board.getRandomEmptyTileXY(tileZ, out); tileXY : Tile position {x, y} , return null if all positions are occupied. Get an array of tile position which does not have any chess var tileXYArray = board . getEmptyTileXYArray ( tileZ ); // var out = board.getEmptyTileXYArray(tileZ, out); tileXYArray : An array of tile position Get all chess \u00b6 var chessArray = board . getAllChess (); Fit \u00b6 var out = board . fit ( tileXYArray ); tileXYArray : An array of tile position {x,y} . Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. Blocker \u00b6 Set blocker property : See chess data Has blocker at tile position (tileX, tileY, tileZ) var hasBlocker = board . hasBlocker ( tileX , tileY , tileZ ); Any chess at (tileX, tileY) has blocker property var hasBlocker = board . hasBlocker ( tileX , tileY ); Touch events \u00b6 Set interactive \u00b6 Enable board . setInteractive (); Disable board . setInteractive ( false ); Pointer down \u00b6 Pointer down at any tile board . on ( 'tiledown' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); pointer : Touch pointer tileXY : {x, y} Pointer down at chess board . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up \u00b6 Pointer up at any tile board . on ( 'tileup' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Pointer up at chess board . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move \u00b6 Pointer move to another tile board . on ( 'tilemove' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Only triggered when tileXY is changed. Pointer move to another chess board . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Tap \u00b6 Tap at any tile board . on ( 'tiletap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; // var tapsCount = tap.tapsCount; }); tap : Tap behavior . tap.tapsCount : Taps count. tileXY : {x, y} N-taps at any tile board . on ( 'tile' + tapsCount + 'tap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); 'tile' + tapsCount + 'tap' : 'tile1tap' , 'tile2tap' , 'tile3tap' , etc ... tap : Tap behavior . tileXY : {x, y} Tap at chess board . on ( 'gameobjecttap' , function ( tap , gameObject ) { // var tapsCount = tap.tapsCount; }) or gameObject . on ( 'board.tap' , function ( tap ) { // var tapsCount = tap.tapsCount; }) tap : Tap behavior . tap.tapsCount : Taps count. gameObject : Game object at touched (tileX, tileY) N-taps at chess board . on ( 'gameobject' + tapsCount + 'tap' , function ( tap , gameObject ) { }) or gameObject . on ( 'board.' + tapsCount + 'tap' , function ( tap ) { }) 'gameobject' + tapsCount + 'tap' : 'gameobject1tap' , 'gameobject2tap' , 'gameobject3tap' , etc ... 'board.' + tapsCount + 'tap' : 'board.1tap' , 'board.2tap' , 'board.3tap' , etc ... tap : Tap behavior . gameObject : Game object at touched (tileX, tileY) Press \u00b6 Press-start at any tile board . on ( 'tilepressstart' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-end at any tile board . on ( 'tilepressend' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-star at chess board . on ( 'gameobjectpressstart' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressstart' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Press-end at chess board . on ( 'gameobjectpressend' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressend' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Grid points \u00b6 Get an array of grid points at tile position (tileX, tileY). var points = board . getGridPoints ( tileX , tileY ); // var out = board.getGridPoints(tileX, tileY, out); Draw grid polygon on graphics object graphics . strokePoints ( points , true ); Other properties \u00b6 Scene var scene = board . scene ;","title":"Board"},{"location":"board/#introduction","text":"Core object of Board system. Author: Rex Member of scene","title":"Introduction"},{"location":"board/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"board/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"board/#install-scene-plugin","text":"Install plugin in configuration of game import BoardPlugin from './plugins/board-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexBoard' , plugin : BoardPlugin , mapping : 'rexBoard' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"board/#add-board-object","text":"Quad board var board = scene . rexBoard . add . board ({ grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); Hexagon board var board = scene . rexBoard . add . board ({ grid : { gridType : 'hexagonGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , staggeraxis : 'x' , // 'x'|'y' staggerindex : 'odd' // 'odd'|'even' }, width : 0 , height : 0 }); Configuration grid : gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid width : Board width in tiles height : Board height in tiles","title":"Add board object"},{"location":"board/#custom-class","text":"Define class class MyBoard extends RexPlugins . Board . Board { constructor ( scene ) { super ( scene , { grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); // ... } // ... } Create instance var board = new MyBoard ( scene );","title":"Custom class"},{"location":"board/#board-size","text":"Width : Board width in tiles Get var width = board . width ; Set board . setBoardWidth ( width ); Height : Board height in tiles Get var height = board . height ; Set board . setBoardHeight ( height );","title":"Board size"},{"location":"board/#add-chess","text":"board . addChess ( chess , tileX , tileY , tileZ , align ); chess : A game object. tileX , tileY , tileZ : Tile position. align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Default is true . Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth .","title":"Add chess"},{"location":"board/#kick-out-event","text":"Board will fire kickout event when adding chess to an occupied grid. board . on ( 'kickout' , function ( chessToAdd , occupiedChess , tileXYZ ){ }) chessToAdd kicks out occupiedChess at tile position tileXYZ ( {x,y,z} ).","title":"Kick-out event"},{"location":"board/#remove-chess","text":"Remove chess object from board board . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board board . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess board . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object.","title":"Remove chess"},{"location":"board/#move-chess","text":"board . moveChess ( chess , toTileX , toTileY , toTileZ , align ); chess : A game object toTileX , toTileY , toTileZ : Target tile position align : Set true to align (i.e. set position) chess to grid (tileX, tileY).","title":"Move chess"},{"location":"board/#swap-chess","text":"board . swapChess ( chessA , chessB , align ); chessA , chessB : Game objects align : Set true to align (i.e. set position) chess to grid (tileX, tileY).","title":"Swap chess"},{"location":"board/#chess-tile-position","text":"var tileXYZ = board . chessToTileXYZ ( chess ); chess : A game object tileXYZ : {x,y,z} or null if chess is not added to board.","title":"Chess -&gt; tile position"},{"location":"board/#tile-position-chess","text":"Get chess at (tileX, tileY, tileZ) var chess = board . tileXYZToChess ( tileX , tileY , tileZ ); chess : A game object Get chess at (tileX, tileY) var out = board . tileXYToChessArray ( tileX , tileY ); // var out = board.tileXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at tileZ var out = board . tileZToChessArray ( tileZ ); // var out = board.tileZToChessArray(tileZ, out); out : An array of chess Get chess from array of (tileX, tileY) var out = board . tileXYArrayToChessArray ( tileXYArray ); // var out = board.tileXYArrayToChessArray(tileXYArray, out); or var out = board . tileXYArrayToChessArray ( tileXYArray , tileZ ); // var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out); tileXYArray : An array of tileXY {x, y} out : An array of chess","title":"Tile position -&gt; chess"},{"location":"board/#world-position-chess","text":"Get chess at (worldX, worldY) var out = board . worldXYToChessArray ( worldX , worldY ); // var out = board.worldXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at (worldX, worldY), tileZ var chess = board . worldXYToChess ( worldX , worldY , tileZ ); chess : A game object Get chess at (worldX, worldY) var chess = board . worldXYToChess ( worldX , worldY ); chess : A game object at a tileZ.","title":"World position -&gt; chess"},{"location":"board/#contains","text":"Is (tileX, tileY) inside board? var isTileInBoard = board . contains ( tileX , tileY ); Does (tileX, tileY, tileZ) have chess? var isTileInBoard = board . contains ( tileX , tileY , tileZ ); Is chess inside board? var isChessInBoard = board . exists ( chess ); chess : A game object","title":"Contains"},{"location":"board/#for-each-tile","text":"board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); Iteration order : board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); order : 0 , or x+ : Increasing x, increasing y. 1 , or x- : Decreasing x, increasing y. 2 , or y+ : Increasing y, increasing x. 3 , or y- : Decreasing y, increasing x. Or using for-loop for ( var tileY = 0 ; tileY < board . height ; tileY ++ ) { for ( var tileX = 0 ; tileX < board . width ; tileX ++ ) { // ... } } board.width , board.height : Board width/height in tiles.","title":"For each tile"},{"location":"board/#tile-position-world-position","text":"var worldXY = board . tileXYToWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = board.tileXYToWorldXY(tileX, tileY, out);","title":"Tile position -&gt; world position"},{"location":"board/#world-position-tile-position","text":"var tileXY = board . worldXYToTileXY ( worldX , worldY ); // tileXY: {x, y} // var out = board.worldXYToTileXY(worldX, worldY, out);","title":"World position -&gt; tile position"},{"location":"board/#world-position-grid-world-position","text":"var gridWorldXY = board . worldXYSnapToGrid ( worldX , worldY ); // var out = board.worldXYSnapToGrid(worldX, worldY, out);","title":"World position -&gt; Grid world position"},{"location":"board/#ring-tile-position","text":"Get array of tile position around a ring. var out = board . ringToTileXYArray ( centerTileXY , radius ); // var out = board.ringToTileXYArray(centerTileXY, radius, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. Get array of tile position within a filled ring. var out = board . filledRingToTileXYArray ( centerTileXY , radius ); var out = board . filledRingToTileXYArray ( centerTileXY , radius , nearToFar ); // var out = board.filledRingToTileXYArray(centerTileXY, radius, out); // var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. nearToFar : From near ring to far ring. Default value is true .","title":"Ring -&gt; tile position"},{"location":"board/#shape-tile-position","text":"","title":"Shape -&gt; tile position"},{"location":"board/#line-tile-position","text":"Get array of tile position along a line defined via ( startWorldX , startWorldY ) to ( endWorldX , endWorldY ) var out = board . lineToTileXYArray ( startWorldX , startWorldY , endWorldX , endWorldY ); // var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out); startWorldX , startWorldY , endWorldX , endWorldY : Start and end pointer of a line out : An array of tile position or var out = board . lineToTileXYArray ( line ); // var out = board.lineToTileXYArray(line, out); line : Line object","title":"Line -&gt; tile position"},{"location":"board/#circle-tile-position","text":"Get array of tile position inside a circle shape var out = board . circleToTileXYArray ( circle ); // var out = board.circleToTileXYArray(circle, out); circle : Circle shape out : An array of tile position","title":"Circle -&gt; tile position"},{"location":"board/#rectangle-tile-position","text":"Get array of tile position inside a rectangle shape var out = board . rectangleToTileXYArray ( rectangle ); // var out = board.rectangleToTileXYArray(rectangle, out); rectangle : Rectangle shape out : An array of tile position","title":"Rectangle -&gt; tile position"},{"location":"board/#ellipse-tile-position","text":"Get array of tile position inside a ellipse shape var out = board . ellipseToTileXYArray ( ellipse ); // var out = board.ellipseToTileXYArray(ellipse, out); ellipse : Ellipse shape out : An array of tile position","title":"Ellipse -&gt; tile position"},{"location":"board/#triangle-tile-position","text":"Get array of tile position inside a triangle shape var out = board . triangleToTileXYArray ( triangle ); // var out = board.triangleToTileXYArray(triangle, out); triangle : Triangle shape out : An array of tile position","title":"Triangle -&gt; tile position"},{"location":"board/#polygon-tile-position","text":"Get array of tile position inside a polygon shape var out = board . polygonToTileXYArray ( polygon ); // var out = board.polygonToTileXYArray(polygon, out); polygon : Polygon shape out : An array of tile position","title":"Polygon -&gt; tile position"},{"location":"board/#angle-between-world-position-of-2-tiles","text":"var radian = board . angleBetween ( tileXY0 , tileXY1 ); radian : Angle between world position of 2 tiles, in radian. tileXY0 , tileXY1 : tile position {x, y}","title":"Angle between world position of 2 tiles"},{"location":"board/#is-angle-in-cone","text":"var isInCone = board . isAngleInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared angle is between face - (cone/2) to face + (cone/2) . Angle in radian.","title":"Is angle in cone"},{"location":"board/#direction-between-2-tiles","text":"var direction = board . directionBetween ( chessA , chessB ); chessA , chessB : A chess object, or tile position {x,y} . direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . var direction = board . directionBetween ( chessA , chessB , false ); direction : Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.","title":"Direction between 2 tiles"},{"location":"board/#is-direction-in-cone","text":"var isInCone = board . isDirectionInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared direction is between face - (cone/2) to face + (cone/2) . Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , or float number between 0~1, 1~2, 2~3, 3~4. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.","title":"Is direction in cone"},{"location":"board/#opposite-direction","text":"var direction = board . getOppositeDirection ( tileX , tileY , direction );","title":"Opposite direction"},{"location":"board/#angle-snap-to-direction","text":"var direction = board . angleSnapToDirection ( chess , angle ); chess : Chess object, or tileXY, or undefined . angle : Angle in radius. direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 .","title":"Angle snap to direction"},{"location":"board/#align-world-position-to-grid","text":"Align one chess object board . gridAlign ( chess ); Align all chess board . gridAlign ();","title":"Align world position to grid"},{"location":"board/#is-overlapping-with-world-position","text":"var isOverlapping = board . isOverlappingPoint ( worldX , worldY ); or var isOverlapping = board . isOverlappingPoint ( worldX , worldY , tileZ );","title":"Is overlapping with world position"},{"location":"board/#neighbors","text":"","title":"Neighbors"},{"location":"board/#neighbor-tile-position","text":"Get neighbor tile position at 1 direction var neighborTileXY = board . getNeighborTileXY ( srcTileXY , direction ); // var out = board.getNeighborTileXY(srcTileXY, direction, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Get neighbor tile position at directions var neighborTileXY = board . getNeighborTileXY ( srcTileXY , directions ); // var out = board.getNeighborTileXY(srcTileXY, directions, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position array of all neighbors Get neighbor tile position at all directions var out = board . getNeighborTileXY ( srcTileXY , null ); // var out = board.getNeighborTileXY(srcTileXY, null, out); out : Tile position array of all neighbors Get direction between 2 tile positions var direction = board . getNeighborTileDirection ( srcTile , neighborTileXY ); direction : Return null if these 2 tile positions are not neighbors. Get neighbor tile position at angle var neighborTileXY = board . getNeighborTileXYAtAngle ( srcTileXY , angle ); // var out = board.getNeighborTileXY(srcTileXY, angle, out); srcTileXY : Tile position {x, y} of source. angle : Angle in radius. neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.)","title":"Neighbor tile position"},{"location":"board/#neighbor-chess","text":"Get neighbor chess at 1 direction var neighborChess = board . getNeighborChess ( chess , direction ); // neighborTileZ = tileZ of chess // var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ); chess : A chess object, or tile position {x,y,z} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborChess : A chess object. Get neighbor chess at directions var out = board . getNeighborChess ( chess , directions ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, directions, neighborTileZ); chess : A chess object, or tile position {x,y,z} . directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Chess array of neighbors. Get neighbor chess at all directions var out = board . getNeighborChess ( chess , null ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, null, neighborTileZ); chess : A chess object, or tile position {x,y,z} . out : Chess array of all neighbors. Get direction between 2 chess var direction = board . getNeighborChessDirection ( chess , neighborChess ); direction : Return null if these 2 chess are not neighbors. Are 2 chess neighbors? var areNeighbor = board . areNeighbors ( chessA , chessB ); areNeighbor : Return true if chessA and chessB are neighbors.","title":"Neighbor chess"},{"location":"board/#tile-at-direction","text":"Get tile position at 1 direction var out = board . getTileXYAtDirection ( srcTileXY , direction , distance ); // var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . distance : A JSON, number, or number array. JSON : Range of distances. {end: 3} is equal to [1,2,3] . { start : 1 , end : 1 , step : 1 } start : Start distance. Default value is 1 . end : End distance. Default value is 1 . step : Step. Default value is 1 . Number, 3 . Array of numbers, [2, 3, 5] : Array of distances. out : A single tile position, if distance is a number. Tile position {x, y} array, if distance is a JSON or an array. Get tile positions at directions var neighborTileXY = board . getTileXYAtDirection ( srcTileXY , directions , distance ); // var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position {x, y} array. Get tile positions at all directions var out = board . getTileXYAtDirection ( srcTileXY , null , distance ); // var out = board.getTileXYAtDirection(srcTileXY, null, distance, out); out : Tile position {x, y} array.","title":"Tile at direction"},{"location":"board/#empty-tile-position","text":"Get a random tile position which does not have any chess var tileXY = board . getRandomEmptyTileXY ( tileZ ); // var out = board.getRandomEmptyTileXY(tileZ, out); tileXY : Tile position {x, y} , return null if all positions are occupied. Get an array of tile position which does not have any chess var tileXYArray = board . getEmptyTileXYArray ( tileZ ); // var out = board.getEmptyTileXYArray(tileZ, out); tileXYArray : An array of tile position","title":"Empty tile position"},{"location":"board/#get-all-chess","text":"var chessArray = board . getAllChess ();","title":"Get all chess"},{"location":"board/#fit","text":"var out = board . fit ( tileXYArray ); tileXYArray : An array of tile position {x,y} . Offset all of tile positions to (0, 0) , and set board size to fit these tile positions.","title":"Fit"},{"location":"board/#blocker","text":"Set blocker property : See chess data Has blocker at tile position (tileX, tileY, tileZ) var hasBlocker = board . hasBlocker ( tileX , tileY , tileZ ); Any chess at (tileX, tileY) has blocker property var hasBlocker = board . hasBlocker ( tileX , tileY );","title":"Blocker"},{"location":"board/#touch-events","text":"","title":"Touch events"},{"location":"board/#set-interactive","text":"Enable board . setInteractive (); Disable board . setInteractive ( false );","title":"Set interactive"},{"location":"board/#pointer-down","text":"Pointer down at any tile board . on ( 'tiledown' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); pointer : Touch pointer tileXY : {x, y} Pointer down at chess board . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer down"},{"location":"board/#pointer-up","text":"Pointer up at any tile board . on ( 'tileup' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Pointer up at chess board . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer up"},{"location":"board/#pointer-move","text":"Pointer move to another tile board . on ( 'tilemove' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Only triggered when tileXY is changed. Pointer move to another chess board . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer move"},{"location":"board/#tap","text":"Tap at any tile board . on ( 'tiletap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; // var tapsCount = tap.tapsCount; }); tap : Tap behavior . tap.tapsCount : Taps count. tileXY : {x, y} N-taps at any tile board . on ( 'tile' + tapsCount + 'tap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); 'tile' + tapsCount + 'tap' : 'tile1tap' , 'tile2tap' , 'tile3tap' , etc ... tap : Tap behavior . tileXY : {x, y} Tap at chess board . on ( 'gameobjecttap' , function ( tap , gameObject ) { // var tapsCount = tap.tapsCount; }) or gameObject . on ( 'board.tap' , function ( tap ) { // var tapsCount = tap.tapsCount; }) tap : Tap behavior . tap.tapsCount : Taps count. gameObject : Game object at touched (tileX, tileY) N-taps at chess board . on ( 'gameobject' + tapsCount + 'tap' , function ( tap , gameObject ) { }) or gameObject . on ( 'board.' + tapsCount + 'tap' , function ( tap ) { }) 'gameobject' + tapsCount + 'tap' : 'gameobject1tap' , 'gameobject2tap' , 'gameobject3tap' , etc ... 'board.' + tapsCount + 'tap' : 'board.1tap' , 'board.2tap' , 'board.3tap' , etc ... tap : Tap behavior . gameObject : Game object at touched (tileX, tileY)","title":"Tap"},{"location":"board/#press","text":"Press-start at any tile board . on ( 'tilepressstart' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-end at any tile board . on ( 'tilepressend' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-star at chess board . on ( 'gameobjectpressstart' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressstart' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Press-end at chess board . on ( 'gameobjectpressend' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressend' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY)","title":"Press"},{"location":"board/#grid-points","text":"Get an array of grid points at tile position (tileX, tileY). var points = board . getGridPoints ( tileX , tileY ); // var out = board.getGridPoints(tileX, tileY, out); Draw grid polygon on graphics object graphics . strokePoints ( points , true );","title":"Grid points"},{"location":"board/#other-properties","text":"Scene var scene = board . scene ;","title":"Other properties"},{"location":"buffdata/","text":"Introduction \u00b6 Data manager with buffs, extends from built-in data manager . Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBuffData from './plugins/buffdata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import BuffDataPlugin from './plugins/buffdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexBuffData' , plugin : BuffDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var data = scene . plugins . get ( 'rexBuffData' ). add ( parent ); // var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter); data : Buff data manager parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter . Extend existing data manager \u00b6 var data = scene . plugins . get ( 'rexBuffData' ). extend ( data ); data : Existing data manager Buff \u00b6 A value is composed of baseValue , and some buffs , clamped by min , max values. Base value Set data . setBaseValue ( key , value ); Remove data . removeBaseValue ( key ); Get var baseValue = data . getBaseValue ( key ); Buffs, each value can have many buffs, or no buff. Add/set a buff data . setBuff ( key , buffKey , value ); value : A number A string for percentage like '10%' , which means that (baseValue * percentage) Remove a buff of a key data . removeBuff ( key , buffKey ); Remove all buffs of a key data . removeBuff ( key ); Get a buff value var buffValue = data . getBuffs ( key , buffKey ). value ; Min, max bounds, optional. Set data . setMin ( key , min ); data . setMax ( key , max ); data . setBounds ( key , min , max ); min , max : Clamp buffed result value between min and max value. Set undefined to ignore it. Get var min = data . getBounds ( key ). min ; var max = data . getBounds ( key ). max ; Buffed result Get var result = data . get ( key ); Events","title":"Buff data"},{"location":"buffdata/#introduction","text":"Data manager with buffs, extends from built-in data manager . Author: Rex Member of scene","title":"Introduction"},{"location":"buffdata/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"buffdata/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"buffdata/#import-class","text":"import rexBuffData from './plugins/buffdata.js' ;","title":"Import class"},{"location":"buffdata/#install-global-plugin","text":"Install plugin in configuration of game import BuffDataPlugin from './plugins/buffdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexBuffData' , plugin : BuffDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"buffdata/#create-instance","text":"var data = scene . plugins . get ( 'rexBuffData' ). add ( parent ); // var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter); data : Buff data manager parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter .","title":"Create instance"},{"location":"buffdata/#extend-existing-data-manager","text":"var data = scene . plugins . get ( 'rexBuffData' ). extend ( data ); data : Existing data manager","title":"Extend existing data manager"},{"location":"buffdata/#buff","text":"A value is composed of baseValue , and some buffs , clamped by min , max values. Base value Set data . setBaseValue ( key , value ); Remove data . removeBaseValue ( key ); Get var baseValue = data . getBaseValue ( key ); Buffs, each value can have many buffs, or no buff. Add/set a buff data . setBuff ( key , buffKey , value ); value : A number A string for percentage like '10%' , which means that (baseValue * percentage) Remove a buff of a key data . removeBuff ( key , buffKey ); Remove all buffs of a key data . removeBuff ( key ); Get a buff value var buffValue = data . getBuffs ( key , buffKey ). value ; Min, max bounds, optional. Set data . setMin ( key , min ); data . setMax ( key , max ); data . setBounds ( key , min , max ); min , max : Clamp buffed result value between min and max value. Set undefined to ignore it. Get var min = data . getBounds ( key ). min ; var max = data . getBounds ( key ). max ; Buffed result Get var result = data . get ( key ); Events","title":"Buff"},{"location":"buildarcadeobject/","text":"Introduction \u00b6 Create arcade body, and inject arcade object methods. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBuildArcadeObject from './plugins/buildarcadeobject.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import BuildArcadeObjectPlugin from './plugins/buildarcadeobject-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBuildArcadeObject' , plugin : BuildArcadeObjectPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Inject arcade object methods \u00b6 Create dynamic arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects); Create static arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject , true ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);","title":"Build arcade object"},{"location":"buildarcadeobject/#introduction","text":"Create arcade body, and inject arcade object methods. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"buildarcadeobject/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"buildarcadeobject/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"buildarcadeobject/#import-class","text":"import rexBuildArcadeObject from './plugins/buildarcadeobject.js' ;","title":"Import class"},{"location":"buildarcadeobject/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import BuildArcadeObjectPlugin from './plugins/buildarcadeobject-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBuildArcadeObject' , plugin : BuildArcadeObjectPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"buildarcadeobject/#inject-arcade-object-methods","text":"Create dynamic arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects); Create static arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject , true ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);","title":"Inject arcade object methods"},{"location":"bullet/","text":"Introduction \u00b6 Move game object toward current angle of game object, with a constant speed. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBullet from './plugins/bullet.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import BulletPlugin from './plugins/bullet-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBullet' , plugin : BulletPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var bullet = scene . plugins . get ( 'rexBullet' ). add ( gameObject , { speed : 200 , // enable: true }); speed : moving speed, pixels in second. enable : set false to disable moving. Speed \u00b6 Set bullet . setSpeed ( speed ); // bullet.speed = speed; Get var speed = bullet . speed ;","title":"Bullet"},{"location":"bullet/#introduction","text":"Move game object toward current angle of game object, with a constant speed. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"bullet/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"bullet/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"bullet/#import-class","text":"import rexBullet from './plugins/bullet.js' ;","title":"Import class"},{"location":"bullet/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import BulletPlugin from './plugins/bullet-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBullet' , plugin : BulletPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"bullet/#create-instance","text":"var bullet = scene . plugins . get ( 'rexBullet' ). add ( gameObject , { speed : 200 , // enable: true }); speed : moving speed, pixels in second. enable : set false to disable moving.","title":"Create instance"},{"location":"bullet/#speed","text":"Set bullet . setSpeed ( speed ); // bullet.speed = speed; Get var speed = bullet . speed ;","title":"Speed"},{"location":"button/","text":"Introduction \u00b6 Fires 'click' event when touch releasd after pressed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexButton from './plugins/button.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ButtonPlugin from './plugins/button-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexButton' , plugin : ButtonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var button = scene . plugins . get ( 'rexButton' ). add ( gameObject , { // enable: true, // mode: 1, // 0|'press'|1|'release' // clickInterval: 100 // ms }); enable : drag-able mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. clickInterval : Interval between 2 'click' events, in ms. Events \u00b6 button . on ( 'click' , function ( button , gameObject , pointer , event ) { // ... }, scope ); Cancel remaining touched events : event.stopPropagation() Enable \u00b6 Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false Set mode \u00b6 button . setMode ( mode ); mode : 'press' , or 0 : Fire 'click' event when touch pressed. 'release' , or 1 : Fire 'click' event when touch released after pressed. Set click interval \u00b6 button . setClickInterval ( interval ); // interval in ms","title":"Button"},{"location":"button/#introduction","text":"Fires 'click' event when touch releasd after pressed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"button/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"button/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"button/#import-class","text":"import rexButton from './plugins/button.js' ;","title":"Import class"},{"location":"button/#install-global-plugin","text":"Install plugin in configuration of game import ButtonPlugin from './plugins/button-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexButton' , plugin : ButtonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"button/#create-instance","text":"var button = scene . plugins . get ( 'rexButton' ). add ( gameObject , { // enable: true, // mode: 1, // 0|'press'|1|'release' // clickInterval: 100 // ms }); enable : drag-able mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. clickInterval : Interval between 2 'click' events, in ms.","title":"Create instance"},{"location":"button/#events","text":"button . on ( 'click' , function ( button , gameObject , pointer , event ) { // ... }, scope ); Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"button/#enable","text":"Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"button/#set-mode","text":"button . setMode ( mode ); mode : 'press' , or 0 : Fire 'click' event when touch pressed. 'release' , or 1 : Fire 'click' event when touch released after pressed.","title":"Set mode"},{"location":"button/#set-click-interval","text":"button . setClickInterval ( interval ); // interval in ms","title":"Set click interval"},{"location":"camera-controllor/","text":"Introduction \u00b6 Scroll/zoom camera. Author: Richard Davey Usage \u00b6 Setup \u00b6 Create controllor // var cursors = scene.input.keyboard.createCursorKeys(); var config = { camera : camera , left : cursors . left , // { isDown, isUp } right : cursors . right , // { isDown, isUp } up : cursors . up , // { isDown, isUp } down : cursors . down , // { isDown, isUp } zoomIn : null , // { isDown, isUp } zoomOut : null , // { isDown, isUp } zoomSpeed : 0.01 , acceleration : null , // acceleration: { // x: 0, // y: 0 // } drag : null , // drag: { // x: 0, // y: 0 // } maxSpeed : null // maxSpeed: { // x: 0, // y: 0 // } }; var controls = new Phaser . Cameras . Controls . SmoothedKeyControl ( config ); // var controls = new Phaser.Cameras.Controls.FixedKeyControl(config); Update scene . update = function ( time , delta ) { controls . update ( delta ); } Other methods \u00b6 Start controls . start (); Stop controls . stop (); Set camera controls . setCamera ( camera );","title":"Controllor"},{"location":"camera-controllor/#introduction","text":"Scroll/zoom camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-controllor/#usage","text":"","title":"Usage"},{"location":"camera-controllor/#setup","text":"Create controllor // var cursors = scene.input.keyboard.createCursorKeys(); var config = { camera : camera , left : cursors . left , // { isDown, isUp } right : cursors . right , // { isDown, isUp } up : cursors . up , // { isDown, isUp } down : cursors . down , // { isDown, isUp } zoomIn : null , // { isDown, isUp } zoomOut : null , // { isDown, isUp } zoomSpeed : 0.01 , acceleration : null , // acceleration: { // x: 0, // y: 0 // } drag : null , // drag: { // x: 0, // y: 0 // } maxSpeed : null // maxSpeed: { // x: 0, // y: 0 // } }; var controls = new Phaser . Cameras . Controls . SmoothedKeyControl ( config ); // var controls = new Phaser.Cameras.Controls.FixedKeyControl(config); Update scene . update = function ( time , delta ) { controls . update ( delta ); }","title":"Setup"},{"location":"camera-controllor/#other-methods","text":"Start controls . start (); Stop controls . stop (); Set camera controls . setCamera ( camera );","title":"Other methods"},{"location":"camera-effects/","text":"Introduction \u00b6 Effects of camera. Author: Richard Davey Usage \u00b6 Fade-in / fade-out \u00b6 camera . fadeIn ( duration ); // duration in ms // camera.fadeIn(duration, red, green, blue, callback, context); // red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255. camera . fadeOut ( duration ); // duration in ms // camera.fadeOut(duration, red, green, blue, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'camerafadeincomplete' , camera , fade ); camera . on ( 'camerafadeoutcomplete' , camera , fade ); Flash \u00b6 camera . flash ( duration ); // duration in ms // camera.flash(duration, red, green, blue, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'cameraflashstart' , camera , flash , duration , red , green , blue ); camera . on ( 'cameraflashcomplete' , camera , flash ); Shake \u00b6 camera . shake ( duration ); // duration in ms // camera.shake(duration, intensity, force, callback, context); // callback: invoked when completed callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'camerashakestart' , camera , shake , duration , intensity ); camera . on ( 'camerashakecomplete' , camera , shake ); Pan \u00b6 camera . pan ( x , y , duration ); // duration in ms // camera.pan(x, y, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , x , y ) {} Events \u00b6 camera . on ( 'camerapanstart' , camera , pan , duration , x , y ); camera . on ( 'camerapancomplete' , camera , pan ); Zoom \u00b6 camera . zoomTo ( zoomValue , duration ); // duration in ms // camera.zoomTo(zoomValue, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , zoomValue ) {} Events \u00b6 camera . on ( 'camerazoomstart' , camera , zoom , duration , zoomValue ); camera . on ( 'camerazoomcomplete' , camera , zoom ); Mask \u00b6 Add mask camera . setMask ( mask ); Clear mask camera . clearMask (); More detail about mask","title":"Effects"},{"location":"camera-effects/#introduction","text":"Effects of camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-effects/#usage","text":"","title":"Usage"},{"location":"camera-effects/#fade-in-fade-out","text":"camera . fadeIn ( duration ); // duration in ms // camera.fadeIn(duration, red, green, blue, callback, context); // red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255. camera . fadeOut ( duration ); // duration in ms // camera.fadeOut(duration, red, green, blue, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Fade-in / fade-out"},{"location":"camera-effects/#events","text":"camera . on ( 'camerafadeincomplete' , camera , fade ); camera . on ( 'camerafadeoutcomplete' , camera , fade );","title":"Events"},{"location":"camera-effects/#flash","text":"camera . flash ( duration ); // duration in ms // camera.flash(duration, red, green, blue, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Flash"},{"location":"camera-effects/#events_1","text":"camera . on ( 'cameraflashstart' , camera , flash , duration , red , green , blue ); camera . on ( 'cameraflashcomplete' , camera , flash );","title":"Events"},{"location":"camera-effects/#shake","text":"camera . shake ( duration ); // duration in ms // camera.shake(duration, intensity, force, callback, context); // callback: invoked when completed callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Shake"},{"location":"camera-effects/#events_2","text":"camera . on ( 'camerashakestart' , camera , shake , duration , intensity ); camera . on ( 'camerashakecomplete' , camera , shake );","title":"Events"},{"location":"camera-effects/#pan","text":"camera . pan ( x , y , duration ); // duration in ms // camera.pan(x, y, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , x , y ) {}","title":"Pan"},{"location":"camera-effects/#events_3","text":"camera . on ( 'camerapanstart' , camera , pan , duration , x , y ); camera . on ( 'camerapancomplete' , camera , pan );","title":"Events"},{"location":"camera-effects/#zoom","text":"camera . zoomTo ( zoomValue , duration ); // duration in ms // camera.zoomTo(zoomValue, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , zoomValue ) {}","title":"Zoom"},{"location":"camera-effects/#events_4","text":"camera . on ( 'camerazoomstart' , camera , zoom , duration , zoomValue ); camera . on ( 'camerazoomcomplete' , camera , zoom );","title":"Events"},{"location":"camera-effects/#mask","text":"Add mask camera . setMask ( mask ); Clear mask camera . clearMask (); More detail about mask","title":"Mask"},{"location":"camera-shader-effect/","text":"Introduction \u00b6 Shader effect of camera. Author: Richard Davey Usage \u00b6 Setup \u00b6 Create filter javascript var config = { game: scene.game, renderer: scene.game.renderer, fragShader: '...' // GLSL shader }; var customPipeline = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline(config); var filter = scene.game.renderer.addPipeline(pipelineName, customPipeline); pipelineName : Name of this render pipeline, a string. Add filter camera . setRenderToTexture ( filter ); Set/change properties of filter Property with 1 value Float filter . setFloat1 ( name , value0 ); uniform1fv filter . setFloat1v ( name , value0 ); Int filter . setInt1 ( name , value0 ); Property with 2 values Float filter . setFloat2 ( name , value0 , value1 ); uniform2fv filter . setFloat2v ( name , value0 , value1 ); Int filter . setInt2 ( name , value0 , value1 ); Property with 3 value Float filter . setFloat3 ( name , value0 , value1 , value2 ); uniform3fv filter . setFloat3v ( name , value0 , value1 , value2 ); Int filter . setInt3 ( name , value0 , value1 , value2 ); Property with 4 values Float filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); uniform4fv filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); Int filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Other methods \u00b6 Change filter camera . setPipeline ( pipelineName ); or camera . setPipeline ( filter ); pipelineName : Name of this render pipeline, a string. Clear filter camera . clearRenderToTexture ();","title":"Shader effect"},{"location":"camera-shader-effect/#introduction","text":"Shader effect of camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-shader-effect/#usage","text":"","title":"Usage"},{"location":"camera-shader-effect/#setup","text":"Create filter javascript var config = { game: scene.game, renderer: scene.game.renderer, fragShader: '...' // GLSL shader }; var customPipeline = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline(config); var filter = scene.game.renderer.addPipeline(pipelineName, customPipeline); pipelineName : Name of this render pipeline, a string. Add filter camera . setRenderToTexture ( filter ); Set/change properties of filter Property with 1 value Float filter . setFloat1 ( name , value0 ); uniform1fv filter . setFloat1v ( name , value0 ); Int filter . setInt1 ( name , value0 ); Property with 2 values Float filter . setFloat2 ( name , value0 , value1 ); uniform2fv filter . setFloat2v ( name , value0 , value1 ); Int filter . setInt2 ( name , value0 , value1 ); Property with 3 value Float filter . setFloat3 ( name , value0 , value1 , value2 ); uniform3fv filter . setFloat3v ( name , value0 , value1 , value2 ); Int filter . setInt3 ( name , value0 , value1 , value2 ); Property with 4 values Float filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); uniform4fv filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); Int filter . setInt4 ( name , value0 , value1 , value2 , value3 );","title":"Setup"},{"location":"camera-shader-effect/#other-methods","text":"Change filter camera . setPipeline ( pipelineName ); or camera . setPipeline ( filter ); pipelineName : Name of this render pipeline, a string. Clear filter camera . clearRenderToTexture ();","title":"Other methods"},{"location":"camera/","text":"Introduction \u00b6 Camera to display game objects, built-in object of phaser. Author: Richard Davey Usage \u00b6 Get camera \u00b6 Each scene has one or more cameras. Main camera var camera = scene . cameras . main ; Add new camera var camera = scene . cameras . add ( x , y , width , height ); Add existed camera scene . cameras . addExisting ( camera ); Create cameras from JSON \u00b6 scene . cameras . fromJSON ( config ); // scene.cameras.fromJSON(configArray); config : { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } Remove camera \u00b6 scene . cameras . remove ( camera ); Destroy camera \u00b6 camera . destroy (); View port \u00b6 Set camera . setViewport ( top , left , width , height ); or camera . setPosition ( top , left ); // camera.x = top; // camera.y = left; camera . setSize ( width , height ); // camera.width = width; // camera.height = height; Get Position Top-left var top = camera . x ; var left = camera . y ; Center, relative to the top-left of the game canvas. var x = camera . centerX ; var y = camera . centerY ; Width & height var width = camera . width ; var height = camera . height ; var displayWidth = camera . displayWidth ; var displayHeight = camera . displayHeight ; Zoom \u00b6 Set camera . setZoom ( zoomValue ); // The minimum it can be is 0.001. camera . zoom = zoomValue ; Get var zoomValue = camera . zoom ; Rotation \u00b6 Set camera . setAngle ( angle ); // angle in degree camera . setRotation ( angle ); // angle in radians camera . rotation = angle ; // angle in radians Get var angle = camera . rotation ; // angle in radians Visible \u00b6 A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests. camera . setVisible ( value ); // camera.visible = value var visible = camera . visible ; Alpha \u00b6 camera . setAlpha ( value ); // camera.alpha = value; var alpha = camera . alpha ; Scroll \u00b6 camera . setScroll ( x , y ) camera . scrollX = scrollX ; camera . scrollY = scrollY ; camera . centerToBounds (); camera . centerOn ( x , y ); // centered on the given coordinates camera . centerOnX ( x ); camera . centerOnY ( y ); camera . centerToSize (); Follow game object \u00b6 Start following camera . startFollow ( gameObject ); // camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY); // roundPx : set true to round the camera position to integers Stop following camera . stopFollow (); Set follow offset camera . setFollowOffset ( x , y ); Set lerp camera . setLerp ( x , y ); 1 : Camera will instantly snap to the target coordinates. 0.1 : Camera will more slowly track the target, giving a smooth transition. Deadzone camera . setDeadzone ( width , height ); If the target moves outside of this area, the camera will begin scrolling in order to follow it. Boundaries var left = camera . deadzone . left ; var right = camera . deadzone . right ; var top = camera . deadzone . top ; var bootom = camera . deadzone . bottom ; Clear deadzone camera . setDeadzone (); Scroll factor \u00b6 See Scroll factor in game object. Bounds \u00b6 Set camera . setBounds ( x , y , width , height ) Get var bounds = camera . getBounds (); // bounds: a rectangle object // var out = camera.getBounds(out); World coordinates \u00b6 World view, a rectangle object var worldView = camera . worldView ; var x = worldView . x ; var y = worldView . y ; var width = worldView . width ; // displayWidth var height = worldView . height ; // displayHeight var left = worldView . left ; // x var right = worldView . right ; // x + width var top = worldView . top ; // y var bottom = worldView . bottom ; // y + height var centerX = worldView . centerX ; var centerY = worldView . centerY ; var isInside = worldView . contains ( x , y ); var randPoint = worldView . getRandomPoint ( point ); // point: {x, y} Middle point var x = camera . midPoint . x ; var y = camera . midPoint . y ; Get world position var out = camera . getWorldPoint ( x , y ); // var out = camera.getWorldPoint(x, y, out); x , y : Position of camera. out : World position {x, y} Works for zoom of 1 with any resolution, but resolution > 1 and zoom !== 1 breaks Set background color \u00b6 camera . setBackgroundColor ( color ); Ignore game object \u00b6 Ignored game objects won't show at that camera. camera . ignore ( gameObject ); gameObject : A game object An array of game objects A group Get cameras below pointer \u00b6 var cameras = scene . cameras . getCamerasBelowPointer ( pointer ); cameras : An array of cameras. pointer : {x, y}","title":"Camera"},{"location":"camera/#introduction","text":"Camera to display game objects, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"camera/#usage","text":"","title":"Usage"},{"location":"camera/#get-camera","text":"Each scene has one or more cameras. Main camera var camera = scene . cameras . main ; Add new camera var camera = scene . cameras . add ( x , y , width , height ); Add existed camera scene . cameras . addExisting ( camera );","title":"Get camera"},{"location":"camera/#create-cameras-from-json","text":"scene . cameras . fromJSON ( config ); // scene.cameras.fromJSON(configArray); config : { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} }","title":"Create cameras from JSON"},{"location":"camera/#remove-camera","text":"scene . cameras . remove ( camera );","title":"Remove camera"},{"location":"camera/#destroy-camera","text":"camera . destroy ();","title":"Destroy camera"},{"location":"camera/#view-port","text":"Set camera . setViewport ( top , left , width , height ); or camera . setPosition ( top , left ); // camera.x = top; // camera.y = left; camera . setSize ( width , height ); // camera.width = width; // camera.height = height; Get Position Top-left var top = camera . x ; var left = camera . y ; Center, relative to the top-left of the game canvas. var x = camera . centerX ; var y = camera . centerY ; Width & height var width = camera . width ; var height = camera . height ; var displayWidth = camera . displayWidth ; var displayHeight = camera . displayHeight ;","title":"View port"},{"location":"camera/#zoom","text":"Set camera . setZoom ( zoomValue ); // The minimum it can be is 0.001. camera . zoom = zoomValue ; Get var zoomValue = camera . zoom ;","title":"Zoom"},{"location":"camera/#rotation","text":"Set camera . setAngle ( angle ); // angle in degree camera . setRotation ( angle ); // angle in radians camera . rotation = angle ; // angle in radians Get var angle = camera . rotation ; // angle in radians","title":"Rotation"},{"location":"camera/#visible","text":"A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests. camera . setVisible ( value ); // camera.visible = value var visible = camera . visible ;","title":"Visible"},{"location":"camera/#alpha","text":"camera . setAlpha ( value ); // camera.alpha = value; var alpha = camera . alpha ;","title":"Alpha"},{"location":"camera/#scroll","text":"camera . setScroll ( x , y ) camera . scrollX = scrollX ; camera . scrollY = scrollY ; camera . centerToBounds (); camera . centerOn ( x , y ); // centered on the given coordinates camera . centerOnX ( x ); camera . centerOnY ( y ); camera . centerToSize ();","title":"Scroll"},{"location":"camera/#follow-game-object","text":"Start following camera . startFollow ( gameObject ); // camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY); // roundPx : set true to round the camera position to integers Stop following camera . stopFollow (); Set follow offset camera . setFollowOffset ( x , y ); Set lerp camera . setLerp ( x , y ); 1 : Camera will instantly snap to the target coordinates. 0.1 : Camera will more slowly track the target, giving a smooth transition. Deadzone camera . setDeadzone ( width , height ); If the target moves outside of this area, the camera will begin scrolling in order to follow it. Boundaries var left = camera . deadzone . left ; var right = camera . deadzone . right ; var top = camera . deadzone . top ; var bootom = camera . deadzone . bottom ; Clear deadzone camera . setDeadzone ();","title":"Follow game object"},{"location":"camera/#scroll-factor","text":"See Scroll factor in game object.","title":"Scroll factor"},{"location":"camera/#bounds","text":"Set camera . setBounds ( x , y , width , height ) Get var bounds = camera . getBounds (); // bounds: a rectangle object // var out = camera.getBounds(out);","title":"Bounds"},{"location":"camera/#world-coordinates","text":"World view, a rectangle object var worldView = camera . worldView ; var x = worldView . x ; var y = worldView . y ; var width = worldView . width ; // displayWidth var height = worldView . height ; // displayHeight var left = worldView . left ; // x var right = worldView . right ; // x + width var top = worldView . top ; // y var bottom = worldView . bottom ; // y + height var centerX = worldView . centerX ; var centerY = worldView . centerY ; var isInside = worldView . contains ( x , y ); var randPoint = worldView . getRandomPoint ( point ); // point: {x, y} Middle point var x = camera . midPoint . x ; var y = camera . midPoint . y ; Get world position var out = camera . getWorldPoint ( x , y ); // var out = camera.getWorldPoint(x, y, out); x , y : Position of camera. out : World position {x, y} Works for zoom of 1 with any resolution, but resolution > 1 and zoom !== 1 breaks","title":"World coordinates"},{"location":"camera/#set-background-color","text":"camera . setBackgroundColor ( color );","title":"Set background color"},{"location":"camera/#ignore-game-object","text":"Ignored game objects won't show at that camera. camera . ignore ( gameObject ); gameObject : A game object An array of game objects A group","title":"Ignore game object"},{"location":"camera/#get-cameras-below-pointer","text":"var cameras = scene . cameras . getCamerasBelowPointer ( pointer ); cameras : An array of cameras. pointer : {x, y}","title":"Get cameras below pointer"},{"location":"canvas-data/","text":"Introduction \u00b6 Get image data from texture, or text object. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCanvasData from './plugins/canvasdata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CanvasDataPlugin from './plugins/canvasdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCanvasData' , plugin : CanvasDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Text object -> Bit map \u00b6 var canvasData = scene . plugins . get ( 'rexCanvasData' ). textObjectToBitMap ( textObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textObject, out); textObject : text object , bbcode text object , or tag text boject For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : true , or false Texture -> Color map \u00b6 Texture -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( textureKey , frameName ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textureKey, frameName, out); Texture of game object -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( gameObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(gameObject, out); For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : Color32 integer = color integer + (alpha << 24) Get color integer (0 ~ 0xffffff) var color = value & 0xffffff ; or var color = canvasData . color32ToColorInt ( value ); Get alpha (0 ~ 0xff) var alpha = value >>> 24 ; var alpha = canvasData . color32TAlpha ( value ); Canvas data \u00b6 For each pixel \u00b6 For each pixel data canvasData . forEach ( callback , scope ); callback : Callback for each pixel function ( value , x , y , canvasData ) { } For each non zero pixel data canvasData . forEachNonZero ( callback , scope ); Get pixel data \u00b6 var data = canvasData . get ( x , y ); data : true , or false in result of textObjectToBitMap method Color32 in result of textureTColorMap method","title":"Canvas image data"},{"location":"canvas-data/#introduction","text":"Get image data from texture, or text object. Author: Rex Method only","title":"Introduction"},{"location":"canvas-data/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"canvas-data/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"canvas-data/#import-class","text":"import rexCanvasData from './plugins/canvasdata.js' ;","title":"Import class"},{"location":"canvas-data/#install-global-plugin","text":"Install plugin in configuration of game import CanvasDataPlugin from './plugins/canvasdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCanvasData' , plugin : CanvasDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"canvas-data/#text-object-bit-map","text":"var canvasData = scene . plugins . get ( 'rexCanvasData' ). textObjectToBitMap ( textObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textObject, out); textObject : text object , bbcode text object , or tag text boject For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : true , or false","title":"Text object -&gt; Bit map"},{"location":"canvas-data/#texture-color-map","text":"Texture -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( textureKey , frameName ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textureKey, frameName, out); Texture of game object -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( gameObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(gameObject, out); For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : Color32 integer = color integer + (alpha << 24) Get color integer (0 ~ 0xffffff) var color = value & 0xffffff ; or var color = canvasData . color32ToColorInt ( value ); Get alpha (0 ~ 0xff) var alpha = value >>> 24 ; var alpha = canvasData . color32TAlpha ( value );","title":"Texture -&gt; Color map"},{"location":"canvas-data/#canvas-data","text":"","title":"Canvas data"},{"location":"canvas-data/#for-each-pixel","text":"For each pixel data canvasData . forEach ( callback , scope ); callback : Callback for each pixel function ( value , x , y , canvasData ) { } For each non zero pixel data canvasData . forEachNonZero ( callback , scope );","title":"For each pixel"},{"location":"canvas-data/#get-pixel-data","text":"var data = canvasData . get ( x , y ); data : true , or false in result of textObjectToBitMap method Color32 in result of textureTColorMap method","title":"Get pixel data"},{"location":"canvas-texture/","text":"Introduction \u00b6 Canvas texture stored in texture cache , built-in object of phaser. Author: Richard Davey Usage \u00b6 Create canvas texture \u00b6 var texture = scene . textures . createCanvas ( key , width , height ); Get canvas element \u00b6 var canvas = texture . getCanvas (); var context = texture . getContext (); Canvas api Draw frame \u00b6 texture . drawFrame ( key , frame , x , y ); Clear \u00b6 texture . clear (); texture . clear ( x , y , width , height ); Refresh texture \u00b6 texture . refresh (); Color \u00b6 Set texture . setPixel ( x , y , red , green , blue ); // texture.setPixel(x, y, red, green, blue, alpha); Get var color = texture . getPixel ( x , y ); // var color = texture.getPixel(x, y, color); var colors = texture . getPixels ( x , y , width , height ); colors : [{x, y, color, alpha}, ...] Image data \u00b6 Set texture . putData ( imageData , x , y ); Get var imageData = texture . getData ( x , y , width , height ); Add frame \u00b6 texture . add ( name , sourceIndex , x , y , width , height ); name : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x : The x coordinate of the top-left of this Frame. y : The y coordinate of the top-left of this Frame. width : The width of this Frame. height : The height of this Frame.","title":"Canvas texture"},{"location":"canvas-texture/#introduction","text":"Canvas texture stored in texture cache , built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"canvas-texture/#usage","text":"","title":"Usage"},{"location":"canvas-texture/#create-canvas-texture","text":"var texture = scene . textures . createCanvas ( key , width , height );","title":"Create canvas texture"},{"location":"canvas-texture/#get-canvas-element","text":"var canvas = texture . getCanvas (); var context = texture . getContext (); Canvas api","title":"Get canvas element"},{"location":"canvas-texture/#draw-frame","text":"texture . drawFrame ( key , frame , x , y );","title":"Draw frame"},{"location":"canvas-texture/#clear","text":"texture . clear (); texture . clear ( x , y , width , height );","title":"Clear"},{"location":"canvas-texture/#refresh-texture","text":"texture . refresh ();","title":"Refresh texture"},{"location":"canvas-texture/#color","text":"Set texture . setPixel ( x , y , red , green , blue ); // texture.setPixel(x, y, red, green, blue, alpha); Get var color = texture . getPixel ( x , y ); // var color = texture.getPixel(x, y, color); var colors = texture . getPixels ( x , y , width , height ); colors : [{x, y, color, alpha}, ...]","title":"Color"},{"location":"canvas-texture/#image-data","text":"Set texture . putData ( imageData , x , y ); Get var imageData = texture . getData ( x , y , width , height );","title":"Image data"},{"location":"canvas-texture/#add-frame","text":"texture . add ( name , sourceIndex , x , y , width , height ); name : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x : The x coordinate of the top-left of this Frame. y : The y coordinate of the top-left of this Frame. width : The width of this Frame. height : The height of this Frame.","title":"Add frame"},{"location":"canvas/","text":"Introduction \u00b6 Drawing on canvas . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCanvasPlugin' , plugin : CanvasPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var canvas = scene . add . rexCanvas ( x , y , width , height ); Add canvas from JSON var canvas = scene . make . rexCanvas ({ x : 0 , y : 0 , width : 256 , height : 256 , //fill: null, add : true }); Custom class \u00b6 Define class class MyCanvas extends Canvas { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var canvas = new MyCanvas ( scene , x , y , width , height ); Clear or fill canvas \u00b6 Clear canvas . clear (); Fill color canvas . fill ( color ); Update canvas \u00b6 Get canvas elemet var canvasElem = canvas . getCanvas (); var context = canvasElem . getContext ( '2d' ); or var canvaesElem = canvas . canvas ; var context = canvas . context ; Draw on context Update display texture \u00b6 Update texture when rendering canvas . needRedraw (); Update texture now canvas . updateTexture (); or update canvas and texture var callback = function ( canvasElem , context ) { }; canvas . updateTexture ( callback ); // canvas.updateTexture(callback, scope); Load or save texture \u00b6 Save canvas to texuture canvas . generateTexture ( key , x , y , width , height ); Copy canvas from texture canvas . loadTexture ( key , resize ); Pixel color \u00b6 Get color var color = canvas . getPixel ( x , y ); color : Color object color.red , color.green , color.blue , color.alpha Set color canvas . setPixel ( x , y , r , g , b ); // canvas.setPixel(x, y, r, g, b, a); or canvas . setPixel ( x , y , color ); r , g , b , a : Integer number between 0 ~ 255. color : Color object Compare with Graphics object \u00b6 Drawing method This canvas object draws stuff on canvas in WEBGL or CANVAS render mode. Graphics object draws stuff on webgl render pipeline in WEBGL render mode. Size This canvas object has size (width, height) and origin. Graphics object does not have size and origin.","title":"Canvas"},{"location":"canvas/#introduction","text":"Drawing on canvas . Author: Rex Game object","title":"Introduction"},{"location":"canvas/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"canvas/#usage","text":"Sample code","title":"Usage"},{"location":"canvas/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCanvasPlugin' , plugin : CanvasPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"canvas/#create-instance","text":"var canvas = scene . add . rexCanvas ( x , y , width , height ); Add canvas from JSON var canvas = scene . make . rexCanvas ({ x : 0 , y : 0 , width : 256 , height : 256 , //fill: null, add : true });","title":"Create instance"},{"location":"canvas/#custom-class","text":"Define class class MyCanvas extends Canvas { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var canvas = new MyCanvas ( scene , x , y , width , height );","title":"Custom class"},{"location":"canvas/#clear-or-fill-canvas","text":"Clear canvas . clear (); Fill color canvas . fill ( color );","title":"Clear or fill canvas"},{"location":"canvas/#update-canvas","text":"Get canvas elemet var canvasElem = canvas . getCanvas (); var context = canvasElem . getContext ( '2d' ); or var canvaesElem = canvas . canvas ; var context = canvas . context ; Draw on context","title":"Update canvas"},{"location":"canvas/#update-display-texture","text":"Update texture when rendering canvas . needRedraw (); Update texture now canvas . updateTexture (); or update canvas and texture var callback = function ( canvasElem , context ) { }; canvas . updateTexture ( callback ); // canvas.updateTexture(callback, scope);","title":"Update display texture"},{"location":"canvas/#load-or-save-texture","text":"Save canvas to texuture canvas . generateTexture ( key , x , y , width , height ); Copy canvas from texture canvas . loadTexture ( key , resize );","title":"Load or save texture"},{"location":"canvas/#pixel-color","text":"Get color var color = canvas . getPixel ( x , y ); color : Color object color.red , color.green , color.blue , color.alpha Set color canvas . setPixel ( x , y , r , g , b ); // canvas.setPixel(x, y, r, g, b, a); or canvas . setPixel ( x , y , color ); r , g , b , a : Integer number between 0 ~ 255. color : Color object","title":"Pixel color"},{"location":"canvas/#compare-with-graphics-object","text":"Drawing method This canvas object draws stuff on canvas in WEBGL or CANVAS render mode. Graphics object draws stuff on webgl render pipeline in WEBGL render mode. Size This canvas object has size (width, height) and origin. Graphics object does not have size and origin.","title":"Compare with Graphics object"},{"location":"capitalizes-first/","text":"Introduction \u00b6 Capitalizes the first letter of a string, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . UppercaseFirst ( str );","title":"Capitalizes first"},{"location":"capitalizes-first/#introduction","text":"Capitalizes the first letter of a string, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"capitalizes-first/#usage","text":"var result = Phaser . Utils . String . UppercaseFirst ( str );","title":"Usage"},{"location":"circlemaskimage/","text":"Introduction \u00b6 Load a texture, then apply a circle mask. Extended from canvas plugin . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCircleMaskImagePlugin' , plugin : CircleMaskImagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var image = scene . add . rexCircleMaskImage ( x , y , key , frame , config ); config : maskType : Type of mask. null : No mask. 0 , or 'circle' : Circle mask. 1 , or 'ellipse' : Ellipse mask. Add image from JSON var image = scene . make . rexCircleMaskImage ({ x : 0 , y : 0 , key : key , frame : name , add : true }); Custom class \u00b6 Define class class MyImage extends CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , key , frame , config ); Set texture \u00b6 image . setTexture ( key , frame ); // image.setTexture(key, frame, maskType); maskType : Type of mask null : No mask. 0 , or 'circle' : Circle mask. Default value. 1 , or 'ellipse' : Ellipse mask.","title":"Circle mask image"},{"location":"circlemaskimage/#introduction","text":"Load a texture, then apply a circle mask. Extended from canvas plugin . Author: Rex Game object","title":"Introduction"},{"location":"circlemaskimage/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"circlemaskimage/#usage","text":"Sample code","title":"Usage"},{"location":"circlemaskimage/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCircleMaskImagePlugin' , plugin : CircleMaskImagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"circlemaskimage/#create-instance","text":"var image = scene . add . rexCircleMaskImage ( x , y , key , frame , config ); config : maskType : Type of mask. null : No mask. 0 , or 'circle' : Circle mask. 1 , or 'ellipse' : Ellipse mask. Add image from JSON var image = scene . make . rexCircleMaskImage ({ x : 0 , y : 0 , key : key , frame : name , add : true });","title":"Create instance"},{"location":"circlemaskimage/#custom-class","text":"Define class class MyImage extends CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , key , frame , config );","title":"Custom class"},{"location":"circlemaskimage/#set-texture","text":"image . setTexture ( key , frame ); // image.setTexture(key, frame, maskType); maskType : Type of mask null : No mask. 0 , or 'circle' : Circle mask. Default value. 1 , or 'ellipse' : Ellipse mask.","title":"Set texture"},{"location":"clamp/","text":"Introduction \u00b6 Force a value within the boundaries by clamping it to the range min , max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Clamp ( value , min , max ); value : The value to be clamped.","title":"Clamp"},{"location":"clamp/#introduction","text":"Force a value within the boundaries by clamping it to the range min , max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"clamp/#usage","text":"var result = Phaser . Math . Clamp ( value , min , max ); value : The value to be clamped.","title":"Usage"},{"location":"clock/","text":"Introduction \u00b6 A clock to count elapsed time. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexClock from './plugins/clock.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ClockPlugin from './plugins/clock-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexClock' , plugin : ClockPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var clock = scene . plugins . get ( 'rexClock' ). add ( scene , { // timeScale: 1 }); timeScale : time-scale for counting elapsed time. Start counting \u00b6 clock . start (); // clock.start(startAt); // start-at time in ms Get elapsed time \u00b6 var now = clock . now ; // elapsed time in ms Pause, Resume, stop counting \u00b6 clock . pause (); clock . resume (); clock . stop (); Seek elapsed time \u00b6 clock . seek ( time ); // elapsed time in ms State of counting \u00b6 var isRunning = clock . isRunning ; Time-scale \u00b6 var timeScale = clock . timeScale ; clock . timeScale = 0.5 ;","title":"Clock"},{"location":"clock/#introduction","text":"A clock to count elapsed time. Author: Rex Member of scene","title":"Introduction"},{"location":"clock/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"clock/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"clock/#import-class","text":"import rexClock from './plugins/clock.js' ;","title":"Import class"},{"location":"clock/#install-global-plugin","text":"Install plugin in configuration of game import ClockPlugin from './plugins/clock-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexClock' , plugin : ClockPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"clock/#create-instance","text":"var clock = scene . plugins . get ( 'rexClock' ). add ( scene , { // timeScale: 1 }); timeScale : time-scale for counting elapsed time.","title":"Create instance"},{"location":"clock/#start-counting","text":"clock . start (); // clock.start(startAt); // start-at time in ms","title":"Start counting"},{"location":"clock/#get-elapsed-time","text":"var now = clock . now ; // elapsed time in ms","title":"Get elapsed time"},{"location":"clock/#pause-resume-stop-counting","text":"clock . pause (); clock . resume (); clock . stop ();","title":"Pause, Resume, stop counting"},{"location":"clock/#seek-elapsed-time","text":"clock . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"clock/#state-of-counting","text":"var isRunning = clock . isRunning ;","title":"State of counting"},{"location":"clock/#time-scale","text":"var timeScale = clock . timeScale ; clock . timeScale = 0.5 ;","title":"Time-scale"},{"location":"color/","text":"Introduction \u00b6 Get color value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get color integer \u00b6 Hex string, or color integer var color = Phaser . Display . Color . ValueToColor ( input ); input : Hex string, or color integer RGB to color var color = Phaser . Display . Color . GetColor ( red , green , blue ); red , green , blue : 0 ~ 255 RGBA to color var color = Phaser . Display . Color . GetColor32 ( red , green , blue , alpha ); red , green , blue , alpha : 0 ~ 255 Hex string to color var color = Phaser . Display . Color . HexStringToColor ( hex ). color ; hex : #0033ff , #03f , 0x0033ff , or 0x03f RGB string to color var color = Phaser . Display . Color . RGBStringToColor ( rgb ); rgb : 'rgb(r,g,b)' , or 'rgba(r,g,b,a)' r, g, b : 0 ~ 255 a : 0 ~ 1 HSV to color var color = Phaser . Display . Color . HSVToRGB ( h , s , v ). color ; h , s , v : 0 ~ 1 Color integer to RGB \u00b6 var rgb = Phaser . Display . Color . IntegerToRGB ( color ); color : Color integer ( 0xAARRGGBB ) rgb : JSON object ( {r, g, b, a} ) HSV color wheel \u00b6 Create color array var colorArray = Phaser . Display . Color . HSVColorWheel ( s , v ); Get color var color = colorArray [ i ]. color ; // i : 0 ~ 359 Color object \u00b6 Create color object \u00b6 Create via r,g,b,a components var color = new Phaser . Display . Color ( red , green , blue ); // alpha = 255 // var color = new Phaser.Display.Color(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Create via color integer var color = Phaser . Display . Color . IntegerToColor ( colorInteger ); colorInteger : Color integer ( 0xAARRGGBB ) Set color \u00b6 Set color color . setTo ( red , green , blue ); // alpha = 255 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Set color in GL values color . setGLTo ( red , green , blue ); // alpha = 1 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 1 Set color from color object color . setFromRGB ( rgba ); rgba : { r : 0 , g : 0 , b : 0 , // a: 0 } Set color from HSV color . setFromHSV ( h , s , v ); Set to transparent () color . transparent (); Set (red, green, blue) to 0 Set to gray color color . gray ( value ); Set to a random color color . random (); or color . random ( min , max ); min : 0 ~ 255. Default value is 0. max : 0 ~ 255. Default value is 255. Set to random gray color . randomGray (); or color . randomGray ( min , max ); Set red/green/blue/alpha channel : 0 ~ 255 color . red = value ; // color.red += value; color . green = value ; // color.green += value; color . blue = value ; // color.blue += value; color . alpha = value ; // color.alpha += value; Set H/S/V channel : 0 ~ 1 color . h = value ; // color.h += value; color . s = value ; // color.s += value; color . v = value ; // color.v += value; Set normalized red, green, blue, alpha : 0 ~ 1 color . redGL = value ; // color.redGL += value; color . greenGL = value ; // color.greenGL += value; color . blueGL = value ; // color.blueGL += value; color . alphaGL = value ; // color.alphaGL += value; Set brighten color . brighten ( value ); value : Percentage, 0 ~ 100 Saturate : Increase the saturation (S) of this Color by the percentage amount given. color . saturate ( value ); value : Percentage, 0 ~ 100 Desaturate : Decrease the saturation (S) of this Color by the percentage amount given. color . desaturate ( value ); value : Percentage, 0 ~ 100 Lighten : Increase the lightness (V) of this Color by the percentage amount given. color . lighten ( value ); value : Percentage, 0 ~ 100 Darken : Decrease the lightness (V) of this Color by the percentage amount given. color . darken ( value ); value : Percentage, 0 ~ 100 Properties \u00b6 RGB Color, not including the alpha channel var c = color . color ; RGB Color, including the alpha channel. var c = color . color32 ; RGB color string which can be used in CSS color values. var c = color . rgba ; Red, green, blue, alpha : 0 ~ 255 var r = color . red ; var g = color . green ; var b = color . blue ; var a = color . alpha ; H, S, V : 0 ~ 1 var h = color . h ; var s = color . s ; var v = color . v ; Normalized red, green, blue, alpha : 0 ~ 1 var r = color . redGL ; var g = color . greenGL ; var b = color . blueGL ; var a = color . alphaGL ; Clone \u00b6 var newColor = color . clone (); To hex string \u00b6 var hexString = Phaser . Display . Color . RGBToString ( color . r , color . g , color . b , color . a ); // var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix); Interpolation \u00b6 Interpolate between 2 colors. var colorOut = Phaser . Display . Color . Interpolate . RGBWithRGB ( r1 , g1 , b1 , r2 , g2 , b2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithColor ( color1 , color2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithRGB ( color , r , g , b , length , index ); length , index : t = index/length (0~1)","title":"Color"},{"location":"color/#introduction","text":"Get color value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"color/#usage","text":"","title":"Usage"},{"location":"color/#get-color-integer","text":"Hex string, or color integer var color = Phaser . Display . Color . ValueToColor ( input ); input : Hex string, or color integer RGB to color var color = Phaser . Display . Color . GetColor ( red , green , blue ); red , green , blue : 0 ~ 255 RGBA to color var color = Phaser . Display . Color . GetColor32 ( red , green , blue , alpha ); red , green , blue , alpha : 0 ~ 255 Hex string to color var color = Phaser . Display . Color . HexStringToColor ( hex ). color ; hex : #0033ff , #03f , 0x0033ff , or 0x03f RGB string to color var color = Phaser . Display . Color . RGBStringToColor ( rgb ); rgb : 'rgb(r,g,b)' , or 'rgba(r,g,b,a)' r, g, b : 0 ~ 255 a : 0 ~ 1 HSV to color var color = Phaser . Display . Color . HSVToRGB ( h , s , v ). color ; h , s , v : 0 ~ 1","title":"Get color integer"},{"location":"color/#color-integer-to-rgb","text":"var rgb = Phaser . Display . Color . IntegerToRGB ( color ); color : Color integer ( 0xAARRGGBB ) rgb : JSON object ( {r, g, b, a} )","title":"Color integer to RGB"},{"location":"color/#hsv-color-wheel","text":"Create color array var colorArray = Phaser . Display . Color . HSVColorWheel ( s , v ); Get color var color = colorArray [ i ]. color ; // i : 0 ~ 359","title":"HSV color wheel"},{"location":"color/#color-object","text":"","title":"Color object"},{"location":"color/#create-color-object","text":"Create via r,g,b,a components var color = new Phaser . Display . Color ( red , green , blue ); // alpha = 255 // var color = new Phaser.Display.Color(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Create via color integer var color = Phaser . Display . Color . IntegerToColor ( colorInteger ); colorInteger : Color integer ( 0xAARRGGBB )","title":"Create color object"},{"location":"color/#set-color","text":"Set color color . setTo ( red , green , blue ); // alpha = 255 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Set color in GL values color . setGLTo ( red , green , blue ); // alpha = 1 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 1 Set color from color object color . setFromRGB ( rgba ); rgba : { r : 0 , g : 0 , b : 0 , // a: 0 } Set color from HSV color . setFromHSV ( h , s , v ); Set to transparent () color . transparent (); Set (red, green, blue) to 0 Set to gray color color . gray ( value ); Set to a random color color . random (); or color . random ( min , max ); min : 0 ~ 255. Default value is 0. max : 0 ~ 255. Default value is 255. Set to random gray color . randomGray (); or color . randomGray ( min , max ); Set red/green/blue/alpha channel : 0 ~ 255 color . red = value ; // color.red += value; color . green = value ; // color.green += value; color . blue = value ; // color.blue += value; color . alpha = value ; // color.alpha += value; Set H/S/V channel : 0 ~ 1 color . h = value ; // color.h += value; color . s = value ; // color.s += value; color . v = value ; // color.v += value; Set normalized red, green, blue, alpha : 0 ~ 1 color . redGL = value ; // color.redGL += value; color . greenGL = value ; // color.greenGL += value; color . blueGL = value ; // color.blueGL += value; color . alphaGL = value ; // color.alphaGL += value; Set brighten color . brighten ( value ); value : Percentage, 0 ~ 100 Saturate : Increase the saturation (S) of this Color by the percentage amount given. color . saturate ( value ); value : Percentage, 0 ~ 100 Desaturate : Decrease the saturation (S) of this Color by the percentage amount given. color . desaturate ( value ); value : Percentage, 0 ~ 100 Lighten : Increase the lightness (V) of this Color by the percentage amount given. color . lighten ( value ); value : Percentage, 0 ~ 100 Darken : Decrease the lightness (V) of this Color by the percentage amount given. color . darken ( value ); value : Percentage, 0 ~ 100","title":"Set color"},{"location":"color/#properties","text":"RGB Color, not including the alpha channel var c = color . color ; RGB Color, including the alpha channel. var c = color . color32 ; RGB color string which can be used in CSS color values. var c = color . rgba ; Red, green, blue, alpha : 0 ~ 255 var r = color . red ; var g = color . green ; var b = color . blue ; var a = color . alpha ; H, S, V : 0 ~ 1 var h = color . h ; var s = color . s ; var v = color . v ; Normalized red, green, blue, alpha : 0 ~ 1 var r = color . redGL ; var g = color . greenGL ; var b = color . blueGL ; var a = color . alphaGL ;","title":"Properties"},{"location":"color/#clone","text":"var newColor = color . clone ();","title":"Clone"},{"location":"color/#to-hex-string","text":"var hexString = Phaser . Display . Color . RGBToString ( color . r , color . g , color . b , color . a ); // var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix);","title":"To hex string"},{"location":"color/#interpolation","text":"Interpolate between 2 colors. var colorOut = Phaser . Display . Color . Interpolate . RGBWithRGB ( r1 , g1 , b1 , r2 , g2 , b2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithColor ( color1 , color2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithRGB ( color , r , g , b , length , index ); length , index : t = index/length (0~1)","title":"Interpolation"},{"location":"conditionstable/","text":"Introduction \u00b6 Check conditions to find passed tests listed in a csv table. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexConditionsTable from './plugins/conditionstable.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ConditionsTablePlugin from './plugins/conditionstable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexConditionsTable' , plugin : ConditionsTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var table = scene . plugins . get ( 'rexConditionsTable' ). add (); Load table from csv string \u00b6 table . loadCSV ( csvString , { // delimiter: ',' }); For exameple, csv string name A A B Test1 >= 10 <= 20 Test2 3 ,A,A,B Test1,>= 10,<= 20, Test2,,,3 means that: Test1: (A>=10) && (A<=20) Test2: (B==3) Test \u00b6 Get first pass test name \u00b6 table . anyPassTest ( values , function ( testName ){ }, scope ); values : Inputs in Key-value pairs or var testName = table . anyPassTest ( values ); Get each pass test name \u00b6 table . eachPassTest ( values , function ( testName ){ }, scope ); Get result of each test \u00b6 table . eachTest ( values , function ( testName , result ){ }, scope );","title":"Conditions table"},{"location":"conditionstable/#introduction","text":"Check conditions to find passed tests listed in a csv table. Author: Rex Member of scene","title":"Introduction"},{"location":"conditionstable/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"conditionstable/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"conditionstable/#import-class","text":"import rexConditionsTable from './plugins/conditionstable.js' ;","title":"Import class"},{"location":"conditionstable/#install-global-plugin","text":"Install plugin in configuration of game import ConditionsTablePlugin from './plugins/conditionstable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexConditionsTable' , plugin : ConditionsTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"conditionstable/#create-instance","text":"var table = scene . plugins . get ( 'rexConditionsTable' ). add ();","title":"Create instance"},{"location":"conditionstable/#load-table-from-csv-string","text":"table . loadCSV ( csvString , { // delimiter: ',' }); For exameple, csv string name A A B Test1 >= 10 <= 20 Test2 3 ,A,A,B Test1,>= 10,<= 20, Test2,,,3 means that: Test1: (A>=10) && (A<=20) Test2: (B==3)","title":"Load table from csv string"},{"location":"conditionstable/#test","text":"","title":"Test"},{"location":"conditionstable/#get-first-pass-test-name","text":"table . anyPassTest ( values , function ( testName ){ }, scope ); values : Inputs in Key-value pairs or var testName = table . anyPassTest ( values );","title":"Get first pass test name"},{"location":"conditionstable/#get-each-pass-test-name","text":"table . eachPassTest ( values , function ( testName ){ }, scope );","title":"Get each pass test name"},{"location":"conditionstable/#get-result-of-each-test","text":"table . eachTest ( values , function ( testName , result ){ }, scope );","title":"Get result of each test"},{"location":"config-data/","text":"Introduction \u00b6 Get parameters from configuration object. Author: Richard Davey Usage \u00b6 Quick start \u00b6 const GetValue = Phaser . Utils . Objects . GetValue ; var myMethod = function ( config ) { var x = GetValue ( config , 'x' , 0 ); var y = GetValue ( config , 'y' , 0 ); var width = GetValue ( config , 'width' , 0 ); var height = GetValue ( config , 'height' , 0 ); // ... } Get value \u00b6 Retrieves a value from an object. var value = Phaser . Utils . Objects . GetValue ( source , key , defaultValue ); source : Configuration object. key : The name of the property to retrieve from the object. For example, Property source.name , key = name Property source.position.x , key = position.x defaultValue : The value to return if the key isn't found in the source object. Finds the key within the top level of the source object, or returns defaultValue . var value = Phaser . Utils . Objects . GetFastValue ( source , key , defaultValue ); key : The key for the property on source. Must exist at the top level of the source object. Retrieves a value from an object. Allows for more advanced selection options. var value = Phaser . Utils . Objects . GetAdvancedValue ( source , key , defaultValue ); Implicit var source = { x : 4 }; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 From function var source = { x : function ( key ){ return 4 ;}}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 Pass key to function's 1 st parameter, and get return value as final result. Randomly pick one element from the array var source = { x : [ a , b , c ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random item from array [a, b, c] Random integer between min and max var source = { x : randInt : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random int min~max Random float between min and max var source = { x : randFloat : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random float min~max Is plain object \u00b6 var isPlainObject = Phaser . Utils . Objects . IsPlainObject ( object ); Plain object: - var obj = {}; - var obj = new Object();","title":"Configuration data"},{"location":"config-data/#introduction","text":"Get parameters from configuration object. Author: Richard Davey","title":"Introduction"},{"location":"config-data/#usage","text":"","title":"Usage"},{"location":"config-data/#quick-start","text":"const GetValue = Phaser . Utils . Objects . GetValue ; var myMethod = function ( config ) { var x = GetValue ( config , 'x' , 0 ); var y = GetValue ( config , 'y' , 0 ); var width = GetValue ( config , 'width' , 0 ); var height = GetValue ( config , 'height' , 0 ); // ... }","title":"Quick start"},{"location":"config-data/#get-value","text":"Retrieves a value from an object. var value = Phaser . Utils . Objects . GetValue ( source , key , defaultValue ); source : Configuration object. key : The name of the property to retrieve from the object. For example, Property source.name , key = name Property source.position.x , key = position.x defaultValue : The value to return if the key isn't found in the source object. Finds the key within the top level of the source object, or returns defaultValue . var value = Phaser . Utils . Objects . GetFastValue ( source , key , defaultValue ); key : The key for the property on source. Must exist at the top level of the source object. Retrieves a value from an object. Allows for more advanced selection options. var value = Phaser . Utils . Objects . GetAdvancedValue ( source , key , defaultValue ); Implicit var source = { x : 4 }; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 From function var source = { x : function ( key ){ return 4 ;}}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 Pass key to function's 1 st parameter, and get return value as final result. Randomly pick one element from the array var source = { x : [ a , b , c ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random item from array [a, b, c] Random integer between min and max var source = { x : randInt : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random int min~max Random float between min and max var source = { x : randFloat : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random float min~max","title":"Get value"},{"location":"config-data/#is-plain-object","text":"var isPlainObject = Phaser . Utils . Objects . IsPlainObject ( object ); Plain object: - var obj = {}; - var obj = new Object();","title":"Is plain object"},{"location":"container/","text":"Introduction \u00b6 Control the position and angle of children game objects, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Container \u00b6 Add container object \u00b6 var container = scene . add . container ( x , y ); // var container = scene.add.container(x, y, children); // children: an array of game object Custom class \u00b6 Define class class MyContainer extends Phaser . GameObjects . Container { constructor ( scene , x , y , children ) { super ( scene , x , y , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , children ); Destroy \u00b6 container . destroy (); Also destroy all children game objects. Set properties \u00b6 Reference game object , to set position, angle, visible, alpha, etc... Set size \u00b6 container . setSize ( width , height ); Default size is 0x0. Set scroll factor \u00b6 container . setScrollFactor ( x , y ); Apply this scrollFactor to all Container children. container . setScrollFactor ( x , y , true ); Hit area \u00b6 container . setInteractive ( new Phaser . Geom . Circle ( 0 , 0 , radius ), Phaser . Geom . Circle . Contains ); // container.setInteractive(false); // disable Assign hit area with a circle shape. Non-exclusive \u00b6 container . setExclusive ( false ); Allows a game object added to container many times. Children \u00b6 Add child \u00b6 container . add ( child ); // child: a game object or an array of game objects container . addAt ( child , index ); Exist \u00b6 var hasChild = container . exists ( child ); Get child \u00b6 var firstChild = container . first ; var nextChild = container . next ; var prevChild = container . previous ; var lastChild = container . last ; var child = container . getByName ( name ); var child = container . getRandom ( startIndex , length ); var child = container . getFirst ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var children = container . getAll ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var amount = container . count ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. Sort children \u00b6 container . sort ( property ); container . sort ( property , function ( childA , childB ){ return 0 ; // 0, 1, -1 }); Remove child \u00b6 container . remove ( child ); // container.remove(child, true); // remove child object and destroy it container . removeAt ( index ); // container.removeAt(index, true); // remove child object and destroy it container . removeBetween ( startIndex , endIndex ); // container.removeBetween(startIndex, endIndex, true); // remove children objects and destroy them container . removeAll (); // container.removeAll(true); // remove all children objects and destroy them Replace child \u00b6 container . replace ( oldChild , newChild ); // container.replace(oldChild, newChild, true); // destroy oldChild Order of child \u00b6 container . moveTo ( child , index ); container . bringToTop ( child ); container . sendToBack ( child ); container . moveUp ( child ); container . moveDown ( child ); container . swap ( child1 , child2 ); container . reverse (); container . shuffle (); Set properties \u00b6 container . setAll ( property , value , startIndex , endIndex ); For each child \u00b6 Iterate current children list container . iterate ( callback ); // container.iterate(callback, context); // container.iterate(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Iterate a copy of current children list container . each ( callback ); // container.each(callback, context); // container.each(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Compare with group object \u00b6 Container and group objects are all have a children list. Container has position, angle, alpha, visible, ...etc, but group does not have. Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't. A game object could be added to many group, but it only could be added to a container ( exclusive mode).","title":"Container"},{"location":"container/#introduction","text":"Control the position and angle of children game objects, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"container/#usage","text":"","title":"Usage"},{"location":"container/#container","text":"","title":"Container"},{"location":"container/#add-container-object","text":"var container = scene . add . container ( x , y ); // var container = scene.add.container(x, y, children); // children: an array of game object","title":"Add container object"},{"location":"container/#custom-class","text":"Define class class MyContainer extends Phaser . GameObjects . Container { constructor ( scene , x , y , children ) { super ( scene , x , y , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , children );","title":"Custom class"},{"location":"container/#destroy","text":"container . destroy (); Also destroy all children game objects.","title":"Destroy"},{"location":"container/#set-properties","text":"Reference game object , to set position, angle, visible, alpha, etc...","title":"Set properties"},{"location":"container/#set-size","text":"container . setSize ( width , height ); Default size is 0x0.","title":"Set size"},{"location":"container/#set-scroll-factor","text":"container . setScrollFactor ( x , y ); Apply this scrollFactor to all Container children. container . setScrollFactor ( x , y , true );","title":"Set scroll factor"},{"location":"container/#hit-area","text":"container . setInteractive ( new Phaser . Geom . Circle ( 0 , 0 , radius ), Phaser . Geom . Circle . Contains ); // container.setInteractive(false); // disable Assign hit area with a circle shape.","title":"Hit area"},{"location":"container/#non-exclusive","text":"container . setExclusive ( false ); Allows a game object added to container many times.","title":"Non-exclusive"},{"location":"container/#children","text":"","title":"Children"},{"location":"container/#add-child","text":"container . add ( child ); // child: a game object or an array of game objects container . addAt ( child , index );","title":"Add child"},{"location":"container/#exist","text":"var hasChild = container . exists ( child );","title":"Exist"},{"location":"container/#get-child","text":"var firstChild = container . first ; var nextChild = container . next ; var prevChild = container . previous ; var lastChild = container . last ; var child = container . getByName ( name ); var child = container . getRandom ( startIndex , length ); var child = container . getFirst ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var children = container . getAll ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var amount = container . count ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check.","title":"Get child"},{"location":"container/#sort-children","text":"container . sort ( property ); container . sort ( property , function ( childA , childB ){ return 0 ; // 0, 1, -1 });","title":"Sort children"},{"location":"container/#remove-child","text":"container . remove ( child ); // container.remove(child, true); // remove child object and destroy it container . removeAt ( index ); // container.removeAt(index, true); // remove child object and destroy it container . removeBetween ( startIndex , endIndex ); // container.removeBetween(startIndex, endIndex, true); // remove children objects and destroy them container . removeAll (); // container.removeAll(true); // remove all children objects and destroy them","title":"Remove child"},{"location":"container/#replace-child","text":"container . replace ( oldChild , newChild ); // container.replace(oldChild, newChild, true); // destroy oldChild","title":"Replace child"},{"location":"container/#order-of-child","text":"container . moveTo ( child , index ); container . bringToTop ( child ); container . sendToBack ( child ); container . moveUp ( child ); container . moveDown ( child ); container . swap ( child1 , child2 ); container . reverse (); container . shuffle ();","title":"Order of child"},{"location":"container/#set-properties_1","text":"container . setAll ( property , value , startIndex , endIndex );","title":"Set properties"},{"location":"container/#for-each-child","text":"Iterate current children list container . iterate ( callback ); // container.iterate(callback, context); // container.iterate(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Iterate a copy of current children list container . each ( callback ); // container.each(callback, context); // container.each(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {};","title":"For each child"},{"location":"container/#compare-with-group-object","text":"Container and group objects are all have a children list. Container has position, angle, alpha, visible, ...etc, but group does not have. Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't. A game object could be added to many group, but it only could be added to a container ( exclusive mode).","title":"Compare with group object"},{"location":"containerlite/","text":"Introduction \u00b6 Control the position and angle of children game objects. It is inspired from Ziao/phaser3-interim-containers . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexContainerLitePlugin' , plugin : ContainerLitePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add container object \u00b6 var container = scene . add . rexContainerLite ( x , y ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height); or var container = scene . add . rexContainerLite ( x , y , children ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height, children); Add container from JSON var container = scene . make . rexContainerLite ({ x : 0 , y : 0 , width : 1 , height : 1 , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //} }); Custom class \u00b6 Define class class MyContainer extends ContainerLite { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , width , height , children ); Destroy \u00b6 container . destroy (); Also destroy all children. Other properties \u00b6 This container game object inherits from Zone . Add(pin) child \u00b6 Add(pin) a game obejct to container container . add ( child ); // child: a game object Or add(pin) children container . addMultiple ( children ); // children: an array of game objects // container.add(children); // children: an array of game objects These world properties of children will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Note Position of child is the world position, i.e. position of child won't be changed when adding to container initially. 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. This behavior is different from official container , which using related position of child when adding to container. 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. Remove child \u00b6 Remove a child container . remove ( child ); // container.remove(child, destroyChild); child : Game object destroyChild : Set true to destroy child. Default is false . Remove all children container . clear (); // container.clear(destroyChild); Get children \u00b6 Get children in this container-lite var gameObjects = container . getChildren (); Get all children under this container-lite (nested) var gameObjects = container . getAllChildren (); Draw on render texture rt . draw ( container . getAllChildren ()); Ignored in camera camera . ignore ( container . getAllChildren ()); Exist \u00b6 Return true if child is under this container-lite (nested). var hasChild = container . contains ( child ); Children group \u00b6 var group = container . children ; Reference Group Set properties of child \u00b6 Position \u00b6 // child.x = x; // child.y = y; container . resetChildPositionState ( child ); or container . setChildPosition ( child , x , y ); Visible \u00b6 // child.visible = visible; container . resetChildVisibleState ( child ); or container . setChildVisible ( child , visible ); Alpha \u00b6 // child.child = child; container . resetChildAlphaState ( child ); or container . setChildAlpha ( child , alpha ); Local state of child \u00b6 Get local state var localState = container . getLocalState ( child ); or var localState = child . rexContainer ; Properties of localState x , y rotation scaleX , scaleY visible alpha Change local state of child \u00b6 Local position container . setChildLocalPosition ( child , x , y ); Depth \u00b6 Get depth of container var depth = container . depth ; Set depth of container and all children container . setDepth ( value ); Swap depth with another container containerA . swapDepth ( containerB ); Increase of container and all children container . incDepth ( value ); Mask \u00b6 Assign mask object to children container . setMask ( mask ); // container.mask = mask; Remove mask object of children container . clearMask (); Scroll factor \u00b6 Set scroll factor to children container . setScrollFactor ( x , y ); Compare with Official Container \u00b6 Nested container : Container : Feature of nested container will be dropped after v3.12. Container-Lite : Support nested container. Position/anlge/scale of a child object : Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale. Container-Lite : World position/anlge/scale. Updating period Container : Re-calculate position/anlge/scale of each child every render. Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale. Mask Container : It has mask property, and it could become a mask object. Container-Lite : It has mask property, but it could not become a mask object.","title":"Container Lite"},{"location":"containerlite/#introduction","text":"Control the position and angle of children game objects. It is inspired from Ziao/phaser3-interim-containers . Author: Rex Game object","title":"Introduction"},{"location":"containerlite/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"containerlite/#usage","text":"Sample code","title":"Usage"},{"location":"containerlite/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexContainerLitePlugin' , plugin : ContainerLitePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"containerlite/#add-container-object","text":"var container = scene . add . rexContainerLite ( x , y ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height); or var container = scene . add . rexContainerLite ( x , y , children ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height, children); Add container from JSON var container = scene . make . rexContainerLite ({ x : 0 , y : 0 , width : 1 , height : 1 , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //} });","title":"Add container object"},{"location":"containerlite/#custom-class","text":"Define class class MyContainer extends ContainerLite { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , width , height , children );","title":"Custom class"},{"location":"containerlite/#destroy","text":"container . destroy (); Also destroy all children.","title":"Destroy"},{"location":"containerlite/#other-properties","text":"This container game object inherits from Zone .","title":"Other properties"},{"location":"containerlite/#addpin-child","text":"Add(pin) a game obejct to container container . add ( child ); // child: a game object Or add(pin) children container . addMultiple ( children ); // children: an array of game objects // container.add(children); // children: an array of game objects These world properties of children will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Note Position of child is the world position, i.e. position of child won't be changed when adding to container initially. 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. This behavior is different from official container , which using related position of child when adding to container. 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.","title":"Add(pin) child"},{"location":"containerlite/#remove-child","text":"Remove a child container . remove ( child ); // container.remove(child, destroyChild); child : Game object destroyChild : Set true to destroy child. Default is false . Remove all children container . clear (); // container.clear(destroyChild);","title":"Remove child"},{"location":"containerlite/#get-children","text":"Get children in this container-lite var gameObjects = container . getChildren (); Get all children under this container-lite (nested) var gameObjects = container . getAllChildren (); Draw on render texture rt . draw ( container . getAllChildren ()); Ignored in camera camera . ignore ( container . getAllChildren ());","title":"Get children"},{"location":"containerlite/#exist","text":"Return true if child is under this container-lite (nested). var hasChild = container . contains ( child );","title":"Exist"},{"location":"containerlite/#children-group","text":"var group = container . children ; Reference Group","title":"Children group"},{"location":"containerlite/#set-properties-of-child","text":"","title":"Set properties of child"},{"location":"containerlite/#position","text":"// child.x = x; // child.y = y; container . resetChildPositionState ( child ); or container . setChildPosition ( child , x , y );","title":"Position"},{"location":"containerlite/#visible","text":"// child.visible = visible; container . resetChildVisibleState ( child ); or container . setChildVisible ( child , visible );","title":"Visible"},{"location":"containerlite/#alpha","text":"// child.child = child; container . resetChildAlphaState ( child ); or container . setChildAlpha ( child , alpha );","title":"Alpha"},{"location":"containerlite/#local-state-of-child","text":"Get local state var localState = container . getLocalState ( child ); or var localState = child . rexContainer ; Properties of localState x , y rotation scaleX , scaleY visible alpha","title":"Local state of child"},{"location":"containerlite/#change-local-state-of-child","text":"Local position container . setChildLocalPosition ( child , x , y );","title":"Change local state of child"},{"location":"containerlite/#depth","text":"Get depth of container var depth = container . depth ; Set depth of container and all children container . setDepth ( value ); Swap depth with another container containerA . swapDepth ( containerB ); Increase of container and all children container . incDepth ( value );","title":"Depth"},{"location":"containerlite/#mask","text":"Assign mask object to children container . setMask ( mask ); // container.mask = mask; Remove mask object of children container . clearMask ();","title":"Mask"},{"location":"containerlite/#scroll-factor","text":"Set scroll factor to children container . setScrollFactor ( x , y );","title":"Scroll factor"},{"location":"containerlite/#compare-with-official-container","text":"Nested container : Container : Feature of nested container will be dropped after v3.12. Container-Lite : Support nested container. Position/anlge/scale of a child object : Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale. Container-Lite : World position/anlge/scale. Updating period Container : Re-calculate position/anlge/scale of each child every render. Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale. Mask Container : It has mask property, and it could become a mask object. Container-Lite : It has mask property, but it could not become a mask object.","title":"Compare with Official Container"},{"location":"create-number-array/","text":"Introduction \u00b6 Create an array representing the range of numbers, built-in method of phaser. Author: Richard Davey Usage \u00b6 Create number array \u00b6 Create an array representing the range of numbers (usually integers), between, and inclusive of, the given start and end arguments. var arr = Phaser . Utils . Array . NumberArray ( start , end ); For example, var arr = Phaser . Utils . Array . NumberArray ( 2 , 4 ); // arr = [2, 3, 4] Create number array with step \u00b6 Create an array of numbers (positive and/or negative) progressing from start up to but not including end by advancing by step . var arr = Phaser . Utils . Array . NumberArray ( start , end , step ); For example, var arr = Phaser . Utils . Array . NumberArrayStep ( 0 , 20 , 5 ); // arr = [0, 5, 10, 15] Create prefix-number-suffix string array \u00b6 var arr = Phaser . Utils . Array . NumberArray ( start , end , prefix , suffix ); For example, var arr = Phaser . Utils . Array . NumberArray ( 5 , 7 , 'HD-' , '.png' ); // arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']","title":"Number array"},{"location":"create-number-array/#introduction","text":"Create an array representing the range of numbers, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"create-number-array/#usage","text":"","title":"Usage"},{"location":"create-number-array/#create-number-array","text":"Create an array representing the range of numbers (usually integers), between, and inclusive of, the given start and end arguments. var arr = Phaser . Utils . Array . NumberArray ( start , end ); For example, var arr = Phaser . Utils . Array . NumberArray ( 2 , 4 ); // arr = [2, 3, 4]","title":"Create number array"},{"location":"create-number-array/#create-number-array-with-step","text":"Create an array of numbers (positive and/or negative) progressing from start up to but not including end by advancing by step . var arr = Phaser . Utils . Array . NumberArray ( start , end , step ); For example, var arr = Phaser . Utils . Array . NumberArrayStep ( 0 , 20 , 5 ); // arr = [0, 5, 10, 15]","title":"Create number array with step"},{"location":"create-number-array/#create-prefix-number-suffix-string-array","text":"var arr = Phaser . Utils . Array . NumberArray ( start , end , prefix , suffix ); For example, var arr = Phaser . Utils . Array . NumberArray ( 5 , 7 , 'HD-' , '.png' ); // arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']","title":"Create prefix-number-suffix string array"},{"location":"csvscenario/","text":"Introduction \u00b6 Run script in csv format. Csv could be edited by excel or google document. Author: Rex Member of scene Source code \u00b6 Link Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCSVScenario from './plugins/csvscenario.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CSVScenarioPlugin from './plugins/csvscenario-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVScenario' , plugin : CSVScenarioPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var scenario = scene . plugins . get ( 'rexCSVScenario' ). add ( scene ); Load csv script \u00b6 scenario . load ( csvString , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // prefix: /^#([a-zA-Z]+)/ // argsConvert: true, // argsConvertScope: undefined }) timeUnit: time-unit of dt, for delay-execution 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second prefix: regex of picking control instructions argsConvert: a callback to convert parameters of run-custom-function , or true to use default convert function argsConvertScope: scope of argsConvert Start running instructions \u00b6 scenario . start ({ // label: '', // offset: 0 }) label : Go to the label and execute. '' label is starting from 1 st instruction offset : Offset time Events \u00b6 Complete scenario . on ( 'complete' , function ( scenario ){}); Label has changed scenario . on ( 'labelchange' , function (){}); Dump execution log scenario . on ( 'log' , function (){}); Notify error scenario . on ( 'error' , function (){}); Types of instructions \u00b6 Each row in csv table is an instruction. Run custom function \u00b6 Run custom function of scope , which passed from scenario.load(...) Format: -,fnName,param0,param1,... 1 st column of instruction: - Parameters will be converted to number, boolean, null, or string by default. Delay execution \u00b6 Run custom function after a delay. Format: time,fnName,param0,param1,... 1 st column of instruction: a number time-unit of delay is set from scenario.load(...) Parameters will be converted to number, boolean, null, or string by default. Wait then execution \u00b6 Run custom function until scenario.continue(eventName) Format: eventName,fnName,param0,param1,... 1 st column of instruction: not a number, not a string start from # Execution will be hang until scenario.continue(eventName) is called Parameters will be converted to number, boolean, null, or string by default. Task \u00b6 Sample code Scenario will be paused if custom function return an event emitter , resumed when that evnt emitter fires complete event. See also: Sequence Label \u00b6 Sample code A label for #GOTO or #IF instructions. Format: #LABEL,label 1 st column of instruction: #LABEL , case insensitive. Label '' is reserved, don't use '' for label name. Example: A label named 'AA' #LABEL,AA Exit \u00b6 Exit current execution. Format: #EXIT 1 st column of instruction: #EXIT , case insensitive. Goto \u00b6 Sample code Go to label and execute. Format: #GOTO,label 1 st column of instruction: #GOTO , case insensitive. An error event will be fired if label is not found. Example: Goto label 'AA' #GOTO,AA If-goto \u00b6 Sample code Go to trueLabel if condition is true, otherwise go to falseLabel . Format: #IF,condition,trueLabel,falseLabel 1 st column of instruction: #IF , case insensitive. conditon: boolean equation this is the scope passed from scenario.load(...) trueLabel/falseLabel: go to this label if condition is true/false run next instruction if label is '' An error event will be fired if label is not found. Example: Goto label 'AA' if (this.coin > 100), else run next instruction #IF,this.coin > 100,AA Wait \u00b6 Run next instruction after a delay time, or scenario.continue(eventName) . Format: #WAIT,time #WAIT,eventName 1 st column of instruction: #WAIT , case insensitive. 2 nd colume of instruction: a number: a delay time time-unit of delay is set from scenario.load(...) a string: an event name for scenario.continue(eventName) Example: Wait 1 time-unit #WAIT,1 Wait until 'click' #WAIT,click scenario . continue ( 'click' ) Other methods \u00b6 Pause \u00b6 scenario . pause () Resume \u00b6 scenario . resume ()","title":"CSV scenario"},{"location":"csvscenario/#introduction","text":"Run script in csv format. Csv could be edited by excel or google document. Author: Rex Member of scene","title":"Introduction"},{"location":"csvscenario/#source-code","text":"Link","title":"Source code"},{"location":"csvscenario/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvscenario/#import-class","text":"import rexCSVScenario from './plugins/csvscenario.js' ;","title":"Import class"},{"location":"csvscenario/#install-global-plugin","text":"Install plugin in configuration of game import CSVScenarioPlugin from './plugins/csvscenario-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVScenario' , plugin : CSVScenarioPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvscenario/#create-instance","text":"var scenario = scene . plugins . get ( 'rexCSVScenario' ). add ( scene );","title":"Create instance"},{"location":"csvscenario/#load-csv-script","text":"scenario . load ( csvString , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // prefix: /^#([a-zA-Z]+)/ // argsConvert: true, // argsConvertScope: undefined }) timeUnit: time-unit of dt, for delay-execution 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second prefix: regex of picking control instructions argsConvert: a callback to convert parameters of run-custom-function , or true to use default convert function argsConvertScope: scope of argsConvert","title":"Load csv script"},{"location":"csvscenario/#start-running-instructions","text":"scenario . start ({ // label: '', // offset: 0 }) label : Go to the label and execute. '' label is starting from 1 st instruction offset : Offset time","title":"Start running instructions"},{"location":"csvscenario/#events","text":"Complete scenario . on ( 'complete' , function ( scenario ){}); Label has changed scenario . on ( 'labelchange' , function (){}); Dump execution log scenario . on ( 'log' , function (){}); Notify error scenario . on ( 'error' , function (){});","title":"Events"},{"location":"csvscenario/#types-of-instructions","text":"Each row in csv table is an instruction.","title":"Types of instructions"},{"location":"csvscenario/#run-custom-function","text":"Run custom function of scope , which passed from scenario.load(...) Format: -,fnName,param0,param1,... 1 st column of instruction: - Parameters will be converted to number, boolean, null, or string by default.","title":"Run custom function"},{"location":"csvscenario/#delay-execution","text":"Run custom function after a delay. Format: time,fnName,param0,param1,... 1 st column of instruction: a number time-unit of delay is set from scenario.load(...) Parameters will be converted to number, boolean, null, or string by default.","title":"Delay execution"},{"location":"csvscenario/#wait-then-execution","text":"Run custom function until scenario.continue(eventName) Format: eventName,fnName,param0,param1,... 1 st column of instruction: not a number, not a string start from # Execution will be hang until scenario.continue(eventName) is called Parameters will be converted to number, boolean, null, or string by default.","title":"Wait then execution"},{"location":"csvscenario/#task","text":"Sample code Scenario will be paused if custom function return an event emitter , resumed when that evnt emitter fires complete event. See also: Sequence","title":"Task"},{"location":"csvscenario/#label","text":"Sample code A label for #GOTO or #IF instructions. Format: #LABEL,label 1 st column of instruction: #LABEL , case insensitive. Label '' is reserved, don't use '' for label name. Example: A label named 'AA' #LABEL,AA","title":"Label"},{"location":"csvscenario/#exit","text":"Exit current execution. Format: #EXIT 1 st column of instruction: #EXIT , case insensitive.","title":"Exit"},{"location":"csvscenario/#goto","text":"Sample code Go to label and execute. Format: #GOTO,label 1 st column of instruction: #GOTO , case insensitive. An error event will be fired if label is not found. Example: Goto label 'AA' #GOTO,AA","title":"Goto"},{"location":"csvscenario/#if-goto","text":"Sample code Go to trueLabel if condition is true, otherwise go to falseLabel . Format: #IF,condition,trueLabel,falseLabel 1 st column of instruction: #IF , case insensitive. conditon: boolean equation this is the scope passed from scenario.load(...) trueLabel/falseLabel: go to this label if condition is true/false run next instruction if label is '' An error event will be fired if label is not found. Example: Goto label 'AA' if (this.coin > 100), else run next instruction #IF,this.coin > 100,AA","title":"If-goto"},{"location":"csvscenario/#wait","text":"Run next instruction after a delay time, or scenario.continue(eventName) . Format: #WAIT,time #WAIT,eventName 1 st column of instruction: #WAIT , case insensitive. 2 nd colume of instruction: a number: a delay time time-unit of delay is set from scenario.load(...) a string: an event name for scenario.continue(eventName) Example: Wait 1 time-unit #WAIT,1 Wait until 'click' #WAIT,click scenario . continue ( 'click' )","title":"Wait"},{"location":"csvscenario/#other-methods","text":"","title":"Other methods"},{"location":"csvscenario/#pause","text":"scenario . pause ()","title":"Pause"},{"location":"csvscenario/#resume","text":"scenario . resume ()","title":"Resume"},{"location":"csvtoarray/","text":"Introduction \u00b6 Generate array from csv string. Reference: Papa Parse Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCSVToArray from './plugins/csvtoarray.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CSVToArrayPlugin from './plugins/csvtoarray-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVToArray' , plugin : CSVToArrayPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Convert csv \u00b6 var arr = scene . plugins . get ( 'rexCSVToArray' ). convert ( csvString , { // delimiter: ',', // convert: true }); Values will be converted to number , boolean , null , or string , if convert is true .","title":"CSV to array"},{"location":"csvtoarray/#introduction","text":"Generate array from csv string. Reference: Papa Parse Method only","title":"Introduction"},{"location":"csvtoarray/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"csvtoarray/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvtoarray/#import-class","text":"import rexCSVToArray from './plugins/csvtoarray.js' ;","title":"Import class"},{"location":"csvtoarray/#install-global-plugin","text":"Install plugin in configuration of game import CSVToArrayPlugin from './plugins/csvtoarray-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVToArray' , plugin : CSVToArrayPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvtoarray/#convert-csv","text":"var arr = scene . plugins . get ( 'rexCSVToArray' ). convert ( csvString , { // delimiter: ',', // convert: true }); Values will be converted to number , boolean , null , or string , if convert is true .","title":"Convert csv"},{"location":"csvtohashtable/","text":"Introduction \u00b6 Hash table indexed by (col-key, row-key) from csv string. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHashTable from './plugins/csvtohashtable.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HashTablePlugin from './plugins/csvtohashtable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHashTable' , plugin : HashTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var table = scene . plugins . get ( 'rexHashTable' ). add (); Load table from csv string \u00b6 table . loadCSV ( csvString , { // delimiter: ',', // convert: true // convertScope: undefined }); For exameple, csv string name hp mp Rex 100 20 Alice 300 40 name,hp,mp Rex,100,20 Alice,300,40 will be converted to { \"Alice\" : { \"name\" : \"Alice\" , \"hp\" : 300 , \"mp\" : 40 }, \"Rex\" : { \"name\" : \"Rex\" , \"hp\" : 100 , \"mp\" : 20 } } Then get value by var value = table . get ( 'Rex' , 'hp' ); Convert value type \u00b6 Values will be converted to number , boolean , null , or string , if convert is true , or assign your convert function by convert and convertScope when loading table ( table.loadCSV(...) ). var convertCallback = function ( table , rowKey , colKey , value ) { // value = ... return value ; }; Or uses these metheds to convert columns or rows. convert values in column table . convertCol ( colKey ); // colKey: a colKey, or an array of colKeys // table.convertCol(colKey, convertCallback, convertCallbackScope); convert values in row table . convertRow ( rowKey ); // rowKey: a rowKey, or an array of rowKeys // table.convertRow(rowKey, convertCallback, convertCallbackScope); Get value \u00b6 var val = table . get ( rowKey , colKey ); Set value \u00b6 table . set ( rowKey , colKey , value ); table . add ( rowKey , colKey , value ); // equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value); Has column/row key \u00b6 var hasRow = table . hasRowKey ( rowKey ); var hasCol = table . hasColKey ( colKey ); var hasCell = table . hasKey ( rowKey , colKey ); Value in column or row \u00b6 var existed = table . isValueInRol ( rowKey , data ); var existed = table . isValueInCol ( colKey , data ); Create table \u00b6 Clear table \u00b6 table . clear (); Append a column \u00b6 table . appendCol ( colKey , initValue ); // table.appendCol(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; }; Append a row \u00b6 table . appendRow ( colKey , initValue ); // table.appendRow(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; }; Remove a row \u00b6 table . removeRol ( colKey ); Remove a column \u00b6 table . removeCol ( colKey ); Sort column or row \u00b6 table . sortCol ( colKey , mode ); // table.sortCol(callback, scope); // sort column by callback table . sortRow ( rowKey , mode ); // table.sortRow(callback, scope); // sort column by callback Mode: 'ascending' , or 0 'descending' , or 1 'logical ascending' , or 2 'logical descending' , or 3 Sorting callback var callback = function ( rowKeyA , rowKeyB ) { return result ; // 1, -1, or 0 }; Retrieve columns or rows \u00b6 table . eachCol ( rowKey , callback , scope ); table . eachRow ( colKey , callback , scope ); Callback var callback = function ( table , rowKey , colKey , value ) { // ... };","title":"CSV to hash table"},{"location":"csvtohashtable/#introduction","text":"Hash table indexed by (col-key, row-key) from csv string. Author: Rex Member of scene","title":"Introduction"},{"location":"csvtohashtable/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"csvtohashtable/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvtohashtable/#import-class","text":"import rexHashTable from './plugins/csvtohashtable.js' ;","title":"Import class"},{"location":"csvtohashtable/#install-global-plugin","text":"Install plugin in configuration of game import HashTablePlugin from './plugins/csvtohashtable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHashTable' , plugin : HashTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvtohashtable/#create-instance","text":"var table = scene . plugins . get ( 'rexHashTable' ). add ();","title":"Create instance"},{"location":"csvtohashtable/#load-table-from-csv-string","text":"table . loadCSV ( csvString , { // delimiter: ',', // convert: true // convertScope: undefined }); For exameple, csv string name hp mp Rex 100 20 Alice 300 40 name,hp,mp Rex,100,20 Alice,300,40 will be converted to { \"Alice\" : { \"name\" : \"Alice\" , \"hp\" : 300 , \"mp\" : 40 }, \"Rex\" : { \"name\" : \"Rex\" , \"hp\" : 100 , \"mp\" : 20 } } Then get value by var value = table . get ( 'Rex' , 'hp' );","title":"Load table from csv string"},{"location":"csvtohashtable/#convert-value-type","text":"Values will be converted to number , boolean , null , or string , if convert is true , or assign your convert function by convert and convertScope when loading table ( table.loadCSV(...) ). var convertCallback = function ( table , rowKey , colKey , value ) { // value = ... return value ; }; Or uses these metheds to convert columns or rows. convert values in column table . convertCol ( colKey ); // colKey: a colKey, or an array of colKeys // table.convertCol(colKey, convertCallback, convertCallbackScope); convert values in row table . convertRow ( rowKey ); // rowKey: a rowKey, or an array of rowKeys // table.convertRow(rowKey, convertCallback, convertCallbackScope);","title":"Convert value type"},{"location":"csvtohashtable/#get-value","text":"var val = table . get ( rowKey , colKey );","title":"Get value"},{"location":"csvtohashtable/#set-value","text":"table . set ( rowKey , colKey , value ); table . add ( rowKey , colKey , value ); // equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value);","title":"Set value"},{"location":"csvtohashtable/#has-columnrow-key","text":"var hasRow = table . hasRowKey ( rowKey ); var hasCol = table . hasColKey ( colKey ); var hasCell = table . hasKey ( rowKey , colKey );","title":"Has column/row key"},{"location":"csvtohashtable/#value-in-column-or-row","text":"var existed = table . isValueInRol ( rowKey , data ); var existed = table . isValueInCol ( colKey , data );","title":"Value in column or row"},{"location":"csvtohashtable/#create-table","text":"","title":"Create table"},{"location":"csvtohashtable/#clear-table","text":"table . clear ();","title":"Clear table"},{"location":"csvtohashtable/#append-a-column","text":"table . appendCol ( colKey , initValue ); // table.appendCol(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; };","title":"Append a column"},{"location":"csvtohashtable/#append-a-row","text":"table . appendRow ( colKey , initValue ); // table.appendRow(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; };","title":"Append a row"},{"location":"csvtohashtable/#remove-a-row","text":"table . removeRol ( colKey );","title":"Remove a row"},{"location":"csvtohashtable/#remove-a-column","text":"table . removeCol ( colKey );","title":"Remove a column"},{"location":"csvtohashtable/#sort-column-or-row","text":"table . sortCol ( colKey , mode ); // table.sortCol(callback, scope); // sort column by callback table . sortRow ( rowKey , mode ); // table.sortRow(callback, scope); // sort column by callback Mode: 'ascending' , or 0 'descending' , or 1 'logical ascending' , or 2 'logical descending' , or 3 Sorting callback var callback = function ( rowKeyA , rowKeyB ) { return result ; // 1, -1, or 0 };","title":"Sort column or row"},{"location":"csvtohashtable/#retrieve-columns-or-rows","text":"table . eachCol ( rowKey , callback , scope ); table . eachRow ( colKey , callback , scope ); Callback var callback = function ( table , rowKey , colKey , value ) { // ... };","title":"Retrieve columns or rows"},{"location":"cursor/","text":"Introduction \u00b6 Custom cursor, built-in feature of phaser. Author: Richard Davey Usage \u00b6 References: Cursor Using URL values for the cursor property Set default cursor \u00b6 scene . input . setDefaultCursor ( CSSString ); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor of a Game Object \u00b6 Change cursor image when cursor is over that Game Object. gameObject . setInteractive ({ cursor : CSSString }); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor image directly after gameObject.setInteractive() . gameObject . input . cursor = CSSString ; // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Use pointer (hand cursor). gameObject . setInteractive ({ useHandCursor : true });","title":"Cursor"},{"location":"cursor/#introduction","text":"Custom cursor, built-in feature of phaser. Author: Richard Davey","title":"Introduction"},{"location":"cursor/#usage","text":"References: Cursor Using URL values for the cursor property","title":"Usage"},{"location":"cursor/#set-default-cursor","text":"scene . input . setDefaultCursor ( CSSString ); // CSSString: 'url(assets/input/cursors/sword.cur), pointer'","title":"Set default cursor"},{"location":"cursor/#set-cursor-of-a-game-object","text":"Change cursor image when cursor is over that Game Object. gameObject . setInteractive ({ cursor : CSSString }); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor image directly after gameObject.setInteractive() . gameObject . input . cursor = CSSString ; // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Use pointer (hand cursor). gameObject . setInteractive ({ useHandCursor : true });","title":"Set cursor of a Game Object"},{"location":"cursoratbound/","text":"Introduction \u00b6 Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCursorAtBound from './plugins/cursoratbound.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CursorAtBoundPlugin from './plugins/cursoratbound-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCursorAtBound' , plugin : CursorAtBoundPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var cursorAtBound = scene . plugins . get ( 'rexCursorAtBound' ). add ( scene , { // bounds: undefined, // sensitiveDistance: 20, }); bounds : A rectangle object \u311d or undefined (to use game window as rectangle object), for detecting the position of cursor. sensitiveDistance : A sensitive distance in pixels. Map position of cursor to state of cursor key Position x is between left bound and left bound + sensitive distance : left cursor key is pressed. Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed. Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed. Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed. State of cursor keys \u00b6 var cursorKeys = cursorAtBound . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = cursorAtBound . left ; var rightKeyDown = cursorAtBound . right ; var upKeyDown = cursorAtBound . up ; var downKeyDown = cursorAtBound . down ; var noKeyDown = cursorAtBound . noKey ; Destroy \u00b6 cursorAtBound . destroy ();","title":"Cursor at bound"},{"location":"cursoratbound/#introduction","text":"Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state. Author: Rex Member of scene","title":"Introduction"},{"location":"cursoratbound/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"cursoratbound/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"cursoratbound/#import-class","text":"import rexCursorAtBound from './plugins/cursoratbound.js' ;","title":"Import class"},{"location":"cursoratbound/#install-global-plugin","text":"Install plugin in configuration of game import CursorAtBoundPlugin from './plugins/cursoratbound-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCursorAtBound' , plugin : CursorAtBoundPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"cursoratbound/#create-instance","text":"var cursorAtBound = scene . plugins . get ( 'rexCursorAtBound' ). add ( scene , { // bounds: undefined, // sensitiveDistance: 20, }); bounds : A rectangle object \u311d or undefined (to use game window as rectangle object), for detecting the position of cursor. sensitiveDistance : A sensitive distance in pixels. Map position of cursor to state of cursor key Position x is between left bound and left bound + sensitive distance : left cursor key is pressed. Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed. Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed. Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed.","title":"Create instance"},{"location":"cursoratbound/#state-of-cursor-keys","text":"var cursorKeys = cursorAtBound . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = cursorAtBound . left ; var rightKeyDown = cursorAtBound . right ; var upKeyDown = cursorAtBound . up ; var downKeyDown = cursorAtBound . down ; var noKeyDown = cursorAtBound . noKey ;","title":"State of cursor keys"},{"location":"cursoratbound/#destroy","text":"cursorAtBound . destroy ();","title":"Destroy"},{"location":"datamanager/","text":"Introduction \u00b6 Store data in key-value pairs, built-inobject of phaser. Author: Richard Davey Usage \u00b6 Write \u00b6 Set value \u00b6 parent . data . set ( key , value ); Set values \u00b6 parent . data . set ( data ); // data: {key:value, ...} Merge values \u00b6 parent . data . merge ( data ); // data: {key:value, ...} parent . data . merge ( data , false ); // won't overwrite existed keys Events \u00b6 Fires setdata event when a value is first set. parent . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Fires changedata , and changedata- + key events when a value is set that already exists. parent . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); parent . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); Read \u00b6 Get value \u00b6 var value = parent . data . get ( key ); Get values \u00b6 var values = parent . data . get ( keys ); // values: [value, value, ...], keys: [key, key, ...] Get all values \u00b6 var allValues = parent . data . getAll (); // return a copy of data Query \u00b6 Using string.match() to pick matched keys. var result = parent . data . query ( rgExp ); Remove \u00b6 Remove key \u00b6 parent . data . remove ( key ); Remove keys \u00b6 parent . data . remove ( keys ); // keys: [key, key, ...] Pop key \u00b6 var value = parent . data . pop ( key ); Get and remove that key. Events \u00b6 Fires removedata event when a key is removed. parent . data . events . on ( 'removedata' , function ( parent , key , value ){ /* ... */ }); Freeze \u00b6 var isFrozen = parent . data . freeze ; parent . data . freeze = true ; No changes can be written to it. Has key \u00b6 var hasKey = parent . data . has ( key ); For each key \u00b6 parent . data . each ( function ( parent , key , value ){ /* ... */ }, scope ); Count of data \u00b6 var cnt = parent . data . count ; Reset \u00b6 Reset status and clear all keys. parent . data . reset ()","title":"Built-in data"},{"location":"datamanager/#introduction","text":"Store data in key-value pairs, built-inobject of phaser. Author: Richard Davey","title":"Introduction"},{"location":"datamanager/#usage","text":"","title":"Usage"},{"location":"datamanager/#write","text":"","title":"Write"},{"location":"datamanager/#set-value","text":"parent . data . set ( key , value );","title":"Set value"},{"location":"datamanager/#set-values","text":"parent . data . set ( data ); // data: {key:value, ...}","title":"Set values"},{"location":"datamanager/#merge-values","text":"parent . data . merge ( data ); // data: {key:value, ...} parent . data . merge ( data , false ); // won't overwrite existed keys","title":"Merge values"},{"location":"datamanager/#events","text":"Fires setdata event when a value is first set. parent . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Fires changedata , and changedata- + key events when a value is set that already exists. parent . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); parent . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ });","title":"Events"},{"location":"datamanager/#read","text":"","title":"Read"},{"location":"datamanager/#get-value","text":"var value = parent . data . get ( key );","title":"Get value"},{"location":"datamanager/#get-values","text":"var values = parent . data . get ( keys ); // values: [value, value, ...], keys: [key, key, ...]","title":"Get values"},{"location":"datamanager/#get-all-values","text":"var allValues = parent . data . getAll (); // return a copy of data","title":"Get all values"},{"location":"datamanager/#query","text":"Using string.match() to pick matched keys. var result = parent . data . query ( rgExp );","title":"Query"},{"location":"datamanager/#remove","text":"","title":"Remove"},{"location":"datamanager/#remove-key","text":"parent . data . remove ( key );","title":"Remove key"},{"location":"datamanager/#remove-keys","text":"parent . data . remove ( keys ); // keys: [key, key, ...]","title":"Remove keys"},{"location":"datamanager/#pop-key","text":"var value = parent . data . pop ( key ); Get and remove that key.","title":"Pop key"},{"location":"datamanager/#events_1","text":"Fires removedata event when a key is removed. parent . data . events . on ( 'removedata' , function ( parent , key , value ){ /* ... */ });","title":"Events"},{"location":"datamanager/#freeze","text":"var isFrozen = parent . data . freeze ; parent . data . freeze = true ; No changes can be written to it.","title":"Freeze"},{"location":"datamanager/#has-key","text":"var hasKey = parent . data . has ( key );","title":"Has key"},{"location":"datamanager/#for-each-key","text":"parent . data . each ( function ( parent , key , value ){ /* ... */ }, scope );","title":"For each key"},{"location":"datamanager/#count-of-data","text":"var cnt = parent . data . count ;","title":"Count of data"},{"location":"datamanager/#reset","text":"Reset status and clear all keys. parent . data . reset ()","title":"Reset"},{"location":"date/","text":"Introduction \u00b6 Get current date or unix-timestamp. Author: Built-in javascript function Usage \u00b6 Reference Create instance \u00b6 var d = new Date (); var d = new Date ( timestamp ); var d = new Date ( dateString ); var d = new Date ( year , month , day , hours , minutes , seconds , milliseconds ); Get date \u00b6 var year = d . getFullYear (); // returns the year var month = d . getMonth (); // returns the month (0-11) var date = d . getDate (); // returns the day of the month (1-31) var day = d . getDay (); // returns the day of the week var hour = d . getHours (); // returns the hour (0-23) var min = d . getMinutes (); // returns the minutes (0-59) var sec = d . getSeconds (); // returns the seconds (0-59) var ms = d . getMilliseconds (); // returns the milliseconds (0-999) Get unix-timestamp \u00b6 var timestamp = d . getTime ();; // unix-timestamp in milliseconds or var timestamp = Date . now ();; // unix-timestamp in milliseconds To string \u00b6 var s = d . toLocaleString (); // locale conventions var iso = d . toISOString (); // ISO standard","title":"Date"},{"location":"date/#introduction","text":"Get current date or unix-timestamp. Author: Built-in javascript function","title":"Introduction"},{"location":"date/#usage","text":"Reference","title":"Usage"},{"location":"date/#create-instance","text":"var d = new Date (); var d = new Date ( timestamp ); var d = new Date ( dateString ); var d = new Date ( year , month , day , hours , minutes , seconds , milliseconds );","title":"Create instance"},{"location":"date/#get-date","text":"var year = d . getFullYear (); // returns the year var month = d . getMonth (); // returns the month (0-11) var date = d . getDate (); // returns the day of the month (1-31) var day = d . getDay (); // returns the day of the week var hour = d . getHours (); // returns the hour (0-23) var min = d . getMinutes (); // returns the minutes (0-59) var sec = d . getSeconds (); // returns the seconds (0-59) var ms = d . getMilliseconds (); // returns the milliseconds (0-999)","title":"Get date"},{"location":"date/#get-unix-timestamp","text":"var timestamp = d . getTime ();; // unix-timestamp in milliseconds or var timestamp = Date . now ();; // unix-timestamp in milliseconds","title":"Get unix-timestamp"},{"location":"date/#to-string","text":"var s = d . toLocaleString (); // locale conventions var iso = d . toISOString (); // ISO standard","title":"To string"},{"location":"device/","text":"Introduction \u00b6 Get information of device, built-in properties of phaser. Author: Richard Davey Usage \u00b6 OS \u00b6 Platform scene . sys . game . device . os . android // Is running on android? scene . sys . game . device . os . chromeOS // Is running on chromeOS? scene . sys . game . device . os . cordova // Is the game running under Apache Cordova? scene . sys . game . device . os . crosswalk // Is the game running under the Intel Crosswalk XDK? scene . sys . game . device . os . desktop // Is running on a desktop? scene . sys . game . device . os . ejecta // Is the game running under Ejecta? scene . sys . game . device . os . electron // Is the game running under GitHub Electron? scene . sys . game . device . os . iOS // Is running on iOS? scene . sys . game . device . os . iPad // Is running on iPad? scene . sys . game . device . os . iPhone // Is running on iPhone? scene . sys . game . device . os . kindle // Is running on an Amazon Kindle? scene . sys . game . device . os . linux // Is running on linux? scene . sys . game . device . os . macOS // Is running on macOS? scene . sys . game . device . os . node // Is the game running under Node.js? scene . sys . game . device . os . nodeWebkit // Is the game running under Node-/Webkit? scene . sys . game . device . os . webApp // Set to true if running as a WebApp, i.e. within a WebView scene . sys . game . device . os . windows // Is running on windows? scene . sys . game . device . os . windowsPhone // Is running on a Windows Phone? Major version number of ios var version = scene . sys . game . device . os . iOSVersion ; Pixel-ratio of the host device var pixelRatio = scene . sys . game . device . os . pixelRatio ; Browser \u00b6 Platform scene . sys . game . device . browser . chrome // Is running in Chrome? scene . sys . game . device . browser . edge // Is running in Microsoft Edge browser? scene . sys . game . device . browser . firefox // Is running in Firefox? scene . sys . game . device . browser . ie // Is running in Internet Explorer 11 or less (not Edge)? scene . sys . game . device . browser . mobileSafari // Is running in Mobile Safari? scene . sys . game . device . browser . opera // Is running in Opera? scene . sys . game . device . browser . safari // Is running in Safari? scene . sys . game . device . browser . silk // Is running in the Silk browser (as used on the Amazon Kindle)? scene . sys . game . device . browser . trident // Is running a Trident version of Internet Explorer (IE11+)? Version var version = scene . sys . game . device . browser . chromeVersion ; var version = scene . sys . game . device . browser . firefoxVersion ; var version = scene . sys . game . device . browser . ieVersion ; var version = scene . sys . game . device . browser . safariVersion ; var version = scene . sys . game . device . browser . tridentVersion ; Video \u00b6 var h264Video = scene . sys . game . device . video . h264 ; // Can this device play h264 mp4 video files? var hlsVideo = scene . sys . game . device . video . hls ; // Can this device play hls video files? var mp4Video = scene . sys . game . device . video . mp4 ; // Can this device play h264 mp4 video files? var oggVideo = scene . sys . game . device . video . ogg ; // Can this device play ogg video files? var vp9Video = scene . sys . game . device . video . vp9 ; // Can this device play vp9 video files? var webmVideo = scene . sys . game . device . video . webm ; // Can this device play webm video files?","title":"Device"},{"location":"device/#introduction","text":"Get information of device, built-in properties of phaser. Author: Richard Davey","title":"Introduction"},{"location":"device/#usage","text":"","title":"Usage"},{"location":"device/#os","text":"Platform scene . sys . game . device . os . android // Is running on android? scene . sys . game . device . os . chromeOS // Is running on chromeOS? scene . sys . game . device . os . cordova // Is the game running under Apache Cordova? scene . sys . game . device . os . crosswalk // Is the game running under the Intel Crosswalk XDK? scene . sys . game . device . os . desktop // Is running on a desktop? scene . sys . game . device . os . ejecta // Is the game running under Ejecta? scene . sys . game . device . os . electron // Is the game running under GitHub Electron? scene . sys . game . device . os . iOS // Is running on iOS? scene . sys . game . device . os . iPad // Is running on iPad? scene . sys . game . device . os . iPhone // Is running on iPhone? scene . sys . game . device . os . kindle // Is running on an Amazon Kindle? scene . sys . game . device . os . linux // Is running on linux? scene . sys . game . device . os . macOS // Is running on macOS? scene . sys . game . device . os . node // Is the game running under Node.js? scene . sys . game . device . os . nodeWebkit // Is the game running under Node-/Webkit? scene . sys . game . device . os . webApp // Set to true if running as a WebApp, i.e. within a WebView scene . sys . game . device . os . windows // Is running on windows? scene . sys . game . device . os . windowsPhone // Is running on a Windows Phone? Major version number of ios var version = scene . sys . game . device . os . iOSVersion ; Pixel-ratio of the host device var pixelRatio = scene . sys . game . device . os . pixelRatio ;","title":"OS"},{"location":"device/#browser","text":"Platform scene . sys . game . device . browser . chrome // Is running in Chrome? scene . sys . game . device . browser . edge // Is running in Microsoft Edge browser? scene . sys . game . device . browser . firefox // Is running in Firefox? scene . sys . game . device . browser . ie // Is running in Internet Explorer 11 or less (not Edge)? scene . sys . game . device . browser . mobileSafari // Is running in Mobile Safari? scene . sys . game . device . browser . opera // Is running in Opera? scene . sys . game . device . browser . safari // Is running in Safari? scene . sys . game . device . browser . silk // Is running in the Silk browser (as used on the Amazon Kindle)? scene . sys . game . device . browser . trident // Is running a Trident version of Internet Explorer (IE11+)? Version var version = scene . sys . game . device . browser . chromeVersion ; var version = scene . sys . game . device . browser . firefoxVersion ; var version = scene . sys . game . device . browser . ieVersion ; var version = scene . sys . game . device . browser . safariVersion ; var version = scene . sys . game . device . browser . tridentVersion ;","title":"Browser"},{"location":"device/#video","text":"var h264Video = scene . sys . game . device . video . h264 ; // Can this device play h264 mp4 video files? var hlsVideo = scene . sys . game . device . video . hls ; // Can this device play hls video files? var mp4Video = scene . sys . game . device . video . mp4 ; // Can this device play h264 mp4 video files? var oggVideo = scene . sys . game . device . video . ogg ; // Can this device play ogg video files? var vp9Video = scene . sys . game . device . video . vp9 ; // Can this device play vp9 video files? var webmVideo = scene . sys . game . device . video . webm ; // Can this device play webm video files?","title":"Video"},{"location":"dialog-quest/","text":"Introduction \u00b6 Flow control of question manager with a dialog . Author: Rex Template Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Create dialog-quest object \u00b6 var quest = new DialogQuest ({ dialog : dialog , questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : true , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); dialog : A dialog game object. UI plugin does not included in this template , install it before creating a dialog game object. Reuse/update dialog game object for each question. The number of choice buttons should be equal or larger than the maximun number of options. Other parameters : See quest Flow chart \u00b6 graph TB Start[\"quest.start()\"] --> EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)<br>----<br>Update each choice button via question.option[i]\"] EventUpdateChoice --> EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)<br>----<br>Update dialog, action button via question\"] EventUpdateDialog --> EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)<br>----<br>Click any choice button\"] EventClickChoice --> EventClickAction[\"quest.emit('click-action', action, dialog, quest)<br>----<br>Click any action button\"] EventClickAction --> IsLast{\"quest.isLast()\"} EventClickChoice --> IsLast IsLast --> |No| Next[\"quest.next()\"] IsLast --> |Yes| Complete(\"Complete\") Next --> EventUpdateChoice Events \u00b6 Update dialog events Update each choice button via question.option[i] quest . on ( 'update-choice' , function ( choice , option , quest ){ }, scope ); choice : Choice button game object. Unused choice button game object will be hideen. option : Option object. quest : Quest object. Update dialog, action buttos via question quest . on ( 'update-dialog' , function ( dialog , question , quest ){ }, scope ); dialog : Dialog game object. Call dialog.layout() if needs. question : Question object. quest : Quest object. Button clicking events Click choice button quest . on ( 'click-choice' , function ( choice , dialog , quest ) { }, scope ); choice : Clicked choice button game object. dialog : Dialog game object. quest : Quest object. Click choice button quest . on ( 'click-action' , function ( action , dialog , quest ) { }, scope ); choice : Clicked action button game object. dialog : Dialog game object. quest : Quest object. Quest methods \u00b6 Start quest quest . start (); Next quest quest . next (); or quest . next ( key ); Is last question var isLast = quest . isLast (); Private data methods \u00b6 Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Dialog-quest"},{"location":"dialog-quest/#introduction","text":"Flow control of question manager with a dialog . Author: Rex Template","title":"Introduction"},{"location":"dialog-quest/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"dialog-quest/#usage","text":"Sample code","title":"Usage"},{"location":"dialog-quest/#create-dialog-quest-object","text":"var quest = new DialogQuest ({ dialog : dialog , questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : true , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); dialog : A dialog game object. UI plugin does not included in this template , install it before creating a dialog game object. Reuse/update dialog game object for each question. The number of choice buttons should be equal or larger than the maximun number of options. Other parameters : See quest","title":"Create dialog-quest object"},{"location":"dialog-quest/#flow-chart","text":"graph TB Start[\"quest.start()\"] --> EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)<br>----<br>Update each choice button via question.option[i]\"] EventUpdateChoice --> EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)<br>----<br>Update dialog, action button via question\"] EventUpdateDialog --> EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)<br>----<br>Click any choice button\"] EventClickChoice --> EventClickAction[\"quest.emit('click-action', action, dialog, quest)<br>----<br>Click any action button\"] EventClickAction --> IsLast{\"quest.isLast()\"} EventClickChoice --> IsLast IsLast --> |No| Next[\"quest.next()\"] IsLast --> |Yes| Complete(\"Complete\") Next --> EventUpdateChoice","title":"Flow chart"},{"location":"dialog-quest/#events","text":"Update dialog events Update each choice button via question.option[i] quest . on ( 'update-choice' , function ( choice , option , quest ){ }, scope ); choice : Choice button game object. Unused choice button game object will be hideen. option : Option object. quest : Quest object. Update dialog, action buttos via question quest . on ( 'update-dialog' , function ( dialog , question , quest ){ }, scope ); dialog : Dialog game object. Call dialog.layout() if needs. question : Question object. quest : Quest object. Button clicking events Click choice button quest . on ( 'click-choice' , function ( choice , dialog , quest ) { }, scope ); choice : Clicked choice button game object. dialog : Dialog game object. quest : Quest object. Click choice button quest . on ( 'click-action' , function ( action , dialog , quest ) { }, scope ); choice : Clicked action button game object. dialog : Dialog game object. quest : Quest object.","title":"Events"},{"location":"dialog-quest/#quest-methods","text":"Start quest quest . start (); Next quest quest . next (); or quest . next ( key ); Is last question var isLast = quest . isLast ();","title":"Quest methods"},{"location":"dialog-quest/#private-data-methods","text":"Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Private data methods"},{"location":"distance/","text":"Introduction \u00b6 Get distance, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get distance between 2 points var d = Phaser . Math . Distance . Between ( x1 , y1 , x2 , y2 ); Get speed var d = Phaser . Math . GetSpeed ( distance , time ); distance : The distance to travel in pixels. time : The time, in ms, to cover the distance in.","title":"Distance"},{"location":"distance/#introduction","text":"Get distance, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"distance/#usage","text":"Get distance between 2 points var d = Phaser . Math . Distance . Between ( x1 , y1 , x2 , y2 ); Get speed var d = Phaser . Math . GetSpeed ( distance , time ); distance : The distance to travel in pixels. time : The time, in ms, to cover the distance in.","title":"Usage"},{"location":"domelement/","text":"Introduction \u00b6 Carry DOM element, built-in game object of phaser. Limitations 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. Author: Richard Davey Usage \u00b6 Configuration \u00b6 Set parent to divId Set dom.createContainer to true . var config = { // ... parent : divId , dom : { createContainer : true }, // ... } var game = new Phaser . Game ( config ); Add DOM element object \u00b6 Add html string \u00b6 Load html string in preload stage scene . load . html ( key , url ); Reference: load html Add DOM element object with html string from cache var domElement = scene . add . dom ( x , y ). createFromCache ( key ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromCache(key, elementType); Add DOM element object with html string var domElement = scene . add . dom ( x , y ). createFromHTML ( htmlString ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType); Add existing DOM \u00b6 Create DOM element var el = document . createElement ( 'div' ); // el.style = '...'; // el.innerText = '...'; Add to scene var domElement = scene . add . dom ( x , y , el ); // var domElement = scene.add.dom(x, y, el, style, innerText); Custom class \u00b6 Define class class MyDOMElement extends Phaser . GameObjects . DOMElement { constructor ( scene , x , y , element , style , innerText ) { super ( scene , x , y , element , style , innerText ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var domElement = new MyDOMElement ( scene , x , y , element ); Event of DOM element \u00b6 Add listener domElement . addListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Add event handler var callback = function ( event ) { // event.target.name }; domElement . on ( eventName , callback , scope ); // domElement.once(eventName, callback, scope); Reference: event emitter Remove listener domElement . removeListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Get child \u00b6 Get child by name var child = domElement . getChildByName ( name ) Get child by id var child = domElement . getChildByID ( id ) Get child by property var child = domElement . getChildByProperty ( property , value ) Set inner html string \u00b6 scene . setHTML ( html ); or scene . setText ( html ); DOM Element \u00b6 Each DOM element object has 1 DOM element. Set domElement . setElement ( el ); // domElement.setElement(el, style, innerText); Get var el = domElement . node ; Depth \u00b6 domElement . setDepth ( value ); Skew \u00b6 domElement . setSkew ( x , y ); or domElement . skewX = x ; domElement . skewY = y ; Rotate 3d \u00b6 The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. domElement . rotate3d . set ( x , y , z , a ); Reference Other properties \u00b6 See game object","title":"DOM element"},{"location":"domelement/#introduction","text":"Carry DOM element, built-in game object of phaser. Limitations 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. Author: Richard Davey","title":"Introduction"},{"location":"domelement/#usage","text":"","title":"Usage"},{"location":"domelement/#configuration","text":"Set parent to divId Set dom.createContainer to true . var config = { // ... parent : divId , dom : { createContainer : true }, // ... } var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"domelement/#add-dom-element-object","text":"","title":"Add DOM element object"},{"location":"domelement/#add-html-string","text":"Load html string in preload stage scene . load . html ( key , url ); Reference: load html Add DOM element object with html string from cache var domElement = scene . add . dom ( x , y ). createFromCache ( key ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromCache(key, elementType); Add DOM element object with html string var domElement = scene . add . dom ( x , y ). createFromHTML ( htmlString ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType);","title":"Add html string"},{"location":"domelement/#add-existing-dom","text":"Create DOM element var el = document . createElement ( 'div' ); // el.style = '...'; // el.innerText = '...'; Add to scene var domElement = scene . add . dom ( x , y , el ); // var domElement = scene.add.dom(x, y, el, style, innerText);","title":"Add existing DOM"},{"location":"domelement/#custom-class","text":"Define class class MyDOMElement extends Phaser . GameObjects . DOMElement { constructor ( scene , x , y , element , style , innerText ) { super ( scene , x , y , element , style , innerText ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var domElement = new MyDOMElement ( scene , x , y , element );","title":"Custom class"},{"location":"domelement/#event-of-dom-element","text":"Add listener domElement . addListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Add event handler var callback = function ( event ) { // event.target.name }; domElement . on ( eventName , callback , scope ); // domElement.once(eventName, callback, scope); Reference: event emitter Remove listener domElement . removeListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' '","title":"Event of DOM element"},{"location":"domelement/#get-child","text":"Get child by name var child = domElement . getChildByName ( name ) Get child by id var child = domElement . getChildByID ( id ) Get child by property var child = domElement . getChildByProperty ( property , value )","title":"Get child"},{"location":"domelement/#set-inner-html-string","text":"scene . setHTML ( html ); or scene . setText ( html );","title":"Set inner html string"},{"location":"domelement/#dom-element","text":"Each DOM element object has 1 DOM element. Set domElement . setElement ( el ); // domElement.setElement(el, style, innerText); Get var el = domElement . node ;","title":"DOM Element"},{"location":"domelement/#depth","text":"domElement . setDepth ( value );","title":"Depth"},{"location":"domelement/#skew","text":"domElement . setSkew ( x , y ); or domElement . skewX = x ; domElement . skewY = y ;","title":"Skew"},{"location":"domelement/#rotate-3d","text":"The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. domElement . rotate3d . set ( x , y , z , a ); Reference","title":"Rotate 3d"},{"location":"domelement/#other-properties","text":"See game object","title":"Other properties"},{"location":"drag/","text":"Introduction \u00b6 Drag game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexDrag from './plugins/drag.js' ; Install global plugin \u00b6 Install plugin in configuration of game import DragPlugin from './plugins/drag-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDrag' , plugin : DragPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var drag = scene . plugins . get ( 'rexDrag' ). add ( gameObject , { // enable: true, // axis: 0, //0|'both'|'h&v'|1|'horizontal'|'h'|2|'vertical'|'v' // rotation: Phaser.Math.DegToRad(45) // axis rotation in rad }); enable : Set false to disable input events. axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. rotation : Axis rotation in rad, available in horizontal or vertical axis mode. Events \u00b6 Built-in dragging events gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /*...*/ }); Enable \u00b6 Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false Get dragging state \u00b6 var isDragging = drag . isDragging ; Set rotation of axis \u00b6 drag . setAxisRotation ( rad ); Set axis mode \u00b6 drag . setAxisMode ( axis ); axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. Try drag \u00b6 Game object will be dragged if there is any point above it. drag . drag (); Drop \u00b6 Game object will be dropped(dragend) manually. drag . dragend ();","title":"Drag"},{"location":"drag/#introduction","text":"Drag game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"drag/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"drag/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"drag/#import-class","text":"import rexDrag from './plugins/drag.js' ;","title":"Import class"},{"location":"drag/#install-global-plugin","text":"Install plugin in configuration of game import DragPlugin from './plugins/drag-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDrag' , plugin : DragPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"drag/#create-instance","text":"var drag = scene . plugins . get ( 'rexDrag' ). add ( gameObject , { // enable: true, // axis: 0, //0|'both'|'h&v'|1|'horizontal'|'h'|2|'vertical'|'v' // rotation: Phaser.Math.DegToRad(45) // axis rotation in rad }); enable : Set false to disable input events. axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. rotation : Axis rotation in rad, available in horizontal or vertical axis mode.","title":"Create instance"},{"location":"drag/#events","text":"Built-in dragging events gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /*...*/ });","title":"Events"},{"location":"drag/#enable","text":"Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"drag/#get-dragging-state","text":"var isDragging = drag . isDragging ;","title":"Get dragging state"},{"location":"drag/#set-rotation-of-axis","text":"drag . setAxisRotation ( rad );","title":"Set rotation of axis"},{"location":"drag/#set-axis-mode","text":"drag . setAxisMode ( axis ); axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis.","title":"Set axis mode"},{"location":"drag/#try-drag","text":"Game object will be dragged if there is any point above it. drag . drag ();","title":"Try drag"},{"location":"drag/#drop","text":"Game object will be dropped(dragend) manually. drag . dragend ();","title":"Drop"},{"location":"dragrotate/","text":"Introduction \u00b6 Get dragging angle around a specific point. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexDragRotate from './plugins/dragrotate.js' ; Install global plugin \u00b6 Install plugin in configuration of game import DragRotatePlugin from './plugins/dragrotate-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDragRotate' , plugin : DragRotatePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var dragRotate = scene . plugins . get ( 'rexDragRotate' ). add ( scene , { x : 0 , y : 0 , maxRadius : 100 minRadius : 0 , // enable: true, }); x , y : Orgin point, in world position. maxRadius , minRadius : Dragging is valid when distance between touch pointer and origin position is larger then minRadius and less then maxRadius . enable : Set false to disable input events. Enable \u00b6 Get var enable = dragRotate . enable ; // enable: true, or false Set dragRotate . setEnable ( enable ); // enable: true, or false Origin point \u00b6 Get var x = dragRotate . x ; var y = dragRotate . y ; Set dragRotate . setOrigin ( x , y ); or dragRotate . setOrigin ( pointer ); // pointer: {x, y} Note Parameter (x,y) is world position, not camera position. Radius \u00b6 Get var maxRadius = dragRotate . maxRadius ; var minRadius = dragRotate . minRadius ; Set dragRotate . setRadius ( maxRadius , minRadius ); Get dragging state \u00b6 var state = dragRotate . state ; 0 : No touch pointer 1 : Catch touch pointer Fire 'dragstart' event when catching touch pointers. Fire 'drag' event when any catched touch pointer moved. Fire 'dragend' event when releasing catched touch pointer. Is drag \u00b6 var isDrag = dragRotate . isDrag ; Return true if (dragRotate.state === 1) and catched touch pointer just moved. Events \u00b6 On dragging \u00b6 On dragging dragRotate . on ( 'drag' , function ( dragRotate ) { // gameObject.rotation += dragRotate.deltaRotation; }, scope ); dragRotate.deltaRotation : Dragging angle around origin position, in radians. Add to gameObject.rotation to spin target game object. gameObject . rotation += dragRotate . deltaRotation ; dragRotate.deltaAngle : Dragging angle around origin position, in degrees. Add to gameObject.angle to spin target game object. gameObject . angle += dragRotate . deltAangle ; dragRotate.cw : Return true if dragging is clock-wise. dragRotate.ccw : Return true if dragging is counter-clock-wise. On drag start, on drag end \u00b6 On drag touch pointer start, fired when catching touch pointer. dragRotate . on ( 'dragstart' , function ( dragRotate ) { }, scope ); On drag touch pointer end, fired when releasing the catched touch pointer. dragRotate . on ( 'dragend' , function ( dragRotate ) { }, scope ); Catched touch pointer \u00b6 Pointer , available when state is 1 var pointer = dragRotate . pointer ; World position of pointer var x = pointer . worldX ; var y = pointer . worldY ;","title":"Drag rotate"},{"location":"dragrotate/#introduction","text":"Get dragging angle around a specific point. Author: Rex Member of scene","title":"Introduction"},{"location":"dragrotate/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"dragrotate/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"dragrotate/#import-class","text":"import rexDragRotate from './plugins/dragrotate.js' ;","title":"Import class"},{"location":"dragrotate/#install-global-plugin","text":"Install plugin in configuration of game import DragRotatePlugin from './plugins/dragrotate-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDragRotate' , plugin : DragRotatePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"dragrotate/#create-instance","text":"var dragRotate = scene . plugins . get ( 'rexDragRotate' ). add ( scene , { x : 0 , y : 0 , maxRadius : 100 minRadius : 0 , // enable: true, }); x , y : Orgin point, in world position. maxRadius , minRadius : Dragging is valid when distance between touch pointer and origin position is larger then minRadius and less then maxRadius . enable : Set false to disable input events.","title":"Create instance"},{"location":"dragrotate/#enable","text":"Get var enable = dragRotate . enable ; // enable: true, or false Set dragRotate . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"dragrotate/#origin-point","text":"Get var x = dragRotate . x ; var y = dragRotate . y ; Set dragRotate . setOrigin ( x , y ); or dragRotate . setOrigin ( pointer ); // pointer: {x, y} Note Parameter (x,y) is world position, not camera position.","title":"Origin point"},{"location":"dragrotate/#radius","text":"Get var maxRadius = dragRotate . maxRadius ; var minRadius = dragRotate . minRadius ; Set dragRotate . setRadius ( maxRadius , minRadius );","title":"Radius"},{"location":"dragrotate/#get-dragging-state","text":"var state = dragRotate . state ; 0 : No touch pointer 1 : Catch touch pointer Fire 'dragstart' event when catching touch pointers. Fire 'drag' event when any catched touch pointer moved. Fire 'dragend' event when releasing catched touch pointer.","title":"Get dragging state"},{"location":"dragrotate/#is-drag","text":"var isDrag = dragRotate . isDrag ; Return true if (dragRotate.state === 1) and catched touch pointer just moved.","title":"Is drag"},{"location":"dragrotate/#events","text":"","title":"Events"},{"location":"dragrotate/#on-dragging","text":"On dragging dragRotate . on ( 'drag' , function ( dragRotate ) { // gameObject.rotation += dragRotate.deltaRotation; }, scope ); dragRotate.deltaRotation : Dragging angle around origin position, in radians. Add to gameObject.rotation to spin target game object. gameObject . rotation += dragRotate . deltaRotation ; dragRotate.deltaAngle : Dragging angle around origin position, in degrees. Add to gameObject.angle to spin target game object. gameObject . angle += dragRotate . deltAangle ; dragRotate.cw : Return true if dragging is clock-wise. dragRotate.ccw : Return true if dragging is counter-clock-wise.","title":"On dragging"},{"location":"dragrotate/#on-drag-start-on-drag-end","text":"On drag touch pointer start, fired when catching touch pointer. dragRotate . on ( 'dragstart' , function ( dragRotate ) { }, scope ); On drag touch pointer end, fired when releasing the catched touch pointer. dragRotate . on ( 'dragend' , function ( dragRotate ) { }, scope );","title":"On drag start, on drag end"},{"location":"dragrotate/#catched-touch-pointer","text":"Pointer , available when state is 1 var pointer = dragRotate . pointer ; World position of pointer var x = pointer . worldX ; var y = pointer . worldY ;","title":"Catched touch pointer"},{"location":"dynamicbitmaptext/","text":"Introduction \u00b6 Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load bitmap font \u00b6 Reference: load bitmap font Add bitmap text object \u00b6 var txt = scene . dynamicBitmapText ( x , y , key , text ); // var txt = scene.dynamicBitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . dynamicBitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . DynamicBitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text ); Set callback \u00b6 var callback = function ( data ) { // input // data.index, data.charCode // data.x, data.y, data.scale, data.rotation // data.data // data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight // modify input `data` then return it // ... // offset: data.y += 2 // set tint: data.color = tint return data ; } txt . setDisplayCallback ( callback ); Set text \u00b6 txt . setText ( '...' ); or txt . text = '...' ; Other properties \u00b6 This dynamic bitmap text class is extended from bitmap text","title":"Dynamic bitmap text"},{"location":"dynamicbitmaptext/#introduction","text":"Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"dynamicbitmaptext/#usage","text":"","title":"Usage"},{"location":"dynamicbitmaptext/#load-bitmap-font","text":"Reference: load bitmap font","title":"Load bitmap font"},{"location":"dynamicbitmaptext/#add-bitmap-text-object","text":"var txt = scene . dynamicBitmapText ( x , y , key , text ); // var txt = scene.dynamicBitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . dynamicBitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true });","title":"Add bitmap text object"},{"location":"dynamicbitmaptext/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . DynamicBitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text );","title":"Custom class"},{"location":"dynamicbitmaptext/#set-callback","text":"var callback = function ( data ) { // input // data.index, data.charCode // data.x, data.y, data.scale, data.rotation // data.data // data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight // modify input `data` then return it // ... // offset: data.y += 2 // set tint: data.color = tint return data ; } txt . setDisplayCallback ( callback );","title":"Set callback"},{"location":"dynamicbitmaptext/#set-text","text":"txt . setText ( '...' ); or txt . text = '...' ;","title":"Set text"},{"location":"dynamicbitmaptext/#other-properties","text":"This dynamic bitmap text class is extended from bitmap text","title":"Other properties"},{"location":"ease-function/","text":"Introduction \u00b6 Get ease function, built-in method of phaser. Author: Richard Davey Usage \u00b6 Get ease function \u00b6 var easeFunction = Phaser . Tweens . Builders . GetEaseFunction ( ease ); // var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams); ease : A string : Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut A custom function function ( v ) { return v ; } function ( v , param0 , param1 , ...) { return v ; } v : 0 ~ 1 Get result \u00b6 var result = easeFunction ( t ); t : 0 ~ 1","title":"Ease"},{"location":"ease-function/#introduction","text":"Get ease function, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"ease-function/#usage","text":"","title":"Usage"},{"location":"ease-function/#get-ease-function","text":"var easeFunction = Phaser . Tweens . Builders . GetEaseFunction ( ease ); // var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams); ease : A string : Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut A custom function function ( v ) { return v ; } function ( v , param0 , param1 , ...) { return v ; } v : 0 ~ 1","title":"Get ease function"},{"location":"ease-function/#get-result","text":"var result = easeFunction ( t ); t : 0 ~ 1","title":"Get result"},{"location":"eightdirection/","text":"Introduction \u00b6 Move game object by cursor keys, with a constant speed. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexEightDirection from './plugins/eightdirection.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import EightDirectionPlugin from './plugins/eightdirection-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexEightDirection' , plugin : EightDirectionPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var eightDirection = scene . plugins . get ( 'rexEightDirection' ). add ( gameObject , { speed : 200 , // dir: '8dir', // 0|'up&down'|1|'left&right'|2|'4dir'|3|'8dir' // rotateToDirection: false, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); speed : moving speed, pixels in second. dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. rotateToDirection : Set true to change angle towards moving direction. enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default. Set speed \u00b6 eightDirection . setSpeed ( speed ); // eightDirection.speed = speed; Set rotate-to-direction \u00b6 eightDirection . setRotateToDirection ( rotateToDirection ); rotateToDirection : Set true to change angle towards moving direction Set direction mode \u00b6 eightDirection . setDirMode ( dir ); dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.","title":"8 direction"},{"location":"eightdirection/#introduction","text":"Move game object by cursor keys, with a constant speed. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"eightdirection/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"eightdirection/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"eightdirection/#import-class","text":"import rexEightDirection from './plugins/eightdirection.js' ;","title":"Import class"},{"location":"eightdirection/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import EightDirectionPlugin from './plugins/eightdirection-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexEightDirection' , plugin : EightDirectionPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"eightdirection/#create-instance","text":"var eightDirection = scene . plugins . get ( 'rexEightDirection' ). add ( gameObject , { speed : 200 , // dir: '8dir', // 0|'up&down'|1|'left&right'|2|'4dir'|3|'8dir' // rotateToDirection: false, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); speed : moving speed, pixels in second. dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. rotateToDirection : Set true to change angle towards moving direction. enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default.","title":"Create instance"},{"location":"eightdirection/#set-speed","text":"eightDirection . setSpeed ( speed ); // eightDirection.speed = speed;","title":"Set speed"},{"location":"eightdirection/#set-rotate-to-direction","text":"eightDirection . setRotateToDirection ( rotateToDirection ); rotateToDirection : Set true to change angle towards moving direction","title":"Set rotate-to-direction"},{"location":"eightdirection/#set-direction-mode","text":"eightDirection . setDirMode ( dir ); dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.","title":"Set direction mode"},{"location":"eventemitter3/","text":"Introduction \u00b6 Event emitter . Usage \u00b6 Get event emitter \u00b6 Scene: var ee = scene . events ; Game object: var ee = gameObject ; Attach listener \u00b6 ee . on ( eventName , callback , scope ); ee . once ( eventName , callback , scope ); // only fire listeners one time Alias ee . addListener ( eventName , callback , scope ); ee . addListener ( eventName , callback , scope , true ); // only fire listeners one time Fire event \u00b6 ee . emit ( eventName , parameter0 , ...); Remove listeners \u00b6 ee . off ( eventName , callback , scope ); ee . off ( eventName , callback , scope , true ); // only remove one-time listeners Alias ee . removeListener ( eventName , callback , scope ); ee . removeListener ( eventName , callback , scope , true ); // only remove one-time listeners Remove all listeners \u00b6 ee . removeAllListeners (); Get listeners count \u00b6 var count = ee . listenerCount ( eventName ); //var noListener = (ee.listenerCount(eventName) === 0); Get listeners \u00b6 var listeners = ee . listeners ( eventName ); Listener \u00b6 { fn : callback , context : scope , once : once }","title":"Event emitter"},{"location":"eventemitter3/#introduction","text":"Event emitter .","title":"Introduction"},{"location":"eventemitter3/#usage","text":"","title":"Usage"},{"location":"eventemitter3/#get-event-emitter","text":"Scene: var ee = scene . events ; Game object: var ee = gameObject ;","title":"Get event emitter"},{"location":"eventemitter3/#attach-listener","text":"ee . on ( eventName , callback , scope ); ee . once ( eventName , callback , scope ); // only fire listeners one time Alias ee . addListener ( eventName , callback , scope ); ee . addListener ( eventName , callback , scope , true ); // only fire listeners one time","title":"Attach listener"},{"location":"eventemitter3/#fire-event","text":"ee . emit ( eventName , parameter0 , ...);","title":"Fire event"},{"location":"eventemitter3/#remove-listeners","text":"ee . off ( eventName , callback , scope ); ee . off ( eventName , callback , scope , true ); // only remove one-time listeners Alias ee . removeListener ( eventName , callback , scope ); ee . removeListener ( eventName , callback , scope , true ); // only remove one-time listeners","title":"Remove listeners"},{"location":"eventemitter3/#remove-all-listeners","text":"ee . removeAllListeners ();","title":"Remove all listeners"},{"location":"eventemitter3/#get-listeners-count","text":"var count = ee . listenerCount ( eventName ); //var noListener = (ee.listenerCount(eventName) === 0);","title":"Get listeners count"},{"location":"eventemitter3/#get-listeners","text":"var listeners = ee . listeners ( eventName );","title":"Get listeners"},{"location":"eventemitter3/#listener","text":"{ fn : callback , context : scope , once : once }","title":"Listener"},{"location":"fadeoutdestroy/","text":"Introduction \u00b6 Fade out game object then destroy it. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Fade-out \u00b6 var fade = fadeOutDestroy ( gameObject , duration ); Events \u00b6 See Events of tween task Scale completes or is stopped. fade . on ( 'complete' , function ( fade , gameObject ){ }, scope );","title":"Fade out destroy"},{"location":"fadeoutdestroy/#introduction","text":"Fade out game object then destroy it. Author: Rex Method only","title":"Introduction"},{"location":"fadeoutdestroy/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fadeoutdestroy/#usage","text":"Sample code","title":"Usage"},{"location":"fadeoutdestroy/#fade-out","text":"var fade = fadeOutDestroy ( gameObject , duration );","title":"Fade-out"},{"location":"fadeoutdestroy/#events","text":"See Events of tween task Scale completes or is stopped. fade . on ( 'complete' , function ( fade , gameObject ){ }, scope );","title":"Events"},{"location":"fadevolume/","text":"Introduction \u00b6 Fade-in/fade-out volume of sound. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Import functions \u00b6 import rexSoundFade from './plugins/soundfade.js' ; var soundFadeIn = rexSoundFade . fadeIn ; var soundFadeOut = rexSoundFade . fadeOut ; Install global plugin \u00b6 Install plugin in configuration of game import SoundFadePlugin from './plugins/soundfade-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSoundFade' , plugin : SoundFadePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Get functions var soundFadeIn = scene . get ( 'rexSoundFade' ). fadeIn ; var soundFadeOut = scene . get ( 'rexSoundFade' ). fadeOut ; Fade in \u00b6 Play and fade in voluem. var sound = soundFadeIn ( scene , sound , duration ); // sound: sound instance, or a key of audio cache // var sound = soundFadeIn(scene, sound, duration, endVolume, startVolume); Fade out \u00b6 Fade out volume then destroy it soundFadeOut ( scene , sound , duration ); // sound: sound instance Fade out volume then stop it soundFadeOut ( scene , sound , duration , false ); // sound: sound instance","title":"Volume fading"},{"location":"fadevolume/#introduction","text":"Fade-in/fade-out volume of sound. Author: Rex Method only","title":"Introduction"},{"location":"fadevolume/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fadevolume/#usage","text":"Sample code","title":"Usage"},{"location":"fadevolume/#import-functions","text":"import rexSoundFade from './plugins/soundfade.js' ; var soundFadeIn = rexSoundFade . fadeIn ; var soundFadeOut = rexSoundFade . fadeOut ;","title":"Import functions"},{"location":"fadevolume/#install-global-plugin","text":"Install plugin in configuration of game import SoundFadePlugin from './plugins/soundfade-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSoundFade' , plugin : SoundFadePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Get functions var soundFadeIn = scene . get ( 'rexSoundFade' ). fadeIn ; var soundFadeOut = scene . get ( 'rexSoundFade' ). fadeOut ;","title":"Install global plugin"},{"location":"fadevolume/#fade-in","text":"Play and fade in voluem. var sound = soundFadeIn ( scene , sound , duration ); // sound: sound instance, or a key of audio cache // var sound = soundFadeIn(scene, sound, duration, endVolume, startVolume);","title":"Fade in"},{"location":"fadevolume/#fade-out","text":"Fade out volume then destroy it soundFadeOut ( scene , sound , duration ); // sound: sound instance Fade out volume then stop it soundFadeOut ( scene , sound , duration , false ); // sound: sound instance","title":"Fade out"},{"location":"firebase-auth/","text":"Introduction \u00b6 It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/auth' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); On sign-in/sign-out \u00b6 firebaseApp . auth (). onAuthStateChanged ( function ( user ) { if ( user ) { // User is signed in. var displayName = user . displayName ; var email = user . email ; var emailVerified = user . emailVerified ; var photoURL = user . photoURL ; var isAnonymous = user . isAnonymous ; var uid = user . uid ; var providerData = user . providerData ; // ... } else { // User is signed out. // ... } }); Sign-in with facebook \u00b6 var provider = new firebase . auth . FacebookAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... }); Sign-in with Google \u00b6 var provider = new firebase . auth . GoogleAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... console . log ( user ); }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... }); Sign-in with password \u00b6 Create new user firebaseApp . auth (). createUserWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-in firebase . auth (). signInWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-out \u00b6 firebaseApp . auth (). signOut (); Current sign-in user \u00b6 var user = firebaseApp . auth (). currentUser ; if ( user != null ) { var name = user . displayName ; var email = user . email ; var photoUrl = user . photoURL ; var emailVerified = user . emailVerified ; var uid = user . uid ; } Update email \u00b6 user . updateEmail ( '...' ). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. }); Update profile \u00b6 user . updateProfile ({ displayName : '...' , photoURL : '...' }). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. }); Send a verification email \u00b6 user . sendEmailVerification (). then ( function () { // Email sent. }). catch ( function ( error ) { // An error happened. });","title":"Authentication"},{"location":"firebase-auth/#introduction","text":"It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase","title":"Introduction"},{"location":"firebase-auth/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-auth/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/auth' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' });","title":"Setup"},{"location":"firebase-auth/#on-sign-insign-out","text":"firebaseApp . auth (). onAuthStateChanged ( function ( user ) { if ( user ) { // User is signed in. var displayName = user . displayName ; var email = user . email ; var emailVerified = user . emailVerified ; var photoURL = user . photoURL ; var isAnonymous = user . isAnonymous ; var uid = user . uid ; var providerData = user . providerData ; // ... } else { // User is signed out. // ... } });","title":"On sign-in/sign-out"},{"location":"firebase-auth/#sign-in-with-facebook","text":"var provider = new firebase . auth . FacebookAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... });","title":"Sign-in with facebook"},{"location":"firebase-auth/#sign-in-with-google","text":"var provider = new firebase . auth . GoogleAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... console . log ( user ); }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... });","title":"Sign-in with Google"},{"location":"firebase-auth/#sign-in-with-password","text":"Create new user firebaseApp . auth (). createUserWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-in firebase . auth (). signInWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; });","title":"Sign-in with password"},{"location":"firebase-auth/#sign-out","text":"firebaseApp . auth (). signOut ();","title":"Sign-out"},{"location":"firebase-auth/#current-sign-in-user","text":"var user = firebaseApp . auth (). currentUser ; if ( user != null ) { var name = user . displayName ; var email = user . email ; var photoUrl = user . photoURL ; var emailVerified = user . emailVerified ; var uid = user . uid ; }","title":"Current sign-in user"},{"location":"firebase-auth/#update-email","text":"user . updateEmail ( '...' ). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. });","title":"Update email"},{"location":"firebase-auth/#update-profile","text":"user . updateProfile ({ displayName : '...' , photoURL : '...' }). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. });","title":"Update profile"},{"location":"firebase-auth/#send-a-verification-email","text":"user . sendEmailVerification (). then ( function () { // Email sent. }). catch ( function ( error ) { // An error happened. });","title":"Send a verification email"},{"location":"firebase-firestore/","text":"Introduction \u00b6 Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/firestore' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var db = firebaseApp . firestore (); db . settings ({ timestampsInSnapshots : true }) References \u00b6 Reference of collection var collectionRef = db . collection ( collectionName ); Reference of document var docRef = db . collection ( collectionName ). doc ( docName ); Save \u00b6 Add document db . collection ( collectionName ). add ( doc ) // doc: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum size for a document : 1 MiB (1,048,576 bytes) Set document db . collection ( collectionName ). doc ( docName ). set ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Overwrite document Update data db . collection ( collectionName ). doc ( docName ). update ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Batched writes // Get a new write batch var batch = db . batch (); batch . set ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . update ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . delete ( db . collection ( collectionName ). doc ( docName )); // ... // Commit the batch batch . commit () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum document writting in a commit : 500 Delete a document db . collection ( collectionName ). doc ( docName ). delete () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Delete a field db . collection ( collectionName ). doc ( docName ). update ({ key : firebase . firestore . FieldValue . delete () }) . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Transaction var docRef = db . collection ( collectionName ). doc ( docName ); db . runTransaction ( function ( transaction ) { // read-modify-write // This code may get re-run multiple times if there are conflicts. return transaction . get ( docRef ). then ( function ( doc ) { // doc.exists transaction . update ( docRef , keyValues ); }); }) . then ( function () { //console.log(\"Transaction successfully committed!\"); }) . catch ( function ( error ) { //console.log(\"Transaction failed: \", error); }); Limitation : Writes and transactions section Server timestamp \u00b6 firebase . firestore . FieldValue . serverTimestamp () Load \u00b6 Get a document db . collection ( collectionName ). doc ( docName ). get () . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); doc doc.id doc.data() Get all documents db . collection ( collectionName ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); querySnapshot querySnapshot.docs querySnapshot.forEach(callback, thisArg) querySnapshot.empty querySnapshot.size Simple queries db . collection ( collectionName ). where ( key , op , value ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); op : '>' , '==' , '<' , '>=' , '<=' != : where(key,'>', value).where(key, '<', value) Compound queries db . collection ( collectionName ). where ( key0 , op0 , value0 ). where ( key1 , op1 , value1 ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); Range filters ( < , <= , > , >= ) on only one field Paginate \u00b6 Order, limit db . collection ( collectionName ). orderBy ( key ). limit ( count ) Descending order : orderBy(key, 'desc') Order by multiple fields : orderBy(key0).orderBy(key1) Query, order, limit db . collection ( collectionName ). where ( key , op , value ). orderBy ( key ). limit ( count ) Key of first order must be equal to range comparison ( < , <= , > , >= ) Page Start at db . collection ( collectionName ). orderBy ( key ). startAt ( value ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endAt(value) Next page var lastDoc = querySnapshot . docs [ querySnapshot . docs . length - 1 ]; db . collection ( collectionName ). orderBy ( key ). startAfter ( lastDoc ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endBefore(lastDoc) Get realtime updates \u00b6 Get updates of a document var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ( function ( doc ) { /* ... */ }); Get updates of documents var unsubscribe = db . collection ( collectionName ). where ( key , op , value ) . onSnapshot ( function ( querySnapshot ) { /* ... */ }); Changes var changes = querySnapshot . docChanges (); // [change] Change change.type : 'added' , 'modified' , 'removed' change.newIndex change.oldIndex Detach a listener unsubscribe (); Events for metadata changes var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ({ includeMetadataChanges : true // Listen for document metadata changes }, function ( doc ) { /* ... */ } ); Indexing \u00b6 Reference","title":"Firestore"},{"location":"firebase-firestore/#introduction","text":"Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Author: Firebase","title":"Introduction"},{"location":"firebase-firestore/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-firestore/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/firestore' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var db = firebaseApp . firestore (); db . settings ({ timestampsInSnapshots : true })","title":"Setup"},{"location":"firebase-firestore/#references","text":"Reference of collection var collectionRef = db . collection ( collectionName ); Reference of document var docRef = db . collection ( collectionName ). doc ( docName );","title":"References"},{"location":"firebase-firestore/#save","text":"Add document db . collection ( collectionName ). add ( doc ) // doc: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum size for a document : 1 MiB (1,048,576 bytes) Set document db . collection ( collectionName ). doc ( docName ). set ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Overwrite document Update data db . collection ( collectionName ). doc ( docName ). update ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Batched writes // Get a new write batch var batch = db . batch (); batch . set ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . update ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . delete ( db . collection ( collectionName ). doc ( docName )); // ... // Commit the batch batch . commit () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum document writting in a commit : 500 Delete a document db . collection ( collectionName ). doc ( docName ). delete () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Delete a field db . collection ( collectionName ). doc ( docName ). update ({ key : firebase . firestore . FieldValue . delete () }) . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Transaction var docRef = db . collection ( collectionName ). doc ( docName ); db . runTransaction ( function ( transaction ) { // read-modify-write // This code may get re-run multiple times if there are conflicts. return transaction . get ( docRef ). then ( function ( doc ) { // doc.exists transaction . update ( docRef , keyValues ); }); }) . then ( function () { //console.log(\"Transaction successfully committed!\"); }) . catch ( function ( error ) { //console.log(\"Transaction failed: \", error); }); Limitation : Writes and transactions section","title":"Save"},{"location":"firebase-firestore/#server-timestamp","text":"firebase . firestore . FieldValue . serverTimestamp ()","title":"Server timestamp"},{"location":"firebase-firestore/#load","text":"Get a document db . collection ( collectionName ). doc ( docName ). get () . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); doc doc.id doc.data() Get all documents db . collection ( collectionName ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); querySnapshot querySnapshot.docs querySnapshot.forEach(callback, thisArg) querySnapshot.empty querySnapshot.size Simple queries db . collection ( collectionName ). where ( key , op , value ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); op : '>' , '==' , '<' , '>=' , '<=' != : where(key,'>', value).where(key, '<', value) Compound queries db . collection ( collectionName ). where ( key0 , op0 , value0 ). where ( key1 , op1 , value1 ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); Range filters ( < , <= , > , >= ) on only one field","title":"Load"},{"location":"firebase-firestore/#paginate","text":"Order, limit db . collection ( collectionName ). orderBy ( key ). limit ( count ) Descending order : orderBy(key, 'desc') Order by multiple fields : orderBy(key0).orderBy(key1) Query, order, limit db . collection ( collectionName ). where ( key , op , value ). orderBy ( key ). limit ( count ) Key of first order must be equal to range comparison ( < , <= , > , >= ) Page Start at db . collection ( collectionName ). orderBy ( key ). startAt ( value ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endAt(value) Next page var lastDoc = querySnapshot . docs [ querySnapshot . docs . length - 1 ]; db . collection ( collectionName ). orderBy ( key ). startAfter ( lastDoc ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endBefore(lastDoc)","title":"Paginate"},{"location":"firebase-firestore/#get-realtime-updates","text":"Get updates of a document var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ( function ( doc ) { /* ... */ }); Get updates of documents var unsubscribe = db . collection ( collectionName ). where ( key , op , value ) . onSnapshot ( function ( querySnapshot ) { /* ... */ }); Changes var changes = querySnapshot . docChanges (); // [change] Change change.type : 'added' , 'modified' , 'removed' change.newIndex change.oldIndex Detach a listener unsubscribe (); Events for metadata changes var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ({ includeMetadataChanges : true // Listen for document metadata changes }, function ( doc ) { /* ... */ } );","title":"Get realtime updates"},{"location":"firebase-firestore/#indexing","text":"Reference","title":"Indexing"},{"location":"firebase-storage/","text":"Introduction \u00b6 It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/storage' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var storageRef = firebaseApp . storage (). ref (); Upload string \u00b6 Upload string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64 formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64url formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload data URL string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'data_url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload image \u00b6 Get image from image texture var image = scene . textures . get ( key ). getSourceImage (); Copy image to canvas var canvas = CanvasPool . create ( scene , image . width , image . height ); var ctx = canvas . getContext ( '2d' ); ctx . drawImage ( image , 0 , 0 , image . width , image . height ); Get blob from canvas, then upload this blob. var uploadTask ; canvasToBlob ( canvas ) . then ( function ( blob ) { var metadata = { contentType : 'image/jpeg' , }; var fileRef = storageRef . child ( 'path/to/filename' ); uploadTask = fileRef . put ( blob , metadata ); return uploadTask ; }) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Reference: canvasToBlob Free canvas CanvasPool . remove ( canvas ); Upload task \u00b6 Pause task uploadTask . pause (); Resume task uploadTask . resume (); Cancel task uploadTask . cancel (); Monitor progress uploadTask . on ( 'state_changed' , function ( snapshot ){ // Observe state change events such as progress, pause, and resume var progress = ( snapshot . bytesTransferred / snapshot . totalBytes ) * 100 ; switch ( snapshot . state ) { case firebase . storage . TaskState . PAUSED : // or 'paused' console . log ( 'Upload is paused' ); break ; case firebase . storage . TaskState . RUNNING : // or 'running' console . log ( 'Upload is running' ); break ; } }, function ( error ) { // Handle unsuccessful uploads // https://firebase.google.com/docs/storage/web/handle-errors switch ( error . code ) { case 'storage/unauthorized' : // User doesn't have permission to access the object break ; case 'storage/canceled' : // User canceled the upload break ; case 'storage/unknown' : // Unknown error occurred, inspect error.serverResponse break ; } }, function () { // Handle successful uploads on complete // Get download url uploadTask . snapshot . ref . getDownloadURL () . then ( function ( url ) { console . log ( 'File available at' , url ); }) . catch ( function ( error ) {}); } ); Download file \u00b6 Get download url var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . getDownloadURL () . then ( function ( url ) {}) . catch ( function ( error ) {}); Download file by loader Delete file \u00b6 var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . delete () . then ( function () {}) . catch ( function ( error ) {});","title":"Storage"},{"location":"firebase-storage/#introduction","text":"It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase","title":"Introduction"},{"location":"firebase-storage/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-storage/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/storage' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var storageRef = firebaseApp . storage (). ref ();","title":"Setup"},{"location":"firebase-storage/#upload-string","text":"Upload string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64 formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64url formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload data URL string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'data_url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {});","title":"Upload string"},{"location":"firebase-storage/#upload-image","text":"Get image from image texture var image = scene . textures . get ( key ). getSourceImage (); Copy image to canvas var canvas = CanvasPool . create ( scene , image . width , image . height ); var ctx = canvas . getContext ( '2d' ); ctx . drawImage ( image , 0 , 0 , image . width , image . height ); Get blob from canvas, then upload this blob. var uploadTask ; canvasToBlob ( canvas ) . then ( function ( blob ) { var metadata = { contentType : 'image/jpeg' , }; var fileRef = storageRef . child ( 'path/to/filename' ); uploadTask = fileRef . put ( blob , metadata ); return uploadTask ; }) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Reference: canvasToBlob Free canvas CanvasPool . remove ( canvas );","title":"Upload image"},{"location":"firebase-storage/#upload-task","text":"Pause task uploadTask . pause (); Resume task uploadTask . resume (); Cancel task uploadTask . cancel (); Monitor progress uploadTask . on ( 'state_changed' , function ( snapshot ){ // Observe state change events such as progress, pause, and resume var progress = ( snapshot . bytesTransferred / snapshot . totalBytes ) * 100 ; switch ( snapshot . state ) { case firebase . storage . TaskState . PAUSED : // or 'paused' console . log ( 'Upload is paused' ); break ; case firebase . storage . TaskState . RUNNING : // or 'running' console . log ( 'Upload is running' ); break ; } }, function ( error ) { // Handle unsuccessful uploads // https://firebase.google.com/docs/storage/web/handle-errors switch ( error . code ) { case 'storage/unauthorized' : // User doesn't have permission to access the object break ; case 'storage/canceled' : // User canceled the upload break ; case 'storage/unknown' : // Unknown error occurred, inspect error.serverResponse break ; } }, function () { // Handle successful uploads on complete // Get download url uploadTask . snapshot . ref . getDownloadURL () . then ( function ( url ) { console . log ( 'File available at' , url ); }) . catch ( function ( error ) {}); } );","title":"Upload task"},{"location":"firebase-storage/#download-file","text":"Get download url var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . getDownloadURL () . then ( function ( url ) {}) . catch ( function ( error ) {}); Download file by loader","title":"Download file"},{"location":"firebase-storage/#delete-file","text":"var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . delete () . then ( function () {}) . catch ( function ( error ) {});","title":"Delete file"},{"location":"flash/","text":"Introduction \u00b6 Flashing (set invisible then visible) game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexFlash from './plugins/flash.js' ; Install global plugin \u00b6 Install plugin in configuration of game import FlashPlugin from './plugins/flash-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlash' , plugin : FlashPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var flash = scene . plugins . get ( 'rexFlash' ). add ( gameObject , { // duration: 500, // repeat: 2 }); duration : Duration of invisible(50%) and visible(50%), in millisecond. repeat : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once) Start flashing \u00b6 flash . flash (); // flash.flash(duration, repeat); or flash . flash ({ duration : 500 , repeat : 2 }); Stop flashing \u00b6 flash . stop (); Enable \u00b6 Enable/resume (default) flash . setEnable (); or flash . enable = true ; Disable/pause flash . setEnable ( false ); or flash . enable = false ; Set duration \u00b6 flash . setDuration ( duration ); // flash.duration = duration; Set repeat \u00b6 flash . setRepeat ( repeat ); Events \u00b6 On reached target flash . on ( 'complete' , function ( flash , gameObject ){}); Status \u00b6 Is flashing var isRunning = flash . isRunning ;","title":"Flash"},{"location":"flash/#introduction","text":"Flashing (set invisible then visible) game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"flash/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"flash/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"flash/#import-class","text":"import rexFlash from './plugins/flash.js' ;","title":"Import class"},{"location":"flash/#install-global-plugin","text":"Install plugin in configuration of game import FlashPlugin from './plugins/flash-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlash' , plugin : FlashPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"flash/#create-instance","text":"var flash = scene . plugins . get ( 'rexFlash' ). add ( gameObject , { // duration: 500, // repeat: 2 }); duration : Duration of invisible(50%) and visible(50%), in millisecond. repeat : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once)","title":"Create instance"},{"location":"flash/#start-flashing","text":"flash . flash (); // flash.flash(duration, repeat); or flash . flash ({ duration : 500 , repeat : 2 });","title":"Start flashing"},{"location":"flash/#stop-flashing","text":"flash . stop ();","title":"Stop flashing"},{"location":"flash/#enable","text":"Enable/resume (default) flash . setEnable (); or flash . enable = true ; Disable/pause flash . setEnable ( false ); or flash . enable = false ;","title":"Enable"},{"location":"flash/#set-duration","text":"flash . setDuration ( duration ); // flash.duration = duration;","title":"Set duration"},{"location":"flash/#set-repeat","text":"flash . setRepeat ( repeat );","title":"Set repeat"},{"location":"flash/#events","text":"On reached target flash . on ( 'complete' , function ( flash , gameObject ){});","title":"Events"},{"location":"flash/#status","text":"Is flashing var isRunning = flash . isRunning ;","title":"Status"},{"location":"flip/","text":"Introduction \u00b6 Flipping game object to another face by scaling width/height. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code , Sample code-2 User could import class directly, or install it by global plugin. Import class \u00b6 import rexFlip from './plugins/flip.js' ; Install global plugin \u00b6 Install plugin in configuration of game import FlipPlugin from './plugins/flip-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlip' , plugin : FlipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var flip = scene . plugins . get ( 'rexFlip' ). add ( gameObject , { face : 'back' , front : { key , frame }, // key, or callback back : { key , frame }, // key, or callback // orientation: 0, // 0|'x'|1|'y' // duration: 500, // delay: 0, // ease: 'Sine', }); face : Initial face. 0 , 'front' : Front face. 1 , 'back' : Back face. front , back : Texture of front/back face. undefined : Use current texture key, or frame name key : A string for texture key. {key, frame} , or {frame} : A texture key and frame name callback : Configure game object via callback. function ( gameObject ) { } orientation : Flipping orientation. 0 , 'x' , or 'horizontal' : Horizontal flipping. 1 , 'y' , or 'vertical' : Vertical flipping. duration : Duration of flipping, in millisecond. delay : Initial delay ease Ease function. Default value is 'Sine' . Start flipping \u00b6 flip . flip (); // flip.flip(duration); Stop flipping \u00b6 flip . stop (); Set duration \u00b6 flip . setDuration ( duration ); // flip.duration = duration; Faces \u00b6 Current face \u00b6 Get var face = flip . face ; 0 : Front face 1 : Back face Set flip . setFace ( face ); 0 , 'front' : Front face. 1 , 'back' : Back face. Toggle face flip . toggleFace (); Set texture of face \u00b6 Front face flip . setFrontFace ( key , frame ); or flip . setFrontFace ( callback ); callback : function ( gameObject ) { // ... } Back face flip . setBackFace ( key , frame ); or flip . setBackFace ( callback ); callback : function ( gameObject ) { // ... } Events \u00b6 On flipping complete flip . on ( 'complete' , function ( flip , gameObject ){}); Status \u00b6 Is flipping var isRunning = flip . isRunning ;","title":"Flip"},{"location":"flip/#introduction","text":"Flipping game object to another face by scaling width/height. Author: Rex Behavior of game object","title":"Introduction"},{"location":"flip/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"flip/#usage","text":"Sample code , Sample code-2 User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"flip/#import-class","text":"import rexFlip from './plugins/flip.js' ;","title":"Import class"},{"location":"flip/#install-global-plugin","text":"Install plugin in configuration of game import FlipPlugin from './plugins/flip-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlip' , plugin : FlipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"flip/#create-instance","text":"var flip = scene . plugins . get ( 'rexFlip' ). add ( gameObject , { face : 'back' , front : { key , frame }, // key, or callback back : { key , frame }, // key, or callback // orientation: 0, // 0|'x'|1|'y' // duration: 500, // delay: 0, // ease: 'Sine', }); face : Initial face. 0 , 'front' : Front face. 1 , 'back' : Back face. front , back : Texture of front/back face. undefined : Use current texture key, or frame name key : A string for texture key. {key, frame} , or {frame} : A texture key and frame name callback : Configure game object via callback. function ( gameObject ) { } orientation : Flipping orientation. 0 , 'x' , or 'horizontal' : Horizontal flipping. 1 , 'y' , or 'vertical' : Vertical flipping. duration : Duration of flipping, in millisecond. delay : Initial delay ease Ease function. Default value is 'Sine' .","title":"Create instance"},{"location":"flip/#start-flipping","text":"flip . flip (); // flip.flip(duration);","title":"Start flipping"},{"location":"flip/#stop-flipping","text":"flip . stop ();","title":"Stop flipping"},{"location":"flip/#set-duration","text":"flip . setDuration ( duration ); // flip.duration = duration;","title":"Set duration"},{"location":"flip/#faces","text":"","title":"Faces"},{"location":"flip/#current-face","text":"Get var face = flip . face ; 0 : Front face 1 : Back face Set flip . setFace ( face ); 0 , 'front' : Front face. 1 , 'back' : Back face. Toggle face flip . toggleFace ();","title":"Current face"},{"location":"flip/#set-texture-of-face","text":"Front face flip . setFrontFace ( key , frame ); or flip . setFrontFace ( callback ); callback : function ( gameObject ) { // ... } Back face flip . setBackFace ( key , frame ); or flip . setBackFace ( callback ); callback : function ( gameObject ) { // ... }","title":"Set texture of face"},{"location":"flip/#events","text":"On flipping complete flip . on ( 'complete' , function ( flip , gameObject ){});","title":"Events"},{"location":"flip/#status","text":"Is flipping var isRunning = flip . isRunning ;","title":"Status"},{"location":"format/","text":"Introduction \u00b6 Format string with variables, built-in method of phaser. Author: Richard Davey Usage \u00b6 Replace %x from an array. x starts from 1 . // const Format = Phaser.Utils.String.Format; var template = 'hello, %1' ; var view = [ 'rex' ]; var result = Format ( template , view );","title":"Format"},{"location":"format/#introduction","text":"Format string with variables, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"format/#usage","text":"Replace %x from an array. x starts from 1 . // const Format = Phaser.Utils.String.Format; var template = 'hello, %1' ; var view = [ 'rex' ]; var result = Format ( template , view );","title":"Usage"},{"location":"fsm/","text":"Introduction \u00b6 Finite state machine . Author: Rex Object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code New class \u00b6 Import FSM class \u00b6 import FSM from './plugins/fsm.js' ; Create new class \u00b6 class State extends FSM { constructor () { super (); } next_A () { return 'B' } enter_A () { /* ... */ } exit_A () { /* ... */ } } Members: next_ + stateName: Callback to get next state. enter_ + stateName: Callback when enter state. exit_ + stateName: Callback when exit state. Create instance \u00b6 var state = new State (); Create by config \u00b6 Install global plugin \u00b6 Install plugin in configuration of game import FSMPlugin from './plugins/fsm-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFSM' , plugin : FSMPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var config = { start : 'A' , // default: undefined states : { A : { next : 'B' , // function() { return 'B'; } enter : function () {}, exit : function () {} }, // ... }, init : function () {}, extend : { i : 0 , name : 'abc' // ... }, enable : true , eventEmitter : undefined , } var state = scene . plugins . get ( 'rexFSM' ). add ( config ) start : Initial state. states : Define states. stateName next : String of next state, or a callback to get next state. enter : Callback when enter state. exit : Callback when exit state. init : Initial callback when creating instance. extend : Inject key-value pairs into instance. enable : Set false to block any state changing. eventEmitter undefined : Create a private event emitter, default value. false : Don't add any event emitter, i.e. no event will be fired. Event emitter object : Fire event through this event emitter. Read state \u00b6 Current state var curState = state . state ; Previous state var preState = state . prevState ; Start at state \u00b6 Set new state without triggering any state-changing callbacks or events. state . start ( newState ); Next state \u00b6 graph TB next[\"state.next()\"] --> next_A[\"state.next_A()<br>return 'B'\"] next_A --> eventStateChange[\"state.emit('statechange', state)<br>state.prevState -> state.state\"] subgraph State changing eventStateChange --> exit_A[\"state.exit_A()\"] exit_A --> eventExitA[\"state.emit('exit_A', state)\"] eventExitA --> enter_B[\"state.enter_B()\"] enter_B --> eventEnterB[\"state.emit('enter_B', state)\"] subgraph Exit exit_A eventExitA end subgraph Enter enter_B eventEnterB end end goto[\"state.goto('B')\"] --> eventStateChange subgraph Request subgraph Next next next_A end subgraph Goto goto end end Request \u00b6 Get next state by callback state . next (); // nextState = state.next_A() Goto state state . goto ( nextState ); // state.state = nextState; State-changing \u00b6 These callbacks or events will be triggered if state is changing. For example, state is changing from 'A' to 'B'. event statechange state . on ( 'statechange' , function ( state ) { console . log ( state . prevState + '->' + state . state ); }); callback state.exit_A event exit_A state . on ( 'exit_A' , function ( state ) { /*...*/ }); callback state.enter_B event enter_B state . on ( 'enter_B' , function ( state ) { /*...*/ }); Enable \u00b6 state . setEnable (); // state.setEnable(false); // disable state.next() and state.goto() will be ignored if disabled.","title":"FSM"},{"location":"fsm/#introduction","text":"Finite state machine . Author: Rex Object","title":"Introduction"},{"location":"fsm/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fsm/#usage","text":"Sample code","title":"Usage"},{"location":"fsm/#new-class","text":"","title":"New class"},{"location":"fsm/#import-fsm-class","text":"import FSM from './plugins/fsm.js' ;","title":"Import FSM class"},{"location":"fsm/#create-new-class","text":"class State extends FSM { constructor () { super (); } next_A () { return 'B' } enter_A () { /* ... */ } exit_A () { /* ... */ } } Members: next_ + stateName: Callback to get next state. enter_ + stateName: Callback when enter state. exit_ + stateName: Callback when exit state.","title":"Create new class"},{"location":"fsm/#create-instance","text":"var state = new State ();","title":"Create instance"},{"location":"fsm/#create-by-config","text":"","title":"Create by config"},{"location":"fsm/#install-global-plugin","text":"Install plugin in configuration of game import FSMPlugin from './plugins/fsm-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFSM' , plugin : FSMPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"fsm/#create-instance_1","text":"var config = { start : 'A' , // default: undefined states : { A : { next : 'B' , // function() { return 'B'; } enter : function () {}, exit : function () {} }, // ... }, init : function () {}, extend : { i : 0 , name : 'abc' // ... }, enable : true , eventEmitter : undefined , } var state = scene . plugins . get ( 'rexFSM' ). add ( config ) start : Initial state. states : Define states. stateName next : String of next state, or a callback to get next state. enter : Callback when enter state. exit : Callback when exit state. init : Initial callback when creating instance. extend : Inject key-value pairs into instance. enable : Set false to block any state changing. eventEmitter undefined : Create a private event emitter, default value. false : Don't add any event emitter, i.e. no event will be fired. Event emitter object : Fire event through this event emitter.","title":"Create instance"},{"location":"fsm/#read-state","text":"Current state var curState = state . state ; Previous state var preState = state . prevState ;","title":"Read state"},{"location":"fsm/#start-at-state","text":"Set new state without triggering any state-changing callbacks or events. state . start ( newState );","title":"Start at state"},{"location":"fsm/#next-state","text":"graph TB next[\"state.next()\"] --> next_A[\"state.next_A()<br>return 'B'\"] next_A --> eventStateChange[\"state.emit('statechange', state)<br>state.prevState -> state.state\"] subgraph State changing eventStateChange --> exit_A[\"state.exit_A()\"] exit_A --> eventExitA[\"state.emit('exit_A', state)\"] eventExitA --> enter_B[\"state.enter_B()\"] enter_B --> eventEnterB[\"state.emit('enter_B', state)\"] subgraph Exit exit_A eventExitA end subgraph Enter enter_B eventEnterB end end goto[\"state.goto('B')\"] --> eventStateChange subgraph Request subgraph Next next next_A end subgraph Goto goto end end","title":"Next state"},{"location":"fsm/#request","text":"Get next state by callback state . next (); // nextState = state.next_A() Goto state state . goto ( nextState ); // state.state = nextState;","title":"Request"},{"location":"fsm/#state-changing","text":"These callbacks or events will be triggered if state is changing. For example, state is changing from 'A' to 'B'. event statechange state . on ( 'statechange' , function ( state ) { console . log ( state . prevState + '->' + state . state ); }); callback state.exit_A event exit_A state . on ( 'exit_A' , function ( state ) { /*...*/ }); callback state.enter_B event enter_B state . on ( 'enter_B' , function ( state ) { /*...*/ });","title":"State-changing"},{"location":"fsm/#enable","text":"state . setEnable (); // state.setEnable(false); // disable state.next() and state.goto() will be ignored if disabled.","title":"Enable"},{"location":"fullscreen/","text":"Introduction \u00b6 Enable or disable full screen mode, built-in method of phaser. Author: Richard Davey Usage \u00b6 Enable/disable \u00b6 Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { if ( scene . scale . isFullscreen ) { scene . scale . stopFullscreen (); // On stop fulll screen } else { scene . scale . startFullscreen (); // On start fulll screen } }); Fire one of these events 'fullscreenunsupported' : Tried to enter fullscreen mode, but it is unsupported by the browser. 'enterfullscreen' : Entered fullscreen mode successfully. 'fullscreenfailed' : Tried to enter fullscreen mode but failed. Toggle \u00b6 Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { scene . scale . toggleFullscreen (); if ( scene . scale . isFullscreen ) { // On start fulll screen } else { // On stop fulll screen } }); Fire 'fullscreenunsupported' or 'enterfullscreen' event. State \u00b6 Is in full screen mode var isFullScreen = scene . scale . isFullscreen ; Support full screen var supported = Phaser . Device . Fullscreen . available ; Events \u00b6 Full screen mode unsupported scene . scale . on ( 'fullscreenunsupported' , function () {}); Enter full screen mode scene . scale . on ( 'enterfullscreen' , function () {});","title":"Full screen"},{"location":"fullscreen/#introduction","text":"Enable or disable full screen mode, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"fullscreen/#usage","text":"","title":"Usage"},{"location":"fullscreen/#enabledisable","text":"Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { if ( scene . scale . isFullscreen ) { scene . scale . stopFullscreen (); // On stop fulll screen } else { scene . scale . startFullscreen (); // On start fulll screen } }); Fire one of these events 'fullscreenunsupported' : Tried to enter fullscreen mode, but it is unsupported by the browser. 'enterfullscreen' : Entered fullscreen mode successfully. 'fullscreenfailed' : Tried to enter fullscreen mode but failed.","title":"Enable/disable"},{"location":"fullscreen/#toggle","text":"Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { scene . scale . toggleFullscreen (); if ( scene . scale . isFullscreen ) { // On start fulll screen } else { // On stop fulll screen } }); Fire 'fullscreenunsupported' or 'enterfullscreen' event.","title":"Toggle"},{"location":"fullscreen/#state","text":"Is in full screen mode var isFullScreen = scene . scale . isFullscreen ; Support full screen var supported = Phaser . Device . Fullscreen . available ;","title":"State"},{"location":"fullscreen/#events","text":"Full screen mode unsupported scene . scale . on ( 'fullscreenunsupported' , function () {}); Enter full screen mode scene . scale . on ( 'enterfullscreen' , function () {});","title":"Events"},{"location":"game/","text":"Boot \u00b6 var config = { type : Phaser . AUTO , parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, scene : null }; var game = new Phaser . Game ( config ); Configuration \u00b6 Reference { type : Phaser . AUTO , parent : 'phaser-example' , width : 800 , height : 600 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, dom : { createContainer : false , }, scene : null , backgroundColor : 0x333333 } or { type : Phaser . AUTO , parent : null , width : 800 , height : 600 , scale : { mode : Phaser . Scale . NONE , autoCenter : Phaser . Scale . NO_CENTER }, autoRound : false , canvas : null , canvasStyle : null , scene : null , callbacks : { preBoot : NOOP , postBoot : NOOP }, seed : [ ( Date . now () * Math . random ()). toString () ], title : '' , url : 'https://phaser.io' , version : '' , input : { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }, disableContextMenu : false , backgroundColor : 0 , render : { antialias : true , antialiasGL : true , pixelArt : false , roundPixels : false , transparent : false , clearBeforeRender : true , premultipliedAlpha : true , preserveDrawingBuffer : false , failIfMajorPerformanceCaveat : false , powerPreference : 'default' , // 'high-performance', 'low-power' or 'default' batchSize : 2000 , desynchronized : false , }, physics : { default : false // no physics system enabled }, //physics: { // system: 'impact', // setBounds: true, // gravity: 0, // cellSize: 64 //}, loader : { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 }, images : { default : 'data:image/png;base64....' , missing : 'data:image/png;base64....' }, dom : { createContainer : false , behindCanvas : false , }, plugins : { global : [ //{key, plugin, start} ], scene : [ // ... ] }, fps : { min : 10 , target : 60 , forceSetTimeOut : false , deltaHistory : 10 }, disableContextMenu : false , banner : { hidePhaser : false , text : '#ffffff' , background : [ '#ff0000' , '#ffff00' , '#00ff00' , '#00ffff' , '#000000' ] } } Destroy \u00b6 game . destroy (); // game.destroy(removeCanvas, noReturn); Also fires game.events destroy event. removeCanvas : Set to true if you would like the parent canvas element removed from the DOM, or false to leave it in place. noReturn : If true all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this. Pause / Resume events \u00b6 Pause (window is invisible) game . events . on ( 'pause' , function () {}); Resume (window is visible) game . events . on ( 'resume' , function () {}); Global members \u00b6 Scene manager \u00b6 Global scene manager in game.scene , or scene.scene in each scene. Global data \u00b6 Instance of data manager in game.registry , or scene.registry in each scene. Game time \u00b6 The time that the current game step started at. var time = game . getTime (); // var time = scene.game.getTime(); The current game frame. var frameCount = game . getFrame (); // var frameCount = scene.game.getFrame(); The delta time, since the last game step. This is a clamped and smoothed average value. var delta = game . loop . delta ; // var delta = scene.game.loop.delta; Window size \u00b6 Width var width = game . config . width ; // var width = scene.game.config.width; Height var height = game . config . height ; // var height = scene.game.config.height;","title":"Game"},{"location":"game/#boot","text":"var config = { type : Phaser . AUTO , parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, scene : null }; var game = new Phaser . Game ( config );","title":"Boot"},{"location":"game/#configuration","text":"Reference { type : Phaser . AUTO , parent : 'phaser-example' , width : 800 , height : 600 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, dom : { createContainer : false , }, scene : null , backgroundColor : 0x333333 } or { type : Phaser . AUTO , parent : null , width : 800 , height : 600 , scale : { mode : Phaser . Scale . NONE , autoCenter : Phaser . Scale . NO_CENTER }, autoRound : false , canvas : null , canvasStyle : null , scene : null , callbacks : { preBoot : NOOP , postBoot : NOOP }, seed : [ ( Date . now () * Math . random ()). toString () ], title : '' , url : 'https://phaser.io' , version : '' , input : { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }, disableContextMenu : false , backgroundColor : 0 , render : { antialias : true , antialiasGL : true , pixelArt : false , roundPixels : false , transparent : false , clearBeforeRender : true , premultipliedAlpha : true , preserveDrawingBuffer : false , failIfMajorPerformanceCaveat : false , powerPreference : 'default' , // 'high-performance', 'low-power' or 'default' batchSize : 2000 , desynchronized : false , }, physics : { default : false // no physics system enabled }, //physics: { // system: 'impact', // setBounds: true, // gravity: 0, // cellSize: 64 //}, loader : { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 }, images : { default : 'data:image/png;base64....' , missing : 'data:image/png;base64....' }, dom : { createContainer : false , behindCanvas : false , }, plugins : { global : [ //{key, plugin, start} ], scene : [ // ... ] }, fps : { min : 10 , target : 60 , forceSetTimeOut : false , deltaHistory : 10 }, disableContextMenu : false , banner : { hidePhaser : false , text : '#ffffff' , background : [ '#ff0000' , '#ffff00' , '#00ff00' , '#00ffff' , '#000000' ] } }","title":"Configuration"},{"location":"game/#destroy","text":"game . destroy (); // game.destroy(removeCanvas, noReturn); Also fires game.events destroy event. removeCanvas : Set to true if you would like the parent canvas element removed from the DOM, or false to leave it in place. noReturn : If true all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this.","title":"Destroy"},{"location":"game/#pause-resume-events","text":"Pause (window is invisible) game . events . on ( 'pause' , function () {}); Resume (window is visible) game . events . on ( 'resume' , function () {});","title":"Pause / Resume events"},{"location":"game/#global-members","text":"","title":"Global members"},{"location":"game/#scene-manager","text":"Global scene manager in game.scene , or scene.scene in each scene.","title":"Scene manager"},{"location":"game/#global-data","text":"Instance of data manager in game.registry , or scene.registry in each scene.","title":"Global data"},{"location":"game/#game-time","text":"The time that the current game step started at. var time = game . getTime (); // var time = scene.game.getTime(); The current game frame. var frameCount = game . getFrame (); // var frameCount = scene.game.getFrame(); The delta time, since the last game step. This is a clamped and smoothed average value. var delta = game . loop . delta ; // var delta = scene.game.loop.delta;","title":"Game time"},{"location":"game/#window-size","text":"Width var width = game . config . width ; // var width = scene.game.config.width; Height var height = game . config . height ; // var height = scene.game.config.height;","title":"Window size"},{"location":"gameobject/","text":"Introduction \u00b6 Base class of all game object in phaser. Author: Richard Davey Usage \u00b6 Destroy \u00b6 Destroy game object gameObject . destroy (); Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list. Event gameObject . once ( 'destroy' , function ( gameObject ) { }, scope ); Position \u00b6 Get var x = gameObject . x ; var y = gameObject . y ; Set gameObject . x = 0 ; gameObject . y = 0 ; gameObject . setPosition ( x , y ); gameObject . setX ( x ); gameObject . setY ( y ); Set random gameObject . setRandomPosition ( x , y , width , height ); // gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height Angle \u00b6 Get var angle = gameObject . angle ; var radians = gameObject . rotation ; // angle in radians Set gameObject . angle = degrees ; gameObject . rotation = radians ; gameObject . setAngle ( degrees ); gameObject . setRotation ( radians ); Visible \u00b6 Get var visible = gameObject . visible ; // visible: true/false Set gameObject . visible = visible ; gameObject . setVisible ( visible ); Alpha \u00b6 Get var alpha = gameObject . alpha ; // 0~1 Set gameObject . setAlpha ( alpha ); // gameObject.alpha = alpha; or gameObject . setAlpha ( topLeft , topRight , bottomLeft , bottomRight ); // gameObject.alphaTopLeft = alpha; // gameObject.alphaTopRight = alpha; // gameObject.alphaBottomLeft = alpha; // gameObject.alphaBottomRight = alpha; FlipX, FlipY \u00b6 Get var flip = gameObject . flipX ; // flip: true/false var flip = gameObject . flipY ; // flip: true/false Set gameObject . flipX = flip ; gameObject . flipY = flip ; gameObject . setFlipX ( flip ); gameObject . setFlipY ( flip ); gameObject . setFlip ( flipX , flipY ); gameObject . toggleFlipX (); gameObject . toggleFlipY (); gameObject . resetFlip (); // equal to gameObject.setFlip(false, false); Depth (z-index) \u00b6 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. Get var depth = gameObject . depth ; Set gameObject . depth = value ; gameObject . setDepth ( value ); Scroll factor \u00b6 Get var scrollFactorX = gameObject . scrollFactorX ; var scrollFactorY = gameObject . scrollFactorY ; Set gameObject . setScrollFactor ( scrollFactor ); gameObject . setScrollFactor ( scrollFactorX , scrollFactorY ); Scroll factor: 0~1 0= fixed to camera 0.25= quarter the speed of the camera 0.5= half the speed of the camera Bounds \u00b6 var output = gameObject . getTopLeft ( output ); // output: {x, y} var output = gameObject . getTopCenter ( output ); // output: {x, y} var output = gameObject . getTopRight ( output ); // output: {x, y} var output = gameObject . getLeftCenter ( output ); // output: {x, y} var output = gameObject . getRightCenter ( output ); // output: {x, y} var output = gameObject . getBottomLeft ( output ); // output: {x, y} var output = gameObject . getBottomCenter ( output ); // output: {x, y} var output = gameObject . getBottomRight ( output ); // output: {x, y} var output = gameObject . getCenter ( output ); // output: {x, y} var output = gameObject . getBounds ( output ); // output: {x, y, width, height} Origin \u00b6 Get var originX = gameObject . originX ; var originY = gameObject . originY ; Set gameObject . setOrigin ( x , y ); // gameObject.setOrigin(x); // y = x Set to top-left gameObject . setOrigin ( 0 ); Set to center gameObject . setOrigin ( 0.5 ); Set to bottom-right gameObject . setOrigin ( 1 ); Tint \u00b6 Get var color = gameObject . tintTopLeft ; // color: 0xRRGGBB var color = gameObject . tintTopRight ; var color = gameObject . tintBottomLeft ; var color = gameObject . tintBottomRight ; var isTinted = gameObject . isTinted ; Set gameObject . tint = color ; gameObject . setTint ( color ); // multiply color value gameObject . setTint ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . setTintFill ( color ); // replace color value gameObject . setTintFill ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . clearTint (); // equal to `gameObject.setTint(0xffffff)` Blend mode \u00b6 Get var blendMode = gameObject . blendMode ; Set gameObject . blendMode = blendMode ; gameObject . setBlendMode ( blendMode ); Under WebGL only the following Blend Modes are available 'ADD' , or Phaser.BlendModes.ADD , or 1 'MULTIPLY' , or Phaser.BlendModes.MULTIPLY , or 2 'SCREEN' , or Phaser.BlendModes.SCREEN , or 3 'ERASE' , or Phaser.BlendModes.ERASE , or 17 Only works when rendering to a framebuffer, like a Render Texture 'SOURCE_IN' , or Phaser.BlendModes.SOURCE_IN , or 18 Canvas render mode only 'SOURCE_OUT' , or Phaser.BlendModes.SOURCE_OUT , or 19 Canvas render mode only 'SOURCE_ATOP' , or Phaser.BlendModes.SOURCE_ATOP , or 20 Canvas render mode only 'DESTINATION_OVER' , or Phaser.BlendModes.DESTINATION_OVER , or 21 Canvas render mode only 'DESTINATION_IN' , or Phaser.BlendModes.DESTINATION_IN , or 22 Canvas render mode only 'DESTINATION_OUT' , or Phaser.BlendModes.DESTINATION_OUT , or 23 Canvas render mode only 'DESTINATION_ATOP' , or Phaser.BlendModes.DESTINATION_ATOP , or 24 Canvas render mode only 'LIGHTER' , or Phaser.BlendModes.LIGHTER , or 25 Canvas render mode only 'COPY' , or Phaser.BlendModes.COPY , or 26 Canvas render mode only 'XOR' , or Phaser.BlendModes.XOR , or 27 Canvas render mode only Canvas has more available depending on browser support. Render pipeline \u00b6 Defaule name of render pipeline : 'TextureTintPipeline' Set custom render pipeline Create filter var config = { game : scene . game , renderer : scene . game . renderer , fragShader : '...' // GLSL shader }; var customPipeline = new Phaser . Renderer . WebGL . Pipelines . TextureTintPipeline ( config ); var filter = scene . game . renderer . addPipeline ( pipelineName , customPipeline ); pipelineName : Name of this render pipeline, a string. Set filter gameObject . setPipeline ( pipelineName ); pipelineName : Name of this render pipeline, a string. Set/change properties of filter filter . setFloat1 ( name , value0 ); filter . setFloat1v ( name , value0 ); filter . setInt1 ( name , value0 ); filter . setFloat2 ( name , value0 , value1 ); filter . setFloat2v ( name , value0 , value1 ); filter . setInt2 ( name , value0 , value1 ); filter . setFloat3 ( name , value0 , value1 , value2 ); filter . setFloat3v ( name , value0 , value1 , value2 ); filter . setInt3 ( name , value0 , value1 , value2 ); filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Reset custom render pipeline to defaule render pipeline gameObject . resetPipeline (); Get current name of render pipeline: var pipelineName = gameObject . getPipelineName (); Size \u00b6 Native (un-scaled) size Get var width = gameObject . width ; var height = gameObject . height ; Set gameObject . setSize ( width , height ); or gameObject . width = width ; gameObject . height = height ; Display size Get var displayWidth = gameObject . displayWidth ; var displayHeight = gameObject . displayHeight ; Set gameObject . setDisplaySize ( displayWidth , displayHeight ); or gameObject . displayWidth = displayWidth ; gameObject . displayHeight = displayHeight ; Scale Get var scaleX = gameObject . scaleX ; var scaleY = gameObject . scaleY ; or var scale = gameObject . scale ; // Return (scaleX + scaleY)/2 Set gameObject . setScale ( scaleX , scaleY ); or gameObject . scaleX = scaleX ; gameObject . scaleY = scaleY ; or gameObject . scale = scale ; // Set scaleX, scaleY to scale Click \u00b6 gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); See touch event State \u00b6 Get var state = gameObject . state ; Set gameObject . setState ( state ); Private data \u00b6 Get var value = gameObject . getData ( key ); var values = gameObject . getData ( keys ); // keys: an array of keys var value = gameObject . data . values [ key ]; Set gameObject . setData ( key , value ); gameObject . setData ( obj ); // obj: {key0:value0, key1:value1, ...} gameObject . data . values [ key ] = value ; gameObject . data . values [ key ] += inc ; Enable gameObject . setDataEnabled (); Events : Set data evant gameObject . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Change data event gameObject . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); gameObject . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); See data manager Note Ensure data manager is created before binding any data-changed events. Texture \u00b6 Set texture via key string gameObject . setTexture ( key ); // gameObject.setTexture(key, frame); Set texture via texture object gameObject . setTexture ( texture ); // gameObject.setTexture(texture, frame); texture : Texture object , or canvas texture object Set frame gameObject . setFrame ( frame ); gameObject . setFrame ( frame , updateSize , updateOrigin ); frame :\u3000The name or index of the frame within the Texture. updateSize : Should this call adjust the size of the Game Object? updateOrigin : Should this call adjust the origin of the Game Object? Applies a crop to a texture gameObject . setCrop ( x , y , width , height ); The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left. Reset crop gameObject . setCrop (); // gameObject.isCropped = false; Get texture, frame . var texture = gameObject . texture ; var frame = gameObject . frame ; Get texture key, frame name. var textureKey = gameObject . texture . key ; var frameName = gameObject . frame . name ; Will render \u00b6 Test render flag and camera filter. var willRennder = gameObject . willRender ( camera ); Test render flag only var willRender = ( gameObject . renderFlags === Phaser . GameObjects . GameObject . RENDER_MASK ); Phaser.GameObjects.GameObject.RENDER_MASK : 15 (Visible, Alpha, Transform and Texture) Name \u00b6 Get var name = gameObject . name ; Set gameObject . setName ( name ); gameObject . name = name ; Custom class \u00b6 Define class class MyClass extends BaseClass { constructor ( scene , x , y ) { super ( scene , x , y ; // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta); // } // } // destroy(fromScene) { // // This Game Object has already been destroyed // if (!this.scene) { // return; // } // super.destroy(fromScene); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Some kinds of game object like Sprite, Dom-element has preUpdate method already. Create instance var image = new MyClass ( scene , x , y , key );","title":"Game object"},{"location":"gameobject/#introduction","text":"Base class of all game object in phaser. Author: Richard Davey","title":"Introduction"},{"location":"gameobject/#usage","text":"","title":"Usage"},{"location":"gameobject/#destroy","text":"Destroy game object gameObject . destroy (); Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list. Event gameObject . once ( 'destroy' , function ( gameObject ) { }, scope );","title":"Destroy"},{"location":"gameobject/#position","text":"Get var x = gameObject . x ; var y = gameObject . y ; Set gameObject . x = 0 ; gameObject . y = 0 ; gameObject . setPosition ( x , y ); gameObject . setX ( x ); gameObject . setY ( y ); Set random gameObject . setRandomPosition ( x , y , width , height ); // gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height","title":"Position"},{"location":"gameobject/#angle","text":"Get var angle = gameObject . angle ; var radians = gameObject . rotation ; // angle in radians Set gameObject . angle = degrees ; gameObject . rotation = radians ; gameObject . setAngle ( degrees ); gameObject . setRotation ( radians );","title":"Angle"},{"location":"gameobject/#visible","text":"Get var visible = gameObject . visible ; // visible: true/false Set gameObject . visible = visible ; gameObject . setVisible ( visible );","title":"Visible"},{"location":"gameobject/#alpha","text":"Get var alpha = gameObject . alpha ; // 0~1 Set gameObject . setAlpha ( alpha ); // gameObject.alpha = alpha; or gameObject . setAlpha ( topLeft , topRight , bottomLeft , bottomRight ); // gameObject.alphaTopLeft = alpha; // gameObject.alphaTopRight = alpha; // gameObject.alphaBottomLeft = alpha; // gameObject.alphaBottomRight = alpha;","title":"Alpha"},{"location":"gameobject/#flipx-flipy","text":"Get var flip = gameObject . flipX ; // flip: true/false var flip = gameObject . flipY ; // flip: true/false Set gameObject . flipX = flip ; gameObject . flipY = flip ; gameObject . setFlipX ( flip ); gameObject . setFlipY ( flip ); gameObject . setFlip ( flipX , flipY ); gameObject . toggleFlipX (); gameObject . toggleFlipY (); gameObject . resetFlip (); // equal to gameObject.setFlip(false, false);","title":"FlipX, FlipY"},{"location":"gameobject/#depth-z-index","text":"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. Get var depth = gameObject . depth ; Set gameObject . depth = value ; gameObject . setDepth ( value );","title":"Depth (z-index)"},{"location":"gameobject/#scroll-factor","text":"Get var scrollFactorX = gameObject . scrollFactorX ; var scrollFactorY = gameObject . scrollFactorY ; Set gameObject . setScrollFactor ( scrollFactor ); gameObject . setScrollFactor ( scrollFactorX , scrollFactorY ); Scroll factor: 0~1 0= fixed to camera 0.25= quarter the speed of the camera 0.5= half the speed of the camera","title":"Scroll factor"},{"location":"gameobject/#bounds","text":"var output = gameObject . getTopLeft ( output ); // output: {x, y} var output = gameObject . getTopCenter ( output ); // output: {x, y} var output = gameObject . getTopRight ( output ); // output: {x, y} var output = gameObject . getLeftCenter ( output ); // output: {x, y} var output = gameObject . getRightCenter ( output ); // output: {x, y} var output = gameObject . getBottomLeft ( output ); // output: {x, y} var output = gameObject . getBottomCenter ( output ); // output: {x, y} var output = gameObject . getBottomRight ( output ); // output: {x, y} var output = gameObject . getCenter ( output ); // output: {x, y} var output = gameObject . getBounds ( output ); // output: {x, y, width, height}","title":"Bounds"},{"location":"gameobject/#origin","text":"Get var originX = gameObject . originX ; var originY = gameObject . originY ; Set gameObject . setOrigin ( x , y ); // gameObject.setOrigin(x); // y = x Set to top-left gameObject . setOrigin ( 0 ); Set to center gameObject . setOrigin ( 0.5 ); Set to bottom-right gameObject . setOrigin ( 1 );","title":"Origin"},{"location":"gameobject/#tint","text":"Get var color = gameObject . tintTopLeft ; // color: 0xRRGGBB var color = gameObject . tintTopRight ; var color = gameObject . tintBottomLeft ; var color = gameObject . tintBottomRight ; var isTinted = gameObject . isTinted ; Set gameObject . tint = color ; gameObject . setTint ( color ); // multiply color value gameObject . setTint ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . setTintFill ( color ); // replace color value gameObject . setTintFill ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . clearTint (); // equal to `gameObject.setTint(0xffffff)`","title":"Tint"},{"location":"gameobject/#blend-mode","text":"Get var blendMode = gameObject . blendMode ; Set gameObject . blendMode = blendMode ; gameObject . setBlendMode ( blendMode ); Under WebGL only the following Blend Modes are available 'ADD' , or Phaser.BlendModes.ADD , or 1 'MULTIPLY' , or Phaser.BlendModes.MULTIPLY , or 2 'SCREEN' , or Phaser.BlendModes.SCREEN , or 3 'ERASE' , or Phaser.BlendModes.ERASE , or 17 Only works when rendering to a framebuffer, like a Render Texture 'SOURCE_IN' , or Phaser.BlendModes.SOURCE_IN , or 18 Canvas render mode only 'SOURCE_OUT' , or Phaser.BlendModes.SOURCE_OUT , or 19 Canvas render mode only 'SOURCE_ATOP' , or Phaser.BlendModes.SOURCE_ATOP , or 20 Canvas render mode only 'DESTINATION_OVER' , or Phaser.BlendModes.DESTINATION_OVER , or 21 Canvas render mode only 'DESTINATION_IN' , or Phaser.BlendModes.DESTINATION_IN , or 22 Canvas render mode only 'DESTINATION_OUT' , or Phaser.BlendModes.DESTINATION_OUT , or 23 Canvas render mode only 'DESTINATION_ATOP' , or Phaser.BlendModes.DESTINATION_ATOP , or 24 Canvas render mode only 'LIGHTER' , or Phaser.BlendModes.LIGHTER , or 25 Canvas render mode only 'COPY' , or Phaser.BlendModes.COPY , or 26 Canvas render mode only 'XOR' , or Phaser.BlendModes.XOR , or 27 Canvas render mode only Canvas has more available depending on browser support.","title":"Blend mode"},{"location":"gameobject/#render-pipeline","text":"Defaule name of render pipeline : 'TextureTintPipeline' Set custom render pipeline Create filter var config = { game : scene . game , renderer : scene . game . renderer , fragShader : '...' // GLSL shader }; var customPipeline = new Phaser . Renderer . WebGL . Pipelines . TextureTintPipeline ( config ); var filter = scene . game . renderer . addPipeline ( pipelineName , customPipeline ); pipelineName : Name of this render pipeline, a string. Set filter gameObject . setPipeline ( pipelineName ); pipelineName : Name of this render pipeline, a string. Set/change properties of filter filter . setFloat1 ( name , value0 ); filter . setFloat1v ( name , value0 ); filter . setInt1 ( name , value0 ); filter . setFloat2 ( name , value0 , value1 ); filter . setFloat2v ( name , value0 , value1 ); filter . setInt2 ( name , value0 , value1 ); filter . setFloat3 ( name , value0 , value1 , value2 ); filter . setFloat3v ( name , value0 , value1 , value2 ); filter . setInt3 ( name , value0 , value1 , value2 ); filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Reset custom render pipeline to defaule render pipeline gameObject . resetPipeline (); Get current name of render pipeline: var pipelineName = gameObject . getPipelineName ();","title":"Render pipeline"},{"location":"gameobject/#size","text":"Native (un-scaled) size Get var width = gameObject . width ; var height = gameObject . height ; Set gameObject . setSize ( width , height ); or gameObject . width = width ; gameObject . height = height ; Display size Get var displayWidth = gameObject . displayWidth ; var displayHeight = gameObject . displayHeight ; Set gameObject . setDisplaySize ( displayWidth , displayHeight ); or gameObject . displayWidth = displayWidth ; gameObject . displayHeight = displayHeight ; Scale Get var scaleX = gameObject . scaleX ; var scaleY = gameObject . scaleY ; or var scale = gameObject . scale ; // Return (scaleX + scaleY)/2 Set gameObject . setScale ( scaleX , scaleY ); or gameObject . scaleX = scaleX ; gameObject . scaleY = scaleY ; or gameObject . scale = scale ; // Set scaleX, scaleY to scale","title":"Size"},{"location":"gameobject/#click","text":"gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); See touch event","title":"Click"},{"location":"gameobject/#state","text":"Get var state = gameObject . state ; Set gameObject . setState ( state );","title":"State"},{"location":"gameobject/#private-data","text":"Get var value = gameObject . getData ( key ); var values = gameObject . getData ( keys ); // keys: an array of keys var value = gameObject . data . values [ key ]; Set gameObject . setData ( key , value ); gameObject . setData ( obj ); // obj: {key0:value0, key1:value1, ...} gameObject . data . values [ key ] = value ; gameObject . data . values [ key ] += inc ; Enable gameObject . setDataEnabled (); Events : Set data evant gameObject . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Change data event gameObject . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); gameObject . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); See data manager Note Ensure data manager is created before binding any data-changed events.","title":"Private data"},{"location":"gameobject/#texture","text":"Set texture via key string gameObject . setTexture ( key ); // gameObject.setTexture(key, frame); Set texture via texture object gameObject . setTexture ( texture ); // gameObject.setTexture(texture, frame); texture : Texture object , or canvas texture object Set frame gameObject . setFrame ( frame ); gameObject . setFrame ( frame , updateSize , updateOrigin ); frame :\u3000The name or index of the frame within the Texture. updateSize : Should this call adjust the size of the Game Object? updateOrigin : Should this call adjust the origin of the Game Object? Applies a crop to a texture gameObject . setCrop ( x , y , width , height ); The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left. Reset crop gameObject . setCrop (); // gameObject.isCropped = false; Get texture, frame . var texture = gameObject . texture ; var frame = gameObject . frame ; Get texture key, frame name. var textureKey = gameObject . texture . key ; var frameName = gameObject . frame . name ;","title":"Texture"},{"location":"gameobject/#will-render","text":"Test render flag and camera filter. var willRennder = gameObject . willRender ( camera ); Test render flag only var willRender = ( gameObject . renderFlags === Phaser . GameObjects . GameObject . RENDER_MASK ); Phaser.GameObjects.GameObject.RENDER_MASK : 15 (Visible, Alpha, Transform and Texture)","title":"Will render"},{"location":"gameobject/#name","text":"Get var name = gameObject . name ; Set gameObject . setName ( name ); gameObject . name = name ;","title":"Name"},{"location":"gameobject/#custom-class","text":"Define class class MyClass extends BaseClass { constructor ( scene , x , y ) { super ( scene , x , y ; // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta); // } // } // destroy(fromScene) { // // This Game Object has already been destroyed // if (!this.scene) { // return; // } // super.destroy(fromScene); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Some kinds of game object like Sprite, Dom-element has preUpdate method already. Create instance var image = new MyClass ( scene , x , y , key );","title":"Custom class"},{"location":"gashapon/","text":"Introduction \u00b6 Pick random item from box. Author: Rex Member of scene, or game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGashapon from './plugins/gashapon.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GashaponPlugin from './plugins/gashapon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGashapon' , plugin : GashaponPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var gashapon = scene . plugins . get ( 'rexGashapon' ). add ({ mode : 'shuffle' , // 0|'shuffle'|1|'random items : { // name:count a : 1 , b : 2 , c : 3 }, reload : true , // true|false rnd : undefined , }); mode : 'shuffle' , or 0 : pick item from box without put it back. 'random' , or 1 : pick item from box then put it back. reload : set true to reload items when box is empty for shuffle mode. items : initial items in box rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator. Pick item \u00b6 Pick a random item \u00b6 var item = gashapon . next (); return null if pick nothing Pick specific item \u00b6 var item = gashapon . next ( 'a' ); return null if pick nothing Last picked item \u00b6 var item = gashapon . result ; Set item \u00b6 Set item \u00b6 gashapon . setItem ( 'a' , 1 ); // gashapon.setItem('a', 1).setItem('b', 2).setItem('c', 3); Add item \u00b6 gashapon . addItem ( 'a' , 1 ); Remove item \u00b6 Remove item \u00b6 gashapon . removeItem ( 'a' ); // gashapon.removeItem('b').gashapon.removeItem('c'); Remove all items \u00b6 gashapon . removeAllItems (); Current status \u00b6 Get current status \u00b6 var status = gashapon . toJSON (); Clone object \u00b6 var status = gashapon . toJSON (); var gashapon2 = new Gashapon ( status ); Overwrite current status \u00b6 var status = gashapon . toJSON (); // gashapon.next()... gashapon . resetFromJSON ( status ); Get items \u00b6 For each item \u00b6 gashapon . eachItem ( function ( name , count ){ console . log ( name + \": \" + count ); }); Get items \u00b6 var items = gashapon . getItems (); Set random generator \u00b6 gashapon . setRND ( rnd ); rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Gashapon"},{"location":"gashapon/#introduction","text":"Pick random item from box. Author: Rex Member of scene, or game object","title":"Introduction"},{"location":"gashapon/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gashapon/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"gashapon/#import-class","text":"import rexGashapon from './plugins/gashapon.js' ;","title":"Import class"},{"location":"gashapon/#install-global-plugin","text":"Install plugin in configuration of game import GashaponPlugin from './plugins/gashapon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGashapon' , plugin : GashaponPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"gashapon/#create-instance","text":"var gashapon = scene . plugins . get ( 'rexGashapon' ). add ({ mode : 'shuffle' , // 0|'shuffle'|1|'random items : { // name:count a : 1 , b : 2 , c : 3 }, reload : true , // true|false rnd : undefined , }); mode : 'shuffle' , or 0 : pick item from box without put it back. 'random' , or 1 : pick item from box then put it back. reload : set true to reload items when box is empty for shuffle mode. items : initial items in box rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Create instance"},{"location":"gashapon/#pick-item","text":"","title":"Pick item"},{"location":"gashapon/#pick-a-random-item","text":"var item = gashapon . next (); return null if pick nothing","title":"Pick a random item"},{"location":"gashapon/#pick-specific-item","text":"var item = gashapon . next ( 'a' ); return null if pick nothing","title":"Pick specific item"},{"location":"gashapon/#last-picked-item","text":"var item = gashapon . result ;","title":"Last picked item"},{"location":"gashapon/#set-item","text":"","title":"Set item"},{"location":"gashapon/#set-item_1","text":"gashapon . setItem ( 'a' , 1 ); // gashapon.setItem('a', 1).setItem('b', 2).setItem('c', 3);","title":"Set item"},{"location":"gashapon/#add-item","text":"gashapon . addItem ( 'a' , 1 );","title":"Add item"},{"location":"gashapon/#remove-item","text":"","title":"Remove item"},{"location":"gashapon/#remove-item_1","text":"gashapon . removeItem ( 'a' ); // gashapon.removeItem('b').gashapon.removeItem('c');","title":"Remove item"},{"location":"gashapon/#remove-all-items","text":"gashapon . removeAllItems ();","title":"Remove all items"},{"location":"gashapon/#current-status","text":"","title":"Current status"},{"location":"gashapon/#get-current-status","text":"var status = gashapon . toJSON ();","title":"Get current status"},{"location":"gashapon/#clone-object","text":"var status = gashapon . toJSON (); var gashapon2 = new Gashapon ( status );","title":"Clone object"},{"location":"gashapon/#overwrite-current-status","text":"var status = gashapon . toJSON (); // gashapon.next()... gashapon . resetFromJSON ( status );","title":"Overwrite current status"},{"location":"gashapon/#get-items","text":"","title":"Get items"},{"location":"gashapon/#for-each-item","text":"gashapon . eachItem ( function ( name , count ){ console . log ( name + \": \" + count ); });","title":"For each item"},{"location":"gashapon/#get-items_1","text":"var items = gashapon . getItems ();","title":"Get items"},{"location":"gashapon/#set-random-generator","text":"gashapon . setRND ( rnd ); rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Set random generator"},{"location":"geom-circle/","text":"Introduction \u00b6 Circle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var circle = new Phaser . Geom . Circle ( x , y , radius ); Clone shape \u00b6 var circle1 = Phaser . Geom . Circle . Clone ( circle0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillCircleShape ( circle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeCircleShape ( circle ); Note Negative radius will be treated as positive radius. i.e. Math.abs(radius) Set properties \u00b6 All properties circle . setTo ( x , y , radius ); or Phaser . Geom . Circle . CopyFrom ( source , dest ); Position circle . setPosition ( x , y ); or circle . x = 0 ; circle . y = 0 ; or circle . left = 0 ; // circle.x circle . top = 0 ; // circle.y // circle.right = 0; // circle.x // circle.bottom = 0; // circle.y or Phaser . Geom . Circle . Offset ( circle , dx , dy ); // circle.x += dx, circle.y += dy or Phaser . Geom . Circle . OffsetPoint ( circle , point ); // circle.x += point.x, circle.y += point.y Radius circle . radius = radius ; or circle . diameter = diameter ; // diameter = 2 * radius Get properties \u00b6 Position var x = circle . x ; var y = circle . y ; var top = circle . top ; var left = circle . left ; var right = circle . right ; var bottom = circle . bottom ; Radius var radius = circle . radius ; // var diameter = circle.diameter; Bound var bound = Phaser . Geom . Circle . GetBounds ( circle ); // var bound = Phaser.Geom.Circle.GetBounds(circle, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Circle . Area ( circle ); Circumference var circumference = Phaser . Geom . Circle . Circumference ( circle ); Type: var type = circle . type ; // 0 Point(s) & shape \u00b6 Get point at shape's edge var point = circle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = circle.getPoint(t, point); // modify point or var point = Phaser . Geom . Circle . CircumferencePoint ( circle , angle ); // angle in degrees // var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point); // modify point Get a random point inside shape var point = circle . getRandomPoint (); // var point = circle.getRandomPoint(point); // modify point Get points around shape's edge var points = circle . getPoints ( quantity ); // var points = circle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = circle . getPoints ( false , step ); // var points = circle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = circle . contains ( x , y ); or var isInside = Phaser . Geom . Circle . ContainsPoint ( circle , point ); Rectangle is inside shape var isInside = Phaser . Geom . Circle . ContainsRect ( circle , rect ); // rect : 4 points Empty \u00b6 Set empty circle . setEmpty (); // circle.radius = 0 Is empty var isEmpty = circle . isEmpty (); // circle.radius <= 0 Equal \u00b6 var isEqual = Phaser . Geom . Circle . Equals ( circle0 , circle1 ); Position and radius are equal. Intersection \u00b6 Circle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToCircle ( circleA , circleB ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToCircle ( circleA , circleB ); // var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out); Circle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out); Circle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out); Circle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Circle"},{"location":"geom-circle/#introduction","text":"Circle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-circle/#usage","text":"","title":"Usage"},{"location":"geom-circle/#create-shape","text":"var circle = new Phaser . Geom . Circle ( x , y , radius );","title":"Create shape"},{"location":"geom-circle/#clone-shape","text":"var circle1 = Phaser . Geom . Circle . Clone ( circle0 );","title":"Clone shape"},{"location":"geom-circle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillCircleShape ( circle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeCircleShape ( circle ); Note Negative radius will be treated as positive radius. i.e. Math.abs(radius)","title":"Draw on graphics"},{"location":"geom-circle/#set-properties","text":"All properties circle . setTo ( x , y , radius ); or Phaser . Geom . Circle . CopyFrom ( source , dest ); Position circle . setPosition ( x , y ); or circle . x = 0 ; circle . y = 0 ; or circle . left = 0 ; // circle.x circle . top = 0 ; // circle.y // circle.right = 0; // circle.x // circle.bottom = 0; // circle.y or Phaser . Geom . Circle . Offset ( circle , dx , dy ); // circle.x += dx, circle.y += dy or Phaser . Geom . Circle . OffsetPoint ( circle , point ); // circle.x += point.x, circle.y += point.y Radius circle . radius = radius ; or circle . diameter = diameter ; // diameter = 2 * radius","title":"Set properties"},{"location":"geom-circle/#get-properties","text":"Position var x = circle . x ; var y = circle . y ; var top = circle . top ; var left = circle . left ; var right = circle . right ; var bottom = circle . bottom ; Radius var radius = circle . radius ; // var diameter = circle.diameter; Bound var bound = Phaser . Geom . Circle . GetBounds ( circle ); // var bound = Phaser.Geom.Circle.GetBounds(circle, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Circle . Area ( circle ); Circumference var circumference = Phaser . Geom . Circle . Circumference ( circle ); Type: var type = circle . type ; // 0","title":"Get properties"},{"location":"geom-circle/#points-shape","text":"Get point at shape's edge var point = circle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = circle.getPoint(t, point); // modify point or var point = Phaser . Geom . Circle . CircumferencePoint ( circle , angle ); // angle in degrees // var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point); // modify point Get a random point inside shape var point = circle . getRandomPoint (); // var point = circle.getRandomPoint(point); // modify point Get points around shape's edge var points = circle . getPoints ( quantity ); // var points = circle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = circle . getPoints ( false , step ); // var points = circle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = circle . contains ( x , y ); or var isInside = Phaser . Geom . Circle . ContainsPoint ( circle , point ); Rectangle is inside shape var isInside = Phaser . Geom . Circle . ContainsRect ( circle , rect ); // rect : 4 points","title":"Point(s) &amp; shape"},{"location":"geom-circle/#empty","text":"Set empty circle . setEmpty (); // circle.radius = 0 Is empty var isEmpty = circle . isEmpty (); // circle.radius <= 0","title":"Empty"},{"location":"geom-circle/#equal","text":"var isEqual = Phaser . Geom . Circle . Equals ( circle0 , circle1 ); Position and radius are equal.","title":"Equal"},{"location":"geom-circle/#intersection","text":"","title":"Intersection"},{"location":"geom-circle/#circle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToCircle ( circleA , circleB ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToCircle ( circleA , circleB ); // var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out);","title":"Circle to circle"},{"location":"geom-circle/#circle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);","title":"Circle to rectangle"},{"location":"geom-circle/#circle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);","title":"Circle to triangle"},{"location":"geom-circle/#circle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Circle to line"},{"location":"geom-ellipse/","text":"Introduction \u00b6 Ellipse shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Clone shape \u00b6 var ellipse1 = Phaser . Geom . Ellipse . Clone ( ellipse0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillEllipseShape ( ellipse ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeEllipseShape ( ellipse ); Note Negative width, height will be treated as positive width, height. i.e. Math.abs(width) , Math.abs(height) Set properties \u00b6 All properties ellipse . setTo ( x , y , width , height ); or Phaser . Geom . Ellipse . CopyFrom ( source , dest ); Position ellipse . setPosition ( x , y ); or ellipse . x = 0 ; ellipse . y = 0 ; or ellipse . left = 0 ; // ellipse.x ellipse . top = 0 ; // ellipse.y // ellipse.right = 0; // ellipse.x // ellipse.bottom = 0; // ellipse.y or Phaser . Geom . Ellipse . Offset ( ellipse , dx , dy ); // ellipse.x += dx, ellipse.y += dy or Phaser . Geom . Ellipse . OffsetPoint ( ellipse , point ); // ellipse.x += point.x, ellipse.y += point.y Width, height ellipse . width = width ; ellipse . height = height ; Get properties \u00b6 Position var x = ellipse . x ; var y = ellipse . y ; var top = ellipse . top ; var left = ellipse . left ; var right = ellipse . right ; var bottom = ellipse . bottom ; Width, height var width = ellipse . width ; var height = ellipse . height ; Bound var bound = Phaser . Geom . Ellipse . GetBounds ( ellipse ); // var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Ellipse . Area ( ellipse ); Circumference var circumference = Phaser . Geom . Ellipse . Circumference ( ellipse ); Type: var type = ellipse . type ; // 1 Point(s) & shape \u00b6 Get point at shape's edge var point = ellipse . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = ellipse.getPoint(t, point); // modify point or var point = Phaser . Geom . Ellipse . CircumferencePoint ( ellipse , angle ); // angle in degrees // var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point); // modify point Get a random point inside shape var point = ellipse . getRandomPoint (); // var point = ellipse.getRandomPoint(point); // modify point Get points around shape's edge var points = ellipse . getPoints ( quantity ); // var points = ellipse.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = ellipse . getPoints ( false , step ); // var points = ellipse.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = ellipse . contains ( x , y ); or var isInside = Phaser . Geom . Ellipse . ContainsPoint ( ellipse , point ); Rectangle is inside shape var isInside = Phaser . Geom . Ellipse . ContainsRect ( ellipse , rect ); // rect : 4 points Empty \u00b6 Set empty ellipse . setEmpty (); // ellipse.width = 0, ellipse.height = 0 Is empty var isEmpty = ellipse . isEmpty (); // ellipse.width <= 0 || ellipse.height <= 0 Equal \u00b6 var isEqual = Phaser . Geom . Ellipse . Equals ( ellipse0 , ellipse1 ); Position and width, height are equal.","title":"Ellipse"},{"location":"geom-ellipse/#introduction","text":"Ellipse shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-ellipse/#usage","text":"","title":"Usage"},{"location":"geom-ellipse/#create-shape","text":"var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height );","title":"Create shape"},{"location":"geom-ellipse/#clone-shape","text":"var ellipse1 = Phaser . Geom . Ellipse . Clone ( ellipse0 );","title":"Clone shape"},{"location":"geom-ellipse/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillEllipseShape ( ellipse ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeEllipseShape ( ellipse ); Note Negative width, height will be treated as positive width, height. i.e. Math.abs(width) , Math.abs(height)","title":"Draw on graphics"},{"location":"geom-ellipse/#set-properties","text":"All properties ellipse . setTo ( x , y , width , height ); or Phaser . Geom . Ellipse . CopyFrom ( source , dest ); Position ellipse . setPosition ( x , y ); or ellipse . x = 0 ; ellipse . y = 0 ; or ellipse . left = 0 ; // ellipse.x ellipse . top = 0 ; // ellipse.y // ellipse.right = 0; // ellipse.x // ellipse.bottom = 0; // ellipse.y or Phaser . Geom . Ellipse . Offset ( ellipse , dx , dy ); // ellipse.x += dx, ellipse.y += dy or Phaser . Geom . Ellipse . OffsetPoint ( ellipse , point ); // ellipse.x += point.x, ellipse.y += point.y Width, height ellipse . width = width ; ellipse . height = height ;","title":"Set properties"},{"location":"geom-ellipse/#get-properties","text":"Position var x = ellipse . x ; var y = ellipse . y ; var top = ellipse . top ; var left = ellipse . left ; var right = ellipse . right ; var bottom = ellipse . bottom ; Width, height var width = ellipse . width ; var height = ellipse . height ; Bound var bound = Phaser . Geom . Ellipse . GetBounds ( ellipse ); // var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Ellipse . Area ( ellipse ); Circumference var circumference = Phaser . Geom . Ellipse . Circumference ( ellipse ); Type: var type = ellipse . type ; // 1","title":"Get properties"},{"location":"geom-ellipse/#points-shape","text":"Get point at shape's edge var point = ellipse . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = ellipse.getPoint(t, point); // modify point or var point = Phaser . Geom . Ellipse . CircumferencePoint ( ellipse , angle ); // angle in degrees // var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point); // modify point Get a random point inside shape var point = ellipse . getRandomPoint (); // var point = ellipse.getRandomPoint(point); // modify point Get points around shape's edge var points = ellipse . getPoints ( quantity ); // var points = ellipse.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = ellipse . getPoints ( false , step ); // var points = ellipse.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = ellipse . contains ( x , y ); or var isInside = Phaser . Geom . Ellipse . ContainsPoint ( ellipse , point ); Rectangle is inside shape var isInside = Phaser . Geom . Ellipse . ContainsRect ( ellipse , rect ); // rect : 4 points","title":"Point(s) &amp; shape"},{"location":"geom-ellipse/#empty","text":"Set empty ellipse . setEmpty (); // ellipse.width = 0, ellipse.height = 0 Is empty var isEmpty = ellipse . isEmpty (); // ellipse.width <= 0 || ellipse.height <= 0","title":"Empty"},{"location":"geom-ellipse/#equal","text":"var isEqual = Phaser . Geom . Ellipse . Equals ( ellipse0 , ellipse1 ); Position and width, height are equal.","title":"Equal"},{"location":"geom-hexagon/","text":"Introduction \u00b6 Hexagon shape and methods, extends from Polygon shape . Author: Rex Geometry object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHexagon from './plugins/hexagon.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HexagonPlugin from './plugins/hexagon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHexagon' , plugin : HexagonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 var hexagon = scene . plugins . get ( 'rexHexagon' ). add ( x , y , size , type ); or var hexagon = scene . plugins . get ( 'rexHexagon' ). add ({ x : 0 , y : 0 , size : 20 , type : 0 // 0|'flat'|'vertical'|1|'pointy'|'horizontal' }); or var hexagon = new rexHexagon ( x , y , size , type ); // var hexagon = new Phaser.Geom.rexHexagon(x, y, size, type); x : Center X. y : Center Y. size : Distance between center to each corner. type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x' Draw on graphics \u00b6 See Polygon shape . Set properties \u00b6 All properties hexagon . setTo ( x , y , size , type ); Position hexagon . setPosition ( x , y ); or hexagon . x = 0 ; hexagon . y = 0 ; or hexagon . centerX = 0 ; // equal to hexagon.x hexagon . centerY = 0 ; // equal to hexagon.y or hexagon . left = 0 ; // hexagon.x hexagon . top = 0 ; // hexagon.y hexagon . right = 0 ; // hexagon.x hexagon . bottom = 0 ; // hexagon.y Size hexagon . setSize ( size ); or hexagon . size = size ; Type hexagon . setType ( type ); or hexagon . type = type ; type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x' Get properties \u00b6 See Polygon shape . Position Center var centerX = hexagon . centerX ; var centerY = hexagon . centerY ; or var centerX = hexagon . x ; var centerY = hexagon . y ; Bound var top = hexagon . top ; var left = hexagon . left ; var right = hexagon . right ; var bottom = hexagon . bottom ; Width var width = hexagon . width ; Height var width = hexagon . height ; Lines around hexagon var edge01 = hexagon . getLineA (); var edge12 = hexagon . getLineB (); var edge23 = hexagon . getLineC (); var edge34 = hexagon . getLineD (); var edge45 = hexagon . getLineE (); var edge50 = hexagon . getLineF (); // var out = hexagon.getLineF(out); or var edge = hexagon . getEdge ( edgeIdx ); // var out = hexagon.getEdge(edgeIdx, out); Point(s) & shape \u00b6 See Polygon shape .","title":"Hexagon"},{"location":"geom-hexagon/#introduction","text":"Hexagon shape and methods, extends from Polygon shape . Author: Rex Geometry object","title":"Introduction"},{"location":"geom-hexagon/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"geom-hexagon/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"geom-hexagon/#import-class","text":"import rexHexagon from './plugins/hexagon.js' ;","title":"Import class"},{"location":"geom-hexagon/#install-global-plugin","text":"Install plugin in configuration of game import HexagonPlugin from './plugins/hexagon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHexagon' , plugin : HexagonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"geom-hexagon/#create-shape","text":"var hexagon = scene . plugins . get ( 'rexHexagon' ). add ( x , y , size , type ); or var hexagon = scene . plugins . get ( 'rexHexagon' ). add ({ x : 0 , y : 0 , size : 20 , type : 0 // 0|'flat'|'vertical'|1|'pointy'|'horizontal' }); or var hexagon = new rexHexagon ( x , y , size , type ); // var hexagon = new Phaser.Geom.rexHexagon(x, y, size, type); x : Center X. y : Center Y. size : Distance between center to each corner. type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x'","title":"Create shape"},{"location":"geom-hexagon/#draw-on-graphics","text":"See Polygon shape .","title":"Draw on graphics"},{"location":"geom-hexagon/#set-properties","text":"All properties hexagon . setTo ( x , y , size , type ); Position hexagon . setPosition ( x , y ); or hexagon . x = 0 ; hexagon . y = 0 ; or hexagon . centerX = 0 ; // equal to hexagon.x hexagon . centerY = 0 ; // equal to hexagon.y or hexagon . left = 0 ; // hexagon.x hexagon . top = 0 ; // hexagon.y hexagon . right = 0 ; // hexagon.x hexagon . bottom = 0 ; // hexagon.y Size hexagon . setSize ( size ); or hexagon . size = size ; Type hexagon . setType ( type ); or hexagon . type = type ; type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x'","title":"Set properties"},{"location":"geom-hexagon/#get-properties","text":"See Polygon shape . Position Center var centerX = hexagon . centerX ; var centerY = hexagon . centerY ; or var centerX = hexagon . x ; var centerY = hexagon . y ; Bound var top = hexagon . top ; var left = hexagon . left ; var right = hexagon . right ; var bottom = hexagon . bottom ; Width var width = hexagon . width ; Height var width = hexagon . height ; Lines around hexagon var edge01 = hexagon . getLineA (); var edge12 = hexagon . getLineB (); var edge23 = hexagon . getLineC (); var edge34 = hexagon . getLineD (); var edge45 = hexagon . getLineE (); var edge50 = hexagon . getLineF (); // var out = hexagon.getLineF(out); or var edge = hexagon . getEdge ( edgeIdx ); // var out = hexagon.getEdge(edgeIdx, out);","title":"Get properties"},{"location":"geom-hexagon/#points-shape","text":"See Polygon shape .","title":"Point(s) &amp; shape"},{"location":"geom-line/","text":"Introduction \u00b6 Line shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Clone shape \u00b6 var line1 = Phaser . Geom . Line . Clone ( line0 ); Draw on graphics \u00b6 // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeLineShape ( line ); Set properties \u00b6 All properties line . setTo ( x1 , y1 , x2 , y2 ); or Phaser . Geom . Line . CopyFrom ( source , dest ); Position line . x1 = 0 ; line . y1 = 0 ; line . x2 = 0 ; line . y2 = 0 ; or line . left = 0 ; // min(x1, x2) line . top = 0 ; // min(y1, y2) line . right = 0 ; // max(x1, x2) line . bottom = 0 ; // max(y1, y2) Offset start, end var line = Phaser . Geom . Line . Offset ( line , dx , dy ); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy Set center position var line = Phaser . Geom . Line . CenterOn ( line , x , y ); Start point, angle, length var line = Phaser . Geom . Line . SetToAngle ( line , x , y , angle , length ); line : The line to set x , y : start point angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); length :\u3000The length of the line Rotate Rotate around midpoint var line = Phaser . Geom . Line . Rotate ( line , angle ) line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Rotate around point var line = Phaser . Geom . Line . RotateAroundPoint ( line , point , angle ); or var line = Phaser . Geom . Line . RotateAroundXY ( line , x , y , angle ); line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Extend var line = Phaser . Geom . Line . Extend ( line , left , right ); Get properties \u00b6 Position var x1 = line . x1 ; var y1 = line . y1 ; var x2 = line . x2 ; var y2 = line . y2 ; var top = line . top ; // min(x1, x2) var left = line . left ; // min(y1, y2) var right = line . right ; // max(x1, x2) var bottom = line . bottom ; // max(y1, y2) Start point var start = line . getPointA (); // start: {x, y} var start = line . getPointA ( start ); // push start End point var end = line . getPointB (); // end: {x, y} var end = line . getPointB ( end ); // push end Middle point var middle = Phaser . Geom . Line . GetMidPoint ( line ); // middle: {x, y} // var middle = Phaser.Geom.Line.GetMidPoint(line, middle); Length var length = Phaser . Geom . Line . Length ( line ); Width : Abs(x1 - x2) var width = Phaser . Geom . Line . Width ( line ); Height : Abs(y1 - y2) var width = Phaser . Geom . Line . Height ( line ); Slope Slope : (y2 - y1) / (x2 - x1) var slope = Phaser . Geom . Line . Slope ( line ); Perpendicular slope : -((x2 - x1) / (y2 - y1)) var perpSlope = Phaser . Geom . Line . PerpSlope ( line ); Angle Angle var angle = Phaser . Geom . Line . Angle ( line ); angle : The angle of the line in radians var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Normal angle (angle - 90 degrees) Normal angle var normalAngle = Phaser . Geom . Line . NormalAngle ( line ); Normal vector var normal = Phaser . Geom . Line . GetNormal ( line ); // normal: {x, y} // var normal = Phaser.Geom.Line.GetNormal(line, normal); // push normal or var normalX = Phaser . Geom . Line . NormalX ( line ); var normalY = Phaser . Geom . Line . NormalY ( line ); Reflect angle var reflectAngle = Phaser . Geom . Line . ReflectAngle ( aimLine , reflectingLine ); Type: var type = line . type ; // 2 Point(s) & shape \u00b6 Get point at shape's edge var point = line . getPoint ( t ); // t : 0 ~ 1. 0=start, 0.5=middle, 1=end // var point = line.getPoint(t, point); // modify point Get a random point inside shape var point = line . getRandomPoint (); // var point = line.getRandomPoint(point); // modify point Get points around shape's edge var points = line . getPoints ( quantity ); // var points = line.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = line . getPoints ( false , step ); // var points = line.getPoints(false, step, points); // push points points : an array of point Get points using Bresenham 's line algorithm var points = Phaser . Geom . Line . BresenhamPoints ( line , step ); // var points = Phaser.Geom.Line.BresenhamPoints(line, step, points); // push points Get the nearest point on a line perpendicular to the given point. var point = Phaser . Geom . Line . GetNearestPoint ( line , pointIn ); // var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point); Get the shortest distance from a Line to the given Point. var distance = Phaser . Geom . Line . GetShortestDistance ( line , point ); Equal \u00b6 var isEqual = Phaser . Geom . Line . Equals ( line0 , line1 ); x1, y2, x2, y2 are equal. Intersection \u00b6 Line to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out); Line to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out); Line to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out); Line to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 ); out : intersected point Get intersection points var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 , out );","title":"Line"},{"location":"geom-line/#introduction","text":"Line shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-line/#usage","text":"","title":"Usage"},{"location":"geom-line/#create-shape","text":"var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 );","title":"Create shape"},{"location":"geom-line/#clone-shape","text":"var line1 = Phaser . Geom . Line . Clone ( line0 );","title":"Clone shape"},{"location":"geom-line/#draw-on-graphics","text":"// graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeLineShape ( line );","title":"Draw on graphics"},{"location":"geom-line/#set-properties","text":"All properties line . setTo ( x1 , y1 , x2 , y2 ); or Phaser . Geom . Line . CopyFrom ( source , dest ); Position line . x1 = 0 ; line . y1 = 0 ; line . x2 = 0 ; line . y2 = 0 ; or line . left = 0 ; // min(x1, x2) line . top = 0 ; // min(y1, y2) line . right = 0 ; // max(x1, x2) line . bottom = 0 ; // max(y1, y2) Offset start, end var line = Phaser . Geom . Line . Offset ( line , dx , dy ); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy Set center position var line = Phaser . Geom . Line . CenterOn ( line , x , y ); Start point, angle, length var line = Phaser . Geom . Line . SetToAngle ( line , x , y , angle , length ); line : The line to set x , y : start point angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); length :\u3000The length of the line Rotate Rotate around midpoint var line = Phaser . Geom . Line . Rotate ( line , angle ) line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Rotate around point var line = Phaser . Geom . Line . RotateAroundPoint ( line , point , angle ); or var line = Phaser . Geom . Line . RotateAroundXY ( line , x , y , angle ); line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Extend var line = Phaser . Geom . Line . Extend ( line , left , right );","title":"Set properties"},{"location":"geom-line/#get-properties","text":"Position var x1 = line . x1 ; var y1 = line . y1 ; var x2 = line . x2 ; var y2 = line . y2 ; var top = line . top ; // min(x1, x2) var left = line . left ; // min(y1, y2) var right = line . right ; // max(x1, x2) var bottom = line . bottom ; // max(y1, y2) Start point var start = line . getPointA (); // start: {x, y} var start = line . getPointA ( start ); // push start End point var end = line . getPointB (); // end: {x, y} var end = line . getPointB ( end ); // push end Middle point var middle = Phaser . Geom . Line . GetMidPoint ( line ); // middle: {x, y} // var middle = Phaser.Geom.Line.GetMidPoint(line, middle); Length var length = Phaser . Geom . Line . Length ( line ); Width : Abs(x1 - x2) var width = Phaser . Geom . Line . Width ( line ); Height : Abs(y1 - y2) var width = Phaser . Geom . Line . Height ( line ); Slope Slope : (y2 - y1) / (x2 - x1) var slope = Phaser . Geom . Line . Slope ( line ); Perpendicular slope : -((x2 - x1) / (y2 - y1)) var perpSlope = Phaser . Geom . Line . PerpSlope ( line ); Angle Angle var angle = Phaser . Geom . Line . Angle ( line ); angle : The angle of the line in radians var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Normal angle (angle - 90 degrees) Normal angle var normalAngle = Phaser . Geom . Line . NormalAngle ( line ); Normal vector var normal = Phaser . Geom . Line . GetNormal ( line ); // normal: {x, y} // var normal = Phaser.Geom.Line.GetNormal(line, normal); // push normal or var normalX = Phaser . Geom . Line . NormalX ( line ); var normalY = Phaser . Geom . Line . NormalY ( line ); Reflect angle var reflectAngle = Phaser . Geom . Line . ReflectAngle ( aimLine , reflectingLine ); Type: var type = line . type ; // 2","title":"Get properties"},{"location":"geom-line/#points-shape","text":"Get point at shape's edge var point = line . getPoint ( t ); // t : 0 ~ 1. 0=start, 0.5=middle, 1=end // var point = line.getPoint(t, point); // modify point Get a random point inside shape var point = line . getRandomPoint (); // var point = line.getRandomPoint(point); // modify point Get points around shape's edge var points = line . getPoints ( quantity ); // var points = line.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = line . getPoints ( false , step ); // var points = line.getPoints(false, step, points); // push points points : an array of point Get points using Bresenham 's line algorithm var points = Phaser . Geom . Line . BresenhamPoints ( line , step ); // var points = Phaser.Geom.Line.BresenhamPoints(line, step, points); // push points Get the nearest point on a line perpendicular to the given point. var point = Phaser . Geom . Line . GetNearestPoint ( line , pointIn ); // var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point); Get the shortest distance from a Line to the given Point. var distance = Phaser . Geom . Line . GetShortestDistance ( line , point );","title":"Point(s) &amp; shape"},{"location":"geom-line/#equal","text":"var isEqual = Phaser . Geom . Line . Equals ( line0 , line1 ); x1, y2, x2, y2 are equal.","title":"Equal"},{"location":"geom-line/#intersection","text":"","title":"Intersection"},{"location":"geom-line/#line-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Line to circle"},{"location":"geom-line/#line-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Line to rectangle"},{"location":"geom-line/#line-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Line to triangle"},{"location":"geom-line/#line-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 ); out : intersected point Get intersection points var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 , out );","title":"Line to line"},{"location":"geom-point/","text":"Introduction \u00b6 Point shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var point = new Phaser . Geom . Point ( x , y ); Clone shape \u00b6 var point1 = Phaser . Geom . Point . Clone ( point0 ); Draw on graphics \u00b6 // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPointShape ( point , size ); Set properties \u00b6 All properties point . setTo ( x , y ); or Phaser . Geom . Point . CopyFrom ( source , dest ); Position point . x = 0 ; point . y = 0 ; Round Ceil : Apply Math.ceil() to each coordinate of the given Point var point = Phaser . Geom . Point . Ceil ( point ) Floor : Apply Math.floor() to each coordinate of the given Point. var point = Phaser . Geom . Point . Floor ( point ) Symmetry \u00b6 Invert : x = y, y = x var point = Phaser . Geom . Point . Invert ( point ); Negative : x = -x, y = -y var out = Phaser . Geom . Point . Negative ( point ); // var out = Phaser.Geom.Point.Negative(point, out); // modify out Get properties \u00b6 Position var x = point . x ; var y = point . y ; Type: var type = point . type ; // 3 Equal \u00b6 var isEqual = Phaser . Geom . Point . Equals ( point0 , point1 ); x, y are equal. Points \u00b6 Centroid : center-point over some points var out = Phaser . Geom . Point . GetCentroid ( points ); // var out = Phaser.Geom.Point.GetCentroid(points, out); // modify out Calculates the Axis Aligned Bounding Box (or aabb) from an array of points ( rectangle ) var rect = Phaser . Geom . Point . GetRectangleFromPoints ( points ); // var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect); // modify rect Interpolate var out = Phaser . Geom . Point . Interpolate ( pointA , pointB , t ); // out : point // var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out); // modify out Intersection \u00b6 Point to line var result = Phaser . Geom . Intersects . PointToLine ( point , line ); // var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness); var result = Phaser . Geom . Intersects . PointToLineSegment ( point , line ); Point as Vector \u00b6 Vector starting at (0,0) Magnitude : sqrt( (x * x) + (y * y) ) var magnitude = Phaser . Geom . Point . GetMagnitude ( point ); or var magnitudeSq = Phaser . Geom . Point . GetMagnitudeSq ( point ); Project var out = Phaser . Geom . Point . Project ( from , to ); // var out = Phaser.Geom.Point.Project(from, to, out); // modify out or var out = Phaser . Geom . Point . ProjectUnit ( from , to ); // vector `from` and `to` are unit vector (length = 1) // var out = Phaser.Geom.Point.ProjectUnit(from, to, out); // modify out","title":"Point"},{"location":"geom-point/#introduction","text":"Point shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-point/#usage","text":"","title":"Usage"},{"location":"geom-point/#create-shape","text":"var point = new Phaser . Geom . Point ( x , y );","title":"Create shape"},{"location":"geom-point/#clone-shape","text":"var point1 = Phaser . Geom . Point . Clone ( point0 );","title":"Clone shape"},{"location":"geom-point/#draw-on-graphics","text":"// graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPointShape ( point , size );","title":"Draw on graphics"},{"location":"geom-point/#set-properties","text":"All properties point . setTo ( x , y ); or Phaser . Geom . Point . CopyFrom ( source , dest ); Position point . x = 0 ; point . y = 0 ; Round Ceil : Apply Math.ceil() to each coordinate of the given Point var point = Phaser . Geom . Point . Ceil ( point ) Floor : Apply Math.floor() to each coordinate of the given Point. var point = Phaser . Geom . Point . Floor ( point )","title":"Set properties"},{"location":"geom-point/#symmetry","text":"Invert : x = y, y = x var point = Phaser . Geom . Point . Invert ( point ); Negative : x = -x, y = -y var out = Phaser . Geom . Point . Negative ( point ); // var out = Phaser.Geom.Point.Negative(point, out); // modify out","title":"Symmetry"},{"location":"geom-point/#get-properties","text":"Position var x = point . x ; var y = point . y ; Type: var type = point . type ; // 3","title":"Get properties"},{"location":"geom-point/#equal","text":"var isEqual = Phaser . Geom . Point . Equals ( point0 , point1 ); x, y are equal.","title":"Equal"},{"location":"geom-point/#points","text":"Centroid : center-point over some points var out = Phaser . Geom . Point . GetCentroid ( points ); // var out = Phaser.Geom.Point.GetCentroid(points, out); // modify out Calculates the Axis Aligned Bounding Box (or aabb) from an array of points ( rectangle ) var rect = Phaser . Geom . Point . GetRectangleFromPoints ( points ); // var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect); // modify rect Interpolate var out = Phaser . Geom . Point . Interpolate ( pointA , pointB , t ); // out : point // var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out); // modify out","title":"Points"},{"location":"geom-point/#intersection","text":"Point to line var result = Phaser . Geom . Intersects . PointToLine ( point , line ); // var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness); var result = Phaser . Geom . Intersects . PointToLineSegment ( point , line );","title":"Intersection"},{"location":"geom-point/#point-as-vector","text":"Vector starting at (0,0) Magnitude : sqrt( (x * x) + (y * y) ) var magnitude = Phaser . Geom . Point . GetMagnitude ( point ); or var magnitudeSq = Phaser . Geom . Point . GetMagnitudeSq ( point ); Project var out = Phaser . Geom . Point . Project ( from , to ); // var out = Phaser.Geom.Point.Project(from, to, out); // modify out or var out = Phaser . Geom . Point . ProjectUnit ( from , to ); // vector `from` and `to` are unit vector (length = 1) // var out = Phaser.Geom.Point.ProjectUnit(from, to, out); // modify out","title":"Point as Vector"},{"location":"geom-polygon/","text":"Introduction \u00b6 Polygon shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var polygon = new Phaser . Geom . Polygon ( points ); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Clone shape \u00b6 var polygon1 = Phaser . Geom . Polygon . Clone ( polygon0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPoints ( polygon . points , true ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokePoints ( polygon . points , true ); Set properties \u00b6 polygon . setTo ( points ); // points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...] Get properties \u00b6 Points var points = polygon . points ; // array of points {x,y} Area var area = polygon . area ; Number array var out = Phaser . Geom . Polygon . GetNumberArray ( polygon ); // var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out); // modify out arr : [x0, y0, x1, y1, x2, y2, ...] AABB (A minimum rectangle to cover this polygon) var out = Phaser . Geom . Polygon . GetAABB ( polygon ); // var out = Phaser.Geom.Polygon.GetAABB(polygon, out); out : A rectangle object Type: var type = polygon . type ; // 4 Point(s) & shape \u00b6 Point is inside shape var isInside = polygon . contains ( x , y ); or var isInside = Phaser . Geom . Polygon . ContainsPoint ( polygon , point ); Reverse the order of points var polygon = Phaser . Geom . Polygon . Reverse ( polygon ); Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points. Phaser . Geom . Polygon . Smooth ( polygon )","title":"Polygon"},{"location":"geom-polygon/#introduction","text":"Polygon shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-polygon/#usage","text":"","title":"Usage"},{"location":"geom-polygon/#create-shape","text":"var polygon = new Phaser . Geom . Polygon ( points ); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...'","title":"Create shape"},{"location":"geom-polygon/#clone-shape","text":"var polygon1 = Phaser . Geom . Polygon . Clone ( polygon0 );","title":"Clone shape"},{"location":"geom-polygon/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPoints ( polygon . points , true ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokePoints ( polygon . points , true );","title":"Draw on graphics"},{"location":"geom-polygon/#set-properties","text":"polygon . setTo ( points ); // points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...]","title":"Set properties"},{"location":"geom-polygon/#get-properties","text":"Points var points = polygon . points ; // array of points {x,y} Area var area = polygon . area ; Number array var out = Phaser . Geom . Polygon . GetNumberArray ( polygon ); // var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out); // modify out arr : [x0, y0, x1, y1, x2, y2, ...] AABB (A minimum rectangle to cover this polygon) var out = Phaser . Geom . Polygon . GetAABB ( polygon ); // var out = Phaser.Geom.Polygon.GetAABB(polygon, out); out : A rectangle object Type: var type = polygon . type ; // 4","title":"Get properties"},{"location":"geom-polygon/#points-shape","text":"Point is inside shape var isInside = polygon . contains ( x , y ); or var isInside = Phaser . Geom . Polygon . ContainsPoint ( polygon , point ); Reverse the order of points var polygon = Phaser . Geom . Polygon . Reverse ( polygon ); Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points. Phaser . Geom . Polygon . Smooth ( polygon )","title":"Point(s) &amp; shape"},{"location":"geom-rectangle/","text":"Introduction \u00b6 Rectangle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); or create from 4 points var rect = Phaser . Geom . Rectangle . FromPoints ( points ); // var rect = Phaser.Geom.Rectangle.FromPoints(points, rect); // push rect points : an array with 4 points. [x, y] , or {x:0, y:0} Clone shape \u00b6 var rect1 = Phaser . Geom . Rectangle . Clone ( rect0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillRectShape ( rect ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeRectShape ( rect ); Note x with positive/negative width is left/right bound y with positive/negative height is top/bottom bound Set properties \u00b6 All properties rect . setTo ( x , y , width , height ); or Phaser . Geom . Rectangle . CopyFrom ( source , dest ); Position rect . setPosition ( x , y ); or rect . x = 0 ; rect . y = 0 ; or rect . left = 0 ; // rect.x, rect.width rect . top = 0 ; // rect.y, rect.height // rect.right = 0; // rect.x, rect.width // rect.bottom = 0; // rect.y, rect.height rect . centerX = 0 ; // rect.x rect . centerY = 0 ; // rect.y or Phaser . Geom . Rectangle . Offset ( rect , dx , dy ); // rect.x += dx, rect.y += dy or Phaser . Geom . Rectangle . OffsetPoint ( rect , point ); // rect.x += point.x, rect.y += point.y or Phaser . Geom . Rectangle . CenterOn ( rect , x , y ); // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2) Size rect . setSize ( width , height ); // rect.setSize(width); // height = width or rect . width = 0 ; rect . height = 0 ; Scale Phaser . Geom . Rectangle . Scale ( rect , x , y ); // rect.width *= x, rect.height *= y; // Phaser.Geom.Rectangle.Scale(rect, x); // y = x Extend size to include points Phaser . Geom . Rectangle . MergePoints ( rect , points ); points : an array of points. [x, y] , or {x:0, y:0} Extend size to include another rectangle Phaser . Geom . Rectangle . MergeRect ( target , source ); Inflate Phaser . Geom . Rectangle . Inflate ( rect , x , y ); change size to width += x*2, height += y*2 center on previous position Fits the target rectangle into the source rectangle Phaser . Geom . Rectangle . FitInside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Fits the target rectangle around the source rectangle Phaser . Geom . Rectangle . FitOutside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Ceil Phaser . Geom . Rectangle . Ceil ( rect ); // ceil x, y Phaser . Geom . Rectangle . CeilAll ( rect ); // ceil x, y, width, height Floor Phaser . Geom . Rectangle . Floor ( rect ); // floor x, y Phaser . Geom . Rectangle . FloorAll ( rect ); // floor x, y, width, height Get properties \u00b6 Position var x = rect . x ; var y = rect . y ; Bound var top = rect . top ; var left = rect . left ; var right = rect . right ; var bottom = rect . bottom ; or var points = Phaser . Geom . Rectangle . Decompose ( rect ); // var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points points : top-left, top-right, bottom-right, bottom-left Center var centerX = rect . centerX ; var centerY = rect . centerY ; or var point = Phaser . Geom . Rectangle . GetCenter ( rect ); // var point = Phaser.Geom.Rectangle.GetCenter(rect, point); Size var width = rect . width ; var height = rect . height ; or var point = Phaser . Geom . Rectangle . GetSize ( rect ); // {x: rect.width, y: rect.height} Area var area = Phaser . Geom . Rectangle . Area ( rect ); Perimeter var perimeter = Phaser . Geom . Rectangle . Perimeter ( rect ); // 2 * (rect.width + rect.height) Aspect ratio var aspectRatio = Phaser . Geom . Rectangle . GetAspectRatio ( rect ); // rect.width / rect.height Lines around rectangle var topLine = rect . getLineA (); // top line of this rectangle var rightLine = rect . getLineB (); // right line of this rectangle var bottomLine = rect . getLineC (); // bottom line of this rectangle var leftLine = rect . getLineD (); // left line of this rectangle // var out = rect.getLineA(out); // top line of this rectangle Type: var type = rect . type ; // 5 Point(s) & shape \u00b6 Get point at shape's edge var point = rect . getPoint ( t ); // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left) // var point = rect.getPoint(t, point); // modify point or var point = Phaser . Geom . Rectangle . PerimeterPoint ( rect , angle ); // angle in degrees // var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point); // push point Get points around shape's edge var points = rect . getPoints ( quantity ); // var points = rect.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = rect . getPoints ( false , step ); // var points = rect.getPoints(false, step, points); // push points step : width of each step, in pixels. quantity = Perimeter(rectangle) / step; points : an array of point Point is inside shape var isInside = rect . contains ( x , y ); or var isInside = Phaser . Geom . Rectangle . ContainsPoint ( rect , point ); Get a random point inside shape var point = rect . getRandomPoint (); // var point = rect.getRandomPoint(point); // modify point Get a random point outside shape var point = Phaser . Geom . Rectangle . RandomOutside ( outer , inner ); // var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point Rectangle is inside shape var isInside = Phaser . Geom . Rectangle . ContainsRect ( rectA , rectB ); // rectB is inside rectA Rectangles \u00b6 Is overlapping var isOverlapping = Phaser . Geom . Rectangle . Overlaps ( rectA , rectB ); Get intersection rectangle var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB , rect ); // push rect Get union rectangle var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB , rect ); // push rect Empty \u00b6 Set empty rect . setEmpty (); // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0 Is empty var isEmpty = rect . isEmpty (); // rect.radius <= 0; Equal \u00b6 Position, width, and height are the same var isEqual = Phaser . Geom . Rectangle . Equals ( rect0 , rect1 ); Width and height are the same var isEqual = Phaser . Geom . Rectangle . SameDimensions ( rect0 , rect1 ); Intersection \u00b6 Rectangle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out); Rectangle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToRectangle ( rectA , rectB ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToRectangle ( rectA , rectB ); // var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out); Rectangle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out); Rectangle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Rectangle"},{"location":"geom-rectangle/#introduction","text":"Rectangle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-rectangle/#usage","text":"","title":"Usage"},{"location":"geom-rectangle/#create-shape","text":"var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); or create from 4 points var rect = Phaser . Geom . Rectangle . FromPoints ( points ); // var rect = Phaser.Geom.Rectangle.FromPoints(points, rect); // push rect points : an array with 4 points. [x, y] , or {x:0, y:0}","title":"Create shape"},{"location":"geom-rectangle/#clone-shape","text":"var rect1 = Phaser . Geom . Rectangle . Clone ( rect0 );","title":"Clone shape"},{"location":"geom-rectangle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillRectShape ( rect ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeRectShape ( rect ); Note x with positive/negative width is left/right bound y with positive/negative height is top/bottom bound","title":"Draw on graphics"},{"location":"geom-rectangle/#set-properties","text":"All properties rect . setTo ( x , y , width , height ); or Phaser . Geom . Rectangle . CopyFrom ( source , dest ); Position rect . setPosition ( x , y ); or rect . x = 0 ; rect . y = 0 ; or rect . left = 0 ; // rect.x, rect.width rect . top = 0 ; // rect.y, rect.height // rect.right = 0; // rect.x, rect.width // rect.bottom = 0; // rect.y, rect.height rect . centerX = 0 ; // rect.x rect . centerY = 0 ; // rect.y or Phaser . Geom . Rectangle . Offset ( rect , dx , dy ); // rect.x += dx, rect.y += dy or Phaser . Geom . Rectangle . OffsetPoint ( rect , point ); // rect.x += point.x, rect.y += point.y or Phaser . Geom . Rectangle . CenterOn ( rect , x , y ); // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2) Size rect . setSize ( width , height ); // rect.setSize(width); // height = width or rect . width = 0 ; rect . height = 0 ; Scale Phaser . Geom . Rectangle . Scale ( rect , x , y ); // rect.width *= x, rect.height *= y; // Phaser.Geom.Rectangle.Scale(rect, x); // y = x Extend size to include points Phaser . Geom . Rectangle . MergePoints ( rect , points ); points : an array of points. [x, y] , or {x:0, y:0} Extend size to include another rectangle Phaser . Geom . Rectangle . MergeRect ( target , source ); Inflate Phaser . Geom . Rectangle . Inflate ( rect , x , y ); change size to width += x*2, height += y*2 center on previous position Fits the target rectangle into the source rectangle Phaser . Geom . Rectangle . FitInside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Fits the target rectangle around the source rectangle Phaser . Geom . Rectangle . FitOutside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Ceil Phaser . Geom . Rectangle . Ceil ( rect ); // ceil x, y Phaser . Geom . Rectangle . CeilAll ( rect ); // ceil x, y, width, height Floor Phaser . Geom . Rectangle . Floor ( rect ); // floor x, y Phaser . Geom . Rectangle . FloorAll ( rect ); // floor x, y, width, height","title":"Set properties"},{"location":"geom-rectangle/#get-properties","text":"Position var x = rect . x ; var y = rect . y ; Bound var top = rect . top ; var left = rect . left ; var right = rect . right ; var bottom = rect . bottom ; or var points = Phaser . Geom . Rectangle . Decompose ( rect ); // var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points points : top-left, top-right, bottom-right, bottom-left Center var centerX = rect . centerX ; var centerY = rect . centerY ; or var point = Phaser . Geom . Rectangle . GetCenter ( rect ); // var point = Phaser.Geom.Rectangle.GetCenter(rect, point); Size var width = rect . width ; var height = rect . height ; or var point = Phaser . Geom . Rectangle . GetSize ( rect ); // {x: rect.width, y: rect.height} Area var area = Phaser . Geom . Rectangle . Area ( rect ); Perimeter var perimeter = Phaser . Geom . Rectangle . Perimeter ( rect ); // 2 * (rect.width + rect.height) Aspect ratio var aspectRatio = Phaser . Geom . Rectangle . GetAspectRatio ( rect ); // rect.width / rect.height Lines around rectangle var topLine = rect . getLineA (); // top line of this rectangle var rightLine = rect . getLineB (); // right line of this rectangle var bottomLine = rect . getLineC (); // bottom line of this rectangle var leftLine = rect . getLineD (); // left line of this rectangle // var out = rect.getLineA(out); // top line of this rectangle Type: var type = rect . type ; // 5","title":"Get properties"},{"location":"geom-rectangle/#points-shape","text":"Get point at shape's edge var point = rect . getPoint ( t ); // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left) // var point = rect.getPoint(t, point); // modify point or var point = Phaser . Geom . Rectangle . PerimeterPoint ( rect , angle ); // angle in degrees // var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point); // push point Get points around shape's edge var points = rect . getPoints ( quantity ); // var points = rect.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = rect . getPoints ( false , step ); // var points = rect.getPoints(false, step, points); // push points step : width of each step, in pixels. quantity = Perimeter(rectangle) / step; points : an array of point Point is inside shape var isInside = rect . contains ( x , y ); or var isInside = Phaser . Geom . Rectangle . ContainsPoint ( rect , point ); Get a random point inside shape var point = rect . getRandomPoint (); // var point = rect.getRandomPoint(point); // modify point Get a random point outside shape var point = Phaser . Geom . Rectangle . RandomOutside ( outer , inner ); // var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point Rectangle is inside shape var isInside = Phaser . Geom . Rectangle . ContainsRect ( rectA , rectB ); // rectB is inside rectA","title":"Point(s) &amp; shape"},{"location":"geom-rectangle/#rectangles","text":"Is overlapping var isOverlapping = Phaser . Geom . Rectangle . Overlaps ( rectA , rectB ); Get intersection rectangle var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB , rect ); // push rect Get union rectangle var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB , rect ); // push rect","title":"Rectangles"},{"location":"geom-rectangle/#empty","text":"Set empty rect . setEmpty (); // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0 Is empty var isEmpty = rect . isEmpty (); // rect.radius <= 0;","title":"Empty"},{"location":"geom-rectangle/#equal","text":"Position, width, and height are the same var isEqual = Phaser . Geom . Rectangle . Equals ( rect0 , rect1 ); Width and height are the same var isEqual = Phaser . Geom . Rectangle . SameDimensions ( rect0 , rect1 );","title":"Equal"},{"location":"geom-rectangle/#intersection","text":"","title":"Intersection"},{"location":"geom-rectangle/#rectangle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);","title":"Rectangle to circle"},{"location":"geom-rectangle/#rectangle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToRectangle ( rectA , rectB ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToRectangle ( rectA , rectB ); // var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out);","title":"Rectangle to rectangle"},{"location":"geom-rectangle/#rectangle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);","title":"Rectangle to triangle"},{"location":"geom-rectangle/#rectangle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Rectangle to line"},{"location":"geom-rhombus/","text":"Introduction \u00b6 Rhombus shape and methods, extends from Polygon shape . Author: Rex Geometry object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRhombus from './plugins/rhombus.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RhombusPlugin from './plugins/rhombus-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRhombus' , plugin : RhombusPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 var rhombus = scene . plugins . get ( 'rexRhombus' ). add ( x , y , width , height ); or var rhombus = scene . plugins . get ( 'rexRhombus' ). add ({ x : 0 , y : 0 , width : 40 , height : 20 }); or var rhombus = new rexRhombus ( x , y , width , height ); // var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height); x : Top X. y : Left Y. Draw on graphics \u00b6 See Polygon shape . Set properties \u00b6 All properties rhombus . setTo ( x , y , width , height ); Position rhombus . setPosition ( x , y ); or rhombus . x = 0 ; rhombus . y = 0 ; or rhombus . left = 0 ; // rhombus.x rhombus . top = 0 ; // rhombus.y rhombus . right = 0 ; // rhombus.x rhombus . bottom = 0 ; // rhombus.y Size rhombus . setSize ( width , height ); or rhombus . width = width ; rhombus . height = height ; Get properties \u00b6 See Polygon shape . Position Center var centerX = rhombus . centerX ; var centerY = rhombus . centerY ; Bound var top = rhombus . top ; var left = rhombus . left ; var right = rhombus . right ; var bottom = rhombus . bottom ; Width var width = rhombus . width ; Height var width = rhombus . height ; Lines around rhombus var edge01 = rhombus . getLineA (); var edge12 = rhombus . getLineB (); var edge23 = rhombus . getLineC (); var edge34 = rhombus . getLineD (); or var edge = rhombus . getEdge ( edgeIdx ); // var out = rhombus.getEdge(edgeIdx, out); Point(s) & shape \u00b6 See Polygon shape .","title":"Rhombus"},{"location":"geom-rhombus/#introduction","text":"Rhombus shape and methods, extends from Polygon shape . Author: Rex Geometry object","title":"Introduction"},{"location":"geom-rhombus/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"geom-rhombus/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"geom-rhombus/#import-class","text":"import rexRhombus from './plugins/rhombus.js' ;","title":"Import class"},{"location":"geom-rhombus/#install-global-plugin","text":"Install plugin in configuration of game import RhombusPlugin from './plugins/rhombus-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRhombus' , plugin : RhombusPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"geom-rhombus/#create-shape","text":"var rhombus = scene . plugins . get ( 'rexRhombus' ). add ( x , y , width , height ); or var rhombus = scene . plugins . get ( 'rexRhombus' ). add ({ x : 0 , y : 0 , width : 40 , height : 20 }); or var rhombus = new rexRhombus ( x , y , width , height ); // var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height); x : Top X. y : Left Y.","title":"Create shape"},{"location":"geom-rhombus/#draw-on-graphics","text":"See Polygon shape .","title":"Draw on graphics"},{"location":"geom-rhombus/#set-properties","text":"All properties rhombus . setTo ( x , y , width , height ); Position rhombus . setPosition ( x , y ); or rhombus . x = 0 ; rhombus . y = 0 ; or rhombus . left = 0 ; // rhombus.x rhombus . top = 0 ; // rhombus.y rhombus . right = 0 ; // rhombus.x rhombus . bottom = 0 ; // rhombus.y Size rhombus . setSize ( width , height ); or rhombus . width = width ; rhombus . height = height ;","title":"Set properties"},{"location":"geom-rhombus/#get-properties","text":"See Polygon shape . Position Center var centerX = rhombus . centerX ; var centerY = rhombus . centerY ; Bound var top = rhombus . top ; var left = rhombus . left ; var right = rhombus . right ; var bottom = rhombus . bottom ; Width var width = rhombus . width ; Height var width = rhombus . height ; Lines around rhombus var edge01 = rhombus . getLineA (); var edge12 = rhombus . getLineB (); var edge23 = rhombus . getLineC (); var edge34 = rhombus . getLineD (); or var edge = rhombus . getEdge ( edgeIdx ); // var out = rhombus.getEdge(edgeIdx, out);","title":"Get properties"},{"location":"geom-rhombus/#points-shape","text":"See Polygon shape .","title":"Point(s) &amp; shape"},{"location":"geom-triangle/","text":"Introduction \u00b6 Triangle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Clone shape \u00b6 var triangle1 = Phaser . Geom . Triangle . Clone ( triangle0 ); Equilateral triangle \u00b6 var triangle = Phaser . Geom . Triangle . BuildEquilateral ( x1 , y1 , length ); Right triangle \u00b6 var triangle = Phaser . Geom . Triangle . BuildRight ( x1 , y1 , width , height ); Polygon to triangles \u00b6 var out = Phaser . Geom . Triangle . BuildFromPolygon ( data ); // var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY); // out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out); data : A flat array of vertice coordinates like [x0,y0, x1,y1, x2,y2, ...] out : Array of triangles Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillTriangleShape ( triangle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeTriangleShape ( triangle ); Set properties \u00b6 All properties triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); or Phaser . Geom . Triangle . CopyFrom ( source , dest ); Position triangle . x1 = 0 ; triangle . y1 = 0 ; triangle . x2 = 0 ; triangle . y2 = 0 ; triangle . x3 = 0 ; triangle . y3 = 0 ; or triangle . left = 0 ; // triangle.x1, triangle.x2, triangle.x3 triangle . top = 0 ; // triangle.y1, triangle.y2, triangle.y3 // triangle.right = 0; // triangle.x1, triangle.x2, triangle.x3 // triangle.bottom = 0; // triangle.y1, triangle.y2, triangle.y3 or Phaser . Geom . Triangle . Offset ( triangle , dx , dy ); // triangle.x += dx, triangle.y += dy or Phaser . Geom . Triangle . CenterOn ( triangle , x , y ); Rotate Rotate around center (incenter) var triangle = Phaser . Geom . Triangle . Rotate ( triangle , angle ); angle : Radian Rotate around point var triangle = Phaser . Geom . Triangle . RotateAroundPoint ( triangle , point , angle ); point : {x, y} angle : Radian Rotate around (x,y) var triangle = Phaser . Geom . Triangle . RotateAroundXY ( triangle , x , y , angle ); angle : Radian Get properties \u00b6 Position var x1 = triangle . x1 ; var y1 = triangle . y1 ; var x2 = triangle . x2 ; var y2 = triangle . y2 ; var x3 = triangle . x3 ; var y3 = triangle . y3 ; var top = triangle . top ; var left = triangle . left ; var right = triangle . right ; var bottom = triangle . bottom ; or var out = Phaser . Geom . Triangle . Decompose ( triangle ); // out: [{x1,y1}, {x2,y2}, {x3,y3}] // var out = Phaser.Geom.Triangle.Decompose(triangle, out); Perimeter var perimeter = Phaser . Geom . Triangle . Perimeter ( triangle ); Area var area = Phaser . Geom . Triangle . Area ( triangle ); Lines around triangle var line12 = rect . getLineA (); // line from (x1, y1) to (x2, y2) var line23 = rect . getLineB (); // line from (x2, y2) to (x3, y3) var line31 = rect . getLineC (); // line from (x3, y3) to (x1, y1) Centroid var out = Phaser . Geom . Triangle . Centroid ( triangle ); // out: {x,y} Incenter var out = Phaser . Geom . Triangle . InCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.InCenter(triangle, out); Circumcenter var out = Phaser . Geom . Triangle . CircumCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.CircumCenter(triangle, out); Circumcircle var out = Phaser . Geom . Triangle . CircumCircle ( triangle ); // out: a circle object // var out = Phaser.Geom.Triangle.CircumCircle(triangle, out); Type: var type = triangle . type ; // 6 Point(s) & shape \u00b6 Get point at shape's edge var point = triangle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = triangle.getPoint(t, point); // modify point Get a random point inside shape var point = triangle . getRandomPoint (); // var point = triangle.getRandomPoint(point); // modify point Get points around shape's edge var points = triangle . getPoints ( quantity ); // var points = triangle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = triangle . getPoints ( false , step ); // var points = triangle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = triangle . contains ( x , y ); or var isInside = Phaser . Geom . Triangle . ContainsPoint ( triangle , point ); Points inside shape var out = Phaser . Geom . Triangle . ContainsArray ( triangle , points , returnFirst ); // var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out); out : Points inside triangle returnFirst : True to get fist matched point Equal \u00b6 var isEqual = Phaser . Geom . Triangle . Equals ( triangle0 , triangle1 ); Position and radius are equal. Intersection \u00b6 Triangle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out); Triangle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out); Triangle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToTriangle ( triangleA , triangleB ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToTriangle ( triangleA , triangleB ); // var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out); Triangle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Triangle"},{"location":"geom-triangle/#introduction","text":"Triangle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-triangle/#usage","text":"","title":"Usage"},{"location":"geom-triangle/#create-shape","text":"var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Create shape"},{"location":"geom-triangle/#clone-shape","text":"var triangle1 = Phaser . Geom . Triangle . Clone ( triangle0 );","title":"Clone shape"},{"location":"geom-triangle/#equilateral-triangle","text":"var triangle = Phaser . Geom . Triangle . BuildEquilateral ( x1 , y1 , length );","title":"Equilateral triangle"},{"location":"geom-triangle/#right-triangle","text":"var triangle = Phaser . Geom . Triangle . BuildRight ( x1 , y1 , width , height );","title":"Right triangle"},{"location":"geom-triangle/#polygon-to-triangles","text":"var out = Phaser . Geom . Triangle . BuildFromPolygon ( data ); // var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY); // out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out); data : A flat array of vertice coordinates like [x0,y0, x1,y1, x2,y2, ...] out : Array of triangles","title":"Polygon to triangles"},{"location":"geom-triangle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillTriangleShape ( triangle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeTriangleShape ( triangle );","title":"Draw on graphics"},{"location":"geom-triangle/#set-properties","text":"All properties triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); or Phaser . Geom . Triangle . CopyFrom ( source , dest ); Position triangle . x1 = 0 ; triangle . y1 = 0 ; triangle . x2 = 0 ; triangle . y2 = 0 ; triangle . x3 = 0 ; triangle . y3 = 0 ; or triangle . left = 0 ; // triangle.x1, triangle.x2, triangle.x3 triangle . top = 0 ; // triangle.y1, triangle.y2, triangle.y3 // triangle.right = 0; // triangle.x1, triangle.x2, triangle.x3 // triangle.bottom = 0; // triangle.y1, triangle.y2, triangle.y3 or Phaser . Geom . Triangle . Offset ( triangle , dx , dy ); // triangle.x += dx, triangle.y += dy or Phaser . Geom . Triangle . CenterOn ( triangle , x , y ); Rotate Rotate around center (incenter) var triangle = Phaser . Geom . Triangle . Rotate ( triangle , angle ); angle : Radian Rotate around point var triangle = Phaser . Geom . Triangle . RotateAroundPoint ( triangle , point , angle ); point : {x, y} angle : Radian Rotate around (x,y) var triangle = Phaser . Geom . Triangle . RotateAroundXY ( triangle , x , y , angle ); angle : Radian","title":"Set properties"},{"location":"geom-triangle/#get-properties","text":"Position var x1 = triangle . x1 ; var y1 = triangle . y1 ; var x2 = triangle . x2 ; var y2 = triangle . y2 ; var x3 = triangle . x3 ; var y3 = triangle . y3 ; var top = triangle . top ; var left = triangle . left ; var right = triangle . right ; var bottom = triangle . bottom ; or var out = Phaser . Geom . Triangle . Decompose ( triangle ); // out: [{x1,y1}, {x2,y2}, {x3,y3}] // var out = Phaser.Geom.Triangle.Decompose(triangle, out); Perimeter var perimeter = Phaser . Geom . Triangle . Perimeter ( triangle ); Area var area = Phaser . Geom . Triangle . Area ( triangle ); Lines around triangle var line12 = rect . getLineA (); // line from (x1, y1) to (x2, y2) var line23 = rect . getLineB (); // line from (x2, y2) to (x3, y3) var line31 = rect . getLineC (); // line from (x3, y3) to (x1, y1) Centroid var out = Phaser . Geom . Triangle . Centroid ( triangle ); // out: {x,y} Incenter var out = Phaser . Geom . Triangle . InCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.InCenter(triangle, out); Circumcenter var out = Phaser . Geom . Triangle . CircumCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.CircumCenter(triangle, out); Circumcircle var out = Phaser . Geom . Triangle . CircumCircle ( triangle ); // out: a circle object // var out = Phaser.Geom.Triangle.CircumCircle(triangle, out); Type: var type = triangle . type ; // 6","title":"Get properties"},{"location":"geom-triangle/#points-shape","text":"Get point at shape's edge var point = triangle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = triangle.getPoint(t, point); // modify point Get a random point inside shape var point = triangle . getRandomPoint (); // var point = triangle.getRandomPoint(point); // modify point Get points around shape's edge var points = triangle . getPoints ( quantity ); // var points = triangle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = triangle . getPoints ( false , step ); // var points = triangle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = triangle . contains ( x , y ); or var isInside = Phaser . Geom . Triangle . ContainsPoint ( triangle , point ); Points inside shape var out = Phaser . Geom . Triangle . ContainsArray ( triangle , points , returnFirst ); // var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out); out : Points inside triangle returnFirst : True to get fist matched point","title":"Point(s) &amp; shape"},{"location":"geom-triangle/#equal","text":"var isEqual = Phaser . Geom . Triangle . Equals ( triangle0 , triangle1 ); Position and radius are equal.","title":"Equal"},{"location":"geom-triangle/#intersection","text":"","title":"Intersection"},{"location":"geom-triangle/#triangle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);","title":"Triangle to circle"},{"location":"geom-triangle/#triangle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);","title":"Triangle to rectangle"},{"location":"geom-triangle/#triangle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToTriangle ( triangleA , triangleB ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToTriangle ( triangleA , triangleB ); // var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out);","title":"Triangle to triangle"},{"location":"geom-triangle/#triangle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Triangle to line"},{"location":"gesture-overview/","text":"List of gesture plugins \u00b6 One pointer gesture \u00b6 Tap Press Swipe Pan Two pointers gesture \u00b6 Pinch Rotate","title":"Overview"},{"location":"gesture-overview/#list-of-gesture-plugins","text":"","title":"List of gesture plugins"},{"location":"gesture-overview/#one-pointer-gesture","text":"Tap Press Swipe Pan","title":"One pointer gesture"},{"location":"gesture-overview/#two-pointers-gesture","text":"Pinch Rotate","title":"Two pointers gesture"},{"location":"gesture-pan/","text":"Introduction \u00b6 Get pan events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var pan = scene . rexGestures . add . pan ( gameObject , { // enable: true, // threshold: 10, }); enable : Set false to disable input events. threshold : Minimal movement when pointer is down. Enable \u00b6 Get var enable = pan . enable ; // enable: true, or false Set pan . setEnable ( enable ); // enable: true, or false Events \u00b6 Pan \u00b6 pan . on ( 'pan' , function ( pan ){ }, scope ); pan.dx , pan.dy : Vector from previous pointer to current pointer. pan.worldX , pan.worldY : World position of current pointer. pan.x , pan.y : Scene position of current pointer. Pan start \u00b6 pan . on ( 'panstart' , function ( pan ){ }, scope ); pan.startWorldX , pan.startWorldY : World position of pan-start pointer. pan.startX , pan.startY : Scene position of pan-start pointer. Pan end \u00b6 pan . on ( 'panend' , function ( pan ){ }, scope ); pan.endWorldX , pan.endWorldY : World position of pan-end pointer. pan.endX , pan.endY : Scene position of pan-end pointer.","title":"Pan"},{"location":"gesture-pan/#introduction","text":"Get pan events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-pan/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-pan/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-pan/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-pan/#create-instance","text":"var pan = scene . rexGestures . add . pan ( gameObject , { // enable: true, // threshold: 10, }); enable : Set false to disable input events. threshold : Minimal movement when pointer is down.","title":"Create instance"},{"location":"gesture-pan/#enable","text":"Get var enable = pan . enable ; // enable: true, or false Set pan . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-pan/#events","text":"","title":"Events"},{"location":"gesture-pan/#pan","text":"pan . on ( 'pan' , function ( pan ){ }, scope ); pan.dx , pan.dy : Vector from previous pointer to current pointer. pan.worldX , pan.worldY : World position of current pointer. pan.x , pan.y : Scene position of current pointer.","title":"Pan"},{"location":"gesture-pan/#pan-start","text":"pan . on ( 'panstart' , function ( pan ){ }, scope ); pan.startWorldX , pan.startWorldY : World position of pan-start pointer. pan.startX , pan.startY : Scene position of pan-start pointer.","title":"Pan start"},{"location":"gesture-pan/#pan-end","text":"pan . on ( 'panend' , function ( pan ){ }, scope ); pan.endWorldX , pan.endWorldY : World position of pan-end pointer. pan.endX , pan.endY : Scene position of pan-end pointer.","title":"Pan end"},{"location":"gesture-pinch/","text":"Introduction \u00b6 Get scale factor from 2 dragging touch pointers. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var pinch = scene . rexGestures . add . pinch ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire pinch events after dragging distances of catched pointers are larger than this threshold. Enable \u00b6 Get var enable = pinch . enable ; // enable: true, or false Set pinch . setEnable ( enable ); // enable: true, or false Events \u00b6 On dragging \u00b6 On dragging 1 st touch pointer, fired when 1 st touch pointer is moving pinch . on ( 'drag1' , function ( pinch ) { // var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y} }, scope ); pinch.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. pinch . on ( 'pinch' , function ( pinch ) { // var scaleFactor = pinch.scaleFactor; // gameObject.scaleX *= scaleFactor; // gameObject.scaleY *= scaleFactor; }, scope ); pinch.scaleFactor : Rate of distance change between 2 catched touch pointers. On drag start, on drag end \u00b6 On drag 1 touch pointer start, fired when catching 1 st touch pointer. pinch . on ( 'drag1start' , function ( pinch ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. pinch . on ( 'drag1end' , function ( pinch ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. pinch . on ( 'pinchstart' , function ( pinch ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. pinch . on ( 'pinchend' , function ( pinch ) { }, scope ); Scale factor \u00b6 var scaleFactor = pinch . scaleFactor ; Rate of distance change between 2 catched touch pointers. (i.e current distance between 2 catched touch pointers / previous distance ). Drag vector of 1 st touch pointer \u00b6 var drag1Vector = pinch . drag1Vector ; // {x, y} Catched touch pointers \u00b6 Pointer 0, available when state is 1 var pointer0 = pinch . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = pinch . pointers [ 1 ];","title":"Pinch"},{"location":"gesture-pinch/#introduction","text":"Get scale factor from 2 dragging touch pointers. Author: Rex Member of scene","title":"Introduction"},{"location":"gesture-pinch/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-pinch/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-pinch/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-pinch/#create-instance","text":"var pinch = scene . rexGestures . add . pinch ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire pinch events after dragging distances of catched pointers are larger than this threshold.","title":"Create instance"},{"location":"gesture-pinch/#enable","text":"Get var enable = pinch . enable ; // enable: true, or false Set pinch . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-pinch/#events","text":"","title":"Events"},{"location":"gesture-pinch/#on-dragging","text":"On dragging 1 st touch pointer, fired when 1 st touch pointer is moving pinch . on ( 'drag1' , function ( pinch ) { // var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y} }, scope ); pinch.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. pinch . on ( 'pinch' , function ( pinch ) { // var scaleFactor = pinch.scaleFactor; // gameObject.scaleX *= scaleFactor; // gameObject.scaleY *= scaleFactor; }, scope ); pinch.scaleFactor : Rate of distance change between 2 catched touch pointers.","title":"On dragging"},{"location":"gesture-pinch/#on-drag-start-on-drag-end","text":"On drag 1 touch pointer start, fired when catching 1 st touch pointer. pinch . on ( 'drag1start' , function ( pinch ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. pinch . on ( 'drag1end' , function ( pinch ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. pinch . on ( 'pinchstart' , function ( pinch ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. pinch . on ( 'pinchend' , function ( pinch ) { }, scope );","title":"On drag start, on drag end"},{"location":"gesture-pinch/#scale-factor","text":"var scaleFactor = pinch . scaleFactor ; Rate of distance change between 2 catched touch pointers. (i.e current distance between 2 catched touch pointers / previous distance ).","title":"Scale factor"},{"location":"gesture-pinch/#drag-vector-of-1st-touch-pointer","text":"var drag1Vector = pinch . drag1Vector ; // {x, y}","title":"Drag vector of 1st touch pointer"},{"location":"gesture-pinch/#catched-touch-pointers","text":"Pointer 0, available when state is 1 var pointer0 = pinch . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = pinch . pointers [ 1 ];","title":"Catched touch pointers"},{"location":"gesture-press/","text":"Introduction \u00b6 Get press events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var press = scene . rexGestures . add . press ( gameObject , { // enable: true, // time: 251, // threshold: 9, }); enable : Set false to disable input events. time : Minimal time of the pointer to be pressed. threshold : Minimal movement when pointer is down. Enable \u00b6 Get var enable = press . enable ; // enable: true, or false Set press . setEnable ( enable ); // enable: true, or false Events \u00b6 Pressing start \u00b6 press . on ( 'pressstart' , function ( press ){ }, scope ); press.gameObject : Parent gameobject of this press behavior. press.worldX , press.worldY : World position of pressing start. press.x , press.y : Scene position of pressing start. Pressing end \u00b6 press . on ( 'pressend' , function ( press ){ }, scope );","title":"Press"},{"location":"gesture-press/#introduction","text":"Get press events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-press/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-press/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-press/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-press/#create-instance","text":"var press = scene . rexGestures . add . press ( gameObject , { // enable: true, // time: 251, // threshold: 9, }); enable : Set false to disable input events. time : Minimal time of the pointer to be pressed. threshold : Minimal movement when pointer is down.","title":"Create instance"},{"location":"gesture-press/#enable","text":"Get var enable = press . enable ; // enable: true, or false Set press . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-press/#events","text":"","title":"Events"},{"location":"gesture-press/#pressing-start","text":"press . on ( 'pressstart' , function ( press ){ }, scope ); press.gameObject : Parent gameobject of this press behavior. press.worldX , press.worldY : World position of pressing start. press.x , press.y : Scene position of pressing start.","title":"Pressing start"},{"location":"gesture-press/#pressing-end","text":"press . on ( 'pressend' , function ( press ){ }, scope );","title":"Pressing end"},{"location":"gesture-rotate/","text":"Introduction \u00b6 Get spin angle from 2 dragging touch pointers. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var rotate = scene . rexGestures . add . rotate ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire rotate events after dragging distances of catched pointers are larger than this threshold. Enable \u00b6 Get var enable = rotate . enable ; // enable: true, or false Set rotate . setEnable ( enable ); // enable: true, or false Events \u00b6 On dragging \u00b6 On dragging 1 st touch pointer, fired when 1 st touch pointer is moving rotate . on ( 'drag1' , function ( rotate ) { // var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y} }, scope ); rotate.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. rotate . on ( 'rotate' , function ( rotate ) { // rotate.spinObject(gameObejects); // var angle = rotate.rotation; }, scope ); rotate.spinObject(gameObejects) : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers. rotate.rotation : Return spin angle of 2 dragging pointers, in radius. On drag start, on drag end \u00b6 On drag 1 touch pointer start, fired when catching 1 st touch pointer. rotate . on ( 'drag1start' , function ( rotate ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. rotate . on ( 'drag1end' , function ( rotate ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. rotate . on ( 'rotatestart' , function ( rotate ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. rotate . on ( 'rotateend' , function ( rotate ) { }, scope ); Spin game object \u00b6 rotate . spinObject ( gameObejects ); Drag and spin game objects around current center of 2 dragging pointers. Uses this function under 'rotate' event. gameObejects : An array of game object, or a game object. Spin angle \u00b6 var angle = rotate . rotation ; Spin angle of 2 dragging pointers, in radius. Drag vector of 1 st touch pointer \u00b6 var drag1Vector = rotate . drag1Vector ; // {x, y} Catched touch pointers \u00b6 Pointer 0, available when state is 1 var pointer0 = rotate . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = rotate . pointers [ 1 ];","title":"Rotate"},{"location":"gesture-rotate/#introduction","text":"Get spin angle from 2 dragging touch pointers. Author: Rex Member of scene","title":"Introduction"},{"location":"gesture-rotate/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-rotate/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-rotate/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-rotate/#create-instance","text":"var rotate = scene . rexGestures . add . rotate ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire rotate events after dragging distances of catched pointers are larger than this threshold.","title":"Create instance"},{"location":"gesture-rotate/#enable","text":"Get var enable = rotate . enable ; // enable: true, or false Set rotate . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-rotate/#events","text":"","title":"Events"},{"location":"gesture-rotate/#on-dragging","text":"On dragging 1 st touch pointer, fired when 1 st touch pointer is moving rotate . on ( 'drag1' , function ( rotate ) { // var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y} }, scope ); rotate.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. rotate . on ( 'rotate' , function ( rotate ) { // rotate.spinObject(gameObejects); // var angle = rotate.rotation; }, scope ); rotate.spinObject(gameObejects) : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers. rotate.rotation : Return spin angle of 2 dragging pointers, in radius.","title":"On dragging"},{"location":"gesture-rotate/#on-drag-start-on-drag-end","text":"On drag 1 touch pointer start, fired when catching 1 st touch pointer. rotate . on ( 'drag1start' , function ( rotate ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. rotate . on ( 'drag1end' , function ( rotate ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. rotate . on ( 'rotatestart' , function ( rotate ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. rotate . on ( 'rotateend' , function ( rotate ) { }, scope );","title":"On drag start, on drag end"},{"location":"gesture-rotate/#spin-game-object","text":"rotate . spinObject ( gameObejects ); Drag and spin game objects around current center of 2 dragging pointers. Uses this function under 'rotate' event. gameObejects : An array of game object, or a game object.","title":"Spin game object"},{"location":"gesture-rotate/#spin-angle","text":"var angle = rotate . rotation ; Spin angle of 2 dragging pointers, in radius.","title":"Spin angle"},{"location":"gesture-rotate/#drag-vector-of-1st-touch-pointer","text":"var drag1Vector = rotate . drag1Vector ; // {x, y}","title":"Drag vector of 1st touch pointer"},{"location":"gesture-rotate/#catched-touch-pointers","text":"Pointer 0, available when state is 1 var pointer0 = rotate . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = rotate . pointers [ 1 ];","title":"Catched touch pointers"},{"location":"gesture-swipe/","text":"Introduction \u00b6 Get swipe events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var swipe = scene . rexGestures . add . swipe ( gameObject , { // enable: true, // threshold: 10, // velocityThreshold: 1000, // direction: '8dir', }); enable : Set false to disable input events. time : Max time of the pointer to be down. threshold : Minimal movement when pointer is down. velocityThreshold : Minimal dragging speed. dir : 'up&down' , or 0 : Get up or down state only. 'left&right' , or 1 : Get left or right state only. '4dir' , or 2 : Get up , down , left or right state. '8dir' , or 3 : Get up , up / left , up / right , down , down / left , down / right , left , or right state. Enable \u00b6 Get var enable = swipe . enable ; // enable: true, or false Set swipe . setEnable ( enable ); // enable: true, or false Events \u00b6 Swipe \u00b6 swipe . on ( 'swipe' , function ( swipe ){ }, scope ); swipe.left , swipe.right , swipe.up , swipe.down : Swipe direction states. swipe.dragVelocity : Velocity of dragging.","title":"Swipe"},{"location":"gesture-swipe/#introduction","text":"Get swipe events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-swipe/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-swipe/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-swipe/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-swipe/#create-instance","text":"var swipe = scene . rexGestures . add . swipe ( gameObject , { // enable: true, // threshold: 10, // velocityThreshold: 1000, // direction: '8dir', }); enable : Set false to disable input events. time : Max time of the pointer to be down. threshold : Minimal movement when pointer is down. velocityThreshold : Minimal dragging speed. dir : 'up&down' , or 0 : Get up or down state only. 'left&right' , or 1 : Get left or right state only. '4dir' , or 2 : Get up , down , left or right state. '8dir' , or 3 : Get up , up / left , up / right , down , down / left , down / right , left , or right state.","title":"Create instance"},{"location":"gesture-swipe/#enable","text":"Get var enable = swipe . enable ; // enable: true, or false Set swipe . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-swipe/#events","text":"","title":"Events"},{"location":"gesture-swipe/#swipe","text":"swipe . on ( 'swipe' , function ( swipe ){ }, scope ); swipe.left , swipe.right , swipe.up , swipe.down : Swipe direction states. swipe.dragVelocity : Velocity of dragging.","title":"Swipe"},{"location":"gesture-tap/","text":"Introduction \u00b6 Get tap/multi-taps events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var tap = scene . rexGestures . add . tap ( gameObject , { // enable: true, // time: 250, // tapInterval: 200, // threshold: 9, // tapOffset: 10, // taps: undefined, // minTaps: undefined, // maxTaps: undefined, }); enable : Set false to disable input events. time : Max time of the pointer to be down. tapInterval : Max time between the multi-tap taps. threshold : Minimal movement when pointer is down. tapOffset : A multi-tap can be a bit off the initial position. taps : Fire tap event only when taps count reaches this value. undefined : Fire tap event only when tapped end. i.e pointer-up time exceeds tapInterval . minTaps : Fire tap event only when taps count is larger than this value. undefined : Don't check taps count. maxTaps : Fire tap event only when taps count is less than this value. undefined : Don't check taps count. Enable \u00b6 Get var enable = tap . enable ; // enable: true, or false Set tap . setEnable ( enable ); // enable: true, or false Events \u00b6 Tap \u00b6 tap . on ( 'tap' , function ( tap ){ }, scope ); tap.tapsCount : Taps count. tap.gameObject : Parent gameobject of this tap behavior. tap.worldX , tap.worldY : World position of first tapping. tap.x , tap.y : Scene position of first tapping. tap . on ( tapsCount + 'tap' , function ( tap ){ }, scope ); tapsCount + 'tap' : 1tap , 2tap , 3tap , etc ... Tapping start \u00b6 Each pointer-down will increase taps count and fire tappingstart event. tap . on ( 'tappingstart' , function ( tap ){ }, scope ); Is tap \u00b6 var isTapped = tap . isTapped ; Return true if tapped end.","title":"Tap"},{"location":"gesture-tap/#introduction","text":"Get tap/multi-taps events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-tap/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-tap/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-tap/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-tap/#create-instance","text":"var tap = scene . rexGestures . add . tap ( gameObject , { // enable: true, // time: 250, // tapInterval: 200, // threshold: 9, // tapOffset: 10, // taps: undefined, // minTaps: undefined, // maxTaps: undefined, }); enable : Set false to disable input events. time : Max time of the pointer to be down. tapInterval : Max time between the multi-tap taps. threshold : Minimal movement when pointer is down. tapOffset : A multi-tap can be a bit off the initial position. taps : Fire tap event only when taps count reaches this value. undefined : Fire tap event only when tapped end. i.e pointer-up time exceeds tapInterval . minTaps : Fire tap event only when taps count is larger than this value. undefined : Don't check taps count. maxTaps : Fire tap event only when taps count is less than this value. undefined : Don't check taps count.","title":"Create instance"},{"location":"gesture-tap/#enable","text":"Get var enable = tap . enable ; // enable: true, or false Set tap . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-tap/#events","text":"","title":"Events"},{"location":"gesture-tap/#tap","text":"tap . on ( 'tap' , function ( tap ){ }, scope ); tap.tapsCount : Taps count. tap.gameObject : Parent gameobject of this tap behavior. tap.worldX , tap.worldY : World position of first tapping. tap.x , tap.y : Scene position of first tapping. tap . on ( tapsCount + 'tap' , function ( tap ){ }, scope ); tapsCount + 'tap' : 1tap , 2tap , 3tap , etc ...","title":"Tap"},{"location":"gesture-tap/#tapping-start","text":"Each pointer-down will increase taps count and fire tappingstart event. tap . on ( 'tappingstart' , function ( tap ){ }, scope );","title":"Tapping start"},{"location":"gesture-tap/#is-tap","text":"var isTapped = tap . isTapped ; Return true if tapped end.","title":"Is tap"},{"location":"graphics/","text":"Introduction \u00b6 Drawing on webgl or canvas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add graphics object \u00b6 var graphics = scene . add . graphics (); or var graphics = scene . add . graphics ({ x : 0 , y : 0 , // lineStyle: { // width: 1, // color: 0xffffff, // alpha: 1 // }, // fillStyle: { // color: 0xffffff, // alpha: 1 // }, add : true }); Custom class \u00b6 Define class class MyGraphics extends Phaser . GameObjects . Graphics { constructor ( scene , options ) { super ( scene , options ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var graphics = new MyGraphics ( scene , options ); Drawing commands \u00b6 Set style \u00b6 Set default line style and fill style graphics . setDefaultStyles ({ lineStyle : { width : 1 , color : 0xffffff , alpha : 1 }, fillStyle : { color : 0xffffff , alpha : 1 } }); Set line style graphics . lineStyle ( lineWidth , color , alpha ); // color: 0xRRGGBB Set fill style Fill color graphics . fillStyle ( color , alpha ); // color: 0xRRGGBB Fill gradient color (WebGL only) graphics . fillStyle ( topLeft , topRight , bottomLeft , bottomRight ); // alpha= 1 // graphics.fillStyle(topLeft, topRight, bottomLeft, bottomRight, alpha); topLeft : The tint being applied to the top-left of the Game Object. topRight : The tint being applied to the top-right of the Game Object. bottomLeft : The tint being applied to the bottom-left of the Game Object. bottomRight : The tint being applied to the bottom-right of the Game Object. Clear \u00b6 graphics . clear (); Path \u00b6 graphics . beginPath (); graphics . closePath (); graphics . fillPath (); // = graphics.fill() graphics . strokePath (); // = graphics.stroke() Rectangle \u00b6 graphics . fillRectShape ( rect ); // rect: {x, y, width, height} graphics . fillRect ( x , y , width , height ); graphics . strokeRectShape ( rect ); // rect: {x, y, width, height} graphics . strokeRect ( x , y , width , height ); Rounded rectangle \u00b6 graphics . fillRoundedRect ( x , y , width , height , radius ); graphics . strokeRoundedRect ( x , y , width , height , radius ); radius : number or an object {tl, tr, bl, br} Triangle \u00b6 graphics . fillTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . fillTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); graphics . strokeTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . strokeTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Point \u00b6 graphics . fillPointShape ( point , size ); // point: {x, y} graphics . fillPoint ( x , y , size ); Line \u00b6 graphics . strokeLineShape ( line ); // line: {x1, y1, x2, y2} graphics . lineBetween ( x1 , y1 , x2 , y2 ); graphics . lineTo ( x , y ); graphics . moveTo ( x , y ); Lines \u00b6 graphics . strokePoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] graphics . fillPoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] points : Array of {x, y} closeShape : When true , the shape is closed by joining the last point to the first point. closePath : When true , the path is closed before being stroked. endIndex : The index of points to stop drawing at. Defaults to points.length . Circle \u00b6 graphics . fillCircleShape ( circle ); // circle: {x, y, radius} graphics . fillCircle ( x , y , radius ); graphics . strokeCircleShape ( circle ); // circle: {x, y, radius} graphics . strokeCircle ( x , y , radius ); Draw or fill circle shape by points. Ellipse \u00b6 graphics . strokeEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . strokeEllipse ( x , y , width , height , smoothness ); graphics . fillEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . fillEllipse ( x , y , width , height , smoothness ); Draw or fill ellipse shape by points. Arc \u00b6 graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw arc curve by points. Pie-chart slice \u00b6 graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw pie-chart slice shape by points. Fill this shape graphics . fillPath (); Fill pattern \u00b6 Load texture pattern graphics . setTexture ( key , frame , mode ); mode : 0 : Multiply 1 : Alpha only 2 : Texture only Fill pattern graphics . fillRect ( x , y , width , height ); WebGL only Clear pattern \u00b6 graphics . setTexture (); Transfer \u00b6 graphics . save (); graphics . restore (); graphics . translateCanvas ( x , y ); graphics . scaleCanvas ( x , y ); graphics . rotateCanvas ( radians ); Generate texture \u00b6 graphics . generateTexture ( key , width , height ); // key: texture key Create mask \u00b6 var mask = graphics . createGeometryMask (); See mask","title":"Graphics"},{"location":"graphics/#introduction","text":"Drawing on webgl or canvas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"graphics/#usage","text":"","title":"Usage"},{"location":"graphics/#add-graphics-object","text":"var graphics = scene . add . graphics (); or var graphics = scene . add . graphics ({ x : 0 , y : 0 , // lineStyle: { // width: 1, // color: 0xffffff, // alpha: 1 // }, // fillStyle: { // color: 0xffffff, // alpha: 1 // }, add : true });","title":"Add graphics object"},{"location":"graphics/#custom-class","text":"Define class class MyGraphics extends Phaser . GameObjects . Graphics { constructor ( scene , options ) { super ( scene , options ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var graphics = new MyGraphics ( scene , options );","title":"Custom class"},{"location":"graphics/#drawing-commands","text":"","title":"Drawing commands"},{"location":"graphics/#set-style","text":"Set default line style and fill style graphics . setDefaultStyles ({ lineStyle : { width : 1 , color : 0xffffff , alpha : 1 }, fillStyle : { color : 0xffffff , alpha : 1 } }); Set line style graphics . lineStyle ( lineWidth , color , alpha ); // color: 0xRRGGBB Set fill style Fill color graphics . fillStyle ( color , alpha ); // color: 0xRRGGBB Fill gradient color (WebGL only) graphics . fillStyle ( topLeft , topRight , bottomLeft , bottomRight ); // alpha= 1 // graphics.fillStyle(topLeft, topRight, bottomLeft, bottomRight, alpha); topLeft : The tint being applied to the top-left of the Game Object. topRight : The tint being applied to the top-right of the Game Object. bottomLeft : The tint being applied to the bottom-left of the Game Object. bottomRight : The tint being applied to the bottom-right of the Game Object.","title":"Set style"},{"location":"graphics/#clear","text":"graphics . clear ();","title":"Clear"},{"location":"graphics/#path","text":"graphics . beginPath (); graphics . closePath (); graphics . fillPath (); // = graphics.fill() graphics . strokePath (); // = graphics.stroke()","title":"Path"},{"location":"graphics/#rectangle","text":"graphics . fillRectShape ( rect ); // rect: {x, y, width, height} graphics . fillRect ( x , y , width , height ); graphics . strokeRectShape ( rect ); // rect: {x, y, width, height} graphics . strokeRect ( x , y , width , height );","title":"Rectangle"},{"location":"graphics/#rounded-rectangle","text":"graphics . fillRoundedRect ( x , y , width , height , radius ); graphics . strokeRoundedRect ( x , y , width , height , radius ); radius : number or an object {tl, tr, bl, br}","title":"Rounded rectangle"},{"location":"graphics/#triangle","text":"graphics . fillTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . fillTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); graphics . strokeTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . strokeTriangle ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Triangle"},{"location":"graphics/#point","text":"graphics . fillPointShape ( point , size ); // point: {x, y} graphics . fillPoint ( x , y , size );","title":"Point"},{"location":"graphics/#line","text":"graphics . strokeLineShape ( line ); // line: {x1, y1, x2, y2} graphics . lineBetween ( x1 , y1 , x2 , y2 ); graphics . lineTo ( x , y ); graphics . moveTo ( x , y );","title":"Line"},{"location":"graphics/#lines","text":"graphics . strokePoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] graphics . fillPoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] points : Array of {x, y} closeShape : When true , the shape is closed by joining the last point to the first point. closePath : When true , the path is closed before being stroked. endIndex : The index of points to stop drawing at. Defaults to points.length .","title":"Lines"},{"location":"graphics/#circle","text":"graphics . fillCircleShape ( circle ); // circle: {x, y, radius} graphics . fillCircle ( x , y , radius ); graphics . strokeCircleShape ( circle ); // circle: {x, y, radius} graphics . strokeCircle ( x , y , radius ); Draw or fill circle shape by points.","title":"Circle"},{"location":"graphics/#ellipse","text":"graphics . strokeEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . strokeEllipse ( x , y , width , height , smoothness ); graphics . fillEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . fillEllipse ( x , y , width , height , smoothness ); Draw or fill ellipse shape by points.","title":"Ellipse"},{"location":"graphics/#arc","text":"graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw arc curve by points.","title":"Arc"},{"location":"graphics/#pie-chart-slice","text":"graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw pie-chart slice shape by points. Fill this shape graphics . fillPath ();","title":"Pie-chart slice"},{"location":"graphics/#fill-pattern","text":"Load texture pattern graphics . setTexture ( key , frame , mode ); mode : 0 : Multiply 1 : Alpha only 2 : Texture only Fill pattern graphics . fillRect ( x , y , width , height ); WebGL only","title":"Fill pattern"},{"location":"graphics/#clear-pattern","text":"graphics . setTexture ();","title":"Clear pattern"},{"location":"graphics/#transfer","text":"graphics . save (); graphics . restore (); graphics . translateCanvas ( x , y ); graphics . scaleCanvas ( x , y ); graphics . rotateCanvas ( radians );","title":"Transfer"},{"location":"graphics/#generate-texture","text":"graphics . generateTexture ( key , width , height ); // key: texture key","title":"Generate texture"},{"location":"graphics/#create-mask","text":"var mask = graphics . createGeometryMask (); See mask","title":"Create mask"},{"location":"gridalign/","text":"Introduction \u00b6 Align objects on quadrilateral or hexagon grid. See also built-in grid-align . Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGridAlign from './plugins/gridalign.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GridAlignPlugin from './plugins/gridalign-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGridAlign' , plugin : GridAlignPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Quadrilateral grid \u00b6 scene . plugins . get ( 'rexGridAlign' ). quad ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , type : 0 , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Hexagon grid \u00b6 scene . plugins . get ( 'rexGridAlign' ). hexagon ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , staggeraxis : 'x' , staggerindex : 'odd' , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Types of hexagon grid \u00b6 Reference odd-r : staggeraxis = x , staggerindex = odd even-r : staggeraxis = x , staggerindex = even odd-q : staggeraxis = y , staggerindex = odd even-q :staggeraxis = y , staggerindex = even","title":"Quad/Hexagon grid align"},{"location":"gridalign/#introduction","text":"Align objects on quadrilateral or hexagon grid. See also built-in grid-align . Author: Rex Methods","title":"Introduction"},{"location":"gridalign/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gridalign/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"gridalign/#import-class","text":"import rexGridAlign from './plugins/gridalign.js' ;","title":"Import class"},{"location":"gridalign/#install-global-plugin","text":"Install plugin in configuration of game import GridAlignPlugin from './plugins/gridalign-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGridAlign' , plugin : GridAlignPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"gridalign/#quadrilateral-grid","text":"scene . plugins . get ( 'rexGridAlign' ). quad ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , type : 0 , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Quadrilateral grid"},{"location":"gridalign/#hexagon-grid","text":"scene . plugins . get ( 'rexGridAlign' ). hexagon ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , staggeraxis : 'x' , staggerindex : 'odd' , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Hexagon grid"},{"location":"gridalign/#types-of-hexagon-grid","text":"Reference odd-r : staggeraxis = x , staggerindex = odd even-r : staggeraxis = x , staggerindex = even odd-q : staggeraxis = y , staggerindex = odd even-q :staggeraxis = y , staggerindex = even","title":"Types of hexagon grid"},{"location":"gridtable/","text":"Introduction \u00b6 Viewer of grid table, to manipulate game object of each visible cell. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexGridTablePlugin' , plugin : GridTablePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var config = { cellsCount : 0 , columns : 1 , cellHeight : 30 , cellWidth : 30 , cellVisibleCallback : null , cellVisibleCallbackScope : undefined , reuseCellContainer : false , cellInvisibleCallback : null , cellInvisibleCallbackScope : undefined , clamplTableOXY : true , scrollMode : 0 , // 0|'v'|'vertical'|1|'h'|'horizontal' mask : { padding : 0 } } var table = scene . add . rexGridTable ( x , y , width , height , config ); cellsCount : Total cells count. columns : Columns count of each row. cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . cellVisibleCallback , cellVisibleCallbackScope : Callback when cell begins visible. reuseCellContainer : Set true to reuse cell container when cell is visible. cellInvisibleCallback , cellInvisibleCallbackScope : Callback when cell begins invisible. clamplTableOXY : Set true to clamp tableOX , tableOY when out-of-bound, Set false when dragging by scroller scrollMode : 0 , or 'v' , or 'vertical' : Scroll table vertically. 1 , or 'h' , or 'horizontal' : Scroll table horizontally. mask : A rectangle mask of cells mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. Add grid table from JSON var table = scene . make . rexGridTable ({ x : 0 , y : 0 , width : 256 , height : 256 , // cellsCount: 0, // total cells count // ... }); Custom class \u00b6 Define class class MyGridTable extends GridTable { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var table = new MyGridTable ( scene , x , y , width , height , config ); Cell begins visible \u00b6 Add container of cell when it begins visible in event cellvisible . table . on ( 'cellvisible' , function ( cell , cellContainer ){ if ( cellContainer === null ) { // No reusable cell container, create a new one var scene = cell . scene ; // cellContainer = scene.add.container(); } // Set child properties of cell container ... cell . setContainer ( cellContainer ); // Assign cell container }) It is equal to cellVisibleCallback in configuration. { // ... cellVisibleCallback : function ( cell , cellContainer ) { cell . setContainer ( cellContainer ); // Assign cell container }, // ... } cell Scene object of grid table. var scene = cell . scene ; Index of cell. var index = cell . index ; Size of cell. var cellWidth = cell . width ; var cellHeight = cell . height ; Change size of cell : Change cell height in scoll-vertical mode. cell . height = newHeight ; Change cell width in scroll-horizontal mode. cell . width = newWidth ; Assign cell container. Set origin point of this cell container to (0,0). cell . setContainer ( cellContainer ); cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. Each cell only has one container gameObject, old container will be destroyed when assigning a new container. Cell begins invisible \u00b6 Container of an invisible cell will be destroyed automatically. To resue container gameObject Set reuseCellContainer to true to put invisible cell container into object pool. Or, pop that container by cell.popContainer() in event cellinvisible . table . on ( 'cellinvisible' , function ( cell ){ // var container = cell.popContainer(); }) It is equal to cellInvisibleCallback in configuration. { // ... cellInvisibleCallback : function ( cell ) { // var container = cell.popContainer(); }, // ... } Scroll table content \u00b6 Set table . setTableOY ( oy ). updateTable (); table . addTableOY ( dy ). updateTable (); table . setTableOX ( ox ). updateTable (); table . addTableOX ( dx ). updateTable (); table . setTableOXY ( ox , oy ). updateTable (); table . addTableOXY ( dx , dy ). updateTable (); or table . tableOY = oy ; // include table.updateTable() table . tableOX = ox ; These will trigger cellvisible , or cellinvisible events. Get var tableOY = table . tableOY ; var tableOX = table . tableOX ; Use case Scroll table by scroller behavior. Scroll by percentage \u00b6 Set table . setTableOYByPercentage ( t ). updateTable (); // t: 0~1 or table . t = t ; // include table.updateTable() Get var t = table . getTableOYPercentage (); //var t = table.t; Use case Scroll table by slider behavior. Refresh table content \u00b6 Refresh all visible cells. table . updateTable ( true ); Table size in cells \u00b6 Set table size table . setGridSize ( colCount , rowCount ). updateTable (); Total cells count \u00b6 Get var count = table . cellsCount ; Set table . setCellsCount ( count ). updateTable (); Columns count \u00b6 Get var columnCount = table . columnCount ; Set table . setColumnCount ( count ). updateTable (); Table size in pixels \u00b6 Table height in pixels var tableHeight = table . tableHeight ; Table width in pixels var tableWidth = table . tableWidth ; Bounds of tableOX, tableOY \u00b6 Top bound of tableOY var topTableOY = table . topTableOY ; // 0 Bottom bound of tableOY var bottomTableOY = table . bottomTableOY ; // A negative number Left bound of tableOX var leftTableOX = table . leftTableOX ; // 0 Right bound of tableOX var rightTableOX = table . rightTableOX ; // A negative number Use case Set bounds of scroller Resize table \u00b6 table . resize ( width , height ); Cell \u00b6 Get cell \u00b6 var cell = table . getCell ( cellIndex ); Cell height \u00b6 Get var height = cell . height ; Set cell height, only worked in scoll-vertical mode. cell . height = height ; // cell.setHeight(height); or table . setCellHeight ( cellIndex , cellHeight ); Refresh table after the cell size is changed. table . updateTable ( true ); Cell width \u00b6 Get var width = cell . width ; Set cell width, only worked in scoll-horizontal mode. cell . width = width ; // cell.setWidth(width); or table . setCellWidth ( cellIndex , cellWidth ); Refresh table after the cell size is changed. table . updateTable ( true ); Fore each visible cell \u00b6 For when you absolutely know this Set won't be modified during the iteration table . iterateVisibleCell ( function ( cell ){ // ... }); For when you know this Set will be modified during the iteration. table . eachVisibleCell ( function ( cell ){ // ... }); Container \u00b6 Get var container = cell . getContainer (); Pop (get and remove) var container = cell . popContainer (); Set cell . setContainer ( container ); Remove cell . destroyContainer (); Properties \u00b6 var cellIndex = cell . index ;","title":"Grid table"},{"location":"gridtable/#introduction","text":"Viewer of grid table, to manipulate game object of each visible cell. Author: Rex Game object","title":"Introduction"},{"location":"gridtable/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"gridtable/#usage","text":"Sample code","title":"Usage"},{"location":"gridtable/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexGridTablePlugin' , plugin : GridTablePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"gridtable/#create-instance","text":"var config = { cellsCount : 0 , columns : 1 , cellHeight : 30 , cellWidth : 30 , cellVisibleCallback : null , cellVisibleCallbackScope : undefined , reuseCellContainer : false , cellInvisibleCallback : null , cellInvisibleCallbackScope : undefined , clamplTableOXY : true , scrollMode : 0 , // 0|'v'|'vertical'|1|'h'|'horizontal' mask : { padding : 0 } } var table = scene . add . rexGridTable ( x , y , width , height , config ); cellsCount : Total cells count. columns : Columns count of each row. cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . cellVisibleCallback , cellVisibleCallbackScope : Callback when cell begins visible. reuseCellContainer : Set true to reuse cell container when cell is visible. cellInvisibleCallback , cellInvisibleCallbackScope : Callback when cell begins invisible. clamplTableOXY : Set true to clamp tableOX , tableOY when out-of-bound, Set false when dragging by scroller scrollMode : 0 , or 'v' , or 'vertical' : Scroll table vertically. 1 , or 'h' , or 'horizontal' : Scroll table horizontally. mask : A rectangle mask of cells mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. Add grid table from JSON var table = scene . make . rexGridTable ({ x : 0 , y : 0 , width : 256 , height : 256 , // cellsCount: 0, // total cells count // ... });","title":"Create instance"},{"location":"gridtable/#custom-class","text":"Define class class MyGridTable extends GridTable { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var table = new MyGridTable ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"gridtable/#cell-begins-visible","text":"Add container of cell when it begins visible in event cellvisible . table . on ( 'cellvisible' , function ( cell , cellContainer ){ if ( cellContainer === null ) { // No reusable cell container, create a new one var scene = cell . scene ; // cellContainer = scene.add.container(); } // Set child properties of cell container ... cell . setContainer ( cellContainer ); // Assign cell container }) It is equal to cellVisibleCallback in configuration. { // ... cellVisibleCallback : function ( cell , cellContainer ) { cell . setContainer ( cellContainer ); // Assign cell container }, // ... } cell Scene object of grid table. var scene = cell . scene ; Index of cell. var index = cell . index ; Size of cell. var cellWidth = cell . width ; var cellHeight = cell . height ; Change size of cell : Change cell height in scoll-vertical mode. cell . height = newHeight ; Change cell width in scroll-horizontal mode. cell . width = newWidth ; Assign cell container. Set origin point of this cell container to (0,0). cell . setContainer ( cellContainer ); cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. Each cell only has one container gameObject, old container will be destroyed when assigning a new container.","title":"Cell begins visible"},{"location":"gridtable/#cell-begins-invisible","text":"Container of an invisible cell will be destroyed automatically. To resue container gameObject Set reuseCellContainer to true to put invisible cell container into object pool. Or, pop that container by cell.popContainer() in event cellinvisible . table . on ( 'cellinvisible' , function ( cell ){ // var container = cell.popContainer(); }) It is equal to cellInvisibleCallback in configuration. { // ... cellInvisibleCallback : function ( cell ) { // var container = cell.popContainer(); }, // ... }","title":"Cell begins invisible"},{"location":"gridtable/#scroll-table-content","text":"Set table . setTableOY ( oy ). updateTable (); table . addTableOY ( dy ). updateTable (); table . setTableOX ( ox ). updateTable (); table . addTableOX ( dx ). updateTable (); table . setTableOXY ( ox , oy ). updateTable (); table . addTableOXY ( dx , dy ). updateTable (); or table . tableOY = oy ; // include table.updateTable() table . tableOX = ox ; These will trigger cellvisible , or cellinvisible events. Get var tableOY = table . tableOY ; var tableOX = table . tableOX ; Use case Scroll table by scroller behavior.","title":"Scroll table content"},{"location":"gridtable/#scroll-by-percentage","text":"Set table . setTableOYByPercentage ( t ). updateTable (); // t: 0~1 or table . t = t ; // include table.updateTable() Get var t = table . getTableOYPercentage (); //var t = table.t; Use case Scroll table by slider behavior.","title":"Scroll by percentage"},{"location":"gridtable/#refresh-table-content","text":"Refresh all visible cells. table . updateTable ( true );","title":"Refresh table content"},{"location":"gridtable/#table-size-in-cells","text":"Set table size table . setGridSize ( colCount , rowCount ). updateTable ();","title":"Table size in cells"},{"location":"gridtable/#total-cells-count","text":"Get var count = table . cellsCount ; Set table . setCellsCount ( count ). updateTable ();","title":"Total cells count"},{"location":"gridtable/#columns-count","text":"Get var columnCount = table . columnCount ; Set table . setColumnCount ( count ). updateTable ();","title":"Columns count"},{"location":"gridtable/#table-size-in-pixels","text":"Table height in pixels var tableHeight = table . tableHeight ; Table width in pixels var tableWidth = table . tableWidth ;","title":"Table size in pixels"},{"location":"gridtable/#bounds-of-tableox-tableoy","text":"Top bound of tableOY var topTableOY = table . topTableOY ; // 0 Bottom bound of tableOY var bottomTableOY = table . bottomTableOY ; // A negative number Left bound of tableOX var leftTableOX = table . leftTableOX ; // 0 Right bound of tableOX var rightTableOX = table . rightTableOX ; // A negative number Use case Set bounds of scroller","title":"Bounds of tableOX, tableOY"},{"location":"gridtable/#resize-table","text":"table . resize ( width , height );","title":"Resize table"},{"location":"gridtable/#cell","text":"","title":"Cell"},{"location":"gridtable/#get-cell","text":"var cell = table . getCell ( cellIndex );","title":"Get cell"},{"location":"gridtable/#cell-height","text":"Get var height = cell . height ; Set cell height, only worked in scoll-vertical mode. cell . height = height ; // cell.setHeight(height); or table . setCellHeight ( cellIndex , cellHeight ); Refresh table after the cell size is changed. table . updateTable ( true );","title":"Cell height"},{"location":"gridtable/#cell-width","text":"Get var width = cell . width ; Set cell width, only worked in scoll-horizontal mode. cell . width = width ; // cell.setWidth(width); or table . setCellWidth ( cellIndex , cellWidth ); Refresh table after the cell size is changed. table . updateTable ( true );","title":"Cell width"},{"location":"gridtable/#fore-each-visible-cell","text":"For when you absolutely know this Set won't be modified during the iteration table . iterateVisibleCell ( function ( cell ){ // ... }); For when you know this Set will be modified during the iteration. table . eachVisibleCell ( function ( cell ){ // ... });","title":"Fore each visible cell"},{"location":"gridtable/#container","text":"Get var container = cell . getContainer (); Pop (get and remove) var container = cell . popContainer (); Set cell . setContainer ( container ); Remove cell . destroyContainer ();","title":"Container"},{"location":"gridtable/#properties","text":"var cellIndex = cell . index ;","title":"Properties"},{"location":"group/","text":"Introduction \u00b6 Objects pool, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add group object \u00b6 var group = scene . add . group ( config ); // var group = scene.add.group(gameObjects, config); // Add game objects into group config { classType : Phaser . GameObjects . Sprite , defaultKey : null , defaultFrame : null , active : true , maxSize : - 1 , runChildUpdate : false , createCallback : null , removeCallback : null , createMultipleCallback : null } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image runChildUpdate : Set true to run gameObject.update() every tick. createCallback : A function to be called when adding or creating group members. var callback = function ( gameObject ) { } removeCallback : A function to be called when removing group members. var callback = function ( gameObject ) { } createMultipleCallback : A function to be called when creating several group members at once. var callback = function ( gameObjects ) { } Add game object \u00b6 group . add ( gameObject ); // group.add(gameObject, true); // add this game object to display and update list of scene group . addMultiple ( gameObjects ); // array of game objects // group.addMultiple(gameObjects, true); Game object will only be added once. Game object will be removed automatically when destroyed. Remove game object \u00b6 group . remove ( gameObject ); // group.remove(gameObject, true); // also remove this game object from display and update list of scene Remove all game objects group . clear (); // group.clear(removeFromScene, destroyChild); Get game objects \u00b6 Get all game objects. var gameObjects = group . getChildren (); // array of game objects Amount of game objects. var len = group . getLength (); Group is full. Maximun size is set in maxSize . var isFull = group . isFull (); Game object is in group. var isInGroup = group . contains ( child ); Group actions \u00b6 group . playAnimation ( key , startFrame ); group . toggleVisible (); group . setDepth ( value , step ); Active/inactive game objects \u00b6 Set inactive group . kill ( gameObject ); // gameObject.setActive(false) group . killAndHide ( gameObject ); // gameObject.setActive(false).setVisible(false) Amount of active game objects var activeCount = group . countActive (); or var activeCount = group . getTotalUsed (); Amount of active game objects var inactiveCount = group . countActive ( false ); Amount of free (maxSize - activeCount) game objects var freeCount = group . getTotalFree (); // group.maxSize - group.getTotalUsed() Get first active/inactive game object, Return null if no game object picked. var gameObject = group . getFirst ( active ); // active = true/false var gameObject = group . getFirstAlive (); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead (); // Equal to group.getFirst(false, ...) Create one if no game object picked. var gameObject = group . getFirst ( active , true , x , y , key , frame , visible ); // active = true/false var gameObject = group . getFirstAlive ( true , x , y , key , frame , visible ); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead ( true , x , y , key , frame , visible ); // Equal to group.getFirst(false, ...) var gameObject = group . get ( x , y , key , frame , visible ); // Equal to group.getFirst(false, true, ...) Use ( x , y , key , frame ) to create Image / Sprite game object. var newGameObject = new GameObjectClass ( x , y , key , frame ); Create game objects \u00b6 var gameObjects = group . createFromConfig ( config ); var gameObjects = group . createMultiple ( config ); // config in array config { classType : this . classType , key : undefined , // Required frame : null , visible : true , active : true , repeat : 0 , // Create (1 + repeat) game objects createCallback : undefined , // Override this.createCallback if not undefined // Position setXY : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetXY(gameObjects, x, y, stepX, stepY) gridAlign : false , // { // width: -1, // height: -1, // cellWidth: 1, // cellHeight: 1, // position: Phaser.Display.Align.TOP_LEFT, // x: 0, // y: 0 // } // Actions.GridAlign(gameObjects, gridAlign) // Angle setRotation : { value : 0 , step : }, // Actions.SetRotation(gameObjects, value, step) // Scale setScale : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetScale(gameObjects, x, y, stepX, stepY) // Alpha setAlpha : { value : 0 , step : }, // Actions.SetAlpha(gameObjects, value, step) // Input hitArea : null , hitAreaCallback : null , // Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback) } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image","title":"Group"},{"location":"group/#introduction","text":"Objects pool, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"group/#usage","text":"","title":"Usage"},{"location":"group/#add-group-object","text":"var group = scene . add . group ( config ); // var group = scene.add.group(gameObjects, config); // Add game objects into group config { classType : Phaser . GameObjects . Sprite , defaultKey : null , defaultFrame : null , active : true , maxSize : - 1 , runChildUpdate : false , createCallback : null , removeCallback : null , createMultipleCallback : null } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image runChildUpdate : Set true to run gameObject.update() every tick. createCallback : A function to be called when adding or creating group members. var callback = function ( gameObject ) { } removeCallback : A function to be called when removing group members. var callback = function ( gameObject ) { } createMultipleCallback : A function to be called when creating several group members at once. var callback = function ( gameObjects ) { }","title":"Add group object"},{"location":"group/#add-game-object","text":"group . add ( gameObject ); // group.add(gameObject, true); // add this game object to display and update list of scene group . addMultiple ( gameObjects ); // array of game objects // group.addMultiple(gameObjects, true); Game object will only be added once. Game object will be removed automatically when destroyed.","title":"Add game object"},{"location":"group/#remove-game-object","text":"group . remove ( gameObject ); // group.remove(gameObject, true); // also remove this game object from display and update list of scene Remove all game objects group . clear (); // group.clear(removeFromScene, destroyChild);","title":"Remove game object"},{"location":"group/#get-game-objects","text":"Get all game objects. var gameObjects = group . getChildren (); // array of game objects Amount of game objects. var len = group . getLength (); Group is full. Maximun size is set in maxSize . var isFull = group . isFull (); Game object is in group. var isInGroup = group . contains ( child );","title":"Get game objects"},{"location":"group/#group-actions","text":"group . playAnimation ( key , startFrame ); group . toggleVisible (); group . setDepth ( value , step );","title":"Group actions"},{"location":"group/#activeinactive-game-objects","text":"Set inactive group . kill ( gameObject ); // gameObject.setActive(false) group . killAndHide ( gameObject ); // gameObject.setActive(false).setVisible(false) Amount of active game objects var activeCount = group . countActive (); or var activeCount = group . getTotalUsed (); Amount of active game objects var inactiveCount = group . countActive ( false ); Amount of free (maxSize - activeCount) game objects var freeCount = group . getTotalFree (); // group.maxSize - group.getTotalUsed() Get first active/inactive game object, Return null if no game object picked. var gameObject = group . getFirst ( active ); // active = true/false var gameObject = group . getFirstAlive (); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead (); // Equal to group.getFirst(false, ...) Create one if no game object picked. var gameObject = group . getFirst ( active , true , x , y , key , frame , visible ); // active = true/false var gameObject = group . getFirstAlive ( true , x , y , key , frame , visible ); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead ( true , x , y , key , frame , visible ); // Equal to group.getFirst(false, ...) var gameObject = group . get ( x , y , key , frame , visible ); // Equal to group.getFirst(false, true, ...) Use ( x , y , key , frame ) to create Image / Sprite game object. var newGameObject = new GameObjectClass ( x , y , key , frame );","title":"Active/inactive game objects"},{"location":"group/#create-game-objects","text":"var gameObjects = group . createFromConfig ( config ); var gameObjects = group . createMultiple ( config ); // config in array config { classType : this . classType , key : undefined , // Required frame : null , visible : true , active : true , repeat : 0 , // Create (1 + repeat) game objects createCallback : undefined , // Override this.createCallback if not undefined // Position setXY : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetXY(gameObjects, x, y, stepX, stepY) gridAlign : false , // { // width: -1, // height: -1, // cellWidth: 1, // cellHeight: 1, // position: Phaser.Display.Align.TOP_LEFT, // x: 0, // y: 0 // } // Actions.GridAlign(gameObjects, gridAlign) // Angle setRotation : { value : 0 , step : }, // Actions.SetRotation(gameObjects, value, step) // Scale setScale : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetScale(gameObjects, x, y, stepX, stepY) // Alpha setAlpha : { value : 0 , step : }, // Actions.SetAlpha(gameObjects, value, step) // Input hitArea : null , hitAreaCallback : null , // Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback) } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image","title":"Create game objects"},{"location":"groupactions/","text":"Introduction \u00b6 Set properties of game objects, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Call function \u00b6 Phaser . Actions . Call ( gameObjects , function ( gameObject ) { }, scope ); Set any property \u00b6 Phaser . Actions . PropertyValueSet ( gameObjects , key , value , step , index , direction ); gameObjects : An array of game objects. key : The property to be updated. value : The amount to be added to the property. step : This is added to the value amount, multiplied by the iteration counter. index : An optional offset to start searching from within the items array. direction : 1 : from beginning to end. -1 : from end to beginning. Phaser . Actions . PropertyValueInc ( gameObjects , key , value , step , index , direction ); Phaser . Actions . SmootherStep ( gameObjects , key , min , max , inc )); Phaser . Actions . SmoothStep ( gameObjects , key , min , max , inc )); Phaser . Actions . Spread ( gameObjects , key , min , max , inc )); Position \u00b6 Phaser . Actions . SetX ( gameObjects , value , step , index , direction ); Phaser . Actions . IncX ( gameObjects , value , step , index , direction ); Phaser . Actions . SetY ( gameObjects , value , step , index , direction ); Phaser . Actions . IncY ( gameObjects , value , step , index , direction ); Phaser . Actions . SetXY ( gameObjects , x , y , stepX , stepY , index , direction ); Phaser . Actions . IncXY ( gameObjects , x , y , stepX , stepY , index , direction ); Shift position \u00b6 Set the position of first game object to (x, y), others to the position of previous game object. Phaser . Actions . ShiftPosition ( gameObjects , x , y , direction , output ); Position on shape \u00b6 Grid align \u00b6 Phaser . Actions . GridAlign ( gameObjects , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , position : Phaser . Display . Align . TOP_LEFT , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Line \u00b6 Line : var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Phaser . Actions . PlaceOnLine ( gameObjects , line ); Phaser . Actions . RandomLine ( gameObjects , line ); Circle \u00b6 Circle : var circle = new Phaser . Geom . Circle ( x , y , radius ); Phaser . Actions . PlaceOnCircle ( gameObjects , circle , startAngle , endAngle ); Phaser . Actions . RandomCircle ( gameObjects , circle ); Ellipse \u00b6 Ellipse : var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Phaser . Actions . PlaceOnEllipse ( gameObjects , ellipse , startAngle , endAngle ); Triangle \u00b6 Triangle : var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Phaser . Actions . PlaceOnTriangle ( gameObjects , triangle , stepRate ); Phaser . Actions . RandomTriangle ( gameObjects , triangle ); Rectangle \u00b6 Rectangle : var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); Phaser . Actions . PlaceOnRectangle ( gameObjects , rect , shift ; Phaser . Actions . RandomRectangle ( gameObjects , rect ); Phaser . Actions . WrapInRectangle ( gameObjects , rect , padding ); Angle \u00b6 Phaser . Actions . Angle ( gameObjects , value , step , index , direction ); // value: angle in radians Phaser . Actions . Rotate ( gameObjects , value , step , index , direction ); // value: angle in degree Phaser . Actions . RotateAround ( gameObjects , point , angle ); // point: {x, y}, angle: angle in radians Phaser . Actions . RotateAroundDistance ( gameObjects , point , angle , distance ); // point: {x, y}, angle: angle in radians Visible \u00b6 Phaser . Actions . SetVisible ( gameObjects , value , index , direction ); Phaser . Actions . ToggleVisible ( gameObjects ); Alpha \u00b6 Phaser . Actions . SetAlpha ( gameObjects , value , step , index , direction ); Tint \u00b6 Phaser . Actions . setTint ( gameObjects , value ); //Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight); Origin \u00b6 Phaser . Actions . SetOrigin ( gameObjects , originX , originY , stepX , stepY , index , direction ); Scale \u00b6 Phaser . Actions . ScaleX ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleY ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleXY ( gameObjects , x , y , stepX , stepY , index , direction ); Depth \u00b6 Phaser . Actions . SetDepth ( gameObjects , value , step , index , direction ); Hit area \u00b6 Phaser . Actions . SetHitArea ( gameObjects , hitArea , hitAreaCallback ); Blend mode \u00b6 Phaser . Actions . SetBlendMode ( gameObjects , blendMode , index , direction ); blendMode : Phaser.BlendModes.SKIP_CHECK Phaser.BlendModes.NORMAL Phaser.BlendModes.ADD Phaser.BlendModes.MULTIPLY Phaser.BlendModes.SCREEN Phaser.BlendModes.OVERLAY Phaser.BlendModes.DARKEN Phaser.BlendModes.LIGHTEN Phaser.BlendModes.COLOR_DODGE Phaser.BlendModes.COLOR_BURN Phaser.BlendModes.HARD_LIGHT Phaser.BlendModes.SOFT_LIGHT Phaser.BlendModes.DIFFERENCE Phaser.BlendModes.EXCLUSION Phaser.BlendModes.HUE Phaser.BlendModes.SATURATION Phaser.BlendModes.COLOR Phaser.BlendModes.LUMINOSITY Play animation \u00b6 Phaser . Actions . PlayAnimation ( gameObjects , key , startFrame ); Shuffle \u00b6 Phaser . Actions . Shuffle ( gameObjects );","title":"Group actions"},{"location":"groupactions/#introduction","text":"Set properties of game objects, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"groupactions/#usage","text":"","title":"Usage"},{"location":"groupactions/#call-function","text":"Phaser . Actions . Call ( gameObjects , function ( gameObject ) { }, scope );","title":"Call function"},{"location":"groupactions/#set-any-property","text":"Phaser . Actions . PropertyValueSet ( gameObjects , key , value , step , index , direction ); gameObjects : An array of game objects. key : The property to be updated. value : The amount to be added to the property. step : This is added to the value amount, multiplied by the iteration counter. index : An optional offset to start searching from within the items array. direction : 1 : from beginning to end. -1 : from end to beginning. Phaser . Actions . PropertyValueInc ( gameObjects , key , value , step , index , direction ); Phaser . Actions . SmootherStep ( gameObjects , key , min , max , inc )); Phaser . Actions . SmoothStep ( gameObjects , key , min , max , inc )); Phaser . Actions . Spread ( gameObjects , key , min , max , inc ));","title":"Set any property"},{"location":"groupactions/#position","text":"Phaser . Actions . SetX ( gameObjects , value , step , index , direction ); Phaser . Actions . IncX ( gameObjects , value , step , index , direction ); Phaser . Actions . SetY ( gameObjects , value , step , index , direction ); Phaser . Actions . IncY ( gameObjects , value , step , index , direction ); Phaser . Actions . SetXY ( gameObjects , x , y , stepX , stepY , index , direction ); Phaser . Actions . IncXY ( gameObjects , x , y , stepX , stepY , index , direction );","title":"Position"},{"location":"groupactions/#shift-position","text":"Set the position of first game object to (x, y), others to the position of previous game object. Phaser . Actions . ShiftPosition ( gameObjects , x , y , direction , output );","title":"Shift position"},{"location":"groupactions/#position-on-shape","text":"","title":"Position on shape"},{"location":"groupactions/#grid-align","text":"Phaser . Actions . GridAlign ( gameObjects , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , position : Phaser . Display . Align . TOP_LEFT , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Grid align"},{"location":"groupactions/#line","text":"Line : var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Phaser . Actions . PlaceOnLine ( gameObjects , line ); Phaser . Actions . RandomLine ( gameObjects , line );","title":"Line"},{"location":"groupactions/#circle","text":"Circle : var circle = new Phaser . Geom . Circle ( x , y , radius ); Phaser . Actions . PlaceOnCircle ( gameObjects , circle , startAngle , endAngle ); Phaser . Actions . RandomCircle ( gameObjects , circle );","title":"Circle"},{"location":"groupactions/#ellipse","text":"Ellipse : var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Phaser . Actions . PlaceOnEllipse ( gameObjects , ellipse , startAngle , endAngle );","title":"Ellipse"},{"location":"groupactions/#triangle","text":"Triangle : var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Phaser . Actions . PlaceOnTriangle ( gameObjects , triangle , stepRate ); Phaser . Actions . RandomTriangle ( gameObjects , triangle );","title":"Triangle"},{"location":"groupactions/#rectangle","text":"Rectangle : var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); Phaser . Actions . PlaceOnRectangle ( gameObjects , rect , shift ; Phaser . Actions . RandomRectangle ( gameObjects , rect ); Phaser . Actions . WrapInRectangle ( gameObjects , rect , padding );","title":"Rectangle"},{"location":"groupactions/#angle","text":"Phaser . Actions . Angle ( gameObjects , value , step , index , direction ); // value: angle in radians Phaser . Actions . Rotate ( gameObjects , value , step , index , direction ); // value: angle in degree Phaser . Actions . RotateAround ( gameObjects , point , angle ); // point: {x, y}, angle: angle in radians Phaser . Actions . RotateAroundDistance ( gameObjects , point , angle , distance ); // point: {x, y}, angle: angle in radians","title":"Angle"},{"location":"groupactions/#visible","text":"Phaser . Actions . SetVisible ( gameObjects , value , index , direction ); Phaser . Actions . ToggleVisible ( gameObjects );","title":"Visible"},{"location":"groupactions/#alpha","text":"Phaser . Actions . SetAlpha ( gameObjects , value , step , index , direction );","title":"Alpha"},{"location":"groupactions/#tint","text":"Phaser . Actions . setTint ( gameObjects , value ); //Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight);","title":"Tint"},{"location":"groupactions/#origin","text":"Phaser . Actions . SetOrigin ( gameObjects , originX , originY , stepX , stepY , index , direction );","title":"Origin"},{"location":"groupactions/#scale","text":"Phaser . Actions . ScaleX ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleY ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleXY ( gameObjects , x , y , stepX , stepY , index , direction );","title":"Scale"},{"location":"groupactions/#depth","text":"Phaser . Actions . SetDepth ( gameObjects , value , step , index , direction );","title":"Depth"},{"location":"groupactions/#hit-area","text":"Phaser . Actions . SetHitArea ( gameObjects , hitArea , hitAreaCallback );","title":"Hit area"},{"location":"groupactions/#blend-mode","text":"Phaser . Actions . SetBlendMode ( gameObjects , blendMode , index , direction ); blendMode : Phaser.BlendModes.SKIP_CHECK Phaser.BlendModes.NORMAL Phaser.BlendModes.ADD Phaser.BlendModes.MULTIPLY Phaser.BlendModes.SCREEN Phaser.BlendModes.OVERLAY Phaser.BlendModes.DARKEN Phaser.BlendModes.LIGHTEN Phaser.BlendModes.COLOR_DODGE Phaser.BlendModes.COLOR_BURN Phaser.BlendModes.HARD_LIGHT Phaser.BlendModes.SOFT_LIGHT Phaser.BlendModes.DIFFERENCE Phaser.BlendModes.EXCLUSION Phaser.BlendModes.HUE Phaser.BlendModes.SATURATION Phaser.BlendModes.COLOR Phaser.BlendModes.LUMINOSITY","title":"Blend mode"},{"location":"groupactions/#play-animation","text":"Phaser . Actions . PlayAnimation ( gameObjects , key , startFrame );","title":"Play animation"},{"location":"groupactions/#shuffle","text":"Phaser . Actions . Shuffle ( gameObjects );","title":"Shuffle"},{"location":"image/","text":"Introduction \u00b6 Display of static images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add image object \u00b6 var image = scene . add . image ( x , y , key ); Add image from JSON var image = scene . make . image ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MyImage extends Phaser . GameObjects . Image { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , x , y , key ); Other properties \u00b6 See game object Create mask \u00b6 var mask = image . createBitmapMask (); See mask","title":"Image"},{"location":"image/#introduction","text":"Display of static images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"image/#usage","text":"","title":"Usage"},{"location":"image/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"image/#add-image-object","text":"var image = scene . add . image ( x , y , key ); Add image from JSON var image = scene . make . image ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add image object"},{"location":"image/#custom-class","text":"Define class class MyImage extends Phaser . GameObjects . Image { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , x , y , key );","title":"Custom class"},{"location":"image/#other-properties","text":"See game object","title":"Other properties"},{"location":"image/#create-mask","text":"var mask = image . createBitmapMask (); See mask","title":"Create mask"},{"location":"input/","text":"Introduction \u00b6 Input system of each scene, built-in object of phaser. Author: Richard Davey Usage \u00b6 Enable/disable \u00b6 scene . input . enabled = enabled ; // enabled: true/false","title":"Input"},{"location":"input/#introduction","text":"Input system of each scene, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"input/#usage","text":"","title":"Usage"},{"location":"input/#enabledisable","text":"scene . input . enabled = enabled ; // enabled: true/false","title":"Enable/disable"},{"location":"inputtext/","text":"Introduction \u00b6 Input DOM element . Author: Rex DOM Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexInputTextPlugin' , plugin : InputTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Add text object \u00b6 var inputText = scene . add . rexInputText ( x , y , width , height , config ); // var inputText = scene.add.rexInputText(x, y, config); // var inputText = scene.add.rexInputText(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , type : 'text' , // 'text'|'password'|'textarea' // Element properties id : undefined , text : undefined , placeholder : undefined , tooltip : undefined , readOnly : false , spellCheck : false , autoComplete : 'off' , // Style properties align : undefined , fontFamily : undefined , fontSize : undefined , color : '#ffffff' , backgroundColor : 'transparent' , borderColor : 'transparent' , outline : 'none' , } x , y : Position width , height : Size of element type : Type of element 'text' , 'password' , or 'textarea' Element properties id : id element property. text : value element property. placeholder : placeholder element property. tooltip : title element property. readOnly : readonly element property. spellCheck : spellcheck element property. autoComplete : autocomplete element property. Element style properties align : text-align style property. fontFamily : font-family style property. fontSize : font-size style property. color : color style property. backgroundColor : backgroundColor style property. borderColor : borderColor style property. outline : outline style property. Custom class \u00b6 Define class class MyText extends InputText { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var inputText = new MyText ( scene , x , y , width , height , config ); Text \u00b6 Get var text = inputText . text ; Set inputText . setText ( text ); // inputText.text = text; Select all text inputText . selectText (); Scroll to bottom inputText . scrollToBottom (); Style \u00b6 Get var value = inputText . getStyle ( key ); Set inputText . setStyle ( key , value ) Focus \u00b6 Focus inputText . setFocus (); Blur inputText . setBlur (); Resize \u00b6 inputText . resize ( width , height ); Events \u00b6 On text changed inputText . on ( 'textchange' , function ( inputText ){ }, scope ); On focus inputText . on ( 'focus' , function ( inputText ){ }, scope ); On blur inputText . on ( 'blur' , function ( inputText ){ }, scope ); On click, double click inputText . on ( 'click' , function ( inputText ){ }, scope ); inputText . on ( 'dblclick' , function ( inputText ){ }, scope ); Touch/mouse events on input text object won't be propagated to game canvas.","title":"Input text"},{"location":"inputtext/#introduction","text":"Input DOM element . Author: Rex DOM Game object","title":"Introduction"},{"location":"inputtext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"inputtext/#usage","text":"Sample code","title":"Usage"},{"location":"inputtext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexInputTextPlugin' , plugin : InputTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"inputtext/#add-text-object","text":"var inputText = scene . add . rexInputText ( x , y , width , height , config ); // var inputText = scene.add.rexInputText(x, y, config); // var inputText = scene.add.rexInputText(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , type : 'text' , // 'text'|'password'|'textarea' // Element properties id : undefined , text : undefined , placeholder : undefined , tooltip : undefined , readOnly : false , spellCheck : false , autoComplete : 'off' , // Style properties align : undefined , fontFamily : undefined , fontSize : undefined , color : '#ffffff' , backgroundColor : 'transparent' , borderColor : 'transparent' , outline : 'none' , } x , y : Position width , height : Size of element type : Type of element 'text' , 'password' , or 'textarea' Element properties id : id element property. text : value element property. placeholder : placeholder element property. tooltip : title element property. readOnly : readonly element property. spellCheck : spellcheck element property. autoComplete : autocomplete element property. Element style properties align : text-align style property. fontFamily : font-family style property. fontSize : font-size style property. color : color style property. backgroundColor : backgroundColor style property. borderColor : borderColor style property. outline : outline style property.","title":"Add text object"},{"location":"inputtext/#custom-class","text":"Define class class MyText extends InputText { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var inputText = new MyText ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"inputtext/#text","text":"Get var text = inputText . text ; Set inputText . setText ( text ); // inputText.text = text; Select all text inputText . selectText (); Scroll to bottom inputText . scrollToBottom ();","title":"Text"},{"location":"inputtext/#style","text":"Get var value = inputText . getStyle ( key ); Set inputText . setStyle ( key , value )","title":"Style"},{"location":"inputtext/#focus","text":"Focus inputText . setFocus (); Blur inputText . setBlur ();","title":"Focus"},{"location":"inputtext/#resize","text":"inputText . resize ( width , height );","title":"Resize"},{"location":"inputtext/#events","text":"On text changed inputText . on ( 'textchange' , function ( inputText ){ }, scope ); On focus inputText . on ( 'focus' , function ( inputText ){ }, scope ); On blur inputText . on ( 'blur' , function ( inputText ){ }, scope ); On click, double click inputText . on ( 'click' , function ( inputText ){ }, scope ); inputText . on ( 'dblclick' , function ( inputText ){ }, scope ); Touch/mouse events on input text object won't be propagated to game canvas.","title":"Events"},{"location":"interception/","text":"Introduction \u00b6 Predict the intersection position of two game objects with constant moving speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexInterception from './plugins/interception.js' ; Install global plugin \u00b6 Install plugin in configuration of game import InterceptionPlugin from './plugins/interception-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInterception' , plugin : InterceptionPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var interception = scene . plugins . get ( 'rexInterception' ). add ( gameObject , { // target: undefined, // enable: true }); target : Game object. enable : Set true to enable predicting. Target \u00b6 Set interception . setTarget ( gameObject ); or interception . target = gameObject ; Disalbe interception . setTarget ( undefined ); or interception . target = undefined ; Get var target = interception . target ; Enable predicting \u00b6 Enable interception . setEnable (); Disable, uses target position as predicted position interception . setEnable ( false ); Predicted result \u00b6 Predicted position var position = interception . predictedPosition ; // {x, y} Angle to predicted position var rotation = interception . predictedAngle ; // Angle in radian","title":"Interception"},{"location":"interception/#introduction","text":"Predict the intersection position of two game objects with constant moving speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"interception/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"interception/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"interception/#import-class","text":"import rexInterception from './plugins/interception.js' ;","title":"Import class"},{"location":"interception/#install-global-plugin","text":"Install plugin in configuration of game import InterceptionPlugin from './plugins/interception-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInterception' , plugin : InterceptionPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"interception/#create-instance","text":"var interception = scene . plugins . get ( 'rexInterception' ). add ( gameObject , { // target: undefined, // enable: true }); target : Game object. enable : Set true to enable predicting.","title":"Create instance"},{"location":"interception/#target","text":"Set interception . setTarget ( gameObject ); or interception . target = gameObject ; Disalbe interception . setTarget ( undefined ); or interception . target = undefined ; Get var target = interception . target ;","title":"Target"},{"location":"interception/#enable-predicting","text":"Enable interception . setEnable (); Disable, uses target position as predicted position interception . setEnable ( false );","title":"Enable predicting"},{"location":"interception/#predicted-result","text":"Predicted position var position = interception . predictedPosition ; // {x, y} Angle to predicted position var rotation = interception . predictedAngle ; // Angle in radian","title":"Predicted result"},{"location":"interpolation/","text":"Introduction \u00b6 Calculates interpolation value over t (0~1), built-in method of phaser. Author: Richard Davey Usage \u00b6 Linear interpolation (lerp) var result = Phaser . Math . Linear ( p0 , p1 , t ); Smooth interpolation var result = Phaser . Math . Interpolation . SmoothStep ( t , min , max ); t : 0~1 Smoother interpolation var result = Phaser . Math . Interpolation . SmootherStep ( t , min , max ); t : 0~1 Quadratic bezier interpolation var result = Phaser . Math . Interpolation . QuadraticBezier ( t , p0 , p1 , p2 ); t : 0~1 p0 : The start point. p1 : The control point. p2 : The end point. Cubic bezier interpolation var result = Phaser . Math . Interpolation . CubicBezier ( t , p0 , p1 , p2 , p3 ); t : 0~1 p0 : The start point. p1 : The first control point. p2 : The second control point. p3 : The end point.","title":"Interpolation"},{"location":"interpolation/#introduction","text":"Calculates interpolation value over t (0~1), built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"interpolation/#usage","text":"Linear interpolation (lerp) var result = Phaser . Math . Linear ( p0 , p1 , t ); Smooth interpolation var result = Phaser . Math . Interpolation . SmoothStep ( t , min , max ); t : 0~1 Smoother interpolation var result = Phaser . Math . Interpolation . SmootherStep ( t , min , max ); t : 0~1 Quadratic bezier interpolation var result = Phaser . Math . Interpolation . QuadraticBezier ( t , p0 , p1 , p2 ); t : 0~1 p0 : The start point. p1 : The control point. p2 : The end point. Cubic bezier interpolation var result = Phaser . Math . Interpolation . CubicBezier ( t , p0 , p1 , p2 , p3 ); t : 0~1 p0 : The start point. p1 : The first control point. p2 : The second control point. p3 : The end point.","title":"Usage"},{"location":"keyboardcombo/","text":"Introduction \u00b6 Combo-keys events. Author: Richard Davey Usage \u00b6 Create combo var keyCombo = scene . input . keyboard . createCombo ( keys , { // resetOnWrongKey: true, // maxKeyDelay: 0, // resetOnMatch: false, // deleteOnMatch: false, }); keys : Array of keyCodes In strings. ex: ['up', 'up', 'down', 'down'] , or ['UP', 'UP', 'DOWN', 'DOWN'] In key map . ex: [Phaser.Input.Keyboard.KeyCodes.UP, ... ] In numbers. ex: [38, 38, 40, 40] resetOnWrongKey : Set true to reset the combo when press the wrong key. maxKeyDelay : The max delay in ms between each key press. Set 0 to disable this feature. resetOnMatch : Set true to reset the combo when previously matched. deleteOnMatch : Set true to delete this combo when matched. Listen combo matching event scene . input . keyboard . on ( 'keycombomatch' , function ( keyCombo , keyboardEvent ) { /* ... */ });","title":"Combo events"},{"location":"keyboardcombo/#introduction","text":"Combo-keys events. Author: Richard Davey","title":"Introduction"},{"location":"keyboardcombo/#usage","text":"Create combo var keyCombo = scene . input . keyboard . createCombo ( keys , { // resetOnWrongKey: true, // maxKeyDelay: 0, // resetOnMatch: false, // deleteOnMatch: false, }); keys : Array of keyCodes In strings. ex: ['up', 'up', 'down', 'down'] , or ['UP', 'UP', 'DOWN', 'DOWN'] In key map . ex: [Phaser.Input.Keyboard.KeyCodes.UP, ... ] In numbers. ex: [38, 38, 40, 40] resetOnWrongKey : Set true to reset the combo when press the wrong key. maxKeyDelay : The max delay in ms between each key press. Set 0 to disable this feature. resetOnMatch : Set true to reset the combo when previously matched. deleteOnMatch : Set true to delete this combo when matched. Listen combo matching event scene . input . keyboard . on ( 'keycombomatch' , function ( keyCombo , keyboardEvent ) { /* ... */ });","title":"Usage"},{"location":"keyboardevents/","text":"Introduction \u00b6 Built-in keyboard events of phaser. Author: Richard Davey Usage \u00b6 Quick start \u00b6 Is key-down/is key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Key is down after a duration var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = scene . input . keyboard . checkDown ( keyObj , duration ); On key-down/on key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); or scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); Any key-down/any key-up scene . input . keyboard . on ( 'keydown' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( event ) { /* ... */ }); event : KeyboardEvent event.code : 'Key' + 'W' Key object \u00b6 Get key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // see `Key map` section // var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); Get key objects var keys = scene . input . keyboard . addKeys ( 'W,S,A,D' ); // keys.W, keys.S, keys.A, keys.D or var keys = scene . input . keyboard . addKeys ({ up : 'up' , down : 'down' , left : 'left' , right : 'right' }); // keys.up, keys.down, keys.left, keys.right Remove key object scene . input . keyboard . removeKey ( 'W' ); // scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W); Key-down/key-up state var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Duration of key-down var duration = keyObj . getDuration (); // ms Enable/disable keyObj . enabled = enabled ; // Set false to disable key event Key object of cursorkeys \u00b6 Get key state object var cursorKeys = scene . input . keyboard . createCursorKeys (); Get key state var isUpDown = cursorKeys . up . isDown ; var isDownDown = cursorKeys . down . isDown ; var isLeftDown = cursorKeys . left . isDown ; var isRightDown = cursorKeys . right . isDown ; var isSpaceDown = cursorKeys . space . isDown ; var isShiftDown = cursorKeys . shift . isDown ; Order of key-down/key-up events \u00b6 Key-down/key-up events of key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. On key-down/on key-up scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Any key-down/on key-up scene . input . keyboard . on ( 'keydown' , function ( eventName , event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( eventName , event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Destroy key object \u00b6 keyObj . destroy (); Key map \u00b6 A ~ Z F1 ~ F12 BACKSPACE TAB ENTER SHIFT CTRL . ALT PAUSE CAPS_LOCK ESC SPACE PAGE_UP , PAGE_DOWN END , HOME LEFT , UP , RIGHT , DOWN PRINT_SCREEN INSERT , DELETE ZERO , ONE , TWO , THREE , FOUR , FIVE , SIX , SEVEN , EIGHT , NINE NUMPAD_ZERO , NUMPAD_ONE , NUMPAD_TWO , NUMPAD_THREE , NUMPAD_FOUR , NUMPAD_FIVE , NUMPAD_SIX , NUMPAD_SEVEN , NUMPAD_EIGHT , NUMPAD_NINE OPEN_BRACKET , CLOSED_BRACKET SEMICOLON_FIREFOX , COLON , COMMA_FIREFOX_WINDOWS , COMMA_FIREFOX , BRACKET_RIGHT_FIREFOX , BRACKET_LEFT_FIREFOX","title":"Keyboard events"},{"location":"keyboardevents/#introduction","text":"Built-in keyboard events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"keyboardevents/#usage","text":"","title":"Usage"},{"location":"keyboardevents/#quick-start","text":"Is key-down/is key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Key is down after a duration var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = scene . input . keyboard . checkDown ( keyObj , duration ); On key-down/on key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); or scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); Any key-down/any key-up scene . input . keyboard . on ( 'keydown' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( event ) { /* ... */ }); event : KeyboardEvent event.code : 'Key' + 'W'","title":"Quick start"},{"location":"keyboardevents/#key-object","text":"Get key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // see `Key map` section // var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); Get key objects var keys = scene . input . keyboard . addKeys ( 'W,S,A,D' ); // keys.W, keys.S, keys.A, keys.D or var keys = scene . input . keyboard . addKeys ({ up : 'up' , down : 'down' , left : 'left' , right : 'right' }); // keys.up, keys.down, keys.left, keys.right Remove key object scene . input . keyboard . removeKey ( 'W' ); // scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W); Key-down/key-up state var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Duration of key-down var duration = keyObj . getDuration (); // ms Enable/disable keyObj . enabled = enabled ; // Set false to disable key event","title":"Key object"},{"location":"keyboardevents/#key-object-of-cursorkeys","text":"Get key state object var cursorKeys = scene . input . keyboard . createCursorKeys (); Get key state var isUpDown = cursorKeys . up . isDown ; var isDownDown = cursorKeys . down . isDown ; var isLeftDown = cursorKeys . left . isDown ; var isRightDown = cursorKeys . right . isDown ; var isSpaceDown = cursorKeys . space . isDown ; var isShiftDown = cursorKeys . shift . isDown ;","title":"Key object of cursorkeys"},{"location":"keyboardevents/#order-of-key-downkey-up-events","text":"Key-down/key-up events of key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. On key-down/on key-up scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Any key-down/on key-up scene . input . keyboard . on ( 'keydown' , function ( eventName , event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( eventName , event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene.","title":"Order of key-down/key-up events"},{"location":"keyboardevents/#destroy-key-object","text":"keyObj . destroy ();","title":"Destroy key object"},{"location":"keyboardevents/#key-map","text":"A ~ Z F1 ~ F12 BACKSPACE TAB ENTER SHIFT CTRL . ALT PAUSE CAPS_LOCK ESC SPACE PAGE_UP , PAGE_DOWN END , HOME LEFT , UP , RIGHT , DOWN PRINT_SCREEN INSERT , DELETE ZERO , ONE , TWO , THREE , FOUR , FIVE , SIX , SEVEN , EIGHT , NINE NUMPAD_ZERO , NUMPAD_ONE , NUMPAD_TWO , NUMPAD_THREE , NUMPAD_FOUR , NUMPAD_FIVE , NUMPAD_SIX , NUMPAD_SEVEN , NUMPAD_EIGHT , NUMPAD_NINE OPEN_BRACKET , CLOSED_BRACKET SEMICOLON_FIREFOX , COLON , COMMA_FIREFOX_WINDOWS , COMMA_FIREFOX , BRACKET_RIGHT_FIREFOX , BRACKET_LEFT_FIREFOX","title":"Key map"},{"location":"lifetime/","text":"Introduction \u00b6 Destroy game object when time-out. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexLifeTime from './plugins/lifeTime.js' ; Install global plugin \u00b6 Install plugin in configuration of game import LifeTimePlugin from './plugins/lifeTime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLifeTime' , plugin : LifeTimePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var lifeTime = scene . plugins . get ( 'rexLifeTime' ). add ( gameObject , { lifeTime : 1000 , // destroy: true, // start: true }); lifeTime : Life time in ms. destroy : Set true to destroy game object when time-out. start : Set true to starting counting now. Events \u00b6 On time-out lifeTime . on ( 'complete' , function ( gameObject , lifeTime ){}); // lifeTime.once('complete', function(gameObject, lifeTime){}); Life-time \u00b6 Set lifeTime . setLifeTime ( time ); Add to lifeTime . addToLifeTime ( time ); Get life-time var time = lifeTime . lifeTime ; Get remainder time var time = lifeTime . remainder ; Is alive var isAlive = lifeTime . isAlive ; Start/Stop/Pause/Resume \u00b6 Start lifeTime . start (); Stop lifeTime . stop (); Pause lifeTime . pause (); Resume lifeTime . resume ();","title":"Life time"},{"location":"lifetime/#introduction","text":"Destroy game object when time-out. Author: Rex Behavior of game object","title":"Introduction"},{"location":"lifetime/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"lifetime/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"lifetime/#import-class","text":"import rexLifeTime from './plugins/lifeTime.js' ;","title":"Import class"},{"location":"lifetime/#install-global-plugin","text":"Install plugin in configuration of game import LifeTimePlugin from './plugins/lifeTime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLifeTime' , plugin : LifeTimePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"lifetime/#create-instance","text":"var lifeTime = scene . plugins . get ( 'rexLifeTime' ). add ( gameObject , { lifeTime : 1000 , // destroy: true, // start: true }); lifeTime : Life time in ms. destroy : Set true to destroy game object when time-out. start : Set true to starting counting now.","title":"Create instance"},{"location":"lifetime/#events","text":"On time-out lifeTime . on ( 'complete' , function ( gameObject , lifeTime ){}); // lifeTime.once('complete', function(gameObject, lifeTime){});","title":"Events"},{"location":"lifetime/#life-time","text":"Set lifeTime . setLifeTime ( time ); Add to lifeTime . addToLifeTime ( time ); Get life-time var time = lifeTime . lifeTime ; Get remainder time var time = lifeTime . remainder ; Is alive var isAlive = lifeTime . isAlive ;","title":"Life-time"},{"location":"lifetime/#startstoppauseresume","text":"Start lifeTime . start (); Stop lifeTime . stop (); Pause lifeTime . pause (); Resume lifeTime . resume ();","title":"Start/Stop/Pause/Resume"},{"location":"line/","text":"Introduction \u00b6 Draw a line with start/end/body textures. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexLinePlugin' , plugin : LinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var line = scene . add . rexLine ({ start : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 0.5 , }, // start: key, // start: undefined, end : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 1 , }, // end: key, // end: undefined, body : { key : undefined , frame : undefined , extendMode : 1 , width : undefined , }, // body: key, }); start : Configuration of line-start. Or texture key of line-start. start.x , start.y : Position of line-start. start.key , start.frame : Texrure of line-start. start.origin : Origin of line-start. Default is 0.5 . end : Configuration of line-end. Or texture key of line-end. end.x , end.y : Position of line-end. end.key , end.frame : Texrure of line-end. end.origin : Origin of line-end. Default is 1 . body : Configuration of line-body. Or texture key of line-body. body.key , body.frame : Texrure of line-body. Line-body will be drawn repeatedly. body.extendMode : Extend mode of line-body. 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. (Default value) body.width : Line width. Custom class \u00b6 Define class class MyLine extends Line { constructor ( scene , config ) { super ( scene , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , config ); Position of line-start/line-end \u00b6 Line start Get var x0 = line . x0 ; var y0 = line . y0 ; Set line . setLineStartPosition ( x , y ); or line . x0 = x ; line . y0 = y ; Line end Get var x1 = line . x1 ; var y1 = line . y1 ; Set line . setLineEndPosition ( x , y ); or line . x1 = x ; line . y1 = y ; Set textures \u00b6 Line-start Set line-start texture line . setLineStartTexture ( key , frameName ); Set origin of line-start texture line . setLineStartOrigin ( origin ); origin : 0 ~ 1 . Default is 0 , to align the left side of line-start texture with start position. Line-end Set line-end texture line . setLineEndTexture ( key , frameName ); Set origin of line-end texture line . setLineEndOrigin ( origin ); origin : 0 ~ 1 . Default is 1 , to align the right side of line-end texture with end position. Line-body Set line-body texture line . setLineBodyTexture ( key , frameName ); Set line-body extend mode line . setLineBodyExtendMode ( mode ); mode : 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. Set line-body width line . setLineBodyWidth ( width );","title":"Line"},{"location":"line/#introduction","text":"Draw a line with start/end/body textures. Author: Rex Game object","title":"Introduction"},{"location":"line/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"line/#usage","text":"Sample code","title":"Usage"},{"location":"line/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexLinePlugin' , plugin : LinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"line/#create-instance","text":"var line = scene . add . rexLine ({ start : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 0.5 , }, // start: key, // start: undefined, end : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 1 , }, // end: key, // end: undefined, body : { key : undefined , frame : undefined , extendMode : 1 , width : undefined , }, // body: key, }); start : Configuration of line-start. Or texture key of line-start. start.x , start.y : Position of line-start. start.key , start.frame : Texrure of line-start. start.origin : Origin of line-start. Default is 0.5 . end : Configuration of line-end. Or texture key of line-end. end.x , end.y : Position of line-end. end.key , end.frame : Texrure of line-end. end.origin : Origin of line-end. Default is 1 . body : Configuration of line-body. Or texture key of line-body. body.key , body.frame : Texrure of line-body. Line-body will be drawn repeatedly. body.extendMode : Extend mode of line-body. 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. (Default value) body.width : Line width.","title":"Create instance"},{"location":"line/#custom-class","text":"Define class class MyLine extends Line { constructor ( scene , config ) { super ( scene , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , config );","title":"Custom class"},{"location":"line/#position-of-line-startline-end","text":"Line start Get var x0 = line . x0 ; var y0 = line . y0 ; Set line . setLineStartPosition ( x , y ); or line . x0 = x ; line . y0 = y ; Line end Get var x1 = line . x1 ; var y1 = line . y1 ; Set line . setLineEndPosition ( x , y ); or line . x1 = x ; line . y1 = y ;","title":"Position of line-start/line-end"},{"location":"line/#set-textures","text":"Line-start Set line-start texture line . setLineStartTexture ( key , frameName ); Set origin of line-start texture line . setLineStartOrigin ( origin ); origin : 0 ~ 1 . Default is 0 , to align the left side of line-start texture with start position. Line-end Set line-end texture line . setLineEndTexture ( key , frameName ); Set origin of line-end texture line . setLineEndOrigin ( origin ); origin : 0 ~ 1 . Default is 1 , to align the right side of line-end texture with end position. Line-body Set line-body texture line . setLineBodyTexture ( key , frameName ); Set line-body extend mode line . setLineBodyExtendMode ( mode ); mode : 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. Set line-body width line . setLineBodyWidth ( width );","title":"Set textures"},{"location":"loader/","text":"Introduction \u00b6 Load assets, built-in object of phaser. Author: Richard Davey Usage \u00b6 Loading in preload stage \u00b6 scene . load . image ( key , url ); // scene.load.image(config); // config: {key, url} Loader in preload stage will start loading automatically by scene. Loading after preload stage \u00b6 scene . load . image ( key , url ); // add task // scene.load.image(config); // config: {key, url} scene . load . once ( 'complete' , callback ); // add callback of 'complete' event scene . load . start (); // start loading Set path \u00b6 scene . loader . setPath ( path ) Events \u00b6 Start loading scene . load . once ( 'start' , function (){}); Loading progressing scene . load . on ( 'progress' , function ( progress ){}); Loading a file object successful scene . load . once ( 'load' , function ( fileObj ){}); Loading a file object failed scene . load . once ( 'loaderror' , function ( fileObj ){}); All loading completed scene . load . once ( 'complete' , function (){}); Status of loader \u00b6 Ready to start loading var isReady = scene . load . isReady (); Is loading var isLoading = scene . load . isLoading (); File types \u00b6 Image \u00b6 Image scene . load . image ( key , url ); SVG scene . load . svg ( key , url ); // scene.load.svg(key, url, {width, height}); // scene.load.svg(key, url, {scale}); Html texture scene . load . htmlTexture ( key , url , width , height ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Sprite sheet \u00b6 scene . load . spritesheet ( key , url , { // frameWidth: frameWidth, // frameHeight: frameHeight, // startFrame: startFrame, // endFrame: endFrame, // margin: margin, // spacing: spacing }); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Texture atlas \u00b6 scene . load . atlas ( key , textureURL , atlasURL ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Multi file texture atlas \u00b6 scene . load . multiatlas ( key , textureURLs , atlasURLs ); Unity texture atlas \u00b6 scene . load . unityAtlas ( key , textureURL , atlasURL ); Animation \u00b6 scene . load . animation ( key , url ); Audio \u00b6 scene . load . audio ( key , urls ); Get data from cache var cache = scene . cache . audio ; var data = cache . get ( key ); Audio sprite \u00b6 scene . load . audioSprite ( key , urls , json , config ); Video \u00b6 scene . load . video ( key , url , loadEvent , asBlob , noAudio ); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. asBlob : Load the video as a data blob, or via the Video element? Default value is false . noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false . Bitmap font \u00b6 scene . load . bitmapFont ( key , textureURL , xmlURL ); Get data from cache var cache = scene . cache . bitmapFont ; var data = cache . get ( key ); Tile map \u00b6 scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Get data from cache var cache = scene . cache . tilemap ; var data = cache . get ( key ); Text \u00b6 scene . load . text ( key , url ); Get data from cache var cache = scene . cache . text ; var data = cache . get ( key ); JSON \u00b6 scene . load . json ( key , url ); Get data from cache var cache = scene . cache . json ; var data = cache . get ( key ); XML \u00b6 scene . load . xml ( key , url ); Get data from cache var cache = scene . cache . xml ; var data = cache . get ( key ); HTML \u00b6 scene . load . html ( key , url ); Get data from cache var cache = scene . cache . html ; var data = cache . get ( key ); CSS \u00b6 scene . load . css ( key , url ); Get data from cache var cache = scene . cache . css ; var data = cache . get ( key ); Scene \u00b6 scene . load . sceneFile ( key , url ); The key matches the class name in the JavaScript file. Script \u00b6 scene . load . script ( key , url ); Scripts \u00b6 scene . load . scripts ( key , urlArray ); Add scripts in the exact order of urlArray . GLSL \u00b6 scene . load . glsl ( key , url ); Get data from cache var cache = scene . cache . shader ; var data = cache . get ( key ); A glsl file can contain multiple shaders, all separated by a frontmatter block. --- name : type : --- void main ( void ) { } Binary \u00b6 scene . load . binary ( key , url , dataType ); // dataType: Uint8Array // scene.load.binary(config); // config: {key, url, dataType} Get data from cache var cache = scene . cache . binary ; var data = cache . get ( key ); Plugin \u00b6 scene . load . plugin ( key , url , true ); // start plugin when loaded url : File url or class instance. Scene plugin \u00b6 scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance. File pack \u00b6 Load files in JSON format. scene . load . pack ( key , url , dataKey ); JSON pack file: { 'dataKey' : { // \"prefix\": \"...\", // optional, extend key by prefix // \"path\": \"...\", // optional, extend url by path // \"defaultType\": \"image\", // optional, default file type 'files' : [ { 'type' : 'image' , 'key' : '...' , 'url' : '...' }, { 'type' : 'image' , 'key' : '...' , 'url' : '...' } // ... ] }, 'node0' : { 'node1' : { 'node2' : { 'files' : [ // .... ] } } } // dataKey: 'node0.node1.node2' } File type: animationJSON audio binary glsl html htmlTexture image json script spritesheet svg text tilemapCSV tilemapJSON xml Release data \u00b6 var cache = scene . cache . text ; cache . remove ( key ); Data in cache \u00b6 var cache = scene . cache . text ; var hasData = cache . has ( key ); Replace \u00b6 Remove key . Load file again.","title":"Loader"},{"location":"loader/#introduction","text":"Load assets, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"loader/#usage","text":"","title":"Usage"},{"location":"loader/#loading-in-preload-stage","text":"scene . load . image ( key , url ); // scene.load.image(config); // config: {key, url} Loader in preload stage will start loading automatically by scene.","title":"Loading in preload stage"},{"location":"loader/#loading-after-preload-stage","text":"scene . load . image ( key , url ); // add task // scene.load.image(config); // config: {key, url} scene . load . once ( 'complete' , callback ); // add callback of 'complete' event scene . load . start (); // start loading","title":"Loading after preload stage"},{"location":"loader/#set-path","text":"scene . loader . setPath ( path )","title":"Set path"},{"location":"loader/#events","text":"Start loading scene . load . once ( 'start' , function (){}); Loading progressing scene . load . on ( 'progress' , function ( progress ){}); Loading a file object successful scene . load . once ( 'load' , function ( fileObj ){}); Loading a file object failed scene . load . once ( 'loaderror' , function ( fileObj ){}); All loading completed scene . load . once ( 'complete' , function (){});","title":"Events"},{"location":"loader/#status-of-loader","text":"Ready to start loading var isReady = scene . load . isReady (); Is loading var isLoading = scene . load . isLoading ();","title":"Status of loader"},{"location":"loader/#file-types","text":"","title":"File types"},{"location":"loader/#image","text":"Image scene . load . image ( key , url ); SVG scene . load . svg ( key , url ); // scene.load.svg(key, url, {width, height}); // scene.load.svg(key, url, {scale}); Html texture scene . load . htmlTexture ( key , url , width , height ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Image"},{"location":"loader/#sprite-sheet","text":"scene . load . spritesheet ( key , url , { // frameWidth: frameWidth, // frameHeight: frameHeight, // startFrame: startFrame, // endFrame: endFrame, // margin: margin, // spacing: spacing }); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Sprite sheet"},{"location":"loader/#texture-atlas","text":"scene . load . atlas ( key , textureURL , atlasURL ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Texture atlas"},{"location":"loader/#multi-file-texture-atlas","text":"scene . load . multiatlas ( key , textureURLs , atlasURLs );","title":"Multi file texture atlas"},{"location":"loader/#unity-texture-atlas","text":"scene . load . unityAtlas ( key , textureURL , atlasURL );","title":"Unity texture atlas"},{"location":"loader/#animation","text":"scene . load . animation ( key , url );","title":"Animation"},{"location":"loader/#audio","text":"scene . load . audio ( key , urls ); Get data from cache var cache = scene . cache . audio ; var data = cache . get ( key );","title":"Audio"},{"location":"loader/#audio-sprite","text":"scene . load . audioSprite ( key , urls , json , config );","title":"Audio sprite"},{"location":"loader/#video","text":"scene . load . video ( key , url , loadEvent , asBlob , noAudio ); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. asBlob : Load the video as a data blob, or via the Video element? Default value is false . noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false .","title":"Video"},{"location":"loader/#bitmap-font","text":"scene . load . bitmapFont ( key , textureURL , xmlURL ); Get data from cache var cache = scene . cache . bitmapFont ; var data = cache . get ( key );","title":"Bitmap font"},{"location":"loader/#tile-map","text":"scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Get data from cache var cache = scene . cache . tilemap ; var data = cache . get ( key );","title":"Tile map"},{"location":"loader/#text","text":"scene . load . text ( key , url ); Get data from cache var cache = scene . cache . text ; var data = cache . get ( key );","title":"Text"},{"location":"loader/#json","text":"scene . load . json ( key , url ); Get data from cache var cache = scene . cache . json ; var data = cache . get ( key );","title":"JSON"},{"location":"loader/#xml","text":"scene . load . xml ( key , url ); Get data from cache var cache = scene . cache . xml ; var data = cache . get ( key );","title":"XML"},{"location":"loader/#html","text":"scene . load . html ( key , url ); Get data from cache var cache = scene . cache . html ; var data = cache . get ( key );","title":"HTML"},{"location":"loader/#css","text":"scene . load . css ( key , url ); Get data from cache var cache = scene . cache . css ; var data = cache . get ( key );","title":"CSS"},{"location":"loader/#scene","text":"scene . load . sceneFile ( key , url ); The key matches the class name in the JavaScript file.","title":"Scene"},{"location":"loader/#script","text":"scene . load . script ( key , url );","title":"Script"},{"location":"loader/#scripts","text":"scene . load . scripts ( key , urlArray ); Add scripts in the exact order of urlArray .","title":"Scripts"},{"location":"loader/#glsl","text":"scene . load . glsl ( key , url ); Get data from cache var cache = scene . cache . shader ; var data = cache . get ( key ); A glsl file can contain multiple shaders, all separated by a frontmatter block. --- name : type : --- void main ( void ) { }","title":"GLSL"},{"location":"loader/#binary","text":"scene . load . binary ( key , url , dataType ); // dataType: Uint8Array // scene.load.binary(config); // config: {key, url, dataType} Get data from cache var cache = scene . cache . binary ; var data = cache . get ( key );","title":"Binary"},{"location":"loader/#plugin","text":"scene . load . plugin ( key , url , true ); // start plugin when loaded url : File url or class instance.","title":"Plugin"},{"location":"loader/#scene-plugin","text":"scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance.","title":"Scene plugin"},{"location":"loader/#file-pack","text":"Load files in JSON format. scene . load . pack ( key , url , dataKey ); JSON pack file: { 'dataKey' : { // \"prefix\": \"...\", // optional, extend key by prefix // \"path\": \"...\", // optional, extend url by path // \"defaultType\": \"image\", // optional, default file type 'files' : [ { 'type' : 'image' , 'key' : '...' , 'url' : '...' }, { 'type' : 'image' , 'key' : '...' , 'url' : '...' } // ... ] }, 'node0' : { 'node1' : { 'node2' : { 'files' : [ // .... ] } } } // dataKey: 'node0.node1.node2' } File type: animationJSON audio binary glsl html htmlTexture image json script spritesheet svg text tilemapCSV tilemapJSON xml","title":"File pack"},{"location":"loader/#release-data","text":"var cache = scene . cache . text ; cache . remove ( key );","title":"Release data"},{"location":"loader/#data-in-cache","text":"var cache = scene . cache . text ; var hasData = cache . has ( key );","title":"Data in cache"},{"location":"loader/#replace","text":"Remove key . Load file again.","title":"Replace"},{"location":"localforage/","text":"Introduction \u00b6 Offline storage, improved. Author: Mozilla Usage \u00b6 Official document Sample code By default, LocalForage selects backend drivers for the datastore in this order: IndexedDB WebSQL localStorage Save data \u00b6 Callback localforage . setItem ( key , value , function (){ /* ... */ }); Promise localforage . setItem ( key , value ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ }); Read data \u00b6 Callback localforage . getItem ( key , function ( err , value ){ /* ... */ }); Promise localforage . getItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ }); Remove data \u00b6 Callback localforage . removeItem ( key , function (){ /* ... */ }); Promise localforage . removeItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"LocalForage"},{"location":"localforage/#introduction","text":"Offline storage, improved. Author: Mozilla","title":"Introduction"},{"location":"localforage/#usage","text":"Official document Sample code By default, LocalForage selects backend drivers for the datastore in this order: IndexedDB WebSQL localStorage","title":"Usage"},{"location":"localforage/#save-data","text":"Callback localforage . setItem ( key , value , function (){ /* ... */ }); Promise localforage . setItem ( key , value ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Save data"},{"location":"localforage/#read-data","text":"Callback localforage . getItem ( key , function ( err , value ){ /* ... */ }); Promise localforage . getItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Read data"},{"location":"localforage/#remove-data","text":"Callback localforage . removeItem ( key , function (){ /* ... */ }); Promise localforage . removeItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Remove data"},{"location":"localstorage/","text":"Introduction \u00b6 Store small data in key-value pairs locally within the user's browser. Author: Built-in javascript function Usage \u00b6 Reference Sample code Save data \u00b6 localStorage . setItem ( key , value ); Read data \u00b6 var value = localStorage . getItem ( key ); Remove data \u00b6 localStorage . removeItem ( key );","title":"LocalStorage"},{"location":"localstorage/#introduction","text":"Store small data in key-value pairs locally within the user's browser. Author: Built-in javascript function","title":"Introduction"},{"location":"localstorage/#usage","text":"Reference Sample code","title":"Usage"},{"location":"localstorage/#save-data","text":"localStorage . setItem ( key , value );","title":"Save data"},{"location":"localstorage/#read-data","text":"var value = localStorage . getItem ( key );","title":"Read data"},{"location":"localstorage/#remove-data","text":"localStorage . removeItem ( key );","title":"Remove data"},{"location":"lokijs/","text":"Introduction \u00b6 In-memory JavaScript Datastore with Persistence. Reference API Usage \u00b6 Sample code Create database \u00b6 var db = new loki (); // var db = new loki('loki.json'); // load database from file Create collection \u00b6 var collection = db . addCollection ( name ); Insert document \u00b6 var docInColl = collection . insert ( doc ); // doc: an object Get Id var id = docInColl . $loki ; Insert documents \u00b6 collection . insert ( docArray ); // documents in array Query \u00b6 Get document by id \u00b6 var doc = collection . get ( id ); // id: `$loki` Filter documents \u00b6 $eq : filter for document(s) with property of (strict) equality var docArray = collection . find ({ key : value }); // var docArray = collection.find({key: {'$eq': value}); $aeq : filter for document(s) with property of abstract (loose) equality var docArray = collection . find ({ key : { '$aeq' : value }); For example var results = coll . find ({ age : { '$aeq' : 20 }}); // age == '20' or age == 20 $ne : filter for document(s) with property not equal to provided value var docArray = collection . find ({ key : { '$ne' : value }); $gt : filter for document(s) with property greater than provided value var docArray = collection . find ({ key : { '$gt' : value }); $gte : filter for document(s) with property greater or equal to provided value var docArray = collection . find ({ key : { '$gte' : value }); $lt : filter for document(s) with property less than provided value var docArray = collection . find ({ key : { '$lt' : value }); $lte : filter for document(s) with property less than or equal to provided value var docArray = collection . find ({ key : { '$lte' : value }); $between : filter for documents(s) with property between provided values var docArray = collection . find ({ key : { '$between' : [ value0 , value1 ]}); $in : filter for document(s) with property matching any of the provided array values var docArray = collection . find ({ key : { '$in' : [ value0 , value1 , ...]}); Your property should not be an array but your compare values should be. $nin : filter for document(s) with property not matching any of the provided array values var docArray = collection . find ({ key : { '$nin' : [ value0 , value1 , ...]}); $contains : filter for document(s) with property containing the provided value var docArray = collection . find ({ key : { '$contains' : value }); Use this when your property contains an array but your compare value is not an array $containsAny : filter for document(s) with property containing any of the provided values var docArray = collection . find ({ key : { '$containsAny' : [ value0 , value1 , ...]}); $containsNone : filter for documents(s) with property containing none of the provided values var docArray = collection . find ({ key : { '$containsNone' : [ value0 , value1 , ...]}); $regex : filter for document(s) with property matching provided regular expression var docArray = collection . find ({ key : { '$regex' : pattern }); // var docArray = collection.find({key: {'$regex': [pattern, options]}); For example var docArray = collection . find ({ key : { '$regex' : 'din' }}); var docArray = collection . find ({ key : { '$regex' : [ 'din' , 'i' ] }}); $dteq : filter for document(s) with date property equal to provided date value var docArray = collection . find ({ key : { '$dteq' : new Date ( '1/1/2017' )}); $type : filter for documents which have a property of a specified type var docArray = collection . find ({ key : { '$type' : value }); // 'string', or 'number', ... $size : filter for documents which have array property of specified size var docArray = collection . find ({ key : { '$size' : value }); (does not work for strings) $len : filter for documents which have string property of specified length var docArray = collection . find ({ key : { '$len' : value }); $or : filter for documents which meet any of the nested subexpressions var docArray = collection . find ({ '$or' : [ { key0 : { '$lt' : value0 }, { key1 : { '$gte' : value1 }, // ... ]}); Find one document \u00b6 var doc = collection . findOne ({}); Filter by function \u00b6 var docArray = collection . where ( function ( doc ){ // ... return isPicked ; // true to pick this document }) Sort \u00b6 Sort with a key var docArray = collection . chain (). find ({}). simplesort ( key ). data (); // ascending // var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data(); // descending Sort with mutiple keys var docArray = collection . chain (). find ({}). compoundsort ([ key0 , key1 ]). data (); // key0, key1: ascending // var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending Sort with function var docArray = collection . chain (). find ({}). sort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }) . data (); result: 0 : equal 1 : greater -1 : less Pagination \u00b6 Get documents from start to start+count-1 . var docArray = collection . chain (). find ({}). offset ( start ). limit ( count ). data (); Update \u00b6 Update each filtered documents. var docArray = collection . chain (). find ({}). update ( function ( doc ) { // return doc ; }); Remove \u00b6 Remove filtered documents. collection . chain (). find ({}). remove (); Map \u00b6 Map document into a new anonymous collection, won't affect original collection. var docArray = collection . chain (). find ({}). map ( function ( doc ) { // ... return doc }) . data (); Map-reduce \u00b6 Map document into a new anonymous collection Run reduceFn to get final result value from result set of step 1. var mapFn = function ( doc ) { // ... return doc }; var reduceFn = function ( docArray ) { // ... return result ; } var result = collection . chain (). find ({}). mapReduce ( mapFn , reduceFn ); Clone result set \u00b6 var resultSet = collection . chain (). find ({}); var resultSetClone = resultSet . branch (); // resultSetClone.find({}).data(); Dynamic view \u00b6 Create dynamic view var view = children . addDynamicView ( name ); Add filters find view . applyFind ({}); where view . applyWhere ( function ( doc ) { return true ; }); simple sort view . applySimpleSort ( key ); sort by multiple keys view . applySortCriteria ([ key0 , key1 ]); // view.applySortCriteria([key0, [key1, true]]); sort function view . applySort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }); result: 0 : equal 1 : greater -1 : less Get result data var docArray = view . data (); Add new filters var docArray = view . branchResultset (). find ({}). data (); Speed-up quering \u00b6 Custom unique index \u00b6 Define custom unique index var collection = db . addCollection ( name , { unique : [ key0 ] }); Get document by custom unique index var doc = collection . by ( key0 , value ); Binary indices \u00b6 Define binary index var collection = db . addCollection ( name , { indices : [ key0 ] }); Or collection . ensureIndex ( key ); Get documents by normal filters var docArray = collection . find ({ key0 : { '$gt' : value }}); Methods of collection \u00b6 Average value of a property var avgValue = collection . avg ( key ); Maximum value of a property var maxValue = collection . max ( key ); Minimum value of a property var minValue = collection . min ( key ); Median value of a property var medianValue = collection . median ( key ); Amount of documents var amount = collection . count ( query ); // {key: {'$gt': value}} Serialize & Deserialize \u00b6 Database as string var s = db . serialize (); Load database from string db . loadJSON ( s );","title":"LokiJs"},{"location":"lokijs/#introduction","text":"In-memory JavaScript Datastore with Persistence. Reference API","title":"Introduction"},{"location":"lokijs/#usage","text":"Sample code","title":"Usage"},{"location":"lokijs/#create-database","text":"var db = new loki (); // var db = new loki('loki.json'); // load database from file","title":"Create database"},{"location":"lokijs/#create-collection","text":"var collection = db . addCollection ( name );","title":"Create collection"},{"location":"lokijs/#insert-document","text":"var docInColl = collection . insert ( doc ); // doc: an object Get Id var id = docInColl . $loki ;","title":"Insert document"},{"location":"lokijs/#insert-documents","text":"collection . insert ( docArray ); // documents in array","title":"Insert documents"},{"location":"lokijs/#query","text":"","title":"Query"},{"location":"lokijs/#get-document-by-id","text":"var doc = collection . get ( id ); // id: `$loki`","title":"Get document by id"},{"location":"lokijs/#filter-documents","text":"$eq : filter for document(s) with property of (strict) equality var docArray = collection . find ({ key : value }); // var docArray = collection.find({key: {'$eq': value}); $aeq : filter for document(s) with property of abstract (loose) equality var docArray = collection . find ({ key : { '$aeq' : value }); For example var results = coll . find ({ age : { '$aeq' : 20 }}); // age == '20' or age == 20 $ne : filter for document(s) with property not equal to provided value var docArray = collection . find ({ key : { '$ne' : value }); $gt : filter for document(s) with property greater than provided value var docArray = collection . find ({ key : { '$gt' : value }); $gte : filter for document(s) with property greater or equal to provided value var docArray = collection . find ({ key : { '$gte' : value }); $lt : filter for document(s) with property less than provided value var docArray = collection . find ({ key : { '$lt' : value }); $lte : filter for document(s) with property less than or equal to provided value var docArray = collection . find ({ key : { '$lte' : value }); $between : filter for documents(s) with property between provided values var docArray = collection . find ({ key : { '$between' : [ value0 , value1 ]}); $in : filter for document(s) with property matching any of the provided array values var docArray = collection . find ({ key : { '$in' : [ value0 , value1 , ...]}); Your property should not be an array but your compare values should be. $nin : filter for document(s) with property not matching any of the provided array values var docArray = collection . find ({ key : { '$nin' : [ value0 , value1 , ...]}); $contains : filter for document(s) with property containing the provided value var docArray = collection . find ({ key : { '$contains' : value }); Use this when your property contains an array but your compare value is not an array $containsAny : filter for document(s) with property containing any of the provided values var docArray = collection . find ({ key : { '$containsAny' : [ value0 , value1 , ...]}); $containsNone : filter for documents(s) with property containing none of the provided values var docArray = collection . find ({ key : { '$containsNone' : [ value0 , value1 , ...]}); $regex : filter for document(s) with property matching provided regular expression var docArray = collection . find ({ key : { '$regex' : pattern }); // var docArray = collection.find({key: {'$regex': [pattern, options]}); For example var docArray = collection . find ({ key : { '$regex' : 'din' }}); var docArray = collection . find ({ key : { '$regex' : [ 'din' , 'i' ] }}); $dteq : filter for document(s) with date property equal to provided date value var docArray = collection . find ({ key : { '$dteq' : new Date ( '1/1/2017' )}); $type : filter for documents which have a property of a specified type var docArray = collection . find ({ key : { '$type' : value }); // 'string', or 'number', ... $size : filter for documents which have array property of specified size var docArray = collection . find ({ key : { '$size' : value }); (does not work for strings) $len : filter for documents which have string property of specified length var docArray = collection . find ({ key : { '$len' : value }); $or : filter for documents which meet any of the nested subexpressions var docArray = collection . find ({ '$or' : [ { key0 : { '$lt' : value0 }, { key1 : { '$gte' : value1 }, // ... ]});","title":"Filter documents"},{"location":"lokijs/#find-one-document","text":"var doc = collection . findOne ({});","title":"Find one document"},{"location":"lokijs/#filter-by-function","text":"var docArray = collection . where ( function ( doc ){ // ... return isPicked ; // true to pick this document })","title":"Filter by function"},{"location":"lokijs/#sort","text":"Sort with a key var docArray = collection . chain (). find ({}). simplesort ( key ). data (); // ascending // var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data(); // descending Sort with mutiple keys var docArray = collection . chain (). find ({}). compoundsort ([ key0 , key1 ]). data (); // key0, key1: ascending // var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending Sort with function var docArray = collection . chain (). find ({}). sort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }) . data (); result: 0 : equal 1 : greater -1 : less","title":"Sort"},{"location":"lokijs/#pagination","text":"Get documents from start to start+count-1 . var docArray = collection . chain (). find ({}). offset ( start ). limit ( count ). data ();","title":"Pagination"},{"location":"lokijs/#update","text":"Update each filtered documents. var docArray = collection . chain (). find ({}). update ( function ( doc ) { // return doc ; });","title":"Update"},{"location":"lokijs/#remove","text":"Remove filtered documents. collection . chain (). find ({}). remove ();","title":"Remove"},{"location":"lokijs/#map","text":"Map document into a new anonymous collection, won't affect original collection. var docArray = collection . chain (). find ({}). map ( function ( doc ) { // ... return doc }) . data ();","title":"Map"},{"location":"lokijs/#map-reduce","text":"Map document into a new anonymous collection Run reduceFn to get final result value from result set of step 1. var mapFn = function ( doc ) { // ... return doc }; var reduceFn = function ( docArray ) { // ... return result ; } var result = collection . chain (). find ({}). mapReduce ( mapFn , reduceFn );","title":"Map-reduce"},{"location":"lokijs/#clone-result-set","text":"var resultSet = collection . chain (). find ({}); var resultSetClone = resultSet . branch (); // resultSetClone.find({}).data();","title":"Clone result set"},{"location":"lokijs/#dynamic-view","text":"Create dynamic view var view = children . addDynamicView ( name ); Add filters find view . applyFind ({}); where view . applyWhere ( function ( doc ) { return true ; }); simple sort view . applySimpleSort ( key ); sort by multiple keys view . applySortCriteria ([ key0 , key1 ]); // view.applySortCriteria([key0, [key1, true]]); sort function view . applySort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }); result: 0 : equal 1 : greater -1 : less Get result data var docArray = view . data (); Add new filters var docArray = view . branchResultset (). find ({}). data ();","title":"Dynamic view"},{"location":"lokijs/#speed-up-quering","text":"","title":"Speed-up quering"},{"location":"lokijs/#custom-unique-index","text":"Define custom unique index var collection = db . addCollection ( name , { unique : [ key0 ] }); Get document by custom unique index var doc = collection . by ( key0 , value );","title":"Custom unique index"},{"location":"lokijs/#binary-indices","text":"Define binary index var collection = db . addCollection ( name , { indices : [ key0 ] }); Or collection . ensureIndex ( key ); Get documents by normal filters var docArray = collection . find ({ key0 : { '$gt' : value }});","title":"Binary indices"},{"location":"lokijs/#methods-of-collection","text":"Average value of a property var avgValue = collection . avg ( key ); Maximum value of a property var maxValue = collection . max ( key ); Minimum value of a property var minValue = collection . min ( key ); Median value of a property var medianValue = collection . median ( key ); Amount of documents var amount = collection . count ( query ); // {key: {'$gt': value}}","title":"Methods of collection"},{"location":"lokijs/#serialize-deserialize","text":"Database as string var s = db . serialize (); Load database from string db . loadJSON ( s );","title":"Serialize &amp; Deserialize"},{"location":"lzstring/","text":"Introduction \u00b6 Compress string using LZ-based compression algorithm. Reference Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexXOR from './plugins/lzstring.js' ; Install global plugin \u00b6 Install plugin in configuration of game import LZString from './plugins/lzstring-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLZString' , plugin : LZString , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var lzstring = scene . plugins . get ( 'rexLZString' ). add ({ // encoding: 'none' // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3 }); encoding : 'none' , or 0 : no encoding. 'base64' , or 1 : base64 encoding. 'utf16' , or 2 : UTF16 encoding. 'uri' , or 3 : URI encoding. Compression \u00b6 var compressionResult = lzstring . compress ( src ); Decompression \u00b6 var decompressionResult = lzstring . decompress ( compressionResult ); Set encoding \u00b6 lzstring . setEncoding ( m ); // 0|'none'|1|'base64'|2|'utf16'|3|'uri'","title":"LZ string"},{"location":"lzstring/#introduction","text":"Compress string using LZ-based compression algorithm. Reference Author: Rex Member of scene","title":"Introduction"},{"location":"lzstring/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"lzstring/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"lzstring/#import-class","text":"import rexXOR from './plugins/lzstring.js' ;","title":"Import class"},{"location":"lzstring/#install-global-plugin","text":"Install plugin in configuration of game import LZString from './plugins/lzstring-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLZString' , plugin : LZString , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"lzstring/#create-instance","text":"var lzstring = scene . plugins . get ( 'rexLZString' ). add ({ // encoding: 'none' // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3 }); encoding : 'none' , or 0 : no encoding. 'base64' , or 1 : base64 encoding. 'utf16' , or 2 : UTF16 encoding. 'uri' , or 3 : URI encoding.","title":"Create instance"},{"location":"lzstring/#compression","text":"var compressionResult = lzstring . compress ( src );","title":"Compression"},{"location":"lzstring/#decompression","text":"var decompressionResult = lzstring . decompress ( compressionResult );","title":"Decompression"},{"location":"lzstring/#set-encoding","text":"lzstring . setEncoding ( m ); // 0|'none'|1|'base64'|2|'utf16'|3|'uri'","title":"Set encoding"},{"location":"mainloop/","text":"game.events prestep event. Global Managers like Input and Sound update. trigger game.sound.update() game.events step event. User-land code and plugins Register event scene . game . events . on ( 'step' , function ( time , delta ){ // }, scope ); Update the Scene Manager and all active Scenes scene.events preupdate event Register event scene . events . on ( 'preupdate' , function ( time , delta ){ // }, scope ); TweenManager.preUpdate() to arrange active targets UpdateList.preUpdate(), to arrange game objects in UpdateList scene.events update event Register event scene . events . on ( 'update' , function ( time , delta ){ // }, scope ); TweenManager.update(), to run active tweens UpdateList.update gameObject.preUpdate scene.update() scene.events postupdate event Register event scene . events . on ( 'postupdate' , function ( time , delta ){ // }, scope ); game.events poststep event. Final event before rendering starts. Register event scene . game . events . on ( 'poststep' , function ( time , delta ){ // }, scope ); game.renderer.preRender() game.events prerender event Register event scene . game . events . on ( 'prerender' , function ( renderer , time , delta ){ // }, scope ); SceneManager.render() Sort display list Render cameras scene.events render event Register event scene . game . events . on ( 'render' , function ( renderer ){ // }, scope ); game.renderer.postRender() game.events postrender event. Final event before the step repeats. Register event scene . game . events . on ( 'postrender' , function ( renderer , time , delta ){ // }, scope ); Note Each scene is a standalone system. Flow chart \u00b6 Game loop \u00b6 graph TB subgraph Render GameRenderPreRender[\"game.renderer.preRender()\"] GameEventPreRender>\"game.events: prerender\"] SceneManagerRender[\"SceneManager.render()<br>...See 'Scene steps'...\"] GameRenderPostRender[\"game.renderer.postRender()\"] GameEventPostRender>\"game.events: postrender\"] end subgraph Step GameEventPreStep>\"game.events: prestep<br><br>sound.update()\"] GameEventStep>\"game.events: step\"] SceneManagerUpdate[\"SceneManager.update()<br>...See 'Scene steps'...\"] GameEventPostStep>\"game.events: poststep\"] end GameEventPreStep --> GameEventStep GameEventStep --> SceneManagerUpdate SceneManagerUpdate --> GameEventPostStep GameEventPostStep --> GameRenderPreRender GameRenderPreRender --> GameEventPreRender GameEventPreRender --> SceneManagerRender SceneManagerRender --> GameRenderPostRender GameRenderPostRender --> GameEventPostRender GameEventPostRender --> GameEventPreStep Scene steps \u00b6 graph TB subgraph Render SceneEventRender>\"scene.events: render\"] end subgraph Update SceneEventPreUpdate>\"scene.events: preupdate<br><br>TweenManager.preUpdate()<br>UpdateList.preUpdate()\"] SceneEventUpdate>\"scene.events: update<br><br>TweenManager.update()<br>UpdateList.update()<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.events: postupdate\"] end SceneEventPreUpdate --> SceneEventUpdate SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate -.-> SceneEventRender","title":"Main loop"},{"location":"mainloop/#flow-chart","text":"","title":"Flow chart"},{"location":"mainloop/#game-loop","text":"graph TB subgraph Render GameRenderPreRender[\"game.renderer.preRender()\"] GameEventPreRender>\"game.events: prerender\"] SceneManagerRender[\"SceneManager.render()<br>...See 'Scene steps'...\"] GameRenderPostRender[\"game.renderer.postRender()\"] GameEventPostRender>\"game.events: postrender\"] end subgraph Step GameEventPreStep>\"game.events: prestep<br><br>sound.update()\"] GameEventStep>\"game.events: step\"] SceneManagerUpdate[\"SceneManager.update()<br>...See 'Scene steps'...\"] GameEventPostStep>\"game.events: poststep\"] end GameEventPreStep --> GameEventStep GameEventStep --> SceneManagerUpdate SceneManagerUpdate --> GameEventPostStep GameEventPostStep --> GameRenderPreRender GameRenderPreRender --> GameEventPreRender GameEventPreRender --> SceneManagerRender SceneManagerRender --> GameRenderPostRender GameRenderPostRender --> GameEventPostRender GameEventPostRender --> GameEventPreStep","title":"Game loop"},{"location":"mainloop/#scene-steps","text":"graph TB subgraph Render SceneEventRender>\"scene.events: render\"] end subgraph Update SceneEventPreUpdate>\"scene.events: preupdate<br><br>TweenManager.preUpdate()<br>UpdateList.preUpdate()\"] SceneEventUpdate>\"scene.events: update<br><br>TweenManager.update()<br>UpdateList.update()<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.events: postupdate\"] end SceneEventPreUpdate --> SceneEventUpdate SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate -.-> SceneEventRender","title":"Scene steps"},{"location":"mask/","text":"Introduction \u00b6 Apply mask on game object. Built-in render of phaser. Author: Richard Davey Usage \u00b6 Add mask \u00b6 Create mask object Create mask from texture Create image ( image , sprite , quad , bitmap text, particles , text ) var shape = scene . add . image ( x , y , key ). setVisible ( false ); Create mask var mask = shape . createBitmapMask (); or var mask = new Phaser . Display . Masks . BitmapMask ( scene , shape ); WebGL only Create mask from graphics Create graphics var shape = scene . make . graphics (); Create mask var mask = shape . createGeometryMask (); or var mask = new Phaser . Display . Masks . GeometryMask ( scene , shape ); Add mask object to image game object // var image = scene.add.image(...); image . setMask ( mask ); // image.mask = mask; A mask object could be added to many game objects. Clear mask \u00b6 Clear mask image . clearMask (); Clear mask and destroy mask object image . clearMask ( true ); Invert alpha \u00b6 Only GeometryMask has inverse alpha feature. Inverse alpha mask . setInvertAlpha (); // mask.invertAlpha = true; Disable mask . setInvertAlpha ( false ); // mask.invertAlpha = false;","title":"Mask"},{"location":"mask/#introduction","text":"Apply mask on game object. Built-in render of phaser. Author: Richard Davey","title":"Introduction"},{"location":"mask/#usage","text":"","title":"Usage"},{"location":"mask/#add-mask","text":"Create mask object Create mask from texture Create image ( image , sprite , quad , bitmap text, particles , text ) var shape = scene . add . image ( x , y , key ). setVisible ( false ); Create mask var mask = shape . createBitmapMask (); or var mask = new Phaser . Display . Masks . BitmapMask ( scene , shape ); WebGL only Create mask from graphics Create graphics var shape = scene . make . graphics (); Create mask var mask = shape . createGeometryMask (); or var mask = new Phaser . Display . Masks . GeometryMask ( scene , shape ); Add mask object to image game object // var image = scene.add.image(...); image . setMask ( mask ); // image.mask = mask; A mask object could be added to many game objects.","title":"Add mask"},{"location":"mask/#clear-mask","text":"Clear mask image . clearMask (); Clear mask and destroy mask object image . clearMask ( true );","title":"Clear mask"},{"location":"mask/#invert-alpha","text":"Only GeometryMask has inverse alpha feature. Inverse alpha mask . setInvertAlpha (); // mask.invertAlpha = true; Disable mask . setInvertAlpha ( false ); // mask.invertAlpha = false;","title":"Invert alpha"},{"location":"matterjs-attractor/","text":"Introduction \u00b6 Apply continual forces on bodies. Reference Usage \u00b6 System configuration \u00b6 Game config var config = { // ... physics : { matter : { // ... plugins : { attractors : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableAttractorPlugin (); Matter object configuration \u00b6 var options = { // ... plugin : { attractors : [ callback , // ... ] }, // ... } callback : Retuen a force ( {x,y} ), which will be applied to bodyB function ( bodyA , bodyB ) { return { x , y }; // Force } bodyA : Attractor matter object. bodyB : Other matter object. Apply forece to bodies directly. function ( bodyA , bodyB ) { bodyA . gameObject . applyForce ({ x , y }); bodyB . gameObject . applyForce ({ x , y }); } bodyA : Attractor matter object. bodyA.gameObject : Game object . bodyB : Other matter object. bodyB.gameObject : Game object .","title":"Attractor"},{"location":"matterjs-attractor/#introduction","text":"Apply continual forces on bodies. Reference","title":"Introduction"},{"location":"matterjs-attractor/#usage","text":"","title":"Usage"},{"location":"matterjs-attractor/#system-configuration","text":"Game config var config = { // ... physics : { matter : { // ... plugins : { attractors : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableAttractorPlugin ();","title":"System configuration"},{"location":"matterjs-attractor/#matter-object-configuration","text":"var options = { // ... plugin : { attractors : [ callback , // ... ] }, // ... } callback : Retuen a force ( {x,y} ), which will be applied to bodyB function ( bodyA , bodyB ) { return { x , y }; // Force } bodyA : Attractor matter object. bodyB : Other matter object. Apply forece to bodies directly. function ( bodyA , bodyB ) { bodyA . gameObject . applyForce ({ x , y }); bodyB . gameObject . applyForce ({ x , y }); } bodyA : Attractor matter object. bodyA.gameObject : Game object . bodyB : Other matter object. bodyB.gameObject : Game object .","title":"Matter object configuration"},{"location":"matterjs-gameobject/","text":"Introduction \u00b6 Matterjs physics Image/Sprite/Group object. Author: Richard Davey Usage \u00b6 Add physics object \u00b6 Enable physics world Image object \u00b6 var image = scene . matter . add . imag ( x , y , key , frame ); // var image = scene.matter.add.imag(x, y, key, frame, config); config : Config object Sprite object \u00b6 var image = scene . matter . add . sprite ( x , y , key , frame ); // var image = scene.matter.add.sprite(x, y, key, frame, config); config : Config object Any game object \u00b6 var gameObject = scene . matter . add . gameObject ( gameObject ); // var gameObject = scene.matter.add.gameObject(gameObject, config); config : Config object Image composite \u00b6 Create a new composite containing Matter Image objects created in a grid arrangement. var composite = scene . matter . add . imageStack ( key , frame , x , y , columns , rows ); // var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options); key , frame : Texture key and frame name. x , y : Top-left position of these game objects. columns , rows : The number of columns/rows in the grid. columnGap , rowGap : The distance between each column/row. config : Config object composite : Composite matter object. composite.bodies : An array of bodies. Config \u00b6 { label : 'Body' , shape : 'rectangle' , chamfer : null , isStatic : false , isSensor : false , isSleeping : false , ignoreGravity : false , ignorePointer : false , sleepThreshold : 60 , density : 0.001 , restitution : 0 , friction : 0.1 , frictionStatic : 0.5 , frictionAir : 0.01 , force : { x : 0 , y : 0 }, angle : 0 , torque : 0 , collisionFilter : { group : 0 , category : 0x0001 , mask : 0xFFFFFFFF , }, // parts: [], // plugin: { // attractors: [ // (function(bodyA, bodyB) { return {x, y}}), // ] // }, slop : 0.05 , timeScale : 1 , } label : An arbitrary String name to help the user identify and manage bodies. shape : A string : 'rectangle' , 'circle' , 'trapezoid' , 'polygon' , 'fromVertices' , 'fromPhysicsEditor' An object : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Vertices { type : 'fromVertices' , verts : points , // flagInternal: false, // removeCollinear: 0.01, // minimumArea: 10, } points : A string : 'x0 y0 x1 y1 ...' An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] chamfer : null A number {radius: value} {radius: [topLeft, topRight, bottomRight, bottomLeft]} isStatic : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed. isSensor : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically. isSleeping : 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. sleepThreshold : The number of updates in which this body must have near-zero velocity before it is set as sleeping. density : Density of the body, that is its mass per unit area. restitution : The restitution/bounce/elasticity of the body. The value is always positive and is in the range (0, 1) . 0 : Collisions may be perfectly inelastic and no bouncing may occur. 0.8 : The body may bounce back with approximately 80% of its kinetic energy. friction : Friction of the body. The value is always positive and is in the range (0, 1) . 0 : The body may slide indefinitely. 1 : The body may come to a stop almost instantly after a force is applied. frictionStatic : The static friction of the body (in the Coulomb friction model). 0 : The body will never 'stick' when it is nearly stationary and only dynamic friction is used. 10 : The higher the value, the more force it will take to initially get the body moving when nearly stationary. frictionAir : The air friction of the body (air resistance). 0 : The body will never slow as it moves through space. The higher the value, the faster a body slows when moving through space. force : The force to apply in the current step. angle : Angle of the body, in radians. torque : the torque (turning force) to apply in the current step. collisionFilter : An Object that specifies the collision filtering properties of this body. collisionFilter.group collisionFilter.category : A bit field that specifies the collision category this body belongs to. collisionFilter.mask : A bit mask that specifies the collision categories this body may collide with. slop : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies. The default should generally suffice, although very large bodies may require larger values for stable stacking. Collision \u00b6 Collisions between two bodies will obey the following rules: (grpupA > 0) && (groupB > 0) : Collision = (groupA == groupB) (grpupA == 0) || (groupB == 0) : Collision = ((categoryA & maskB) !== 0) && ((categoryB & maskA) !== 0) Movement \u00b6 Velocity \u00b6 gameObject . setVelocity ( x , y ); gameObject . setVelocityX ( x ); gameObject . setVelocityY ( x ); Acceleration \u00b6 Force \u00b6 Applies a force to a body. gameObject . applyForce ( force ); force : {x, y} Applies a force to a body from a given position. gameObject . applyForceFrom ( position , force ); // position, force: {x, y} position : {x, y} force : {x, y} Apply thrust to the forward position of the body. gameObject . thrust ( speed ); speed : A number. Apply thrust to the left position of the body. gameObject . thrustLeft ( speed ); speed : A number. Apply thrust to the right position of the body. gameObject . thrustRight ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Gravity \u00b6 Ignore world gravity gameObject . setIgnoreGravity ( ignore ); ignore : Set to true to ignore the effect of world gravity Friction \u00b6 gameObject . setFriction ( value , air , fstatic ); gameObject . setFrictionAir ( v ); gameObject . setFrictionStatic ( v ); Rotation \u00b6 Fixed rotation \u00b6 gameObject . setFixedRotation (); Angular velocity \u00b6 gameObject . setAngularVelocity ( v ); Collision \u00b6 Enable \u00b6 Get var isSensor = gameObject . isSensor (); Set gameObject . setSensor ( value ); value : Set true to enable senser. Collision group \u00b6 Collision grpup gameObject . setCollisionGroup ( value ); Collision category Get new collision category var category = scene . matter . world . nextCategory (); category : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1<<31)) Set collision category of game object gameObject . setCollisionCategory ( category ); Set category mask gameObject . setCollidesWith ([ categoryA , categoryB , ...]); // gameObject.setCollidesWith(categoryA); Collision event \u00b6 scene . matter . world . on ( 'collisionstart' , function ( event , bodyA , bodyB ) { // var pairs = event.pairs; }); event : event.pairs : An array of collision pairs event.pairs[i].bodyA , event.pairs[i].bodyB : Matter body object. body.gameObject : Game object of matter body. bodyA , bodyB : Equal to event.pairs[0].bodyA , event.pairs[0].bodyB . Collision bound \u00b6 Rectangle gameObject . setRectangle ( width , height , options ); Circle gameObject . setCircle ( radius , options ); Polygon gameObject . setPolygon ( radius , sides , options ); Trapezoid gameObject . setTrapezoid ( width , height , slope , options ); Any gameObject . setBody ( config , options ); config : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Bounce \u00b6 gameObject . setBounce ( v ); restitution Mass \u00b6 gameObject . setMass ( v ); gameObject . setDensity ( v ); Sleep \u00b6 Enable \u00b6 var config = { // ... physics : { matter : { // ... enableSleeping : true // ... } } } Sleep threshold \u00b6 gameObject . setSleepThreshold ( value ); Sleep events \u00b6 Sleeping start scene . matter . world . on ( 'sleepstart' , function ( event , body ) { }); Sleeping end scene . matter . world . on ( 'sleepend' , function ( event , body ) { });","title":"Game object"},{"location":"matterjs-gameobject/#introduction","text":"Matterjs physics Image/Sprite/Group object. Author: Richard Davey","title":"Introduction"},{"location":"matterjs-gameobject/#usage","text":"","title":"Usage"},{"location":"matterjs-gameobject/#add-physics-object","text":"Enable physics world","title":"Add physics object"},{"location":"matterjs-gameobject/#image-object","text":"var image = scene . matter . add . imag ( x , y , key , frame ); // var image = scene.matter.add.imag(x, y, key, frame, config); config : Config object","title":"Image object"},{"location":"matterjs-gameobject/#sprite-object","text":"var image = scene . matter . add . sprite ( x , y , key , frame ); // var image = scene.matter.add.sprite(x, y, key, frame, config); config : Config object","title":"Sprite object"},{"location":"matterjs-gameobject/#any-game-object","text":"var gameObject = scene . matter . add . gameObject ( gameObject ); // var gameObject = scene.matter.add.gameObject(gameObject, config); config : Config object","title":"Any game object"},{"location":"matterjs-gameobject/#image-composite","text":"Create a new composite containing Matter Image objects created in a grid arrangement. var composite = scene . matter . add . imageStack ( key , frame , x , y , columns , rows ); // var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options); key , frame : Texture key and frame name. x , y : Top-left position of these game objects. columns , rows : The number of columns/rows in the grid. columnGap , rowGap : The distance between each column/row. config : Config object composite : Composite matter object. composite.bodies : An array of bodies.","title":"Image composite"},{"location":"matterjs-gameobject/#config","text":"{ label : 'Body' , shape : 'rectangle' , chamfer : null , isStatic : false , isSensor : false , isSleeping : false , ignoreGravity : false , ignorePointer : false , sleepThreshold : 60 , density : 0.001 , restitution : 0 , friction : 0.1 , frictionStatic : 0.5 , frictionAir : 0.01 , force : { x : 0 , y : 0 }, angle : 0 , torque : 0 , collisionFilter : { group : 0 , category : 0x0001 , mask : 0xFFFFFFFF , }, // parts: [], // plugin: { // attractors: [ // (function(bodyA, bodyB) { return {x, y}}), // ] // }, slop : 0.05 , timeScale : 1 , } label : An arbitrary String name to help the user identify and manage bodies. shape : A string : 'rectangle' , 'circle' , 'trapezoid' , 'polygon' , 'fromVertices' , 'fromPhysicsEditor' An object : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Vertices { type : 'fromVertices' , verts : points , // flagInternal: false, // removeCollinear: 0.01, // minimumArea: 10, } points : A string : 'x0 y0 x1 y1 ...' An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] chamfer : null A number {radius: value} {radius: [topLeft, topRight, bottomRight, bottomLeft]} isStatic : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed. isSensor : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically. isSleeping : 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. sleepThreshold : The number of updates in which this body must have near-zero velocity before it is set as sleeping. density : Density of the body, that is its mass per unit area. restitution : The restitution/bounce/elasticity of the body. The value is always positive and is in the range (0, 1) . 0 : Collisions may be perfectly inelastic and no bouncing may occur. 0.8 : The body may bounce back with approximately 80% of its kinetic energy. friction : Friction of the body. The value is always positive and is in the range (0, 1) . 0 : The body may slide indefinitely. 1 : The body may come to a stop almost instantly after a force is applied. frictionStatic : The static friction of the body (in the Coulomb friction model). 0 : The body will never 'stick' when it is nearly stationary and only dynamic friction is used. 10 : The higher the value, the more force it will take to initially get the body moving when nearly stationary. frictionAir : The air friction of the body (air resistance). 0 : The body will never slow as it moves through space. The higher the value, the faster a body slows when moving through space. force : The force to apply in the current step. angle : Angle of the body, in radians. torque : the torque (turning force) to apply in the current step. collisionFilter : An Object that specifies the collision filtering properties of this body. collisionFilter.group collisionFilter.category : A bit field that specifies the collision category this body belongs to. collisionFilter.mask : A bit mask that specifies the collision categories this body may collide with. slop : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies. The default should generally suffice, although very large bodies may require larger values for stable stacking.","title":"Config"},{"location":"matterjs-gameobject/#collision","text":"Collisions between two bodies will obey the following rules: (grpupA > 0) && (groupB > 0) : Collision = (groupA == groupB) (grpupA == 0) || (groupB == 0) : Collision = ((categoryA & maskB) !== 0) && ((categoryB & maskA) !== 0)","title":"Collision"},{"location":"matterjs-gameobject/#movement","text":"","title":"Movement"},{"location":"matterjs-gameobject/#velocity","text":"gameObject . setVelocity ( x , y ); gameObject . setVelocityX ( x ); gameObject . setVelocityY ( x );","title":"Velocity"},{"location":"matterjs-gameobject/#acceleration","text":"","title":"Acceleration"},{"location":"matterjs-gameobject/#force","text":"Applies a force to a body. gameObject . applyForce ( force ); force : {x, y} Applies a force to a body from a given position. gameObject . applyForceFrom ( position , force ); // position, force: {x, y} position : {x, y} force : {x, y} Apply thrust to the forward position of the body. gameObject . thrust ( speed ); speed : A number. Apply thrust to the left position of the body. gameObject . thrustLeft ( speed ); speed : A number. Apply thrust to the right position of the body. gameObject . thrustRight ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number.","title":"Force"},{"location":"matterjs-gameobject/#gravity","text":"Ignore world gravity gameObject . setIgnoreGravity ( ignore ); ignore : Set to true to ignore the effect of world gravity","title":"Gravity"},{"location":"matterjs-gameobject/#friction","text":"gameObject . setFriction ( value , air , fstatic ); gameObject . setFrictionAir ( v ); gameObject . setFrictionStatic ( v );","title":"Friction"},{"location":"matterjs-gameobject/#rotation","text":"","title":"Rotation"},{"location":"matterjs-gameobject/#fixed-rotation","text":"gameObject . setFixedRotation ();","title":"Fixed rotation"},{"location":"matterjs-gameobject/#angular-velocity","text":"gameObject . setAngularVelocity ( v );","title":"Angular velocity"},{"location":"matterjs-gameobject/#collision_1","text":"","title":"Collision"},{"location":"matterjs-gameobject/#enable","text":"Get var isSensor = gameObject . isSensor (); Set gameObject . setSensor ( value ); value : Set true to enable senser.","title":"Enable"},{"location":"matterjs-gameobject/#collision-group","text":"Collision grpup gameObject . setCollisionGroup ( value ); Collision category Get new collision category var category = scene . matter . world . nextCategory (); category : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1<<31)) Set collision category of game object gameObject . setCollisionCategory ( category ); Set category mask gameObject . setCollidesWith ([ categoryA , categoryB , ...]); // gameObject.setCollidesWith(categoryA);","title":"Collision group"},{"location":"matterjs-gameobject/#collision-event","text":"scene . matter . world . on ( 'collisionstart' , function ( event , bodyA , bodyB ) { // var pairs = event.pairs; }); event : event.pairs : An array of collision pairs event.pairs[i].bodyA , event.pairs[i].bodyB : Matter body object. body.gameObject : Game object of matter body. bodyA , bodyB : Equal to event.pairs[0].bodyA , event.pairs[0].bodyB .","title":"Collision event"},{"location":"matterjs-gameobject/#collision-bound","text":"Rectangle gameObject . setRectangle ( width , height , options ); Circle gameObject . setCircle ( radius , options ); Polygon gameObject . setPolygon ( radius , sides , options ); Trapezoid gameObject . setTrapezoid ( width , height , slope , options ); Any gameObject . setBody ( config , options ); config : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, }","title":"Collision bound"},{"location":"matterjs-gameobject/#bounce","text":"gameObject . setBounce ( v ); restitution","title":"Bounce"},{"location":"matterjs-gameobject/#mass","text":"gameObject . setMass ( v ); gameObject . setDensity ( v );","title":"Mass"},{"location":"matterjs-gameobject/#sleep","text":"","title":"Sleep"},{"location":"matterjs-gameobject/#enable_1","text":"var config = { // ... physics : { matter : { // ... enableSleeping : true // ... } } }","title":"Enable"},{"location":"matterjs-gameobject/#sleep-threshold","text":"gameObject . setSleepThreshold ( value );","title":"Sleep threshold"},{"location":"matterjs-gameobject/#sleep-events","text":"Sleeping start scene . matter . world . on ( 'sleepstart' , function ( event , body ) { }); Sleeping end scene . matter . world . on ( 'sleepend' , function ( event , body ) { });","title":"Sleep events"},{"location":"matterjs-world/","text":"Introduction \u00b6 Matter physics engine in phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 var config = { // ... physics : { default : 'matter' , matter : { // enabled: true, // positionIterations: 6, // velocityIterations: 4, // constraintIterations: 2, // enableSleeping: false, // plugins: { // attractors: false, // wrap: false, // }, // gravity: { // x: 0, // y: 0, // } // setBounds: { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // thickness: 64, // left: true, // right: true, // top: true, // bottom: true, // }, // timing: { // timestamp: 0, // timeScale: 1, // }, // correction: 1, // getDelta: (function() { return 1000 / 60; }), // autoUpdate: true, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugBodyFillColor: 0xe3a7e3, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // debugShowJoint: true, // debugJointColor: 0x000000, // debugWireframes: true, // debugShowInternalEdges: false, // debugShowConvexHulls: false, // debugConvexHullColor: 0xaaaaaa, // debugShowSleeping: false, } } // ... }; var game = new Phaser . Game ( config ); Control \u00b6 Pause \u00b6 scene . matter . world . pause (); Resume \u00b6 scene . matter . world . resume (); Drag object \u00b6 scene . matter . add . mouseSpring (); // scene.matter.add.mouseSpring(options); options { length : 0.01 , stiffness : 0.1 , damping : 0 , angularStiffness : 1 , collisionFilter : { category : 0x0001 , mask : 0xFFFFFFFF , group : 0 } } collisionFilter : Drag filter, see collision . World bounds \u00b6 Enable \u00b6 World : Set bounds scene . matter . world . setBounds ( x , y , width , height ); // scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom); thickness : The thickness of each wall, in pixels. left , right , top , bottom : If true will create the left/right/top/bottom bounds wall. Gravity \u00b6 Set scene . matter . world . setGravity ( x , y ); // scene.matter.world.setGravity(x, y, scale); Disalbe scene . matter . world . disableGravity (); Constraint \u00b6 Constraint of 2 game objects \u00b6 var constraint = scene . matter . add . constraint ( gameObjectA , gameObjectB ); // var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options); gameObjectA , gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA , pointB : Offset position of gameObjectA , gameObjectB . Alias: var constraint = scene . matter . add . spring ( gameObjectA , gameObjectB , length , stiffness , options ); var constraint = scene . matter . add . joint ( gameObjectA , gameObjectB , length , stiffness , options ); Constraint to world position \u00b6 var constraint = scene . matter . add . worldConstraint ( gameObjectB , length , stiffness , options ); gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA : World position. pointB : Offset position of gameObjectB . Chain game objects \u00b6 var composite = scene . matter . add . chain ( composite , xOffsetA , yOffsetA , xOffsetB , yOffsetB , options ); composite : Image composite xOffsetA , yOffsetA : Offset position of gameObjectA, in scale. xOffset = (Offset distance / width) yOffset = (Offset distance / height) xOffsetB , yOffsetB : Offset position of gameObjectB, in scale. options : { length : undefined , stiffness : 1 , damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. composite composite.bodies : An array of bodies. composite.constraints : An array of constraints Remove constraint \u00b6 scene . matter . world . removeConstraint ( constraint );","title":"World"},{"location":"matterjs-world/#introduction","text":"Matter physics engine in phaser. Author: Richard Davey","title":"Introduction"},{"location":"matterjs-world/#usage","text":"","title":"Usage"},{"location":"matterjs-world/#configuration","text":"var config = { // ... physics : { default : 'matter' , matter : { // enabled: true, // positionIterations: 6, // velocityIterations: 4, // constraintIterations: 2, // enableSleeping: false, // plugins: { // attractors: false, // wrap: false, // }, // gravity: { // x: 0, // y: 0, // } // setBounds: { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // thickness: 64, // left: true, // right: true, // top: true, // bottom: true, // }, // timing: { // timestamp: 0, // timeScale: 1, // }, // correction: 1, // getDelta: (function() { return 1000 / 60; }), // autoUpdate: true, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugBodyFillColor: 0xe3a7e3, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // debugShowJoint: true, // debugJointColor: 0x000000, // debugWireframes: true, // debugShowInternalEdges: false, // debugShowConvexHulls: false, // debugConvexHullColor: 0xaaaaaa, // debugShowSleeping: false, } } // ... }; var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"matterjs-world/#control","text":"","title":"Control"},{"location":"matterjs-world/#pause","text":"scene . matter . world . pause ();","title":"Pause"},{"location":"matterjs-world/#resume","text":"scene . matter . world . resume ();","title":"Resume"},{"location":"matterjs-world/#drag-object","text":"scene . matter . add . mouseSpring (); // scene.matter.add.mouseSpring(options); options { length : 0.01 , stiffness : 0.1 , damping : 0 , angularStiffness : 1 , collisionFilter : { category : 0x0001 , mask : 0xFFFFFFFF , group : 0 } } collisionFilter : Drag filter, see collision .","title":"Drag object"},{"location":"matterjs-world/#world-bounds","text":"","title":"World bounds"},{"location":"matterjs-world/#enable","text":"World : Set bounds scene . matter . world . setBounds ( x , y , width , height ); // scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom); thickness : The thickness of each wall, in pixels. left , right , top , bottom : If true will create the left/right/top/bottom bounds wall.","title":"Enable"},{"location":"matterjs-world/#gravity","text":"Set scene . matter . world . setGravity ( x , y ); // scene.matter.world.setGravity(x, y, scale); Disalbe scene . matter . world . disableGravity ();","title":"Gravity"},{"location":"matterjs-world/#constraint","text":"","title":"Constraint"},{"location":"matterjs-world/#constraint-of-2-game-objects","text":"var constraint = scene . matter . add . constraint ( gameObjectA , gameObjectB ); // var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options); gameObjectA , gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA , pointB : Offset position of gameObjectA , gameObjectB . Alias: var constraint = scene . matter . add . spring ( gameObjectA , gameObjectB , length , stiffness , options ); var constraint = scene . matter . add . joint ( gameObjectA , gameObjectB , length , stiffness , options );","title":"Constraint of 2 game objects"},{"location":"matterjs-world/#constraint-to-world-position","text":"var constraint = scene . matter . add . worldConstraint ( gameObjectB , length , stiffness , options ); gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA : World position. pointB : Offset position of gameObjectB .","title":"Constraint to world position"},{"location":"matterjs-world/#chain-game-objects","text":"var composite = scene . matter . add . chain ( composite , xOffsetA , yOffsetA , xOffsetB , yOffsetB , options ); composite : Image composite xOffsetA , yOffsetA : Offset position of gameObjectA, in scale. xOffset = (Offset distance / width) yOffset = (Offset distance / height) xOffsetB , yOffsetB : Offset position of gameObjectB, in scale. options : { length : undefined , stiffness : 1 , damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. composite composite.bodies : An array of bodies. composite.constraints : An array of constraints","title":"Chain game objects"},{"location":"matterjs-world/#remove-constraint","text":"scene . matter . world . removeConstraint ( constraint );","title":"Remove constraint"},{"location":"matterjs-wrap/","text":"Introduction \u00b6 Automatically wrap the position of bodies and composites such that they always stay within the given bounds. Reference Usage \u00b6 System configuration \u00b6 Game config var config = { // ... physics : { matter : { // ... plugins : { wrap : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableWrapPlugin (); Matter object configuration \u00b6 var options = { // ... plugin : { wrap : { min : { x : 0 , y : 0 }, max : { x : 1024 , y : 1024 } } }, // ... }","title":"Wrap"},{"location":"matterjs-wrap/#introduction","text":"Automatically wrap the position of bodies and composites such that they always stay within the given bounds. Reference","title":"Introduction"},{"location":"matterjs-wrap/#usage","text":"","title":"Usage"},{"location":"matterjs-wrap/#system-configuration","text":"Game config var config = { // ... physics : { matter : { // ... plugins : { wrap : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableWrapPlugin ();","title":"System configuration"},{"location":"matterjs-wrap/#matter-object-configuration","text":"var options = { // ... plugin : { wrap : { min : { x : 0 , y : 0 }, max : { x : 1024 , y : 1024 } } }, // ... }","title":"Matter object configuration"},{"location":"mousewheel/","text":"Introduction \u00b6 Mouse wheel events of phaser. Author: Richard Davey Usage \u00b6 Mouse wheel events \u00b6 Events on touched Game object gameObject . on ( 'wheel' , function ( pointer , dx , dy , dz , event ){ /* ... */ }); Event on input plugin for each touched Game object scene . input . on ( 'gameobjectwheel' , function ( pointer , gameObject , dx , dy , dz , event ){ /* ... */ }); Events to get all touched Game Objects scene . input . on ( 'wheel' , function ( pointer , currentlyOver , dx , dy , dz , event ){ /* ... */ }); Mouse wheel properties \u00b6 pointer.deltaX : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaY : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaZ : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.","title":"Mouse wheel"},{"location":"mousewheel/#introduction","text":"Mouse wheel events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"mousewheel/#usage","text":"","title":"Usage"},{"location":"mousewheel/#mouse-wheel-events","text":"Events on touched Game object gameObject . on ( 'wheel' , function ( pointer , dx , dy , dz , event ){ /* ... */ }); Event on input plugin for each touched Game object scene . input . on ( 'gameobjectwheel' , function ( pointer , gameObject , dx , dy , dz , event ){ /* ... */ }); Events to get all touched Game Objects scene . input . on ( 'wheel' , function ( pointer , currentlyOver , dx , dy , dz , event ){ /* ... */ });","title":"Mouse wheel events"},{"location":"mousewheel/#mouse-wheel-properties","text":"pointer.deltaX : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaY : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaZ : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.","title":"Mouse wheel properties"},{"location":"mousewheeltoupdown/","text":"Introduction \u00b6 Map mouse-wheeling to (up/down) cursor key state. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexMouseWheelToUpDown from './plugins/mousewheeltoupdown.js' ; Install global plugin \u00b6 Install plugin in configuration of game import MouseWheelToUpDownPlugin from './plugins/mousewheeltoupdown-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMouseWheelToUpDown' , plugin : MouseWheelToUpDownPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var mouseWheelToUpDown = scene . plugins . get ( 'rexMouseWheelToUpDown' ). add ( scene ); State of cursor keys \u00b6 var cursorKeys = mouseWheelToUpDown . createCursorKeys (); var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var upKeyDown = mouseWheelToUpDown . up ; var downKeyDown = mouseWheelToUpDown . down ; var noKeyDown = mouseWheelToUpDown . noKey ; Destroy \u00b6 mouseWheelToUpDown . destroy ();","title":"Mouse-wheel to up/down"},{"location":"mousewheeltoupdown/#introduction","text":"Map mouse-wheeling to (up/down) cursor key state. Author: Rex Member of scene","title":"Introduction"},{"location":"mousewheeltoupdown/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"mousewheeltoupdown/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"mousewheeltoupdown/#import-class","text":"import rexMouseWheelToUpDown from './plugins/mousewheeltoupdown.js' ;","title":"Import class"},{"location":"mousewheeltoupdown/#install-global-plugin","text":"Install plugin in configuration of game import MouseWheelToUpDownPlugin from './plugins/mousewheeltoupdown-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMouseWheelToUpDown' , plugin : MouseWheelToUpDownPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"mousewheeltoupdown/#create-instance","text":"var mouseWheelToUpDown = scene . plugins . get ( 'rexMouseWheelToUpDown' ). add ( scene );","title":"Create instance"},{"location":"mousewheeltoupdown/#state-of-cursor-keys","text":"var cursorKeys = mouseWheelToUpDown . createCursorKeys (); var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var upKeyDown = mouseWheelToUpDown . up ; var downKeyDown = mouseWheelToUpDown . down ; var noKeyDown = mouseWheelToUpDown . noKey ;","title":"State of cursor keys"},{"location":"mousewheeltoupdown/#destroy","text":"mouseWheelToUpDown . destroy ();","title":"Destroy"},{"location":"moveto/","text":"Introduction \u00b6 Move game object towards target position with a steady speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexMoveTo from './plugins/moveto.js' ; Install global plugin \u00b6 Install plugin in configuration of game import MoveToPlugin from './plugins/moveto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMoveTo' , plugin : MoveToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var moveTo = scene . plugins . get ( 'rexMoveTo' ). add ( gameObject , { // speed: 400, // rotateToTarget: false }); speed : Moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. Start moving \u00b6 moveTo . moveTo ( x , y ); x , y : Target position or var config = { x : 0 , y : 0 , // speed: 0 } moveTo . moveTo ( config ); Enable \u00b6 Enable (default) moveTo . setEnable (); or moveTo . enable = true ; Disable moveTo . setEnable ( false ); or moveTo . enable = false ; Pause, Resume, stop moving \u00b6 moveTo . pause (); moveTo . resume (); moveTo . stop (); Set speed \u00b6 moveTo . setSpeed ( speed ); // moveTo.speed = speed; Set rotate-to-target \u00b6 moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target Events \u00b6 On reached target moveTo . on ( 'complete' , function ( gameObject , moveTo ){}); // moveTo.once('complete', function(gameObject, moveTo){}); Status \u00b6 Is moving var isRunning = moveTo . isRunning ;","title":"Move to"},{"location":"moveto/#introduction","text":"Move game object towards target position with a steady speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"moveto/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"moveto/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"moveto/#import-class","text":"import rexMoveTo from './plugins/moveto.js' ;","title":"Import class"},{"location":"moveto/#install-global-plugin","text":"Install plugin in configuration of game import MoveToPlugin from './plugins/moveto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMoveTo' , plugin : MoveToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"moveto/#create-instance","text":"var moveTo = scene . plugins . get ( 'rexMoveTo' ). add ( gameObject , { // speed: 400, // rotateToTarget: false }); speed : Moving speed, pixels in second. rotateToTarget : Set true to change angle towards path.","title":"Create instance"},{"location":"moveto/#start-moving","text":"moveTo . moveTo ( x , y ); x , y : Target position or var config = { x : 0 , y : 0 , // speed: 0 } moveTo . moveTo ( config );","title":"Start moving"},{"location":"moveto/#enable","text":"Enable (default) moveTo . setEnable (); or moveTo . enable = true ; Disable moveTo . setEnable ( false ); or moveTo . enable = false ;","title":"Enable"},{"location":"moveto/#pause-resume-stop-moving","text":"moveTo . pause (); moveTo . resume (); moveTo . stop ();","title":"Pause, Resume, stop moving"},{"location":"moveto/#set-speed","text":"moveTo . setSpeed ( speed ); // moveTo.speed = speed;","title":"Set speed"},{"location":"moveto/#set-rotate-to-target","text":"moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target","title":"Set rotate-to-target"},{"location":"moveto/#events","text":"On reached target moveTo . on ( 'complete' , function ( gameObject , moveTo ){}); // moveTo.once('complete', function(gameObject, moveTo){});","title":"Events"},{"location":"moveto/#status","text":"Is moving var isRunning = moveTo . isRunning ;","title":"Status"},{"location":"mustache/","text":"Introduction \u00b6 Format string with variables. Reference Usage \u00b6 var template = 'hello, {{name}}' ; var view = { name : 'rex' }; var result = Mustache . render ( template , view );","title":"Mustache"},{"location":"mustache/#introduction","text":"Format string with variables. Reference","title":"Introduction"},{"location":"mustache/#usage","text":"var template = 'hello, {{name}}' ; var view = { name : 'rex' }; var result = Mustache . render ( template , view );","title":"Usage"},{"location":"ninepatch/","text":"Introduction \u00b6 Stretchable image. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexNinePatchPlugin' , plugin : NinePatchPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var ninePatch = scene . add . rexNinePatch ( x , y , width , height , key , columns , rows , { stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , width , height , { key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , { width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ({ x : 0 , y : 0 , width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); x , y : Position of this object. width , height : Size of this object. key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] , or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] , or [20, undefined, 20] : Height of each row. undefined value will be replaced by remainder value from texture width. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. stretchMode : Stretch mode of edges and internal cells. A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } getFrameNameCallback : Callback to get frame name of each cell. undefined : Use default callback, which will return ${colIndex},${rowIndex} . Function object : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` } Custom class \u00b6 Define class class MyNinePatch extends NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ninePatch = new MyNinePatch ( scene , x , y , width , height , key , columns , rows , config ); Resize \u00b6 ninePatch . resize ( width , height ); Set texture of source image \u00b6 ninePatch . setTexture ( key , columns , rows ); key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] : Width of each column. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] : Height of each row. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. Set stretch mode \u00b6 ninePatch . setStretchMode ( mode ); mode : A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } Set get-frame-name callback \u00b6 ninePatch . setGetFrameNameCallback ( callback ); callback : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Nine patch"},{"location":"ninepatch/#introduction","text":"Stretchable image. Author: Rex Game object","title":"Introduction"},{"location":"ninepatch/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ninepatch/#usage","text":"Sample code","title":"Usage"},{"location":"ninepatch/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexNinePatchPlugin' , plugin : NinePatchPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ninepatch/#create-instance","text":"var ninePatch = scene . add . rexNinePatch ( x , y , width , height , key , columns , rows , { stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , width , height , { key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , { width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ({ x : 0 , y : 0 , width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); x , y : Position of this object. width , height : Size of this object. key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] , or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] , or [20, undefined, 20] : Height of each row. undefined value will be replaced by remainder value from texture width. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. stretchMode : Stretch mode of edges and internal cells. A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } getFrameNameCallback : Callback to get frame name of each cell. undefined : Use default callback, which will return ${colIndex},${rowIndex} . Function object : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Create instance"},{"location":"ninepatch/#custom-class","text":"Define class class MyNinePatch extends NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ninePatch = new MyNinePatch ( scene , x , y , width , height , key , columns , rows , config );","title":"Custom class"},{"location":"ninepatch/#resize","text":"ninePatch . resize ( width , height );","title":"Resize"},{"location":"ninepatch/#set-texture-of-source-image","text":"ninePatch . setTexture ( key , columns , rows ); key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] : Width of each column. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] : Height of each row. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched.","title":"Set texture of source image"},{"location":"ninepatch/#set-stretch-mode","text":"ninePatch . setStretchMode ( mode ); mode : A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' }","title":"Set stretch mode"},{"location":"ninepatch/#set-get-frame-name-callback","text":"ninePatch . setGetFrameNameCallback ( callback ); callback : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Set get-frame-name callback"},{"location":"orientation/","text":"Introduction \u00b6 Get oriention, built-in method of phaser. Author: Richard Davey Usage \u00b6 Orientation \u00b6 var orientation = scene . scale . orientation ; Events \u00b6 On orientation change scene . scale . on ( 'orientationchange' , function ( orientation ) { if ( orientation === Phaser . Scale . PORTRAIT ) { // ... } else if ( orientation === Phaser . Scale . LANDSCAPE ) { // ... } }); Lock orientation \u00b6 scene . scale . lockOrientation ( orientation ) orientation : 'portrait' 'landscape' 'portrait-primary' 'portrait-secondary' 'landscape-primary' 'landscape-secondary' 'default'","title":"Orientation"},{"location":"orientation/#introduction","text":"Get oriention, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"orientation/#usage","text":"","title":"Usage"},{"location":"orientation/#orientation","text":"var orientation = scene . scale . orientation ;","title":"Orientation"},{"location":"orientation/#events","text":"On orientation change scene . scale . on ( 'orientationchange' , function ( orientation ) { if ( orientation === Phaser . Scale . PORTRAIT ) { // ... } else if ( orientation === Phaser . Scale . LANDSCAPE ) { // ... } });","title":"Events"},{"location":"orientation/#lock-orientation","text":"scene . scale . lockOrientation ( orientation ) orientation : 'portrait' 'landscape' 'portrait-primary' 'portrait-secondary' 'landscape-primary' 'landscape-secondary' 'default'","title":"Lock orientation"},{"location":"pad/","text":"Introduction \u00b6 Takes the given string and pads it out, to the length required, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . Pad ( str , len , pad , dir ); str : String, or number. len : Length or result string. pad : The string to pad it out. dir : 1 : Left 2 : Right 3 : Both","title":"Pad"},{"location":"pad/#introduction","text":"Takes the given string and pads it out, to the length required, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"pad/#usage","text":"var result = Phaser . Utils . String . Pad ( str , len , pad , dir ); str : String, or number. len : Length or result string. pad : The string to pad it out. dir : 1 : Left 2 : Right 3 : Both","title":"Usage"},{"location":"particles/","text":"Introduction \u00b6 Particle uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add particle \u00b6 Create a particle manager var particles = scene . add . particles ( key ); Create particle manager and emitters var particles = scene . add . particles ( key , [ emitterConfig0 , emitterConfig1 , // ... ]); or var particles = scene . make . particles ({ key : key , add : true , emitters : [ emitterConfig0 , emitterConfig1 , // ... ] }); Create a particle emitter var emitter = particles . createEmitter ({ // **basic properties of particles** // **initial position** // x: 0, // { min, max }, or { min, max, steps } // y: 0, // { min, max }, or { min, max, steps } // follow: null, // followOffset: { // x: 0, // y: 0 // }, // **emit zone** // emitZone: { // type: 'random', // 'random', or 'edge' // source: geom, // Geom like Circle, or a Path or Curve // **type = edge** // quantity: 1, // stepRate: 0, // yoyo: false, // seamless: true // }, // **target position** // moveToX: // { min, max }, or { min, max, steps } // moveToY: // { min, max }, or { min, max, steps } // **death zone** // deathZone: { // type: 'onEnter', // 'onEnter', or 'onLeave' // source: geom // Geom like Circle or Rect that supports a 'contains' function // } // **angle** // radial: true, // angle: { min: 0, max: 360 }, // { start, end, steps } // **scale** // scale: 1, // { start, end }, // scaleX: 1, // scaleY: 1, // **render** // frame: // one or more texture frames, or a configuration object. // alpha: 1, // { min, max } // visible: true, // tint: 0xffffffff, // a number 0xfffffff, or an array [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ] // blendMode: 'NORMAL', // Phaser.BlendModes // delay: 0, // lifespan: 1000, // { min, max }, or { min, max, steps } // **physics** // speed: // { min, max }, or { min, max, steps } // speedX: // { min, max }, or { min, max, steps } // speedY: // { min, max }, or { min, max, steps } // gravityX: // gravityY: // accelerationX: // accelerationY: // maxVelocityX: 10000, // maxVelocityY: 10000, // **bounce** // bounce: 0, // bounds: nul, // Phaser.Geom.Rectangle, or { x, y, width, height } // collideBottom: true, // collideTop: true, // collideLeft: true, // collideRight : true, // **callback** // emitCallback: null, // emitCallbackScope: null, // deathCallback: null, // deathCallbackScope: null, // **custom particle** // particleClass: Phaser.GameObjects.Particles.Particle // **emitter** // name: '', // on: true, // set false to stop emitter // active: true, // set false to pause emitter and particles // frequency: 0, // -1 for exploding emitter // quantity: 1, // { min, max } // maxParticles: 0, // rotate: 0, // { start, end }, or { start, end, ease }, // timeScale: 1, }); Format of value {min, max} : Pick a random value between min and max {start, end} : Pick values incremented continuously across a range. ( ease = 'Linear' ) {start, end, ease} {start, end, steps} : Pick values incremented by steps across a range. {start, end, random} random : true or false {min, max, steps} : Pick values between min to max, with steps. {onEmit: function(particle, key, t, value) {return value}} : Get return value from a function invoking. on : Controls if the emitter is currently emitting a particle flow (when frequency >= 0). Already alive particles will continue to update until they expire. active : Whether this emitter updates itself and its particles. frequency 0 : One particle flow cycle for each logic update (the maximum flow frequency). > 0 : The time interval between particle flow cycles in ms. -1 : Exploding emitter. maxParticles 0 : Unlimited. > 0 : Hard limit the amount of particle objects. frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } emitZone : Emit zone { type : 'random' , source : geom , } Emit edge { type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true } deathZone { type : 'onEnter' , source : geom } Immortal particle : Set lifespan to Infinity . Emit zone \u00b6 emitter . setEmitZone ({ type : 'random' , source : geom , }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getRandomPoint(point) method Custom zone { getRandomPoint : function ( point ) { // point.x = ... // point.y = ... return point ; } } Zone source \u00b6 Get var source = emitter . emitZone . source ; Clear zone \u00b6 emitter . setEmitZone (); Emit edge \u00b6 emitter . setEmitZone ({ type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getPoints(quantity, stepRate) method Custom edge { getPoints : function ( quantity , stepRate ) { // output = [point0, point1, ...]; // point: Phaser.Math.Vector2, or {x, y} return output ; } } quantity : The number of particles to place on the source edge. Set to 0 to use stepRate instead. stepRate : The distance between each particle. When set, quantity is implied and should be set to 0. yoyo : Whether particles are placed from start to end and then end to start. Default is false . seamless : Whether one endpoint will be removed if it's identical to the other. Default is true . Curve surce \u00b6 Get curve source var source = emitter . emitZone . source ; Update points of curve source emitter . emitZone . updateSource (); Set source to another curve, also update points emitter . emitZone . changeSource ( curve ); Clear edge zone \u00b6 emitter . setEmitZone (); Death zone \u00b6 emitter . setDeathZone ({ type : 'onEnter' , source : geom }); type : 'onEnter' or 'onLeave' source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon Custom source : { contains : function ( x , y ) { // ... return bool ; } } Zone source \u00b6 Get var source = emitter . deathZone . source ; Clear zone \u00b6 emitter . setDeathZone (); Control \u00b6 Start emitter . start (); // set `on` to true Stop emitter . stop (); // set `on` to false Pause emitter . pause (); // set `active` to false Resume emitter . resume (); // set `active` to true Explode emitter . explode ( count , x , y ); Emit emitter . emitParticleAt ( x , y , count ); or emitter . emitParticle ( count , x , y ); Kill all alive particles emitter . killAll () Properties \u00b6 emitter . fromJSON ( config ); Position \u00b6 Emitter Position emitter . setPosition ( x , y ); Follow Start emitter . startFollow ( target ); // emitter.startFollow(target, offsetX, offsetY, trackVisible); trackVisible : Whether the emitter's visible state will track the target's visible state. Stop emitter . stopFollow (); All emitters particles . setPosition ( x , y ); or particles . x = x ; particles . y = y ; Rotation \u00b6 Emitter emitter . setRadial ( bool ); // set true to emit particles in all directions between angle min and max emitter . setAngle ( value ); All emitters particles . setAngle ( angle ); // angle in degrees // particles.setRotation(angle); // angle in radians or particles . angle = angle ; // particles.rotation = angle; Scale \u00b6 Emitter emitter . setScale ( value ); or emitter . setScaleX ( value ); emitter . setScaleY ( value ); All emitters particles . setScale ( value ); // particles.setScale(x, y); or particles . scaleX = scaleX ; particles . scaleY = scaleY ; Render \u00b6 Frame emitter . setFrame ( frames ); // pickRandom = true, quantity = 1 emitter . setFrame ( frames , pickRandom , quantity ); frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } pickRandom : Whether frames should be assigned at random from frames . quantity : The number of consecutive particles that will receive each frame. Alpha emitter . setAlpha ( value ); // value: 0 ~ 1 Visible emitter . setVisible ( visible ); // visible: true/false Blend mode emitter . setBlendMode ( mode ); // Phaser.BlendModes Physics \u00b6 Speed emitter . setSpeed ( value ); or emitter . setSpeedX ( value ); emitter . setSpeedY ( value ); Gravity emitter . setGravity ( x , y ); or emitter . setGravityX ( value ); setGravityY ( value ); Bounds emitter . setBounds ( x , y , width , height ); or emitter . setBounds ( rect ); rect : Phaser.Geom.Rectangle, or { x, y, width, height } Time \u00b6 Lifespan emitter . setLifespan ( value ); // time in ms Frequency emitter . setFrequency ( frequency , quantity ); frequency : The time interval (>= 0) of each flow cycle, in ms; or -1 to put the emitter in explosion mode. quantity : The number of particles to release at each flow cycle or explosion. Quantity \u00b6 emitter . setQuantity ( quantity ); Particles \u00b6 Hard limit the amount of particle objects var count = emitter . maxParticles ; Whether this emitter is at its limit var atLimit = emitter . atLimit (); Alive (active) particles Amount of alive particles var count = emitter . getAliveParticleCount (); Add callback for newly emitted particle var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleEmit ( callback , context ); Clear callback emitter . onParticleEmit (); For each alive particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachAlive ( callback , context ); Dead (inactive) particles Amount of dead particles var count = emitter . getDeadParticleCount (); Add callback for each particle death var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleDeath ( callback , context ); Clear callback emitter . onParticleDeath (); For each dead particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachDead ( callback , context ); Add dead particles into pool emitter . reserve ( count ); Total (alive + dead) number of particles var count = emitter . getParticleCount (); Custom particle class class MyParticle extends Phaser . GameObjects . Particles . Particle { constructor ( emitter ) { super ( emitter ); /* ... */ } update ( delta , step , processors ) { super . update ( delta , step , processors ); /* ... */ } } Properties \u00b6 emitter frame x , y angle (degree), rotation (radians) alpha , tint , color velocityX , velocityY accelerationX , accelerationY maxVelocityX , maxVelocityY bounce scaleX , scaleY life , lifeCurrent , lifeT Gravity well \u00b6 Create a gravity well var well = particles . createGravityWell ( x , y ); //var well = particles.createGravityWell(x, y, power, epsilon, gravity); or var well = particles . createGravityWell ({ // x: 0, // y: 0, // power: 0, // epsilon: 100, // gravity: 50 }); Enable Active well . active = true ; Inactive well . active = false ; Position well . x = x ; well . y = y ; Gravity well . gravity = value ; Power well . power = value ; Custom gravity well var well = { active : true , update : function ( particle ) { // particle.velocityX = // particle.velocityY = } } particles . addGravityWell ( well ); Particles manager \u00b6 Fire all emitters \u00b6 particles . emitParticleAt ( x , y ); // particles.emitParticleAt(x, y, count); Z index of emitters \u00b6 Z index of emitters is the same as particles.emitters (an array). Bring an emitter to top particles . emitters . bringToTop ( emitter ); Send an emitter to bottom particles . emitters . sendToBack ( emitter ); Move an emitter up particles . emitters . moveUp ( emitter ); Move an emitter down particles . emitters . moveDown ( emitter ); Move an emitter to index particles . emitters . moveTo ( emitter , index ); Reverse order particles . emitters . reverse (); Shuffle order particles . emitters . shuffle (); Swap 2 emitters particles . emitters . swap ( emitter0 , emitter1 );","title":"Particles"},{"location":"particles/#introduction","text":"Particle uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"particles/#usage","text":"","title":"Usage"},{"location":"particles/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"particles/#add-particle","text":"Create a particle manager var particles = scene . add . particles ( key ); Create particle manager and emitters var particles = scene . add . particles ( key , [ emitterConfig0 , emitterConfig1 , // ... ]); or var particles = scene . make . particles ({ key : key , add : true , emitters : [ emitterConfig0 , emitterConfig1 , // ... ] }); Create a particle emitter var emitter = particles . createEmitter ({ // **basic properties of particles** // **initial position** // x: 0, // { min, max }, or { min, max, steps } // y: 0, // { min, max }, or { min, max, steps } // follow: null, // followOffset: { // x: 0, // y: 0 // }, // **emit zone** // emitZone: { // type: 'random', // 'random', or 'edge' // source: geom, // Geom like Circle, or a Path or Curve // **type = edge** // quantity: 1, // stepRate: 0, // yoyo: false, // seamless: true // }, // **target position** // moveToX: // { min, max }, or { min, max, steps } // moveToY: // { min, max }, or { min, max, steps } // **death zone** // deathZone: { // type: 'onEnter', // 'onEnter', or 'onLeave' // source: geom // Geom like Circle or Rect that supports a 'contains' function // } // **angle** // radial: true, // angle: { min: 0, max: 360 }, // { start, end, steps } // **scale** // scale: 1, // { start, end }, // scaleX: 1, // scaleY: 1, // **render** // frame: // one or more texture frames, or a configuration object. // alpha: 1, // { min, max } // visible: true, // tint: 0xffffffff, // a number 0xfffffff, or an array [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ] // blendMode: 'NORMAL', // Phaser.BlendModes // delay: 0, // lifespan: 1000, // { min, max }, or { min, max, steps } // **physics** // speed: // { min, max }, or { min, max, steps } // speedX: // { min, max }, or { min, max, steps } // speedY: // { min, max }, or { min, max, steps } // gravityX: // gravityY: // accelerationX: // accelerationY: // maxVelocityX: 10000, // maxVelocityY: 10000, // **bounce** // bounce: 0, // bounds: nul, // Phaser.Geom.Rectangle, or { x, y, width, height } // collideBottom: true, // collideTop: true, // collideLeft: true, // collideRight : true, // **callback** // emitCallback: null, // emitCallbackScope: null, // deathCallback: null, // deathCallbackScope: null, // **custom particle** // particleClass: Phaser.GameObjects.Particles.Particle // **emitter** // name: '', // on: true, // set false to stop emitter // active: true, // set false to pause emitter and particles // frequency: 0, // -1 for exploding emitter // quantity: 1, // { min, max } // maxParticles: 0, // rotate: 0, // { start, end }, or { start, end, ease }, // timeScale: 1, }); Format of value {min, max} : Pick a random value between min and max {start, end} : Pick values incremented continuously across a range. ( ease = 'Linear' ) {start, end, ease} {start, end, steps} : Pick values incremented by steps across a range. {start, end, random} random : true or false {min, max, steps} : Pick values between min to max, with steps. {onEmit: function(particle, key, t, value) {return value}} : Get return value from a function invoking. on : Controls if the emitter is currently emitting a particle flow (when frequency >= 0). Already alive particles will continue to update until they expire. active : Whether this emitter updates itself and its particles. frequency 0 : One particle flow cycle for each logic update (the maximum flow frequency). > 0 : The time interval between particle flow cycles in ms. -1 : Exploding emitter. maxParticles 0 : Unlimited. > 0 : Hard limit the amount of particle objects. frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } emitZone : Emit zone { type : 'random' , source : geom , } Emit edge { type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true } deathZone { type : 'onEnter' , source : geom } Immortal particle : Set lifespan to Infinity .","title":"Add particle"},{"location":"particles/#emit-zone","text":"emitter . setEmitZone ({ type : 'random' , source : geom , }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getRandomPoint(point) method Custom zone { getRandomPoint : function ( point ) { // point.x = ... // point.y = ... return point ; } }","title":"Emit zone"},{"location":"particles/#zone-source","text":"Get var source = emitter . emitZone . source ;","title":"Zone source"},{"location":"particles/#clear-zone","text":"emitter . setEmitZone ();","title":"Clear zone"},{"location":"particles/#emit-edge","text":"emitter . setEmitZone ({ type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getPoints(quantity, stepRate) method Custom edge { getPoints : function ( quantity , stepRate ) { // output = [point0, point1, ...]; // point: Phaser.Math.Vector2, or {x, y} return output ; } } quantity : The number of particles to place on the source edge. Set to 0 to use stepRate instead. stepRate : The distance between each particle. When set, quantity is implied and should be set to 0. yoyo : Whether particles are placed from start to end and then end to start. Default is false . seamless : Whether one endpoint will be removed if it's identical to the other. Default is true .","title":"Emit edge"},{"location":"particles/#curve-surce","text":"Get curve source var source = emitter . emitZone . source ; Update points of curve source emitter . emitZone . updateSource (); Set source to another curve, also update points emitter . emitZone . changeSource ( curve );","title":"Curve surce"},{"location":"particles/#clear-edge-zone","text":"emitter . setEmitZone ();","title":"Clear edge zone"},{"location":"particles/#death-zone","text":"emitter . setDeathZone ({ type : 'onEnter' , source : geom }); type : 'onEnter' or 'onLeave' source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon Custom source : { contains : function ( x , y ) { // ... return bool ; } }","title":"Death zone"},{"location":"particles/#zone-source_1","text":"Get var source = emitter . deathZone . source ;","title":"Zone source"},{"location":"particles/#clear-zone_1","text":"emitter . setDeathZone ();","title":"Clear zone"},{"location":"particles/#control","text":"Start emitter . start (); // set `on` to true Stop emitter . stop (); // set `on` to false Pause emitter . pause (); // set `active` to false Resume emitter . resume (); // set `active` to true Explode emitter . explode ( count , x , y ); Emit emitter . emitParticleAt ( x , y , count ); or emitter . emitParticle ( count , x , y ); Kill all alive particles emitter . killAll ()","title":"Control"},{"location":"particles/#properties","text":"emitter . fromJSON ( config );","title":"Properties"},{"location":"particles/#position","text":"Emitter Position emitter . setPosition ( x , y ); Follow Start emitter . startFollow ( target ); // emitter.startFollow(target, offsetX, offsetY, trackVisible); trackVisible : Whether the emitter's visible state will track the target's visible state. Stop emitter . stopFollow (); All emitters particles . setPosition ( x , y ); or particles . x = x ; particles . y = y ;","title":"Position"},{"location":"particles/#rotation","text":"Emitter emitter . setRadial ( bool ); // set true to emit particles in all directions between angle min and max emitter . setAngle ( value ); All emitters particles . setAngle ( angle ); // angle in degrees // particles.setRotation(angle); // angle in radians or particles . angle = angle ; // particles.rotation = angle;","title":"Rotation"},{"location":"particles/#scale","text":"Emitter emitter . setScale ( value ); or emitter . setScaleX ( value ); emitter . setScaleY ( value ); All emitters particles . setScale ( value ); // particles.setScale(x, y); or particles . scaleX = scaleX ; particles . scaleY = scaleY ;","title":"Scale"},{"location":"particles/#render","text":"Frame emitter . setFrame ( frames ); // pickRandom = true, quantity = 1 emitter . setFrame ( frames , pickRandom , quantity ); frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } pickRandom : Whether frames should be assigned at random from frames . quantity : The number of consecutive particles that will receive each frame. Alpha emitter . setAlpha ( value ); // value: 0 ~ 1 Visible emitter . setVisible ( visible ); // visible: true/false Blend mode emitter . setBlendMode ( mode ); // Phaser.BlendModes","title":"Render"},{"location":"particles/#physics","text":"Speed emitter . setSpeed ( value ); or emitter . setSpeedX ( value ); emitter . setSpeedY ( value ); Gravity emitter . setGravity ( x , y ); or emitter . setGravityX ( value ); setGravityY ( value ); Bounds emitter . setBounds ( x , y , width , height ); or emitter . setBounds ( rect ); rect : Phaser.Geom.Rectangle, or { x, y, width, height }","title":"Physics"},{"location":"particles/#time","text":"Lifespan emitter . setLifespan ( value ); // time in ms Frequency emitter . setFrequency ( frequency , quantity ); frequency : The time interval (>= 0) of each flow cycle, in ms; or -1 to put the emitter in explosion mode. quantity : The number of particles to release at each flow cycle or explosion.","title":"Time"},{"location":"particles/#quantity","text":"emitter . setQuantity ( quantity );","title":"Quantity"},{"location":"particles/#particles","text":"Hard limit the amount of particle objects var count = emitter . maxParticles ; Whether this emitter is at its limit var atLimit = emitter . atLimit (); Alive (active) particles Amount of alive particles var count = emitter . getAliveParticleCount (); Add callback for newly emitted particle var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleEmit ( callback , context ); Clear callback emitter . onParticleEmit (); For each alive particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachAlive ( callback , context ); Dead (inactive) particles Amount of dead particles var count = emitter . getDeadParticleCount (); Add callback for each particle death var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleDeath ( callback , context ); Clear callback emitter . onParticleDeath (); For each dead particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachDead ( callback , context ); Add dead particles into pool emitter . reserve ( count ); Total (alive + dead) number of particles var count = emitter . getParticleCount (); Custom particle class class MyParticle extends Phaser . GameObjects . Particles . Particle { constructor ( emitter ) { super ( emitter ); /* ... */ } update ( delta , step , processors ) { super . update ( delta , step , processors ); /* ... */ } }","title":"Particles"},{"location":"particles/#properties_1","text":"emitter frame x , y angle (degree), rotation (radians) alpha , tint , color velocityX , velocityY accelerationX , accelerationY maxVelocityX , maxVelocityY bounce scaleX , scaleY life , lifeCurrent , lifeT","title":"Properties"},{"location":"particles/#gravity-well","text":"Create a gravity well var well = particles . createGravityWell ( x , y ); //var well = particles.createGravityWell(x, y, power, epsilon, gravity); or var well = particles . createGravityWell ({ // x: 0, // y: 0, // power: 0, // epsilon: 100, // gravity: 50 }); Enable Active well . active = true ; Inactive well . active = false ; Position well . x = x ; well . y = y ; Gravity well . gravity = value ; Power well . power = value ; Custom gravity well var well = { active : true , update : function ( particle ) { // particle.velocityX = // particle.velocityY = } } particles . addGravityWell ( well );","title":"Gravity well"},{"location":"particles/#particles-manager","text":"","title":"Particles manager"},{"location":"particles/#fire-all-emitters","text":"particles . emitParticleAt ( x , y ); // particles.emitParticleAt(x, y, count);","title":"Fire all emitters"},{"location":"particles/#z-index-of-emitters","text":"Z index of emitters is the same as particles.emitters (an array). Bring an emitter to top particles . emitters . bringToTop ( emitter ); Send an emitter to bottom particles . emitters . sendToBack ( emitter ); Move an emitter up particles . emitters . moveUp ( emitter ); Move an emitter down particles . emitters . moveDown ( emitter ); Move an emitter to index particles . emitters . moveTo ( emitter , index ); Reverse order particles . emitters . reverse (); Shuffle order particles . emitters . shuffle (); Swap 2 emitters particles . emitters . swap ( emitter0 , emitter1 );","title":"Z index of emitters"},{"location":"path/","text":"Introduction \u00b6 Path in curves, built-in object of phaser. Author: Richard Davey Usage \u00b6 Add path object \u00b6 var path = scene . add . path (); // var path = scene.add.path(x, y); // curve start from (x, y) or var path = new Phaser . Curves . Path (); // var path = new Phaser.Curves.Path(x, y); // curve start from (x, y) Add path object with curves \u00b6 Curves in JSON var path = scene . add . path ( json ); or var path = new Phaser . Curves . Path ( json ); Add curve \u00b6 Add line \u00b6 Create line object var curve = new Phaser . Curves . Line ( p0 , p1 ); // p0, p1: {x, y} Add to path path . add ( curve ); Add line started from previous end point to next point path . lineTo ( endX , endY ); or path . lineTo ( point ); // point : Phaser.Math.Vector2 Add circle/ellipse/arc \u00b6 Create circle/ellipse/arc object Circle var curve = new Phaser . Curves . Ellipse ( x , y , radius ); Ellipse var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius ); Arc var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Add to path path . add ( curve ); Add circle/ellipse/arc started from previous end point to next point Circle path . circleTo ( radius ); Ellipse path . ellipseTo ( xRadius , yRadius ); Arc path . ellipseTo ( xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Add spline \u00b6 Create spline object var points = [ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]; var curve = new Phaser . Curves . Spline ( points ); or var points = [ x0 , y0 , x1 , y1 , // ... ]; var curve = new Phaser . Curves . Spline ( points ); Add to path path . add ( curve ); Add spline started from previous end point to next point var points = [ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]; path . splineTo ( points ); or var points = [ x0 , y0 , x1 , y1 , // ... ]; path . splineTo ( points ); Append point \u00b6 var point = curve . addPoint ( x , y ); Add quadratic bezier curve \u00b6 Create quadratic bezier curve object var curve = new Phaser . Curves . QuadraticBezier ( startPoint , controlPoint , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point x2 , y2 // end point ]; var curve = new Phaser . Curves . QuadraticBezier ( points ); Add to path path . add ( curve ); Add quadratic bezier curve started from previous end point to next point path . quadraticBezierTo ( endX , endY , controlX , controlY ); or path . quadraticBezierTo ( endPoint , controlPoint ); // point : Phaser.Math.Vector2 Add cubic bezier curve \u00b6 Create quadratic bezier curve object var curve = new Phaser . Curves . CubicBezier ( startPoint , controlPoint1 , controlPoint2 , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point1 x2 , y2 , // control point2 x3 , y3 // end point ]; var curve = new Phaser . Curves . CubicBezier ( points ); Add to path path . add ( curve ); Add cubic bezier curve started from previous end point to next point path . cubicBezierTo ( endX , endY , control1X , control1Y , control2X , control2Y ); or path . cubicBezierTo ( endPoint , controlPoint1 , controlPoint2 ); // point : Phaser.Math.Vector2 Move to point \u00b6 path . moveTo ( x , y ); Add curves from JSON \u00b6 path . fromJSON ( json ); Get curves \u00b6 var curves = path . curves ; Draw on graphics \u00b6 path . draw ( graphics ); Point \u00b6 Get point var out = path . getPoint ( t ); // t: 0 ~ 1 // var out = path.getPoint(t, out); // modify out or var out = curve . getPoint ( t ); // t: 0 ~ 1 // var out = curve.getPoint(t, out); // modify out Distance of path from start point to target point (out) might not linear with t. Get random point var out = path . getRandomPoint (); // var out = path.getRandomPoint(out); // modify out or var out = curve . getRandomPoint (); // var out = curve.getRandomPoint(out); // modify out Get n points var points = path . getPoints ( n ); or var points = curve . getPoints ( n ); Get n points equally spaced out along the curve var points = path . getSpacedPoints ( n ); or var points = curve . getSpacedPoints ( n ); Get points spaced out n distance pixels apart var points = curve . getDistancePoints ( n ) The smaller the distance, the larger the array will be. Path object does NOT support this feature yet. Get start point var out = path . getStartPoint (); // var out = path.getStartPoint(out); // modify out or var out = curve . getStartPoint (); // var out = curve.getStartPoint(out); // modify out Get end point var out = path . getEndPoint (); // var out = path.getEndPoint(out); // modify out or var out = curve . getEndPoint (); // var out = curve.getEndPoint(out); // modify out Get t (0~1) from distance var t = curve . getTFromDistance ( d ); Path object does NOT support this feature yet. Get tangent var out = curve . getTangent ( t ); // t: 0~1 // var out = curve.getTangent(t, out); // modify out Path object does NOT support this feature yet. Length of path \u00b6 var l = path . getLength (); or var l = curve . getLength (); Update length \u00b6 path . updateArcLengths (); or curve . updateArcLengths (); Length of path/curve will be cached. Curves to JSON \u00b6 var json = path . toJSON (); or var json = curve . toJSON (); Bounds \u00b6 Get bounds var out = path . getBounds (); // accuracy = 16 // var out = path.getBounds(out); // var out = path.getBounds(out, accuracy); or var out = curve . getBounds (); // accuracy = 16 // var out = curve.getBounds(out); // var out = curve.getBounds(out, accuracy); out : A rectangle object Destroy \u00b6 path . destroy ();","title":"Path"},{"location":"path/#introduction","text":"Path in curves, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"path/#usage","text":"","title":"Usage"},{"location":"path/#add-path-object","text":"var path = scene . add . path (); // var path = scene.add.path(x, y); // curve start from (x, y) or var path = new Phaser . Curves . Path (); // var path = new Phaser.Curves.Path(x, y); // curve start from (x, y)","title":"Add path object"},{"location":"path/#add-path-object-with-curves","text":"Curves in JSON var path = scene . add . path ( json ); or var path = new Phaser . Curves . Path ( json );","title":"Add path object with curves"},{"location":"path/#add-curve","text":"","title":"Add curve"},{"location":"path/#add-line","text":"Create line object var curve = new Phaser . Curves . Line ( p0 , p1 ); // p0, p1: {x, y} Add to path path . add ( curve ); Add line started from previous end point to next point path . lineTo ( endX , endY ); or path . lineTo ( point ); // point : Phaser.Math.Vector2","title":"Add line"},{"location":"path/#add-circleellipsearc","text":"Create circle/ellipse/arc object Circle var curve = new Phaser . Curves . Ellipse ( x , y , radius ); Ellipse var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius ); Arc var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Add to path path . add ( curve ); Add circle/ellipse/arc started from previous end point to next point Circle path . circleTo ( radius ); Ellipse path . ellipseTo ( xRadius , yRadius ); Arc path . ellipseTo ( xRadius , yRadius , startAngle , endAngle , clockwise , rotation );","title":"Add circle/ellipse/arc"},{"location":"path/#add-spline","text":"Create spline object var points = [ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]; var curve = new Phaser . Curves . Spline ( points ); or var points = [ x0 , y0 , x1 , y1 , // ... ]; var curve = new Phaser . Curves . Spline ( points ); Add to path path . add ( curve ); Add spline started from previous end point to next point var points = [ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]; path . splineTo ( points ); or var points = [ x0 , y0 , x1 , y1 , // ... ]; path . splineTo ( points );","title":"Add spline"},{"location":"path/#append-point","text":"var point = curve . addPoint ( x , y );","title":"Append point"},{"location":"path/#add-quadratic-bezier-curve","text":"Create quadratic bezier curve object var curve = new Phaser . Curves . QuadraticBezier ( startPoint , controlPoint , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point x2 , y2 // end point ]; var curve = new Phaser . Curves . QuadraticBezier ( points ); Add to path path . add ( curve ); Add quadratic bezier curve started from previous end point to next point path . quadraticBezierTo ( endX , endY , controlX , controlY ); or path . quadraticBezierTo ( endPoint , controlPoint ); // point : Phaser.Math.Vector2","title":"Add quadratic bezier curve"},{"location":"path/#add-cubic-bezier-curve","text":"Create quadratic bezier curve object var curve = new Phaser . Curves . CubicBezier ( startPoint , controlPoint1 , controlPoint2 , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point1 x2 , y2 , // control point2 x3 , y3 // end point ]; var curve = new Phaser . Curves . CubicBezier ( points ); Add to path path . add ( curve ); Add cubic bezier curve started from previous end point to next point path . cubicBezierTo ( endX , endY , control1X , control1Y , control2X , control2Y ); or path . cubicBezierTo ( endPoint , controlPoint1 , controlPoint2 ); // point : Phaser.Math.Vector2","title":"Add cubic bezier curve"},{"location":"path/#move-to-point","text":"path . moveTo ( x , y );","title":"Move to point"},{"location":"path/#add-curves-from-json","text":"path . fromJSON ( json );","title":"Add curves from JSON"},{"location":"path/#get-curves","text":"var curves = path . curves ;","title":"Get curves"},{"location":"path/#draw-on-graphics","text":"path . draw ( graphics );","title":"Draw on graphics"},{"location":"path/#point","text":"Get point var out = path . getPoint ( t ); // t: 0 ~ 1 // var out = path.getPoint(t, out); // modify out or var out = curve . getPoint ( t ); // t: 0 ~ 1 // var out = curve.getPoint(t, out); // modify out Distance of path from start point to target point (out) might not linear with t. Get random point var out = path . getRandomPoint (); // var out = path.getRandomPoint(out); // modify out or var out = curve . getRandomPoint (); // var out = curve.getRandomPoint(out); // modify out Get n points var points = path . getPoints ( n ); or var points = curve . getPoints ( n ); Get n points equally spaced out along the curve var points = path . getSpacedPoints ( n ); or var points = curve . getSpacedPoints ( n ); Get points spaced out n distance pixels apart var points = curve . getDistancePoints ( n ) The smaller the distance, the larger the array will be. Path object does NOT support this feature yet. Get start point var out = path . getStartPoint (); // var out = path.getStartPoint(out); // modify out or var out = curve . getStartPoint (); // var out = curve.getStartPoint(out); // modify out Get end point var out = path . getEndPoint (); // var out = path.getEndPoint(out); // modify out or var out = curve . getEndPoint (); // var out = curve.getEndPoint(out); // modify out Get t (0~1) from distance var t = curve . getTFromDistance ( d ); Path object does NOT support this feature yet. Get tangent var out = curve . getTangent ( t ); // t: 0~1 // var out = curve.getTangent(t, out); // modify out Path object does NOT support this feature yet.","title":"Point"},{"location":"path/#length-of-path","text":"var l = path . getLength (); or var l = curve . getLength ();","title":"Length of path"},{"location":"path/#update-length","text":"path . updateArcLengths (); or curve . updateArcLengths (); Length of path/curve will be cached.","title":"Update length"},{"location":"path/#curves-to-json","text":"var json = path . toJSON (); or var json = curve . toJSON ();","title":"Curves to JSON"},{"location":"path/#bounds","text":"Get bounds var out = path . getBounds (); // accuracy = 16 // var out = path.getBounds(out); // var out = path.getBounds(out, accuracy); or var out = curve . getBounds (); // accuracy = 16 // var out = curve.getBounds(out); // var out = curve.getBounds(out, accuracy); out : A rectangle object","title":"Bounds"},{"location":"path/#destroy","text":"path . destroy ();","title":"Destroy"},{"location":"pathfollower/","text":"Introduction \u00b6 Set position of game object on a path . Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPathFollower from './plugins/pathfollower.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PathFollowerPlugin from './plugins/pathfollower-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPathFollower' , plugin : PathFollowerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 // var path = scene.add.path(); var pathFollower = scene . plugins . get ( 'rexPathFollower' ). add ( gameObject , { // path: path, // path object // t: 0, // t: 0~1 // rotateToPath: false, // rotationOffset: 0, // angleOffset: 0 }); path : Path object t : Initial value of property t (0~1) rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian, or angleOffset in degrees Move along path \u00b6 Set pathFollower.t (0~1) to move along path pathFollower . t = t ; // t: 0~1 // pathFollower.setT(t); or tween pathFollower.t var tween = scene . tweens . add ({ targets : pathFollower , t : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , yoyo : false }); Set path \u00b6 pathFollower . setPath ( path ); Set rotate-to-path \u00b6 pathFollower . setRotateToPath ( rotateToPath , rotationOffset ); rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian","title":"Path follower"},{"location":"pathfollower/#introduction","text":"Set position of game object on a path . Author: Rex Behavior of game object","title":"Introduction"},{"location":"pathfollower/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"pathfollower/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"pathfollower/#import-class","text":"import rexPathFollower from './plugins/pathfollower.js' ;","title":"Import class"},{"location":"pathfollower/#install-global-plugin","text":"Install plugin in configuration of game import PathFollowerPlugin from './plugins/pathfollower-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPathFollower' , plugin : PathFollowerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"pathfollower/#create-instance","text":"// var path = scene.add.path(); var pathFollower = scene . plugins . get ( 'rexPathFollower' ). add ( gameObject , { // path: path, // path object // t: 0, // t: 0~1 // rotateToPath: false, // rotationOffset: 0, // angleOffset: 0 }); path : Path object t : Initial value of property t (0~1) rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian, or angleOffset in degrees","title":"Create instance"},{"location":"pathfollower/#move-along-path","text":"Set pathFollower.t (0~1) to move along path pathFollower . t = t ; // t: 0~1 // pathFollower.setT(t); or tween pathFollower.t var tween = scene . tweens . add ({ targets : pathFollower , t : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , yoyo : false });","title":"Move along path"},{"location":"pathfollower/#set-path","text":"pathFollower . setPath ( path );","title":"Set path"},{"location":"pathfollower/#set-rotate-to-path","text":"pathFollower . setRotateToPath ( rotateToPath , rotationOffset ); rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian","title":"Set rotate-to-path"},{"location":"percentage/","text":"Introduction \u00b6 Work out what percentage value is of the range between min and max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Percent ( value , min , max ); result : Percentage/t (0~1). value : The value to determine the percentage of.","title":"Percentage"},{"location":"percentage/#introduction","text":"Work out what percentage value is of the range between min and max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"percentage/#usage","text":"var result = Phaser . Math . Percent ( value , min , max ); result : Percentage/t (0~1). value : The value to determine the percentage of.","title":"Usage"},{"location":"perlin/","text":"Introduction \u00b6 Perlin2/Perlin3 noise and simplex2/simplex3 noise. ( Reference ) Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPerlin from './plugins/perlin.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PerlinPlugin from './plugins/perlin-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPerlin' , plugin : PerlinPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create noise instance \u00b6 var noise = cene . plugins . get ( 'rexPerlin' ). add ( seed ); seed : A seed for this noise, like Math.random() Perlin \u00b6 Perlin2 var value = noise . perlin2 ( x , y ); value : -1 ~ 1 Perlin3 var value = noise . perlin3 ( x , y , z ); value : -1 ~ 1 Simplex \u00b6 Simplex2 var value = noise . simplex2 ( x , y ); value : -1 ~ 1 Simplex3 var value = noise . simplex3 ( x , y , z ); value : -1 ~ 1 Set seed \u00b6 noise . setSeed ( seed );","title":"Perlin"},{"location":"perlin/#introduction","text":"Perlin2/Perlin3 noise and simplex2/simplex3 noise. ( Reference ) Author: Rex Method only","title":"Introduction"},{"location":"perlin/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"perlin/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"perlin/#import-class","text":"import rexPerlin from './plugins/perlin.js' ;","title":"Import class"},{"location":"perlin/#install-global-plugin","text":"Install plugin in configuration of game import PerlinPlugin from './plugins/perlin-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPerlin' , plugin : PerlinPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"perlin/#create-noise-instance","text":"var noise = cene . plugins . get ( 'rexPerlin' ). add ( seed ); seed : A seed for this noise, like Math.random()","title":"Create noise instance"},{"location":"perlin/#perlin","text":"Perlin2 var value = noise . perlin2 ( x , y ); value : -1 ~ 1 Perlin3 var value = noise . perlin3 ( x , y , z ); value : -1 ~ 1","title":"Perlin"},{"location":"perlin/#simplex","text":"Simplex2 var value = noise . simplex2 ( x , y ); value : -1 ~ 1 Simplex3 var value = noise . simplex3 ( x , y , z ); value : -1 ~ 1","title":"Simplex"},{"location":"perlin/#set-seed","text":"noise . setSeed ( seed );","title":"Set seed"},{"location":"pluginsystem/","text":"Introduction \u00b6 Plugin system, built-in system of phaser. Author: Richard Davey Usage \u00b6 Global plugin \u00b6 Load plugin \u00b6 Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { global : [ { key : key , plugin : pluginKlass , start : true // mapping: memberName // member name in each scene instance, optional }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . plugin ( key , url , true ); url : File url or class instance. Get instance \u00b6 var pluginInst = scene . plugins . get ( key ); Scene plugin \u00b6 Load plugin \u00b6 Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { scene : [ { key : key , plugin : pluginKlass , mapping : sceneKey // member name in each scene instance }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance. Get instance \u00b6 var pluginInst = scene [ sceneKey ]; Plugin cache \u00b6 Has custom plugin var hasPlugin = Phaser . Plugins . PluginCache . hasCustom ( key );","title":"Plugin system"},{"location":"pluginsystem/#introduction","text":"Plugin system, built-in system of phaser. Author: Richard Davey","title":"Introduction"},{"location":"pluginsystem/#usage","text":"","title":"Usage"},{"location":"pluginsystem/#global-plugin","text":"","title":"Global plugin"},{"location":"pluginsystem/#load-plugin","text":"Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { global : [ { key : key , plugin : pluginKlass , start : true // mapping: memberName // member name in each scene instance, optional }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . plugin ( key , url , true ); url : File url or class instance.","title":"Load plugin"},{"location":"pluginsystem/#get-instance","text":"var pluginInst = scene . plugins . get ( key );","title":"Get instance"},{"location":"pluginsystem/#scene-plugin","text":"","title":"Scene plugin"},{"location":"pluginsystem/#load-plugin_1","text":"Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { scene : [ { key : key , plugin : pluginKlass , mapping : sceneKey // member name in each scene instance }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance.","title":"Load plugin"},{"location":"pluginsystem/#get-instance_1","text":"var pluginInst = scene [ sceneKey ];","title":"Get instance"},{"location":"pluginsystem/#plugin-cache","text":"Has custom plugin var hasPlugin = Phaser . Plugins . PluginCache . hasCustom ( key );","title":"Plugin cache"},{"location":"popup/","text":"Introduction \u00b6 Scale up (i.e. ease scaleX, scaleY from 0 to 1 ) game object. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Pop up width and height popUp ( gameObject , duration ); // popUp(gameObject, duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only popUp ( gameObject , duration , 'x' ); // popUp(gameObject, duration, 'x', ease); ease : Ease function , default is 'Cubic' . Pop up height only popUp ( gameObject , duration , 'y' ); // popUp(gameObject, duration, 'y', ease); ease : Ease function , default is 'Cubic' .","title":"Pop up"},{"location":"popup/#introduction","text":"Scale up (i.e. ease scaleX, scaleY from 0 to 1 ) game object. Author: Rex Method only","title":"Introduction"},{"location":"popup/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"popup/#usage","text":"Sample code Pop up width and height popUp ( gameObject , duration ); // popUp(gameObject, duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only popUp ( gameObject , duration , 'x' ); // popUp(gameObject, duration, 'x', ease); ease : Ease function , default is 'Cubic' . Pop up height only popUp ( gameObject , duration , 'y' ); // popUp(gameObject, duration, 'y', ease); ease : Ease function , default is 'Cubic' .","title":"Usage"},{"location":"quad/","text":"Introduction \u00b6 Manipulate the corner points of static images, built-in game object of phaser. Author: Richard Davey WebGL only It only works in WebGL render mode. Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add object \u00b6 var quad = scene . add . quad ( x , y , key ); Add quad from JSON var quad = scene . make . quad ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true }); Custom quad class \u00b6 Define class class MyQuad extends Phaser . GameObjects . Quad { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var quad = new MyQuad ( scene , x , y , key ); Properties of corner points \u00b6 Position \u00b6 Get var topLeftX = quad . topLeftX ; var topLeftY = quad . topLeftY ; var topRightX = quad . topRightX ; var topRightY = quad . topRightY ; var bottomLeftX = quad . bottomLeftX ; var bottomLeftY = quad . bottomLeftY ; var bottomRightX = quad . bottomRightX ; var bottomRightY = quad . bottomRightY ; Set quad . topLeftX = topLeftX ; quad . topLeftY = topLeftY ; quad . topRightX = topRightX ; quad . topRightY = topRightY ; quad . bottomLeftX = bottomLeftX ; quad . bottomLeftY = bottomLeftY ; quad . bottomRightX = bottomRightX ; quad . bottomRightY = bottomRightY ; quad . setTopLeft ( x , y ); quad . setTopRight ( x , y ); quad . setBottomLeft ( x , y ); quad . setBottomRight ( x , y ); quad . resetPosition (); Alpha \u00b6 Get var topLeftAlpha = quad . topLeftAlpha ; var topRightAlpha = quad . topRightAlpha ; var bottomLeftAlpha = quad . bottomLeftAlpha ; var bottomRightAlpha = quad . bottomRightAlpha ; Set quad . topLeftAlpha = topLeftAlpha ; quad . topRightAlpha = topRightAlpha ; quad . bottomLeftAlpha = bottomLeftAlpha ; quad . bottomRightAlpha = bottomRightAlpha ; quad . resetAlpha (); Color \u00b6 Get var topLeftColor = quad . topLeftColor ; var topRightColor = quad . topRightColor ; var bottomLeftColor = quad . bottomLeftColor ; var bottomRightColor = quad . bottomRightColor ; Set quad . topLeftColor = topLeftColor ; quad . topRightColor = topRightColor ; quad . bottomLeftColor = bottomLeftColor ; quad . bottomRightColor = bottomRightColor ; quad . resetColors (); Reset all \u00b6 quad . reset (); Set frame \u00b6 quad . setFrame ( frame );","title":"Quad"},{"location":"quad/#introduction","text":"Manipulate the corner points of static images, built-in game object of phaser. Author: Richard Davey WebGL only It only works in WebGL render mode.","title":"Introduction"},{"location":"quad/#usage","text":"","title":"Usage"},{"location":"quad/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"quad/#add-object","text":"var quad = scene . add . quad ( x , y , key ); Add quad from JSON var quad = scene . make . quad ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true });","title":"Add object"},{"location":"quad/#custom-quad-class","text":"Define class class MyQuad extends Phaser . GameObjects . Quad { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var quad = new MyQuad ( scene , x , y , key );","title":"Custom quad class"},{"location":"quad/#properties-of-corner-points","text":"","title":"Properties of corner points"},{"location":"quad/#position","text":"Get var topLeftX = quad . topLeftX ; var topLeftY = quad . topLeftY ; var topRightX = quad . topRightX ; var topRightY = quad . topRightY ; var bottomLeftX = quad . bottomLeftX ; var bottomLeftY = quad . bottomLeftY ; var bottomRightX = quad . bottomRightX ; var bottomRightY = quad . bottomRightY ; Set quad . topLeftX = topLeftX ; quad . topLeftY = topLeftY ; quad . topRightX = topRightX ; quad . topRightY = topRightY ; quad . bottomLeftX = bottomLeftX ; quad . bottomLeftY = bottomLeftY ; quad . bottomRightX = bottomRightX ; quad . bottomRightY = bottomRightY ; quad . setTopLeft ( x , y ); quad . setTopRight ( x , y ); quad . setBottomLeft ( x , y ); quad . setBottomRight ( x , y ); quad . resetPosition ();","title":"Position"},{"location":"quad/#alpha","text":"Get var topLeftAlpha = quad . topLeftAlpha ; var topRightAlpha = quad . topRightAlpha ; var bottomLeftAlpha = quad . bottomLeftAlpha ; var bottomRightAlpha = quad . bottomRightAlpha ; Set quad . topLeftAlpha = topLeftAlpha ; quad . topRightAlpha = topRightAlpha ; quad . bottomLeftAlpha = bottomLeftAlpha ; quad . bottomRightAlpha = bottomRightAlpha ; quad . resetAlpha ();","title":"Alpha"},{"location":"quad/#color","text":"Get var topLeftColor = quad . topLeftColor ; var topRightColor = quad . topRightColor ; var bottomLeftColor = quad . bottomLeftColor ; var bottomRightColor = quad . bottomRightColor ; Set quad . topLeftColor = topLeftColor ; quad . topRightColor = topRightColor ; quad . bottomLeftColor = bottomLeftColor ; quad . bottomRightColor = bottomRightColor ; quad . resetColors ();","title":"Color"},{"location":"quad/#reset-all","text":"quad . reset ();","title":"Reset all"},{"location":"quad/#set-frame","text":"quad . setFrame ( frame );","title":"Set frame"},{"location":"quest/","text":"Introduction \u00b6 Question manager. Author: Rex Member of scene, or game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexQuest from './plugins/quest.js' ; Install global plugin \u00b6 Install plugin in configuration of game import QuestPlugin from './plugins/quest-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexQuest' , plugin : QuestPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Question manager \u00b6 Create question manager instance \u00b6 var questionManager = scene . plugins . get ( 'rexQuest' ). add ({ questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : undefined , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); questions : An array of question objects, or a csv string. An array : Question items array. [ { key : q0 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, { key : q1 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, ] Question object : {key, options, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. options : An array of option objects. Other key-value parameters. Option object : {key, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. Other key-value parameters. A csv string : type,key,param0,param1,... q,q0,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... q,q1,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... Fields in first row type : Type of this row. These values can be redefined via types in configuration object. q : A row of question object. Empty string : A row of option object belong a question object. key : Unique key string. Create a key string '_' + serialNumber if this field does not exist. Other fields. delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } quest : Create a private quest task object. undefined : Don't create a private quest task object. true : Create a private quest task object with default configuration. Configuration of quest task : quest.shuffleQuestions : Set true to shuffle questions. quest.shuffleOptions : Set true to shuffle options. Add questions \u00b6 questionManager . add ( questions , config ); questions : An array of question objects, or a csv string. See questions section in Create question manager instance section. config : delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } Remove question \u00b6 Remove a question object questionManager . remove ( key ); key : An unique key string. Remove all question objects questionManager . removeAll ( key ); Get question \u00b6 Get a question object var question = questionManager . get ( key ); Get all keys of question objects var questionKeys = questionManager . getKeys (); // var out = questionManager.getKeys(out); questionKeys : Array of question key string. Question is existed \u00b6 var isExisted = questionManager . has ( key ); Array of questions \u00b6 var questions = questionManager . questions ; Rearrange items of this questions array to reorder questions in quest task. Get option \u00b6 var option = questionManager . getOption ( question , optionKey ); question : A question object, or a question key string. optionKey : A option key string. Private quest task \u00b6 Create private quest task \u00b6 Each question manager can hava a private quest task object, created when creating question manager , or questionManager . startQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options. Get next question object \u00b6 Get next question object var question = questionManager . getNextQuestion (); Get next question object via question key var question = questionManager . getNextQuestion ( questionKey ); Event \u00b6 Fire 'quest' when calling questionManager.getNextQuestion() questionManager . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task. Is last question \u00b6 var isLast = questionManager . isLastQuestion (); Restart quest task \u00b6 questionManager . restartQuest (); Private data \u00b6 Get data var value = questionManager . getData ( key , defaultValue ); Get all data var data = questionManager . getData (); Set value questionManager . setData ( key , value ); Increase value questionManager . incData ( key , inc , defaultValue ); Multiple value questionManager . mulData ( key , inc , defaultValue ); Clear all data questionManager . clearData (); Quest task \u00b6 Create new quest task if user needs more then 1 quest task. Create quest task \u00b6 var quest = questionManager . newQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options. Get next question object \u00b6 Get next question object var question = quest . getNextQuestion (); Get next question object via question key var question = quest . getNextQuestion ( questionKey ); Event \u00b6 Fire 'quest' when calling questionManager.getNextQuestion() quest . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task. Is last question \u00b6 var isLast = quest . isLastQuestion (); Restart quest task \u00b6 quest . start (); Private data \u00b6 Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData (); Get option \u00b6 var option = quest . getOption ( question , optionKey ); question : A question object, or a question key string, or undefined to get current question object. optionKey : A option key string.","title":"Quest"},{"location":"quest/#introduction","text":"Question manager. Author: Rex Member of scene, or game object","title":"Introduction"},{"location":"quest/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"quest/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"quest/#import-class","text":"import rexQuest from './plugins/quest.js' ;","title":"Import class"},{"location":"quest/#install-global-plugin","text":"Install plugin in configuration of game import QuestPlugin from './plugins/quest-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexQuest' , plugin : QuestPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"quest/#question-manager","text":"","title":"Question manager"},{"location":"quest/#create-question-manager-instance","text":"var questionManager = scene . plugins . get ( 'rexQuest' ). add ({ questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : undefined , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); questions : An array of question objects, or a csv string. An array : Question items array. [ { key : q0 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, { key : q1 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, ] Question object : {key, options, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. options : An array of option objects. Other key-value parameters. Option object : {key, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. Other key-value parameters. A csv string : type,key,param0,param1,... q,q0,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... q,q1,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... Fields in first row type : Type of this row. These values can be redefined via types in configuration object. q : A row of question object. Empty string : A row of option object belong a question object. key : Unique key string. Create a key string '_' + serialNumber if this field does not exist. Other fields. delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } quest : Create a private quest task object. undefined : Don't create a private quest task object. true : Create a private quest task object with default configuration. Configuration of quest task : quest.shuffleQuestions : Set true to shuffle questions. quest.shuffleOptions : Set true to shuffle options.","title":"Create question manager instance"},{"location":"quest/#add-questions","text":"questionManager . add ( questions , config ); questions : An array of question objects, or a csv string. See questions section in Create question manager instance section. config : delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; }","title":"Add questions"},{"location":"quest/#remove-question","text":"Remove a question object questionManager . remove ( key ); key : An unique key string. Remove all question objects questionManager . removeAll ( key );","title":"Remove question"},{"location":"quest/#get-question","text":"Get a question object var question = questionManager . get ( key ); Get all keys of question objects var questionKeys = questionManager . getKeys (); // var out = questionManager.getKeys(out); questionKeys : Array of question key string.","title":"Get question"},{"location":"quest/#question-is-existed","text":"var isExisted = questionManager . has ( key );","title":"Question is existed"},{"location":"quest/#array-of-questions","text":"var questions = questionManager . questions ; Rearrange items of this questions array to reorder questions in quest task.","title":"Array of questions"},{"location":"quest/#get-option","text":"var option = questionManager . getOption ( question , optionKey ); question : A question object, or a question key string. optionKey : A option key string.","title":"Get option"},{"location":"quest/#private-quest-task","text":"","title":"Private quest task"},{"location":"quest/#create-private-quest-task","text":"Each question manager can hava a private quest task object, created when creating question manager , or questionManager . startQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options.","title":"Create private quest task"},{"location":"quest/#get-next-question-object","text":"Get next question object var question = questionManager . getNextQuestion (); Get next question object via question key var question = questionManager . getNextQuestion ( questionKey );","title":"Get next question object"},{"location":"quest/#event","text":"Fire 'quest' when calling questionManager.getNextQuestion() questionManager . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task.","title":"Event"},{"location":"quest/#is-last-question","text":"var isLast = questionManager . isLastQuestion ();","title":"Is last question"},{"location":"quest/#restart-quest-task","text":"questionManager . restartQuest ();","title":"Restart quest task"},{"location":"quest/#private-data","text":"Get data var value = questionManager . getData ( key , defaultValue ); Get all data var data = questionManager . getData (); Set value questionManager . setData ( key , value ); Increase value questionManager . incData ( key , inc , defaultValue ); Multiple value questionManager . mulData ( key , inc , defaultValue ); Clear all data questionManager . clearData ();","title":"Private data"},{"location":"quest/#quest-task","text":"Create new quest task if user needs more then 1 quest task.","title":"Quest task"},{"location":"quest/#create-quest-task","text":"var quest = questionManager . newQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options.","title":"Create quest task"},{"location":"quest/#get-next-question-object_1","text":"Get next question object var question = quest . getNextQuestion (); Get next question object via question key var question = quest . getNextQuestion ( questionKey );","title":"Get next question object"},{"location":"quest/#event_1","text":"Fire 'quest' when calling questionManager.getNextQuestion() quest . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task.","title":"Event"},{"location":"quest/#is-last-question_1","text":"var isLast = quest . isLastQuestion ();","title":"Is last question"},{"location":"quest/#restart-quest-task_1","text":"quest . start ();","title":"Restart quest task"},{"location":"quest/#private-data_1","text":"Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Private data"},{"location":"quest/#get-option_1","text":"var option = quest . getOption ( question , optionKey ); question : A question object, or a question key string, or undefined to get current question object. optionKey : A option key string.","title":"Get option"},{"location":"random-data-generator/","text":"Introduction \u00b6 Get random value from a random generator, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Random data generator \u00b6 Pre-defined random data generator var rnd = Phaser . Math . RND ; New random generator var rnd = new Phaser . Math . RandomDataGenerator ( seed ); Set seed \u00b6 Set seed in game config for pre-defined random data generator var config = { // ... seed : seed , // ... } var game = new Phaser . Game ( config ); seed : An array of string, like [(Date.now() * Math.random()).toString()] Set seed rnd . init ( seed ); seed : A string or an array of string. Get random value \u00b6 Random real number between 0 and 1 . var value = rnd . frac (); Random integer between 0 and 2^32 . var value = rnd . integer (); Random real number between 0 and 2^32. var value = rnd . real (); Random integer between and including min and max. var value = rnd . between ( min , max ); // var value = rnd.integerInRange(min, max); Random real number between min and max. var value = rnd . realInRange ( min , max ); Random real number between -1 and 1. var value = rnd . normal (); Random angle between -180 and 180 . var angle = rnd . angle (); Random rotation in radians, between -3.141 and 3.141 . var angle = rnd . rotation (); Random timestamp between min and max. var timestamp = rnd . timestamp ( min , max ); min : Default value is the beginning of 2000. max : Default value is the end of 2020. UUID var uuid = rnd . uuid (); Random sign value var sign = rnd . sign (); sign : -1 or 1 Get random item \u00b6 Random element from within the given array. var item = rnd . pick ( arr ); Random element from within the given array, favoring the earlier entries. var item = rnd . weightedPick ( arr ); Shuffle array \u00b6 var arr = rnd . shuffle ( arr );","title":"Random data generator"},{"location":"random-data-generator/#introduction","text":"Get random value from a random generator, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"random-data-generator/#usage","text":"","title":"Usage"},{"location":"random-data-generator/#random-data-generator","text":"Pre-defined random data generator var rnd = Phaser . Math . RND ; New random generator var rnd = new Phaser . Math . RandomDataGenerator ( seed );","title":"Random data generator"},{"location":"random-data-generator/#set-seed","text":"Set seed in game config for pre-defined random data generator var config = { // ... seed : seed , // ... } var game = new Phaser . Game ( config ); seed : An array of string, like [(Date.now() * Math.random()).toString()] Set seed rnd . init ( seed ); seed : A string or an array of string.","title":"Set seed"},{"location":"random-data-generator/#get-random-value","text":"Random real number between 0 and 1 . var value = rnd . frac (); Random integer between 0 and 2^32 . var value = rnd . integer (); Random real number between 0 and 2^32. var value = rnd . real (); Random integer between and including min and max. var value = rnd . between ( min , max ); // var value = rnd.integerInRange(min, max); Random real number between min and max. var value = rnd . realInRange ( min , max ); Random real number between -1 and 1. var value = rnd . normal (); Random angle between -180 and 180 . var angle = rnd . angle (); Random rotation in radians, between -3.141 and 3.141 . var angle = rnd . rotation (); Random timestamp between min and max. var timestamp = rnd . timestamp ( min , max ); min : Default value is the beginning of 2000. max : Default value is the end of 2020. UUID var uuid = rnd . uuid (); Random sign value var sign = rnd . sign (); sign : -1 or 1","title":"Get random value"},{"location":"random-data-generator/#get-random-item","text":"Random element from within the given array. var item = rnd . pick ( arr ); Random element from within the given array, favoring the earlier entries. var item = rnd . weightedPick ( arr );","title":"Get random item"},{"location":"random-data-generator/#shuffle-array","text":"var arr = rnd . shuffle ( arr );","title":"Shuffle array"},{"location":"random/","text":"Introduction \u00b6 Get random value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get random integer between (min, max) \u00b6 var value = Phaser . Math . Between ( min , max ); Get random vector \u00b6 var vec = Phaser . Math . RandomXY ( vec ); // return vec {x, y} // var vec = Phaser.Math.RandomXY(vec, scale);","title":"Random number"},{"location":"random/#introduction","text":"Get random value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"random/#usage","text":"","title":"Usage"},{"location":"random/#get-random-integer-between-min-max","text":"var value = Phaser . Math . Between ( min , max );","title":"Get random integer between (min, max)"},{"location":"random/#get-random-vector","text":"var vec = Phaser . Math . RandomXY ( vec ); // return vec {x, y} // var vec = Phaser.Math.RandomXY(vec, scale);","title":"Get random vector"},{"location":"randomplace/","text":"Introduction \u00b6 Place objects randomly inside an area without overlapping. Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRandomPlace from './plugins/randomplace.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RandomPlacePlugin from './plugins/randomplace-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRandomPlace' , plugin : RandomPlacePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Random place \u00b6 scene . plugins . get ( 'rexRandomPlace' ). randomPlace ( items , { radius : radius , getPositionCallback : undefined , area : areaGeomObject , }); items : An array of items. Each item can be A game objects. A plain object contains { gameObject : gameObject , radius : radius , } radius : Collision radius of this game object. radius : Default collision radius of each game object. getPositionCallback : A callback to get a random position. undefined : Use area.getRandomPoint(out) as callback. A function object : function ( out ) { out . x = 0 ; out . y = 0 ; } area : A geom object, which has getRandomPoint method. A circle : new new Phaser.Geom.Circle(x, y, radius) A rectangle : new new Phaser.Geom.Rectangle(x, y, width, height) A triangle : new new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) An ellipse : new new Phaser.Geom.Ellipse(x, y, width, height) undefined : A rectangle (0, 0, gameWidth, gameHeight)","title":"Random place"},{"location":"randomplace/#introduction","text":"Place objects randomly inside an area without overlapping. Author: Rex Methods","title":"Introduction"},{"location":"randomplace/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"randomplace/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"randomplace/#import-class","text":"import rexRandomPlace from './plugins/randomplace.js' ;","title":"Import class"},{"location":"randomplace/#install-global-plugin","text":"Install plugin in configuration of game import RandomPlacePlugin from './plugins/randomplace-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRandomPlace' , plugin : RandomPlacePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"randomplace/#random-place","text":"scene . plugins . get ( 'rexRandomPlace' ). randomPlace ( items , { radius : radius , getPositionCallback : undefined , area : areaGeomObject , }); items : An array of items. Each item can be A game objects. A plain object contains { gameObject : gameObject , radius : radius , } radius : Collision radius of this game object. radius : Default collision radius of each game object. getPositionCallback : A callback to get a random position. undefined : Use area.getRandomPoint(out) as callback. A function object : function ( out ) { out . x = 0 ; out . y = 0 ; } area : A geom object, which has getRandomPoint method. A circle : new new Phaser.Geom.Circle(x, y, radius) A rectangle : new new Phaser.Geom.Rectangle(x, y, width, height) A triangle : new new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) An ellipse : new new Phaser.Geom.Ellipse(x, y, width, height) undefined : A rectangle (0, 0, gameWidth, gameHeight)","title":"Random place"},{"location":"rendertexture/","text":"Introduction \u00b6 Paste textures, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add render texture object \u00b6 Create an empty render texture object. var rt = scene . add . renderTexture ( x , y , width , height ); Create render texture and load texture. var rt = scene . add . renderTexture ( x , y , undefined , undefined , key , frame ); key : The texture key to make the RenderTexture from. frame : The frame to make the RenderTexture from. Add render texture from JSON var rt = scene . make . renderTexture ({ x : 0 , y : 0 , width : 32 , height : 32 , // key: undefined, // frame: undefined, // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Origin position Origin position of this render texture is (0,0) (top-left) Custom class \u00b6 Define class class MyRenderTexture extends Phaser . GameObjects . RenderTexture { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rt = new MyRenderTexture ( scene , x , y , width , height ); Paste texture \u00b6 Paste game object rt . draw ( gameObject , x , y ); // rt.draw(gameObject, x, y, alpha, tint); gameObject : a game object, or an array of game objects Paste game objects in a group rt . draw ( group , x , y ); // rt.draw(group, x, y, alpha, tint); Paste game objects in a scene rt . draw ( scene . children , x , y ); // rt.draw(scene.children, x, y, alpha, tint); Paste texture rt . draw ( key , x , y ); // rt.draw(key, x, y, alpha, tint); or rt . drawFrame ( key , frame , x , y ); // rt.drawFrame(key, frame, x, y, alpha, tint); key : The key of the texture to be used, as stored in the Texture Manager. Global alpha \u00b6 rt . setGlobalAlpha ( alpha ); // rt.globalAlpha = alpha; Global tint \u00b6 rt . setGlobalTint ( tint ); // rt.globalTint = tint; Erase \u00b6 rt . erase ( gameObject , x , y ); gameObject : a game object, or an array of game objects Clear \u00b6 rt . clear (); Fill \u00b6 rt . fill ( rgb , alpha ); // rt.fill(rgb, alpha, x, y, width, height); Set size \u00b6 rt . setSize ( width , height ); // rt.resize(width, height); Save texture \u00b6 Stores a copy of this Render Texture in the Texture Manager using the given key. rt . saveTexture ( key ); Calling saveTexture again will not save another copy of the same texture, it will just rename the key of the existing copy. Internal camera \u00b6 Internal camera rt.camera Scroll (offset) rt . camera . setPosition ( x , y ); Zoom (scale) rt . camera . setZoom ( zoom ); Rotate rt . camera . setAngle ( angle ); // angle in degrees Snapshot \u00b6 Takes a snapshot of the whole of this Render Texture. rt . snapshot ( callback ); // rt.snapshot(callback, type, encoderOptions); Takes a snapshot of the given area of this Render Texture. rt . snapshotArea ( x , y , width , height , callback ); // rt.snapshotArea(x, y, width, height, callback, type, encoderOptions); Takes a snapshot of the given pixel from this Render Texture. rt . snapshotPixel ( x , y , callback ); Other properties \u00b6 See game object Create mask \u00b6 var mask = rt . createBitmapMask (); See mask","title":"Render texture"},{"location":"rendertexture/#introduction","text":"Paste textures, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"rendertexture/#usage","text":"","title":"Usage"},{"location":"rendertexture/#add-render-texture-object","text":"Create an empty render texture object. var rt = scene . add . renderTexture ( x , y , width , height ); Create render texture and load texture. var rt = scene . add . renderTexture ( x , y , undefined , undefined , key , frame ); key : The texture key to make the RenderTexture from. frame : The frame to make the RenderTexture from. Add render texture from JSON var rt = scene . make . renderTexture ({ x : 0 , y : 0 , width : 32 , height : 32 , // key: undefined, // frame: undefined, // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Origin position Origin position of this render texture is (0,0) (top-left)","title":"Add render texture object"},{"location":"rendertexture/#custom-class","text":"Define class class MyRenderTexture extends Phaser . GameObjects . RenderTexture { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rt = new MyRenderTexture ( scene , x , y , width , height );","title":"Custom class"},{"location":"rendertexture/#paste-texture","text":"Paste game object rt . draw ( gameObject , x , y ); // rt.draw(gameObject, x, y, alpha, tint); gameObject : a game object, or an array of game objects Paste game objects in a group rt . draw ( group , x , y ); // rt.draw(group, x, y, alpha, tint); Paste game objects in a scene rt . draw ( scene . children , x , y ); // rt.draw(scene.children, x, y, alpha, tint); Paste texture rt . draw ( key , x , y ); // rt.draw(key, x, y, alpha, tint); or rt . drawFrame ( key , frame , x , y ); // rt.drawFrame(key, frame, x, y, alpha, tint); key : The key of the texture to be used, as stored in the Texture Manager.","title":"Paste texture"},{"location":"rendertexture/#global-alpha","text":"rt . setGlobalAlpha ( alpha ); // rt.globalAlpha = alpha;","title":"Global alpha"},{"location":"rendertexture/#global-tint","text":"rt . setGlobalTint ( tint ); // rt.globalTint = tint;","title":"Global tint"},{"location":"rendertexture/#erase","text":"rt . erase ( gameObject , x , y ); gameObject : a game object, or an array of game objects","title":"Erase"},{"location":"rendertexture/#clear","text":"rt . clear ();","title":"Clear"},{"location":"rendertexture/#fill","text":"rt . fill ( rgb , alpha ); // rt.fill(rgb, alpha, x, y, width, height);","title":"Fill"},{"location":"rendertexture/#set-size","text":"rt . setSize ( width , height ); // rt.resize(width, height);","title":"Set size"},{"location":"rendertexture/#save-texture","text":"Stores a copy of this Render Texture in the Texture Manager using the given key. rt . saveTexture ( key ); Calling saveTexture again will not save another copy of the same texture, it will just rename the key of the existing copy.","title":"Save texture"},{"location":"rendertexture/#internal-camera","text":"Internal camera rt.camera Scroll (offset) rt . camera . setPosition ( x , y ); Zoom (scale) rt . camera . setZoom ( zoom ); Rotate rt . camera . setAngle ( angle ); // angle in degrees","title":"Internal camera"},{"location":"rendertexture/#snapshot","text":"Takes a snapshot of the whole of this Render Texture. rt . snapshot ( callback ); // rt.snapshot(callback, type, encoderOptions); Takes a snapshot of the given area of this Render Texture. rt . snapshotArea ( x , y , width , height , callback ); // rt.snapshotArea(x, y, width, height, callback, type, encoderOptions); Takes a snapshot of the given pixel from this Render Texture. rt . snapshotPixel ( x , y , callback );","title":"Snapshot"},{"location":"rendertexture/#other-properties","text":"See game object","title":"Other properties"},{"location":"rendertexture/#create-mask","text":"var mask = rt . createBitmapMask (); See mask","title":"Create mask"},{"location":"restorabledata/","text":"Introduction \u00b6 Restorable data manager, extends from built-in data manager . Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRData from './plugins/restorabledata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RDataPlugin from './plugins/restorabledata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRData' , plugin : RDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var data = scene . plugins . get ( 'rexRData' ). add ( parent ); // var data = scene.plugins.get('rexRData').add(parent, eventEmitter); parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter . Get/set/remove value \u00b6 See built-in data manager . Commit \u00b6 Commit current data status into repository, and increase current version number. data . commit (); or data . commit ( alias ); alias : A version alias string. Restore \u00b6 Restore data status to a specific version. data . restore ( version ); or data . version = version ; version : Version number or version alias string. Rebuild data status from version 0 to a specific version. data . restore ( version , true ); version : Version number or version alias string. Reverse data status to last version. data . restore (); Version \u00b6 Get current version alias string var version = data . versionAlias ; Get all version alias strings var aliases = data . versionAliases ; Get current version number var version = data . version ; Get last version number var version = data . lastVersion ; Version starts from 0 which has no data. Each data.commit() will increase this version number. Save/load status \u00b6 Get current status via JSON string var s = JSON . stringify ( data ); Load status via JSON string data . resetFromJSON ( JSON . parse ( s ));","title":"Restorable data"},{"location":"restorabledata/#introduction","text":"Restorable data manager, extends from built-in data manager . Author: Rex Member of scene","title":"Introduction"},{"location":"restorabledata/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"restorabledata/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"restorabledata/#import-class","text":"import rexRData from './plugins/restorabledata.js' ;","title":"Import class"},{"location":"restorabledata/#install-global-plugin","text":"Install plugin in configuration of game import RDataPlugin from './plugins/restorabledata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRData' , plugin : RDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"restorabledata/#create-instance","text":"var data = scene . plugins . get ( 'rexRData' ). add ( parent ); // var data = scene.plugins.get('rexRData').add(parent, eventEmitter); parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter .","title":"Create instance"},{"location":"restorabledata/#getsetremove-value","text":"See built-in data manager .","title":"Get/set/remove value"},{"location":"restorabledata/#commit","text":"Commit current data status into repository, and increase current version number. data . commit (); or data . commit ( alias ); alias : A version alias string.","title":"Commit"},{"location":"restorabledata/#restore","text":"Restore data status to a specific version. data . restore ( version ); or data . version = version ; version : Version number or version alias string. Rebuild data status from version 0 to a specific version. data . restore ( version , true ); version : Version number or version alias string. Reverse data status to last version. data . restore ();","title":"Restore"},{"location":"restorabledata/#version","text":"Get current version alias string var version = data . versionAlias ; Get all version alias strings var aliases = data . versionAliases ; Get current version number var version = data . version ; Get last version number var version = data . lastVersion ; Version starts from 0 which has no data. Each data.commit() will increase this version number.","title":"Version"},{"location":"restorabledata/#saveload-status","text":"Get current status via JSON string var s = JSON . stringify ( data ); Load status via JSON string data . resetFromJSON ( JSON . parse ( s ));","title":"Save/load status"},{"location":"reverse-string/","text":"Introduction \u00b6 Reverses string, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . ReverseString ( str );","title":"Reverse"},{"location":"reverse-string/#introduction","text":"Reverses string, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"reverse-string/#usage","text":"var result = Phaser . Utils . String . ReverseString ( str );","title":"Usage"},{"location":"rexvideo/","text":"Introduction \u00b6 Play video on DOM , or on canvas. Author: Rex DOM Game object , or Canvas Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexVideoPlugin' , plugin : VideoPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); To play video on DOM Set parent to divId Set dom.createContainer to true . Add video object \u00b6 Video on DOM var video = scene . add . rexVideo ( x , y , width , height , config ); // var video = scene.add.rexVideo(x, y, config); // var video = scene.add.rexVideo(config); Video on canvas var video = scene . add . rexVideoCanvas ( x , y , width , height , config ); // var video = scene.add.rexVideoCanvas(x, y, config); // var video = scene.add.rexVideoCanvas(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , // Element properties src : url , // src: { // webm: webmFileURL, // ogg: oggFileURL, // mp4: mp4FileURL, // h264: h264FileURL, // } id : undefined , autoPlay : true , controls : false , loop : false , muted : false , playsInline : true , crossOrigin : 'anonymous' , playbackTimeChangeEventEnable : true , } x , y : Position width , height : Size of element Element properties src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. id : id element property. autoPlay : autoplay element property. controls : controls element property. loop : loop element property. muted : muted element property. playsInline : playsInline element property. crossOrigin : crossOrigin element property. playbackTimeChangeEventEnable : Set false to disable playbacktimechange event. Different between rexVideo and rexVideoCanvas \u00b6 rexVideo plays video on DOM. DOM object always above game canvas. Won't be affected by webgl shader. Right clicks to pop up a menu. rexVideoCanvas plays video on canvas. Can be placed between game objects via depth setting. Can be affected by webgl shader. Custom class \u00b6 Define class class MyVideo extends Video { // or VideoCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta) // } // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var video = new MyVideo ( scene , x , y , width , height , config ); Load \u00b6 video . load ( src ); src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. Play \u00b6 video . play (); Pause \u00b6 video . pause (); Playback time \u00b6 Get var playbackTime = video . playbackTime ; // time in seconds var t = video . t ; // t: 0~1 Set video . setPlaybackTime ( time ); // time in seconds // video.playbackTime = time; video . setT ( t ); // t: 0~1 // video.t = t; Duration \u00b6 var duration = video . duration ; // time in seconds Volume \u00b6 Get var volume = video . volume ; // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 // video.volume = volume; Mute \u00b6 Get var muted = video . muted ; // muted: true/false Set video . setMute ( muted ); // muted: true/false // video.muted = muted; Loop \u00b6 Get var loop = video . loop ; // loop: true/false Set video . setLoop ( loop ); // loop: true/false // video.loop = loop; Resize \u00b6 video . resize ( width , height ); Status \u00b6 Is playing var isPlaying = video . isPlaying ; Is paused var isPaused = video . isPaused ; Has end var hasEnded = video . hasEnded ; Ready state var readyState = video . readyState ; 0 = HAVE_NOTHING - no information whether or not the audio/video is ready 1 = HAVE_METADATA - metadata for the audio/video is ready 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available 4 = HAVE_ENOUGH_DATA - enough data available to start playing Events \u00b6 Load start video . on ( 'loadstart' , function ( video ){ }, scope ); Can play video . on ( 'canplay' , function ( video ){ }, scope ); Can play through video . on ( 'canplaythrough' , function ( video ){ }, scope ); Playing video . on ( 'playing' , function ( video ){ }, scope ); Pause video . on ( 'pause' , function ( video ){ }, scope ); Stalled video . on ( 'stalled' , function ( video ){ }, scope ); Ended video . on ( 'ended' , function ( video ){ }, scope ); Error video . on ( 'error' , function ( video ){ }, scope ); Playback time changed video . on ( 'playbacktimechange' , function ( video ){ }, scope ); Set playbackTimeChangeEventEnable to true to enable this event.","title":"Rexvideo"},{"location":"rexvideo/#introduction","text":"Play video on DOM , or on canvas. Author: Rex DOM Game object , or Canvas Game object","title":"Introduction"},{"location":"rexvideo/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"rexvideo/#usage","text":"Sample code","title":"Usage"},{"location":"rexvideo/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexVideoPlugin' , plugin : VideoPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); To play video on DOM Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"rexvideo/#add-video-object","text":"Video on DOM var video = scene . add . rexVideo ( x , y , width , height , config ); // var video = scene.add.rexVideo(x, y, config); // var video = scene.add.rexVideo(config); Video on canvas var video = scene . add . rexVideoCanvas ( x , y , width , height , config ); // var video = scene.add.rexVideoCanvas(x, y, config); // var video = scene.add.rexVideoCanvas(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , // Element properties src : url , // src: { // webm: webmFileURL, // ogg: oggFileURL, // mp4: mp4FileURL, // h264: h264FileURL, // } id : undefined , autoPlay : true , controls : false , loop : false , muted : false , playsInline : true , crossOrigin : 'anonymous' , playbackTimeChangeEventEnable : true , } x , y : Position width , height : Size of element Element properties src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. id : id element property. autoPlay : autoplay element property. controls : controls element property. loop : loop element property. muted : muted element property. playsInline : playsInline element property. crossOrigin : crossOrigin element property. playbackTimeChangeEventEnable : Set false to disable playbacktimechange event.","title":"Add video object"},{"location":"rexvideo/#different-between-rexvideo-and-rexvideocanvas","text":"rexVideo plays video on DOM. DOM object always above game canvas. Won't be affected by webgl shader. Right clicks to pop up a menu. rexVideoCanvas plays video on canvas. Can be placed between game objects via depth setting. Can be affected by webgl shader.","title":"Different between rexVideo and rexVideoCanvas"},{"location":"rexvideo/#custom-class","text":"Define class class MyVideo extends Video { // or VideoCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta) // } // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var video = new MyVideo ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"rexvideo/#load","text":"video . load ( src ); src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format.","title":"Load"},{"location":"rexvideo/#play","text":"video . play ();","title":"Play"},{"location":"rexvideo/#pause","text":"video . pause ();","title":"Pause"},{"location":"rexvideo/#playback-time","text":"Get var playbackTime = video . playbackTime ; // time in seconds var t = video . t ; // t: 0~1 Set video . setPlaybackTime ( time ); // time in seconds // video.playbackTime = time; video . setT ( t ); // t: 0~1 // video.t = t;","title":"Playback time"},{"location":"rexvideo/#duration","text":"var duration = video . duration ; // time in seconds","title":"Duration"},{"location":"rexvideo/#volume","text":"Get var volume = video . volume ; // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 // video.volume = volume;","title":"Volume"},{"location":"rexvideo/#mute","text":"Get var muted = video . muted ; // muted: true/false Set video . setMute ( muted ); // muted: true/false // video.muted = muted;","title":"Mute"},{"location":"rexvideo/#loop","text":"Get var loop = video . loop ; // loop: true/false Set video . setLoop ( loop ); // loop: true/false // video.loop = loop;","title":"Loop"},{"location":"rexvideo/#resize","text":"video . resize ( width , height );","title":"Resize"},{"location":"rexvideo/#status","text":"Is playing var isPlaying = video . isPlaying ; Is paused var isPaused = video . isPaused ; Has end var hasEnded = video . hasEnded ; Ready state var readyState = video . readyState ; 0 = HAVE_NOTHING - no information whether or not the audio/video is ready 1 = HAVE_METADATA - metadata for the audio/video is ready 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available 4 = HAVE_ENOUGH_DATA - enough data available to start playing","title":"Status"},{"location":"rexvideo/#events","text":"Load start video . on ( 'loadstart' , function ( video ){ }, scope ); Can play video . on ( 'canplay' , function ( video ){ }, scope ); Can play through video . on ( 'canplaythrough' , function ( video ){ }, scope ); Playing video . on ( 'playing' , function ( video ){ }, scope ); Pause video . on ( 'pause' , function ( video ){ }, scope ); Stalled video . on ( 'stalled' , function ( video ){ }, scope ); Ended video . on ( 'ended' , function ( video ){ }, scope ); Error video . on ( 'error' , function ( video ){ }, scope ); Playback time changed video . on ( 'playbacktimechange' , function ( video ){ }, scope ); Set playbackTimeChangeEventEnable to true to enable this event.","title":"Events"},{"location":"rotateto/","text":"Introduction \u00b6 Rotate game object towards target position with a steady speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRotateTo from './plugins/rotateto.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RotateToPlugin from './plugins/rotateto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRotateTo' , plugin : RotateToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var rotateTo = scene . plugins . get ( 'rexRotateTo' ). add ( gameObject , { // speed: 180 }); speed : Turn speed, degrees in second Start moving \u00b6 Rotate game object towards position \u00b6 Shortest angle rotateTo . rotateTowardsPosition ( x , y ); x , y : Target position Clockwise/counter-clockwise rotateTo . rotateTowardsPosition ( x , y , dir ); dir : 0 : Shortest angle 1 , or 'cw' : Clockwise 2 , or 'ccw' : Counter-clockwise Rotate game object to angle \u00b6 Shortest angle rotateTo . rotateTo ( angle ); angle : Target angle in degrees Clockwise/counter-clockwise rotateTo . rotateTo ( angle , dir ); // rotateTo.rotateTo(angle, dir, speed); dir : 0 : Shortest angle 1 , or cw : Clockwise 2 , or ccw : Counter-clockwise Enable \u00b6 Enable (default) rotateTo . setEnable (); or rotateTo . enable = true ; Disable rotateTo . setEnable ( false ); or rotateTo . enable = false ; Pause, Resume, stop rotating \u00b6 rotateTo . pause (); rotateTo . resume (); rotateTo . stop (); Set speed \u00b6 rotateTo . setSpeed ( speed ); // rotateTo.speed = speed; speed : Turn speed, degrees in second Events \u00b6 On reached target rotateTo . on ( 'complete' , function ( gameObject , rotateTo ){}); Status \u00b6 Is moving var isRunning = rotateTo . isRunning ;","title":"Rotate to"},{"location":"rotateto/#introduction","text":"Rotate game object towards target position with a steady speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"rotateto/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"rotateto/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"rotateto/#import-class","text":"import rexRotateTo from './plugins/rotateto.js' ;","title":"Import class"},{"location":"rotateto/#install-global-plugin","text":"Install plugin in configuration of game import RotateToPlugin from './plugins/rotateto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRotateTo' , plugin : RotateToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"rotateto/#create-instance","text":"var rotateTo = scene . plugins . get ( 'rexRotateTo' ). add ( gameObject , { // speed: 180 }); speed : Turn speed, degrees in second","title":"Create instance"},{"location":"rotateto/#start-moving","text":"","title":"Start moving"},{"location":"rotateto/#rotate-game-object-towards-position","text":"Shortest angle rotateTo . rotateTowardsPosition ( x , y ); x , y : Target position Clockwise/counter-clockwise rotateTo . rotateTowardsPosition ( x , y , dir ); dir : 0 : Shortest angle 1 , or 'cw' : Clockwise 2 , or 'ccw' : Counter-clockwise","title":"Rotate game object towards position"},{"location":"rotateto/#rotate-game-object-to-angle","text":"Shortest angle rotateTo . rotateTo ( angle ); angle : Target angle in degrees Clockwise/counter-clockwise rotateTo . rotateTo ( angle , dir ); // rotateTo.rotateTo(angle, dir, speed); dir : 0 : Shortest angle 1 , or cw : Clockwise 2 , or ccw : Counter-clockwise","title":"Rotate game object to angle"},{"location":"rotateto/#enable","text":"Enable (default) rotateTo . setEnable (); or rotateTo . enable = true ; Disable rotateTo . setEnable ( false ); or rotateTo . enable = false ;","title":"Enable"},{"location":"rotateto/#pause-resume-stop-rotating","text":"rotateTo . pause (); rotateTo . resume (); rotateTo . stop ();","title":"Pause, Resume, stop rotating"},{"location":"rotateto/#set-speed","text":"rotateTo . setSpeed ( speed ); // rotateTo.speed = speed; speed : Turn speed, degrees in second","title":"Set speed"},{"location":"rotateto/#events","text":"On reached target rotateTo . on ( 'complete' , function ( gameObject , rotateTo ){});","title":"Events"},{"location":"rotateto/#status","text":"Is moving var isRunning = rotateTo . isRunning ;","title":"Status"},{"location":"runcommands/","text":"Introduction \u00b6 Run commands in array. Author: Rex Method only Source code \u00b6 Link Usage \u00b6 Sample code Run commands \u00b6 runCommands ( commands , scope ); Format of command : [ fnName , param0 , param1 , ...] or [ callback , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] Run command : scope [ fnName ]. call ( scope , param0 , param1 ...) or callback . call ( scope , param0 , param1 ...)","title":"Run commands"},{"location":"runcommands/#introduction","text":"Run commands in array. Author: Rex Method only","title":"Introduction"},{"location":"runcommands/#source-code","text":"Link","title":"Source code"},{"location":"runcommands/#usage","text":"Sample code","title":"Usage"},{"location":"runcommands/#run-commands","text":"runCommands ( commands , scope ); Format of command : [ fnName , param0 , param1 , ...] or [ callback , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] Run command : scope [ fnName ]. call ( scope , param0 , param1 ...) or callback . call ( scope , param0 , param1 ...)","title":"Run commands"},{"location":"scaledowndestroy/","text":"Introduction \u00b6 Scale down (i.e. ease scaleX, scaleY to 0 ) game object then destroy it. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Scale down \u00b6 Scale down width and height var scale = scaleDownDestroy ( gameObject , duration ); // var scale = scaleDownDestroy(gameObject, duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only var scale = scaleDownDestroy ( gameObject , duration , 'x' ); // var scale = scaleDownDestroy(gameObject, duration, 'x', ease); Scale down height only var scale = scaleDownDestroy ( gameObject , duration , 'y' ); // var scale = scaleDownDestroy(gameObject, duration, 'y', ease); Events \u00b6 See Events of tween task Scale completes or is stopped. scale . on ( 'complete' , function ( scale , gameObject ){ }, scope );","title":"Scale down destroy"},{"location":"scaledowndestroy/#introduction","text":"Scale down (i.e. ease scaleX, scaleY to 0 ) game object then destroy it. Author: Rex Method only","title":"Introduction"},{"location":"scaledowndestroy/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"scaledowndestroy/#usage","text":"Sample code","title":"Usage"},{"location":"scaledowndestroy/#scale-down","text":"Scale down width and height var scale = scaleDownDestroy ( gameObject , duration ); // var scale = scaleDownDestroy(gameObject, duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only var scale = scaleDownDestroy ( gameObject , duration , 'x' ); // var scale = scaleDownDestroy(gameObject, duration, 'x', ease); Scale down height only var scale = scaleDownDestroy ( gameObject , duration , 'y' ); // var scale = scaleDownDestroy(gameObject, duration, 'y', ease);","title":"Scale down"},{"location":"scaledowndestroy/#events","text":"See Events of tween task Scale completes or is stopped. scale . on ( 'complete' , function ( scale , gameObject ){ }, scope );","title":"Events"},{"location":"scalemanager/","text":"Introduction \u00b6 Scale game window, built-in method of phaser. Author: Richard Davey Usage \u00b6 Setup \u00b6 Setup scale mode in game configuration . var config = { // ... parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, autoRound : false // ... }; var game = new Phaser . Game ( config ); scale.mode : Phaser.Scale.NONE : No scaling happens at all. Phaser.Scale.FIT : 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. Phaser.Scale.ENVELOP : 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. Phaser.Scale.WIDTH_CONTROLS_HEIGHT : The height is automatically adjusted based on the width. Phaser.Scale.HEIGHT_CONTROLS_WIDTH : The width is automatically adjusted based on the height. Phaser.Scale.RESIZE : The Canvas is resized to fit all available parent space, regardless of aspect ratio. scale.autoCenter : Phaser.Scale.NO_CENTER : The game canvas is not centered within the parent by Phaser. Phaser.Scale.CENTER_BOTH : The game canvas is centered both horizontally and vertically within the parent. Phaser.Scale.CENTER_HORIZONTALLY : The game canvas is centered horizontally within the parent. Phaser.Scale.CENTER_VERTICALLY : The game canvas is centered both vertically within the parent. Resize canvas element \u00b6 scene . scale . resize ( width , height ); Modify the size of the Phaser canvas element directly. You should only use this if you are using the NO_SCALE scale mode, Set game size \u00b6 scene . scale . setGameSize ( width , height ); 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. FIT . If you're using NO_SCALE and wish to change the game and canvas size directly, then please use the resize method instead. Events \u00b6 scene . scale . on ( 'resize' , function ( gameSize , baseSize , displaySize , resolution , previousWidth , previousHeight ) {}); gameSize gameSize.width , gameSize.height baseSize baseSize.width , baseSize.height displaySize displaySize.width , displaySize.height","title":"Scale manager"},{"location":"scalemanager/#introduction","text":"Scale game window, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"scalemanager/#usage","text":"","title":"Usage"},{"location":"scalemanager/#setup","text":"Setup scale mode in game configuration . var config = { // ... parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, autoRound : false // ... }; var game = new Phaser . Game ( config ); scale.mode : Phaser.Scale.NONE : No scaling happens at all. Phaser.Scale.FIT : 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. Phaser.Scale.ENVELOP : 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. Phaser.Scale.WIDTH_CONTROLS_HEIGHT : The height is automatically adjusted based on the width. Phaser.Scale.HEIGHT_CONTROLS_WIDTH : The width is automatically adjusted based on the height. Phaser.Scale.RESIZE : The Canvas is resized to fit all available parent space, regardless of aspect ratio. scale.autoCenter : Phaser.Scale.NO_CENTER : The game canvas is not centered within the parent by Phaser. Phaser.Scale.CENTER_BOTH : The game canvas is centered both horizontally and vertically within the parent. Phaser.Scale.CENTER_HORIZONTALLY : The game canvas is centered horizontally within the parent. Phaser.Scale.CENTER_VERTICALLY : The game canvas is centered both vertically within the parent.","title":"Setup"},{"location":"scalemanager/#resize-canvas-element","text":"scene . scale . resize ( width , height ); Modify the size of the Phaser canvas element directly. You should only use this if you are using the NO_SCALE scale mode,","title":"Resize canvas element"},{"location":"scalemanager/#set-game-size","text":"scene . scale . setGameSize ( width , height ); 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. FIT . If you're using NO_SCALE and wish to change the game and canvas size directly, then please use the resize method instead.","title":"Set game size"},{"location":"scalemanager/#events","text":"scene . scale . on ( 'resize' , function ( gameSize , baseSize , displaySize , resolution , previousWidth , previousHeight ) {}); gameSize gameSize.width , gameSize.height baseSize baseSize.width , baseSize.height displaySize displaySize.width , displaySize.height","title":"Events"},{"location":"scene/","text":"Define a scene \u00b6 Configuration of scene \u00b6 var config = { key : '' , // active: false, // visible: true, // pack: false, // cameras: null, // map: {}, // physics: {}, // loader: {}, // plugins: false, // input: {} }; key : The unique key of this Scene. Must be unique within the entire Game instance. active : Does the Scene start as active or not? An active Scene updates each step. visible : Does the Scene start as visible or not? A visible Scene renders each step. pack : An optional Loader Packfile to be loaded before the Scene begins. cameras : An optional Camera configuration object . { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } map : Overwrites the default injection map for a scene. physics : The physics configuration object for the Scene. { default : 'arcade' , // 'impact', or 'matter' arcade : {...}, matter : {...} } arcade : Arcade Physics configuration . matter : Matter Physics configuration . loader : The loader configuration object for the Scene. { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 } plugins : The plugin configuration object for the Scene. { global : [ //{key, plugin, start} ], scene : [ // ... ] } input : The input configuration object for the Scene. { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , } ES6 class \u00b6 class MyScene extends Phaser . Scene { constructor ( config ) { super ( config ); } init ( data ) {} preload () {} create ( data ) {} update ( time , delta ) {} } data : Parameters passed from starting scene Class \u00b6 var MyScene = new Phaser . Class ({ Extends : Phaser . Scene , initialize : function MyScene ( config ) { Phaser . Scene . call ( this , config ) }, init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }); data : Parameters passed from starting scene var MyGame = {}; MyGame . Boot = function () { }; MyGame . Boot . prototype . constructor = MyGame . Boot ; MyGame . Boot . prototype = { init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }; data : Parameters passed from starting scene Override \u00b6 var demo = new Phaser . Scene ( 'Demo' ); demo . init = function ( data ){}; demo . preload = function (){}; demo . create = function ( data ){}; demo . update = function ( time , delta ){}; data : Parameters passed from starting scene Flow chart \u00b6 graph TB subgraph Stop SceneEventDestroy>\"scene.events: destroy\"] Stop[\"Shutdown<br>Free game objects\"] end subgraph Update SceneUpdate[\"Run: Every tick<br>scene.update()\"] SceneEventPauseSleep>\"scene.events: pause<br>scene.events: sleep\"] Pause[\"Pause: render but no update<br>Sleep: no update, no render\"] SceneEventResumeWake>\"scene.events: resume<br>scene.events: wake\"] end subgraph Create SceneEventStart>\"scene.events: start\"] SceneInit[\"scene.init()\"] ScenePreLoad[\"Load assets<br>scene.preload()\"] SceneCreate[\"Create game objects<br>scene.create()\"] end Start((Start)) --> SceneEventStart SceneEventStart --> SceneInit SceneInit --> ScenePreLoad ScenePreLoad --> SceneCreate SceneCreate --> SceneUpdate SceneUpdate --> SceneUpdate SceneUpdate --> |\"scene.scene.pause()<br>scene.scene.sleep()\"|SceneEventPauseSleep SceneEventPauseSleep --> Pause Pause --> |\"scene.scene.resume()<br>scene.scene.wake()\"|SceneEventResumeWake SceneEventResumeWake --> SceneUpdate SceneUpdate --> |\"scene.scene.stop()\"|Stop Pause --> |\"scene.scene.stop()\"|SceneEventDestroy SceneEventDestroy --> Stop Stop --> |\"scene.scene.start()<br>scene.scene.launch()<br>scene.scene.restart()\"|SceneEventStart Run : Update and render Pause : Render but no update Sleep : No update, no render Stop : Shutdown See also Pause/resume Stop Main loop Members \u00b6 plugins load : Loader events : Local events input : Touch , keyboard tweens : Tween tasks time : Timer cameras : Camera scene : scenePlugin anims physics : ArcadePhysics impact : ImpactPhysics matter :\u3000MatterPhysics registry : Global data manager data : Local data manager sys game cache sound textures add make children : displayList lights Preserve word in a scene. Events \u00b6 Start (Before scene.init() ) scene . events . on ( 'start' , function (){}); Every tick Preupdate scene . events . on ( 'preupdate' , function ( time , delta ){}); Update scene . events . on ( 'update' , function ( time , delta ){}); Postupdate scene . events . on ( 'postupdate' , function ( time , delta ){}); Render scene . events . on ( 'render' , function (){}); State changed Pause (from scene.scene.pause() ) scene . events . on ( 'pause' , function (){}); Resume (from scene.scene.resume() ) scene . events . on ( 'resume' , function (){}); Sleep (from scene.scene.sleep() ) scene . events . on ( 'sleep' , function (){}); Wake (from scene.scene.wake() ) scene . events . on ( 'wake' , function (){}); Stop/shutdown (from scene.scene.stop() ) scene . events . on ( 'shutdown' , function (){}); Free-up any resources that may be in use by this scene Destroy (from scene.scene.remove() ) scene . events . on ( 'destroy' , function (){}); Resize scene . events . on ( 'resize' , function (){}); Boot scene . events . on ( 'boot' , function (){});","title":"Scene"},{"location":"scene/#define-a-scene","text":"","title":"Define a scene"},{"location":"scene/#configuration-of-scene","text":"var config = { key : '' , // active: false, // visible: true, // pack: false, // cameras: null, // map: {}, // physics: {}, // loader: {}, // plugins: false, // input: {} }; key : The unique key of this Scene. Must be unique within the entire Game instance. active : Does the Scene start as active or not? An active Scene updates each step. visible : Does the Scene start as visible or not? A visible Scene renders each step. pack : An optional Loader Packfile to be loaded before the Scene begins. cameras : An optional Camera configuration object . { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } map : Overwrites the default injection map for a scene. physics : The physics configuration object for the Scene. { default : 'arcade' , // 'impact', or 'matter' arcade : {...}, matter : {...} } arcade : Arcade Physics configuration . matter : Matter Physics configuration . loader : The loader configuration object for the Scene. { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 } plugins : The plugin configuration object for the Scene. { global : [ //{key, plugin, start} ], scene : [ // ... ] } input : The input configuration object for the Scene. { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }","title":"Configuration of scene"},{"location":"scene/#es6-class","text":"class MyScene extends Phaser . Scene { constructor ( config ) { super ( config ); } init ( data ) {} preload () {} create ( data ) {} update ( time , delta ) {} } data : Parameters passed from starting scene","title":"ES6 class"},{"location":"scene/#class","text":"var MyScene = new Phaser . Class ({ Extends : Phaser . Scene , initialize : function MyScene ( config ) { Phaser . Scene . call ( this , config ) }, init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }); data : Parameters passed from starting scene var MyGame = {}; MyGame . Boot = function () { }; MyGame . Boot . prototype . constructor = MyGame . Boot ; MyGame . Boot . prototype = { init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }; data : Parameters passed from starting scene","title":"Class"},{"location":"scene/#override","text":"var demo = new Phaser . Scene ( 'Demo' ); demo . init = function ( data ){}; demo . preload = function (){}; demo . create = function ( data ){}; demo . update = function ( time , delta ){}; data : Parameters passed from starting scene","title":"Override"},{"location":"scene/#flow-chart","text":"graph TB subgraph Stop SceneEventDestroy>\"scene.events: destroy\"] Stop[\"Shutdown<br>Free game objects\"] end subgraph Update SceneUpdate[\"Run: Every tick<br>scene.update()\"] SceneEventPauseSleep>\"scene.events: pause<br>scene.events: sleep\"] Pause[\"Pause: render but no update<br>Sleep: no update, no render\"] SceneEventResumeWake>\"scene.events: resume<br>scene.events: wake\"] end subgraph Create SceneEventStart>\"scene.events: start\"] SceneInit[\"scene.init()\"] ScenePreLoad[\"Load assets<br>scene.preload()\"] SceneCreate[\"Create game objects<br>scene.create()\"] end Start((Start)) --> SceneEventStart SceneEventStart --> SceneInit SceneInit --> ScenePreLoad ScenePreLoad --> SceneCreate SceneCreate --> SceneUpdate SceneUpdate --> SceneUpdate SceneUpdate --> |\"scene.scene.pause()<br>scene.scene.sleep()\"|SceneEventPauseSleep SceneEventPauseSleep --> Pause Pause --> |\"scene.scene.resume()<br>scene.scene.wake()\"|SceneEventResumeWake SceneEventResumeWake --> SceneUpdate SceneUpdate --> |\"scene.scene.stop()\"|Stop Pause --> |\"scene.scene.stop()\"|SceneEventDestroy SceneEventDestroy --> Stop Stop --> |\"scene.scene.start()<br>scene.scene.launch()<br>scene.scene.restart()\"|SceneEventStart Run : Update and render Pause : Render but no update Sleep : No update, no render Stop : Shutdown See also Pause/resume Stop Main loop","title":"Flow chart"},{"location":"scene/#members","text":"plugins load : Loader events : Local events input : Touch , keyboard tweens : Tween tasks time : Timer cameras : Camera scene : scenePlugin anims physics : ArcadePhysics impact : ImpactPhysics matter :\u3000MatterPhysics registry : Global data manager data : Local data manager sys game cache sound textures add make children : displayList lights Preserve word in a scene.","title":"Members"},{"location":"scene/#events","text":"Start (Before scene.init() ) scene . events . on ( 'start' , function (){}); Every tick Preupdate scene . events . on ( 'preupdate' , function ( time , delta ){}); Update scene . events . on ( 'update' , function ( time , delta ){}); Postupdate scene . events . on ( 'postupdate' , function ( time , delta ){}); Render scene . events . on ( 'render' , function (){}); State changed Pause (from scene.scene.pause() ) scene . events . on ( 'pause' , function (){}); Resume (from scene.scene.resume() ) scene . events . on ( 'resume' , function (){}); Sleep (from scene.scene.sleep() ) scene . events . on ( 'sleep' , function (){}); Wake (from scene.scene.wake() ) scene . events . on ( 'wake' , function (){}); Stop/shutdown (from scene.scene.stop() ) scene . events . on ( 'shutdown' , function (){}); Free-up any resources that may be in use by this scene Destroy (from scene.scene.remove() ) scene . events . on ( 'destroy' , function (){}); Resize scene . events . on ( 'resize' , function (){}); Boot scene . events . on ( 'boot' , function (){});","title":"Events"},{"location":"scenemanager/","text":"Scene manager plugin: In each scene instance: scene.scene Add new scene \u00b6 var newScene = scene . scene . add ( key , sceneConfig , autoStart , data ); // var newScene = game.scene.add(key, sceneConfig, autoStart, data); key : A unique key used to reference the Scene. sceneConfig : The config for the Scene , or a scene class. autoStart : Set true to start scene immediately after added. data : Optional data object. This will be set as Scene.settings.data and passed to Scene.init . Load scene from external files \u00b6 load script scene . load . script ( key , url ); add new scene scene . scene . add ( key , sceneConfig , autoStart ); // game.scene.add(key, sceneConfig, autoStart); Destroy scene \u00b6 scene . scene . remove ( key ); Fires scene.events destroy Start scene \u00b6 Launch the given Scene and run it in parallel with this one scene . scene . launch ( key , data ); Shutdown this Scene and run the given one scene . scene . start ( key , data ); Restarts this Scene scene . scene . restart ( data ); Pause/Resume scene \u00b6 Pause : stops the update step but still renders scene . scene . pause ( key ); // scene.scene.pause(); // pause myself Fires scene.events pause Resume : starts the update loop again scene . scene . resume ( key ); // scene.scene.resume(); // resume myself Fires scene.events resume Sleep : no update, no render but doesn't shutdown scene . scene . sleep ( key ); // scene.scene.sleep(); // sleep myself Fires scene.events sleep Wake-up: starts update and render scene . scene . wake ( key ); // scene.scene.wake(); // wake-up myself Fires scene.events wake Makes this Scene sleep then starts the Scene given scene . scene . switch ( key ); Run scene \u00b6 Runs the given Scene, but does not change the state of this Scene. 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. scene . scene . run ( key , data ); Stop scene \u00b6 Shutdown the Scene, clearing display list, timers, etc. scene . scene . stop ( key ); // scene.scene.stop(); // stop myself Set visible \u00b6 scene . scene . setVisible ( value , key ); // value: true/false // scene.scene.setVisible(value); // set visible to myself Read status \u00b6 var isSleep = scene . scene . isSleeping ( key ); // var isSleep = scene.scene.isSleeping(); var isPaused = scene . scene . isPaused ( key ); // var isPaused = scene.scene.isPaused(); var isActive = scene . scene . isActive ( key ); // var isActive = scene.scene.isActive(); var isVisible = scene . scene . isVisible ( key ); // var isVisible = scene.scene.isVisible(); Update/isActive Render/isVisible Run Pause Sleep Pause/Sleep/Stop Pause: Pause update stage. Sleep: Pause update stage, and set scene invisible. Stop: Shoutdown, clearing display list, timers, etc. Get scene \u00b6 var scene = scene . scene . get ( key ); Order of scenes \u00b6 Swaps the position of two scenes in the Scenes list. scene . scene . swapPosition ( keyA , keyB ); // scene.scene.stop(keyA); scene . scene . moveAbove ( keyA , keyB ); // scene.scene.moveAbove(keyA); Scene B is directly above Scene A. scene . scene . moveBelow ( keyA , keyB ); // scene.scene.moveBelow(keyA); Scene B is directly below Scene A. scene . scene . moveUp ( keyA ); // scene.scene.moveBelow(); scene . scene . moveDown ( keyA ); // scene.scene.moveDown(); scene . scene . bringToTop ( keyA ); // scene.scene.bringToTop(); scene . scene . sendToBack ( keyA ); // scene.scene.sendToBack(); Transition \u00b6 scene . scene . transition ({ target : key , // data: null, // moveAbove: false, // moveBelow: false, duration : 1000 , // remove: false, // sleep: false, // allowInput: false, // onUpdate: null, // onUpdateScope: scene }) target : The Scene key to transition to. data : An object containing any data you wish to be passed to the target scenes init / create methods. moveAbove . moveBelow : Move the target Scene to be above/below this current scene before the transition starts. duration : Transition duration, in ms. remove : Set true to remove this scene. sleep : Set true to sleep this scene, set false to stop this scene. allowInput : Set true to enable input system of current scene and target scene. onUpdate , onUpdateScope : Transition callback in each tick. var callback = function ( progress ) { } progress : 0 ~ 1 Execution flow \u00b6 Invoke scene.scene.transition method. Current scene : Fire 'transitionout' event. fromScene . events . on ( 'transitionout' , function ( targetScene , duration ){ }); Run transition's onUpdate callback every tick. Current scene's update method is still running every tick. Target scene : Start target scene immediately. Fire target scene's 'transitionstart' event. (Register this event in create stage) targetScene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); When transition completed. Current scene : Remove or sleep current scene after transition completed. Target scene : Fire target scene's transitioncomplete event. targetScene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); Events \u00b6 boot scene . events . on ( 'transitioninit' , function ( fromScene , duration )){ }); start scene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); transition-out scene . events . on ( 'transitionout' , function ( targetScene ){ }); complete scene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); wake : wake-up target scene if it was previously asleep scene . events . on ( 'transitionwake' , function ( fromScene , duration ){ });","title":"Scene manager"},{"location":"scenemanager/#add-new-scene","text":"var newScene = scene . scene . add ( key , sceneConfig , autoStart , data ); // var newScene = game.scene.add(key, sceneConfig, autoStart, data); key : A unique key used to reference the Scene. sceneConfig : The config for the Scene , or a scene class. autoStart : Set true to start scene immediately after added. data : Optional data object. This will be set as Scene.settings.data and passed to Scene.init .","title":"Add new scene"},{"location":"scenemanager/#load-scene-from-external-files","text":"load script scene . load . script ( key , url ); add new scene scene . scene . add ( key , sceneConfig , autoStart ); // game.scene.add(key, sceneConfig, autoStart);","title":"Load scene from external files"},{"location":"scenemanager/#destroy-scene","text":"scene . scene . remove ( key ); Fires scene.events destroy","title":"Destroy scene"},{"location":"scenemanager/#start-scene","text":"Launch the given Scene and run it in parallel with this one scene . scene . launch ( key , data ); Shutdown this Scene and run the given one scene . scene . start ( key , data ); Restarts this Scene scene . scene . restart ( data );","title":"Start scene"},{"location":"scenemanager/#pauseresume-scene","text":"Pause : stops the update step but still renders scene . scene . pause ( key ); // scene.scene.pause(); // pause myself Fires scene.events pause Resume : starts the update loop again scene . scene . resume ( key ); // scene.scene.resume(); // resume myself Fires scene.events resume Sleep : no update, no render but doesn't shutdown scene . scene . sleep ( key ); // scene.scene.sleep(); // sleep myself Fires scene.events sleep Wake-up: starts update and render scene . scene . wake ( key ); // scene.scene.wake(); // wake-up myself Fires scene.events wake Makes this Scene sleep then starts the Scene given scene . scene . switch ( key );","title":"Pause/Resume scene"},{"location":"scenemanager/#run-scene","text":"Runs the given Scene, but does not change the state of this Scene. 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. scene . scene . run ( key , data );","title":"Run scene"},{"location":"scenemanager/#stop-scene","text":"Shutdown the Scene, clearing display list, timers, etc. scene . scene . stop ( key ); // scene.scene.stop(); // stop myself","title":"Stop scene"},{"location":"scenemanager/#set-visible","text":"scene . scene . setVisible ( value , key ); // value: true/false // scene.scene.setVisible(value); // set visible to myself","title":"Set visible"},{"location":"scenemanager/#read-status","text":"var isSleep = scene . scene . isSleeping ( key ); // var isSleep = scene.scene.isSleeping(); var isPaused = scene . scene . isPaused ( key ); // var isPaused = scene.scene.isPaused(); var isActive = scene . scene . isActive ( key ); // var isActive = scene.scene.isActive(); var isVisible = scene . scene . isVisible ( key ); // var isVisible = scene.scene.isVisible(); Update/isActive Render/isVisible Run Pause Sleep Pause/Sleep/Stop Pause: Pause update stage. Sleep: Pause update stage, and set scene invisible. Stop: Shoutdown, clearing display list, timers, etc.","title":"Read status"},{"location":"scenemanager/#get-scene","text":"var scene = scene . scene . get ( key );","title":"Get scene"},{"location":"scenemanager/#order-of-scenes","text":"Swaps the position of two scenes in the Scenes list. scene . scene . swapPosition ( keyA , keyB ); // scene.scene.stop(keyA); scene . scene . moveAbove ( keyA , keyB ); // scene.scene.moveAbove(keyA); Scene B is directly above Scene A. scene . scene . moveBelow ( keyA , keyB ); // scene.scene.moveBelow(keyA); Scene B is directly below Scene A. scene . scene . moveUp ( keyA ); // scene.scene.moveBelow(); scene . scene . moveDown ( keyA ); // scene.scene.moveDown(); scene . scene . bringToTop ( keyA ); // scene.scene.bringToTop(); scene . scene . sendToBack ( keyA ); // scene.scene.sendToBack();","title":"Order of scenes"},{"location":"scenemanager/#transition","text":"scene . scene . transition ({ target : key , // data: null, // moveAbove: false, // moveBelow: false, duration : 1000 , // remove: false, // sleep: false, // allowInput: false, // onUpdate: null, // onUpdateScope: scene }) target : The Scene key to transition to. data : An object containing any data you wish to be passed to the target scenes init / create methods. moveAbove . moveBelow : Move the target Scene to be above/below this current scene before the transition starts. duration : Transition duration, in ms. remove : Set true to remove this scene. sleep : Set true to sleep this scene, set false to stop this scene. allowInput : Set true to enable input system of current scene and target scene. onUpdate , onUpdateScope : Transition callback in each tick. var callback = function ( progress ) { } progress : 0 ~ 1","title":"Transition"},{"location":"scenemanager/#execution-flow","text":"Invoke scene.scene.transition method. Current scene : Fire 'transitionout' event. fromScene . events . on ( 'transitionout' , function ( targetScene , duration ){ }); Run transition's onUpdate callback every tick. Current scene's update method is still running every tick. Target scene : Start target scene immediately. Fire target scene's 'transitionstart' event. (Register this event in create stage) targetScene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); When transition completed. Current scene : Remove or sleep current scene after transition completed. Target scene : Fire target scene's transitioncomplete event. targetScene . events . on ( 'transitioncomplete' , function ( fromScene ){ });","title":"Execution flow"},{"location":"scenemanager/#events","text":"boot scene . events . on ( 'transitioninit' , function ( fromScene , duration )){ }); start scene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); transition-out scene . events . on ( 'transitionout' , function ( targetScene ){ }); complete scene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); wake : wake-up target scene if it was previously asleep scene . events . on ( 'transitionwake' , function ( fromScene , duration ){ });","title":"Events"},{"location":"scroller/","text":"Introduction \u00b6 Drag content. Slow down when dragging released, pull back when out of bounds. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexScroller from './plugins/scroller.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ScrollerPlugin from './plugins/scroller-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexScroller' , plugin : ScrollerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var scroller = scene . plugins . get ( 'rexScroller' ). add ( gameObject , { bounds : [ bottomBound , topBound ], value : topBound , // threshold: 10, // slidingDeceleration: 5000, // backDeceleration: 2000, // enable: true, // orientation: 'vertical', // valuechangeCallback: null, // valuechangeCallbackScope: null, // overmaxCallback: null, // overmaxCallbackScope: null, // overminCallback: null, // overminCallbackScope: null, }); bounds : An array of 2 values [bound0, bound1] value : Initial value between bound0 and bound1 Map this value to position of content under event 'valuechange' threshold : Minimal movement to scroll. Set 0 to scroll immediately. slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. enable : Set true to get dragging events. orientation : 'vertical' , 'v' , 'y' , or 0 : dragging on vertical/y axis. 'horizontal' , 'h' , 'x' , or 1 : dragging on horizontal/x axis. valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event overminCallback , overmaxCallbackScope : Bind this callback to overmax event overminCallback , overminCallbackScope : Bind this callback to overmin event Set bounds \u00b6 this . setBounds ( bounds ); // bounds: [bound0, bound1] // this.setBounds(bound0, bound1); Set deceleration \u00b6 Deceleration of slow down when dragging released scroller . setSlidingDeceleration ( dec ); Disable scroller . setSlidingDeceleration ( false ); Deceleration of pull back when out of bounds scroller . setBackDeceleration ( dec ); Disable scroller . setBackDeceleration ( false ); Get value \u00b6 var value = scroller . value ; Set value \u00b6 scroller . value = newValue ; // scroller.setValue(newValue); Fires valuechange event if new value is not equal to current value. Events \u00b6 Value changed scroller . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); Set position of content under this event Value out of max/min bound scroller . on ( 'overmax' , function ( newValue , prevValue ){ /* ... */ }); scroller . on ( 'overmin' , function ( newValue , prevValue ){ /* ... */ }); Drag \u00b6 Drag enable \u00b6 scroller . setEnable (); // scroller.setEnable(false); // disable Is dragging \u00b6 var isDragging = scroller . isDragging ; State machine \u00b6 graph TB IDLE[\"Idle\"] --> |Drag| DRAG[\"Dragging<br>event 'valuechange'\"] DRAG --> |Release| OnRelease{\"Under bounds?\"} OnRelease --> |Yes| SLIDE[\"Sliding<br>Sliding-deceleration\"] SLIDE --> |Stop| IDLE SLIDE --> |Drag| DRAG OnRelease --> |No| BACK[\"Pull back to bounds<br>Back-deceleration\"] BACK --> |Stop| IDLE BACK --> |Drag| DRAG Get state var state = scroller . state ; 'IDLE' : No dragging, no sliding 'DRAG' : Dragging 'SLIDE' : Sliding when dragging released 'BACK' : Sliding back to bound when out of bound","title":"Scroller"},{"location":"scroller/#introduction","text":"Drag content. Slow down when dragging released, pull back when out of bounds. Author: Rex Behavior of game object","title":"Introduction"},{"location":"scroller/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"scroller/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"scroller/#import-class","text":"import rexScroller from './plugins/scroller.js' ;","title":"Import class"},{"location":"scroller/#install-global-plugin","text":"Install plugin in configuration of game import ScrollerPlugin from './plugins/scroller-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexScroller' , plugin : ScrollerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"scroller/#create-instance","text":"var scroller = scene . plugins . get ( 'rexScroller' ). add ( gameObject , { bounds : [ bottomBound , topBound ], value : topBound , // threshold: 10, // slidingDeceleration: 5000, // backDeceleration: 2000, // enable: true, // orientation: 'vertical', // valuechangeCallback: null, // valuechangeCallbackScope: null, // overmaxCallback: null, // overmaxCallbackScope: null, // overminCallback: null, // overminCallbackScope: null, }); bounds : An array of 2 values [bound0, bound1] value : Initial value between bound0 and bound1 Map this value to position of content under event 'valuechange' threshold : Minimal movement to scroll. Set 0 to scroll immediately. slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. enable : Set true to get dragging events. orientation : 'vertical' , 'v' , 'y' , or 0 : dragging on vertical/y axis. 'horizontal' , 'h' , 'x' , or 1 : dragging on horizontal/x axis. valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event overminCallback , overmaxCallbackScope : Bind this callback to overmax event overminCallback , overminCallbackScope : Bind this callback to overmin event","title":"Create instance"},{"location":"scroller/#set-bounds","text":"this . setBounds ( bounds ); // bounds: [bound0, bound1] // this.setBounds(bound0, bound1);","title":"Set bounds"},{"location":"scroller/#set-deceleration","text":"Deceleration of slow down when dragging released scroller . setSlidingDeceleration ( dec ); Disable scroller . setSlidingDeceleration ( false ); Deceleration of pull back when out of bounds scroller . setBackDeceleration ( dec ); Disable scroller . setBackDeceleration ( false );","title":"Set deceleration"},{"location":"scroller/#get-value","text":"var value = scroller . value ;","title":"Get value"},{"location":"scroller/#set-value","text":"scroller . value = newValue ; // scroller.setValue(newValue); Fires valuechange event if new value is not equal to current value.","title":"Set value"},{"location":"scroller/#events","text":"Value changed scroller . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); Set position of content under this event Value out of max/min bound scroller . on ( 'overmax' , function ( newValue , prevValue ){ /* ... */ }); scroller . on ( 'overmin' , function ( newValue , prevValue ){ /* ... */ });","title":"Events"},{"location":"scroller/#drag","text":"","title":"Drag"},{"location":"scroller/#drag-enable","text":"scroller . setEnable (); // scroller.setEnable(false); // disable","title":"Drag enable"},{"location":"scroller/#is-dragging","text":"var isDragging = scroller . isDragging ;","title":"Is dragging"},{"location":"scroller/#state-machine","text":"graph TB IDLE[\"Idle\"] --> |Drag| DRAG[\"Dragging<br>event 'valuechange'\"] DRAG --> |Release| OnRelease{\"Under bounds?\"} OnRelease --> |Yes| SLIDE[\"Sliding<br>Sliding-deceleration\"] SLIDE --> |Stop| IDLE SLIDE --> |Drag| DRAG OnRelease --> |No| BACK[\"Pull back to bounds<br>Back-deceleration\"] BACK --> |Stop| IDLE BACK --> |Drag| DRAG Get state var state = scroller . state ; 'IDLE' : No dragging, no sliding 'DRAG' : Dragging 'SLIDE' : Sliding when dragging released 'BACK' : Sliding back to bound when out of bound","title":"State machine"},{"location":"sequence/","text":"Introduction \u00b6 Run sequence commands in array. Author: Rex Object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import Sequence from './plugins/sequence.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SequencePlugin from './plugins/sequence-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSequence' , plugin : SequencePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create sequence instance \u00b6 var seq = this . plugins . get ( 'rexSequence' ). add ({ // yoyo: false // reverse sequence when it reaches the end // repeat: 0, // repeat count // loop: false // repeat forever }); Load commands \u00b6 seq . load ( commands , actionScope ); Format of command : [ fnName , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] ActionScope Format of command is the same as run-command . Run commands \u00b6 seq . start (); Run command : var eventEmitter = actionScope [ fnName ]. call ( actionScope , param0 , param1 ...); - Return an event emitter to pause the sequence, otherwise run next command - Sequence will continue when that event emitter fires complete event Events \u00b6 On sequence completed : seq . on ( 'complete' , function ( seq ){}); Action of commands \u00b6 Action of commands, extended from Phaser.Events.EventEmitter . class ActionKlass extends Phaser . Events . EventEmitter { constructor ( scene ) { super (); this . scene = scene ; this . myConsole = scene . add . text ( 100 , 100 , '' ); this [ 'wait-click' ] = this . waitClick ; this [ 'wait-time' ] = this . waitTime ; } // callbacks print ( msg ) { this . myConsole . setText ( msg ); // return undefined to run next command } waitClick () { this . scene . input . once ( 'pointerup' , this . complete , this ); return this ; // return eventEmitter to pause the sequence } waitTime ( delay ) { this . scene . time . delayedCall ( delay * 1000 , this . complete , [], this ); return this ; // return eventEmitter to pause the sequence } complete () { this . emit ( 'complete' ); // resume sequence } } var actionScope = new ActionKlass ( scene ); Now this scope supports 3 commands print(msg): ['print', msg] waitClick(): ['wait-click'] waitTime(delay): ['wait-time', delay]","title":"Sequence"},{"location":"sequence/#introduction","text":"Run sequence commands in array. Author: Rex Object","title":"Introduction"},{"location":"sequence/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"sequence/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"sequence/#import-class","text":"import Sequence from './plugins/sequence.js' ;","title":"Import class"},{"location":"sequence/#install-global-plugin","text":"Install plugin in configuration of game import SequencePlugin from './plugins/sequence-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSequence' , plugin : SequencePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"sequence/#create-sequence-instance","text":"var seq = this . plugins . get ( 'rexSequence' ). add ({ // yoyo: false // reverse sequence when it reaches the end // repeat: 0, // repeat count // loop: false // repeat forever });","title":"Create sequence instance"},{"location":"sequence/#load-commands","text":"seq . load ( commands , actionScope ); Format of command : [ fnName , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] ActionScope Format of command is the same as run-command .","title":"Load commands"},{"location":"sequence/#run-commands","text":"seq . start (); Run command : var eventEmitter = actionScope [ fnName ]. call ( actionScope , param0 , param1 ...); - Return an event emitter to pause the sequence, otherwise run next command - Sequence will continue when that event emitter fires complete event","title":"Run commands"},{"location":"sequence/#events","text":"On sequence completed : seq . on ( 'complete' , function ( seq ){});","title":"Events"},{"location":"sequence/#action-of-commands","text":"Action of commands, extended from Phaser.Events.EventEmitter . class ActionKlass extends Phaser . Events . EventEmitter { constructor ( scene ) { super (); this . scene = scene ; this . myConsole = scene . add . text ( 100 , 100 , '' ); this [ 'wait-click' ] = this . waitClick ; this [ 'wait-time' ] = this . waitTime ; } // callbacks print ( msg ) { this . myConsole . setText ( msg ); // return undefined to run next command } waitClick () { this . scene . input . once ( 'pointerup' , this . complete , this ); return this ; // return eventEmitter to pause the sequence } waitTime ( delay ) { this . scene . time . delayedCall ( delay * 1000 , this . complete , [], this ); return this ; // return eventEmitter to pause the sequence } complete () { this . emit ( 'complete' ); // resume sequence } } var actionScope = new ActionKlass ( scene ); Now this scope supports 3 commands print(msg): ['print', msg] waitClick(): ['wait-click'] waitTime(delay): ['wait-time', delay]","title":"Action of commands"},{"location":"shader-grayscale/","text":"Introduction \u00b6 Gray scale post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGrayScalepipeline from './plugins/grayscalepipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GrayScalePipelinePlugin from './plugins/grayscalepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGrayScalePipeline' , plugin : GrayScalePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexGrayScalePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Intensity \u00b6 Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(gray scale)","title":"Gray scale"},{"location":"shader-grayscale/#introduction","text":"Gray scale post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-grayscale/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-grayscale/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-grayscale/#import-class","text":"import rexGrayScalepipeline from './plugins/grayscalepipeline.js' ;","title":"Import class"},{"location":"shader-grayscale/#install-global-plugin","text":"Install plugin in configuration of game import GrayScalePipelinePlugin from './plugins/grayscalepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGrayScalePipeline' , plugin : GrayScalePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-grayscale/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexGrayScalePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-grayscale/#intensity","text":"Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(gray scale)","title":"Intensity"},{"location":"shader-hsladjust/","text":"Introduction \u00b6 Adjust color in HSL domain, post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHslAdjustPipeline from './plugins/hsladjustpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HslAdjustPipelinePlugin from './plugins/hsladjustpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHslAdjustPipeline' , plugin : HslAdjustPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexHslAdjustPipeline' ). add ( scene , key , { // hueRotate: 0, // satAdjust: 1, // lumAdjust: 0.5, }); hueRotate : Hue rotation 0 : Rotate 0 degrees, original color (Default value) 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees satAdjust : Saturation adjustment 0 : Gray 1 : Original color (Default value) 1 : lumAdjust : Lumen adjustment 0 : Dark 0.5 : Original color (Default value) 1 : White Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Hue rotation \u00b6 Get var hueRotate = customPipeline . hueRotate ; Set customPipeline . hueRotate = hueRotate ; // customPipeline.hueRotate += value; or customPipeline . setHueRotate ( value ); 0 : Rotate 0 degrees, original color 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees Saturation adjustment \u00b6 Get var satAdjust = customPipeline . satAdjust ; Set customPipeline . satAdjust = satAdjust ; // customPipeline.satAdjust += value; or customPipeline . setSatAdjust ( value ); 0 : Gray 1 : Original color 1 : Lumen adjustment \u00b6 Get var lumAdjust = customPipeline . lumAdjust ; Set customPipeline . lumAdjust = lumAdjust ; // customPipeline.lumAdjust += value; or customPipeline . setLumAdjust ( value ); 0 : Dark 0.5 : Original color 1 : White","title":"HSL adjust"},{"location":"shader-hsladjust/#introduction","text":"Adjust color in HSL domain, post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-hsladjust/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-hsladjust/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-hsladjust/#import-class","text":"import rexHslAdjustPipeline from './plugins/hsladjustpipeline.js' ;","title":"Import class"},{"location":"shader-hsladjust/#install-global-plugin","text":"Install plugin in configuration of game import HslAdjustPipelinePlugin from './plugins/hsladjustpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHslAdjustPipeline' , plugin : HslAdjustPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-hsladjust/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexHslAdjustPipeline' ). add ( scene , key , { // hueRotate: 0, // satAdjust: 1, // lumAdjust: 0.5, }); hueRotate : Hue rotation 0 : Rotate 0 degrees, original color (Default value) 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees satAdjust : Saturation adjustment 0 : Gray 1 : Original color (Default value) 1 : lumAdjust : Lumen adjustment 0 : Dark 0.5 : Original color (Default value) 1 : White Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-hsladjust/#hue-rotation","text":"Get var hueRotate = customPipeline . hueRotate ; Set customPipeline . hueRotate = hueRotate ; // customPipeline.hueRotate += value; or customPipeline . setHueRotate ( value ); 0 : Rotate 0 degrees, original color 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees","title":"Hue rotation"},{"location":"shader-hsladjust/#saturation-adjustment","text":"Get var satAdjust = customPipeline . satAdjust ; Set customPipeline . satAdjust = satAdjust ; // customPipeline.satAdjust += value; or customPipeline . setSatAdjust ( value ); 0 : Gray 1 : Original color 1 :","title":"Saturation adjustment"},{"location":"shader-hsladjust/#lumen-adjustment","text":"Get var lumAdjust = customPipeline . lumAdjust ; Set customPipeline . lumAdjust = lumAdjust ; // customPipeline.lumAdjust += value; or customPipeline . setLumAdjust ( value ); 0 : Dark 0.5 : Original color 1 : White","title":"Lumen adjustment"},{"location":"shader-inverse/","text":"Introduction \u00b6 Inverse color post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexInversePipeline from './plugins/inversepipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import InversePipelinePlugin from './plugins/inversepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInversePipeline' , plugin : InversePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexInversePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Intensity \u00b6 Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(inverse color)","title":"Inverse"},{"location":"shader-inverse/#introduction","text":"Inverse color post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-inverse/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-inverse/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-inverse/#import-class","text":"import rexInversePipeline from './plugins/inversepipeline.js' ;","title":"Import class"},{"location":"shader-inverse/#install-global-plugin","text":"Install plugin in configuration of game import InversePipelinePlugin from './plugins/inversepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInversePipeline' , plugin : InversePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-inverse/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexInversePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-inverse/#intensity","text":"Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(inverse color)","title":"Intensity"},{"location":"shader-pixelation/","text":"Introduction \u00b6 Pixelation post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPixelationPipeline from './plugins/pixelationpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PixelationPipelinePlugin from './plugins/pixelationpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPixelationPipeline' , plugin : PixelationPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexPixelationPipeline' ). add ( scene , key , { // pixelWidth: 0, // pixelHeight: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Pixel size \u00b6 Get var pixelWidth = customPipeline . pixelWidth ; var pixelHeight = customPipeline . pixelHeight ; Set customPipeline . pixelWidth = pixelWidth ; customPipeline . pixelHeight = pixelHeight ; // customPipeline.pixelWidth += value; // customPipeline.pixelHeight += value; or customPipeline . setPixelWidth ( pixelWidth ); customPipeline . setPixelHeight ( pixelHeight ); customPipeline . setPixelSize ( pixelWidth , pixelHeight );","title":"Pixelation"},{"location":"shader-pixelation/#introduction","text":"Pixelation post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-pixelation/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-pixelation/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-pixelation/#import-class","text":"import rexPixelationPipeline from './plugins/pixelationpipeline.js' ;","title":"Import class"},{"location":"shader-pixelation/#install-global-plugin","text":"Install plugin in configuration of game import PixelationPipelinePlugin from './plugins/pixelationpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPixelationPipeline' , plugin : PixelationPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-pixelation/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexPixelationPipeline' ). add ( scene , key , { // pixelWidth: 0, // pixelHeight: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-pixelation/#pixel-size","text":"Get var pixelWidth = customPipeline . pixelWidth ; var pixelHeight = customPipeline . pixelHeight ; Set customPipeline . pixelWidth = pixelWidth ; customPipeline . pixelHeight = pixelHeight ; // customPipeline.pixelWidth += value; // customPipeline.pixelHeight += value; or customPipeline . setPixelWidth ( pixelWidth ); customPipeline . setPixelHeight ( pixelHeight ); customPipeline . setPixelSize ( pixelWidth , pixelHeight );","title":"Pixel size"},{"location":"shader-swirl/","text":"Introduction \u00b6 Swirl post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexSwirlpipeline from './plugins/swirlpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SwirlPipelinePlugin from './plugins/swirlpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSwirlPipeline' , plugin : SwirlPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexSwirlPipeline' ). add ( scene , key , { // center: { // x: windowWidth / 2, // y: windowHeight / 2 //} // radius: 0, // rotation: 0, // or angle: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Radius \u00b6 Get var radius = customPipeline . radius ; Set customPipeline . radius = radius ; // customPipeline.radius += value; or customPipeline . setRadius ( radius ); Rotation \u00b6 Get var rotation = customPipeline . rotation ; // radians // var angle = customPipeline.angle; // degrees Set customPipeline . rotation = rotation ; customPipeline . rotation += value ; // customPipeline.angle = angle; // customPipeline.angle += value; or customPipeline . setRotation ( rotation ); // customPipeline.setAngle(angle); Center position \u00b6 Default value is center of window. Get var x = customPipeline . centerX ; var y = customPipeline . centerY ; Set customPipeline . centerX = x ; customPipeline . centerY = y ; or customPipeline . setCenter ( x , y ); // customPipeline.setCenter(); // set to center of window","title":"Swirl"},{"location":"shader-swirl/#introduction","text":"Swirl post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-swirl/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-swirl/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-swirl/#import-class","text":"import rexSwirlpipeline from './plugins/swirlpipeline.js' ;","title":"Import class"},{"location":"shader-swirl/#install-global-plugin","text":"Install plugin in configuration of game import SwirlPipelinePlugin from './plugins/swirlpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSwirlPipeline' , plugin : SwirlPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-swirl/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexSwirlPipeline' ). add ( scene , key , { // center: { // x: windowWidth / 2, // y: windowHeight / 2 //} // radius: 0, // rotation: 0, // or angle: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-swirl/#radius","text":"Get var radius = customPipeline . radius ; Set customPipeline . radius = radius ; // customPipeline.radius += value; or customPipeline . setRadius ( radius );","title":"Radius"},{"location":"shader-swirl/#rotation","text":"Get var rotation = customPipeline . rotation ; // radians // var angle = customPipeline.angle; // degrees Set customPipeline . rotation = rotation ; customPipeline . rotation += value ; // customPipeline.angle = angle; // customPipeline.angle += value; or customPipeline . setRotation ( rotation ); // customPipeline.setAngle(angle);","title":"Rotation"},{"location":"shader-swirl/#center-position","text":"Default value is center of window. Get var x = customPipeline . centerX ; var y = customPipeline . centerY ; Set customPipeline . centerX = x ; customPipeline . centerY = y ; or customPipeline . setCenter ( x , y ); // customPipeline.setCenter(); // set to center of window","title":"Center position"},{"location":"shader-toonify/","text":"Introduction \u00b6 Draw outlines and quantize color in HSV domain, post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexToonifyPipeline from './plugins/toonifypipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ToonifyPipelinePlugin from './plugins/toonifypipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexToonifyPipeline' , plugin : ToonifyPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexToonifyPipeline' ). add ( scene , key , { // edgeThreshold: 0.2, // hueLevels: 0, // sLevels: 0, // vLevels: 0, // edgeColor: 0 }); edgeThreshold : Threshold of edge. Set 1.1 (or any number larger then 1 ) to disable this feature. hueLevels : Amount of hue levels. Set 0 to disable this feature. sLevels : Amount of saturation levels. Set 0 to disable this feature. vLevels : Amount of value levels. Set 0 to disable this feature. edgeColor : Color of edge, could be a number 0xRRGGBB , or a JSON object {r:255, g:255, b:255} Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Edge threshold \u00b6 Get var edgeThreshold = customPipeline . edgeThreshold ; Set customPipeline . edgeThreshold = edgeThreshold ; or customPipeline . setEdgeThreshold ( value ); Set 1.1 (or any number larger then 1 ) to disable this feature. Hue levels \u00b6 Get var hueLevels = customPipeline . hueLevels ; Set customPipeline . hueLevels = hueLevels ; or customPipeline . setHueLevels ( value ); Set 0 to disable this feature. Saturation levels \u00b6 Get var satLevels = customPipeline . satLevels ; Set customPipeline . satLevels = satLevels ; or customPipeline . setSatLevels ( value ); Set 0 to disable this feature. Value levels \u00b6 Get var valLevels = customPipeline . valLevels ; Set customPipeline . valLevels = valLevels ; or customPipeline . setValLevels ( value ); Set 0 to disable this feature. Edge color \u00b6 Get var color = customPipeline . edgeColor ; color : Color object. Red: color.red , 0~255. Green: color.green , 0~255. Blue: color.blue , 0~255. Set customPipeline . edgeColor = value ; value : A number 0xRRGGBB , or a JSON object {r:255, g:255, b:255}","title":"Toonify"},{"location":"shader-toonify/#introduction","text":"Draw outlines and quantize color in HSV domain, post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-toonify/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-toonify/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-toonify/#import-class","text":"import rexToonifyPipeline from './plugins/toonifypipeline.js' ;","title":"Import class"},{"location":"shader-toonify/#install-global-plugin","text":"Install plugin in configuration of game import ToonifyPipelinePlugin from './plugins/toonifypipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexToonifyPipeline' , plugin : ToonifyPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-toonify/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexToonifyPipeline' ). add ( scene , key , { // edgeThreshold: 0.2, // hueLevels: 0, // sLevels: 0, // vLevels: 0, // edgeColor: 0 }); edgeThreshold : Threshold of edge. Set 1.1 (or any number larger then 1 ) to disable this feature. hueLevels : Amount of hue levels. Set 0 to disable this feature. sLevels : Amount of saturation levels. Set 0 to disable this feature. vLevels : Amount of value levels. Set 0 to disable this feature. edgeColor : Color of edge, could be a number 0xRRGGBB , or a JSON object {r:255, g:255, b:255} Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-toonify/#edge-threshold","text":"Get var edgeThreshold = customPipeline . edgeThreshold ; Set customPipeline . edgeThreshold = edgeThreshold ; or customPipeline . setEdgeThreshold ( value ); Set 1.1 (or any number larger then 1 ) to disable this feature.","title":"Edge threshold"},{"location":"shader-toonify/#hue-levels","text":"Get var hueLevels = customPipeline . hueLevels ; Set customPipeline . hueLevels = hueLevels ; or customPipeline . setHueLevels ( value ); Set 0 to disable this feature.","title":"Hue levels"},{"location":"shader-toonify/#saturation-levels","text":"Get var satLevels = customPipeline . satLevels ; Set customPipeline . satLevels = satLevels ; or customPipeline . setSatLevels ( value ); Set 0 to disable this feature.","title":"Saturation levels"},{"location":"shader-toonify/#value-levels","text":"Get var valLevels = customPipeline . valLevels ; Set customPipeline . valLevels = valLevels ; or customPipeline . setValLevels ( value ); Set 0 to disable this feature.","title":"Value levels"},{"location":"shader-toonify/#edge-color","text":"Get var color = customPipeline . edgeColor ; color : Color object. Red: color.red , 0~255. Green: color.green , 0~255. Blue: color.blue , 0~255. Set customPipeline . edgeColor = value ; value : A number 0xRRGGBB , or a JSON object {r:255, g:255, b:255}","title":"Edge color"},{"location":"shader/","text":"Introduction \u00b6 A quad with its own shader, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load GLSL \u00b6 scene . load . glsl ( key , url ); Reference: load glsl Add shader object \u00b6 var shader = scene . add . shader ( key , x , y , width , height , textures ); key : The key of the shader to use from the shader cache , or a BaseShader instance. x , y : Position. width , height : Size. textures : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms. Lots of shaders expect textures to be power-of-two sized . Add shader object from JSON var shader = scene . make . shader ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : The key of the shader to use from the shader cache, or a BaseShader instance. A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MyShader extends Phaser . GameObjects . Shader { constructor ( scene , key , x , y , width , height , textures ) { super ( scene , key , x , y , width , height , textures ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var shader = new MyShader ( scene , key , x , y , width , height , textures ); Sampler2D uniform \u00b6 Get uniform object var uniform = shader . getUniform ( key ); Texture key var textureKey = uniform . textureKey ; Get texture key of iChannel0 , iChannel1 , iChannel2 , iChannel3 sampler2D uniform. var textureKey = shader . getUniform ( 'iChannel0' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel1' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel2' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel3' ). textureKey ; Sets a sampler2D uniform from texture manager. shader . setChannel0 ( textureKey ); shader . setChannel1 ( textureKey ); shader . setChannel2 ( textureKey ); shader . setChannel3 ( textureKey ); // shader.setChannel0(textureKey, textureData); // shader.setChannel1(textureKey, textureData); // shader.setChannel2(textureKey, textureData); // shader.setChannel3(textureKey, textureData); or shader . setSampler2D ( uniformKey , textureKey , textureIndex ); // shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. textureKey : 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 . Sets a sampler2D uniform from a webgl texture. shader . setSampler2DBuffer ( uniformKey , texture , width , height , textureIndex ); // shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . width , height : The width, height of the texture. textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. Other uniforms \u00b6 mouse , a pointer parameter. Get var pointer = shader . pointer ; Set shader . setPointer ( pointer ); pointer : {x, y} time , the elapsed game time, in seconds . Get var time = shader . getUniform ( 'time' ). value ; // var time = shader.uniforms.time.value Set shader . setUniform ( 'time.value' , time ); Output \u00b6 Render to Display list, by default. Redirect render result to internal webgl texture. shader . setRenderToTexture (); var texture = shader . glTexture ; Redirect render result to internal webgl texture, and sample2D from buffer. shader . setRenderToTexture ( undefined , true ); var texture = shader . glTexture ; Redirect render result to texture manager, for texture-based game object. shader . setRenderToTexture ( textureKey ); // var texture = shader.glTexture; Redirect render result to texture manager, and Sample2D from buffer. shader . setRenderToTexture ( textureKey , true ); // var texture = shader.glTexture; Texture routing \u00b6 graph TB TextureManagerIn[\"Texture manager\"] --> |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:<br>iChannel0<br>iChannel1<br>iChannel2<br>iChannel3\"] Sampler2D--> Shader[\"shader<br>Shader game object\"] Shader --> DisplayList[\"Display list\"] Shader --> |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"] InternalTexture -.-> |\"Texture key\"| TextureManagerOut[\"Texture manager\"] TextureManagerOut -.-> GameObject[\"Image game object\"] GameObject -.-> DisplayList WebGLTexture[\"WebGl texture<br>gameObject.glTexture\"] --> |\"shader.setSampler2DBuffer()\"| Sampler2D InternalTexture --> WebGLTexture subgraph Output DisplayList GameObject TextureManagerOut end subgraph Input TextureManagerIn WebGLTexture end Other properties \u00b6 See game object","title":"Shader"},{"location":"shader/#introduction","text":"A quad with its own shader, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shader/#usage","text":"","title":"Usage"},{"location":"shader/#load-glsl","text":"scene . load . glsl ( key , url ); Reference: load glsl","title":"Load GLSL"},{"location":"shader/#add-shader-object","text":"var shader = scene . add . shader ( key , x , y , width , height , textures ); key : The key of the shader to use from the shader cache , or a BaseShader instance. x , y : Position. width , height : Size. textures : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms. Lots of shaders expect textures to be power-of-two sized . Add shader object from JSON var shader = scene . make . shader ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : The key of the shader to use from the shader cache, or a BaseShader instance. A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add shader object"},{"location":"shader/#custom-class","text":"Define class class MyShader extends Phaser . GameObjects . Shader { constructor ( scene , key , x , y , width , height , textures ) { super ( scene , key , x , y , width , height , textures ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var shader = new MyShader ( scene , key , x , y , width , height , textures );","title":"Custom class"},{"location":"shader/#sampler2d-uniform","text":"Get uniform object var uniform = shader . getUniform ( key ); Texture key var textureKey = uniform . textureKey ; Get texture key of iChannel0 , iChannel1 , iChannel2 , iChannel3 sampler2D uniform. var textureKey = shader . getUniform ( 'iChannel0' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel1' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel2' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel3' ). textureKey ; Sets a sampler2D uniform from texture manager. shader . setChannel0 ( textureKey ); shader . setChannel1 ( textureKey ); shader . setChannel2 ( textureKey ); shader . setChannel3 ( textureKey ); // shader.setChannel0(textureKey, textureData); // shader.setChannel1(textureKey, textureData); // shader.setChannel2(textureKey, textureData); // shader.setChannel3(textureKey, textureData); or shader . setSampler2D ( uniformKey , textureKey , textureIndex ); // shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. textureKey : 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 . Sets a sampler2D uniform from a webgl texture. shader . setSampler2DBuffer ( uniformKey , texture , width , height , textureIndex ); // shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . width , height : The width, height of the texture. textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data.","title":"Sampler2D uniform"},{"location":"shader/#other-uniforms","text":"mouse , a pointer parameter. Get var pointer = shader . pointer ; Set shader . setPointer ( pointer ); pointer : {x, y} time , the elapsed game time, in seconds . Get var time = shader . getUniform ( 'time' ). value ; // var time = shader.uniforms.time.value Set shader . setUniform ( 'time.value' , time );","title":"Other uniforms"},{"location":"shader/#output","text":"Render to Display list, by default. Redirect render result to internal webgl texture. shader . setRenderToTexture (); var texture = shader . glTexture ; Redirect render result to internal webgl texture, and sample2D from buffer. shader . setRenderToTexture ( undefined , true ); var texture = shader . glTexture ; Redirect render result to texture manager, for texture-based game object. shader . setRenderToTexture ( textureKey ); // var texture = shader.glTexture; Redirect render result to texture manager, and Sample2D from buffer. shader . setRenderToTexture ( textureKey , true ); // var texture = shader.glTexture;","title":"Output"},{"location":"shader/#texture-routing","text":"graph TB TextureManagerIn[\"Texture manager\"] --> |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:<br>iChannel0<br>iChannel1<br>iChannel2<br>iChannel3\"] Sampler2D--> Shader[\"shader<br>Shader game object\"] Shader --> DisplayList[\"Display list\"] Shader --> |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"] InternalTexture -.-> |\"Texture key\"| TextureManagerOut[\"Texture manager\"] TextureManagerOut -.-> GameObject[\"Image game object\"] GameObject -.-> DisplayList WebGLTexture[\"WebGl texture<br>gameObject.glTexture\"] --> |\"shader.setSampler2DBuffer()\"| Sampler2D InternalTexture --> WebGLTexture subgraph Output DisplayList GameObject TextureManagerOut end subgraph Input TextureManagerIn WebGLTexture end","title":"Texture routing"},{"location":"shader/#other-properties","text":"See game object","title":"Other properties"},{"location":"shake-position/","text":"Introduction \u00b6 Shake position of game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexShake from './plugins/shakeposition.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ShakePlugin from './plugins/shakeposition-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexShake' , plugin : ShakePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var shake = scene . plugins . get ( 'rexShake' ). add ( gameObject , { // mode: 1, // 0|'effect'|1|'behavior' // duration: 500, // magnitude: 10, // magnitudeMode: 1, // 0|'constant'|1|'decay' }); mode : 'effect' , or 0 : Shake position in 'poststep' game event, and restore in 'step' game event. 'behavior' , or 1 : Shake position in 'preupdate' scene event. duration : Duration of shaking, in millisecond. magnitude : The strength of the shake, in pixels. magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake. Start shaking \u00b6 shake . shake (); // shake.shake(duration, magnitude); or shake . shake ({ duration : 500 , magnitude : 10 }); Stop shakeing \u00b6 shake . stop (); Enable \u00b6 Enable/resume (default) shake . setEnable (); or shake . enable = true ; Disable/pause shake . setEnable ( false ); or shake . enable = false ; Set updating mode \u00b6 shake . setMode ( mode ); mode : 'effect' , or 0 : Shake position in post-update stage, and restore in pre-update stage. 'behavior' , or 1 : Shake position in pre-update stage. Set duration \u00b6 shake . setDuration ( duration ); // shake.duration = duration; Set magnitude \u00b6 shake . setMagnitude ( magnitude ); shake . magnitude = magnitude ; magnitude : The strength of the shake, in pixels. Set magnitude mode \u00b6 shake . setMagnitudeMode ( magnitudeMode ); // shake.magnitudeMode = magnitudeMode; magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake. Events \u00b6 On reached target shake . on ( 'complete' , function ( shake , gameObject ){}); Status \u00b6 Is shakeing var isRunning = shake . isRunning ;","title":"Shake position"},{"location":"shake-position/#introduction","text":"Shake position of game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"shake-position/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shake-position/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shake-position/#import-class","text":"import rexShake from './plugins/shakeposition.js' ;","title":"Import class"},{"location":"shake-position/#install-global-plugin","text":"Install plugin in configuration of game import ShakePlugin from './plugins/shakeposition-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexShake' , plugin : ShakePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shake-position/#create-instance","text":"var shake = scene . plugins . get ( 'rexShake' ). add ( gameObject , { // mode: 1, // 0|'effect'|1|'behavior' // duration: 500, // magnitude: 10, // magnitudeMode: 1, // 0|'constant'|1|'decay' }); mode : 'effect' , or 0 : Shake position in 'poststep' game event, and restore in 'step' game event. 'behavior' , or 1 : Shake position in 'preupdate' scene event. duration : Duration of shaking, in millisecond. magnitude : The strength of the shake, in pixels. magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake.","title":"Create instance"},{"location":"shake-position/#start-shaking","text":"shake . shake (); // shake.shake(duration, magnitude); or shake . shake ({ duration : 500 , magnitude : 10 });","title":"Start shaking"},{"location":"shake-position/#stop-shakeing","text":"shake . stop ();","title":"Stop shakeing"},{"location":"shake-position/#enable","text":"Enable/resume (default) shake . setEnable (); or shake . enable = true ; Disable/pause shake . setEnable ( false ); or shake . enable = false ;","title":"Enable"},{"location":"shake-position/#set-updating-mode","text":"shake . setMode ( mode ); mode : 'effect' , or 0 : Shake position in post-update stage, and restore in pre-update stage. 'behavior' , or 1 : Shake position in pre-update stage.","title":"Set updating mode"},{"location":"shake-position/#set-duration","text":"shake . setDuration ( duration ); // shake.duration = duration;","title":"Set duration"},{"location":"shake-position/#set-magnitude","text":"shake . setMagnitude ( magnitude ); shake . magnitude = magnitude ; magnitude : The strength of the shake, in pixels.","title":"Set magnitude"},{"location":"shake-position/#set-magnitude-mode","text":"shake . setMagnitudeMode ( magnitudeMode ); // shake.magnitudeMode = magnitudeMode; magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake.","title":"Set magnitude mode"},{"location":"shake-position/#events","text":"On reached target shake . on ( 'complete' , function ( shake , gameObject ){});","title":"Events"},{"location":"shake-position/#status","text":"Is shakeing var isRunning = shake . isRunning ;","title":"Status"},{"location":"shape-arc/","text":"Introduction \u00b6 Arc shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var arc = scene . add . arc ( x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha); Custom class \u00b6 Define class class MyArc extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ) { super ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var arc = new MyArc ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); Color \u00b6 Fill color Get var color = arc . fillColor ; Set arc . setFillStyle ( color , alpha ); Stroke color Get var color = arc . strokeColor ; Set arc . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses arc.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Radius Get var radius = arc . radius ; Set arc . setRadius ( radius ); or arc . radius = radius ; Start angle, in degrees. Get var startAngle = arc . startAngle ; Set arc . setStartAngle ( startAngle ); // arc.setStartAngle(startAngle, anticlockwise); or arc . startAngle = startAngle ; End angle, in degrees. Get var endAngle = arc . endAngle ; Set arc . seEndAngle ( endAngle ); or arc . endAngle = endAngle ; Anticlockwise ( true , or false ) Get var anticlockwise = arc . anticlockwise ; Set arc . anticlockwise = anticlockwise ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = arc . iterations ; Set arc . iterations = iterations ; Other properties \u00b6 See game object","title":"Arc"},{"location":"shape-arc/#introduction","text":"Arc shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-arc/#usage","text":"","title":"Usage"},{"location":"shape-arc/#create-shape","text":"","title":"Create shape"},{"location":"shape-arc/#add-shape-object","text":"var arc = scene . add . arc ( x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-arc/#custom-class","text":"Define class class MyArc extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ) { super ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var arc = new MyArc ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor );","title":"Custom class"},{"location":"shape-arc/#color","text":"Fill color Get var color = arc . fillColor ; Set arc . setFillStyle ( color , alpha ); Stroke color Get var color = arc . strokeColor ; Set arc . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses arc.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-arc/#propertirs","text":"Radius Get var radius = arc . radius ; Set arc . setRadius ( radius ); or arc . radius = radius ; Start angle, in degrees. Get var startAngle = arc . startAngle ; Set arc . setStartAngle ( startAngle ); // arc.setStartAngle(startAngle, anticlockwise); or arc . startAngle = startAngle ; End angle, in degrees. Get var endAngle = arc . endAngle ; Set arc . seEndAngle ( endAngle ); or arc . endAngle = endAngle ; Anticlockwise ( true , or false ) Get var anticlockwise = arc . anticlockwise ; Set arc . anticlockwise = anticlockwise ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = arc . iterations ; Set arc . iterations = iterations ;","title":"Propertirs"},{"location":"shape-arc/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-circle/","text":"Introduction \u00b6 Circle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var circle = scene . add . circle ( x , y , radius , fillColor ); // var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha); Custom class \u00b6 Define class class MyCircle extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , fillColor , fillAlpha ) { super ( scene , x , y , radius , 0 , 360 , false , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var circle = new MyCircle ( scene , x , y , radius , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = circle . fillColor ; Set circle . setFillStyle ( color , alpha ); Stroke color Get var color = circle . strokeColor ; Set circle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses circle.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Radius Get var radius = circle . radius ; Set circle . setRadius ( radius ); or circle . radius = radius ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = circle . iterations ; Set circle . iterations = iterations ; Other properties \u00b6 See game object","title":"Circle"},{"location":"shape-circle/#introduction","text":"Circle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-circle/#usage","text":"","title":"Usage"},{"location":"shape-circle/#create-shape","text":"","title":"Create shape"},{"location":"shape-circle/#add-shape-object","text":"var circle = scene . add . circle ( x , y , radius , fillColor ); // var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-circle/#custom-class","text":"Define class class MyCircle extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , fillColor , fillAlpha ) { super ( scene , x , y , radius , 0 , 360 , false , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var circle = new MyCircle ( scene , x , y , radius , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-circle/#color","text":"Fill color Get var color = circle . fillColor ; Set circle . setFillStyle ( color , alpha ); Stroke color Get var color = circle . strokeColor ; Set circle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses circle.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-circle/#propertirs","text":"Radius Get var radius = circle . radius ; Set circle . setRadius ( radius ); or circle . radius = radius ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = circle . iterations ; Set circle . iterations = iterations ;","title":"Propertirs"},{"location":"shape-circle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-curve/","text":"Introduction \u00b6 Curve shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var curve = scene . add . curve ( x , y , path , fillColor ); // var curve = scene.add.curve(x, y, path, fillColor, fillAlpha); path : Path object . Custom class \u00b6 Define class class MyCurve extends Phaser . GameObjects . Curve { constructor ( scene , x , y , path , fillColor , fillAlpha ) { super ( scene , x , y , path , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var curve = new MyCurve ( scene , x , y , path , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = curve . fillColor ; Set curve . setFillStyle ( color , alpha ); Stroke color Get var color = curve . strokeColor ; Set curve . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses curve.setFillStyle(color, alpha) to change color. Smoothness \u00b6 The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. curve . setSmoothness ( smoothness ); or curve . smoothness = smoothness ; Other properties \u00b6 See game object","title":"Curve"},{"location":"shape-curve/#introduction","text":"Curve shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-curve/#usage","text":"","title":"Usage"},{"location":"shape-curve/#create-shape","text":"","title":"Create shape"},{"location":"shape-curve/#add-shape-object","text":"var curve = scene . add . curve ( x , y , path , fillColor ); // var curve = scene.add.curve(x, y, path, fillColor, fillAlpha); path : Path object .","title":"Add shape object"},{"location":"shape-curve/#custom-class","text":"Define class class MyCurve extends Phaser . GameObjects . Curve { constructor ( scene , x , y , path , fillColor , fillAlpha ) { super ( scene , x , y , path , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var curve = new MyCurve ( scene , x , y , path , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-curve/#color","text":"Fill color Get var color = curve . fillColor ; Set curve . setFillStyle ( color , alpha ); Stroke color Get var color = curve . strokeColor ; Set curve . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses curve.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-curve/#smoothness","text":"The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. curve . setSmoothness ( smoothness ); or curve . smoothness = smoothness ;","title":"Smoothness"},{"location":"shape-curve/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-ellipse/","text":"Introduction \u00b6 Ellipse shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var ellipse = scene . add . ellipse ( x , y , width , height , fillColor ); // var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha); Custom class \u00b6 Define class class MyEllipse extends Phaser . GameObjects . Ellipse { constructor ( scene , x , y , width , height , fillColor , fillAlpha ) { super ( scene , x , y , width , height , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ellipse = new MyEllipse ( scene , x , y , width , height , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = ellipse . fillColor ; Set ellipse . setFillStyle ( color , alpha ); Stroke color Get var color = ellipse . strokeColor ; Set ellipse . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses ellipse.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Size Get var width = ellipse . width ; var height = ellipse . height ; Set ellipse . setSize ( width , height ); Smoothness \u00b6 The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. ellipse . setSmoothness ( smoothness ); or ellipse . smoothness = smoothness ; Other properties \u00b6 See game object","title":"Ellipse"},{"location":"shape-ellipse/#introduction","text":"Ellipse shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-ellipse/#usage","text":"","title":"Usage"},{"location":"shape-ellipse/#create-shape","text":"","title":"Create shape"},{"location":"shape-ellipse/#add-shape-object","text":"var ellipse = scene . add . ellipse ( x , y , width , height , fillColor ); // var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-ellipse/#custom-class","text":"Define class class MyEllipse extends Phaser . GameObjects . Ellipse { constructor ( scene , x , y , width , height , fillColor , fillAlpha ) { super ( scene , x , y , width , height , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ellipse = new MyEllipse ( scene , x , y , width , height , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-ellipse/#color","text":"Fill color Get var color = ellipse . fillColor ; Set ellipse . setFillStyle ( color , alpha ); Stroke color Get var color = ellipse . strokeColor ; Set ellipse . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses ellipse.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-ellipse/#propertirs","text":"Size Get var width = ellipse . width ; var height = ellipse . height ; Set ellipse . setSize ( width , height );","title":"Propertirs"},{"location":"shape-ellipse/#smoothness","text":"The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. ellipse . setSmoothness ( smoothness ); or ellipse . smoothness = smoothness ;","title":"Smoothness"},{"location":"shape-ellipse/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-grid/","text":"Introduction \u00b6 Grid shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var grid = scene . add . grid ( x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); Custom class \u00b6 Define class class MyGrid extends Phaser . GameObjects . Grid { constructor ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ) { super ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var grid = new MyGrid ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); Color \u00b6 Fill color Get var color = grid . fillColor ; Set grid . setFillStyle ( color , alpha ); Stroke color Get var color = grid . strokeColor ; Set grid . setStrokeStyle ( lineWidth , color , alpha ); Alternating color Get var color = grid . altFillColor ; Set grid . setAltFillStyle ( color , alpha ); Outline color Get var color = grid . outlineFillColor ; Set grid . setOutlineStyle ( color , alpha ; No tint methods Uses grid.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Grid"},{"location":"shape-grid/#introduction","text":"Grid shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-grid/#usage","text":"","title":"Usage"},{"location":"shape-grid/#create-shape","text":"","title":"Create shape"},{"location":"shape-grid/#add-shape-object","text":"var grid = scene . add . grid ( x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha );","title":"Add shape object"},{"location":"shape-grid/#custom-class","text":"Define class class MyGrid extends Phaser . GameObjects . Grid { constructor ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ) { super ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var grid = new MyGrid ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha );","title":"Custom class"},{"location":"shape-grid/#color","text":"Fill color Get var color = grid . fillColor ; Set grid . setFillStyle ( color , alpha ); Stroke color Get var color = grid . strokeColor ; Set grid . setStrokeStyle ( lineWidth , color , alpha ); Alternating color Get var color = grid . altFillColor ; Set grid . setAltFillStyle ( color , alpha ); Outline color Get var color = grid . outlineFillColor ; Set grid . setOutlineStyle ( color , alpha ; No tint methods Uses grid.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-grid/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-isobox/","text":"Introduction \u00b6 Iso-box shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var isoBox = scene . add . isobox ( x , y , size , height , fillTop , fillLeft , fillRight ); Custom class \u00b6 Define class class MyIsoBox extends Phaser . GameObjects . IsoBox { constructor ( scene , x , y , size , height , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoBox = new MyIsoBox ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); Set color \u00b6 Fill color isoBox . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoBox . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoBox.setFillStyle(fillTop, fillLeft, fillRight) to change color. Projection \u00b6 Get var projection = isoBox . projection ; Set isoBox . setProjection ( value ) or isoBox . projection = value ; Other properties \u00b6 See game object","title":"Iso box"},{"location":"shape-isobox/#introduction","text":"Iso-box shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-isobox/#usage","text":"","title":"Usage"},{"location":"shape-isobox/#create-shape","text":"","title":"Create shape"},{"location":"shape-isobox/#add-shape-object","text":"var isoBox = scene . add . isobox ( x , y , size , height , fillTop , fillLeft , fillRight );","title":"Add shape object"},{"location":"shape-isobox/#custom-class","text":"Define class class MyIsoBox extends Phaser . GameObjects . IsoBox { constructor ( scene , x , y , size , height , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoBox = new MyIsoBox ( scene , x , y , size , height , fillTop , fillLeft , fillRight );","title":"Custom class"},{"location":"shape-isobox/#set-color","text":"Fill color isoBox . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoBox . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoBox.setFillStyle(fillTop, fillLeft, fillRight) to change color.","title":"Set color"},{"location":"shape-isobox/#projection","text":"Get var projection = isoBox . projection ; Set isoBox . setProjection ( value ) or isoBox . projection = value ;","title":"Projection"},{"location":"shape-isobox/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-isotriangle/","text":"Introduction \u00b6 Iso-triangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var isoTriangle = scene . add . isotriangle ( x , y , size , height , reversed , fillTop , fillLeft , fillRight ); Custom class \u00b6 Define class class MyIsoTriangle extends Phaser . GameObjects . IsoTriangle { constructor ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoTriangle = new MyIsoTriangle ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); Set color \u00b6 Fill color isoTriangle . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoTriangle . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoTriangle.setFillStyle(fillTop, fillLeft, fillRight) to change color. Projection \u00b6 Get var projection = isoTriangle . projection ; Set isoTriangle . setProjection ( value ) or isoTriangle . projection = value ; Reverse \u00b6 Get var isReversed = isoTriangle . isReversed ; Set isoTriangle . setReversed ( reversed ); or isotrianhle . reversed = reversed ; Set true to render upside down. Other properties \u00b6 See game object","title":"Iso triangle"},{"location":"shape-isotriangle/#introduction","text":"Iso-triangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-isotriangle/#usage","text":"","title":"Usage"},{"location":"shape-isotriangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-isotriangle/#add-shape-object","text":"var isoTriangle = scene . add . isotriangle ( x , y , size , height , reversed , fillTop , fillLeft , fillRight );","title":"Add shape object"},{"location":"shape-isotriangle/#custom-class","text":"Define class class MyIsoTriangle extends Phaser . GameObjects . IsoTriangle { constructor ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoTriangle = new MyIsoTriangle ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight );","title":"Custom class"},{"location":"shape-isotriangle/#set-color","text":"Fill color isoTriangle . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoTriangle . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoTriangle.setFillStyle(fillTop, fillLeft, fillRight) to change color.","title":"Set color"},{"location":"shape-isotriangle/#projection","text":"Get var projection = isoTriangle . projection ; Set isoTriangle . setProjection ( value ) or isoTriangle . projection = value ;","title":"Projection"},{"location":"shape-isotriangle/#reverse","text":"Get var isReversed = isoTriangle . isReversed ; Set isoTriangle . setReversed ( reversed ); or isotrianhle . reversed = reversed ; Set true to render upside down.","title":"Reverse"},{"location":"shape-isotriangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-line/","text":"Introduction \u00b6 Line shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var line = scene . add . line ( x , y , x1 , y1 , x2 , y2 , strokeColor ); // var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha); Custom class \u00b6 Define class class MyCurve extends Phaser . GameObjects . Line { constructor ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); Set color \u00b6 Fill color Get var color = line . fillColor ; Set line . setFillStyle ( color , alpha ); Stroke color Get var color = line . strokeColor ; Set line . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses line.setFillStyle(color, alpha) to change color. Set end points \u00b6 line . setTo ( x1 , y1 , x2 , y2 ); Line width \u00b6 line . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the line. Only used in WebGL. Other properties \u00b6 See game object","title":"Line"},{"location":"shape-line/#introduction","text":"Line shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-line/#usage","text":"","title":"Usage"},{"location":"shape-line/#create-shape","text":"","title":"Create shape"},{"location":"shape-line/#add-shape-object","text":"var line = scene . add . line ( x , y , x1 , y1 , x2 , y2 , strokeColor ); // var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha);","title":"Add shape object"},{"location":"shape-line/#custom-class","text":"Define class class MyCurve extends Phaser . GameObjects . Line { constructor ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor );","title":"Custom class"},{"location":"shape-line/#set-color","text":"Fill color Get var color = line . fillColor ; Set line . setFillStyle ( color , alpha ); Stroke color Get var color = line . strokeColor ; Set line . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses line.setFillStyle(color, alpha) to change color.","title":"Set color"},{"location":"shape-line/#set-end-points","text":"line . setTo ( x1 , y1 , x2 , y2 );","title":"Set end points"},{"location":"shape-line/#line-width","text":"line . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the line. Only used in WebGL.","title":"Line width"},{"location":"shape-line/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-polygon/","text":"Introduction \u00b6 Polygon shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var polygon = scene . add . polygon ( x , y , points , fillColor ); // var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Note Shift given points to align position (0, 0) Custom class \u00b6 Define class class MyPolygon extends Phaser . GameObjects . Polygon { constructor ( scene , x , y , points , fillColor ) { super ( scene , x , y , points , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var polygon = new MyPolygon ( scene , x , y , points , fillColor ); Color \u00b6 Fill color Get var color = polygon . fillColor ; Set polygon . setFillStyle ( color , alpha ); Stroke color Get var color = polygon . strokeColor ; Set polygon . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses polygon.setFillStyle(color, alpha) to change color. Smooth \u00b6 Smooths the polygon over the number of iterations specified. polygon . smooth ( iterations ); Other properties \u00b6 See game object","title":"Polygon"},{"location":"shape-polygon/#introduction","text":"Polygon shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-polygon/#usage","text":"","title":"Usage"},{"location":"shape-polygon/#create-shape","text":"","title":"Create shape"},{"location":"shape-polygon/#add-shape-object","text":"var polygon = scene . add . polygon ( x , y , points , fillColor ); // var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Note Shift given points to align position (0, 0)","title":"Add shape object"},{"location":"shape-polygon/#custom-class","text":"Define class class MyPolygon extends Phaser . GameObjects . Polygon { constructor ( scene , x , y , points , fillColor ) { super ( scene , x , y , points , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var polygon = new MyPolygon ( scene , x , y , points , fillColor );","title":"Custom class"},{"location":"shape-polygon/#color","text":"Fill color Get var color = polygon . fillColor ; Set polygon . setFillStyle ( color , alpha ); Stroke color Get var color = polygon . strokeColor ; Set polygon . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses polygon.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-polygon/#smooth","text":"Smooths the polygon over the number of iterations specified. polygon . smooth ( iterations );","title":"Smooth"},{"location":"shape-polygon/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-rectangle/","text":"Introduction \u00b6 Rectangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var rect = scene . add . rectangle ( x , y , width , height , fillColor ); // var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha); Custom class \u00b6 Define class class MyRectangle extends Phaser . GameObjects . Rectangle { constructor ( scene , x , y , width , height , fillColor ) { super ( scene , x , y , width , height , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRectangle ( scene , x , y , width , height , fillColor ); Color \u00b6 Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Rectangle"},{"location":"shape-rectangle/#introduction","text":"Rectangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-rectangle/#usage","text":"","title":"Usage"},{"location":"shape-rectangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-rectangle/#add-shape-object","text":"var rect = scene . add . rectangle ( x , y , width , height , fillColor ); // var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-rectangle/#custom-class","text":"Define class class MyRectangle extends Phaser . GameObjects . Rectangle { constructor ( scene , x , y , width , height , fillColor ) { super ( scene , x , y , width , height , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRectangle ( scene , x , y , width , height , fillColor );","title":"Custom class"},{"location":"shape-rectangle/#color","text":"Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-rectangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-roundrectangle/","text":"Introduction \u00b6 Round rectangle shape. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexRoundRectanglePlugin' , plugin : RoundRectanglePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 Add shape object \u00b6 var rect = scene . add . rexRoundRectangle ( x , y , width , height , radius , fillColor ); // var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha); width , height : Size of rectangle. undefined : Set ot undefined to draw a circle. radius : Radius of four corners. 0 , or undefined : Disable round corner. Number: 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Radius and iteration { radius : radius , iteration : 0 } or { radius : { x : radiusX , y : radiusY }, iteration : 0 } or { radius : { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }, iteration : 0 } iteration : Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc. Deform \u00b6 Rectangle, set radius of 4 corners to 0 . var rect = scene . add . rexRoundRectangle ( x , y , width , height , 0 , fillColor , fillAlpha ); Circle, set width and height to undefined . var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , radius , fillColor , fillAlpha ); Ellipse, set width and height to undefined , and radiusX/radiusY. var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { x : radiusX , y : radiusY }, fillColor , fillAlpha ); Rhombus, set width and height to undefined , and assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Octagon, assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , width , height , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Custom class \u00b6 Define class class MyRoundRectangle extends RexPlugins . GameObjects . RoundRectangle { constructor ( x , y , width , height , radius , fillColor , fillAlpha ) { super ( x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRoundRectangle ( x , y , width , height , radius , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color. Size \u00b6 Get var width = rect . width ; var height = rect . height ; Set rect . setSize ( width , height ); or rect . width = width ; rect . height = height ; Radius \u00b6 Get var radius = rect . radius ; or var cornerRadius = rect . cornerRadius ; radius : Number, maximum radius of 4 corners. cornerRadius : JSON object of 4 corners. { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Set rect . setRadius ( value ); or rect . radius = radius ; radius : Number : 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Iteration \u00b6 Get var iteration = rect . iteration ; Set rect . setIteration ( value ); or rect . iteration = value ; Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc. Other properties \u00b6 See game object","title":"Round Rectangle"},{"location":"shape-roundrectangle/#introduction","text":"Round rectangle shape. Author: Rex Game object","title":"Introduction"},{"location":"shape-roundrectangle/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"shape-roundrectangle/#usage","text":"Sample code","title":"Usage"},{"location":"shape-roundrectangle/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexRoundRectanglePlugin' , plugin : RoundRectanglePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"shape-roundrectangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-roundrectangle/#add-shape-object","text":"var rect = scene . add . rexRoundRectangle ( x , y , width , height , radius , fillColor ); // var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha); width , height : Size of rectangle. undefined : Set ot undefined to draw a circle. radius : Radius of four corners. 0 , or undefined : Disable round corner. Number: 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Radius and iteration { radius : radius , iteration : 0 } or { radius : { x : radiusX , y : radiusY }, iteration : 0 } or { radius : { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }, iteration : 0 } iteration : Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc.","title":"Add shape object"},{"location":"shape-roundrectangle/#deform","text":"Rectangle, set radius of 4 corners to 0 . var rect = scene . add . rexRoundRectangle ( x , y , width , height , 0 , fillColor , fillAlpha ); Circle, set width and height to undefined . var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , radius , fillColor , fillAlpha ); Ellipse, set width and height to undefined , and radiusX/radiusY. var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { x : radiusX , y : radiusY }, fillColor , fillAlpha ); Rhombus, set width and height to undefined , and assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Octagon, assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , width , height , { radius : radius , iteration : 0 }, fillColor , fillAlpha );","title":"Deform"},{"location":"shape-roundrectangle/#custom-class","text":"Define class class MyRoundRectangle extends RexPlugins . GameObjects . RoundRectangle { constructor ( x , y , width , height , radius , fillColor , fillAlpha ) { super ( x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRoundRectangle ( x , y , width , height , radius , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-roundrectangle/#color","text":"Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-roundrectangle/#size","text":"Get var width = rect . width ; var height = rect . height ; Set rect . setSize ( width , height ); or rect . width = width ; rect . height = height ;","title":"Size"},{"location":"shape-roundrectangle/#radius","text":"Get var radius = rect . radius ; or var cornerRadius = rect . cornerRadius ; radius : Number, maximum radius of 4 corners. cornerRadius : JSON object of 4 corners. { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Set rect . setRadius ( value ); or rect . radius = radius ; radius : Number : 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }","title":"Radius"},{"location":"shape-roundrectangle/#iteration","text":"Get var iteration = rect . iteration ; Set rect . setIteration ( value ); or rect . iteration = value ; Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc.","title":"Iteration"},{"location":"shape-roundrectangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-star/","text":"Introduction \u00b6 Star shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var star = scene . add . star ( x , y , points , innerRadius , outerRadius , fillColor ); // var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha); points : The number of points on the star. Default is 5. innerRadius : The inner radius of the star. Default is 32. outerRadius : The outer radius of the star. Default is 64. Custom class \u00b6 Define class class MyStar extends Phaser . GameObjects . Star { constructor ( scene , x , y , points , innerRadius , outerRadius , fillColor ) { super ( scene , x , y , points , innerRadius , outerRadius , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var star = new MyStar ( scene , x , y , points , innerRadius , outerRadius , fillColor ); Color \u00b6 Fill color Get var color = star . fillColor ; Set star . setFillStyle ( color , alpha ); Stroke color Get var color = star . strokeColor ; Set star . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses star.setFillStyle(color, alpha) to change color. Properties \u00b6 Inner radius Get var innerRadius = star . innerRadius ; Set star . setInnerRadius ( innerRadius ); or star . innerRadius = innerRadius ; Outer radius Get var outerRadius = star . outerRadius ; Set star . setOuterRadius ( outerRadius ); or star . outerRadius = outerRadius ; Points Get var points = star . points ; Set star . setPoints ( points ); or star . points = points ; Other properties \u00b6 See game object","title":"Star"},{"location":"shape-star/#introduction","text":"Star shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-star/#usage","text":"","title":"Usage"},{"location":"shape-star/#create-shape","text":"","title":"Create shape"},{"location":"shape-star/#add-shape-object","text":"var star = scene . add . star ( x , y , points , innerRadius , outerRadius , fillColor ); // var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha); points : The number of points on the star. Default is 5. innerRadius : The inner radius of the star. Default is 32. outerRadius : The outer radius of the star. Default is 64.","title":"Add shape object"},{"location":"shape-star/#custom-class","text":"Define class class MyStar extends Phaser . GameObjects . Star { constructor ( scene , x , y , points , innerRadius , outerRadius , fillColor ) { super ( scene , x , y , points , innerRadius , outerRadius , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var star = new MyStar ( scene , x , y , points , innerRadius , outerRadius , fillColor );","title":"Custom class"},{"location":"shape-star/#color","text":"Fill color Get var color = star . fillColor ; Set star . setFillStyle ( color , alpha ); Stroke color Get var color = star . strokeColor ; Set star . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses star.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-star/#properties","text":"Inner radius Get var innerRadius = star . innerRadius ; Set star . setInnerRadius ( innerRadius ); or star . innerRadius = innerRadius ; Outer radius Get var outerRadius = star . outerRadius ; Set star . setOuterRadius ( outerRadius ); or star . outerRadius = outerRadius ; Points Get var points = star . points ; Set star . setPoints ( points ); or star . points = points ;","title":"Properties"},{"location":"shape-star/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-triangle/","text":"Introduction \u00b6 Triangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var triangle = scene . add . triangle ( x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha); Custom class \u00b6 Define class class MyTriangle extends Phaser . GameObjects . Triangle { constructor ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var triangle = new MyTriangle ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); Color \u00b6 Fill color Get var color = triangle . fillColor ; Set triangle . setFillStyle ( color , alpha ); Stroke color Get var color = triangle . strokeColor ; Set triangle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses triangle.setFillStyle(color, alpha) to change color. Set vertices \u00b6 triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); Triangle width \u00b6 triangle . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the triangle. Only used in WebGL. Other properties \u00b6 See game object","title":"Triangle"},{"location":"shape-triangle/#introduction","text":"Triangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-triangle/#usage","text":"","title":"Usage"},{"location":"shape-triangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-triangle/#add-shape-object","text":"var triangle = scene . add . triangle ( x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-triangle/#custom-class","text":"Define class class MyTriangle extends Phaser . GameObjects . Triangle { constructor ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var triangle = new MyTriangle ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor );","title":"Custom class"},{"location":"shape-triangle/#color","text":"Fill color Get var color = triangle . fillColor ; Set triangle . setFillStyle ( color , alpha ); Stroke color Get var color = triangle . strokeColor ; Set triangle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses triangle.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-triangle/#set-vertices","text":"triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Set vertices"},{"location":"shape-triangle/#triangle-width","text":"triangle . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the triangle. Only used in WebGL.","title":"Triangle width"},{"location":"shape-triangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"ship/","text":"Introduction \u00b6 Move game object as a space ship by cursor keys. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexShip from './plugins/ship.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import ShipPlugin from './plugins/ship-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexShip' , plugin : ShipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var ship = scene . plugins . get ( 'rexShip' ). add ( gameObject , { // maxSpeed: 200, // acceleration: 200, // drag: 0.99, // turnSpeed: 300, // wrap: true, // padding: 0, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); Movement maxSpeed acceleration drag Rotation turnSpeed : Angular velocity Wrap wrap : Set true to enable wrap mode. padding enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default. Set max speed \u00b6 ship . setMaxSpeed ( speed ); Set acceleration \u00b6 ship . setAcceleration ( acc ); Set drag \u00b6 ship . setDrag ( drag ); Set turn speed \u00b6 ship . setTurnSpeed ( angularVelocity ); Set wrap mode \u00b6 ship . setWrapMode ( wrap , padding ); wrap : Set true to enable wrap mode.","title":"Ship"},{"location":"ship/#introduction","text":"Move game object as a space ship by cursor keys. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"ship/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"ship/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"ship/#import-class","text":"import rexShip from './plugins/ship.js' ;","title":"Import class"},{"location":"ship/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import ShipPlugin from './plugins/ship-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexShip' , plugin : ShipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"ship/#create-instance","text":"var ship = scene . plugins . get ( 'rexShip' ). add ( gameObject , { // maxSpeed: 200, // acceleration: 200, // drag: 0.99, // turnSpeed: 300, // wrap: true, // padding: 0, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); Movement maxSpeed acceleration drag Rotation turnSpeed : Angular velocity Wrap wrap : Set true to enable wrap mode. padding enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default.","title":"Create instance"},{"location":"ship/#set-max-speed","text":"ship . setMaxSpeed ( speed );","title":"Set max speed"},{"location":"ship/#set-acceleration","text":"ship . setAcceleration ( acc );","title":"Set acceleration"},{"location":"ship/#set-drag","text":"ship . setDrag ( drag );","title":"Set drag"},{"location":"ship/#set-turn-speed","text":"ship . setTurnSpeed ( angularVelocity );","title":"Set turn speed"},{"location":"ship/#set-wrap-mode","text":"ship . setWrapMode ( wrap , padding ); wrap : Set true to enable wrap mode.","title":"Set wrap mode"},{"location":"slider/","text":"Introduction \u00b6 Drag thumb on a slider bar. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexSlider from './plugins/slider.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SliderPlugin from './plugins/slider-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSlider' , plugin : SliderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var slider = scene . plugins . get ( 'rexSlider' ). add ( gameObject , { // endPoints: [ // {x:0, y:0}, // {x:0, y:0} // ], // value: 0, // enable: true, // valuechangeCallback: null, // valuechangeCallbackScope: null }); endPoints : An array of 2 end-points ( [{x,y}, {x,y}] ) value : Initial value between 0 to 1 enable : Set true to drag thumb valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event Set end-points \u00b6 slider . setEndPoints ( p0x , p0y , p1x , p1y ); // slider.setEndPoints(p0, p1); // p0, p1: {x, y} // slider.setEndPoints(points); // points: [p0, p1] Get value \u00b6 var value = slider . value ; // value: between 0 to 1 // var value = slider.getValue(); // value: between 0 to 1 // var value = slider.getValue(min, max); // value: between min to max Set value \u00b6 slider . value = newValue ; // newValue: between 0 to 1 // slider.setValue(newValue); // newValue: between 0 to 1 // slider.setValue(newValue, min, max); // newValue: between min to max slider . addValue ( inc ); // inc: between 0 to 1 // slider.addValue(inc, min, max); // inc: between min to max Fires valuechange event if new value is not equal to current value. Events \u00b6 Value changed slider . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); newValue: between 0 to 1 prevValue: between 0 to 1 Drag \u00b6 Drag enable \u00b6 slider . setEnable (); // slider.setEnable(false); // disable Is dragging \u00b6 var isDragging = slider . isDragging ;","title":"Slider"},{"location":"slider/#introduction","text":"Drag thumb on a slider bar. Author: Rex Behavior of game object","title":"Introduction"},{"location":"slider/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"slider/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"slider/#import-class","text":"import rexSlider from './plugins/slider.js' ;","title":"Import class"},{"location":"slider/#install-global-plugin","text":"Install plugin in configuration of game import SliderPlugin from './plugins/slider-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSlider' , plugin : SliderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"slider/#create-instance","text":"var slider = scene . plugins . get ( 'rexSlider' ). add ( gameObject , { // endPoints: [ // {x:0, y:0}, // {x:0, y:0} // ], // value: 0, // enable: true, // valuechangeCallback: null, // valuechangeCallbackScope: null }); endPoints : An array of 2 end-points ( [{x,y}, {x,y}] ) value : Initial value between 0 to 1 enable : Set true to drag thumb valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event","title":"Create instance"},{"location":"slider/#set-end-points","text":"slider . setEndPoints ( p0x , p0y , p1x , p1y ); // slider.setEndPoints(p0, p1); // p0, p1: {x, y} // slider.setEndPoints(points); // points: [p0, p1]","title":"Set end-points"},{"location":"slider/#get-value","text":"var value = slider . value ; // value: between 0 to 1 // var value = slider.getValue(); // value: between 0 to 1 // var value = slider.getValue(min, max); // value: between min to max","title":"Get value"},{"location":"slider/#set-value","text":"slider . value = newValue ; // newValue: between 0 to 1 // slider.setValue(newValue); // newValue: between 0 to 1 // slider.setValue(newValue, min, max); // newValue: between min to max slider . addValue ( inc ); // inc: between 0 to 1 // slider.addValue(inc, min, max); // inc: between min to max Fires valuechange event if new value is not equal to current value.","title":"Set value"},{"location":"slider/#events","text":"Value changed slider . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); newValue: between 0 to 1 prevValue: between 0 to 1","title":"Events"},{"location":"slider/#drag","text":"","title":"Drag"},{"location":"slider/#drag-enable","text":"slider . setEnable (); // slider.setEnable(false); // disable","title":"Drag enable"},{"location":"slider/#is-dragging","text":"var isDragging = slider . isDragging ;","title":"Is dragging"},{"location":"snap/","text":"Introduction \u00b6 Snap a value to nearest grid slice, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Round \u00b6 var out = Phaser . Math . Snap . To ( value , gap ); // var out = Phaser.Math.Snap.To(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 15 Ceil \u00b6 var out = Phaser . Math . Snap . Ceil ( value , gap ); // var out = Phaser.Math.Snap.Ceil(value, gap, start); Example: set gap to 5 Set value to 12 , return 15 Set value to 14 , return 15 Floor \u00b6 var out = Phaser . Math . Snap . Floor ( value , gap ); // var out = Phaser.Math.Snap.Floor(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 10","title":"Snap"},{"location":"snap/#introduction","text":"Snap a value to nearest grid slice, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"snap/#usage","text":"","title":"Usage"},{"location":"snap/#round","text":"var out = Phaser . Math . Snap . To ( value , gap ); // var out = Phaser.Math.Snap.To(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 15","title":"Round"},{"location":"snap/#ceil","text":"var out = Phaser . Math . Snap . Ceil ( value , gap ); // var out = Phaser.Math.Snap.Ceil(value, gap, start); Example: set gap to 5 Set value to 12 , return 15 Set value to 14 , return 15","title":"Ceil"},{"location":"snap/#floor","text":"var out = Phaser . Math . Snap . Floor ( value , gap ); // var out = Phaser.Math.Snap.Floor(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 10","title":"Floor"},{"location":"snapshot/","text":"Introduction \u00b6 Get snapshot image, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get snapshot image \u00b6 Whole canvas game . renderer . snapshot ( callback ); // game.renderer.snapshot(callback, type, encoderOptions); A rectangle area game . renderer . snapshotArea ( x , y , width , height , callback ); // game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions); A pixel game . renderer . snapshotPixel ( x , y , callback ); Parameters: type : 'image/png' encoderOptions : 0.92 callback : function ( image ){ /* ... */ }; image : Image element","title":"Snapshot"},{"location":"snapshot/#introduction","text":"Get snapshot image, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"snapshot/#usage","text":"","title":"Usage"},{"location":"snapshot/#get-snapshot-image","text":"Whole canvas game . renderer . snapshot ( callback ); // game.renderer.snapshot(callback, type, encoderOptions); A rectangle area game . renderer . snapshotArea ( x , y , width , height , callback ); // game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions); A pixel game . renderer . snapshotPixel ( x , y , callback ); Parameters: type : 'image/png' encoderOptions : 0.92 callback : function ( image ){ /* ... */ }; image : Image element","title":"Get snapshot image"},{"location":"sprite/","text":"Introduction \u00b6 Display of both static and animated images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 Texture for static image scene . load . image ( key , url ); Reference: load image Load atlas \u00b6 Atlas for animation images scene . load . atlas ( key , textureURL , atlasURL ); Reference: load atlas Add sprite object \u00b6 var sprite = scene . add . sprite ( x , y , key ); Add sprite from JSON var sprite = scene . make . sprite ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, // anims: { // key: , // repeat: , // ... // }, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MySprite extends Phaser . GameObjects . Sprite { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var sprite = new MySprite ( scene , x , y , key ); Other properties \u00b6 See game object Animation \u00b6 Create animation \u00b6 See Add animation section . Load animation \u00b6 sprite . anims . load ( key ); // sprite.anims.load(key, startFrame); Play animation \u00b6 Play sprite . play ( key ); // sprite.play(key, ignoreIfPlaying, startFrame); or sprite . anims . play ( key ); // sprite.anims.play(key, ignoreIfPlaying, startFrame); Set current frame sprite . anims . setCurrentFrame ( frame ); Set playback progress sprite . anims . setProgress ( t ); // t: 0~1 Play in reverse sprite . anims . playReverse ( key ); // sprite.playReverse(key, ignoreIfPlaying, startFrame); Reverse the Animation that is already playing sprite . anims . reverse ( key ); Chain next animation sprite . anims . chain ( key ); Reset sprite . anims . chain (); Set to next frame sprite . anims . nextFrame (); Set to previous frame sprite . anims . previousFrame (); Time scale sprite . anims . setTimeScale ( value ); Pause \u00b6 sprite . anims . pause (); // sprite.anims.pause(atFrame); Resume \u00b6 sprite . anims . resume (); // sprite.anims.resume(fromFrame); Stop \u00b6 sprite . anims . stop (); or sprite . anims . stopAfterDelay ( delay ); or sprite . anims . stopOnFrame ( frame ); Restart \u00b6 sprite . anims . restart (); // sprite.anims.restart(includeDelay); Repeat \u00b6 Set repeat sprite . anims . setRepeat ( value ); Set yoyo sprite . anims . setYoyo ( value ); Stop repeat sprite . anims . stopOnRepeat (); Set repeat delay sprite . anims . setRepeatDelay (); Properties \u00b6 Is playing var isPlaying = sprite . anims . isPlaying ; Is paused var isPaused = sprite . anims . isPaused ; Total frames count var frameCount = sprite . anims . getTotalFrames (); Time scale var timescale = sprite . anims . getTimeScale (); Progress Progress ignoring repeats and yoyos var progress = sprite . anims . getProgress (); Repeat Repeat count var repeatCount = sprite . anims . getRepeat (); Yoyo var repeatDelay = sprite . anims . getYoyo (); Repeat delay var repeatDelay = sprite . anims . getRepeatDelay (); Current animation var currentAnim = sprite . anims . currentAnim ; Current frame var currentAnim = sprite . anims . currentFrame ; Events \u00b6 On start sprite . on ( 'animationstart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationstart-' + key , function ( currentAnim , currentFrame , sprite ){}); On restart sprite . on ( 'animationrestart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrestart-' + key , function ( currentAnim , currentFrame , sprite ){}); On complete sprite . on ( 'animationcomplete' , function ( currentAnim , currentFramee , sprite ){}); sprite . on ( 'animationcomplete-' + key , function ( currentAnim , currentFramee , sprite ){}); On update sprite . on ( 'animationupdate' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationupdate-' + key , function ( currentAnim , currentFrame , sprite ){}); On repeat sprite . on ( 'animationrepeat' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrepeat-' + key , function ( currentAnim , currentFrame , sprite ){});","title":"Sprite"},{"location":"sprite/#introduction","text":"Display of both static and animated images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"sprite/#usage","text":"","title":"Usage"},{"location":"sprite/#load-texture","text":"Texture for static image scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"sprite/#load-atlas","text":"Atlas for animation images scene . load . atlas ( key , textureURL , atlasURL ); Reference: load atlas","title":"Load atlas"},{"location":"sprite/#add-sprite-object","text":"var sprite = scene . add . sprite ( x , y , key ); Add sprite from JSON var sprite = scene . make . sprite ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, // anims: { // key: , // repeat: , // ... // }, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add sprite object"},{"location":"sprite/#custom-class","text":"Define class class MySprite extends Phaser . GameObjects . Sprite { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var sprite = new MySprite ( scene , x , y , key );","title":"Custom class"},{"location":"sprite/#other-properties","text":"See game object","title":"Other properties"},{"location":"sprite/#animation","text":"","title":"Animation"},{"location":"sprite/#create-animation","text":"See Add animation section .","title":"Create animation"},{"location":"sprite/#load-animation","text":"sprite . anims . load ( key ); // sprite.anims.load(key, startFrame);","title":"Load animation"},{"location":"sprite/#play-animation","text":"Play sprite . play ( key ); // sprite.play(key, ignoreIfPlaying, startFrame); or sprite . anims . play ( key ); // sprite.anims.play(key, ignoreIfPlaying, startFrame); Set current frame sprite . anims . setCurrentFrame ( frame ); Set playback progress sprite . anims . setProgress ( t ); // t: 0~1 Play in reverse sprite . anims . playReverse ( key ); // sprite.playReverse(key, ignoreIfPlaying, startFrame); Reverse the Animation that is already playing sprite . anims . reverse ( key ); Chain next animation sprite . anims . chain ( key ); Reset sprite . anims . chain (); Set to next frame sprite . anims . nextFrame (); Set to previous frame sprite . anims . previousFrame (); Time scale sprite . anims . setTimeScale ( value );","title":"Play animation"},{"location":"sprite/#pause","text":"sprite . anims . pause (); // sprite.anims.pause(atFrame);","title":"Pause"},{"location":"sprite/#resume","text":"sprite . anims . resume (); // sprite.anims.resume(fromFrame);","title":"Resume"},{"location":"sprite/#stop","text":"sprite . anims . stop (); or sprite . anims . stopAfterDelay ( delay ); or sprite . anims . stopOnFrame ( frame );","title":"Stop"},{"location":"sprite/#restart","text":"sprite . anims . restart (); // sprite.anims.restart(includeDelay);","title":"Restart"},{"location":"sprite/#repeat","text":"Set repeat sprite . anims . setRepeat ( value ); Set yoyo sprite . anims . setYoyo ( value ); Stop repeat sprite . anims . stopOnRepeat (); Set repeat delay sprite . anims . setRepeatDelay ();","title":"Repeat"},{"location":"sprite/#properties","text":"Is playing var isPlaying = sprite . anims . isPlaying ; Is paused var isPaused = sprite . anims . isPaused ; Total frames count var frameCount = sprite . anims . getTotalFrames (); Time scale var timescale = sprite . anims . getTimeScale (); Progress Progress ignoring repeats and yoyos var progress = sprite . anims . getProgress (); Repeat Repeat count var repeatCount = sprite . anims . getRepeat (); Yoyo var repeatDelay = sprite . anims . getYoyo (); Repeat delay var repeatDelay = sprite . anims . getRepeatDelay (); Current animation var currentAnim = sprite . anims . currentAnim ; Current frame var currentAnim = sprite . anims . currentFrame ;","title":"Properties"},{"location":"sprite/#events","text":"On start sprite . on ( 'animationstart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationstart-' + key , function ( currentAnim , currentFrame , sprite ){}); On restart sprite . on ( 'animationrestart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrestart-' + key , function ( currentAnim , currentFrame , sprite ){}); On complete sprite . on ( 'animationcomplete' , function ( currentAnim , currentFramee , sprite ){}); sprite . on ( 'animationcomplete-' + key , function ( currentAnim , currentFramee , sprite ){}); On update sprite . on ( 'animationupdate' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationupdate-' + key , function ( currentAnim , currentFrame , sprite ){}); On repeat sprite . on ( 'animationrepeat' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrepeat-' + key , function ( currentAnim , currentFrame , sprite ){});","title":"Events"},{"location":"structs-set/","text":"Introduction \u00b6 A collection of unique elements, built-in data structure of phaser. Author: Richard Davey Usage \u00b6 Create instance \u00b6 var set = Phaser . Structs . Set (); or var set = Phaser . Structs . Set ( elements ); Add an element \u00b6 set . set ( element ); Remove an element \u00b6 set . delete ( element ); Remove all elements \u00b6 set . clear (); Has element \u00b6 set . contains ( element ); Get elements \u00b6 var elements = set . entries ; or get a shallow copy of elements var elements = set . getArray (); Element counts \u00b6 var size = set . size ; For each element \u00b6 For when you know this Set will be modified during the iteration. set . each ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) For when you absolutely know this Set won't be modified during the iteration. set . iterate ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) Set operations \u00b6 C = A | B var setC = setA . union ( setB ); C = A & B var setC = setA . intersect ( setB ); C = A - B var setC = setA . difference ( setB );","title":"Set"},{"location":"structs-set/#introduction","text":"A collection of unique elements, built-in data structure of phaser. Author: Richard Davey","title":"Introduction"},{"location":"structs-set/#usage","text":"","title":"Usage"},{"location":"structs-set/#create-instance","text":"var set = Phaser . Structs . Set (); or var set = Phaser . Structs . Set ( elements );","title":"Create instance"},{"location":"structs-set/#add-an-element","text":"set . set ( element );","title":"Add an element"},{"location":"structs-set/#remove-an-element","text":"set . delete ( element );","title":"Remove an element"},{"location":"structs-set/#remove-all-elements","text":"set . clear ();","title":"Remove all elements"},{"location":"structs-set/#has-element","text":"set . contains ( element );","title":"Has element"},{"location":"structs-set/#get-elements","text":"var elements = set . entries ; or get a shallow copy of elements var elements = set . getArray ();","title":"Get elements"},{"location":"structs-set/#element-counts","text":"var size = set . size ;","title":"Element counts"},{"location":"structs-set/#for-each-element","text":"For when you know this Set will be modified during the iteration. set . each ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) For when you absolutely know this Set won't be modified during the iteration. set . iterate ( function ( element , index ) { // return false; // return false to cancel iteration }, scope )","title":"For each element"},{"location":"structs-set/#set-operations","text":"C = A | B var setC = setA . union ( setB ); C = A & B var setC = setA . intersect ( setB ); C = A - B var setC = setA . difference ( setB );","title":"Set operations"},{"location":"tagtext/","text":"Introduction \u00b6 Displays text with multi-color, font face, or font size with tags. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexTagTextPlugin' , plugin : TagTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text object \u00b6 var tags = { tag0 : { color : 'red' }, tag1 : { color : 'blue' } }; var txt = scene . add . rexTagText ( x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); // var txt = scene.add.rexTagText(x, y, '<style=\"tag0\">h</style>ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags }); Properties of a tag { fontFamily : 'Courier' , // or 'family', 'font-family' fontSize : '16px' , // or 'size', 'font-size' fontStyle : 'bold italic' , // or 'style', 'font-style' color : 'red' , // or 'font-color' stroke : { color : 'blue' , thinkness : 1 }, shadow : { color : 'black' , offsetX : 2 , offsetY : 2 , blur : 2 }, underline : { // or 'u' color : 'blue' , thinkness : 3 , offset : - 1 }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // area: key, } Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null } tags : { //tag0: { // color: 'red' //}, //tag1: { // color: 'blue' //} }, // resolution: 1 } Add text from JSON var txt = scene . make . rexTagText ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' , tags : {} }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom Custom class \u00b6 Define class class MyText extends TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); Wrap \u00b6 Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width ); Content \u00b6 Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '<style=\"name1\">wor</style>ld' ); // txt.text = '<style=\"name1\">wor</style>ld'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Image \u00b6 Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config} Hit area of words \u00b6 Hitting events \u00b6 Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope ) Draw hit-areas \u00b6 txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height ); Inline style \u00b6 Define style inline text. <style='color:red'>Some text</style> <style='size:30px'>Some text</style> <style='stroke:blue 1px'>Some text</style> (color thinkness) <style='shadow:blue 2px 2px 2px'>Some text</style> (color offsetX offsetY blur) <style='underline:blue 3px -1px'>Some text</style> (color thinkness offset) Or mix them <style='color:red;size:30px'>Some text</style>","title":"Tag Text"},{"location":"tagtext/#introduction","text":"Displays text with multi-color, font face, or font size with tags. Author: Rex Game object","title":"Introduction"},{"location":"tagtext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"tagtext/#usage","text":"Sample code","title":"Usage"},{"location":"tagtext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexTagTextPlugin' , plugin : TagTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"tagtext/#add-text-object","text":"var tags = { tag0 : { color : 'red' }, tag1 : { color : 'blue' } }; var txt = scene . add . rexTagText ( x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); // var txt = scene.add.rexTagText(x, y, '<style=\"tag0\">h</style>ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags }); Properties of a tag { fontFamily : 'Courier' , // or 'family', 'font-family' fontSize : '16px' , // or 'size', 'font-size' fontStyle : 'bold italic' , // or 'style', 'font-style' color : 'red' , // or 'font-color' stroke : { color : 'blue' , thinkness : 1 }, shadow : { color : 'black' , offsetX : 2 , offsetY : 2 , blur : 2 }, underline : { // or 'u' color : 'blue' , thinkness : 3 , offset : - 1 }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // area: key, } Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null } tags : { //tag0: { // color: 'red' //}, //tag1: { // color: 'blue' //} }, // resolution: 1 } Add text from JSON var txt = scene . make . rexTagText ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' , tags : {} }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom","title":"Add text object"},{"location":"tagtext/#custom-class","text":"Define class class MyText extends TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '<style=\"tag0\">h</style>ello' , { tags : tags });","title":"Custom class"},{"location":"tagtext/#wrap","text":"Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width );","title":"Wrap"},{"location":"tagtext/#content","text":"Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '<style=\"name1\">wor</style>ld' ); // txt.text = '<style=\"name1\">wor</style>ld';","title":"Content"},{"location":"tagtext/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"tagtext/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"tagtext/#image","text":"Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config}","title":"Image"},{"location":"tagtext/#hit-area-of-words","text":"","title":"Hit area of words"},{"location":"tagtext/#hitting-events","text":"Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope )","title":"Hitting events"},{"location":"tagtext/#draw-hit-areas","text":"txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw hit-areas"},{"location":"tagtext/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"tagtext/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"tagtext/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"tagtext/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"tagtext/#inline-style","text":"Define style inline text. <style='color:red'>Some text</style> <style='size:30px'>Some text</style> <style='stroke:blue 1px'>Some text</style> (color thinkness) <style='shadow:blue 2px 2px 2px'>Some text</style> (color offsetX offsetY blur) <style='underline:blue 3px -1px'>Some text</style> (color thinkness offset) Or mix them <style='color:red;size:30px'>Some text</style>","title":"Inline style"},{"location":"tcrp-player/","text":"Introduction \u00b6 Player of T ime- C ommand- R ecorder- P layer, to run commands on time. Author: Rex Member of scene Source code \u00b6 Link Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTCRP from './plugins/tcrp.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var player = scene . plugins . get ( 'rexTextTyping' ). addPlayer ( scene , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0, // 'abs'|'absolute'|0|'inc'|'increment'|1 // commands: [], // [[dt, command], [dt, command], ...] // timeScale: 1, // 0~1 // scope: undefined }); timeUnit : see next section dtMode : see next section commands : see next section timeScale Load commands \u00b6 player . load ( commands , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0 // 'abs'|'absolute'|0|'inc'|'increment'|1 }); Commands : see also Run commands [ [ dt , command ], [ dt , command ], ... ] Format of each row : [ dt , fnName , param0 , param1 , ...] // [dt, callback, param0, param1, ...] [ dt , [ fnName , param0 , param1 , ...]] // [dt, [callback, param0, param1, ...]] [ dt , [ command0 , command1 , ...]] timeUnit: time-unit of dt 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second dtMode: mode of counting dt 'abs' , 'absolute' , or 0 : timeout = dt 'inc' , 'increment' , 1 : timeout = dt + previous-timeout Start playing \u00b6 player . start (); // player.start(startAt); // start-at time in ms Events \u00b6 Complete player . on ( 'complete' , function ( player ){}); Run command player . on ( 'runcommand' , function ( commands , scope ){}); Pause, Resume, stop playing \u00b6 player . pause (); player . resume (); player . stop (); Seek elapsed time \u00b6 player . seek ( time ); // elapsed time in ms State of player \u00b6 var isPlaying = player . isPlaying ; var completed = player . completed ; var now = player . now ; Time-scale \u00b6 Set player . setTimeScale ( value ); // 0~1 // player.timeScale = value; Get var timeScale = player . timeScale ;","title":"Player"},{"location":"tcrp-player/#introduction","text":"Player of T ime- C ommand- R ecorder- P layer, to run commands on time. Author: Rex Member of scene","title":"Introduction"},{"location":"tcrp-player/#source-code","text":"Link","title":"Source code"},{"location":"tcrp-player/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"tcrp-player/#import-class","text":"import rexTCRP from './plugins/tcrp.js' ;","title":"Import class"},{"location":"tcrp-player/#install-global-plugin","text":"Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"tcrp-player/#create-instance","text":"var player = scene . plugins . get ( 'rexTextTyping' ). addPlayer ( scene , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0, // 'abs'|'absolute'|0|'inc'|'increment'|1 // commands: [], // [[dt, command], [dt, command], ...] // timeScale: 1, // 0~1 // scope: undefined }); timeUnit : see next section dtMode : see next section commands : see next section timeScale","title":"Create instance"},{"location":"tcrp-player/#load-commands","text":"player . load ( commands , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0 // 'abs'|'absolute'|0|'inc'|'increment'|1 }); Commands : see also Run commands [ [ dt , command ], [ dt , command ], ... ] Format of each row : [ dt , fnName , param0 , param1 , ...] // [dt, callback, param0, param1, ...] [ dt , [ fnName , param0 , param1 , ...]] // [dt, [callback, param0, param1, ...]] [ dt , [ command0 , command1 , ...]] timeUnit: time-unit of dt 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second dtMode: mode of counting dt 'abs' , 'absolute' , or 0 : timeout = dt 'inc' , 'increment' , 1 : timeout = dt + previous-timeout","title":"Load commands"},{"location":"tcrp-player/#start-playing","text":"player . start (); // player.start(startAt); // start-at time in ms","title":"Start playing"},{"location":"tcrp-player/#events","text":"Complete player . on ( 'complete' , function ( player ){}); Run command player . on ( 'runcommand' , function ( commands , scope ){});","title":"Events"},{"location":"tcrp-player/#pause-resume-stop-playing","text":"player . pause (); player . resume (); player . stop ();","title":"Pause, Resume, stop playing"},{"location":"tcrp-player/#seek-elapsed-time","text":"player . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"tcrp-player/#state-of-player","text":"var isPlaying = player . isPlaying ; var completed = player . completed ; var now = player . now ;","title":"State of player"},{"location":"tcrp-player/#time-scale","text":"Set player . setTimeScale ( value ); // 0~1 // player.timeScale = value; Get var timeScale = player . timeScale ;","title":"Time-scale"},{"location":"tcrp-recoder/","text":"Introduction \u00b6 Recorder of T ime- C ommand- R ecorder- P layer, to store commands with time. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTCRP from './plugins/tcrp.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var recorder = scene . plugins . get ( 'rexTextTyping' ). addRecorder ( scene ); Start recording \u00b6 recorder . start (); // recorder.start(startAt); // start-at time in ms Push commands \u00b6 recorder . addCommand ([ fnName , param0 , param1 , ...]); // recorder.addCommand([command0, command1, ...]); // recorder.addCommand([fnName, param0, param1, ...], offset); // time-offset in ms See also Run commands Get commands \u00b6 var commands = recorder . getCommands (); // get a shallow copy of commands // var commands = recorder.getCommands(true); // get reference of commands Format of return commands: [ [ dt , [ command ]], [ dt , [ command0 , command1 ]], ... ] Pause, Resume, stop recording \u00b6 recorder . pause (); recorder . resume (); recorder . stop (); Seek elapsed time \u00b6 recorder . seek ( time ); // elapsed time in ms State of recorder \u00b6 var isRecording = recorder . isRecording ; var now = recorder . now ; Time-scale \u00b6 var timeScale = recorder . timeScale ; recorder . timeScale = 0.5 ;","title":"Recoder"},{"location":"tcrp-recoder/#introduction","text":"Recorder of T ime- C ommand- R ecorder- P layer, to store commands with time. Author: Rex Member of scene","title":"Introduction"},{"location":"tcrp-recoder/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"tcrp-recoder/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"tcrp-recoder/#import-class","text":"import rexTCRP from './plugins/tcrp.js' ;","title":"Import class"},{"location":"tcrp-recoder/#install-global-plugin","text":"Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"tcrp-recoder/#create-instance","text":"var recorder = scene . plugins . get ( 'rexTextTyping' ). addRecorder ( scene );","title":"Create instance"},{"location":"tcrp-recoder/#start-recording","text":"recorder . start (); // recorder.start(startAt); // start-at time in ms","title":"Start recording"},{"location":"tcrp-recoder/#push-commands","text":"recorder . addCommand ([ fnName , param0 , param1 , ...]); // recorder.addCommand([command0, command1, ...]); // recorder.addCommand([fnName, param0, param1, ...], offset); // time-offset in ms See also Run commands","title":"Push commands"},{"location":"tcrp-recoder/#get-commands","text":"var commands = recorder . getCommands (); // get a shallow copy of commands // var commands = recorder.getCommands(true); // get reference of commands Format of return commands: [ [ dt , [ command ]], [ dt , [ command0 , command1 ]], ... ]","title":"Get commands"},{"location":"tcrp-recoder/#pause-resume-stop-recording","text":"recorder . pause (); recorder . resume (); recorder . stop ();","title":"Pause, Resume, stop recording"},{"location":"tcrp-recoder/#seek-elapsed-time","text":"recorder . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"tcrp-recoder/#state-of-recorder","text":"var isRecording = recorder . isRecording ; var now = recorder . now ;","title":"State of recorder"},{"location":"tcrp-recoder/#time-scale","text":"var timeScale = recorder . timeScale ; recorder . timeScale = 0.5 ;","title":"Time-scale"},{"location":"text/","text":"Introduction \u00b6 Drawing text on canvas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add text object \u00b6 var txt = scene . add . text ( x , y , 'hello' ); // var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, align : 'left' , // 'left'|'center'|'right'|'justify' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , rtl : false , testString : '|M\u00c9qgy' , wordWrap : { width : null , callback : null , callbackScope : null , useAdvancedWrap : false }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . text ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , // 'left'|'center'|'right'|'justify' backgroundColor : '#ff00ff' }, add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , 'hello' ); Word wrap \u00b6 Wrap by width var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wordWrap : { width : 300 } } }); Wrap by callback var txt = scene . make . text ({ x : 400 , y : 300 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : 0.5 , style : { font : 'bold 30px Arial' , fill : 'white' , wordWrap : { callback : wordWrap , scope : this } } }); function wordWrap ( text , textObject ) { // First parameter will be the string that needs to be wrapped // Second parameter will be the Text game object that is being wrapped currently // This wrap just puts each word on a separate line, but you could inject your own // language-specific logic here. var words = text . split ( ' ' ); // You can return either an array of individual lines or a string with line breaks (e.g. \\n) in // the correct place. return words ; } Wrap width Get var width = txt . style . wordWrapWidth ; var useAdvancedWrap = txt . style . wordWrapUseAdvanced ; Set txt . setWordWrapWidth ( width ); // txt.setWordWrapWidth(width, useAdvancedWrap); Wrap callback Get var callback = txt . style . wordWrapCallback ; var scope = txt . style . wordWrapCallbackScope ; Set txt . setWordWrapCallback ( callback , scope ); Content \u00b6 Get var content = txt . text ; Set txt . setText ( 'world' ); // txt.text = 'world'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Set align \u00b6 txt . setAlign ( align ); align : 'left' , 'center' , 'right' , 'justify' Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Text"},{"location":"text/#introduction","text":"Drawing text on canvas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"text/#usage","text":"","title":"Usage"},{"location":"text/#add-text-object","text":"var txt = scene . add . text ( x , y , 'hello' ); // var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, align : 'left' , // 'left'|'center'|'right'|'justify' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , rtl : false , testString : '|M\u00c9qgy' , wordWrap : { width : null , callback : null , callbackScope : null , useAdvancedWrap : false }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . text ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , // 'left'|'center'|'right'|'justify' backgroundColor : '#ff00ff' }, add : true });","title":"Add text object"},{"location":"text/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , 'hello' );","title":"Custom class"},{"location":"text/#word-wrap","text":"Wrap by width var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wordWrap : { width : 300 } } }); Wrap by callback var txt = scene . make . text ({ x : 400 , y : 300 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : 0.5 , style : { font : 'bold 30px Arial' , fill : 'white' , wordWrap : { callback : wordWrap , scope : this } } }); function wordWrap ( text , textObject ) { // First parameter will be the string that needs to be wrapped // Second parameter will be the Text game object that is being wrapped currently // This wrap just puts each word on a separate line, but you could inject your own // language-specific logic here. var words = text . split ( ' ' ); // You can return either an array of individual lines or a string with line breaks (e.g. \\n) in // the correct place. return words ; } Wrap width Get var width = txt . style . wordWrapWidth ; var useAdvancedWrap = txt . style . wordWrapUseAdvanced ; Set txt . setWordWrapWidth ( width ); // txt.setWordWrapWidth(width, useAdvancedWrap); Wrap callback Get var callback = txt . style . wordWrapCallback ; var scope = txt . style . wordWrapCallbackScope ; Set txt . setWordWrapCallback ( callback , scope );","title":"Word wrap"},{"location":"text/#content","text":"Get var content = txt . text ; Set txt . setText ( 'world' ); // txt.text = 'world';","title":"Content"},{"location":"text/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"text/#set-align","text":"txt . setAlign ( align ); align : 'left' , 'center' , 'right' , 'justify'","title":"Set align"},{"location":"text/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"text/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"text/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"text/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"text/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"textedit/","text":"Introduction \u00b6 Create an input text object above a text object to edit string content. Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextEdit from './plugins/textedit.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextEditPlugin from './plugins/textedit-plugin.js' ; var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexTextEdit' , plugin : TextEditPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Open text editor \u00b6 An easy way to open a text editor. var editor = scene . plugins . get ( 'rexTextEdit' ). edit ( textObject , config ); // var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose); textObject : Text object, bbcode text object , or tag text boject . config : config.type : text (default), or password number config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Store reference of text editor at textObject._editor . Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close() Create instance \u00b6 var txt = scene . add . text ( x , y , 'abc' , { fixedWidth : 200 , fixedHeight : 30 , }); var editor = scene . plugins . get ( 'rexTextEdit' ). add ( txt ); Open editor \u00b6 editor . open ( config ); // editor.open(config, onClose); config config.type : text (default), or password config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Is opened \u00b6 var isOpened = editor . isOpened ; Close editor \u00b6 editor . close (); Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Edit"},{"location":"textedit/#introduction","text":"Create an input text object above a text object to edit string content. Author: Rex Behavior of text object","title":"Introduction"},{"location":"textedit/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"textedit/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"textedit/#import-class","text":"import rexTextEdit from './plugins/textedit.js' ;","title":"Import class"},{"location":"textedit/#install-global-plugin","text":"Install plugin in configuration of game import TextEditPlugin from './plugins/textedit-plugin.js' ; var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexTextEdit' , plugin : TextEditPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install global plugin"},{"location":"textedit/#open-text-editor","text":"An easy way to open a text editor. var editor = scene . plugins . get ( 'rexTextEdit' ). edit ( textObject , config ); // var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose); textObject : Text object, bbcode text object , or tag text boject . config : config.type : text (default), or password number config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Store reference of text editor at textObject._editor . Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Open text editor"},{"location":"textedit/#create-instance","text":"var txt = scene . add . text ( x , y , 'abc' , { fixedWidth : 200 , fixedHeight : 30 , }); var editor = scene . plugins . get ( 'rexTextEdit' ). add ( txt );","title":"Create instance"},{"location":"textedit/#open-editor","text":"editor . open ( config ); // editor.open(config, onClose); config config.type : text (default), or password config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened.","title":"Open editor"},{"location":"textedit/#is-opened","text":"var isOpened = editor . isOpened ;","title":"Is opened"},{"location":"textedit/#close-editor","text":"editor . close (); Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Close editor"},{"location":"textpage/","text":"Introduction \u00b6 Display text page by page on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextPage from './plugins/textpage.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextPagePlugin from './plugins/textpage-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextPage' , plugin : TextPagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var txt = scene . add . text ( x , y , '' , { wordWrap : { width : 500 }, maxLines : 7 }); var page = scene . plugins . get ( 'rexTextPage' ). add ( txt , { //text: '', // content in string or array }); text : content in string or array, optional Set content \u00b6 Set text page . setText ( text ); // content in string or array Append text page . appendText ( text ); // content in string or array Show page \u00b6 Display current page page . showPage (); Display next page page . showNextPage (); Display previous page page . showPreviousPage (); Note Initial page index is -1 , so user could call page.showNextPage() to display first page. Get lines of page \u00b6 Get lines of current page var lines = page . getPage (); Get lines of next page var lines = page . getNextPage (); Get lines of previous page var lines = page . getPreviousPage (); Other properties \u00b6 Is last page var isLastPage = page . isLastPage ; Is first page var isLastPage = page . isFirstPage ; Current page index var pageIndex = page . pageIndex ; Number of pages var pageIndex = page . pageCount ;","title":"Page"},{"location":"textpage/#introduction","text":"Display text page by page on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object","title":"Introduction"},{"location":"textpage/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"textpage/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"textpage/#import-class","text":"import rexTextPage from './plugins/textpage.js' ;","title":"Import class"},{"location":"textpage/#install-global-plugin","text":"Install plugin in configuration of game import TextPagePlugin from './plugins/textpage-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextPage' , plugin : TextPagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"textpage/#create-instance","text":"var txt = scene . add . text ( x , y , '' , { wordWrap : { width : 500 }, maxLines : 7 }); var page = scene . plugins . get ( 'rexTextPage' ). add ( txt , { //text: '', // content in string or array }); text : content in string or array, optional","title":"Create instance"},{"location":"textpage/#set-content","text":"Set text page . setText ( text ); // content in string or array Append text page . appendText ( text ); // content in string or array","title":"Set content"},{"location":"textpage/#show-page","text":"Display current page page . showPage (); Display next page page . showNextPage (); Display previous page page . showPreviousPage (); Note Initial page index is -1 , so user could call page.showNextPage() to display first page.","title":"Show page"},{"location":"textpage/#get-lines-of-page","text":"Get lines of current page var lines = page . getPage (); Get lines of next page var lines = page . getNextPage (); Get lines of previous page var lines = page . getPreviousPage ();","title":"Get lines of page"},{"location":"textpage/#other-properties","text":"Is last page var isLastPage = page . isLastPage ; Is first page var isLastPage = page . isFirstPage ; Current page index var pageIndex = page . pageIndex ; Number of pages var pageIndex = page . pageCount ;","title":"Other properties"},{"location":"texttyping/","text":"Introduction \u00b6 Typing text on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextTyping from './plugins/texttyping.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextTypingPlugin from './plugins/texttyping-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextTyping' , plugin : TextTypingPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var typing = scene . plugins . get ( 'rexTextTyping' ). add ( txt , { //speed: 333, // typing speed in ms //typeMode: 0, //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle' //setTextCallback: function(text, isLastChar, insertIdx){ return text; } // callback before set-text //setTextCallbackScope: null }); Configuration speed : Typing speed in ms. typeMode : 'left-to-right' , or 0 : Typing characters from left to right. 'right-to-left' , or 1 : Typing characters from right to left. 'middle-to-sides' , or 2 : Typing characters from middle to sides. 'sides-to-middle' , or 3 : Typing characters from sides to middle. setTextCallback : Callback befor set-text, to decorate display text. function ( text , isLastChar , insertIdx ) { return text ; } setTextCallbackScope : Scope of setTextCallback function. Start typing \u00b6 typing . start ( 'ABCDEFG' ); // typing.start('ABCDEFG', 333); // speed in ms Typing more text \u00b6 typing . appendText ( text ); Stop typing \u00b6 typing . stop (); // typing.stop(true);; // stop and show all text Pause/Resume typing \u00b6 Pause typing typing . pause (); Resume typing typing . resume (); Set typing speed \u00b6 typing . setTypeSpeed ( speed ); // speed in ms Set speed in typing event or setTextCallback to change typing speed of remaining text. Set typing mode \u00b6 typing . setTypeMode ( mode ); typeMode : 'left-to-right' , or 0 : typing characters from left to right. 'right-to-left' , or 1 : typing characters from right to left. 'middle-to-sides' , or 2 : typing characters from middle to sides, optional. 'sides-to-middle' , or 3 : typing characters from sides to middle. Events \u00b6 On typing : typing . on ( 'type' , function (){}); On typing completed : typing . on ( 'complete' , function ( typing , txt ){}); Status \u00b6 Is typing var isTyping = typing . isTyping ;","title":"Typing"},{"location":"texttyping/#introduction","text":"Typing text on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object","title":"Introduction"},{"location":"texttyping/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"texttyping/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"texttyping/#import-class","text":"import rexTextTyping from './plugins/texttyping.js' ;","title":"Import class"},{"location":"texttyping/#install-global-plugin","text":"Install plugin in configuration of game import TextTypingPlugin from './plugins/texttyping-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextTyping' , plugin : TextTypingPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"texttyping/#create-instance","text":"var typing = scene . plugins . get ( 'rexTextTyping' ). add ( txt , { //speed: 333, // typing speed in ms //typeMode: 0, //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle' //setTextCallback: function(text, isLastChar, insertIdx){ return text; } // callback before set-text //setTextCallbackScope: null }); Configuration speed : Typing speed in ms. typeMode : 'left-to-right' , or 0 : Typing characters from left to right. 'right-to-left' , or 1 : Typing characters from right to left. 'middle-to-sides' , or 2 : Typing characters from middle to sides. 'sides-to-middle' , or 3 : Typing characters from sides to middle. setTextCallback : Callback befor set-text, to decorate display text. function ( text , isLastChar , insertIdx ) { return text ; } setTextCallbackScope : Scope of setTextCallback function.","title":"Create instance"},{"location":"texttyping/#start-typing","text":"typing . start ( 'ABCDEFG' ); // typing.start('ABCDEFG', 333); // speed in ms","title":"Start typing"},{"location":"texttyping/#typing-more-text","text":"typing . appendText ( text );","title":"Typing more text"},{"location":"texttyping/#stop-typing","text":"typing . stop (); // typing.stop(true);; // stop and show all text","title":"Stop typing"},{"location":"texttyping/#pauseresume-typing","text":"Pause typing typing . pause (); Resume typing typing . resume ();","title":"Pause/Resume typing"},{"location":"texttyping/#set-typing-speed","text":"typing . setTypeSpeed ( speed ); // speed in ms Set speed in typing event or setTextCallback to change typing speed of remaining text.","title":"Set typing speed"},{"location":"texttyping/#set-typing-mode","text":"typing . setTypeMode ( mode ); typeMode : 'left-to-right' , or 0 : typing characters from left to right. 'right-to-left' , or 1 : typing characters from right to left. 'middle-to-sides' , or 2 : typing characters from middle to sides, optional. 'sides-to-middle' , or 3 : typing characters from sides to middle.","title":"Set typing mode"},{"location":"texttyping/#events","text":"On typing : typing . on ( 'type' , function (){}); On typing completed : typing . on ( 'complete' , function ( typing , txt ){});","title":"Events"},{"location":"texttyping/#status","text":"Is typing var isTyping = typing . isTyping ;","title":"Status"},{"location":"texture/","text":"Introduction \u00b6 Textures cache, built-in object of phaser. Author: Richard Davey Usage \u00b6 Image texture \u00b6 Load image texture scene . load . image ( key , url ); Reference: Loader Get image texture var texture = scene . textures . get ( key ); var image = texture . getSourceImage (); // var width = image.width; // var height = image.height; Get pixel \u00b6 var color = scene . textures . getPixel ( x , y , key ); // var color = scene.textures.getPixel(x, y, key, frame); Properties of color r : 0 ~ 255 g : 0 ~ 255 b : 0 ~ 255 a : 0 ~ 255 color : color integer var alpha = scene . textures . getPixelAlpha ( x , y , key ); // var alpha = scene.textures.getPixelAlpha(x, y, key, frame); alpha : 0 ~ 255 Return null if the coordinates were out of bounds. Generate texture from array \u00b6 var config = { data : data , // 3x3: // [ '...', // '...', // '...' ] pixelWidth : 1 , // pixel width of each data pixelHeight : 1 , // pixel height of each data preRender : null , // callback, function(canvas, ctx) {} postRender : null , // callback, function(canvas, ctx) {} canvas : null , // create a canvas if null resizeCanvas : true , clearCanvas : true }; var texture = scene . textures . generate ( key , config ); Has key \u00b6 var hasKey = scene . textures . exists ( key ); Remove texture \u00b6 Remove texture stored in texture cache. scene . textures . remove ( key ); Get base64 \u00b6 var s = scene . textures . getBase64 ( key ); // type= 'image/png', encoderOptions= 0.92 // var s = scene.textures.getBase64(key, frame, type, encoderOptions); Texture \u00b6 Get texture \u00b6 var texture = scene . textures . get ( key ); Has frame \u00b6 var hasFrame = texture . has ( frameName ); Add frame \u00b6 var frame = texture . add ( frameName , sourceIndex , x , y , width , height ); key : Texture key. frameName : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x , y : The x/y coordinate of the top-left of this Frame. width , height : The width/height of this Frame. Remove frame \u00b6 var removed = texture . remove ( frameName ); Frame object \u00b6 Get frame \u00b6 var frame = scene . textures . getFrame ( key , frame ); Properties \u00b6 frame.source.image : Image of texture source. frame.cutX : X position within the source image to cut from. frame.cutY : Y position within the source image to cut from. frame.cutWidth : The width of the area in the source image to cut. frame.cutHeight : The height of the area in the source image to cut.","title":"Texture"},{"location":"texture/#introduction","text":"Textures cache, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"texture/#usage","text":"","title":"Usage"},{"location":"texture/#image-texture","text":"Load image texture scene . load . image ( key , url ); Reference: Loader Get image texture var texture = scene . textures . get ( key ); var image = texture . getSourceImage (); // var width = image.width; // var height = image.height;","title":"Image texture"},{"location":"texture/#get-pixel","text":"var color = scene . textures . getPixel ( x , y , key ); // var color = scene.textures.getPixel(x, y, key, frame); Properties of color r : 0 ~ 255 g : 0 ~ 255 b : 0 ~ 255 a : 0 ~ 255 color : color integer var alpha = scene . textures . getPixelAlpha ( x , y , key ); // var alpha = scene.textures.getPixelAlpha(x, y, key, frame); alpha : 0 ~ 255 Return null if the coordinates were out of bounds.","title":"Get pixel"},{"location":"texture/#generate-texture-from-array","text":"var config = { data : data , // 3x3: // [ '...', // '...', // '...' ] pixelWidth : 1 , // pixel width of each data pixelHeight : 1 , // pixel height of each data preRender : null , // callback, function(canvas, ctx) {} postRender : null , // callback, function(canvas, ctx) {} canvas : null , // create a canvas if null resizeCanvas : true , clearCanvas : true }; var texture = scene . textures . generate ( key , config );","title":"Generate texture from array"},{"location":"texture/#has-key","text":"var hasKey = scene . textures . exists ( key );","title":"Has key"},{"location":"texture/#remove-texture","text":"Remove texture stored in texture cache. scene . textures . remove ( key );","title":"Remove texture"},{"location":"texture/#get-base64","text":"var s = scene . textures . getBase64 ( key ); // type= 'image/png', encoderOptions= 0.92 // var s = scene.textures.getBase64(key, frame, type, encoderOptions);","title":"Get base64"},{"location":"texture/#texture","text":"","title":"Texture"},{"location":"texture/#get-texture","text":"var texture = scene . textures . get ( key );","title":"Get texture"},{"location":"texture/#has-frame","text":"var hasFrame = texture . has ( frameName );","title":"Has frame"},{"location":"texture/#add-frame","text":"var frame = texture . add ( frameName , sourceIndex , x , y , width , height ); key : Texture key. frameName : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x , y : The x/y coordinate of the top-left of this Frame. width , height : The width/height of this Frame.","title":"Add frame"},{"location":"texture/#remove-frame","text":"var removed = texture . remove ( frameName );","title":"Remove frame"},{"location":"texture/#frame-object","text":"","title":"Frame object"},{"location":"texture/#get-frame","text":"var frame = scene . textures . getFrame ( key , frame );","title":"Get frame"},{"location":"texture/#properties","text":"frame.source.image : Image of texture source. frame.cutX : X position within the source image to cut from. frame.cutY : Y position within the source image to cut from. frame.cutWidth : The width of the area in the source image to cut. frame.cutHeight : The height of the area in the source image to cut.","title":"Properties"},{"location":"tilemap/","text":"Introduction \u00b6 Display of tiles map, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load tile map \u00b6 scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Add tile map object \u00b6 Create tile map Create map from tiled var map = scene . add . tilemap ( key ); // var map = this.make.tilemap({ key: 'map' }); Create map from 2d array var config = { data : tileIdxArray , // [ [], [], ... ] tileWidth : 32 , tileHeight : 32 , width : 10 , height : 10 } var map = this . make . tilemap ( config ); Create map from csv var config = { key : 'map' , // csv file tileWidth : 32 , tileHeight : 32 } var map = this . make . tilemap ( config ); Add tile set image var tileset = map . addTilesetImage ( tilesetName , key ); // key: texture key // var tileset = map.addTilesetImage(tilesetName); // key = tilesetName // var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid); Create layer object to render tile image, a tile map object could have many layers. Layer object is a kind of game object. Static var layer = map . createStaticLayer ( layerID , tileset ); // var layer = map.createStaticLayer(layerID, tileset, x, y); // x, y : offset in pxiels Dynamic var layer = map . createDynamicLayer ( layerID , tileset ); // var layer = map.createDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Blank dynamic var layer = map . createBlankDynamicLayer ( layerID , tileset ); // var layer = map.createBlankDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Create sprite objects with tile ID (optional) var sprites = map . createFromObjects ( name , id , spriteConfig ); // var sprites = map.createFromObjects(name, id, spriteConfig, scene); name: name of the object layer id: gid (number), or id (number), or name (string) spriteConfig: The config object to pass into the Sprite creator (i.e. scene.make.sprite ). Extend spriteConfig with properties of object ( type , x , y , rotation , visible , width , height , ... etc) Map \u00b6 Select current layer \u00b6 map . setLayer ( layer ); // layer name, layer index // map.layer = layer; Set tile size \u00b6 map . setBaseTileSize ( tileWidth , tileHeight ); Draw on graphics \u00b6 var styleConfig = { tileColor : new Phaser . Display . Color ( 105 , 210 , 231 , 150 ), // null collidingTileColor : new Phaser . Display . Color ( 243 , 134 , 48 , 200 ), // null faceColor : new Phaser . Display . Color ( 40 , 39 , 37 , 150 ) // null } map . renderDebug ( graphics , styleConfig ); // map.renderDebug(graphics, styleConfig, layer); Layer \u00b6 Render order \u00b6 layer . setRenderOrder ( renderOrder ); renderOrder 0 , or 'right-down' 1 , or 'left-down' 2 , or 'right-up' 3 , or 'left-up' Tile \u00b6 Get tile \u00b6 var tile = map . getTileAt ( tileX , tileY ); // var tile = map.getTileAt(tileX, tileY, true); // return a Tile object with an index of -1 for empty tile Get tiles within \u00b6 var tiles = map . getTilesWithin ( tileX , tileY , width , height ); var filteringOptions = { // isNotEmpty: false, // isColliding: false, // hasInterestingFace: false }; var tiles = map . getTilesWithin ( tileX , tileY , width , height , filteringOptions ); Get tiles within world XY \u00b6 var tiles = map . getTilesWithinWorldXY ( worldX , worldY , width , height ); // var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height, filteringOptions, camera, layer); Get tiles within shape \u00b6 vat tiles = map . getTilesWithinShape ( shape ); // vat tiles = map.getTilesWithinShape(shape, filteringOptions, camera, layer); Shape: new Phaser.Geom.Rectangle(x0, y0, width, height) new Phaser.Geom.Line(x0, y0, x1, y1) new Phaser.Geom.Circle(x, y, radius) new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2) For each tile in layer \u00b6 var callback = function ( tile ) { /* ... */ }; map . forEachTile ( callback , context ); // map.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); var callback = function ( tile ) { /* ... */ }; layer . forEachTile ( callback , context ); // layer.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); Tiled index \u00b6 var index = tile . index ; tile . index = index ; Properties \u00b6 var properties = tile . properties ; // object or null var value = properties [ key ]; tile . properties [ key ] = value ; Tile at world XY \u00b6 World XY at map var hasTile = map . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer); XY at layer var hasTile = layer . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = layer.hasTileAtWorldXY(worldX, worldY, camera); Collision \u00b6 Enable collision \u00b6 map . setCollision ( index ); // index: tile index // map.setCollision(index, true, recalculateFaces, updateLayer); map . setCollision ( indexes ); // indexes: an array of tile index // map.setCollision(indexes, true, recalculateFaces, updateLayer); map . setCollisionBetween ( start , stop ); // indexes from `start` to `stop` map . setCollisionByExclusion ( indexes ); // indexes: an array of tile index map . setCollisionByProperty ({ key : value }); // enable collision if value of tile property 'key' is equal to 'value' map . setCollisionFromCollisionGroup (); // set by collision group data in tileset collision editor Collision editor Disable collision \u00b6 map . setCollision ( index , false ); map . setCollision ( indexes , false ); map . setCollisionBetween ( start , stop , false ); map . setCollisionByProperty ({ key : value }, false ); map . setCollisionFromCollisionGroup ( false ); Tile set \u00b6 Get collision group \u00b6 var collisionGroup = tileset . getTileCollisionGroup ( tile . index ); // array of collision shapes, or null Types of collision shape ( collisionGroup.objects ) object.rectangle (object.x, object.y, object.width, object.height) object.ellipse (object.x, object.y, object.width, object.height) object.polygon (object.x, object.y, [{x,y}, {x,y}, ...]) object.polyline (object.x, object.y, [{x,y}, {x,y}, ...]) Change texture of tileset \u00b6 var texture = scene . sys . textures . get ( key ); tileset . setImage ( texture ); Dynamic layer \u00b6 Fill tiles \u00b6 map . fill ( index ); // map.fill(index, tileX, tileY, width, height); layer . fill ( index ); // layer.fill(index, tileX, tileY, width, height); Randomize \u00b6 map . randomize ( tileX , tileY , width , height , indexes ); // indexes: array of tile index layer . randomize ( tileX , tileY , width , height , indexes ); var weightedIndexes = [ { index : 0 , weight : 4 }, { index : [ 0 , 1 ], weight : 4 } ] map . weightedRandomize ( tileX , tileY , width , height , weightedIndexes ); // weightedIndexes: [{index, weight}, ...] Copy tiles \u00b6 map . copy ( srcTileX , srcTileY , width , height , destTileX , destTileY ); // indexes: array of tile index Put tile at \u00b6 map . putTileAt ( tile , tileX , tileY ); // tile: Tile object or tile index map . putTilesAt ( tilesArray , tileX , tileY ); // tilesArray: 1d/2d array of Tile object or tile index Replace tiles \u00b6 map . replaceByIndex ( findIndex , newIndex ); // map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer); Swap tiles \u00b6 map . replaceByIndex ( indexA , indexB ); // map.replaceByIndex(indexA, indexB, tileX, tileY, width, height, layer); Shuffle tiles \u00b6 map . shuffle (); // map.shuffle(tileX, tileY, width, height, layer); Convert to static layer \u00b6 staticLayer = map . convertLayerToStatic ( dynamicLayer ); dynamicLayer will be destroyed.","title":"Tile map"},{"location":"tilemap/#introduction","text":"Display of tiles map, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tilemap/#usage","text":"","title":"Usage"},{"location":"tilemap/#load-tile-map","text":"scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV","title":"Load tile map"},{"location":"tilemap/#add-tile-map-object","text":"Create tile map Create map from tiled var map = scene . add . tilemap ( key ); // var map = this.make.tilemap({ key: 'map' }); Create map from 2d array var config = { data : tileIdxArray , // [ [], [], ... ] tileWidth : 32 , tileHeight : 32 , width : 10 , height : 10 } var map = this . make . tilemap ( config ); Create map from csv var config = { key : 'map' , // csv file tileWidth : 32 , tileHeight : 32 } var map = this . make . tilemap ( config ); Add tile set image var tileset = map . addTilesetImage ( tilesetName , key ); // key: texture key // var tileset = map.addTilesetImage(tilesetName); // key = tilesetName // var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid); Create layer object to render tile image, a tile map object could have many layers. Layer object is a kind of game object. Static var layer = map . createStaticLayer ( layerID , tileset ); // var layer = map.createStaticLayer(layerID, tileset, x, y); // x, y : offset in pxiels Dynamic var layer = map . createDynamicLayer ( layerID , tileset ); // var layer = map.createDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Blank dynamic var layer = map . createBlankDynamicLayer ( layerID , tileset ); // var layer = map.createBlankDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Create sprite objects with tile ID (optional) var sprites = map . createFromObjects ( name , id , spriteConfig ); // var sprites = map.createFromObjects(name, id, spriteConfig, scene); name: name of the object layer id: gid (number), or id (number), or name (string) spriteConfig: The config object to pass into the Sprite creator (i.e. scene.make.sprite ). Extend spriteConfig with properties of object ( type , x , y , rotation , visible , width , height , ... etc)","title":"Add tile map object"},{"location":"tilemap/#map","text":"","title":"Map"},{"location":"tilemap/#select-current-layer","text":"map . setLayer ( layer ); // layer name, layer index // map.layer = layer;","title":"Select current layer"},{"location":"tilemap/#set-tile-size","text":"map . setBaseTileSize ( tileWidth , tileHeight );","title":"Set tile size"},{"location":"tilemap/#draw-on-graphics","text":"var styleConfig = { tileColor : new Phaser . Display . Color ( 105 , 210 , 231 , 150 ), // null collidingTileColor : new Phaser . Display . Color ( 243 , 134 , 48 , 200 ), // null faceColor : new Phaser . Display . Color ( 40 , 39 , 37 , 150 ) // null } map . renderDebug ( graphics , styleConfig ); // map.renderDebug(graphics, styleConfig, layer);","title":"Draw on graphics"},{"location":"tilemap/#layer","text":"","title":"Layer"},{"location":"tilemap/#render-order","text":"layer . setRenderOrder ( renderOrder ); renderOrder 0 , or 'right-down' 1 , or 'left-down' 2 , or 'right-up' 3 , or 'left-up'","title":"Render order"},{"location":"tilemap/#tile","text":"","title":"Tile"},{"location":"tilemap/#get-tile","text":"var tile = map . getTileAt ( tileX , tileY ); // var tile = map.getTileAt(tileX, tileY, true); // return a Tile object with an index of -1 for empty tile","title":"Get tile"},{"location":"tilemap/#get-tiles-within","text":"var tiles = map . getTilesWithin ( tileX , tileY , width , height ); var filteringOptions = { // isNotEmpty: false, // isColliding: false, // hasInterestingFace: false }; var tiles = map . getTilesWithin ( tileX , tileY , width , height , filteringOptions );","title":"Get tiles within"},{"location":"tilemap/#get-tiles-within-world-xy","text":"var tiles = map . getTilesWithinWorldXY ( worldX , worldY , width , height ); // var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height, filteringOptions, camera, layer);","title":"Get tiles within world XY"},{"location":"tilemap/#get-tiles-within-shape","text":"vat tiles = map . getTilesWithinShape ( shape ); // vat tiles = map.getTilesWithinShape(shape, filteringOptions, camera, layer); Shape: new Phaser.Geom.Rectangle(x0, y0, width, height) new Phaser.Geom.Line(x0, y0, x1, y1) new Phaser.Geom.Circle(x, y, radius) new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2)","title":"Get tiles within shape"},{"location":"tilemap/#for-each-tile-in-layer","text":"var callback = function ( tile ) { /* ... */ }; map . forEachTile ( callback , context ); // map.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); var callback = function ( tile ) { /* ... */ }; layer . forEachTile ( callback , context ); // layer.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions);","title":"For each tile in layer"},{"location":"tilemap/#tiled-index","text":"var index = tile . index ; tile . index = index ;","title":"Tiled index"},{"location":"tilemap/#properties","text":"var properties = tile . properties ; // object or null var value = properties [ key ]; tile . properties [ key ] = value ;","title":"Properties"},{"location":"tilemap/#tile-at-world-xy","text":"World XY at map var hasTile = map . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer); XY at layer var hasTile = layer . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = layer.hasTileAtWorldXY(worldX, worldY, camera);","title":"Tile at world XY"},{"location":"tilemap/#collision","text":"","title":"Collision"},{"location":"tilemap/#enable-collision","text":"map . setCollision ( index ); // index: tile index // map.setCollision(index, true, recalculateFaces, updateLayer); map . setCollision ( indexes ); // indexes: an array of tile index // map.setCollision(indexes, true, recalculateFaces, updateLayer); map . setCollisionBetween ( start , stop ); // indexes from `start` to `stop` map . setCollisionByExclusion ( indexes ); // indexes: an array of tile index map . setCollisionByProperty ({ key : value }); // enable collision if value of tile property 'key' is equal to 'value' map . setCollisionFromCollisionGroup (); // set by collision group data in tileset collision editor Collision editor","title":"Enable collision"},{"location":"tilemap/#disable-collision","text":"map . setCollision ( index , false ); map . setCollision ( indexes , false ); map . setCollisionBetween ( start , stop , false ); map . setCollisionByProperty ({ key : value }, false ); map . setCollisionFromCollisionGroup ( false );","title":"Disable collision"},{"location":"tilemap/#tile-set","text":"","title":"Tile set"},{"location":"tilemap/#get-collision-group","text":"var collisionGroup = tileset . getTileCollisionGroup ( tile . index ); // array of collision shapes, or null Types of collision shape ( collisionGroup.objects ) object.rectangle (object.x, object.y, object.width, object.height) object.ellipse (object.x, object.y, object.width, object.height) object.polygon (object.x, object.y, [{x,y}, {x,y}, ...]) object.polyline (object.x, object.y, [{x,y}, {x,y}, ...])","title":"Get collision group"},{"location":"tilemap/#change-texture-of-tileset","text":"var texture = scene . sys . textures . get ( key ); tileset . setImage ( texture );","title":"Change texture of tileset"},{"location":"tilemap/#dynamic-layer","text":"","title":"Dynamic layer"},{"location":"tilemap/#fill-tiles","text":"map . fill ( index ); // map.fill(index, tileX, tileY, width, height); layer . fill ( index ); // layer.fill(index, tileX, tileY, width, height);","title":"Fill tiles"},{"location":"tilemap/#randomize","text":"map . randomize ( tileX , tileY , width , height , indexes ); // indexes: array of tile index layer . randomize ( tileX , tileY , width , height , indexes ); var weightedIndexes = [ { index : 0 , weight : 4 }, { index : [ 0 , 1 ], weight : 4 } ] map . weightedRandomize ( tileX , tileY , width , height , weightedIndexes ); // weightedIndexes: [{index, weight}, ...]","title":"Randomize"},{"location":"tilemap/#copy-tiles","text":"map . copy ( srcTileX , srcTileY , width , height , destTileX , destTileY ); // indexes: array of tile index","title":"Copy tiles"},{"location":"tilemap/#put-tile-at","text":"map . putTileAt ( tile , tileX , tileY ); // tile: Tile object or tile index map . putTilesAt ( tilesArray , tileX , tileY ); // tilesArray: 1d/2d array of Tile object or tile index","title":"Put tile at"},{"location":"tilemap/#replace-tiles","text":"map . replaceByIndex ( findIndex , newIndex ); // map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer);","title":"Replace tiles"},{"location":"tilemap/#swap-tiles","text":"map . replaceByIndex ( indexA , indexB ); // map.replaceByIndex(indexA, indexB, tileX, tileY, width, height, layer);","title":"Swap tiles"},{"location":"tilemap/#shuffle-tiles","text":"map . shuffle (); // map.shuffle(tileX, tileY, width, height, layer);","title":"Shuffle tiles"},{"location":"tilemap/#convert-to-static-layer","text":"staticLayer = map . convertLayerToStatic ( dynamicLayer ); dynamicLayer will be destroyed.","title":"Convert to static layer"},{"location":"tilesprite/","text":"Introduction \u00b6 Display of repeating texture, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add tile sprite object \u00b6 var image = scene . add . tileSprite ( x , y , width , height , textureKey ); Add tile sprite from JSON var image = scene . make . tileSprite ({ x : 0 , y : 0 , width : 512 , height : 512 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Custom class \u00b6 Define class class MyTileSprite extends Phaser . GameObjects . TileSprite { constructor ( scene , x , y , width , height , texture , frame ) { super ( scene , x , y , width , height , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyTileSprite ( scene , x , y , key ); Properties of tiles \u00b6 Position image . setTilePosition ( x , y ); or image . tilePositionX = x ; image . tilePositionY = y ; Scale image . setTileScale ( scaleX , scaleY ); or image . tileScaleX = scaleX ; image . tileScaleY = scaleY ; Other properties \u00b6 See game object Create mask \u00b6 var mask = image . createBitmapMask (); See mask","title":"Tile sprite"},{"location":"tilesprite/#introduction","text":"Display of repeating texture, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tilesprite/#usage","text":"","title":"Usage"},{"location":"tilesprite/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"tilesprite/#add-tile-sprite-object","text":"var image = scene . add . tileSprite ( x , y , width , height , textureKey ); Add tile sprite from JSON var image = scene . make . tileSprite ({ x : 0 , y : 0 , width : 512 , height : 512 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true });","title":"Add tile sprite object"},{"location":"tilesprite/#custom-class","text":"Define class class MyTileSprite extends Phaser . GameObjects . TileSprite { constructor ( scene , x , y , width , height , texture , frame ) { super ( scene , x , y , width , height , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyTileSprite ( scene , x , y , key );","title":"Custom class"},{"location":"tilesprite/#properties-of-tiles","text":"Position image . setTilePosition ( x , y ); or image . tilePositionX = x ; image . tilePositionY = y ; Scale image . setTileScale ( scaleX , scaleY ); or image . tileScaleX = scaleX ; image . tileScaleY = scaleY ;","title":"Properties of tiles"},{"location":"tilesprite/#other-properties","text":"See game object","title":"Other properties"},{"location":"tilesprite/#create-mask","text":"var mask = image . createBitmapMask (); See mask","title":"Create mask"},{"location":"timeline/","text":"Introduction \u00b6 Update timers, built-in object of phaser. Each scene has a timeline ( scene.time ) already. Author: Richard Davey Usage \u00b6 Time-scale \u00b6 Get time-scale var timeScale = scene . time . timeScale ; Set time-scale scene . time . timeScale = 2 ; Pause or resume \u00b6 Pause scene . time . paused = true ; Resume scene . time . paused = false ; Get current game-time \u00b6 var time = scene . time . now ; Game-time is not system time. Create timeline object \u00b6 var timeline = new Phaser . Time . Clock ( scene );","title":"Timeline"},{"location":"timeline/#introduction","text":"Update timers, built-in object of phaser. Each scene has a timeline ( scene.time ) already. Author: Richard Davey","title":"Introduction"},{"location":"timeline/#usage","text":"","title":"Usage"},{"location":"timeline/#time-scale","text":"Get time-scale var timeScale = scene . time . timeScale ; Set time-scale scene . time . timeScale = 2 ;","title":"Time-scale"},{"location":"timeline/#pause-or-resume","text":"Pause scene . time . paused = true ; Resume scene . time . paused = false ;","title":"Pause or resume"},{"location":"timeline/#get-current-game-time","text":"var time = scene . time . now ; Game-time is not system time.","title":"Get current game-time"},{"location":"timeline/#create-timeline-object","text":"var timeline = new Phaser . Time . Clock ( scene );","title":"Create timeline object"},{"location":"timer/","text":"Introduction \u00b6 Execute callback when time-out, built-in object of phaser. Author: Richard Davey Usage \u00b6 Start timer \u00b6 Looped timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , loop : true }); Repeat timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , repeat : 4 }); Oneshot timer var timer = scene . time . delayedCall ( delay , callback , args , scope ); // delay in ms All properties of timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , args : [], callbackScope : thisArg , loop : fasle , repeat : 0 , startAt : 0 , timeScale : 1 , paused : false }); Status of timer \u00b6 Get elapsed time var elapsed = timer . getElapsed (); // ms var elapsed = timer . getElapsedSeconds (); // sec Get repeat count var repeat = timer . getRepeatCount (); Gets the progress of the current iteration var progress = timer . getProgress (); // elapsed / delay Gets the progress of the timer overall, factoring in repeats. var progress = timer . getOverallProgress (); // totalElapsed / totalDuration Get delay time var delay = timer . delay ; // ms Is paused var isPaused = timer . paused ; Get time-scale var timeScale = timer . timeScale ; Methods of timer \u00b6 Pause timer timer . paused = true ; Resume timer timer . paused = false ; Remove timer from timeline timer . remove (); Set time-scale timer . timeScale = 2 ;","title":"Timer"},{"location":"timer/#introduction","text":"Execute callback when time-out, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"timer/#usage","text":"","title":"Usage"},{"location":"timer/#start-timer","text":"Looped timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , loop : true }); Repeat timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , repeat : 4 }); Oneshot timer var timer = scene . time . delayedCall ( delay , callback , args , scope ); // delay in ms All properties of timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , args : [], callbackScope : thisArg , loop : fasle , repeat : 0 , startAt : 0 , timeScale : 1 , paused : false });","title":"Start timer"},{"location":"timer/#status-of-timer","text":"Get elapsed time var elapsed = timer . getElapsed (); // ms var elapsed = timer . getElapsedSeconds (); // sec Get repeat count var repeat = timer . getRepeatCount (); Gets the progress of the current iteration var progress = timer . getProgress (); // elapsed / delay Gets the progress of the timer overall, factoring in repeats. var progress = timer . getOverallProgress (); // totalElapsed / totalDuration Get delay time var delay = timer . delay ; // ms Is paused var isPaused = timer . paused ; Get time-scale var timeScale = timer . timeScale ;","title":"Status of timer"},{"location":"timer/#methods-of-timer","text":"Pause timer timer . paused = true ; Resume timer timer . paused = false ; Remove timer from timeline timer . remove (); Set time-scale timer . timeScale = 2 ;","title":"Methods of timer"},{"location":"tools/","text":"Texture altas \u00b6 Texture-packer Leshy SpriteSheet Tool Export to JSON-TP-Hash","title":"Tools"},{"location":"tools/#texture-altas","text":"Texture-packer Leshy SpriteSheet Tool Export to JSON-TP-Hash","title":"Texture altas"},{"location":"touchevents/","text":"Introduction \u00b6 Built-in touch/mouse events of phaser. Author: Richard Davey Usage \u00b6 Quick start \u00b6 Is touching var pointer = scene . input . activePointer ; if ( pointer . isDown ) { var touchX = pointer . x ; var touchY = pointer . y ; // ... } On any touching start scene . input . on ( 'pointerdown' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On any touching end scene . input . on ( 'pointerup' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On touch game object start gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); On touch game object end gameObject . setInteractive (). on ( 'pointerup' , function ( pointer , localX , localY , event ){ // ... }) Reference : Properties of point Register interactive \u00b6 Call gameObject.setInteractive(...) to register touch input of Game Object before listening touching events. Set hit area from width & height (rectangle) of the texture gameObject . setInteractive (); Set hit area from game object gameObject . setInteractive ( shape , callback ); Circle shape : new Phaser.Geom.Circle(x, y, radius) callback : Phaser.Geom.Circle.Contains Ellipse shape : new Phaser.Geom.Ellipse(x, y, width, height) callback : Phaser.Geom.Ellipse.Contains Rectangle shape : new Phaser.Geom.Rectangle(x, y, width, height) callback : Phaser.Geom.Rectangle.Contains Triangle shape : new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) callback : Phaser.Geom.Triangle.Contains Polygon shape : new Phaser.Geom.Polygon(points) callback : Phaser.Geom.Polygon.Contains Hexagon shape : new Phaser.Geom.rexHexagon(x, y, size, type) callback : Phaser.Geom.Polygon.Contains Rhombus shape : new Phaser.Geom.rexRhombus(x, y, width, height) callback : Phaser.Geom.Polygon.Contains Note: x , y relate to the top-left of the gameObject. Set hit area from input plugin scene . input . setHitArea ( gameObjects , shape , callback ); Circle scene . input . setHitAreaCircle ( gameObjects , x , y , radius ); // scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains Ellipse scene . input . setHitAreaEllipse ( gameObjects , x , y , width , height ); // scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains Rectangle scene . input . setHitAreaRectangle ( gameObjects , x , y , width , height ); // scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains Triangle scene . input . setHitAreaTriangle ( gameObjects , x1 , y1 , x2 , y2 , x3 , y3 ); // scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains Note: x , y relate to the top-left of the gameObject. Set interactive configuration gameObject . setInteractive ({ hitArea : shape , hitAreaCallback : callback , draggable : false , dropZone : false , useHandCursor : false , cursor : CSSString , pixelPerfect : false , alphaTolerance : 1 }); Hit area shape Pixel alpha pixelPerfect : true alphaTolerance : 1 (0-255) Custom hit-testing function hitAreaCallback function ( shape , x , y , gameObject ) { return hit ; // true/false } shape : Hit area object x , y : Local position of texture. gameObject : Game object. Dragging draggable : true Drop zone dropZone : true Cursor cursor : CSS string useHandCursor : true Pixel perfect hit-testing This is an expensive process, should only be enabled on Game Objects that really need it. Disable interactive \u00b6 Disable temporary gameObject . disableInteractive (); Remove interaction gameObject . removeInteractive (); Top only \u00b6 When set to true this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to false it will emit events from all Game Objects below a Pointer, not just the top one. Get var topOnly = scene . input . topOnly ; Set scene . input . topOnly = topOnly ; scene . input . setTopOnly ( topOnly ); Touch events \u00b6 Trigger these events from top scene to bottom scene. Events on touched Game object gameObject . on ( 'pointerdown' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerup' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointermove' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerover' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerout' , function ( pointer , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , localX , localY , event ) { event . stopPropagation (); } Event on input plugin for each touched Game object scene . input . on ( 'gameobjectdown' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectup' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectmove' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectover' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectout' , function ( pointer , gameObject , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , gameObject , event ) { event . stopPropagation (); } Events to get all touched Game Objects scene . input . on ( 'pointerdown' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerdownoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointerup' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerupoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointermove' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerover' , function ( pointer , justOver ){ /* ... */ }); scene . input . on ( 'pointerout' , function ( pointer , justOut ){ /* ... */ }); scene . input . on ( 'gameout' , function ( timeStamp , domEvent ){ /* ... */ }); scene . input . on ( 'gameover' , function ( timeStamp , domEvent ){ /* ... */ }); Dragging \u00b6 Enable dragging \u00b6 Enable dragging when registering interactive gameObject . setInteractive ({ draggable : true }); Enable dragging and add it to dragging detecting list after registered interactive scene . input . setDraggable ( gameObject ); Enable dragging gameObject . input . draggable = true ; Disable dragging \u00b6 Remove Game Object from dragging detecting list scene . input . setDraggable ( gameObject , false ); Disable dragging but keep it in dragging detecting list gameObject . input . draggable = false ; Dragging events \u00b6 gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /* ... */ }); scene . input . on ( 'dragstart' , function ( pointer , gameObject ){ /* ... */ }); scene . input . on ( 'drag' , function ( pointer , gameObject , dragX , dragY ){ /* ... */ }); scene . input . on ( 'dragend' , function ( pointer , gameObject , dropped ){ /* ... */ }); Dragging properties \u00b6 scene . input . dragDistanceThreshold = 16 ; scene . input . dragTimeThreshold = 500 ; Drop zone \u00b6 Enable drop zone \u00b6 Enable dropping when registering interactive gameObject . setInteractive ({ dropZone : true }); Enable dropping after registered interactive gameObject . input . dropZone = true ; Disable drop zone \u00b6 gameObject . input . dropZone = false ; Dropping events \u00b6 gameObject . on ( 'drop' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragenter' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragover' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragleave' , function ( pointer , target ){ /* ... */ }); scene . input . on ( 'drop' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragenter' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragover' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragleave' , function ( pointer , gameObject , target ){ /* ... */ }); Single touch \u00b6 Pointer \u00b6 var pointer = scene . input . activePointer ; Multi-touch \u00b6 Amount of active pointers \u00b6 Set amount of active pointers in game configuration var config = { // ... input : { activePointers : 1 , // ... } }; var game = new Phaser . Game ( config ); Or add pointers in run-time. scene . input . addPointer ( num ); // total points = num + 1 Pointers \u00b6 pointer 1 ~ 10 var pointer = scene . input . pointer1 ; // ... var pointer = scene . input . pointer10 ; pointer n var pointer = scene . input . manager . pointers [ n ]; Amount of total pointers var amount = scene . input . manager . pointersTotal ; 1 in desktop 2 in touch device. ( 0 for mouse, 1 for 1 touch pointer) Pointer \u00b6 Position Current touching Position in screen : pointer.x , pointer.y Position in camera : pointer.worldX , pointer.worldY Get world position in a camera var out = camera . getWorldPoint ( pointer . x , pointer . y ); // var out = camera.getWorldPoint(pointer.x, pointer.y, out); Position of previous moving : pointer.prevPosition.x , pointer.prevPosition.y Updating when pointer-down, potiner-move, or pointer-up. Interpolated position : var points = pointer . getInterpolatedPosition ( step ); // var out = pointer.getInterpolatedPosition(step, out); Drag Touching start : pointer.downX , pointer.downY Touching end : pointer.upX , pointer.upY Drag distance between pointer-down to latest pointer : pointer.getDistance() Horizontal drag distance : pointer.getDistanceX() Vertical drag distance : pointer.getDistanceY() Drag angle : pointer.getAngle() Time Touching start : pointer.downTime Touching end : pointer.upTime Drag : pointer.getDuration() Touch state Is touching/any button down : pointer.isDown Is primary button down : pointer.primaryDown Button state : pointer.button On Touch devices the value is always 0 . Button down No button down : pointer.noButtonDown() Is primary (left) button down : pointer.leftButtonDown() Is secondary (right) button down : pointer.rightButtonDown() Is middle (mouse wheel) button down : pointer.middleButtonDown() Is back button down : pointer.backButtonDown() Is forward button down : pointer.forwardButtonDown() Button released Is primary (left) button released : pointer.leftButtonReleased() Is secondary (right) button released : pointer.rightButtonReleased() Is middle (mouse wheel) button released : pointer.middleButtonReleased() Is back button released : pointer.backButtonReleased() Is forward button released : pointer.forwardButtonReleased() Index in scene.input.manager.pointers : pointer.id Motion Angle: pointer.angle Disatance: pointer.distance Velocity: pointer.velocity pointer.velocity.x , `pointer.velocity.y Input object \u00b6 gameObject.input : Game object's input object. gameObject.input.localX , gameObject.input.localY : Pointer to local position of texture. Always receive input events, even if it's invisible or won't render : gameObject . input . alwaysEnabled = true ; Smooth \u00b6 Get touch position from interpolation of previous touch position and current touch position. Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor)) Set smooth factor. In game configuration var config = { // .... input : { smoothFactor : 0 } } Get touch position var x = pointer . x ; var y = pointer . y ; var worldX = pointer . worldX ; var worldY = pointer . worldY ; Debug \u00b6 Enable, draw shape of hit area. scene . input . enableDebug ( gameObject ); // scene.input.enableDebug(gameObject, color); Disable scene . input . removeDebug ( gameObject ); Poll rate \u00b6 Poll when touches moved, or updated. Default behavior. scene . input . setPollOnMove (); Poll every tick. scene . input . setPollAlways (); Set poll rate. scene . input . setPollRate ( rate );","title":"Touch events"},{"location":"touchevents/#introduction","text":"Built-in touch/mouse events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"touchevents/#usage","text":"","title":"Usage"},{"location":"touchevents/#quick-start","text":"Is touching var pointer = scene . input . activePointer ; if ( pointer . isDown ) { var touchX = pointer . x ; var touchY = pointer . y ; // ... } On any touching start scene . input . on ( 'pointerdown' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On any touching end scene . input . on ( 'pointerup' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On touch game object start gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); On touch game object end gameObject . setInteractive (). on ( 'pointerup' , function ( pointer , localX , localY , event ){ // ... }) Reference : Properties of point","title":"Quick start"},{"location":"touchevents/#register-interactive","text":"Call gameObject.setInteractive(...) to register touch input of Game Object before listening touching events. Set hit area from width & height (rectangle) of the texture gameObject . setInteractive (); Set hit area from game object gameObject . setInteractive ( shape , callback ); Circle shape : new Phaser.Geom.Circle(x, y, radius) callback : Phaser.Geom.Circle.Contains Ellipse shape : new Phaser.Geom.Ellipse(x, y, width, height) callback : Phaser.Geom.Ellipse.Contains Rectangle shape : new Phaser.Geom.Rectangle(x, y, width, height) callback : Phaser.Geom.Rectangle.Contains Triangle shape : new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) callback : Phaser.Geom.Triangle.Contains Polygon shape : new Phaser.Geom.Polygon(points) callback : Phaser.Geom.Polygon.Contains Hexagon shape : new Phaser.Geom.rexHexagon(x, y, size, type) callback : Phaser.Geom.Polygon.Contains Rhombus shape : new Phaser.Geom.rexRhombus(x, y, width, height) callback : Phaser.Geom.Polygon.Contains Note: x , y relate to the top-left of the gameObject. Set hit area from input plugin scene . input . setHitArea ( gameObjects , shape , callback ); Circle scene . input . setHitAreaCircle ( gameObjects , x , y , radius ); // scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains Ellipse scene . input . setHitAreaEllipse ( gameObjects , x , y , width , height ); // scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains Rectangle scene . input . setHitAreaRectangle ( gameObjects , x , y , width , height ); // scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains Triangle scene . input . setHitAreaTriangle ( gameObjects , x1 , y1 , x2 , y2 , x3 , y3 ); // scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains Note: x , y relate to the top-left of the gameObject. Set interactive configuration gameObject . setInteractive ({ hitArea : shape , hitAreaCallback : callback , draggable : false , dropZone : false , useHandCursor : false , cursor : CSSString , pixelPerfect : false , alphaTolerance : 1 }); Hit area shape Pixel alpha pixelPerfect : true alphaTolerance : 1 (0-255) Custom hit-testing function hitAreaCallback function ( shape , x , y , gameObject ) { return hit ; // true/false } shape : Hit area object x , y : Local position of texture. gameObject : Game object. Dragging draggable : true Drop zone dropZone : true Cursor cursor : CSS string useHandCursor : true Pixel perfect hit-testing This is an expensive process, should only be enabled on Game Objects that really need it.","title":"Register interactive"},{"location":"touchevents/#disable-interactive","text":"Disable temporary gameObject . disableInteractive (); Remove interaction gameObject . removeInteractive ();","title":"Disable interactive"},{"location":"touchevents/#top-only","text":"When set to true this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to false it will emit events from all Game Objects below a Pointer, not just the top one. Get var topOnly = scene . input . topOnly ; Set scene . input . topOnly = topOnly ; scene . input . setTopOnly ( topOnly );","title":"Top only"},{"location":"touchevents/#touch-events","text":"Trigger these events from top scene to bottom scene. Events on touched Game object gameObject . on ( 'pointerdown' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerup' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointermove' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerover' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerout' , function ( pointer , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , localX , localY , event ) { event . stopPropagation (); } Event on input plugin for each touched Game object scene . input . on ( 'gameobjectdown' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectup' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectmove' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectover' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectout' , function ( pointer , gameObject , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , gameObject , event ) { event . stopPropagation (); } Events to get all touched Game Objects scene . input . on ( 'pointerdown' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerdownoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointerup' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerupoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointermove' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerover' , function ( pointer , justOver ){ /* ... */ }); scene . input . on ( 'pointerout' , function ( pointer , justOut ){ /* ... */ }); scene . input . on ( 'gameout' , function ( timeStamp , domEvent ){ /* ... */ }); scene . input . on ( 'gameover' , function ( timeStamp , domEvent ){ /* ... */ });","title":"Touch events"},{"location":"touchevents/#dragging","text":"","title":"Dragging"},{"location":"touchevents/#enable-dragging","text":"Enable dragging when registering interactive gameObject . setInteractive ({ draggable : true }); Enable dragging and add it to dragging detecting list after registered interactive scene . input . setDraggable ( gameObject ); Enable dragging gameObject . input . draggable = true ;","title":"Enable dragging"},{"location":"touchevents/#disable-dragging","text":"Remove Game Object from dragging detecting list scene . input . setDraggable ( gameObject , false ); Disable dragging but keep it in dragging detecting list gameObject . input . draggable = false ;","title":"Disable dragging"},{"location":"touchevents/#dragging-events","text":"gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /* ... */ }); scene . input . on ( 'dragstart' , function ( pointer , gameObject ){ /* ... */ }); scene . input . on ( 'drag' , function ( pointer , gameObject , dragX , dragY ){ /* ... */ }); scene . input . on ( 'dragend' , function ( pointer , gameObject , dropped ){ /* ... */ });","title":"Dragging events"},{"location":"touchevents/#dragging-properties","text":"scene . input . dragDistanceThreshold = 16 ; scene . input . dragTimeThreshold = 500 ;","title":"Dragging properties"},{"location":"touchevents/#drop-zone","text":"","title":"Drop zone"},{"location":"touchevents/#enable-drop-zone","text":"Enable dropping when registering interactive gameObject . setInteractive ({ dropZone : true }); Enable dropping after registered interactive gameObject . input . dropZone = true ;","title":"Enable drop zone"},{"location":"touchevents/#disable-drop-zone","text":"gameObject . input . dropZone = false ;","title":"Disable drop zone"},{"location":"touchevents/#dropping-events","text":"gameObject . on ( 'drop' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragenter' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragover' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragleave' , function ( pointer , target ){ /* ... */ }); scene . input . on ( 'drop' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragenter' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragover' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragleave' , function ( pointer , gameObject , target ){ /* ... */ });","title":"Dropping events"},{"location":"touchevents/#single-touch","text":"","title":"Single touch"},{"location":"touchevents/#pointer","text":"var pointer = scene . input . activePointer ;","title":"Pointer"},{"location":"touchevents/#multi-touch","text":"","title":"Multi-touch"},{"location":"touchevents/#amount-of-active-pointers","text":"Set amount of active pointers in game configuration var config = { // ... input : { activePointers : 1 , // ... } }; var game = new Phaser . Game ( config ); Or add pointers in run-time. scene . input . addPointer ( num ); // total points = num + 1","title":"Amount of active pointers"},{"location":"touchevents/#pointers","text":"pointer 1 ~ 10 var pointer = scene . input . pointer1 ; // ... var pointer = scene . input . pointer10 ; pointer n var pointer = scene . input . manager . pointers [ n ]; Amount of total pointers var amount = scene . input . manager . pointersTotal ; 1 in desktop 2 in touch device. ( 0 for mouse, 1 for 1 touch pointer)","title":"Pointers"},{"location":"touchevents/#pointer_1","text":"Position Current touching Position in screen : pointer.x , pointer.y Position in camera : pointer.worldX , pointer.worldY Get world position in a camera var out = camera . getWorldPoint ( pointer . x , pointer . y ); // var out = camera.getWorldPoint(pointer.x, pointer.y, out); Position of previous moving : pointer.prevPosition.x , pointer.prevPosition.y Updating when pointer-down, potiner-move, or pointer-up. Interpolated position : var points = pointer . getInterpolatedPosition ( step ); // var out = pointer.getInterpolatedPosition(step, out); Drag Touching start : pointer.downX , pointer.downY Touching end : pointer.upX , pointer.upY Drag distance between pointer-down to latest pointer : pointer.getDistance() Horizontal drag distance : pointer.getDistanceX() Vertical drag distance : pointer.getDistanceY() Drag angle : pointer.getAngle() Time Touching start : pointer.downTime Touching end : pointer.upTime Drag : pointer.getDuration() Touch state Is touching/any button down : pointer.isDown Is primary button down : pointer.primaryDown Button state : pointer.button On Touch devices the value is always 0 . Button down No button down : pointer.noButtonDown() Is primary (left) button down : pointer.leftButtonDown() Is secondary (right) button down : pointer.rightButtonDown() Is middle (mouse wheel) button down : pointer.middleButtonDown() Is back button down : pointer.backButtonDown() Is forward button down : pointer.forwardButtonDown() Button released Is primary (left) button released : pointer.leftButtonReleased() Is secondary (right) button released : pointer.rightButtonReleased() Is middle (mouse wheel) button released : pointer.middleButtonReleased() Is back button released : pointer.backButtonReleased() Is forward button released : pointer.forwardButtonReleased() Index in scene.input.manager.pointers : pointer.id Motion Angle: pointer.angle Disatance: pointer.distance Velocity: pointer.velocity pointer.velocity.x , `pointer.velocity.y","title":"Pointer"},{"location":"touchevents/#input-object","text":"gameObject.input : Game object's input object. gameObject.input.localX , gameObject.input.localY : Pointer to local position of texture. Always receive input events, even if it's invisible or won't render : gameObject . input . alwaysEnabled = true ;","title":"Input object"},{"location":"touchevents/#smooth","text":"Get touch position from interpolation of previous touch position and current touch position. Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor)) Set smooth factor. In game configuration var config = { // .... input : { smoothFactor : 0 } } Get touch position var x = pointer . x ; var y = pointer . y ; var worldX = pointer . worldX ; var worldY = pointer . worldY ;","title":"Smooth"},{"location":"touchevents/#debug","text":"Enable, draw shape of hit area. scene . input . enableDebug ( gameObject ); // scene.input.enableDebug(gameObject, color); Disable scene . input . removeDebug ( gameObject );","title":"Debug"},{"location":"touchevents/#poll-rate","text":"Poll when touches moved, or updated. Default behavior. scene . input . setPollOnMove (); Poll every tick. scene . input . setPollAlways (); Set poll rate. scene . input . setPollRate ( rate );","title":"Poll rate"},{"location":"tween-timeline/","text":"Introduction \u00b6 Chain a series of tween tasks , built-in object of phaser. Author: Richard Davey Usage \u00b6 Create timeline, then chain tween tasks \u00b6 Create timeline var timeline = scene . tweens . createTimeline (); Add tween task configuration timeline . add ({ targets : gameObject , x : 400 , // '+=100' ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , // offset: '-=500', // starts 500ms before previous tween ends }) offset : Start this tween task with a time offset. A number : Absolute offsets, start this tween task after timeline start. A string, '-=n' : Relative offsets, start this tween task before previous tween ends. Start tween tasks timeline . play (); Create timeline, included tween tasks \u00b6 var timeline = scene . tweens . timeline ({ targets : gameObject , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , loop : 0 , tweens : [ { targets : gameObject , x : 400 , // '+=100' // ease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back' // duration: 1000, // repeat: 0, // -1: infinity // yoyo: false, // offset: '-=500', // starts 500ms before previous tween ends }, // ... ] });","title":"Timeline"},{"location":"tween-timeline/#introduction","text":"Chain a series of tween tasks , built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tween-timeline/#usage","text":"","title":"Usage"},{"location":"tween-timeline/#create-timeline-then-chain-tween-tasks","text":"Create timeline var timeline = scene . tweens . createTimeline (); Add tween task configuration timeline . add ({ targets : gameObject , x : 400 , // '+=100' ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , // offset: '-=500', // starts 500ms before previous tween ends }) offset : Start this tween task with a time offset. A number : Absolute offsets, start this tween task after timeline start. A string, '-=n' : Relative offsets, start this tween task before previous tween ends. Start tween tasks timeline . play ();","title":"Create timeline, then chain tween tasks"},{"location":"tween-timeline/#create-timeline-included-tween-tasks","text":"var timeline = scene . tweens . timeline ({ targets : gameObject , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , loop : 0 , tweens : [ { targets : gameObject , x : 400 , // '+=100' // ease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back' // duration: 1000, // repeat: 0, // -1: infinity // yoyo: false, // offset: '-=500', // starts 500ms before previous tween ends }, // ... ] });","title":"Create timeline, included tween tasks"},{"location":"tween/","text":"Introduction \u00b6 Change properties by tween equations, built-in object of phaser. Author: Richard Davey Usage \u00b6 Create tween task \u00b6 var tween = scene . tweens . add ({ targets : gameObject , alpha : { from : 0 , to : 1 }, // alpha: { start: 0, to: 1 }, // alpha: 1, // alpha: '+=1', ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false }); key: { from: value1, to: value2 } : Set the property to 1 when tween started after delay, then tween to value2 . key: { start: value0, to: value2 } : Set the property to value0 immediately, then tween to value2 . key: { start: value0, from: value1, to: value2 } : Set the property to value0 immediately, then set to value1 when tween started after delay, then tween to value2 . key: value2 : Tween to value2 . key: '+=deltaValue' : Tween to current value + deltaValue or var tween = scene . tweens . add ({ targets : gameObject , paused : false , callbackScope : tween , // timming/callback of each state onStart : function () {}, onStartScope : callbackScope , onStartParams : [], // initial delay delay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // tween duration duration : 1000 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, ease : 'Linear' , easeParams : null , onActive : function () {}, onUpdate : function () {}, onUpdateScope : callbackScope , onUpdateParams : [], // delay between tween and yoyo hold : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, yoyo : false , // true to tween backward flipX : false , flipY : false , onYoyo : function () {}, onYoyoScope : callbackScope , onYoyoParams : [], // repeat count (-1: infinite) repeat : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, onRepeat : function () {}, onRepeatScope : callbackScope , onRepeatParams : [], // delay to next pass repeatDelay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // loop count (-1: infinite) loop : 0 , onLoop : function () {}, onLoopScope : callbackScope , onLoopParams : [], // delay to next loop loopDelay : 0 , // delay to onComplete callback completeDelay : 0 , onComplete : function () {}, onCompleteScope : callbackScope , onCompleteParams : [], // timming/callback of each state // properties: x : '+=600' , // start from current value y : 500 , rotation : ... angle : ... alpha : ... // ... // or props : { x : { value : '+=600' , duration : 3000 , ease : 'Power2' }, y : { value : '500' , duration : 1500 , ease : 'Bounce.easeOut' } }, // or props : { x : { duration : 400 , yoyo : true , repeat : 8 , ease : 'Sine.easeInOut' , value : { getActive : function ( target , key , value , targetIndex , totalTargets , tween ) { return value ; }, getStart : function ( target , key , value , targetIndex , totalTargets , tween ) { return value + 30 ; }, getEnd : function ( target , key , value , targetIndex , totalTargets , tween ) { destX -= 30 ; return destX ; } } }, .... }, offset : null , useFrames : false }); targets : The targets the tween is updating. delay : The time the tween will wait before it first starts A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder : From 0 to endValue : scene.tweens.stagger(endValue) From startValue to endValue : scene.tweens.stagger([startValue, endValue]) From 0 to endValue , with specific ease function : scene.tweens.stagger(endValue, {ease: 'cubic.inout'}) From startValue to endValue , with specific ease function : scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'}) From 0 to endValue , with specific start index : scene.tweens.stagger(endValue, {from: 'last'}) scene.tweens.stagger(endValue, {from: 'center'}) scene.tweens.stagger(endValue, {from: index}) From startValue to endValue , , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last'}) scene.tweens.stagger([startValue, endValue], {from: 'center'}) scene.tweens.stagger([startValue, endValue], {from: index}) From 0 to endValue , with specific ease function, with specific start index : scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'}) From startValue to endValue , with specific ease function , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'}) Grid mode. From 0 to endValue . scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], }) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) Grid mode. From startValue to endValue . scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], }) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) duration : The duration of the tween A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder ease : The ease function used by the tween easeParams : The parameters to go with the ease function (if any) hold : The time the tween will pause before running a yoyo A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeat : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once) A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeatDelay : The time the tween will pause for before starting a repeat. The tween holds in the start state. A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder yoyo : boolean - Does the tween reverse itself (yoyo) when it reaches the end? flipX : flip X the GameObject on tween end flipY : flip Y the GameObject on tween end offset : Used when the Tween is part of a Timeline completeDelay : The time the tween will wait before the onComplete event is dispatched once it has completed loop : -1 for an infinite loop loopDelay paused : Does the tween start in a paused state, or playing? useFrames : Use frames or milliseconds? props : The properties being tweened by the tween onActive : Tween becomes active within the Tween Manager. function ( tween , targets ) { } onStart : A tween starts. function ( tween , targets ) { } onUpdate : Callback which fired when tween task updated function ( tween , targets ) { } onComplete : Tween completes or is stopped. function ( tween , targets ) { } onYoyo : A tween property yoyos. function ( tween , key , targets ) { } onLoop : A tween loops, after any loop delay expires. function ( tween , targets ) { } onRepeat : A tween property repeats, after any repeat delay expires. function ( tween , targets ) { } Ease equations \u00b6 Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut Pause / Resume task \u00b6 tween . pause (); tween . resume (); Stop task \u00b6 tween . stop (); Play task \u00b6 tween . play (); Restart task \u00b6 tween . restart (); Remove task \u00b6 tween . remove (); Time-scale \u00b6 tween . setTimeScale ( v ); // tween.timeScale = timescale; var timeScale = tween . getTimeScale (); // var timeScale = tween.timeScale; Global time-scale \u00b6 var timeScale = scene . tweens . timeScale ; scene . tweens . timeScale = timescale ; Events \u00b6 Tween becomes active within the Tween Manager. tween . on ( 'active' , function ( tween , targets ){ }, scope ); Tween completes or is stopped. tween . on ( 'complete' , function ( tween , targets ){ }, scope ); A tween loops, after any loop delay expires. tween . on ( 'loop' , function ( tween , targets ){ }, scope ); A tween property repeats, after any repeat delay expires. tween . on ( 'repeat' , function ( tween , key , targets ){ }, scope ); A tween starts. tween . on ( 'start' , function ( tween , targets ){ }, scope ); A tween property updates. tween . on ( 'update' , function ( tween , key , targets ){ }, scope ); A tween property yoyos. tween . on ( 'yoyo' , function ( tween , key , targets ){ }, scope ); State \u00b6 Is playing var isPlaying = tween . isPlaying (); Is paused var isPaused = tween . isPaused (); Is actively and not just in a delayed state var hasStarted = tween . hasStarted ; Tween value \u00b6 Create tween task var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , }); or var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , // ... }); Get value var value = tween . getValue (); Custom ease function \u00b6 var tween = scene . tweens . add ({ targets : gameObject , // ... ease : function ( t ) { // t: 0~1 return value ; // value: 0~1 }, // ... }); Flow chart \u00b6 graph TB Start((Start)) --> CallbackOnStart CallbackOnStart>\"Callback: onStart\"] --> ActiveDelay[\"delay\"] ActiveDelay --> DurationForward[\"Tween forward<br>Callback: onUpdate<br>(duration)\"] subgraph A pass DurationForward --> Hold[\"hold\"] Hold --> IsYoyo{Is yoyo} IsYoyo --> |Yes| CallbackOnYoyo>\"Callback: onYoyo\"] CallbackOnYoyo --> DurationBackward[\"Tween backword<br>Callback: onUpdate<br>(duration)\"] DurationBackward --> IsRepeat{\"Repeat count > 0\"} IsYoyo --> |No| IsRepeat IsRepeat --> |Yes| CallbackOnRepeat>\"Callback: onRepeat\"] CallbackOnRepeat --> RepeatDelay[\"repeatDelay\"] RepeatDelay --> DurationForward end IsRepeat --> |No| IsLoop{\"Loop count > 0\"} IsLoop --> |Yes| CallbackOnLoop CallbackOnLoop>\"Callback: onLoop\"] --> LoopDelay[\"loopDelay\"] LoopDelay --> DurationForward IsLoop --> |No| CompleteDelay CompleteDelay[\"completeDelay\"] --> CallbackOnComplete>\"Callback: onComplete\"] CallbackOnComplete --> End((End)) Tween data \u00b6 tween.data : An array of TweenData objects, each containing a unique property and target being tweened. tween.data[i].key : The property of the target to tween. tween.data[i].start , tween.data[i].end , tween.data[i].current : Ease Value Data.","title":"Tween task"},{"location":"tween/#introduction","text":"Change properties by tween equations, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tween/#usage","text":"","title":"Usage"},{"location":"tween/#create-tween-task","text":"var tween = scene . tweens . add ({ targets : gameObject , alpha : { from : 0 , to : 1 }, // alpha: { start: 0, to: 1 }, // alpha: 1, // alpha: '+=1', ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false }); key: { from: value1, to: value2 } : Set the property to 1 when tween started after delay, then tween to value2 . key: { start: value0, to: value2 } : Set the property to value0 immediately, then tween to value2 . key: { start: value0, from: value1, to: value2 } : Set the property to value0 immediately, then set to value1 when tween started after delay, then tween to value2 . key: value2 : Tween to value2 . key: '+=deltaValue' : Tween to current value + deltaValue or var tween = scene . tweens . add ({ targets : gameObject , paused : false , callbackScope : tween , // timming/callback of each state onStart : function () {}, onStartScope : callbackScope , onStartParams : [], // initial delay delay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // tween duration duration : 1000 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, ease : 'Linear' , easeParams : null , onActive : function () {}, onUpdate : function () {}, onUpdateScope : callbackScope , onUpdateParams : [], // delay between tween and yoyo hold : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, yoyo : false , // true to tween backward flipX : false , flipY : false , onYoyo : function () {}, onYoyoScope : callbackScope , onYoyoParams : [], // repeat count (-1: infinite) repeat : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, onRepeat : function () {}, onRepeatScope : callbackScope , onRepeatParams : [], // delay to next pass repeatDelay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // loop count (-1: infinite) loop : 0 , onLoop : function () {}, onLoopScope : callbackScope , onLoopParams : [], // delay to next loop loopDelay : 0 , // delay to onComplete callback completeDelay : 0 , onComplete : function () {}, onCompleteScope : callbackScope , onCompleteParams : [], // timming/callback of each state // properties: x : '+=600' , // start from current value y : 500 , rotation : ... angle : ... alpha : ... // ... // or props : { x : { value : '+=600' , duration : 3000 , ease : 'Power2' }, y : { value : '500' , duration : 1500 , ease : 'Bounce.easeOut' } }, // or props : { x : { duration : 400 , yoyo : true , repeat : 8 , ease : 'Sine.easeInOut' , value : { getActive : function ( target , key , value , targetIndex , totalTargets , tween ) { return value ; }, getStart : function ( target , key , value , targetIndex , totalTargets , tween ) { return value + 30 ; }, getEnd : function ( target , key , value , targetIndex , totalTargets , tween ) { destX -= 30 ; return destX ; } } }, .... }, offset : null , useFrames : false }); targets : The targets the tween is updating. delay : The time the tween will wait before it first starts A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder : From 0 to endValue : scene.tweens.stagger(endValue) From startValue to endValue : scene.tweens.stagger([startValue, endValue]) From 0 to endValue , with specific ease function : scene.tweens.stagger(endValue, {ease: 'cubic.inout'}) From startValue to endValue , with specific ease function : scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'}) From 0 to endValue , with specific start index : scene.tweens.stagger(endValue, {from: 'last'}) scene.tweens.stagger(endValue, {from: 'center'}) scene.tweens.stagger(endValue, {from: index}) From startValue to endValue , , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last'}) scene.tweens.stagger([startValue, endValue], {from: 'center'}) scene.tweens.stagger([startValue, endValue], {from: index}) From 0 to endValue , with specific ease function, with specific start index : scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'}) From startValue to endValue , with specific ease function , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'}) Grid mode. From 0 to endValue . scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], }) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) Grid mode. From startValue to endValue . scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], }) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) duration : The duration of the tween A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder ease : The ease function used by the tween easeParams : The parameters to go with the ease function (if any) hold : The time the tween will pause before running a yoyo A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeat : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once) A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeatDelay : The time the tween will pause for before starting a repeat. The tween holds in the start state. A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder yoyo : boolean - Does the tween reverse itself (yoyo) when it reaches the end? flipX : flip X the GameObject on tween end flipY : flip Y the GameObject on tween end offset : Used when the Tween is part of a Timeline completeDelay : The time the tween will wait before the onComplete event is dispatched once it has completed loop : -1 for an infinite loop loopDelay paused : Does the tween start in a paused state, or playing? useFrames : Use frames or milliseconds? props : The properties being tweened by the tween onActive : Tween becomes active within the Tween Manager. function ( tween , targets ) { } onStart : A tween starts. function ( tween , targets ) { } onUpdate : Callback which fired when tween task updated function ( tween , targets ) { } onComplete : Tween completes or is stopped. function ( tween , targets ) { } onYoyo : A tween property yoyos. function ( tween , key , targets ) { } onLoop : A tween loops, after any loop delay expires. function ( tween , targets ) { } onRepeat : A tween property repeats, after any repeat delay expires. function ( tween , targets ) { }","title":"Create tween task"},{"location":"tween/#ease-equations","text":"Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut","title":"Ease equations"},{"location":"tween/#pause-resume-task","text":"tween . pause (); tween . resume ();","title":"Pause / Resume task"},{"location":"tween/#stop-task","text":"tween . stop ();","title":"Stop task"},{"location":"tween/#play-task","text":"tween . play ();","title":"Play task"},{"location":"tween/#restart-task","text":"tween . restart ();","title":"Restart task"},{"location":"tween/#remove-task","text":"tween . remove ();","title":"Remove task"},{"location":"tween/#time-scale","text":"tween . setTimeScale ( v ); // tween.timeScale = timescale; var timeScale = tween . getTimeScale (); // var timeScale = tween.timeScale;","title":"Time-scale"},{"location":"tween/#global-time-scale","text":"var timeScale = scene . tweens . timeScale ; scene . tweens . timeScale = timescale ;","title":"Global time-scale"},{"location":"tween/#events","text":"Tween becomes active within the Tween Manager. tween . on ( 'active' , function ( tween , targets ){ }, scope ); Tween completes or is stopped. tween . on ( 'complete' , function ( tween , targets ){ }, scope ); A tween loops, after any loop delay expires. tween . on ( 'loop' , function ( tween , targets ){ }, scope ); A tween property repeats, after any repeat delay expires. tween . on ( 'repeat' , function ( tween , key , targets ){ }, scope ); A tween starts. tween . on ( 'start' , function ( tween , targets ){ }, scope ); A tween property updates. tween . on ( 'update' , function ( tween , key , targets ){ }, scope ); A tween property yoyos. tween . on ( 'yoyo' , function ( tween , key , targets ){ }, scope );","title":"Events"},{"location":"tween/#state","text":"Is playing var isPlaying = tween . isPlaying (); Is paused var isPaused = tween . isPaused (); Is actively and not just in a delayed state var hasStarted = tween . hasStarted ;","title":"State"},{"location":"tween/#tween-value","text":"Create tween task var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , }); or var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , // ... }); Get value var value = tween . getValue ();","title":"Tween value"},{"location":"tween/#custom-ease-function","text":"var tween = scene . tweens . add ({ targets : gameObject , // ... ease : function ( t ) { // t: 0~1 return value ; // value: 0~1 }, // ... });","title":"Custom ease function"},{"location":"tween/#flow-chart","text":"graph TB Start((Start)) --> CallbackOnStart CallbackOnStart>\"Callback: onStart\"] --> ActiveDelay[\"delay\"] ActiveDelay --> DurationForward[\"Tween forward<br>Callback: onUpdate<br>(duration)\"] subgraph A pass DurationForward --> Hold[\"hold\"] Hold --> IsYoyo{Is yoyo} IsYoyo --> |Yes| CallbackOnYoyo>\"Callback: onYoyo\"] CallbackOnYoyo --> DurationBackward[\"Tween backword<br>Callback: onUpdate<br>(duration)\"] DurationBackward --> IsRepeat{\"Repeat count > 0\"} IsYoyo --> |No| IsRepeat IsRepeat --> |Yes| CallbackOnRepeat>\"Callback: onRepeat\"] CallbackOnRepeat --> RepeatDelay[\"repeatDelay\"] RepeatDelay --> DurationForward end IsRepeat --> |No| IsLoop{\"Loop count > 0\"} IsLoop --> |Yes| CallbackOnLoop CallbackOnLoop>\"Callback: onLoop\"] --> LoopDelay[\"loopDelay\"] LoopDelay --> DurationForward IsLoop --> |No| CompleteDelay CompleteDelay[\"completeDelay\"] --> CallbackOnComplete>\"Callback: onComplete\"] CallbackOnComplete --> End((End))","title":"Flow chart"},{"location":"tween/#tween-data","text":"tween.data : An array of TweenData objects, each containing a unique property and target being tweened. tween.data[i].key : The property of the target to tween. tween.data[i].start , tween.data[i].end , tween.data[i].current : Ease Value Data.","title":"Tween data"},{"location":"ui-basesizer/","text":"Introduction \u00b6 Base class of all ui plugins. Author: Rex Usage \u00b6 Minimum size \u00b6 sizer . setMinSize ( width , height ); or sizer . setMinWidth ( width ); sizer . setMinHeight ( height ); Bounds of sizer \u00b6 Get var leftBound = sizer . left ; var rightBound = sizer . right ; var topBound = sizer . top ; var bottomBound = sizer . bottom ; Set sizer . left = leftBound ; sizer . right = rightBound ; sizer . top = topBound ; sizer . bottom = bottomBound ; or sizer . alignLeft ( leftBound ); sizer . alignRight ( rightBound ); sizer . alignTop ( topBound ); sizer . alignBottom ( bottomBound ); Push into bounds \u00b6 Align sizer to bound if overlapping it. sizer . pushIntoBounds (); or sizer . pushIntoBounds ( bounds ); bounds : Bounds in rectangle object . Scale \u00b6 Pop up Pop up width and height sizer . popUp ( duration ); // sizer.popUp(duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only sizer . popUp ( duration , 'x' ); // sizer.popUp(duration, 'x', ease); Pop up height only sizer . popUp ( duration , 'y' ); // sizer.popUp(duration, 'y', ease); Pop up via config sizer . popUp ({ duration : undefined , orientation : undefined , ease : undefined , }) orientation : undefined , x , or y Scale down destroy Scale down width and height sizer . scaleDownDestroy ( duration ); // sizer.scaleDownDestroy(duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only sizer . scaleDownDestroy ( duration , 'x' ); // sizer.scaleDownDestroy(duration, 'x', ease); Scale down height only sizer . scaleDownDestroy ( duration , 'y' ); // sizer.scaleDownDestroy(duration, 'y', ease); Scale down without destroy Scale down width and height sizer . scaleDownDestroy ( duration , undefined , ease , false ); Scale down width only sizer . scaleDownDestroy ( duration , 'x' , ease , false ); Scale down height only sizer . scaleDownDestroy ( duration , 'y' , ease , false ); Fade \u00b6 Fade in sizer . fadeIn ( duration ); Fade out destroy sizer . fadeOutDestroy ( duration ); Fade out without destroy sizer . fadeOutDestroy ( duration , false ); Drag top-most sizer \u00b6 Draggable child Enable sizer . setDraggable ( child ); // sizer.setDraggable(child, true) or sizer . setDraggable ( elementName ); // sizer.setDraggable(elementName, true) Disable sizer . setDraggable ( child , false ); or sizer . setDraggable ( elementName , false ); Draggable sizer object Enable sizer . setDraggable (); // sizer.setDraggable(true); Disalbe sizer . setDraggable ( false ); Pin game object \u00b6 sizer . pin ( gameObject ); Note Method sizer.add is override in each sizer class usually. Draw bounds \u00b6 Draw all bounds of children. sizer . drawBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Anchor \u00b6 sizer . setAnchor ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' } Get child \u00b6 Add child sizer . addChildrenMap ( key , child ); Get child var child = sizer . getElement ( key ); Get parent \u00b6 Get parent sizer var parentSizer = sizer . getParentSizer (); Get topmost sizer var topmostSizer = sizer . getTopmostSizer (); Is in touching \u00b6 var isTouching = sizer . isInTouching (); Other properties \u00b6 This game object inherits from ContainerLite .","title":"Base sizer"},{"location":"ui-basesizer/#introduction","text":"Base class of all ui plugins. Author: Rex","title":"Introduction"},{"location":"ui-basesizer/#usage","text":"","title":"Usage"},{"location":"ui-basesizer/#minimum-size","text":"sizer . setMinSize ( width , height ); or sizer . setMinWidth ( width ); sizer . setMinHeight ( height );","title":"Minimum size"},{"location":"ui-basesizer/#bounds-of-sizer","text":"Get var leftBound = sizer . left ; var rightBound = sizer . right ; var topBound = sizer . top ; var bottomBound = sizer . bottom ; Set sizer . left = leftBound ; sizer . right = rightBound ; sizer . top = topBound ; sizer . bottom = bottomBound ; or sizer . alignLeft ( leftBound ); sizer . alignRight ( rightBound ); sizer . alignTop ( topBound ); sizer . alignBottom ( bottomBound );","title":"Bounds of sizer"},{"location":"ui-basesizer/#push-into-bounds","text":"Align sizer to bound if overlapping it. sizer . pushIntoBounds (); or sizer . pushIntoBounds ( bounds ); bounds : Bounds in rectangle object .","title":"Push into bounds"},{"location":"ui-basesizer/#scale","text":"Pop up Pop up width and height sizer . popUp ( duration ); // sizer.popUp(duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only sizer . popUp ( duration , 'x' ); // sizer.popUp(duration, 'x', ease); Pop up height only sizer . popUp ( duration , 'y' ); // sizer.popUp(duration, 'y', ease); Pop up via config sizer . popUp ({ duration : undefined , orientation : undefined , ease : undefined , }) orientation : undefined , x , or y Scale down destroy Scale down width and height sizer . scaleDownDestroy ( duration ); // sizer.scaleDownDestroy(duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only sizer . scaleDownDestroy ( duration , 'x' ); // sizer.scaleDownDestroy(duration, 'x', ease); Scale down height only sizer . scaleDownDestroy ( duration , 'y' ); // sizer.scaleDownDestroy(duration, 'y', ease); Scale down without destroy Scale down width and height sizer . scaleDownDestroy ( duration , undefined , ease , false ); Scale down width only sizer . scaleDownDestroy ( duration , 'x' , ease , false ); Scale down height only sizer . scaleDownDestroy ( duration , 'y' , ease , false );","title":"Scale"},{"location":"ui-basesizer/#fade","text":"Fade in sizer . fadeIn ( duration ); Fade out destroy sizer . fadeOutDestroy ( duration ); Fade out without destroy sizer . fadeOutDestroy ( duration , false );","title":"Fade"},{"location":"ui-basesizer/#drag-top-most-sizer","text":"Draggable child Enable sizer . setDraggable ( child ); // sizer.setDraggable(child, true) or sizer . setDraggable ( elementName ); // sizer.setDraggable(elementName, true) Disable sizer . setDraggable ( child , false ); or sizer . setDraggable ( elementName , false ); Draggable sizer object Enable sizer . setDraggable (); // sizer.setDraggable(true); Disalbe sizer . setDraggable ( false );","title":"Drag top-most sizer"},{"location":"ui-basesizer/#pin-game-object","text":"sizer . pin ( gameObject ); Note Method sizer.add is override in each sizer class usually.","title":"Pin game object"},{"location":"ui-basesizer/#draw-bounds","text":"Draw all bounds of children. sizer . drawBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw bounds"},{"location":"ui-basesizer/#anchor","text":"sizer . setAnchor ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' }","title":"Anchor"},{"location":"ui-basesizer/#get-child","text":"Add child sizer . addChildrenMap ( key , child ); Get child var child = sizer . getElement ( key );","title":"Get child"},{"location":"ui-basesizer/#get-parent","text":"Get parent sizer var parentSizer = sizer . getParentSizer (); Get topmost sizer var topmostSizer = sizer . getTopmostSizer ();","title":"Get parent"},{"location":"ui-basesizer/#is-in-touching","text":"var isTouching = sizer . isInTouching ();","title":"Is in touching"},{"location":"ui-basesizer/#other-properties","text":"This game object inherits from ContainerLite .","title":"Other properties"},{"location":"ui-buttons/","text":"Introduction \u00b6 A container with a group of buttons. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add Buttons object \u00b6 var buttons = scene . rexUI . add . buttons ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , // Elements background : backgroundGameObject , buttons : [ buttonGameObject , buttonGameObject , // ... ], align : undefined , click : { mode : 'pointerup' , clickInterval : 100 } space : 0 , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of button game objects. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange button game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange button game objects from top to bottom. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. buttons : Array of button game objects. align : Alignment of these button game objects. undefined , or 'left' , or 'top' : Align game object at left, or top. 'center' : Align game object at center. 'right' , or 'bottom' : Align game object at right, or bottom. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. space : Spaces between 2 button game objects. name : Set name of this button game objects. Custom class \u00b6 Define class class MyButtons extends RexPlugins . UI . Buttons { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var buttons = new MyButtons ( scene , config ); Layout children \u00b6 Arrange position of all elements. buttons . layout (); Other properties \u00b6 See sizer object Events \u00b6 Click button buttons . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button buttons . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button buttons . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Emit button click event \u00b6 buttons . emitButtonClick ( index ); index : Index of triggered button game object, or a button game object. Get element \u00b6 Get element Background game object var background = buttons . getElement ( 'background' ); Button game objects var bottons = buttons . getElement ( 'buttons' ); or var button = buttons . getButton ( index ); or var botton = buttons . getElement ( 'buttons[0]' ); // First button Get by name var gameObject = buttons . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call buttons.layout() , or topSizer.layout() after show/hide any button. Show button buttons . showButton ( index ); index : A number index, or a button game object. Hide button. buttons . hideButton ( index ); index : A number index, or a button game object. For each button \u00b6 buttons . forEachButtton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Buttons"},{"location":"ui-buttons/#introduction","text":"A container with a group of buttons. Author: Rex Game object","title":"Introduction"},{"location":"ui-buttons/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-buttons/#usage","text":"Sample code","title":"Usage"},{"location":"ui-buttons/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-buttons/#add-buttons-object","text":"var buttons = scene . rexUI . add . buttons ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , // Elements background : backgroundGameObject , buttons : [ buttonGameObject , buttonGameObject , // ... ], align : undefined , click : { mode : 'pointerup' , clickInterval : 100 } space : 0 , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of button game objects. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange button game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange button game objects from top to bottom. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. buttons : Array of button game objects. align : Alignment of these button game objects. undefined , or 'left' , or 'top' : Align game object at left, or top. 'center' : Align game object at center. 'right' , or 'bottom' : Align game object at right, or bottom. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. space : Spaces between 2 button game objects. name : Set name of this button game objects.","title":"Add Buttons object"},{"location":"ui-buttons/#custom-class","text":"Define class class MyButtons extends RexPlugins . UI . Buttons { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var buttons = new MyButtons ( scene , config );","title":"Custom class"},{"location":"ui-buttons/#layout-children","text":"Arrange position of all elements. buttons . layout ();","title":"Layout children"},{"location":"ui-buttons/#other-properties","text":"See sizer object","title":"Other properties"},{"location":"ui-buttons/#events","text":"Click button buttons . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button buttons . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button buttons . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-buttons/#emit-button-click-event","text":"buttons . emitButtonClick ( index ); index : Index of triggered button game object, or a button game object.","title":"Emit button click event"},{"location":"ui-buttons/#get-element","text":"Get element Background game object var background = buttons . getElement ( 'background' ); Button game objects var bottons = buttons . getElement ( 'buttons' ); or var button = buttons . getButton ( index ); or var botton = buttons . getElement ( 'buttons[0]' ); // First button Get by name var gameObject = buttons . getElement ( '#' + name );","title":"Get element"},{"location":"ui-buttons/#showhide-button","text":"Hidden elements won't be counted when layouting. Call buttons.layout() , or topSizer.layout() after show/hide any button. Show button buttons . showButton ( index ); index : A number index, or a button game object. Hide button. buttons . hideButton ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-buttons/#for-each-button","text":"buttons . forEachButtton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-chart/","text":"Introduction \u00b6 Draw chart on canvas . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Install chart.js \u00b6 Chart.js is not included in rexUI, installs it before creating any chart. scene . load . script ( 'chartjs' , 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js' ); Add chart object \u00b6 var chart = scene . rexUI . add . chart ( x , y , width , height , config ); x , y : Position of this object. width , height : Canvas size. config : Configuration for creating chart. Set undefined to not create chart at beginning. Custom class \u00b6 Define class class MyChart extends RexPlugins . UI . Chart { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... } // ... } Create instance var chart = new MyChart ( scene , x , y , width , height , config ); Create chart \u00b6 Create chart (if not creating at beginning). chart . setChart ( config ); config : Configuration for creating chart. Chart data \u00b6 Get dataset var dataset = chart . getChartDataset ( datasetIndex ); datasetIndex : Index number or label string. Get data var data = chart . getChartData ( datasetIndex , dataIndex ); datasetIndex : Index number or label string. dataIndex : Index number or label string. Set chart . setChartData ( datasetIndex , dataIndex , value ). updateChart (); datasetIndex : Index number or label string. dataIndex : Index number or label string. Manipulate chart object \u00b6 Get chart object var chart = chart . chart ; Set properties of chart Array of dataset var datasets = chart . data . datasets ; Label of dataset var label = chart . data . datasets [ i ]. label ; Labels var labels = chart . data . labels ; Set chart data chart . data . datasets [ datasetIndex ]. data [ dataIndex ] = value ; Update chart chart . update ();","title":"Chart"},{"location":"ui-chart/#introduction","text":"Draw chart on canvas . Author: Rex Game object","title":"Introduction"},{"location":"ui-chart/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-chart/#usage","text":"Sample code","title":"Usage"},{"location":"ui-chart/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-chart/#install-chartjs","text":"Chart.js is not included in rexUI, installs it before creating any chart. scene . load . script ( 'chartjs' , 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js' );","title":"Install chart.js"},{"location":"ui-chart/#add-chart-object","text":"var chart = scene . rexUI . add . chart ( x , y , width , height , config ); x , y : Position of this object. width , height : Canvas size. config : Configuration for creating chart. Set undefined to not create chart at beginning.","title":"Add chart object"},{"location":"ui-chart/#custom-class","text":"Define class class MyChart extends RexPlugins . UI . Chart { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... } // ... } Create instance var chart = new MyChart ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"ui-chart/#create-chart","text":"Create chart (if not creating at beginning). chart . setChart ( config ); config : Configuration for creating chart.","title":"Create chart"},{"location":"ui-chart/#chart-data","text":"Get dataset var dataset = chart . getChartDataset ( datasetIndex ); datasetIndex : Index number or label string. Get data var data = chart . getChartData ( datasetIndex , dataIndex ); datasetIndex : Index number or label string. dataIndex : Index number or label string. Set chart . setChartData ( datasetIndex , dataIndex , value ). updateChart (); datasetIndex : Index number or label string. dataIndex : Index number or label string.","title":"Chart data"},{"location":"ui-chart/#manipulate-chart-object","text":"Get chart object var chart = chart . chart ; Set properties of chart Array of dataset var datasets = chart . data . datasets ; Label of dataset var label = chart . data . datasets [ i ]. label ; Labels var labels = chart . data . labels ; Set chart data chart . data . datasets [ datasetIndex ]. data [ dataIndex ] = value ; Update chart chart . update ();","title":"Manipulate chart object"},{"location":"ui-dialog/","text":"Introduction \u00b6 A container with a title, content, buttons and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add dialog object \u00b6 var dialog = scene . rexUI . add . dialog ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , title : titleGameObject , toolbar : [ buttonGameObject , buttonGameObject , // ... ], content : contentGameObject , description : descriptionGameObject , choices : [ buttonGameObject , buttonGameObject , // ... ], actions : [ buttonGameObject , buttonGameObject , // ... ], // Space space : { left : 0 , right : 0 , top : 0 , bottom : 0 , title : 0 , titleLeft : 0 , titleRight : 0 , content : 0 , contentLeft : 0 , contentRight : 0 , description : 0 , descriptionLeft : 0 , descriptionRight : 0 choices : 0 , choicesLeft : 0 , choicesRight : 0 , actionsLeft : 0 , actionsRight : 0 , toolbarItem : 0 , choice : 0 , action : 0 , }, expand : { title : true , content : true , description : true , choices : true , actions : true , }, align : { title : 'center' , content : 'center' , description : 'center' , choices : 'center' , actions : 'center' , }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of dialog. title : Game object of title, optional. toolbar : Array of Game objects for toolbar-buttons group which arranged from left to right, optional. content : Game object of content, optional. description : Game object of description, optional. choices : Array of Game objects for choice-buttons group which arranged from top to bottom, optional. actions : Array of Game objects for action-buttons group which arranged from left to right, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.title : Space between title game object and below game object. space.titleLeft , space.titleRight : Extra left/right padding of title game object. space.content : Space between content game object and below game object. space.contentLeft , space.contentRight : Extra left/right padding of content game object. space.description : Space between description game object and below game object. space.descriptionLeft , space.descriptionRight : Extra left/right padding of description game object. space.choices : Space between last choice-button and below game object. space.choicesLeft , space.choicesRight : Extra left/right padding of choice buttons. space.actionsLeft , space.actionsRight : Extra left/right padding of actions buttons. space.toolbarItem : Space between each toolbar item game objects. space.choice : Space between each choice-button game objects. space.action : Space between each action-button game objects. expand : Expand width of element expand.title : Set true to expand width of title game object. expand.content expand.description expand.choices expand.actions align : Align element align.title 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.content align.description align.choices align.actions : Alignment of action-buttons. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this dialog. Custom class \u00b6 Define class class MyDialog extends RexPlugins . UI . Dialog { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var dialog = new MyDialog ( scene , config ); Layout children \u00b6 Arrange position of all elements. dialog . layout (); Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 Click button dialog . on ( 'button.click' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button dialog . on ( 'button.over' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button dialog . on ( 'button.out' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Emit button click event \u00b6 Emit action/choice button click event dialog . emitChoiceClick ( index ); dialog . emitActionClick ( index ); index : Index of triggered button game object, or a button game object. Get element \u00b6 Get element Background game object var background = dialog . getElement ( 'background' ); Title game object var title = dialog . getElement ( 'title' ); Content game object var content = dialog . getElement ( 'content' ); Choice button game object var buttons = dialog . getElement ( 'choices' ); or var button = dialog . getChoice ( index ); or var button = dialog . getElement ( 'choices[' + index + ']' ); Acrion button game object var buttons = dialog . getElement ( 'actions' ); or var button = dialog . getAction ( index ); or var button = dialog . getElement ( 'actions[' + index + ']' ); Get by name var gameObject = dialog . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call dialog.layout() , or topSizer.layout() after show/hide any button. Show choice/action button dialog . showChoice ( index ); dialog . showAction ( index ); index : A number index, or a button game object. Hide action/choice button. dialog . hideChoice ( index ); dialog . hideAction ( index ); index : A number index, or a button game object. For each button \u00b6 dialog . forEachChoice ( callback , scope ); dialog . forEachAction ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Dialog"},{"location":"ui-dialog/#introduction","text":"A container with a title, content, buttons and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-dialog/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-dialog/#usage","text":"Sample code","title":"Usage"},{"location":"ui-dialog/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-dialog/#add-dialog-object","text":"var dialog = scene . rexUI . add . dialog ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , title : titleGameObject , toolbar : [ buttonGameObject , buttonGameObject , // ... ], content : contentGameObject , description : descriptionGameObject , choices : [ buttonGameObject , buttonGameObject , // ... ], actions : [ buttonGameObject , buttonGameObject , // ... ], // Space space : { left : 0 , right : 0 , top : 0 , bottom : 0 , title : 0 , titleLeft : 0 , titleRight : 0 , content : 0 , contentLeft : 0 , contentRight : 0 , description : 0 , descriptionLeft : 0 , descriptionRight : 0 choices : 0 , choicesLeft : 0 , choicesRight : 0 , actionsLeft : 0 , actionsRight : 0 , toolbarItem : 0 , choice : 0 , action : 0 , }, expand : { title : true , content : true , description : true , choices : true , actions : true , }, align : { title : 'center' , content : 'center' , description : 'center' , choices : 'center' , actions : 'center' , }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of dialog. title : Game object of title, optional. toolbar : Array of Game objects for toolbar-buttons group which arranged from left to right, optional. content : Game object of content, optional. description : Game object of description, optional. choices : Array of Game objects for choice-buttons group which arranged from top to bottom, optional. actions : Array of Game objects for action-buttons group which arranged from left to right, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.title : Space between title game object and below game object. space.titleLeft , space.titleRight : Extra left/right padding of title game object. space.content : Space between content game object and below game object. space.contentLeft , space.contentRight : Extra left/right padding of content game object. space.description : Space between description game object and below game object. space.descriptionLeft , space.descriptionRight : Extra left/right padding of description game object. space.choices : Space between last choice-button and below game object. space.choicesLeft , space.choicesRight : Extra left/right padding of choice buttons. space.actionsLeft , space.actionsRight : Extra left/right padding of actions buttons. space.toolbarItem : Space between each toolbar item game objects. space.choice : Space between each choice-button game objects. space.action : Space between each action-button game objects. expand : Expand width of element expand.title : Set true to expand width of title game object. expand.content expand.description expand.choices expand.actions align : Align element align.title 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.content align.description align.choices align.actions : Alignment of action-buttons. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this dialog.","title":"Add dialog object"},{"location":"ui-dialog/#custom-class","text":"Define class class MyDialog extends RexPlugins . UI . Dialog { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var dialog = new MyDialog ( scene , config );","title":"Custom class"},{"location":"ui-dialog/#layout-children","text":"Arrange position of all elements. dialog . layout ();","title":"Layout children"},{"location":"ui-dialog/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-dialog/#events","text":"Click button dialog . on ( 'button.click' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button dialog . on ( 'button.over' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button dialog . on ( 'button.out' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-dialog/#emit-button-click-event","text":"Emit action/choice button click event dialog . emitChoiceClick ( index ); dialog . emitActionClick ( index ); index : Index of triggered button game object, or a button game object.","title":"Emit button click event"},{"location":"ui-dialog/#get-element","text":"Get element Background game object var background = dialog . getElement ( 'background' ); Title game object var title = dialog . getElement ( 'title' ); Content game object var content = dialog . getElement ( 'content' ); Choice button game object var buttons = dialog . getElement ( 'choices' ); or var button = dialog . getChoice ( index ); or var button = dialog . getElement ( 'choices[' + index + ']' ); Acrion button game object var buttons = dialog . getElement ( 'actions' ); or var button = dialog . getAction ( index ); or var button = dialog . getElement ( 'actions[' + index + ']' ); Get by name var gameObject = dialog . getElement ( '#' + name );","title":"Get element"},{"location":"ui-dialog/#showhide-button","text":"Hidden elements won't be counted when layouting. Call dialog.layout() , or topSizer.layout() after show/hide any button. Show choice/action button dialog . showChoice ( index ); dialog . showAction ( index ); index : A number index, or a button game object. Hide action/choice button. dialog . hideChoice ( index ); dialog . hideAction ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-dialog/#for-each-button","text":"dialog . forEachChoice ( callback , scope ); dialog . forEachAction ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-fixwidthsizer/","text":"Introduction \u00b6 Layout children game objects into lines. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add sizer object \u00b6 var sizer = scene . rexUI . add . fixWidthSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 }, // name: '', // draggable: false }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , { width : 2 , height : 2 orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , { orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , orientation , { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.item : Space betwen each child of a line. space.line : Space between each line. Custom class \u00b6 Define class class MySizer extends RexPlugins . UI . FixWidthSizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation ); Add background \u00b6 sizer . addBackground ( child ); Add child \u00b6 Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , paddingConfig , childKey ); child : A game object paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. items : Reserved key, for all children item. Add new line \u00b6 sizer . addNewLine (); or sizer . add ( '\\n' ); Layout children \u00b6 Arrange position of all children. sizer . layout (); Remove child \u00b6 Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild ); Get element \u00b6 Get element All children items var items = label . getElement ( 'items' ); Get by name var gameObject = label . getElement ( '#' + name ); Other properties \u00b6 See base-sizer object .","title":"Fix-width sizer"},{"location":"ui-fixwidthsizer/#introduction","text":"Layout children game objects into lines. Author: Rex Game object","title":"Introduction"},{"location":"ui-fixwidthsizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-fixwidthsizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-fixwidthsizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-fixwidthsizer/#add-sizer-object","text":"var sizer = scene . rexUI . add . fixWidthSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 }, // name: '', // draggable: false }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , { width : 2 , height : 2 orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , { orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , orientation , { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.item : Space betwen each child of a line. space.line : Space between each line.","title":"Add sizer object"},{"location":"ui-fixwidthsizer/#custom-class","text":"Define class class MySizer extends RexPlugins . UI . FixWidthSizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation );","title":"Custom class"},{"location":"ui-fixwidthsizer/#add-background","text":"sizer . addBackground ( child );","title":"Add background"},{"location":"ui-fixwidthsizer/#add-child","text":"Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , paddingConfig , childKey ); child : A game object paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. items : Reserved key, for all children item.","title":"Add child"},{"location":"ui-fixwidthsizer/#add-new-line","text":"sizer . addNewLine (); or sizer . add ( '\\n' );","title":"Add new line"},{"location":"ui-fixwidthsizer/#layout-children","text":"Arrange position of all children. sizer . layout ();","title":"Layout children"},{"location":"ui-fixwidthsizer/#remove-child","text":"Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild );","title":"Remove child"},{"location":"ui-fixwidthsizer/#get-element","text":"Get element All children items var items = label . getElement ( 'items' ); Get by name var gameObject = label . getElement ( '#' + name );","title":"Get element"},{"location":"ui-fixwidthsizer/#other-properties","text":"See base-sizer object .","title":"Other properties"},{"location":"ui-gridsizer/","text":"Introduction \u00b6 Layout children game objects in grids. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add grid sizer object \u00b6 var gridSizer = scene . rexUI . add . gridSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // name: '', // draggable: false }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // width: undefined, // height: undefined }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , column , row ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width : Minimum width. i.e. Width of this gridSizer will larger then this value. height : Minimum height. i.e. Hieght of this gridSizer will larger then this value. column : Amount of column grids. row : Amount of row grids. columnProportions , rowProportions : Proportion of each column/row. Number : Apply this number proportion to each column/row Number array : Apply proportion of column/row through elements of this number array. Custom class \u00b6 Define class class MyGridSizer extends RexPlugins . UI . GridSizer { constructor ( scene , x , y , minWidth , minHeight , column , row ) { super ( scene , x , y , minWidth , minHeight , column , ro ); // ... } // ... } Create instance var gridSizer = new MyGridSizer ( scene , x , y , minWidth , minHeight , column , row ); Add background \u00b6 gridSizer . addBackground ( child ); Add child \u00b6 Add a game obejct to grid sizer gridSizer . add ( child , columnIndex , rowIndex ); or gridSizer . add ( child , columnIndex , rowIndex , align , paddingConfig , expand , childKey ); child : A game object columnIndex , rowIndex : Index of grid to add. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to height and width. childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. Proportion \u00b6 Set proportion of each column or row via gridSizer . setColumnProportion ( columnIndex , proportion ); gridSizer . setRowProportion ( rowIndex , proportion ); Layout children \u00b6 Arrange position of all children. gridSizer . layout (); Other properties \u00b6 See base sizer object .","title":"Grid sizer"},{"location":"ui-gridsizer/#introduction","text":"Layout children game objects in grids. Author: Rex Game object","title":"Introduction"},{"location":"ui-gridsizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-gridsizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-gridsizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-gridsizer/#add-grid-sizer-object","text":"var gridSizer = scene . rexUI . add . gridSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // name: '', // draggable: false }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // width: undefined, // height: undefined }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , column , row ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width : Minimum width. i.e. Width of this gridSizer will larger then this value. height : Minimum height. i.e. Hieght of this gridSizer will larger then this value. column : Amount of column grids. row : Amount of row grids. columnProportions , rowProportions : Proportion of each column/row. Number : Apply this number proportion to each column/row Number array : Apply proportion of column/row through elements of this number array.","title":"Add grid sizer object"},{"location":"ui-gridsizer/#custom-class","text":"Define class class MyGridSizer extends RexPlugins . UI . GridSizer { constructor ( scene , x , y , minWidth , minHeight , column , row ) { super ( scene , x , y , minWidth , minHeight , column , ro ); // ... } // ... } Create instance var gridSizer = new MyGridSizer ( scene , x , y , minWidth , minHeight , column , row );","title":"Custom class"},{"location":"ui-gridsizer/#add-background","text":"gridSizer . addBackground ( child );","title":"Add background"},{"location":"ui-gridsizer/#add-child","text":"Add a game obejct to grid sizer gridSizer . add ( child , columnIndex , rowIndex ); or gridSizer . add ( child , columnIndex , rowIndex , align , paddingConfig , expand , childKey ); child : A game object columnIndex , rowIndex : Index of grid to add. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to height and width. childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value.","title":"Add child"},{"location":"ui-gridsizer/#proportion","text":"Set proportion of each column or row via gridSizer . setColumnProportion ( columnIndex , proportion ); gridSizer . setRowProportion ( rowIndex , proportion );","title":"Proportion"},{"location":"ui-gridsizer/#layout-children","text":"Arrange position of all children. gridSizer . layout ();","title":"Layout children"},{"location":"ui-gridsizer/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-gridtable/","text":"Introduction \u00b6 A container with a grid table , slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add grid table object \u00b6 var gridTable = scene . rexUI . add . gridTable ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , table : { width : undefined , height : undefined , cellWidth : undefined , cellHeight : undefined , columns : 2 , mask : { padding : 0 }, interactive : true , reuseCellContainer : false , }, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , table : 0 , // table: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, createCellContainerCallback : function ( cell , cellContainer ) { var scene = cell . scene , width = cell . width , height = cell . height , item = cell . item , index = cell . index ; if ( cellContainer === null ) { // No reusable cell container, create a new one // cellContainer = scene.add.container(); } // Set child properties of cell container ... return cellContainer ; }, items : [], // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. Set width to undefined , and table.width is not undefined , will count width via table + slider. Set height to undefined , and table.height is not undefined , will count height via table + slider. scrollMode : Scroll grid table vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll grid table vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll grid table horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. table : Configuration of grid table core. table.width : Width of table, in pixels. Set to undefined to expand table width to fit this grid table object. table.height : Height of table, in pixels. Set to undefined to expand table height to fit this grid table object. table.cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . table.cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . table.columns : Columns count of each row. table.mask : A rectangle mask of cells table.mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. table.interactive : Set true to install touch events (tap/press/over/out/click). table.reuseCellContainer : Set true to reuse cell container when creating new cell container. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. createCellContainerCallback : Callback to return a container object of each visible cell. Properties of cell parameter cell.scene : Scene of this grid table object. cell.width : Width of this cell, in pixels. cell.height : Height of this cell, in pixels. cell.item : Item of this cell to display. cell.index : Index of this cell. Origin of returned cell container will be set to (0, 0) cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.table : A number: Space between table object and slider object. An object: Padding of table object. If scrollMode is 0 (vertical) : space.table.top , space.table.bottom : Top, bottom padding space of table object. space.table.right : Space between table object and slider object. If scrollMode is 1 (horizontal) : space.table.left , space.table.right : Left, right padding space of table object. space.table.bottom : Space between table object and slider object. space.header : Space between header and table. space.footer : Space between footer and table. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer items : Array of item data for each cell. name : Set name of this gridTable. Custom class \u00b6 Define class class MyGridTable extends RexPlugins . UI . GridTable { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var gridTable = new MyGridTable ( scene , config ); Layout children \u00b6 Arrange position of all elements. gridTable . layout (); Items \u00b6 Set gridTable . setItems ( items ); items : Array of item data for each cell. This method will update each visible cell of grid table. Clear all items gridTable . setItems (); Get var items = gridTable . items ; Scroll content \u00b6 Set gridTable . setChildOY ( oy ); or gridTable . childOY = oy ; Get var childOY = gridTable . childOY ; Top OY var topOY = gridTable . topChildOY ; Bottom OY var bottomOY = gridTable . bottomChildOY ; Scroll by percentage \u00b6 Set gridTable . setT ( t ); // t: 0~1 or gridTable . t = t ; Get var t = gridTable . t ; Scroll to top/bottom \u00b6 Scroll to top gridTable . scrollToTop (); Equal to gridTable.t = 0; Scroll to bottom gridTable . scrollToBottom (); Equal to gridTable.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state gridTable . setSliderEnable ( enabled ); or gridTable . sliderEnable = enabled ; Get enable state var enable = gridTable . sliderEnable ; Scroller Set enable state gridTable . setScrollerEnable ( enabled ); or gridTable . scrollerEnable = enabled ; Get enable state var enable = gridTable . scrollerEnable ; Refresh table cells \u00b6 table . refresh (); Other properties \u00b6 See base sizer object . Events \u00b6 Tap cell gridTable . on ( tapEventName , function ( cellContainer , cellIndex ) { // ... }, scope ); tapEventName : 'cell.1tap' , 'cell.2tap' , 'cell.3tap' , etc ... cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Press cell gridTable . on ( `cell.pressstart` , function ( cellContainer , cellIndex ) { // ... }, scope ); gridTable . on ( `cell.pressend` , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-over cell gridTable . on ( 'cell.over' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-out cell gridTable . on ( 'cell.out' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Click cell gridTable . on ( 'cell.click' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Get element \u00b6 Get element Background game object var background = gridTable . getElement ( 'background' ); Grid table var table = gridTable . getElement ( 'table' ); Slider Track var track = gridTable . getElement ( 'slider.track' ); Thumb var thumb = gridTable . getElement ( 'slider.thumb' ); Scroller var scroller = gridTable . getElement ( 'scroller' ); Get by name var gameObject = gridTable . getElement ( '#' + name );","title":"Grid table"},{"location":"ui-gridtable/#introduction","text":"A container with a grid table , slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-gridtable/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-gridtable/#usage","text":"Sample code","title":"Usage"},{"location":"ui-gridtable/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-gridtable/#add-grid-table-object","text":"var gridTable = scene . rexUI . add . gridTable ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , table : { width : undefined , height : undefined , cellWidth : undefined , cellHeight : undefined , columns : 2 , mask : { padding : 0 }, interactive : true , reuseCellContainer : false , }, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , table : 0 , // table: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, createCellContainerCallback : function ( cell , cellContainer ) { var scene = cell . scene , width = cell . width , height = cell . height , item = cell . item , index = cell . index ; if ( cellContainer === null ) { // No reusable cell container, create a new one // cellContainer = scene.add.container(); } // Set child properties of cell container ... return cellContainer ; }, items : [], // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. Set width to undefined , and table.width is not undefined , will count width via table + slider. Set height to undefined , and table.height is not undefined , will count height via table + slider. scrollMode : Scroll grid table vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll grid table vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll grid table horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. table : Configuration of grid table core. table.width : Width of table, in pixels. Set to undefined to expand table width to fit this grid table object. table.height : Height of table, in pixels. Set to undefined to expand table height to fit this grid table object. table.cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . table.cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . table.columns : Columns count of each row. table.mask : A rectangle mask of cells table.mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. table.interactive : Set true to install touch events (tap/press/over/out/click). table.reuseCellContainer : Set true to reuse cell container when creating new cell container. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. createCellContainerCallback : Callback to return a container object of each visible cell. Properties of cell parameter cell.scene : Scene of this grid table object. cell.width : Width of this cell, in pixels. cell.height : Height of this cell, in pixels. cell.item : Item of this cell to display. cell.index : Index of this cell. Origin of returned cell container will be set to (0, 0) cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.table : A number: Space between table object and slider object. An object: Padding of table object. If scrollMode is 0 (vertical) : space.table.top , space.table.bottom : Top, bottom padding space of table object. space.table.right : Space between table object and slider object. If scrollMode is 1 (horizontal) : space.table.left , space.table.right : Left, right padding space of table object. space.table.bottom : Space between table object and slider object. space.header : Space between header and table. space.footer : Space between footer and table. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer items : Array of item data for each cell. name : Set name of this gridTable.","title":"Add grid table object"},{"location":"ui-gridtable/#custom-class","text":"Define class class MyGridTable extends RexPlugins . UI . GridTable { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var gridTable = new MyGridTable ( scene , config );","title":"Custom class"},{"location":"ui-gridtable/#layout-children","text":"Arrange position of all elements. gridTable . layout ();","title":"Layout children"},{"location":"ui-gridtable/#items","text":"Set gridTable . setItems ( items ); items : Array of item data for each cell. This method will update each visible cell of grid table. Clear all items gridTable . setItems (); Get var items = gridTable . items ;","title":"Items"},{"location":"ui-gridtable/#scroll-content","text":"Set gridTable . setChildOY ( oy ); or gridTable . childOY = oy ; Get var childOY = gridTable . childOY ; Top OY var topOY = gridTable . topChildOY ; Bottom OY var bottomOY = gridTable . bottomChildOY ;","title":"Scroll content"},{"location":"ui-gridtable/#scroll-by-percentage","text":"Set gridTable . setT ( t ); // t: 0~1 or gridTable . t = t ; Get var t = gridTable . t ;","title":"Scroll by percentage"},{"location":"ui-gridtable/#scroll-to-topbottom","text":"Scroll to top gridTable . scrollToTop (); Equal to gridTable.t = 0; Scroll to bottom gridTable . scrollToBottom (); Equal to gridTable.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-gridtable/#enabledisable-scrolling","text":"Slider Set enable state gridTable . setSliderEnable ( enabled ); or gridTable . sliderEnable = enabled ; Get enable state var enable = gridTable . sliderEnable ; Scroller Set enable state gridTable . setScrollerEnable ( enabled ); or gridTable . scrollerEnable = enabled ; Get enable state var enable = gridTable . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-gridtable/#refresh-table-cells","text":"table . refresh ();","title":"Refresh table cells"},{"location":"ui-gridtable/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-gridtable/#events","text":"Tap cell gridTable . on ( tapEventName , function ( cellContainer , cellIndex ) { // ... }, scope ); tapEventName : 'cell.1tap' , 'cell.2tap' , 'cell.3tap' , etc ... cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Press cell gridTable . on ( `cell.pressstart` , function ( cellContainer , cellIndex ) { // ... }, scope ); gridTable . on ( `cell.pressend` , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-over cell gridTable . on ( 'cell.over' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-out cell gridTable . on ( 'cell.out' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Click cell gridTable . on ( 'cell.click' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell.","title":"Events"},{"location":"ui-gridtable/#get-element","text":"Get element Background game object var background = gridTable . getElement ( 'background' ); Grid table var table = gridTable . getElement ( 'table' ); Slider Track var track = gridTable . getElement ( 'slider.track' ); Thumb var thumb = gridTable . getElement ( 'slider.thumb' ); Scroller var scroller = gridTable . getElement ( 'scroller' ); Get by name var gameObject = gridTable . getElement ( '#' + name );","title":"Get element"},{"location":"ui-label/","text":"Introduction \u00b6 A container with an icon, text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add label object \u00b6 var label = scene . rexUI . add . label ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , expandTextWidth : false , expandTextHeight : false , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of label. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. text : Game object of text, optional. expandTextWidth : Set true to expand width of text object. expandTextHeight : Set true to expand height of text object. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this label. draggable : Set true to drag to-most sizer. Expand size of text \u00b6 Expand width/height of text when expandTextWidth / expandTextHeight is true To resize text object, text object should have resize method. For example class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); scene . add . existing ( this ); } resize ( width , height ) { this . setFixedSize ( width , height ); return this ; } } Or uses bbcode text object , or tag text object Custom class \u00b6 Define class class MyLabel extends RexPlugins . UI . Label { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var label = new MyLabel ( scene , config ); Layout children \u00b6 Arrange position of all elements. label . layout (); Get element \u00b6 Get element Background game object var background = label . getElement ( 'background' ); Icon game object var icon = label . getElement ( 'icon' ); Text game object var textObject = label . getElement ( 'text' ); Action icon game object var action = label . getElement ( 'action' ); Get by name var gameObject = label . getElement ( '#' + name ); Text \u00b6 Get text string var s = label . text ; Set text string label . setText ( s ); or label . text = s ; Other properties \u00b6 See sizer object , base sizer object .","title":"Label"},{"location":"ui-label/#introduction","text":"A container with an icon, text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-label/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-label/#usage","text":"Sample code","title":"Usage"},{"location":"ui-label/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-label/#add-label-object","text":"var label = scene . rexUI . add . label ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , expandTextWidth : false , expandTextHeight : false , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of label. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. text : Game object of text, optional. expandTextWidth : Set true to expand width of text object. expandTextHeight : Set true to expand height of text object. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this label. draggable : Set true to drag to-most sizer.","title":"Add label object"},{"location":"ui-label/#expand-size-of-text","text":"Expand width/height of text when expandTextWidth / expandTextHeight is true To resize text object, text object should have resize method. For example class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); scene . add . existing ( this ); } resize ( width , height ) { this . setFixedSize ( width , height ); return this ; } } Or uses bbcode text object , or tag text object","title":"Expand size of text"},{"location":"ui-label/#custom-class","text":"Define class class MyLabel extends RexPlugins . UI . Label { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var label = new MyLabel ( scene , config );","title":"Custom class"},{"location":"ui-label/#layout-children","text":"Arrange position of all elements. label . layout ();","title":"Layout children"},{"location":"ui-label/#get-element","text":"Get element Background game object var background = label . getElement ( 'background' ); Icon game object var icon = label . getElement ( 'icon' ); Text game object var textObject = label . getElement ( 'text' ); Action icon game object var action = label . getElement ( 'action' ); Get by name var gameObject = label . getElement ( '#' + name );","title":"Get element"},{"location":"ui-label/#text","text":"Get text string var s = label . text ; Set text string label . setText ( s ); or label . text = s ;","title":"Text"},{"location":"ui-label/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-menu/","text":"Introduction \u00b6 A container with buttons and sub-menu. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add menu object \u00b6 var menu = scene . rexUI . add . menu ({ // x: 0, // y: 0, // anchor: undefined, // orientation: 1, items : [], createBackgroundCallback : function ( items ) { var scene = items . scene ; // container = ... return container ; }, createBackgroundCallbackScope : undefined , createButtonCallback : function ( item , index , items ) { var scene = item . scene ; // var isFirstButton = (index === 0); // var isLastButton = (index === (items.length - 1)); // container = ... return container ; }, createButtonCallbackScope : undefined , easeIn : 0 , // easeIn: { // duration: 500, // ease: 'Cubic' // }, easeOut : 0 , // easeOut: { // duration: 100, // ease: 'Linear' // }, // expandEvent: 'button.click' name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . orientation : Main orientation of the menu, default is 1 (top to bottom) 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange buttons from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange buttons from top to bottom. items : Array of item data for each button. Each item has children : An array of items for sub-menu, optional. Other custom properties createBackgroundCallback : Callback to return container object of menu's bckground. Properties of items parameter items.scene : Scene of this menu object. createButtonCallback : Callback to return container object of each item. Properties of item parameter item.scene : Scene of this menu object. Other custom properties easeIn : Scale up size when extend menu. A number : Duration of ease, in milliseconds. An object : easeIn.duration : Duration of ease, in milliseconds. easeIn.ease : Ease function, default is 'Cubic' easeOut : Scale down size when extend menu. A number : Duration of ease, in milliseconds. An object : easeOut.duration : Duration of ease, in milliseconds. easeOut.ease : Ease function, default is 'Linear' expandEvent : Event name of expanding sub-menu. 'button.click' : Default value 'button.over' name : Set name of this menu. Custom class \u00b6 Define class class MyMenu extends RexPlugins . UI . Menu { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var menu = new MyMenu ( scene , config ); Collapse \u00b6 Collapse menu menu . collapse (); Collapse sub-menu menu . collapseSubMenu (); Layout children \u00b6 Arrange position of all children. This will be called when menu object created, user does not need call it again generally. menu . layout (); Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 Click button menu . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button menu . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button menu . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Menu"},{"location":"ui-menu/#introduction","text":"A container with buttons and sub-menu. Author: Rex Game object","title":"Introduction"},{"location":"ui-menu/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-menu/#usage","text":"Sample code","title":"Usage"},{"location":"ui-menu/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-menu/#add-menu-object","text":"var menu = scene . rexUI . add . menu ({ // x: 0, // y: 0, // anchor: undefined, // orientation: 1, items : [], createBackgroundCallback : function ( items ) { var scene = items . scene ; // container = ... return container ; }, createBackgroundCallbackScope : undefined , createButtonCallback : function ( item , index , items ) { var scene = item . scene ; // var isFirstButton = (index === 0); // var isLastButton = (index === (items.length - 1)); // container = ... return container ; }, createButtonCallbackScope : undefined , easeIn : 0 , // easeIn: { // duration: 500, // ease: 'Cubic' // }, easeOut : 0 , // easeOut: { // duration: 100, // ease: 'Linear' // }, // expandEvent: 'button.click' name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . orientation : Main orientation of the menu, default is 1 (top to bottom) 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange buttons from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange buttons from top to bottom. items : Array of item data for each button. Each item has children : An array of items for sub-menu, optional. Other custom properties createBackgroundCallback : Callback to return container object of menu's bckground. Properties of items parameter items.scene : Scene of this menu object. createButtonCallback : Callback to return container object of each item. Properties of item parameter item.scene : Scene of this menu object. Other custom properties easeIn : Scale up size when extend menu. A number : Duration of ease, in milliseconds. An object : easeIn.duration : Duration of ease, in milliseconds. easeIn.ease : Ease function, default is 'Cubic' easeOut : Scale down size when extend menu. A number : Duration of ease, in milliseconds. An object : easeOut.duration : Duration of ease, in milliseconds. easeOut.ease : Ease function, default is 'Linear' expandEvent : Event name of expanding sub-menu. 'button.click' : Default value 'button.over' name : Set name of this menu.","title":"Add menu object"},{"location":"ui-menu/#custom-class","text":"Define class class MyMenu extends RexPlugins . UI . Menu { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var menu = new MyMenu ( scene , config );","title":"Custom class"},{"location":"ui-menu/#collapse","text":"Collapse menu menu . collapse (); Collapse sub-menu menu . collapseSubMenu ();","title":"Collapse"},{"location":"ui-menu/#layout-children","text":"Arrange position of all children. This will be called when menu object created, user does not need call it again generally. menu . layout ();","title":"Layout children"},{"location":"ui-menu/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-menu/#events","text":"Click button menu . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button menu . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button menu . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-numberbar/","text":"Introduction \u00b6 A container with an icon, slider, text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add number bar object \u00b6 var numberBar = scene . rexUI . add . numberBar ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, background : backgroundGameObject , icon : iconGameObject , iconMask : false , slider : { background : sliderBackgroundGameObject , track : sliderTrackGameObject , indicator : sliderIndicatorGameObject , thumb : sliderThumbGameObject , input : 'none' , gap : undefined , } text : textGameObject , valuechangeCallback : function ( newValue , oldValue , numberBar ) { // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); } space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , slider : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of numberBar. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. slider : Slider game object which composed of slider.width : Fixed width of slider, optional. Width of slider will be extended if this value is not set. slider.background : Game object of slider background, optional. slider.track : Game object of slider track. slider.indicator : Game object of slider indicator, optional. slider.thumb : Game object of slider thumb, optional. slider.input : 'drag' : Control slider by dragging thumb game object. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Default setting. slider.gap : Snap a value to nearest grid slice, using rounding. undefined : Disable this feature. text : Game object of text, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.slider : Space between slider game object and text game object. valuechangeCallback : callback function when value changed. name : Set name of this numberBar. Custom class \u00b6 Define class class MyNumberBar extends RexPlugins . UI . NumberBar { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var numberBar = new MyNumberBar ( scene , config ); Layout children \u00b6 Arrange position of all elements. numberBar . layout (); Get element \u00b6 Get element Background game object var background = numberBar . getElement ( 'background' ); Icon game object var icon = numberBar . getElement ( 'icon' ); Slider game object Slider background var sliderBackground = numberBar . getElement ( 'slider.background' ); Slider track var sliderTrack = numberBar . getElement ( 'slider.track' ); Slider indicator var sliderIndicator = numberBar . getElement ( 'slider.indicator' ); Slider thumb var sliderThumb = numberBar . getElement ( 'slider.thumb' ); Text game object var icon = numberBar . getElement ( 'text' ); Get by name var gameObject = numberBar . getElement ( '#' + name ); Value \u00b6 Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1 Text \u00b6 Get text string var s = numberBar . text ; Set text string numberBar . setText ( s ); or numberBar . text = s ; Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 On value changed numberBar . on ( 'valuechange' , function ( newValue , oldValue , numberBar ){ // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); }, scope );","title":"Number bar"},{"location":"ui-numberbar/#introduction","text":"A container with an icon, slider, text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-numberbar/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-numberbar/#usage","text":"Sample code","title":"Usage"},{"location":"ui-numberbar/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-numberbar/#add-number-bar-object","text":"var numberBar = scene . rexUI . add . numberBar ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, background : backgroundGameObject , icon : iconGameObject , iconMask : false , slider : { background : sliderBackgroundGameObject , track : sliderTrackGameObject , indicator : sliderIndicatorGameObject , thumb : sliderThumbGameObject , input : 'none' , gap : undefined , } text : textGameObject , valuechangeCallback : function ( newValue , oldValue , numberBar ) { // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); } space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , slider : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of numberBar. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. slider : Slider game object which composed of slider.width : Fixed width of slider, optional. Width of slider will be extended if this value is not set. slider.background : Game object of slider background, optional. slider.track : Game object of slider track. slider.indicator : Game object of slider indicator, optional. slider.thumb : Game object of slider thumb, optional. slider.input : 'drag' : Control slider by dragging thumb game object. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Default setting. slider.gap : Snap a value to nearest grid slice, using rounding. undefined : Disable this feature. text : Game object of text, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.slider : Space between slider game object and text game object. valuechangeCallback : callback function when value changed. name : Set name of this numberBar.","title":"Add number bar object"},{"location":"ui-numberbar/#custom-class","text":"Define class class MyNumberBar extends RexPlugins . UI . NumberBar { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var numberBar = new MyNumberBar ( scene , config );","title":"Custom class"},{"location":"ui-numberbar/#layout-children","text":"Arrange position of all elements. numberBar . layout ();","title":"Layout children"},{"location":"ui-numberbar/#get-element","text":"Get element Background game object var background = numberBar . getElement ( 'background' ); Icon game object var icon = numberBar . getElement ( 'icon' ); Slider game object Slider background var sliderBackground = numberBar . getElement ( 'slider.background' ); Slider track var sliderTrack = numberBar . getElement ( 'slider.track' ); Slider indicator var sliderIndicator = numberBar . getElement ( 'slider.indicator' ); Slider thumb var sliderThumb = numberBar . getElement ( 'slider.thumb' ); Text game object var icon = numberBar . getElement ( 'text' ); Get by name var gameObject = numberBar . getElement ( '#' + name );","title":"Get element"},{"location":"ui-numberbar/#value","text":"Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1","title":"Value"},{"location":"ui-numberbar/#text","text":"Get text string var s = numberBar . text ; Set text string numberBar . setText ( s ); or numberBar . text = s ;","title":"Text"},{"location":"ui-numberbar/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-numberbar/#events","text":"On value changed numberBar . on ( 'valuechange' , function ( newValue , oldValue , numberBar ){ // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); }, scope );","title":"Events"},{"location":"ui-overview/","text":"List of ui plugins \u00b6 UI components \u00b6 Buttons : A container with a group of buttons. Dialog : A container with a title, content, buttons and background. Fix-width-sizer : Layout children game objects into lines. Grid-sizer : Layout children game objects in grids. Grid-table : A container with a grid table , slider, and scroller. Label : A container with an icon, text, and background. Menu : A container with buttons and sub-menu. Number-bar : A container with an icon, slider, text, and background. Pages : A container with pages, only current page is visible. Scroll-able panel : A container with a panel, slider, and scroller. Sizer : Layout children game objects. Slider : A container with a track, indicator, thumb and background. Tabs : A container with 4 groups of buttons around a center panel. TextArea : A container with a text, slider, and scroller. Textbox : A container with an icon, ( typing and paging ) text, and background. Toast : Show text message for a short while. Scroll-able table There are 2 kinds of scroll-able tables : Grid-table only creates visible objects. It is suitable for large table. Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table. Basic container \u00b6 ContainerLite : Control the position and angle of children game objects. var container = scene . rexUI . add . container ( x , y ); or class MyContainer extends RexPlugins . UI . Container { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... } Background objects \u00b6 Round-rectangle : Round rectangle shape. var shape = scene . rexUI . add . roundRectangle ( x , y , width , height , radius , fillColor ); or class MyRoundRectangle extends RexPlugins . UI . RoundRectangle { constructor ( scene , x , y , width , height , radius , fillColor , fillAlpha ) { super ( scene , x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... } Nine-patch : Stretchable imaage. var ninePatch = scene . rexUI . add . ninePatch ( x , y , width , height , key , columns , rows , config ); or class MyNinePatch extends RexPlugins . UI . NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... } Canvas objects \u00b6 Circle mask image : Load a texture, then apply a circle mask. var image = scene . rexUI . add . circleMaskImage ( x , y , key , frame ); // var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config); or class MyImage extends RexPlugins . UI . CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... } Chart : Draw chart on canvas . Colored text objects \u00b6 BBCode text : Drawing text with BBCode protocol. var txt = scene . rexUI . add . BBCodeText ( x , y , text , style ); or class MyText extends RexPlugins . UI . BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Tag text : Displays text with multi-color, font face, or font size with tags. var txt = scene . rexUI . add . tagText ( x , y , text , style ); or class MyText extends RexPlugins . UI . TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Behaviors of text \u00b6 Text editor : Create an input text object above a text object to edit string content. scene . rexUI . add . edit ( textObject , config ); // scene.rexUI.add.edit(textObject, config, onClose); Video objects \u00b6 Video DOM : Create a video dom to play video. var video = scene . rexUI . add . video ( x , y , width , height , config ); // var video = scene.rexUI.add.video(config); or class MyVideo extends RexPlugins . UI . Video { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Video canvas : Create a canvas to play video. var video = scene . rexUI . add . videoCanvas ( x , y , width , height , config ); // var video = scene.rexUI.add.videoCanvas(config); or class MyVideo extends RexPlugins . UI . VideoCanvas { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Youtube player : Play youtube video on iframe. var video = scene . rexUI . add . youtubePlayer ( x , y , width , height , config ); // var video = scene.rexUI.add.youtubePlayer(config); or class MyVideo extends RexPlugins . UI . YoutubePlayer { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Gestures \u00b6 Tap : Get tap/multi-taps events of a game object. var tap = scene . rexUI . add . tap ( gameObject , config ); or var tap = new RexPlugins . UI . Tap ( gameObject , config ); Press : Get press events of a game object. var press = scene . rexUI . add . press ( gameObject , config ); or var press = new RexPlugins . UI . Press ( gameObject , config ); Swipe : Get swipe events of a game object. var swipe = scene . rexUI . add . swipe ( gameObject , config ); or var swipe = new RexPlugins . UI . Swipe ( gameObject , config ); Pan : Get pan events of a game object. var pan = scene . rexUI . add . pan ( gameObject , config ); or var pan = new RexPlugins . UI . Pan ( gameObject , config ); Pinch : Get scale factor from 2 dragging touch pointers. var pinch = scene . rexUI . add . pinch ( config ); or var pinch = new RexPlugins . UI . Pinch ( config ); Rotste : Get spin angle from 2 dragging touch pointers. var rotate = scene . rexUI . add . rotate ( config ); or var rotate = new RexPlugins . UI . Rotate ( config ); Behaviors \u00b6 Flip : Flip game object to another face by scaling width/height. var flip = scene . rexUI . add . flip ( gameObject , config ); or var flip = new RexPlugins . UI . Flip ( gameObject , config ); Helper methods \u00b6 Get parent \u00b6 Get parent sizer var parentSizer = scene . rexUI . getParentSizer ( gameObject ); gameObject : Any game object added to sizer. Get topmost sizer var topmostSizer = scene . rexUI . getTopmostSizer ( gameObject ); gameObject : Any game object added to sizer. Show/hide \u00b6 Show scene . rexUI . show ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Hide scene . rexUI . hide ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Is shown var isShown = scene . rexUI . isShown ( gameObject ); Is pointer in bounds \u00b6 var isInBounds = scene . rexUI . isInTouching ( gameObject ); // var isInBounds = scene.rexUI.isInTouching(gameObject, pointer); Demos \u00b6 Dialog Yes/No Choice Pop-up Edit Menu Text-box Text-area Number bar Grid table Tabs Tabs-tables Scroll-able panel Pages Fix-width sizer Chart Video Anchor Round-rectangle","title":"Overview"},{"location":"ui-overview/#list-of-ui-plugins","text":"","title":"List of ui plugins"},{"location":"ui-overview/#ui-components","text":"Buttons : A container with a group of buttons. Dialog : A container with a title, content, buttons and background. Fix-width-sizer : Layout children game objects into lines. Grid-sizer : Layout children game objects in grids. Grid-table : A container with a grid table , slider, and scroller. Label : A container with an icon, text, and background. Menu : A container with buttons and sub-menu. Number-bar : A container with an icon, slider, text, and background. Pages : A container with pages, only current page is visible. Scroll-able panel : A container with a panel, slider, and scroller. Sizer : Layout children game objects. Slider : A container with a track, indicator, thumb and background. Tabs : A container with 4 groups of buttons around a center panel. TextArea : A container with a text, slider, and scroller. Textbox : A container with an icon, ( typing and paging ) text, and background. Toast : Show text message for a short while. Scroll-able table There are 2 kinds of scroll-able tables : Grid-table only creates visible objects. It is suitable for large table. Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table.","title":"UI components"},{"location":"ui-overview/#basic-container","text":"ContainerLite : Control the position and angle of children game objects. var container = scene . rexUI . add . container ( x , y ); or class MyContainer extends RexPlugins . UI . Container { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... }","title":"Basic container"},{"location":"ui-overview/#background-objects","text":"Round-rectangle : Round rectangle shape. var shape = scene . rexUI . add . roundRectangle ( x , y , width , height , radius , fillColor ); or class MyRoundRectangle extends RexPlugins . UI . RoundRectangle { constructor ( scene , x , y , width , height , radius , fillColor , fillAlpha ) { super ( scene , x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... } Nine-patch : Stretchable imaage. var ninePatch = scene . rexUI . add . ninePatch ( x , y , width , height , key , columns , rows , config ); or class MyNinePatch extends RexPlugins . UI . NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... }","title":"Background objects"},{"location":"ui-overview/#canvas-objects","text":"Circle mask image : Load a texture, then apply a circle mask. var image = scene . rexUI . add . circleMaskImage ( x , y , key , frame ); // var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config); or class MyImage extends RexPlugins . UI . CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... } Chart : Draw chart on canvas .","title":"Canvas objects"},{"location":"ui-overview/#colored-text-objects","text":"BBCode text : Drawing text with BBCode protocol. var txt = scene . rexUI . add . BBCodeText ( x , y , text , style ); or class MyText extends RexPlugins . UI . BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Tag text : Displays text with multi-color, font face, or font size with tags. var txt = scene . rexUI . add . tagText ( x , y , text , style ); or class MyText extends RexPlugins . UI . TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... }","title":"Colored text objects"},{"location":"ui-overview/#behaviors-of-text","text":"Text editor : Create an input text object above a text object to edit string content. scene . rexUI . add . edit ( textObject , config ); // scene.rexUI.add.edit(textObject, config, onClose);","title":"Behaviors of text"},{"location":"ui-overview/#video-objects","text":"Video DOM : Create a video dom to play video. var video = scene . rexUI . add . video ( x , y , width , height , config ); // var video = scene.rexUI.add.video(config); or class MyVideo extends RexPlugins . UI . Video { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Video canvas : Create a canvas to play video. var video = scene . rexUI . add . videoCanvas ( x , y , width , height , config ); // var video = scene.rexUI.add.videoCanvas(config); or class MyVideo extends RexPlugins . UI . VideoCanvas { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Youtube player : Play youtube video on iframe. var video = scene . rexUI . add . youtubePlayer ( x , y , width , height , config ); // var video = scene.rexUI.add.youtubePlayer(config); or class MyVideo extends RexPlugins . UI . YoutubePlayer { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... }","title":"Video objects"},{"location":"ui-overview/#gestures","text":"Tap : Get tap/multi-taps events of a game object. var tap = scene . rexUI . add . tap ( gameObject , config ); or var tap = new RexPlugins . UI . Tap ( gameObject , config ); Press : Get press events of a game object. var press = scene . rexUI . add . press ( gameObject , config ); or var press = new RexPlugins . UI . Press ( gameObject , config ); Swipe : Get swipe events of a game object. var swipe = scene . rexUI . add . swipe ( gameObject , config ); or var swipe = new RexPlugins . UI . Swipe ( gameObject , config ); Pan : Get pan events of a game object. var pan = scene . rexUI . add . pan ( gameObject , config ); or var pan = new RexPlugins . UI . Pan ( gameObject , config ); Pinch : Get scale factor from 2 dragging touch pointers. var pinch = scene . rexUI . add . pinch ( config ); or var pinch = new RexPlugins . UI . Pinch ( config ); Rotste : Get spin angle from 2 dragging touch pointers. var rotate = scene . rexUI . add . rotate ( config ); or var rotate = new RexPlugins . UI . Rotate ( config );","title":"Gestures"},{"location":"ui-overview/#behaviors","text":"Flip : Flip game object to another face by scaling width/height. var flip = scene . rexUI . add . flip ( gameObject , config ); or var flip = new RexPlugins . UI . Flip ( gameObject , config );","title":"Behaviors"},{"location":"ui-overview/#helper-methods","text":"","title":"Helper methods"},{"location":"ui-overview/#get-parent","text":"Get parent sizer var parentSizer = scene . rexUI . getParentSizer ( gameObject ); gameObject : Any game object added to sizer. Get topmost sizer var topmostSizer = scene . rexUI . getTopmostSizer ( gameObject ); gameObject : Any game object added to sizer.","title":"Get parent"},{"location":"ui-overview/#showhide","text":"Show scene . rexUI . show ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Hide scene . rexUI . hide ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Is shown var isShown = scene . rexUI . isShown ( gameObject );","title":"Show/hide"},{"location":"ui-overview/#is-pointer-in-bounds","text":"var isInBounds = scene . rexUI . isInTouching ( gameObject ); // var isInBounds = scene.rexUI.isInTouching(gameObject, pointer);","title":"Is pointer in bounds"},{"location":"ui-overview/#demos","text":"Dialog Yes/No Choice Pop-up Edit Menu Text-box Text-area Number bar Grid table Tabs Tabs-tables Scroll-able panel Pages Fix-width sizer Chart Video Anchor Round-rectangle","title":"Demos"},{"location":"ui-pages/","text":"Introduction \u00b6 A container with pages, only current page is visible. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add pages object \u00b6 var pages = scene . rexUI . add . pages ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. name : Set name of this pages. Custom class \u00b6 Define class class MyPages extends RexPlugins . UI . Pages { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var pages = new MyPages ( scene , config ); Add background \u00b6 gridSizer . addBackground ( child ); Add page \u00b6 pages . addPage ( child , key , align , paddingConfig , expand ); child : A game object. key : Unique name of this page. align : 'left-top' , or Phaser.Display.Align.TOP_LEFT : Align game object at left-top. Default value. 'left-center' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'left-bottom' , or Phaser.Display.Align.LEFT_BOTTOM : Align game object at left-bottom. 'center-top' , or Phaser.Display.Align.TOP_CENTER : Align game object at center-top. 'center-center' , or Phaser.Display.Align.CENTER : Align game object at center-center. 'center-bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at center-bottom. 'right-top' , or Phaser.Display.Align.TOP_RIGHT : Align game object at right-top. 'right-center' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'right-bottom' , or Phaser.Display.Align.RIGHT_BOTTOM : Align game object at right-bottom. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to expand width and height. Swap to page \u00b6 pages . swapPage ( key ); key : Unique name of this page. Note This method will run pages.layout() to arrange position of current page. Page name \u00b6 Current page name var pageName = pages . currentKey ; Previous page name var pageName = pages . previousKey ; Name of all pages var names = pages . keys ; Page object \u00b6 Get page object var pageObject = pages . getPage ( key ); pageObject : A game object or null . Current page object var pageObject = pages . currentPage ; Previous page object var pageObject = pages . previousPage ; Other properties \u00b6 See base sizer object . Events \u00b6 Set page invisible, triggered when page is swapped out. pages . on ( 'pageinvisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object Set page visible, triggered when page is shown. pages . on ( 'pagevisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object","title":"Pages"},{"location":"ui-pages/#introduction","text":"A container with pages, only current page is visible. Author: Rex Game object","title":"Introduction"},{"location":"ui-pages/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-pages/#usage","text":"Sample code","title":"Usage"},{"location":"ui-pages/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-pages/#add-pages-object","text":"var pages = scene . rexUI . add . pages ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. name : Set name of this pages.","title":"Add pages object"},{"location":"ui-pages/#custom-class","text":"Define class class MyPages extends RexPlugins . UI . Pages { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var pages = new MyPages ( scene , config );","title":"Custom class"},{"location":"ui-pages/#add-background","text":"gridSizer . addBackground ( child );","title":"Add background"},{"location":"ui-pages/#add-page","text":"pages . addPage ( child , key , align , paddingConfig , expand ); child : A game object. key : Unique name of this page. align : 'left-top' , or Phaser.Display.Align.TOP_LEFT : Align game object at left-top. Default value. 'left-center' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'left-bottom' , or Phaser.Display.Align.LEFT_BOTTOM : Align game object at left-bottom. 'center-top' , or Phaser.Display.Align.TOP_CENTER : Align game object at center-top. 'center-center' , or Phaser.Display.Align.CENTER : Align game object at center-center. 'center-bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at center-bottom. 'right-top' , or Phaser.Display.Align.TOP_RIGHT : Align game object at right-top. 'right-center' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'right-bottom' , or Phaser.Display.Align.RIGHT_BOTTOM : Align game object at right-bottom. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to expand width and height.","title":"Add page"},{"location":"ui-pages/#swap-to-page","text":"pages . swapPage ( key ); key : Unique name of this page. Note This method will run pages.layout() to arrange position of current page.","title":"Swap to page"},{"location":"ui-pages/#page-name","text":"Current page name var pageName = pages . currentKey ; Previous page name var pageName = pages . previousKey ; Name of all pages var names = pages . keys ;","title":"Page name"},{"location":"ui-pages/#page-object","text":"Get page object var pageObject = pages . getPage ( key ); pageObject : A game object or null . Current page object var pageObject = pages . currentPage ; Previous page object var pageObject = pages . previousPage ;","title":"Page object"},{"location":"ui-pages/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-pages/#events","text":"Set page invisible, triggered when page is swapped out. pages . on ( 'pageinvisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object Set page visible, triggered when page is shown. pages . on ( 'pagevisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object","title":"Events"},{"location":"ui-scrollablepanel/","text":"Introduction \u00b6 A container with a panel, slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add scroll-able panel object \u00b6 var scrollablePanel = scene . rexUI . add . scrollablePanel ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , panel : { child : panelGameObject , mask : { padding : 0 } }. slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , panel : 0 , // panel: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. scrollMode : Scroll panel vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll panel vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll panel horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel. panel : Configuration of panel game object. panel.child : Panel game object. panel.mask : Configuration of panel's mask. Set panel.mask to false to disable masking. panel.mask.padding : Extend mask with padding. Default value is 0 . slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.panel : A number: Space between panel object and slider object. An object: Padding of panel object. If scrollMode is 0 (vertical) : space.panel.top , space.panel.bottom : Top, bottom padding space of panel object. space.panel.right : Space between panel object and slider object. If scrollMode is 1 (horizontal) : space.panel.left , space.panel.right : Left, right padding space of panel object. space.panel.bottom : Space between panel object and slider object. space.header : Space between header and panel. space.footer : Space between footer and panel. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer name : Set name of this panel. Custom class \u00b6 Define class class MyPanel extends RexPlugins . UI . ScrollablePanel { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var scrollablePanel = new MyPanel ( scene , config ); Layout children \u00b6 Arrange position of all elements. scrollablePanel . layout (); Scroll content \u00b6 Set scrollablePanel . setChildOY ( oy ); or scrollablePanel . childOY = oy ; Get var childOY = scrollablePanel . childOY ; Scroll by percentage \u00b6 Set scrollablePanel . setT ( t ); // t: 0~1 or scrollablePanel . t = t ; Get var t = scrollablePanel . t ; Top OY var topOY = scrollablePanel . topChildOY ; Bottom OY var bottomOY = scrollablePanel . bottomChildOY ; Scroll to top/bottom \u00b6 Scroll to top scrollablePanel . scrollToTop (); Equal to scrollablePanel.t = 0; Scroll to bottom scrollablePanel . scrollToBottom (); Equal to scrollablePanel.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state scrollablePanel . setSliderEnable ( enabled ); or scrollablePanel . sliderEnable = enabled ; Get enable state var enable = scrollablePanel . sliderEnable ; Scroller Set enable state scrollablePanel . setScrollerEnable ( enabled ); or scrollablePanel . scrollerEnable = enabled ; Get enable state var enable = scrollablePanel . scrollerEnable ; Other properties \u00b6 See sizer object , base sizer object . Get element \u00b6 Get element Background game object var background = scrollablePanel . getElement ( 'background' ); Panel game object var panel = scrollablePanel . getElement ( 'panel' ); Slider Track var track = scrollablePanel . getElement ( 'slider.track' ); Thumb var thumb = scrollablePanel . getElement ( 'slider.thumb' ); Scroller var scroller = scrollablePanel . getElement ( 'scroller' ); Get by name var gameObject = scrollablePanel . getElement ( '#' + name );","title":"Scroll-able panel"},{"location":"ui-scrollablepanel/#introduction","text":"A container with a panel, slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-scrollablepanel/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-scrollablepanel/#usage","text":"Sample code","title":"Usage"},{"location":"ui-scrollablepanel/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-scrollablepanel/#add-scroll-able-panel-object","text":"var scrollablePanel = scene . rexUI . add . scrollablePanel ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , panel : { child : panelGameObject , mask : { padding : 0 } }. slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , panel : 0 , // panel: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. scrollMode : Scroll panel vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll panel vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll panel horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel. panel : Configuration of panel game object. panel.child : Panel game object. panel.mask : Configuration of panel's mask. Set panel.mask to false to disable masking. panel.mask.padding : Extend mask with padding. Default value is 0 . slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.panel : A number: Space between panel object and slider object. An object: Padding of panel object. If scrollMode is 0 (vertical) : space.panel.top , space.panel.bottom : Top, bottom padding space of panel object. space.panel.right : Space between panel object and slider object. If scrollMode is 1 (horizontal) : space.panel.left , space.panel.right : Left, right padding space of panel object. space.panel.bottom : Space between panel object and slider object. space.header : Space between header and panel. space.footer : Space between footer and panel. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer name : Set name of this panel.","title":"Add scroll-able panel object"},{"location":"ui-scrollablepanel/#custom-class","text":"Define class class MyPanel extends RexPlugins . UI . ScrollablePanel { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var scrollablePanel = new MyPanel ( scene , config );","title":"Custom class"},{"location":"ui-scrollablepanel/#layout-children","text":"Arrange position of all elements. scrollablePanel . layout ();","title":"Layout children"},{"location":"ui-scrollablepanel/#scroll-content","text":"Set scrollablePanel . setChildOY ( oy ); or scrollablePanel . childOY = oy ; Get var childOY = scrollablePanel . childOY ;","title":"Scroll content"},{"location":"ui-scrollablepanel/#scroll-by-percentage","text":"Set scrollablePanel . setT ( t ); // t: 0~1 or scrollablePanel . t = t ; Get var t = scrollablePanel . t ; Top OY var topOY = scrollablePanel . topChildOY ; Bottom OY var bottomOY = scrollablePanel . bottomChildOY ;","title":"Scroll by percentage"},{"location":"ui-scrollablepanel/#scroll-to-topbottom","text":"Scroll to top scrollablePanel . scrollToTop (); Equal to scrollablePanel.t = 0; Scroll to bottom scrollablePanel . scrollToBottom (); Equal to scrollablePanel.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-scrollablepanel/#enabledisable-scrolling","text":"Slider Set enable state scrollablePanel . setSliderEnable ( enabled ); or scrollablePanel . sliderEnable = enabled ; Get enable state var enable = scrollablePanel . sliderEnable ; Scroller Set enable state scrollablePanel . setScrollerEnable ( enabled ); or scrollablePanel . scrollerEnable = enabled ; Get enable state var enable = scrollablePanel . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-scrollablepanel/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-scrollablepanel/#get-element","text":"Get element Background game object var background = scrollablePanel . getElement ( 'background' ); Panel game object var panel = scrollablePanel . getElement ( 'panel' ); Slider Track var track = scrollablePanel . getElement ( 'slider.track' ); Thumb var thumb = scrollablePanel . getElement ( 'slider.thumb' ); Scroller var scroller = scrollablePanel . getElement ( 'scroller' ); Get by name var gameObject = scrollablePanel . getElement ( '#' + name );","title":"Get element"},{"location":"ui-sizer/","text":"Introduction \u00b6 Layout children game objects. It is inspired from wxSizer . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add sizer object \u00b6 var sizer = scene . rexUI . add . sizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , }); or var sizer = scene . rexUI . add . sizer ( x , y , { orientation : 0 , // width: undefined, // height: undefined, // anchor: undefined, }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , { orientation : 0 , // anchor: undefined }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , orientation , { // anchor: undefined }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. Custom class \u00b6 Define class class MySizer extends RexPlugins . UI . Sizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation ); Add background \u00b6 sizer . addBackground ( child ); Add child \u00b6 Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , proportion , align , paddingConfig , expand , childKey ); child : A game object. proportion : 0 , or 'min' : Place next game object closely. Default value. > 0 : Stretch game object via proportion value. null : Don't arrange this child. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to Expand height when orientation is 0 ( left-to-right ), or Expand width when orientation is 1 ( top-to-bottom ) childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. Add space \u00b6 Add a stretchable space. sizer . addSpace (); // sizer.addSpace(proportion); Layout children \u00b6 Arrange position of all children. sizer . layout (); Remove child \u00b6 Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild ); Other properties \u00b6 See base sizer object .","title":"Sizer"},{"location":"ui-sizer/#introduction","text":"Layout children game objects. It is inspired from wxSizer . Author: Rex Game object","title":"Introduction"},{"location":"ui-sizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-sizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-sizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-sizer/#add-sizer-object","text":"var sizer = scene . rexUI . add . sizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , }); or var sizer = scene . rexUI . add . sizer ( x , y , { orientation : 0 , // width: undefined, // height: undefined, // anchor: undefined, }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , { orientation : 0 , // anchor: undefined }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , orientation , { // anchor: undefined }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom.","title":"Add sizer object"},{"location":"ui-sizer/#custom-class","text":"Define class class MySizer extends RexPlugins . UI . Sizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation );","title":"Custom class"},{"location":"ui-sizer/#add-background","text":"sizer . addBackground ( child );","title":"Add background"},{"location":"ui-sizer/#add-child","text":"Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , proportion , align , paddingConfig , expand , childKey ); child : A game object. proportion : 0 , or 'min' : Place next game object closely. Default value. > 0 : Stretch game object via proportion value. null : Don't arrange this child. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to Expand height when orientation is 0 ( left-to-right ), or Expand width when orientation is 1 ( top-to-bottom ) childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value.","title":"Add child"},{"location":"ui-sizer/#add-space","text":"Add a stretchable space. sizer . addSpace (); // sizer.addSpace(proportion);","title":"Add space"},{"location":"ui-sizer/#layout-children","text":"Arrange position of all children. sizer . layout ();","title":"Layout children"},{"location":"ui-sizer/#remove-child","text":"Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild );","title":"Remove child"},{"location":"ui-sizer/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-slider/","text":"Introduction \u00b6 A container with a track, indicator, thumb and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add slider object \u00b6 var slider = scene . rexUI . add . slider ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , track : trackGameObject , indicator : indicatorGameObject , thumb : thumbGameObject , input : 'drag' , value : 0 , gap : undefined , valuechangeCallback : function ( newValue , oldValue , slider ) { }, space : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, enable : true , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Horizontal slider. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Vertical slider. background : Game object of background, optional. This background game object will be resized to fit the size of slider. track : Game object of track, optional. indicator : Game object of indicator, optional. thumb : Game object of thumb, optional. input : 'drag' , or 0 : Control slider by dragging thumb game object. Default setting. 'click' , or 1 : Control slider by touching track game object. 'none' , or -1 : Disable sider controlling. value : Initial value (0 ~ 1). gap : Snap a value to nearest grid slice, using rounding. undefined : Disalbe this feature. valuechangeCallback : callback function when value changed. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. enable : Set false to disable controlling. name : Set name of this slider. Custom class \u00b6 Define class class MySlider extends RexPlugins . UI . Slider { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var slider = new MySlider ( scene , config ); Layout children \u00b6 Arrange position of all elements. slider . layout (); Get element \u00b6 Get element Background game object var background = slider . getElement ( 'background' ); Track game object var track = slider . getElement ( 'track' ); Indicator game object var track = slider . getElement ( 'indicator' ); Thumb track game object var action = slider . getElement ( 'thumb' ); Get by name var gameObject = slider . getElement ( '#' + name ); Value \u00b6 Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1 Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 On value changed slider . on ( 'valuechange' , function ( newValue , oldValue , slider ){ // }, scope );","title":"Slider"},{"location":"ui-slider/#introduction","text":"A container with a track, indicator, thumb and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-slider/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-slider/#usage","text":"Sample code","title":"Usage"},{"location":"ui-slider/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-slider/#add-slider-object","text":"var slider = scene . rexUI . add . slider ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , track : trackGameObject , indicator : indicatorGameObject , thumb : thumbGameObject , input : 'drag' , value : 0 , gap : undefined , valuechangeCallback : function ( newValue , oldValue , slider ) { }, space : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, enable : true , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Horizontal slider. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Vertical slider. background : Game object of background, optional. This background game object will be resized to fit the size of slider. track : Game object of track, optional. indicator : Game object of indicator, optional. thumb : Game object of thumb, optional. input : 'drag' , or 0 : Control slider by dragging thumb game object. Default setting. 'click' , or 1 : Control slider by touching track game object. 'none' , or -1 : Disable sider controlling. value : Initial value (0 ~ 1). gap : Snap a value to nearest grid slice, using rounding. undefined : Disalbe this feature. valuechangeCallback : callback function when value changed. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. enable : Set false to disable controlling. name : Set name of this slider.","title":"Add slider object"},{"location":"ui-slider/#custom-class","text":"Define class class MySlider extends RexPlugins . UI . Slider { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var slider = new MySlider ( scene , config );","title":"Custom class"},{"location":"ui-slider/#layout-children","text":"Arrange position of all elements. slider . layout ();","title":"Layout children"},{"location":"ui-slider/#get-element","text":"Get element Background game object var background = slider . getElement ( 'background' ); Track game object var track = slider . getElement ( 'track' ); Indicator game object var track = slider . getElement ( 'indicator' ); Thumb track game object var action = slider . getElement ( 'thumb' ); Get by name var gameObject = slider . getElement ( '#' + name );","title":"Get element"},{"location":"ui-slider/#value","text":"Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1","title":"Value"},{"location":"ui-slider/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-slider/#events","text":"On value changed slider . on ( 'valuechange' , function ( newValue , oldValue , slider ){ // }, scope );","title":"Events"},{"location":"ui-tabs/","text":"Introduction \u00b6 A container with 4 groups of buttons around a center panel. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add Tabs object \u00b6 var tabs = scene . rexUI . add . tabs ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , panel : panelGameObject , leftButtons : [ buttonGameObject , buttonGameObject , // ... ], rightButtons : [ buttonGameObject , buttonGameObject , // ... ], topButtons : [ buttonGameObject , buttonGameObject , // ... ], bottomButtons : [ buttonGameObject , buttonGameObject , // ... ], space : { left : 0 , right : 0 , top : 0 , bottom : 0 , leftButtonsOffset : 0 , rightButtonsOffset : 0 , topButtonsOffset : 0 , bottomButtonsOffset : 0 , leftButton : 0 , rightButton : 0 , topButton : 0 , bottomButton : 0 }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. panel : Game object of center panel. leftButtons , rightButtons , topButtons , bottomButtons : Array of button game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.leftButtonsOffset , space.rightButtonsOffset : Top offset of buttons group. space.topButtonsOffset , space.bottomButtonsOffset : Left offset of buttons group. space.leftButton , space.rightButton , space.topButton , space.bottomButton : Space between 2 button game objects. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this tabs. Custom class \u00b6 Define class class MyTabs extends RexPlugins . UI . Tabs { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var tabs = new MyTabs ( scene , config ); Layout children \u00b6 Arrange position of all elements. tabs . layout (); Other properties \u00b6 See grid sizer object , base-sizer object . Events \u00b6 Click button tabs . on ( 'button.click' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-over button tabs . on ( 'button.over' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-out button tabs . on ( 'button.out' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Emit button click event \u00b6 Emit button click event in a given group tabs . emitButtonClick ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Emit left/right/top/bottom button click event tabs . emitLeftButtonClick ( index ); tabs . emitRightButtonClick ( index ); tabs . emitTopButtonClick ( index ); tabs . emitBottomButtonClick ( index ); index : A number index, or a button game object. Get element \u00b6 Get element Background game object var background = tabs . getElement ( 'background' ); Panel game object var panel = tabs . getElement ( 'panel' ); Buttons Left button game objects var bottons = tabs . getElement ( 'leftButtons' ); or var botton = tabs . getLeftButton ( index ); or var bottons = tabs . getElement ( 'leftButtons[0]' ); First button of left buttons. Right button game objects var bottons = tabs . getElement ( 'rightButtons' ); or var botton = tabs . getRightButton ( index ); or var bottons = tabs . getElement ( 'rightButtons[0]' ); First button of right buttons. Top button game objects var bottons = tabs . getElement ( 'topButtons' ); or var botton = tabs . getTopButton ( index ); or var bottons = tabs . getElement ( 'topButtons[0]' ); First button of top buttons. Bottom button game objects var bottons = tabs . getElement ( 'bottomButtons' ); or var botton = tabs . getBottomButton ( index ); or var bottons = tabs . getElement ( 'bottomButtons[0]' ); First button of bottom buttons. Get by name var gameObject = tabs . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call tabs.layout() , or topSizer.layout() after show/hide any button. Show button in a group tabs . showButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Show left/right/top/bottom button tabs . showLeftButton ( index ); tabs . showRightButton ( index ); tabs . showTopButton ( index ); tabs . showBottomButton ( index ); index : A number index, or a button game object. Hide button in a group tabs . hideButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Hide left/right/top/bottom button. tabs . hideLeftButton ( index ); tabs . hideRightButton ( index ); tabs . hideTopButton ( index ); tabs . hideBottomButton ( index ); index : A number index, or a button game object. For each button \u00b6 tabs . forEachLeftButton ( callback , scope ); tabs . forEachRightButton ( callback , scope ); tabs . forEachTopButton ( callback , scope ); tabs . forEachBottomButton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Tabs"},{"location":"ui-tabs/#introduction","text":"A container with 4 groups of buttons around a center panel. Author: Rex Game object","title":"Introduction"},{"location":"ui-tabs/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-tabs/#usage","text":"Sample code","title":"Usage"},{"location":"ui-tabs/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-tabs/#add-tabs-object","text":"var tabs = scene . rexUI . add . tabs ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , panel : panelGameObject , leftButtons : [ buttonGameObject , buttonGameObject , // ... ], rightButtons : [ buttonGameObject , buttonGameObject , // ... ], topButtons : [ buttonGameObject , buttonGameObject , // ... ], bottomButtons : [ buttonGameObject , buttonGameObject , // ... ], space : { left : 0 , right : 0 , top : 0 , bottom : 0 , leftButtonsOffset : 0 , rightButtonsOffset : 0 , topButtonsOffset : 0 , bottomButtonsOffset : 0 , leftButton : 0 , rightButton : 0 , topButton : 0 , bottomButton : 0 }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. panel : Game object of center panel. leftButtons , rightButtons , topButtons , bottomButtons : Array of button game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.leftButtonsOffset , space.rightButtonsOffset : Top offset of buttons group. space.topButtonsOffset , space.bottomButtonsOffset : Left offset of buttons group. space.leftButton , space.rightButton , space.topButton , space.bottomButton : Space between 2 button game objects. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this tabs.","title":"Add Tabs object"},{"location":"ui-tabs/#custom-class","text":"Define class class MyTabs extends RexPlugins . UI . Tabs { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var tabs = new MyTabs ( scene , config );","title":"Custom class"},{"location":"ui-tabs/#layout-children","text":"Arrange position of all elements. tabs . layout ();","title":"Layout children"},{"location":"ui-tabs/#other-properties","text":"See grid sizer object , base-sizer object .","title":"Other properties"},{"location":"ui-tabs/#events","text":"Click button tabs . on ( 'button.click' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-over button tabs . on ( 'button.over' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-out button tabs . on ( 'button.out' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object.","title":"Events"},{"location":"ui-tabs/#emit-button-click-event","text":"Emit button click event in a given group tabs . emitButtonClick ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Emit left/right/top/bottom button click event tabs . emitLeftButtonClick ( index ); tabs . emitRightButtonClick ( index ); tabs . emitTopButtonClick ( index ); tabs . emitBottomButtonClick ( index ); index : A number index, or a button game object.","title":"Emit button click event"},{"location":"ui-tabs/#get-element","text":"Get element Background game object var background = tabs . getElement ( 'background' ); Panel game object var panel = tabs . getElement ( 'panel' ); Buttons Left button game objects var bottons = tabs . getElement ( 'leftButtons' ); or var botton = tabs . getLeftButton ( index ); or var bottons = tabs . getElement ( 'leftButtons[0]' ); First button of left buttons. Right button game objects var bottons = tabs . getElement ( 'rightButtons' ); or var botton = tabs . getRightButton ( index ); or var bottons = tabs . getElement ( 'rightButtons[0]' ); First button of right buttons. Top button game objects var bottons = tabs . getElement ( 'topButtons' ); or var botton = tabs . getTopButton ( index ); or var bottons = tabs . getElement ( 'topButtons[0]' ); First button of top buttons. Bottom button game objects var bottons = tabs . getElement ( 'bottomButtons' ); or var botton = tabs . getBottomButton ( index ); or var bottons = tabs . getElement ( 'bottomButtons[0]' ); First button of bottom buttons. Get by name var gameObject = tabs . getElement ( '#' + name );","title":"Get element"},{"location":"ui-tabs/#showhide-button","text":"Hidden elements won't be counted when layouting. Call tabs.layout() , or topSizer.layout() after show/hide any button. Show button in a group tabs . showButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Show left/right/top/bottom button tabs . showLeftButton ( index ); tabs . showRightButton ( index ); tabs . showTopButton ( index ); tabs . showBottomButton ( index ); index : A number index, or a button game object. Hide button in a group tabs . hideButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Hide left/right/top/bottom button. tabs . hideLeftButton ( index ); tabs . hideRightButton ( index ); tabs . hideTopButton ( index ); tabs . hideBottomButton ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-tabs/#for-each-button","text":"tabs . forEachLeftButton ( callback , scope ); tabs . forEachRightButton ( callback , scope ); tabs . forEachTopButton ( callback , scope ); tabs . forEachBottomButton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-textarea/","text":"Introduction \u00b6 A container with a text, slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text-area object \u00b6 var textArea = scene . rexUI . add . textArea ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , text : textGameObject , // textWidth: undefined, // textHeight: undefined, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , text : 0 , // text: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, content : '' , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of text area. text : Game object of text. textWidth : Fixed width of text game object. Set undefined to ignore this feature. textHeight : Fixed height of text game object. Set undefined to ignore this feature. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.text : A number: Space between text object and slider object. An object: Padding of text object. If scrollMode is 0 (vertical) : space.text.top , space.text.bottom : Top, bottom padding space of text object. space.text.right : Space between text object and slider object. If scrollMode is 1 (horizontal) : space.text.left , space.text.right : Left, right padding space of text object. space.text.bottom : Space between text object and slider object. space.header : Space between header and text object. space.footer : Space between footer and text object. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer content : Content of this text area. name : Set name of this textArea. Custom class \u00b6 Define class class MyTextArea extends RexPlugins . UI . TextArea { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textArea = new MyTextArea ( scene , config ); Layout children \u00b6 Arrange position of all elements. textArea . layout (); Content \u00b6 Set textArea . setText ( text ); Append textArea . appendText ( text ); Get var text = textArea . text ; Scroll content \u00b6 Set textArea . setChildOY ( oy ); or textArea . childOY = oy ; Get var childOY = textArea . childOY ; Top OY var topOY = textArea . topChildOY ; Bottom OY var bottomOY = textArea . bottomChildOY ; Scroll by percentage \u00b6 Set textArea . setT ( t ); // t: 0~1 or textArea . t = t ; Get var t = textArea . t ; Scroll to top/bottom \u00b6 Scroll to top textArea . scrollToTop (); Equal to textArea.t = 0; Scroll to bottom textArea . scrollToBottom (); Equal to textArea.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state textArea . setSliderEnable ( enabled ); or textArea . sliderEnable = enabled ; Get enable state var enable = textArea . sliderEnable ; Scroller Set enable state textArea . setScrollerEnable ( enabled ); or textArea . scrollerEnable = enabled ; Get enable state var enable = textArea . scrollerEnable ; Lines count \u00b6 var linesCount = textArea . linesCount ; Other properties \u00b6 See sizer object , base sizer object . Get element \u00b6 Get element Background game object var background = textArea . getElement ( 'background' ); Text game object var text = textArea . getElement ( 'text' ); Slider Track var track = textArea . getElement ( 'slider.track' ); Thumb var thumb = textArea . getElement ( 'slider.thumb' ); Scroller var scroller = textArea . getElement ( 'scroller' ); Get by name var gameObject = textArea . getElement ( '#' + name );","title":"Text area"},{"location":"ui-textarea/#introduction","text":"A container with a text, slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-textarea/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-textarea/#usage","text":"Sample code","title":"Usage"},{"location":"ui-textarea/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-textarea/#add-text-area-object","text":"var textArea = scene . rexUI . add . textArea ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , text : textGameObject , // textWidth: undefined, // textHeight: undefined, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , text : 0 , // text: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, content : '' , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of text area. text : Game object of text. textWidth : Fixed width of text game object. Set undefined to ignore this feature. textHeight : Fixed height of text game object. Set undefined to ignore this feature. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.text : A number: Space between text object and slider object. An object: Padding of text object. If scrollMode is 0 (vertical) : space.text.top , space.text.bottom : Top, bottom padding space of text object. space.text.right : Space between text object and slider object. If scrollMode is 1 (horizontal) : space.text.left , space.text.right : Left, right padding space of text object. space.text.bottom : Space between text object and slider object. space.header : Space between header and text object. space.footer : Space between footer and text object. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer content : Content of this text area. name : Set name of this textArea.","title":"Add text-area object"},{"location":"ui-textarea/#custom-class","text":"Define class class MyTextArea extends RexPlugins . UI . TextArea { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textArea = new MyTextArea ( scene , config );","title":"Custom class"},{"location":"ui-textarea/#layout-children","text":"Arrange position of all elements. textArea . layout ();","title":"Layout children"},{"location":"ui-textarea/#content","text":"Set textArea . setText ( text ); Append textArea . appendText ( text ); Get var text = textArea . text ;","title":"Content"},{"location":"ui-textarea/#scroll-content","text":"Set textArea . setChildOY ( oy ); or textArea . childOY = oy ; Get var childOY = textArea . childOY ; Top OY var topOY = textArea . topChildOY ; Bottom OY var bottomOY = textArea . bottomChildOY ;","title":"Scroll content"},{"location":"ui-textarea/#scroll-by-percentage","text":"Set textArea . setT ( t ); // t: 0~1 or textArea . t = t ; Get var t = textArea . t ;","title":"Scroll by percentage"},{"location":"ui-textarea/#scroll-to-topbottom","text":"Scroll to top textArea . scrollToTop (); Equal to textArea.t = 0; Scroll to bottom textArea . scrollToBottom (); Equal to textArea.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-textarea/#enabledisable-scrolling","text":"Slider Set enable state textArea . setSliderEnable ( enabled ); or textArea . sliderEnable = enabled ; Get enable state var enable = textArea . sliderEnable ; Scroller Set enable state textArea . setScrollerEnable ( enabled ); or textArea . scrollerEnable = enabled ; Get enable state var enable = textArea . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-textarea/#lines-count","text":"var linesCount = textArea . linesCount ;","title":"Lines count"},{"location":"ui-textarea/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-textarea/#get-element","text":"Get element Background game object var background = textArea . getElement ( 'background' ); Text game object var text = textArea . getElement ( 'text' ); Slider Track var track = textArea . getElement ( 'slider.track' ); Thumb var thumb = textArea . getElement ( 'slider.thumb' ); Scroller var scroller = textArea . getElement ( 'scroller' ); Get by name var gameObject = textArea . getElement ( '#' + name );","title":"Get element"},{"location":"ui-textbox/","text":"Introduction \u00b6 A container with an icon, ( typing and paging ) text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add textbox object \u00b6 var textBox = scene . rexUI . add . textBox ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of textBox. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. Max lines and wrapped width Built-in text object : maxLines and wrap width ( wordWrap.width ). BBcode text object : maxLines and wrap width ( wrap.width ). Tag text object : maxLines and wrap width ( wrap.width ). Fixed width and fixed height Built-in text object : fixedWidth and fixedHeight , set to 0 to disable this feature. BBcode text object : fixedWidth and fixedHeight , set to 0 to disable this feature. Tag text object : fixedWidth and fixedHeight , set to 0 to disable this feature. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this textBox. draggable : Set true to drag to-most sizer. Custom class \u00b6 Define class class MyTextBox extends RexPlugins . UI . TextBox { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textBox = new MyTextBox ( scene , config ); Layout children \u00b6 Arrange position of all elements. textBox . layout (); This method will be invoked when size of text has been changed automatically. Typing \u00b6 Start textBox . start ( content , typingSpeed ); content : Content string. speed : Typing speed in ms. Stop textBox . stop (); Stop and show all text textBox . stop ( true ); Pause textBox . pause (); Resume textBox . resume (); Is typing var isTyping = textBox . isTyping ; Page \u00b6 Type next page textBox . typeNextPage (); Is last page var isLastPage = textBox . isLastPage ; Is first page var isLastPage = textBox . isFirstPage ; Current page index var pageIndex = textBox . pageIndex ; Number of pages var pageIndex = textBox . pageCount ; Events \u00b6 On typing a character dialog . on ( 'type' , function () { // ... }, scope ); On Typing the last character of current page. dialog . on ( 'pageend' , function () { // ... }, scope ); Other properties \u00b6 See label object , sizer object , base sizer object .","title":"Text box"},{"location":"ui-textbox/#introduction","text":"A container with an icon, ( typing and paging ) text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-textbox/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-textbox/#usage","text":"Sample code","title":"Usage"},{"location":"ui-textbox/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-textbox/#add-textbox-object","text":"var textBox = scene . rexUI . add . textBox ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of textBox. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. Max lines and wrapped width Built-in text object : maxLines and wrap width ( wordWrap.width ). BBcode text object : maxLines and wrap width ( wrap.width ). Tag text object : maxLines and wrap width ( wrap.width ). Fixed width and fixed height Built-in text object : fixedWidth and fixedHeight , set to 0 to disable this feature. BBcode text object : fixedWidth and fixedHeight , set to 0 to disable this feature. Tag text object : fixedWidth and fixedHeight , set to 0 to disable this feature. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this textBox. draggable : Set true to drag to-most sizer.","title":"Add textbox object"},{"location":"ui-textbox/#custom-class","text":"Define class class MyTextBox extends RexPlugins . UI . TextBox { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textBox = new MyTextBox ( scene , config );","title":"Custom class"},{"location":"ui-textbox/#layout-children","text":"Arrange position of all elements. textBox . layout (); This method will be invoked when size of text has been changed automatically.","title":"Layout children"},{"location":"ui-textbox/#typing","text":"Start textBox . start ( content , typingSpeed ); content : Content string. speed : Typing speed in ms. Stop textBox . stop (); Stop and show all text textBox . stop ( true ); Pause textBox . pause (); Resume textBox . resume (); Is typing var isTyping = textBox . isTyping ;","title":"Typing"},{"location":"ui-textbox/#page","text":"Type next page textBox . typeNextPage (); Is last page var isLastPage = textBox . isLastPage ; Is first page var isLastPage = textBox . isFirstPage ; Current page index var pageIndex = textBox . pageIndex ; Number of pages var pageIndex = textBox . pageCount ;","title":"Page"},{"location":"ui-textbox/#events","text":"On typing a character dialog . on ( 'type' , function () { // ... }, scope ); On Typing the last character of current page. dialog . on ( 'pageend' , function () { // ... }, scope );","title":"Events"},{"location":"ui-textbox/#other-properties","text":"See label object , sizer object , base sizer object .","title":"Other properties"},{"location":"ui-toast/","text":"Introduction \u00b6 Show text message for a short while. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add toast object \u00b6 var toast = scene . rexUI . add . toast ({ x : 0 , y : 0 , // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, duration : { in : 200 , hold : 1200 , out : 200 , }, // transitIn: 0, // transitOut: 0, name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of toast. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this toast. duration : Duration of displaying message duration.in : Duration of transit-in stage. duration.hold : Duration of hold stage. duration.out : Duration of transit-out stage. transitIn : Callback of transit-in. 0 , or popUp : Pop-up. 1 , or fadeIn : Fade-in. A callback : Custom transit-in function function ( gameObject , duration ) { // ... } transitOut : Callback of transit-out. 0 , or scaleDown : Scale-down. 1 , or fadeOut : Fade-out. A callback : Custom transit-out function function ( gameObject , duration ) { // ... } Toast object will be invisible at beginning. Custom class \u00b6 Define class class MyToast extends RexPlugins . UI . Toast { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var toast = new MyToast ( scene , config ); Layout children \u00b6 Arrange position of all children. This will be called when showing new message, user does not need call it again generally. toast . layout (); Show message \u00b6 toast . show ( message ); message : A string, or a callback. A string. Apply this content to text game object. Callback. Invoke this callback to configurate toast object. function ( toast ) { // var icon = toast.getElement('icon'); // var text = toast.getElement('text'); // var action = toast.getElement('action'); } Toast displays message follows these steps : transit-in , hold , transit-out . New message will be pending until toast is back to idle. Other properties \u00b6 See label object , sizer object , base sizer object .","title":"Toast"},{"location":"ui-toast/#introduction","text":"Show text message for a short while. Author: Rex Game object","title":"Introduction"},{"location":"ui-toast/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-toast/#usage","text":"Sample code","title":"Usage"},{"location":"ui-toast/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-toast/#add-toast-object","text":"var toast = scene . rexUI . add . toast ({ x : 0 , y : 0 , // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, duration : { in : 200 , hold : 1200 , out : 200 , }, // transitIn: 0, // transitOut: 0, name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of toast. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this toast. duration : Duration of displaying message duration.in : Duration of transit-in stage. duration.hold : Duration of hold stage. duration.out : Duration of transit-out stage. transitIn : Callback of transit-in. 0 , or popUp : Pop-up. 1 , or fadeIn : Fade-in. A callback : Custom transit-in function function ( gameObject , duration ) { // ... } transitOut : Callback of transit-out. 0 , or scaleDown : Scale-down. 1 , or fadeOut : Fade-out. A callback : Custom transit-out function function ( gameObject , duration ) { // ... } Toast object will be invisible at beginning.","title":"Add toast object"},{"location":"ui-toast/#custom-class","text":"Define class class MyToast extends RexPlugins . UI . Toast { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var toast = new MyToast ( scene , config );","title":"Custom class"},{"location":"ui-toast/#layout-children","text":"Arrange position of all children. This will be called when showing new message, user does not need call it again generally. toast . layout ();","title":"Layout children"},{"location":"ui-toast/#show-message","text":"toast . show ( message ); message : A string, or a callback. A string. Apply this content to text game object. Callback. Invoke this callback to configurate toast object. function ( toast ) { // var icon = toast.getElement('icon'); // var text = toast.getElement('text'); // var action = toast.getElement('action'); } Toast displays message follows these steps : transit-in , hold , transit-out . New message will be pending until toast is back to idle.","title":"Show message"},{"location":"ui-toast/#other-properties","text":"See label object , sizer object , base sizer object .","title":"Other properties"},{"location":"uuid/","text":"Introduction \u00b6 Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser. Author: Richard Davey Usage \u00b6 var uuid = Phaser . Utils . String . UUID ();","title":"UUID"},{"location":"uuid/#introduction","text":"Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"uuid/#usage","text":"var uuid = Phaser . Utils . String . UUID ();","title":"Usage"},{"location":"vector2/","text":"Introduction \u00b6 A representation of a vector in 2D space ( {x, y} ), built-in object of phaser. Author: Richard Davey Usage \u00b6 Create object \u00b6 var vector = new Phaser . Math . Vector2 (); // var vector = new Phaser.Math.Vector2(x, y); // var vector = new Phaser.Math.Vector2({x, y}); Clone \u00b6 var newVector = vector . clone (); Set components \u00b6 Set (x, y) vector . set ( x , y ); // vector.setTo(x, y); or vector . copy ({ x , y }); // vector.setFromObject({x, y}); Set from polar coordinate vector . setToPolar ( azimuth , radius ); azimuth : The angular coordinate, in radians. Reset to (0, 0) vector . reset (); Get componments \u00b6 X, Y var x = vector . x ; var y = vector . y ; Angle var angle = vector . angle (); // angle in radians Length var length = vector . length (); or var lengthSq = vector . lengthSq (); // squared Methods \u00b6 Scale vector . scale ( value ); Normalize vector . normalize (); Negate vector . negate (); Vector methods \u00b6 Add vector . add ( src ); // src: {x, y} Subtract vector . subtract ( src ); // src: {x, y} Multiply vector . multiply ( src ); // src: {x, y} Divide vector . divide ( src ); // src: {x, y} Dot var value = vector . dot ( src ); // src: {x, y} Cross var value = vector . cross ( src ); // src: {x, y} Points method \u00b6 Distance between 2 points. var distance = vector . distance ( src ); or var distanceSq = vector . distanceSq ( src ); // squared Linearly interpolate between 2 points. vector . lerp ( src , t ); // src: {x, y} t : The interpolation percentage, between 0 and 1. Constant \u00b6 Zero (0,0) var vector = Phaser . Math . Vector2 . ZERO ; One (1,1) var vector = Phaser . Math . Vector2 . ONE ; Right (1,0) var vector = Phaser . Math . Vector2 . RIGHT ; Left (-1,0) var vector = Phaser . Math . Vector2 . LEFT ; Up (0,-1) var vector = Phaser . Math . Vector2 . UP ; Down (0,1) var vector = Phaser . Math . Vector2 . DOWN ;","title":"Vector2"},{"location":"vector2/#introduction","text":"A representation of a vector in 2D space ( {x, y} ), built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"vector2/#usage","text":"","title":"Usage"},{"location":"vector2/#create-object","text":"var vector = new Phaser . Math . Vector2 (); // var vector = new Phaser.Math.Vector2(x, y); // var vector = new Phaser.Math.Vector2({x, y});","title":"Create object"},{"location":"vector2/#clone","text":"var newVector = vector . clone ();","title":"Clone"},{"location":"vector2/#set-components","text":"Set (x, y) vector . set ( x , y ); // vector.setTo(x, y); or vector . copy ({ x , y }); // vector.setFromObject({x, y}); Set from polar coordinate vector . setToPolar ( azimuth , radius ); azimuth : The angular coordinate, in radians. Reset to (0, 0) vector . reset ();","title":"Set components"},{"location":"vector2/#get-componments","text":"X, Y var x = vector . x ; var y = vector . y ; Angle var angle = vector . angle (); // angle in radians Length var length = vector . length (); or var lengthSq = vector . lengthSq (); // squared","title":"Get componments"},{"location":"vector2/#methods","text":"Scale vector . scale ( value ); Normalize vector . normalize (); Negate vector . negate ();","title":"Methods"},{"location":"vector2/#vector-methods","text":"Add vector . add ( src ); // src: {x, y} Subtract vector . subtract ( src ); // src: {x, y} Multiply vector . multiply ( src ); // src: {x, y} Divide vector . divide ( src ); // src: {x, y} Dot var value = vector . dot ( src ); // src: {x, y} Cross var value = vector . cross ( src ); // src: {x, y}","title":"Vector methods"},{"location":"vector2/#points-method","text":"Distance between 2 points. var distance = vector . distance ( src ); or var distanceSq = vector . distanceSq ( src ); // squared Linearly interpolate between 2 points. vector . lerp ( src , t ); // src: {x, y} t : The interpolation percentage, between 0 and 1.","title":"Points method"},{"location":"vector2/#constant","text":"Zero (0,0) var vector = Phaser . Math . Vector2 . ZERO ; One (1,1) var vector = Phaser . Math . Vector2 . ONE ; Right (1,0) var vector = Phaser . Math . Vector2 . RIGHT ; Left (-1,0) var vector = Phaser . Math . Vector2 . LEFT ; Up (0,-1) var vector = Phaser . Math . Vector2 . UP ; Down (0,1) var vector = Phaser . Math . Vector2 . DOWN ;","title":"Constant"},{"location":"video/","text":"Introduction \u00b6 A Video Game Object. Author: Richard Davey Usage \u00b6 Load video \u00b6 scene . load . video ( key , url , loadEvent , asBlob , noAudio ); Reference: load video Add video object \u00b6 var video = scene . add . rexVideoCanvas ( x , y , key ); // var video = scene.add.rexVideoCanvas(x, y); key : Optional key of the Video this Game Object will play, as stored in the Video Cache. Play \u00b6 video . play (); // video.play(loop, markerIn, markerOut); loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video. Play from URL \u00b6 Add video object var video = scene . add . rexVideoCanvas ( x , y ); Play video from URL video . loadURL ( url ); // video.loadURL(url, loadEvent, noAudio); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false . Pause \u00b6 Pause video . setPaused (); // video.setPaused(true); Resume video . setPaused ( false ); Stop \u00b6 Stops the video playing and clears all internal event listeners. video . stop (); Is playing \u00b6 Is playing var isPlaying = video . isPlaying (); // (not PAUSE) and (not not ENDED) Is paused var isPaused = video . isPaused (); Playback time \u00b6 Get var playbackTime = video . getCurrentTime (); or var t = video . getProgress (); // t: 0~1 Set Set to video . setCurrentTime ( playbackTime ); // time in seconds or video . seekTo ( t ); // t: 0~1 Is seeking var isSeeking = video . isSeeking (); Forward video . setCurrentTime ( '+' + time ); // time in seconds // video.setCurrentTime('+2'); Backeard video . setCurrentTime ( '-' + time ); // time in seconds // video.setCurrentTime('-2'); Playback rate \u00b6 Get var rate = video . getPlaybackRate (); Set video . setPlaybackRate ( rate ); Duration \u00b6 var duration = video . getDuration (); // time in seconds Volume \u00b6 Get var volume = video . getVolume (); // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 Mute \u00b6 Get var muted = video . isMuted (); // muted: true/false Set video . setMute ( muted ); // muted: true/false Loop \u00b6 Get var loop = video . getLoop (); // loop: true/false Set video . setLoop ( loop ); // loop: true/false Video key \u00b6 Get var key = video . getVideoKey (); Change video key (video source) video . changeSource ( key ); // video.changeSource(key, autoplay, loop, markerIn, markerOut); autoplay : Should the video start playing immediately, once the swap is complete? loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video. Marks \u00b6 Add mark video . addMarker ( key , markerIn , markerOut ); key : A unique name to give this marker. markerIn , markerOut : The time, in seconds, representing the start/end of this marker. Play mark video . playMarker ( key , loop ); Remove mark video . removeMarker ( key ); Snapshot \u00b6 var canvasTexture = video . saveSnapshotTexture ( key ); or var canvasTexture = video . snapshot (); // var canvasTexture = video.snapshot(width, height); or var canvasTexture = video . snapshotArea ( x , y , srcWidth , srcHeight ); // var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight); x , y : The horizontal/vertical location of the top-left of the area to grab from. srcWidth , srcHeight : The width/height of area to grab from the video. destWidth , destHeight : The destination width/height of the grab, allowing you to resize it. canvasTexture : Canvas texture object . Get key of texture var key = canvasTexture . key ; Save texture \u00b6 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. var texture = video . saveTexture ( key ); // var texture = video.saveTexture(key, flipY); flipY : Set to true if use it as the input for a Shader. Events \u00b6 A Video is unlocked by a user gesture. video . on ( 'unlocked' , function ( video , error ){ }, scope ); A Video tries to play a source that does not exist, or is the wrong file type. video . on ( 'error' , function ( video , error ){ }, scope ); A Video has exhausted its allocated time while trying to connect to a video source to start playback. video . on ( 'timeout' , function ( video ){ }, scope ); A Video begins playback. video . on ( 'play' , function ( video ){ }, scope ); A Video finishes playback by reaching the end of its duration, or markerOut . video . on ( 'complete' , function ( video ){ }, scope ); A Video that is currently playing has looped. video . on ( 'loop' , function ( video ){ }, scope ); A Video begins seeking to a new point in its timeline. video . on ( 'seeking' , function ( video ){ }, scope ); A Video completes seeking to a new point in its timeline. video . on ( 'seeked' , function ( video ){ }, scope ); Enough of the video source has been loaded, that the browser is able to render a frame from it. video . on ( 'created' , function ( video , width , height ){ }, scope ); A Video is stopped from playback via a call to the Video.stop method, video . on ( 'stop' , function ( video ){ }, scope );","title":"Video"},{"location":"video/#introduction","text":"A Video Game Object. Author: Richard Davey","title":"Introduction"},{"location":"video/#usage","text":"","title":"Usage"},{"location":"video/#load-video","text":"scene . load . video ( key , url , loadEvent , asBlob , noAudio ); Reference: load video","title":"Load video"},{"location":"video/#add-video-object","text":"var video = scene . add . rexVideoCanvas ( x , y , key ); // var video = scene.add.rexVideoCanvas(x, y); key : Optional key of the Video this Game Object will play, as stored in the Video Cache.","title":"Add video object"},{"location":"video/#play","text":"video . play (); // video.play(loop, markerIn, markerOut); loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video.","title":"Play"},{"location":"video/#play-from-url","text":"Add video object var video = scene . add . rexVideoCanvas ( x , y ); Play video from URL video . loadURL ( url ); // video.loadURL(url, loadEvent, noAudio); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false .","title":"Play from URL"},{"location":"video/#pause","text":"Pause video . setPaused (); // video.setPaused(true); Resume video . setPaused ( false );","title":"Pause"},{"location":"video/#stop","text":"Stops the video playing and clears all internal event listeners. video . stop ();","title":"Stop"},{"location":"video/#is-playing","text":"Is playing var isPlaying = video . isPlaying (); // (not PAUSE) and (not not ENDED) Is paused var isPaused = video . isPaused ();","title":"Is playing"},{"location":"video/#playback-time","text":"Get var playbackTime = video . getCurrentTime (); or var t = video . getProgress (); // t: 0~1 Set Set to video . setCurrentTime ( playbackTime ); // time in seconds or video . seekTo ( t ); // t: 0~1 Is seeking var isSeeking = video . isSeeking (); Forward video . setCurrentTime ( '+' + time ); // time in seconds // video.setCurrentTime('+2'); Backeard video . setCurrentTime ( '-' + time ); // time in seconds // video.setCurrentTime('-2');","title":"Playback time"},{"location":"video/#playback-rate","text":"Get var rate = video . getPlaybackRate (); Set video . setPlaybackRate ( rate );","title":"Playback rate"},{"location":"video/#duration","text":"var duration = video . getDuration (); // time in seconds","title":"Duration"},{"location":"video/#volume","text":"Get var volume = video . getVolume (); // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1","title":"Volume"},{"location":"video/#mute","text":"Get var muted = video . isMuted (); // muted: true/false Set video . setMute ( muted ); // muted: true/false","title":"Mute"},{"location":"video/#loop","text":"Get var loop = video . getLoop (); // loop: true/false Set video . setLoop ( loop ); // loop: true/false","title":"Loop"},{"location":"video/#video-key","text":"Get var key = video . getVideoKey (); Change video key (video source) video . changeSource ( key ); // video.changeSource(key, autoplay, loop, markerIn, markerOut); autoplay : Should the video start playing immediately, once the swap is complete? loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video.","title":"Video key"},{"location":"video/#marks","text":"Add mark video . addMarker ( key , markerIn , markerOut ); key : A unique name to give this marker. markerIn , markerOut : The time, in seconds, representing the start/end of this marker. Play mark video . playMarker ( key , loop ); Remove mark video . removeMarker ( key );","title":"Marks"},{"location":"video/#snapshot","text":"var canvasTexture = video . saveSnapshotTexture ( key ); or var canvasTexture = video . snapshot (); // var canvasTexture = video.snapshot(width, height); or var canvasTexture = video . snapshotArea ( x , y , srcWidth , srcHeight ); // var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight); x , y : The horizontal/vertical location of the top-left of the area to grab from. srcWidth , srcHeight : The width/height of area to grab from the video. destWidth , destHeight : The destination width/height of the grab, allowing you to resize it. canvasTexture : Canvas texture object . Get key of texture var key = canvasTexture . key ;","title":"Snapshot"},{"location":"video/#save-texture","text":"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. var texture = video . saveTexture ( key ); // var texture = video.saveTexture(key, flipY); flipY : Set to true if use it as the input for a Shader.","title":"Save texture"},{"location":"video/#events","text":"A Video is unlocked by a user gesture. video . on ( 'unlocked' , function ( video , error ){ }, scope ); A Video tries to play a source that does not exist, or is the wrong file type. video . on ( 'error' , function ( video , error ){ }, scope ); A Video has exhausted its allocated time while trying to connect to a video source to start playback. video . on ( 'timeout' , function ( video ){ }, scope ); A Video begins playback. video . on ( 'play' , function ( video ){ }, scope ); A Video finishes playback by reaching the end of its duration, or markerOut . video . on ( 'complete' , function ( video ){ }, scope ); A Video that is currently playing has looped. video . on ( 'loop' , function ( video ){ }, scope ); A Video begins seeking to a new point in its timeline. video . on ( 'seeking' , function ( video ){ }, scope ); A Video completes seeking to a new point in its timeline. video . on ( 'seeked' , function ( video ){ }, scope ); Enough of the video source has been loaded, that the browser is able to render a frame from it. video . on ( 'created' , function ( video , width , height ){ }, scope ); A Video is stopped from playback via a call to the Video.stop method, video . on ( 'stop' , function ( video ){ }, scope );","title":"Events"},{"location":"virtualjoystick/","text":"Introduction \u00b6 Simulate curosr keys according touch events. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexVirtualJoyStick from './plugins/virtualjoystick.js' ; Install global plugin \u00b6 Install plugin in configuration of game import VirtualJoyStickPlugin from './plugins/virtualjoystick-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexVirtualJoyStick' , plugin : VirtualJoyStickPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var joystick = scene . plugins . get ( 'rexVirtualJoyStick' ). add ( scene , { x : x , y : y , radius : radius , base : baseGameObject , thumb : thumbGameObject , // dir: '8dir', // forceMin: 16, // fixed: true, // enable: true }); base : Base game object. Create a circle shape object if no base game object passed. thumb : Thumb game object. Create a circle shape object if no thumb game object passed. x , y : Position of base game object radius : Circle hit-area of base game object dir : 'up&down' , or 0 : Simulate up or down cursor keys only. 'left&right' , or 1 : Simulate left or right cursor keys only. '4dir' , or 2 : Simulate up, down, left or right cursor keys. '8dir' , or 3 : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. forceMin : Cursor keys will be pressed when force is larger then this value. force : Distance between position of base game object to touch pointer fixed : Set true to fix to camera, i.e set scrollFactor to 0 for base and thumb game object. enable : Set false to disable cursor keys simulation State of cursor keys \u00b6 var cursorKeys = joystick . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = joystick . left ; var rightKeyDown = joystick . right ; var upKeyDown = joystick . up ; var downKeyDown = joystick . down ; var noKeyDown = joystick . noKey ; Force & Angle \u00b6 Force : Distance between position of base game object to touch pointer. var force = joystick . force ; var forceX = joystick . forceX ; var forceY = joystick . forceY ; var angle = joystick . angle ; // degree between -180 to 180 var rotation = joystick . rotation ; // radians Visible \u00b6 Visible of base game object. Get : Return visible of base game object var visible = joystick . visible ; Set : Set visible to base game object and thumb game object joystick . visible = visible ; joystick . setVisible ( visible ); joystick . toggleVisible (); Joystick will be disabled when invisible. Enable \u00b6 Get var enable = joystick . enable ; Set joystick . enable = enable ; joystick . setEnable ( enable ); joystick . toggleEnable (); Position \u00b6 Position of base game object. Get var x = joystick . x ; var y = joystick . y ; Set joystick . x = x ; joystick . y = y ; joystick . setPosition ( x , y ); Scroll factor \u00b6 Fix to camera joystick . setScrollFactor ( 0 ); Touch pointer \u00b6 Position var x = joystick . pointerX ; var y = joystick . pointerY ; Pointer var pointer = joystick . pointer ; Destroy \u00b6 Destroy base & thumb game object. joystick . destroy (); Events \u00b6 On joystick updated : joystick . on ( 'update' , function (){});","title":"Virtual joystick"},{"location":"virtualjoystick/#introduction","text":"Simulate curosr keys according touch events. Author: Rex Member of scene","title":"Introduction"},{"location":"virtualjoystick/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"virtualjoystick/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"virtualjoystick/#import-class","text":"import rexVirtualJoyStick from './plugins/virtualjoystick.js' ;","title":"Import class"},{"location":"virtualjoystick/#install-global-plugin","text":"Install plugin in configuration of game import VirtualJoyStickPlugin from './plugins/virtualjoystick-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexVirtualJoyStick' , plugin : VirtualJoyStickPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"virtualjoystick/#create-instance","text":"var joystick = scene . plugins . get ( 'rexVirtualJoyStick' ). add ( scene , { x : x , y : y , radius : radius , base : baseGameObject , thumb : thumbGameObject , // dir: '8dir', // forceMin: 16, // fixed: true, // enable: true }); base : Base game object. Create a circle shape object if no base game object passed. thumb : Thumb game object. Create a circle shape object if no thumb game object passed. x , y : Position of base game object radius : Circle hit-area of base game object dir : 'up&down' , or 0 : Simulate up or down cursor keys only. 'left&right' , or 1 : Simulate left or right cursor keys only. '4dir' , or 2 : Simulate up, down, left or right cursor keys. '8dir' , or 3 : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. forceMin : Cursor keys will be pressed when force is larger then this value. force : Distance between position of base game object to touch pointer fixed : Set true to fix to camera, i.e set scrollFactor to 0 for base and thumb game object. enable : Set false to disable cursor keys simulation","title":"Create instance"},{"location":"virtualjoystick/#state-of-cursor-keys","text":"var cursorKeys = joystick . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = joystick . left ; var rightKeyDown = joystick . right ; var upKeyDown = joystick . up ; var downKeyDown = joystick . down ; var noKeyDown = joystick . noKey ;","title":"State of cursor keys"},{"location":"virtualjoystick/#force-angle","text":"Force : Distance between position of base game object to touch pointer. var force = joystick . force ; var forceX = joystick . forceX ; var forceY = joystick . forceY ; var angle = joystick . angle ; // degree between -180 to 180 var rotation = joystick . rotation ; // radians","title":"Force &amp; Angle"},{"location":"virtualjoystick/#visible","text":"Visible of base game object. Get : Return visible of base game object var visible = joystick . visible ; Set : Set visible to base game object and thumb game object joystick . visible = visible ; joystick . setVisible ( visible ); joystick . toggleVisible (); Joystick will be disabled when invisible.","title":"Visible"},{"location":"virtualjoystick/#enable","text":"Get var enable = joystick . enable ; Set joystick . enable = enable ; joystick . setEnable ( enable ); joystick . toggleEnable ();","title":"Enable"},{"location":"virtualjoystick/#position","text":"Position of base game object. Get var x = joystick . x ; var y = joystick . y ; Set joystick . x = x ; joystick . y = y ; joystick . setPosition ( x , y );","title":"Position"},{"location":"virtualjoystick/#scroll-factor","text":"Fix to camera joystick . setScrollFactor ( 0 );","title":"Scroll factor"},{"location":"virtualjoystick/#touch-pointer","text":"Position var x = joystick . pointerX ; var y = joystick . pointerY ; Pointer var pointer = joystick . pointer ;","title":"Touch pointer"},{"location":"virtualjoystick/#destroy","text":"Destroy base & thumb game object. joystick . destroy ();","title":"Destroy"},{"location":"virtualjoystick/#events","text":"On joystick updated : joystick . on ( 'update' , function (){});","title":"Events"},{"location":"waitevents/","text":"Introduction \u00b6 Wait fired events or callbacks. Author: Rex Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexWaitEvents from './plugins/waitevents.js' ; Install global plugin \u00b6 Install plugin in configuration of game import WaitEventsPlugin from './plugins/waitevents-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexWaitEvents' , plugin : WaitEventsPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var waitevents = scene . plugins . get ( 'rexWaitEvents' ). add ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired. Set complete callback \u00b6 waitevents . setCompleteCallback ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired. Add waiting event \u00b6 Callback \u00b6 var callback = waitevents . waitCallback (); callback : A function object which invoked when waitting event finished. For example, invokes completeCallback when all timers are time-out. scene . time . delayedCall ( 500 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1000 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1500 , waitEvents . waitCallback ()); Callback from event emitter \u00b6 waitevents . waitEvent ( eventEmitter , eventName );","title":"Wait events"},{"location":"waitevents/#introduction","text":"Wait fired events or callbacks. Author: Rex","title":"Introduction"},{"location":"waitevents/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"waitevents/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"waitevents/#import-class","text":"import rexWaitEvents from './plugins/waitevents.js' ;","title":"Import class"},{"location":"waitevents/#install-global-plugin","text":"Install plugin in configuration of game import WaitEventsPlugin from './plugins/waitevents-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexWaitEvents' , plugin : WaitEventsPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"waitevents/#create-instance","text":"var waitevents = scene . plugins . get ( 'rexWaitEvents' ). add ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired.","title":"Create instance"},{"location":"waitevents/#set-complete-callback","text":"waitevents . setCompleteCallback ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired.","title":"Set complete callback"},{"location":"waitevents/#add-waiting-event","text":"","title":"Add waiting event"},{"location":"waitevents/#callback","text":"var callback = waitevents . waitCallback (); callback : A function object which invoked when waitting event finished. For example, invokes completeCallback when all timers are time-out. scene . time . delayedCall ( 500 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1000 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1500 , waitEvents . waitCallback ());","title":"Callback"},{"location":"waitevents/#callback-from-event-emitter","text":"waitevents . waitEvent ( eventEmitter , eventName );","title":"Callback from event emitter"},{"location":"webfontloader/","text":"Introduction \u00b6 Load web font by google webfont loader in payload or preload stage. Author: Rex Custom File of loader Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'WebFontLoader' , plugin : WebFontLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene) Load webfont \u00b6 In preload stage: this . load . rexWebFont ({ google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, }); testString : To test if the font is loaded completed or not. undefined : No testing. Default value. A string : A test string for all fonts An object, {fontFamily: testString} : Test string for a specific font family. testInterval : Retry interval. or load font in pack var sceneConfig = { key : '...' , pack : { files : [{ type : 'rexWebFont' , key : 'webfont' , config : { google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, } } ] } }; Configuration of loading fonts Google webfont WebFontConfig = { google : { families : [ 'Droid Sans' , 'Droid Serif:bold' ] } }; Custom font WebFontConfig = { custom : { families : [ 'My Font' , 'My Other Font:n4,i4,n7' ], urls : [ '/fonts.css' ] } }; and fonts.css @ font-face { font-family : 'My Font' ; src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : italic ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : bold ; /* or 700 */ src : ...; } Events \u00b6 fontactive event this . load . on ( 'webfontactive' , function ( fileObj , familyName ){}); fontinactive event this . load . on ( 'webfontinactive' , function ( fileObj , familyName ){}); Test string \u00b6 Add string parameter testString into config, to test if the font is loaded completed or not. Fill 0 within an internal canvas. Draw testString . Check if any pixel has non-zero value.","title":"Webfont loader"},{"location":"webfontloader/#introduction","text":"Load web font by google webfont loader in payload or preload stage. Author: Rex Custom File of loader","title":"Introduction"},{"location":"webfontloader/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"webfontloader/#usage","text":"Sample code","title":"Usage"},{"location":"webfontloader/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'WebFontLoader' , plugin : WebFontLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene)","title":"Install plugin"},{"location":"webfontloader/#load-webfont","text":"In preload stage: this . load . rexWebFont ({ google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, }); testString : To test if the font is loaded completed or not. undefined : No testing. Default value. A string : A test string for all fonts An object, {fontFamily: testString} : Test string for a specific font family. testInterval : Retry interval. or load font in pack var sceneConfig = { key : '...' , pack : { files : [{ type : 'rexWebFont' , key : 'webfont' , config : { google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, } } ] } }; Configuration of loading fonts Google webfont WebFontConfig = { google : { families : [ 'Droid Sans' , 'Droid Serif:bold' ] } }; Custom font WebFontConfig = { custom : { families : [ 'My Font' , 'My Other Font:n4,i4,n7' ], urls : [ '/fonts.css' ] } }; and fonts.css @ font-face { font-family : 'My Font' ; src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : italic ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : bold ; /* or 700 */ src : ...; }","title":"Load webfont"},{"location":"webfontloader/#events","text":"fontactive event this . load . on ( 'webfontactive' , function ( fileObj , familyName ){}); fontinactive event this . load . on ( 'webfontinactive' , function ( fileObj , familyName ){});","title":"Events"},{"location":"webfontloader/#test-string","text":"Add string parameter testString into config, to test if the font is loaded completed or not. Fill 0 within an internal canvas. Draw testString . Check if any pixel has non-zero value.","title":"Test string"},{"location":"wrap/","text":"Introduction \u00b6 Wrap the given value between min and max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Wrap ( value , min , max ); value : The value to wrap.","title":"Wrap"},{"location":"wrap/#introduction","text":"Wrap the given value between min and max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"wrap/#usage","text":"var result = Phaser . Math . Wrap ( value , min , max ); value : The value to wrap.","title":"Usage"},{"location":"xor/","text":"Introduction \u00b6 Encrypt or decrypt string by XOR algorithm. Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexXOR from './plugins/xor.js' ; Install global plugin \u00b6 Install plugin in configuration of game import XORPlugin from './plugins/xor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexXOR' , plugin : XORPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Encrypt \u00b6 var encResult = scene . plugins . get ( 'rexXOR' ). Encrypt ( src , pwd ); Decrypt \u00b6 var decResult = scene . plugins . get ( 'rexXOR' ). Decrypt ( encResult , pwd );","title":"XOR"},{"location":"xor/#introduction","text":"Encrypt or decrypt string by XOR algorithm. Author: Rex Methods","title":"Introduction"},{"location":"xor/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"xor/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"xor/#import-class","text":"import rexXOR from './plugins/xor.js' ;","title":"Import class"},{"location":"xor/#install-global-plugin","text":"Install plugin in configuration of game import XORPlugin from './plugins/xor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexXOR' , plugin : XORPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"xor/#encrypt","text":"var encResult = scene . plugins . get ( 'rexXOR' ). Encrypt ( src , pwd );","title":"Encrypt"},{"location":"xor/#decrypt","text":"var decResult = scene . plugins . get ( 'rexXOR' ). Decrypt ( encResult , pwd );","title":"Decrypt"},{"location":"youtubeplayer/","text":"Introduction \u00b6 Play youtube video on iframe. Author: Rex DOM Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexYoutubePlayerPlugin' , plugin : YoutubePlayerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Add youtube player object \u00b6 Youtube player on DOM var player = scene . add . rexYoutubePlayer ( x , y , width , height , config ); // var player = scene.add.rexYoutubePlayer(x, y, config); // var player = scene.add.rexYoutubePlayer(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , videoId : '' , autoPlay : true , controls : false , keyboardControl : true , modestBranding : false , loop : false , } x , y : Position width , height : Size of element videoId : The YouTube video ID that identifies the video that the player will load. autoPlay : Automatically start to play when the player loads. controls : Whether the video player controls are displayed. keyboardControl : Set false to disable keyboard controls. modestBranding : Set false to prevent the YouTube logo from displaying in the control bar. loop : Play video when ended. Custom class \u00b6 Define class class MyYoutubePlayer extends YoutubePlayer { // or YoutubePlayerCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta) // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var player = new MyYoutubePlayer ( scene , x , y , width , height , config ); Load \u00b6 player . load ( videoId ); // player.load(videoId, autoPlay); Play \u00b6 player . play (); Pause \u00b6 player . pause (); Playback time \u00b6 Get var playbackTime = player . playbackTime ; // time in seconds var t = player . t ; // t: 0~1 Set player . setPlaybackTime ( time ); // time in seconds // player.playbackTime = time; player . setT ( t ); // t: 0~1 // player.t = t; Duration \u00b6 var duration = player . duration ; // time in seconds Volume \u00b6 Get var volume = player . volume ; // volume: 0~1 Set player . setVolume ( volume ); // volume: 0~1 // player.volume = volume; Mute \u00b6 Get var muted = player . muted ; // muted: true/false Set player . setMute ( muted ); // muted: true/false // player.muted = muted; Loop \u00b6 Get var loop = player . loop ; // loop: true/false Set player . setLoop ( loop ); // loop: true/false // player.loop = loop; Resize \u00b6 player . resize ( width , height ); Status \u00b6 Is playing var isPlaying = player . isPlaying ; Is paused var isPaused = player . isPaused ; Has end var hasEnded = player . hasEnded ; Video state var videoState = player . videoState ; or var videoStateString = player . videoStateString ; -1 : unstarted 0 : ended 1 : playing 2 : paused 3 : buffering 5 : cued Events \u00b6 Youtube player api ready player . on ( 'ready' , function ( player ){ }, scope ); State change player . on ( 'statechange' , function ( player ){ }, scope ); State : player.videoState Unstarted player . on ( 'unstarted' , function ( player ){ }, scope ); Playing player . on ( 'playing' , function ( player ){ }, scope ); Pause player . on ( 'pause' , function ( player ){ }, scope ); Ended player . on ( 'ended' , function ( player ){ }, scope ); Buffering player . on ( 'buffering' , function ( player ){ }, scope ); Video cued player . on ( 'cued' , function ( player ){ }, scope ); Error player . on ( 'error' , function ( player , errorMessage ){ }, scope ); No Playback time changed event Get playback time every tick might cause playing video lagging.","title":"Youtube player"},{"location":"youtubeplayer/#introduction","text":"Play youtube video on iframe. Author: Rex DOM Game object","title":"Introduction"},{"location":"youtubeplayer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"youtubeplayer/#usage","text":"Sample code","title":"Usage"},{"location":"youtubeplayer/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexYoutubePlayerPlugin' , plugin : YoutubePlayerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"youtubeplayer/#add-youtube-player-object","text":"Youtube player on DOM var player = scene . add . rexYoutubePlayer ( x , y , width , height , config ); // var player = scene.add.rexYoutubePlayer(x, y, config); // var player = scene.add.rexYoutubePlayer(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , videoId : '' , autoPlay : true , controls : false , keyboardControl : true , modestBranding : false , loop : false , } x , y : Position width , height : Size of element videoId : The YouTube video ID that identifies the video that the player will load. autoPlay : Automatically start to play when the player loads. controls : Whether the video player controls are displayed. keyboardControl : Set false to disable keyboard controls. modestBranding : Set false to prevent the YouTube logo from displaying in the control bar. loop : Play video when ended.","title":"Add youtube player object"},{"location":"youtubeplayer/#custom-class","text":"Define class class MyYoutubePlayer extends YoutubePlayer { // or YoutubePlayerCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta) // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var player = new MyYoutubePlayer ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"youtubeplayer/#load","text":"player . load ( videoId ); // player.load(videoId, autoPlay);","title":"Load"},{"location":"youtubeplayer/#play","text":"player . play ();","title":"Play"},{"location":"youtubeplayer/#pause","text":"player . pause ();","title":"Pause"},{"location":"youtubeplayer/#playback-time","text":"Get var playbackTime = player . playbackTime ; // time in seconds var t = player . t ; // t: 0~1 Set player . setPlaybackTime ( time ); // time in seconds // player.playbackTime = time; player . setT ( t ); // t: 0~1 // player.t = t;","title":"Playback time"},{"location":"youtubeplayer/#duration","text":"var duration = player . duration ; // time in seconds","title":"Duration"},{"location":"youtubeplayer/#volume","text":"Get var volume = player . volume ; // volume: 0~1 Set player . setVolume ( volume ); // volume: 0~1 // player.volume = volume;","title":"Volume"},{"location":"youtubeplayer/#mute","text":"Get var muted = player . muted ; // muted: true/false Set player . setMute ( muted ); // muted: true/false // player.muted = muted;","title":"Mute"},{"location":"youtubeplayer/#loop","text":"Get var loop = player . loop ; // loop: true/false Set player . setLoop ( loop ); // loop: true/false // player.loop = loop;","title":"Loop"},{"location":"youtubeplayer/#resize","text":"player . resize ( width , height );","title":"Resize"},{"location":"youtubeplayer/#status","text":"Is playing var isPlaying = player . isPlaying ; Is paused var isPaused = player . isPaused ; Has end var hasEnded = player . hasEnded ; Video state var videoState = player . videoState ; or var videoStateString = player . videoStateString ; -1 : unstarted 0 : ended 1 : playing 2 : paused 3 : buffering 5 : cued","title":"Status"},{"location":"youtubeplayer/#events","text":"Youtube player api ready player . on ( 'ready' , function ( player ){ }, scope ); State change player . on ( 'statechange' , function ( player ){ }, scope ); State : player.videoState Unstarted player . on ( 'unstarted' , function ( player ){ }, scope ); Playing player . on ( 'playing' , function ( player ){ }, scope ); Pause player . on ( 'pause' , function ( player ){ }, scope ); Ended player . on ( 'ended' , function ( player ){ }, scope ); Buffering player . on ( 'buffering' , function ( player ){ }, scope ); Video cued player . on ( 'cued' , function ( player ){ }, scope ); Error player . on ( 'error' , function ( player , errorMessage ){ }, scope ); No Playback time changed event Get playback time every tick might cause playing video lagging.","title":"Events"},{"location":"zone/","text":"Introduction \u00b6 Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add zone object \u00b6 var zone = scene . add . zone ( x , y , width , height ); Add zone from JSON var zone = scene . make . zone ({ x : 0 , y : 0 , //width: 1, //height: 1 }); Custom class \u00b6 Define class class MyZone extends Phaser . GameObjects . Zone { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var zone = new MyZone ( x , y , width , height ); Other properties \u00b6 See game object Input hit zone \u00b6 zone . setInteractive (); See touch events Drop zones \u00b6 Rectangle drop zone zone . setRectangleDropZone ( width , height ); Circular drop zone zone . setCircleDropZone ( radius ); Custom drop zone zone . setInteractive ( shape , callback , true ); callback function ( shape , x , y , gameObject ) { return hit ; // true/false } See drop zone","title":"Zone"},{"location":"zone/#introduction","text":"Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"zone/#usage","text":"","title":"Usage"},{"location":"zone/#add-zone-object","text":"var zone = scene . add . zone ( x , y , width , height ); Add zone from JSON var zone = scene . make . zone ({ x : 0 , y : 0 , //width: 1, //height: 1 });","title":"Add zone object"},{"location":"zone/#custom-class","text":"Define class class MyZone extends Phaser . GameObjects . Zone { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var zone = new MyZone ( x , y , width , height );","title":"Custom class"},{"location":"zone/#other-properties","text":"See game object","title":"Other properties"},{"location":"zone/#input-hit-zone","text":"zone . setInteractive (); See touch events","title":"Input hit zone"},{"location":"zone/#drop-zones","text":"Rectangle drop zone zone . setRectangleDropZone ( width , height ); Circular drop zone zone . setCircleDropZone ( radius ); Custom drop zone zone . setInteractive ( shape , callback , true ); callback function ( shape , x , y , gameObject ) { return hit ; // true/false } See drop zone","title":"Drop zones"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Phaser \u00b6 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. List of my plugins \u00b6 Anchor : Set position based on visible window. AwaitLoader : Await custom task in preload stage. Away time : Get time from previous closing application to now. BBCodeText : Drawing text with BBCode protocol. Board : Core object of Board system. Board/Field of view : Visible testing, to find field of view. Board/Hexagon map : Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Board/Match : Get matched chess. Board/Mini board : Chess Container, to rotate/mirror/drag chess together. Board/Monopoly : Move through path tiles. Board/Move To : Move chess towards target position with a steady speed. Board/Path finder : Find moveable area or moving path. Board/Shape : Grid (polygon) shape object. Build arcade object : Create arcade body, and inject arcade object methods. Buff data : Data manager with buffs. Bullet : Move game object toward current angle of game object, with a constant speed. Button : Fires 'click' event when touch releasd after pressed. Canvas : Drawing on canvas . Canvas image data : Get image data from texture, or text object. Circle mask image : Load a texture, then apply a circle mask. Clock : A clock to count elapsed time. Conditions table : Check conditions to find passed tests listed in a csv table. ContainerLite : Control the position and angle of children game objects. CSV-scenario : Run script in csv format. CSV-to-hash-table : Hash table indexed by (col-key, row-key) from csv string. Cursor at bound : Map position pf cursor to cursor key state. Drag : Drag game object. Drag-rotate : Get dragging angle around a specific point. Eight direction : Move game object by cursor keys, with a constant speed. Fade-out-destroy : Fade out game object then destroy it. Fade-volume : Fade-in/fade-out volume of sound. Flash : Flashing (set invisible then visible) game object. Flip : Flipping game object to another face by scaling width/height. FSM : Finite state machine. Gashapon : Pick random item from box. Gesture/Pan : Get pan events of a game object. Gesture/Pinch : Get scale factor from 2 dragging touch pointers. Gesture/Press : Get press events of a game object. Gesture/Rotate : Get spin angle from 2 dragging touch pointers. Gesture/Swipe : Get swipe events of a game object. Gesture/Tap : Get tap/multi-taps events of a game object. Grid align : Align objects on quadrilateral or hexagon grid. Grid table : Viewer of grid table, to manipulate game object of each visible cell. Hexagon : Hexagon shape and methods. Input text : Input DOM element. Interception : Predict the intersection position of two game objects with constant moving speed. Life time : Destroy game object when time-out. Line : Draw a line with start/end/body textures. LZ-string : Compress string using LZ-based compression algorithm. Mouse-wheel to up/down : Map mouse-wheeling to (up/down) cursor key state. Move to : Move game object towards target position with a steady speed. Nine patch : Stretchable image. Path follower : Set position of game object on a path. Perlin : Perlin2/Perlin3 noise and simplex2/simplex3 noise. Pop up : Scale up game object. Quest : Question manager. Random place : Place objects randomly inside an area without overlapping. Restorable data : Restorable data manager. Rhombus : Rhombus shape and methods. RotateTo : Rotate game object towards target position with a steady speed. Round-Rectangle : Round rectangle shape. Run-commands : Run commands in array. Scale-down-destroy : Scale down game object then destroy it. Scroller : Drag content. Slow down when dragging released, pull back when out of bounds. Sequence : Run sequence commands in array. Shader/gray-scale : Gray scale post processing filter. Shader/hsl-adjust : Adjust color in HSL domain, post processing filter. Shader/inverse : Inverse color post processing filter. Shader/pixelation : Pixelation post processing filter. Shader/swirl : Swirl post processing filter. Shader/toonify : Draw outlines and quantize color in HSV domain, post processing filter. Shake-position : Shake position of game object. Slider : Drag thumb on a slider bar. Ship : Move game object as a space ship by cursor keys. TagText : Displays text with multi-color, font face, or font size with tags. TCRP.Player : Run commands on time. TCRP.Recorder : Store commands with time. Text/edit : Create an input text object above a text object to edit string content. Text/typing : Typing text on text object. Text/page : Display text page by page on text object. UI/buttons : A container with a group of buttons. UI/chart : Draw chart on canvas. UI/dialog : A container with a title, content, buttons and backgrounds. UI/fixwidthsizer : Layout children game objects into lines. UI/grid sizer : Layout children game objects in grids. UI/gird table : A container with a grid table, slider, and scroller. UI/label : A game object container with an icon, text, and background. UI/menu : A container with buttons and sub-menu. UI/number bar : A container with an icon, slider, text, and background. UI/pages : A container with pages, only current page is visible. UI/Scroll-able panel : A container with a panel, slider, and scroller. UI/sizer : Layout children game objects. UI/slider : A container with a track, indicator, thumb and background. UI/tabs : A container with 4 groups of buttons around a center panel. UI/text area : A container with a text, slider, and scroller. UI/text box : A container with an icon, (typing and paging) text, and background. UI/toast : Show text message for a short while. Virtual joystick : Simulate curosr keys according touch events. Wait events : Wait fired events or callbacks. Webfont-loader : Load web font by google webfont loader in preload stage. XOR : Encrypt or decrypt string by XOR algorithm. Youtube player : Play youtube video on iframe. Deprecated \u00b6 Video : Play video on DOM, or on canvas. Links \u00b6 Bug report or suggestion Discord channel","title":"Home"},{"location":"#phaser","text":"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.","title":"Phaser"},{"location":"#list-of-my-plugins","text":"Anchor : Set position based on visible window. AwaitLoader : Await custom task in preload stage. Away time : Get time from previous closing application to now. BBCodeText : Drawing text with BBCode protocol. Board : Core object of Board system. Board/Field of view : Visible testing, to find field of view. Board/Hexagon map : Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Board/Match : Get matched chess. Board/Mini board : Chess Container, to rotate/mirror/drag chess together. Board/Monopoly : Move through path tiles. Board/Move To : Move chess towards target position with a steady speed. Board/Path finder : Find moveable area or moving path. Board/Shape : Grid (polygon) shape object. Build arcade object : Create arcade body, and inject arcade object methods. Buff data : Data manager with buffs. Bullet : Move game object toward current angle of game object, with a constant speed. Button : Fires 'click' event when touch releasd after pressed. Canvas : Drawing on canvas . Canvas image data : Get image data from texture, or text object. Circle mask image : Load a texture, then apply a circle mask. Clock : A clock to count elapsed time. Conditions table : Check conditions to find passed tests listed in a csv table. ContainerLite : Control the position and angle of children game objects. CSV-scenario : Run script in csv format. CSV-to-hash-table : Hash table indexed by (col-key, row-key) from csv string. Cursor at bound : Map position pf cursor to cursor key state. Drag : Drag game object. Drag-rotate : Get dragging angle around a specific point. Eight direction : Move game object by cursor keys, with a constant speed. Fade-out-destroy : Fade out game object then destroy it. Fade-volume : Fade-in/fade-out volume of sound. Flash : Flashing (set invisible then visible) game object. Flip : Flipping game object to another face by scaling width/height. FSM : Finite state machine. Gashapon : Pick random item from box. Gesture/Pan : Get pan events of a game object. Gesture/Pinch : Get scale factor from 2 dragging touch pointers. Gesture/Press : Get press events of a game object. Gesture/Rotate : Get spin angle from 2 dragging touch pointers. Gesture/Swipe : Get swipe events of a game object. Gesture/Tap : Get tap/multi-taps events of a game object. Grid align : Align objects on quadrilateral or hexagon grid. Grid table : Viewer of grid table, to manipulate game object of each visible cell. Hexagon : Hexagon shape and methods. Input text : Input DOM element. Interception : Predict the intersection position of two game objects with constant moving speed. Life time : Destroy game object when time-out. Line : Draw a line with start/end/body textures. LZ-string : Compress string using LZ-based compression algorithm. Mouse-wheel to up/down : Map mouse-wheeling to (up/down) cursor key state. Move to : Move game object towards target position with a steady speed. Nine patch : Stretchable image. Path follower : Set position of game object on a path. Perlin : Perlin2/Perlin3 noise and simplex2/simplex3 noise. Pop up : Scale up game object. Quest : Question manager. Random place : Place objects randomly inside an area without overlapping. Restorable data : Restorable data manager. Rhombus : Rhombus shape and methods. RotateTo : Rotate game object towards target position with a steady speed. Round-Rectangle : Round rectangle shape. Run-commands : Run commands in array. Scale-down-destroy : Scale down game object then destroy it. Scroller : Drag content. Slow down when dragging released, pull back when out of bounds. Sequence : Run sequence commands in array. Shader/gray-scale : Gray scale post processing filter. Shader/hsl-adjust : Adjust color in HSL domain, post processing filter. Shader/inverse : Inverse color post processing filter. Shader/pixelation : Pixelation post processing filter. Shader/swirl : Swirl post processing filter. Shader/toonify : Draw outlines and quantize color in HSV domain, post processing filter. Shake-position : Shake position of game object. Slider : Drag thumb on a slider bar. Ship : Move game object as a space ship by cursor keys. TagText : Displays text with multi-color, font face, or font size with tags. TCRP.Player : Run commands on time. TCRP.Recorder : Store commands with time. Text/edit : Create an input text object above a text object to edit string content. Text/typing : Typing text on text object. Text/page : Display text page by page on text object. UI/buttons : A container with a group of buttons. UI/chart : Draw chart on canvas. UI/dialog : A container with a title, content, buttons and backgrounds. UI/fixwidthsizer : Layout children game objects into lines. UI/grid sizer : Layout children game objects in grids. UI/gird table : A container with a grid table, slider, and scroller. UI/label : A game object container with an icon, text, and background. UI/menu : A container with buttons and sub-menu. UI/number bar : A container with an icon, slider, text, and background. UI/pages : A container with pages, only current page is visible. UI/Scroll-able panel : A container with a panel, slider, and scroller. UI/sizer : Layout children game objects. UI/slider : A container with a track, indicator, thumb and background. UI/tabs : A container with 4 groups of buttons around a center panel. UI/text area : A container with a text, slider, and scroller. UI/text box : A container with an icon, (typing and paging) text, and background. UI/toast : Show text message for a short while. Virtual joystick : Simulate curosr keys according touch events. Wait events : Wait fired events or callbacks. Webfont-loader : Load web font by google webfont loader in preload stage. XOR : Encrypt or decrypt string by XOR algorithm. Youtube player : Play youtube video on iframe.","title":"List of my plugins"},{"location":"#deprecated","text":"Video : Play video on DOM, or on canvas.","title":"Deprecated"},{"location":"#links","text":"Bug report or suggestion Discord channel","title":"Links"},{"location":"anchor/","text":"Introduction \u00b6 Set position based on visible window. Note Visible window will be changed when scale mode is ENVELOP , WIDTH_CONTROLS_HEIGHT , or HEIGHT_CONTROLS_WIDTH . Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexAnchor from './plugins/anchor.js' ; Install global plugin \u00b6 Install plugin in configuration of game import AnchorPlugin from './plugins/anchor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAnchor' , plugin : AnchorPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var anchor = scene . plugins . get ( 'rexAnchor' ). add ( gameObject , { // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }); left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' } Reset config \u00b6 anchor . resetFromJSON ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n'","title":"Anchor"},{"location":"anchor/#introduction","text":"Set position based on visible window. Note Visible window will be changed when scale mode is ENVELOP , WIDTH_CONTROLS_HEIGHT , or HEIGHT_CONTROLS_WIDTH . Author: Rex Behavior of game object","title":"Introduction"},{"location":"anchor/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"anchor/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"anchor/#import-class","text":"import rexAnchor from './plugins/anchor.js' ;","title":"Import class"},{"location":"anchor/#install-global-plugin","text":"Install plugin in configuration of game import AnchorPlugin from './plugins/anchor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAnchor' , plugin : AnchorPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"anchor/#create-instance","text":"var anchor = scene . plugins . get ( 'rexAnchor' ). add ( gameObject , { // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }); left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' }","title":"Create instance"},{"location":"anchor/#reset-config","text":"anchor . resetFromJSON ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n'","title":"Reset config"},{"location":"angle/","text":"Introduction \u00b6 Convert angle value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Degree <-> Radians \u00b6 Degree to radians var rad = Phaser . Math . DegToRad ( deg ); Radians to degree var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Wrap \u00b6 Wrap angle (radians) in the range of -PI to PI var rad = Phaser . Math . Angle . Wrap ( angle ); Wrap angle (radians) in the range of 0 to 2*PI var rad = Phaser . Math . Angle . Normalize ( angle ); Wrap angle (degrees) in the range of -180 to 180 var deg = Phaser . Math . Angle . WrapDegrees ( angle ); Angle between points \u00b6 Angle from (0,0) to vector (x2 - x1 , y2 - y1) var rad = Phaser . Math . Angle . Between ( x1 , y1 , x2 , y2 ); var rad = Phaser . Math . Angle . BetweenPoints ( point1 , point2 ); Angle between angles \u00b6 Shortest angle (degrees) between 2 angles var deg = Phaser . Math . Angle . ShortestBetween ( angle1 , angle2 ) angle1 , angle2 : Angle in degrees in the range of -180 to 180 deg : Shortest angle in degrees deg > 0 : Counter-ClockWise rotation deg < 0 : ClockWise rotation Rotate around position \u00b6 Rotate a point around x and y by the given angle . var out = Phaser . Math . RotateAround ( point , x , y , angle ); Rotate a point around x and y by the given angle and distance . var out = Phaser . Math . RotateAroundDistance ( point , x , y , angle , distance );","title":"Angle"},{"location":"angle/#introduction","text":"Convert angle value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"angle/#usage","text":"","title":"Usage"},{"location":"angle/#degree-radians","text":"Degree to radians var rad = Phaser . Math . DegToRad ( deg ); Radians to degree var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180","title":"Degree &lt;-&gt; Radians"},{"location":"angle/#wrap","text":"Wrap angle (radians) in the range of -PI to PI var rad = Phaser . Math . Angle . Wrap ( angle ); Wrap angle (radians) in the range of 0 to 2*PI var rad = Phaser . Math . Angle . Normalize ( angle ); Wrap angle (degrees) in the range of -180 to 180 var deg = Phaser . Math . Angle . WrapDegrees ( angle );","title":"Wrap"},{"location":"angle/#angle-between-points","text":"Angle from (0,0) to vector (x2 - x1 , y2 - y1) var rad = Phaser . Math . Angle . Between ( x1 , y1 , x2 , y2 ); var rad = Phaser . Math . Angle . BetweenPoints ( point1 , point2 );","title":"Angle between points"},{"location":"angle/#angle-between-angles","text":"Shortest angle (degrees) between 2 angles var deg = Phaser . Math . Angle . ShortestBetween ( angle1 , angle2 ) angle1 , angle2 : Angle in degrees in the range of -180 to 180 deg : Shortest angle in degrees deg > 0 : Counter-ClockWise rotation deg < 0 : ClockWise rotation","title":"Angle between angles"},{"location":"angle/#rotate-around-position","text":"Rotate a point around x and y by the given angle . var out = Phaser . Math . RotateAround ( point , x , y , angle ); Rotate a point around x and y by the given angle and distance . var out = Phaser . Math . RotateAroundDistance ( point , x , y , angle , distance );","title":"Rotate around position"},{"location":"animation/","text":"Introduction \u00b6 Animation and animations manager. Author: Richard Davey Usage \u00b6 Animation manager \u00b6 Add animation \u00b6 scene . anims . create ({ key : '' , frames : [], defaultTextureKey : null , // time delay : 0 , frameRate : null , duration : null , skipMissedFrames : true , // repeat repeat : 0 , // set to (-1) to repeat forever repeatDelay : 0 , yoyo : false , // visible showOnStart : false , hideOnComplete : false }); frames : An array of {key, frame} Properties { key : '' , frame : '' , // string, or number duration : 0 , visible : true } Every frame in the atlas scene . anims . generateFrameNames ( key ); Frame sequence indexing from start to end var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , start : 0 , end : 0 , suffix : '' , zeroPad : 0 , // outputArray: [], // Append frames into this array }); prefix + Pad(i, zeroPad, '0', 1) + suffix , i: start ~ end Custom frame sequence var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , suffix : '' , zeroPad : 0 , frames : [ ... ] // outputArray: [], // Append frames into this array }); prefix + Pad(frames[i], zeroPad, '0', 1) + suffix Remove animation \u00b6 scene . anims . remove ( key ); Play animation \u00b6 Play scene . anims . play ( key , children ); Stagger play (delay play) scene . anims . staggerPlay ( key , children , stagger ); children : An array of Game Objects to play the animation on stagger : The amount of time, in milliseconds, to offset each play time by Pause all animations \u00b6 scene . anims . pauseAll (); Resume all animations \u00b6 scene . anims . resumeAll (); Reverse animation \u00b6 scene . anims . reverse ( key ); Has animation \u00b6 var exists = scene . anims . exists ( key ); Export/load \u00b6 Export JSON var json = scene . anims . toJSON (); Load from JSON scene . anims . fromJSON ( json ); Load JSON in preload stage javascript scene.load.json(key, url); Load animation in preload stage scene . load . animation ( key , url ); Events \u00b6 On add animation scene . anims . on ( 'add' , function ( key , anim ) {}); On remove animation scene . anims . on ( 'remove' , function ( key , anim ) {}); On pause all animations scene . anims . on ( 'pauseall' , function () {}); On resume all animations scene . anims . on ( 'resumeall' , function () {}); Animation object \u00b6 var anim = scene . anims . get ( key ); Add frame \u00b6 Append frames anim . addFrame ( frame ); frame : scene.anims.generateFrameNames(key, config) Insert frames at index anim . addFrameAt ( index , frame ); frame : scene.anims.generateFrameNames(key, config) Remove frame \u00b6 Remove frame at anim . removeFrameAt ( index ); Remove frame anim . removeFrame ( frame ); Get frame \u00b6 Has frame index var HasFrameAt = anim . checkFrame ( index ); Get frame at index var frame = anim . getFrameAt ( index ); Get last frame var frame = anim . getLastFrame (); Export \u00b6 Export JSON var json = anim . toJSON (); or var jsonString = JSON . stringify ( anim ); Events \u00b6 On start anim . on ( 'start' , function ( currentAnim , currentFrame , sprite ){}); On restart anim . on ( 'restart' , function ( currentAnim , currentFrame , sprite ){}); On complete anim . on ( 'complete' , function ( currentAnim , currentFrame , sprite ){}); On repeat anim . on ( 'repeat' , function ( currentAnim , currentFrame , sprite ){});","title":"Animation"},{"location":"animation/#introduction","text":"Animation and animations manager. Author: Richard Davey","title":"Introduction"},{"location":"animation/#usage","text":"","title":"Usage"},{"location":"animation/#animation-manager","text":"","title":"Animation manager"},{"location":"animation/#add-animation","text":"scene . anims . create ({ key : '' , frames : [], defaultTextureKey : null , // time delay : 0 , frameRate : null , duration : null , skipMissedFrames : true , // repeat repeat : 0 , // set to (-1) to repeat forever repeatDelay : 0 , yoyo : false , // visible showOnStart : false , hideOnComplete : false }); frames : An array of {key, frame} Properties { key : '' , frame : '' , // string, or number duration : 0 , visible : true } Every frame in the atlas scene . anims . generateFrameNames ( key ); Frame sequence indexing from start to end var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , start : 0 , end : 0 , suffix : '' , zeroPad : 0 , // outputArray: [], // Append frames into this array }); prefix + Pad(i, zeroPad, '0', 1) + suffix , i: start ~ end Custom frame sequence var config = ; scene . anims . generateFrameNames ( key , { prefix : '' , suffix : '' , zeroPad : 0 , frames : [ ... ] // outputArray: [], // Append frames into this array }); prefix + Pad(frames[i], zeroPad, '0', 1) + suffix","title":"Add animation"},{"location":"animation/#remove-animation","text":"scene . anims . remove ( key );","title":"Remove animation"},{"location":"animation/#play-animation","text":"Play scene . anims . play ( key , children ); Stagger play (delay play) scene . anims . staggerPlay ( key , children , stagger ); children : An array of Game Objects to play the animation on stagger : The amount of time, in milliseconds, to offset each play time by","title":"Play animation"},{"location":"animation/#pause-all-animations","text":"scene . anims . pauseAll ();","title":"Pause all animations"},{"location":"animation/#resume-all-animations","text":"scene . anims . resumeAll ();","title":"Resume all animations"},{"location":"animation/#reverse-animation","text":"scene . anims . reverse ( key );","title":"Reverse animation"},{"location":"animation/#has-animation","text":"var exists = scene . anims . exists ( key );","title":"Has animation"},{"location":"animation/#exportload","text":"Export JSON var json = scene . anims . toJSON (); Load from JSON scene . anims . fromJSON ( json ); Load JSON in preload stage javascript scene.load.json(key, url); Load animation in preload stage scene . load . animation ( key , url );","title":"Export/load"},{"location":"animation/#events","text":"On add animation scene . anims . on ( 'add' , function ( key , anim ) {}); On remove animation scene . anims . on ( 'remove' , function ( key , anim ) {}); On pause all animations scene . anims . on ( 'pauseall' , function () {}); On resume all animations scene . anims . on ( 'resumeall' , function () {});","title":"Events"},{"location":"animation/#animation-object","text":"var anim = scene . anims . get ( key );","title":"Animation object"},{"location":"animation/#add-frame","text":"Append frames anim . addFrame ( frame ); frame : scene.anims.generateFrameNames(key, config) Insert frames at index anim . addFrameAt ( index , frame ); frame : scene.anims.generateFrameNames(key, config)","title":"Add frame"},{"location":"animation/#remove-frame","text":"Remove frame at anim . removeFrameAt ( index ); Remove frame anim . removeFrame ( frame );","title":"Remove frame"},{"location":"animation/#get-frame","text":"Has frame index var HasFrameAt = anim . checkFrame ( index ); Get frame at index var frame = anim . getFrameAt ( index ); Get last frame var frame = anim . getLastFrame ();","title":"Get frame"},{"location":"animation/#export","text":"Export JSON var json = anim . toJSON (); or var jsonString = JSON . stringify ( anim );","title":"Export"},{"location":"animation/#events_1","text":"On start anim . on ( 'start' , function ( currentAnim , currentFrame , sprite ){}); On restart anim . on ( 'restart' , function ( currentAnim , currentFrame , sprite ){}); On complete anim . on ( 'complete' , function ( currentAnim , currentFrame , sprite ){}); On repeat anim . on ( 'repeat' , function ( currentAnim , currentFrame , sprite ){});","title":"Events"},{"location":"arcade-body/","text":"Introduction \u00b6 Arcade physics body. Author: Richard Davey Usage \u00b6 Get physics body \u00b6 Enable physics world Add existing game object(s) to physics world Add a game object var gameObject = scene . physics . add . existing ( gameObject , isStatic ); isStatic : 0 : Dynamic body 1 : Static body Add game objects scene . physics . world . enable ( gameObjects , isStatic ); gameObjects : An array of game objects, or a group object isStatic : 0 : Dynamic body 1 : Static body Get physics body var body = gameObject . body ; Enable \u00b6 Whether this Body is updated by the physics simulation. Enable (default) body . setEnable (); or body . enable = true ; Disable body . setEnable ( false ); or body . enable = false ; Get var enable = body . moves ; Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity. Enable (default) body . moves = true ; Disable body . moves = false ; Get var moves = body . moves ; Use case Set body.moves to false when game object is controlled by tween or dragging. Destroy \u00b6 Physics body will be destroyed automatically when game object is destroyed. Movement \u00b6 Velocity \u00b6 Set body . setVelocity ( x , y ); or body . setVelocityX ( x ); body . setVelocityY ( x ); Get var vx = body . velocity . x ; var vy = body . velocity . y ; Max speed \u00b6 Set body . setMaxSpeed ( speed ); Get var speed = body . maxSpeed ; Max velocity \u00b6 Set body . setMaxVelocity ( x , y ); Get var vx = body . maxVelocity . x ; var vy = body . maxVelocity . y ; Acceleration \u00b6 Set body . setAcceleration ( x , y ); or body . setAccelerationX ( x ); body . setAccelerationY ( y ); Get var ax = body . acceleration . x ; var ay = body . acceleration . y ; Gravity \u00b6 Set body . setGravity ( x , y ); or body . setGravityX ( x ); body . setGravityY ( y ); Get var gx = body . gravity . x ; var gy = body . gravity . y ; Enables (default) body . setAllowGravity (); Disable body . setAllowGravity ( false ); Drag \u00b6 Reduces speed per second. Set body . setDrag ( x , y ); or body . setDragX ( x ); body . setDragY ( y ); Get var dx = body . drag . x ; var dy = body . drag . y ; Enables (default) body . setAllowDrag (); Disable body . setAllowDrag ( false ); Enable damping (default: false) body . useDamping = true ; Reset position \u00b6 body . reset ( x , y ); Stop \u00b6 Sets acceleration, velocity, and speed to zero. body . stop (); Immovable \u00b6 Enable body . setImmovable (); Disable (defalut) body . setImmovable ( false ); Get var immovable = body . immovable ; Friction \u00b6 If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set body . setFriction ( x , y ); or body . setFrictionX ( x ); body . setFrictionY ( y ); Get var fx = body . friction . x ; var fy = body . friction . y ; Speed \u00b6 The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step. var dx = body . deltaAbsX (); var dy = body . deltaAbsY (); Rotation \u00b6 Allow rotation \u00b6 Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = body . allowRotation ; Angular velocity \u00b6 Set body . setAngularVelocity ( v ); Get var av = body . angularVelocity ; Angular acceleration \u00b6 Set body . setAngularAcceleration ( v ); Get var aa = body . angularAcceleration ; Angular drag \u00b6 Reduces angular speed per second. Set body . setAngularDrag ( v ); Get var ad = body . angularDrag ; Collision \u00b6 Collision bound \u00b6 Rectangle body . setSize ( width , height , center ); center : false to set body's offset to (0, 0). Not work in Graphics object. Circle body . setCircle ( radius , offsetX , offsetY ); Offset \u00b6 body . setOffset ( x , y ); Push out \u00b6 scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects) Callbacks \u00b6 Add collider Point inside \u00b6 var hit = body . hitTest ( x , y ); Is colliding \u00b6 Is colliding this tick var isColliding = body . touching ; isColliding : { none : true , up : true , down : true , left : true , right : true } Was colliding previous tick var wasColliding = body . wasTouching ; wasColliding : { none : true , up : true , down : true , left : true , right : true } Bounce \u00b6 Set body . setBounce ( x , y ); or body . setBounceX ( x ); body . setBounceY ( y ); Get var bx = body . bounce . x ; var by = body . bounce . y ; World bounds \u00b6 Default world bounds Custom world bounds : body . setBoundsRectangle ( bounds ); bounds : A rectangle object . Enable body . setCollideWorldBounds (); Disable (default) body . setCollideWorldBounds ( false ); Get world bounds rectangle var top = body . world . bounds . top ; var bottom = body . world . bounds . bottom ; var left = body . world . bounds . left ; var right = body . world . bounds . right ; Blocked \u00b6 Whether this Body is colliding with a tile or the world boundary. Blocked when moveing down var onFloor = body . onFloor (); // blocked.down Blocked when moveing up var onCeiling = body . onCeiling (); // blocked.up Blocked when moveing left or right var onWall = body . onWall (); // blocked.left || this.blocked.right State var blocked = body . blocked ; blocked : { none : true , up : false , down : false , left : false , right : false } Mass \u00b6 Set body . setMass ( m ); Get var m = body . mass ; Static body \u00b6 Sync \u00b6 Syncs the Bodies position and size with its parent Game Object. body . updateFromGameObject (); Debug \u00b6 Bounds of Body Enable drawing body body . debugShowBody = true ; Color body . debugBodyColor = 0xff00ff ; Direction and magnitude of velocity Enable drawing body body . debugShowVelocity = true ;","title":"Body"},{"location":"arcade-body/#introduction","text":"Arcade physics body. Author: Richard Davey","title":"Introduction"},{"location":"arcade-body/#usage","text":"","title":"Usage"},{"location":"arcade-body/#get-physics-body","text":"Enable physics world Add existing game object(s) to physics world Add a game object var gameObject = scene . physics . add . existing ( gameObject , isStatic ); isStatic : 0 : Dynamic body 1 : Static body Add game objects scene . physics . world . enable ( gameObjects , isStatic ); gameObjects : An array of game objects, or a group object isStatic : 0 : Dynamic body 1 : Static body Get physics body var body = gameObject . body ;","title":"Get physics body"},{"location":"arcade-body/#enable","text":"Whether this Body is updated by the physics simulation. Enable (default) body . setEnable (); or body . enable = true ; Disable body . setEnable ( false ); or body . enable = false ; Get var enable = body . moves ; Whether the Body's position and rotation are affected by its velocity, acceleration, drag, and gravity. Enable (default) body . moves = true ; Disable body . moves = false ; Get var moves = body . moves ; Use case Set body.moves to false when game object is controlled by tween or dragging.","title":"Enable"},{"location":"arcade-body/#destroy","text":"Physics body will be destroyed automatically when game object is destroyed.","title":"Destroy"},{"location":"arcade-body/#movement","text":"","title":"Movement"},{"location":"arcade-body/#velocity","text":"Set body . setVelocity ( x , y ); or body . setVelocityX ( x ); body . setVelocityY ( x ); Get var vx = body . velocity . x ; var vy = body . velocity . y ;","title":"Velocity"},{"location":"arcade-body/#max-speed","text":"Set body . setMaxSpeed ( speed ); Get var speed = body . maxSpeed ;","title":"Max speed"},{"location":"arcade-body/#max-velocity","text":"Set body . setMaxVelocity ( x , y ); Get var vx = body . maxVelocity . x ; var vy = body . maxVelocity . y ;","title":"Max velocity"},{"location":"arcade-body/#acceleration","text":"Set body . setAcceleration ( x , y ); or body . setAccelerationX ( x ); body . setAccelerationY ( y ); Get var ax = body . acceleration . x ; var ay = body . acceleration . y ;","title":"Acceleration"},{"location":"arcade-body/#gravity","text":"Set body . setGravity ( x , y ); or body . setGravityX ( x ); body . setGravityY ( y ); Get var gx = body . gravity . x ; var gy = body . gravity . y ; Enables (default) body . setAllowGravity (); Disable body . setAllowGravity ( false );","title":"Gravity"},{"location":"arcade-body/#drag","text":"Reduces speed per second. Set body . setDrag ( x , y ); or body . setDragX ( x ); body . setDragY ( y ); Get var dx = body . drag . x ; var dy = body . drag . y ; Enables (default) body . setAllowDrag (); Disable body . setAllowDrag ( false ); Enable damping (default: false) body . useDamping = true ;","title":"Drag"},{"location":"arcade-body/#reset-position","text":"body . reset ( x , y );","title":"Reset position"},{"location":"arcade-body/#stop","text":"Sets acceleration, velocity, and speed to zero. body . stop ();","title":"Stop"},{"location":"arcade-body/#immovable","text":"Enable body . setImmovable (); Disable (defalut) body . setImmovable ( false ); Get var immovable = body . immovable ;","title":"Immovable"},{"location":"arcade-body/#friction","text":"If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set body . setFriction ( x , y ); or body . setFrictionX ( x ); body . setFrictionY ( y ); Get var fx = body . friction . x ; var fy = body . friction . y ;","title":"Friction"},{"location":"arcade-body/#speed","text":"The absolute (non-negative) change in this Body's horizontal/vertical position from the previous step. var dx = body . deltaAbsX (); var dy = body . deltaAbsY ();","title":"Speed"},{"location":"arcade-body/#rotation","text":"","title":"Rotation"},{"location":"arcade-body/#allow-rotation","text":"Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = body . allowRotation ;","title":"Allow rotation"},{"location":"arcade-body/#angular-velocity","text":"Set body . setAngularVelocity ( v ); Get var av = body . angularVelocity ;","title":"Angular velocity"},{"location":"arcade-body/#angular-acceleration","text":"Set body . setAngularAcceleration ( v ); Get var aa = body . angularAcceleration ;","title":"Angular acceleration"},{"location":"arcade-body/#angular-drag","text":"Reduces angular speed per second. Set body . setAngularDrag ( v ); Get var ad = body . angularDrag ;","title":"Angular drag"},{"location":"arcade-body/#collision","text":"","title":"Collision"},{"location":"arcade-body/#collision-bound","text":"Rectangle body . setSize ( width , height , center ); center : false to set body's offset to (0, 0). Not work in Graphics object. Circle body . setCircle ( radius , offsetX , offsetY );","title":"Collision bound"},{"location":"arcade-body/#offset","text":"body . setOffset ( x , y );","title":"Offset"},{"location":"arcade-body/#push-out","text":"scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects)","title":"Push out"},{"location":"arcade-body/#callbacks","text":"Add collider","title":"Callbacks"},{"location":"arcade-body/#point-inside","text":"var hit = body . hitTest ( x , y );","title":"Point inside"},{"location":"arcade-body/#is-colliding","text":"Is colliding this tick var isColliding = body . touching ; isColliding : { none : true , up : true , down : true , left : true , right : true } Was colliding previous tick var wasColliding = body . wasTouching ; wasColliding : { none : true , up : true , down : true , left : true , right : true }","title":"Is colliding"},{"location":"arcade-body/#bounce","text":"Set body . setBounce ( x , y ); or body . setBounceX ( x ); body . setBounceY ( y ); Get var bx = body . bounce . x ; var by = body . bounce . y ;","title":"Bounce"},{"location":"arcade-body/#world-bounds","text":"Default world bounds Custom world bounds : body . setBoundsRectangle ( bounds ); bounds : A rectangle object . Enable body . setCollideWorldBounds (); Disable (default) body . setCollideWorldBounds ( false ); Get world bounds rectangle var top = body . world . bounds . top ; var bottom = body . world . bounds . bottom ; var left = body . world . bounds . left ; var right = body . world . bounds . right ;","title":"World bounds"},{"location":"arcade-body/#blocked","text":"Whether this Body is colliding with a tile or the world boundary. Blocked when moveing down var onFloor = body . onFloor (); // blocked.down Blocked when moveing up var onCeiling = body . onCeiling (); // blocked.up Blocked when moveing left or right var onWall = body . onWall (); // blocked.left || this.blocked.right State var blocked = body . blocked ; blocked : { none : true , up : false , down : false , left : false , right : false }","title":"Blocked"},{"location":"arcade-body/#mass","text":"Set body . setMass ( m ); Get var m = body . mass ;","title":"Mass"},{"location":"arcade-body/#static-body","text":"","title":"Static body"},{"location":"arcade-body/#sync","text":"Syncs the Bodies position and size with its parent Game Object. body . updateFromGameObject ();","title":"Sync"},{"location":"arcade-body/#debug","text":"Bounds of Body Enable drawing body body . debugShowBody = true ; Color body . debugBodyColor = 0xff00ff ; Direction and magnitude of velocity Enable drawing body body . debugShowVelocity = true ;","title":"Debug"},{"location":"arcade-gameobject/","text":"Introduction \u00b6 Arcade physics Image/Sprite/Group object. Author: Richard Davey Usage \u00b6 Add physics object \u00b6 Enable physics world Image object \u00b6 Static object, extends from Image object var image = scene . physics . add . staticImage ( x , y , key ); Dynamic object, extends from Image object var image = scene . physics . add . image ( x , y , key ); Sprite object \u00b6 Static object, extends from Sprite object var image = scene . physics . add . staticSprite ( x , y , key , frame ); Dynamic object, extends from Sprite object var image = scene . physics . add . sprite ( x , y , key , frame ); Group \u00b6 Static sprite objects, extends from Group object var group = scene . physics . add . staticGroup ( children , config ); // var group = scene.physics.add.staticGroup(config); Dynamic sprite objects, extends from Group object var group = scene . physics . add . group ( children , config ); // var group = scene.physics.add.staticGroup(config); config var config = { classType : ArcadeSprite , enable : true , setCollideWorldBounds : false , setBoundsRectangle : null , setAccelerationX : 0 , setAccelerationY : 0 , allowDrag : true , allowGravity : true , allowRotation : true setBounceX : 0 , setBounceY : 0 , setDragX : 0 , setDragY : 0 , setGravityX : 0 , setGravityY : 0 , setFrictionX : 0 , setFrictionY : 0 , setVelocityX : 0 , setVelocityY : 0 , setAngularVelocity : 0 , setAngularAcceleration : 0 , setAngularDrag : 0 , setMass : 1 , setImmovable : false , maxSize : - 1 , runChildUpdate : false }; Enable \u00b6 Enable body gameObject . enableBody (); // gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject); Enable and reset position gameObject . enableBody ( true , x , y ); // gameObject.enableBody(true, x, y, enableGameObject, showGameObject); enableGameObject : Also activate this Game Object. showGameObject : Also show this Game Object. Disable body gameObject . disableBody (); // gameObject.disableBody(disableGameObject, hideGameObject); disableGameObject : Also deactivate this Game Object. hideGameObject : Also hide this Game Object. Movement \u00b6 Velocity \u00b6 Set gameObject . setVelocity ( x , y ); or gameObject . setVelocityX ( x ); gameObject . setVelocityY ( y ); Get var vx = gameObject . body . velocity . x ; var vy = gameObject . body . velocity . y ; Max velocity \u00b6 Set gameObject . setMaxVelocity ( x , y ); Get var vx = gameObject . body . maxVelocity . x ; var vy = gameObject . body . maxVelocity . y ; Acceleration \u00b6 Set gameObject . setAcceleration ( x , y ); or gameObject . setAccelerationX ( x ); gameObject . setAccelerationY ( y ); Get var ax = gameObject . body . acceleration . x ; var ay = gameObject . body . acceleration . y ; Gravity \u00b6 Set gameObject . setGravity ( x , y ); or gameObject . setGravityX ( x ); gameObject . setGravityY ( y ); Get var gx = gameObject . body . gravity . x ; var gy = gameObject . body . gravity . y ; Drag \u00b6 Set gameObject . setDrag ( x , y ); or gameObject . setDragX ( x ); gameObject . setDragY ( y ); Get var dx = gameObject . body . drag . x ; var dy = gameObject . body . drag . y ; Enable damping gameObject . setDamping ( value ); Immovable \u00b6 Enable gameObject . setImmovable (); Disable gameObject . setImmovable ( false ); Get var immovable = gameObject . body . immovable ; Friction \u00b6 If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set gameObject . setFriction ( x , y ); or gameObject . setFrictionX ( x ); gameObject . setFrictionY ( y ); Get var fx = gameObject . body . friction . x ; var fy = gameObject . body . friction . y ; Rotation \u00b6 Allow rotation \u00b6 Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = gameObject . body . allowRotation ; Angular velocity \u00b6 Set gameObject . setAngularVelocity ( v ); Get var av = gameObject . body . angularVelocity ; Angular acceleration \u00b6 -Set gameObject . setAngularAcceleration ( v ); - Get var aa = gameObject . body . angularAcceleration ; Angular drag \u00b6 Set gameObject . setAngularDrag ( v ); Get var ad = gameObject . body . angularDrag ; Collision \u00b6 Collision bound \u00b6 Rectangle gameObject . setSize ( width , height , center ); center : false to set body's offset to (0, 0) Circle gameObject . setCircle ( radius , offsetX , offsetY ); Offset \u00b6 gameObject . setOffset ( x , y ); Push out \u00b6 scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects) Callbacks \u00b6 Add collider Point inside \u00b6 var hit = gameObject . hitTest ( x , y ); Bounce \u00b6 Set gameObject . setBounce ( x , y ); or gameObject . setBounceX ( x ); gameObject . setBounceY ( y ); Get var bx = gameObject . body . bounce . x ; var by = gameObject . body . bounce . y ; Enable bounce when colliding with the world boundary gameObject . setCollideWorldBounds (); Disable bounce when colliding with the world boundary gameObject . setCollideWorldBounds ( false ); Mass \u00b6 Set gameObject . setMass ( m ); Get var m = gameObject . body . mass ; Static game object \u00b6 Sync \u00b6 Syncs the Bodies position and size in static game object. gameObject . refreshBody (); Methods of group \u00b6 group . setVelocity ( x , y , step ); group . setVelocityX ( value , step ); group . setVelocityY ( value , step ); group . refresh (); // call this method when position of game objects were changed in static object group Debug \u00b6 gameObject . setDebug ( showBody , showVelocity , bodyColor ); gameObject . setDebugBodyColor ( bodyColor );","title":"Game object"},{"location":"arcade-gameobject/#introduction","text":"Arcade physics Image/Sprite/Group object. Author: Richard Davey","title":"Introduction"},{"location":"arcade-gameobject/#usage","text":"","title":"Usage"},{"location":"arcade-gameobject/#add-physics-object","text":"Enable physics world","title":"Add physics object"},{"location":"arcade-gameobject/#image-object","text":"Static object, extends from Image object var image = scene . physics . add . staticImage ( x , y , key ); Dynamic object, extends from Image object var image = scene . physics . add . image ( x , y , key );","title":"Image object"},{"location":"arcade-gameobject/#sprite-object","text":"Static object, extends from Sprite object var image = scene . physics . add . staticSprite ( x , y , key , frame ); Dynamic object, extends from Sprite object var image = scene . physics . add . sprite ( x , y , key , frame );","title":"Sprite object"},{"location":"arcade-gameobject/#group","text":"Static sprite objects, extends from Group object var group = scene . physics . add . staticGroup ( children , config ); // var group = scene.physics.add.staticGroup(config); Dynamic sprite objects, extends from Group object var group = scene . physics . add . group ( children , config ); // var group = scene.physics.add.staticGroup(config); config var config = { classType : ArcadeSprite , enable : true , setCollideWorldBounds : false , setBoundsRectangle : null , setAccelerationX : 0 , setAccelerationY : 0 , allowDrag : true , allowGravity : true , allowRotation : true setBounceX : 0 , setBounceY : 0 , setDragX : 0 , setDragY : 0 , setGravityX : 0 , setGravityY : 0 , setFrictionX : 0 , setFrictionY : 0 , setVelocityX : 0 , setVelocityY : 0 , setAngularVelocity : 0 , setAngularAcceleration : 0 , setAngularDrag : 0 , setMass : 1 , setImmovable : false , maxSize : - 1 , runChildUpdate : false };","title":"Group"},{"location":"arcade-gameobject/#enable","text":"Enable body gameObject . enableBody (); // gameObject.enableBody(false, 0, 0, enableGameObject, showGameObject); Enable and reset position gameObject . enableBody ( true , x , y ); // gameObject.enableBody(true, x, y, enableGameObject, showGameObject); enableGameObject : Also activate this Game Object. showGameObject : Also show this Game Object. Disable body gameObject . disableBody (); // gameObject.disableBody(disableGameObject, hideGameObject); disableGameObject : Also deactivate this Game Object. hideGameObject : Also hide this Game Object.","title":"Enable"},{"location":"arcade-gameobject/#movement","text":"","title":"Movement"},{"location":"arcade-gameobject/#velocity","text":"Set gameObject . setVelocity ( x , y ); or gameObject . setVelocityX ( x ); gameObject . setVelocityY ( y ); Get var vx = gameObject . body . velocity . x ; var vy = gameObject . body . velocity . y ;","title":"Velocity"},{"location":"arcade-gameobject/#max-velocity","text":"Set gameObject . setMaxVelocity ( x , y ); Get var vx = gameObject . body . maxVelocity . x ; var vy = gameObject . body . maxVelocity . y ;","title":"Max velocity"},{"location":"arcade-gameobject/#acceleration","text":"Set gameObject . setAcceleration ( x , y ); or gameObject . setAccelerationX ( x ); gameObject . setAccelerationY ( y ); Get var ax = gameObject . body . acceleration . x ; var ay = gameObject . body . acceleration . y ;","title":"Acceleration"},{"location":"arcade-gameobject/#gravity","text":"Set gameObject . setGravity ( x , y ); or gameObject . setGravityX ( x ); gameObject . setGravityY ( y ); Get var gx = gameObject . body . gravity . x ; var gy = gameObject . body . gravity . y ;","title":"Gravity"},{"location":"arcade-gameobject/#drag","text":"Set gameObject . setDrag ( x , y ); or gameObject . setDragX ( x ); gameObject . setDragY ( y ); Get var dx = gameObject . body . drag . x ; var dy = gameObject . body . drag . y ; Enable damping gameObject . setDamping ( value );","title":"Drag"},{"location":"arcade-gameobject/#immovable","text":"Enable gameObject . setImmovable (); Disable gameObject . setImmovable ( false ); Get var immovable = gameObject . body . immovable ;","title":"Immovable"},{"location":"arcade-gameobject/#friction","text":"If this Body is immovable and in motion, this the proportion of this Body's movement received by the riding body on each axis. Set gameObject . setFriction ( x , y ); or gameObject . setFrictionX ( x ); gameObject . setFrictionY ( y ); Get var fx = gameObject . body . friction . x ; var fy = gameObject . body . friction . y ;","title":"Friction"},{"location":"arcade-gameobject/#rotation","text":"","title":"Rotation"},{"location":"arcade-gameobject/#allow-rotation","text":"Whether this Body's rotation is affected by its angular acceleration and velocity. Enable (default) body . setAllowRotation (); Disable body . setAllowRotation ( false ); Get var allowRotation = gameObject . body . allowRotation ;","title":"Allow rotation"},{"location":"arcade-gameobject/#angular-velocity","text":"Set gameObject . setAngularVelocity ( v ); Get var av = gameObject . body . angularVelocity ;","title":"Angular velocity"},{"location":"arcade-gameobject/#angular-acceleration","text":"-Set gameObject . setAngularAcceleration ( v ); - Get var aa = gameObject . body . angularAcceleration ;","title":"Angular acceleration"},{"location":"arcade-gameobject/#angular-drag","text":"Set gameObject . setAngularDrag ( v ); Get var ad = gameObject . body . angularDrag ;","title":"Angular drag"},{"location":"arcade-gameobject/#collision","text":"","title":"Collision"},{"location":"arcade-gameobject/#collision-bound","text":"Rectangle gameObject . setSize ( width , height , center ); center : false to set body's offset to (0, 0) Circle gameObject . setCircle ( radius , offsetX , offsetY );","title":"Collision bound"},{"location":"arcade-gameobject/#offset","text":"gameObject . setOffset ( x , y );","title":"Offset"},{"location":"arcade-gameobject/#push-out","text":"scene . physics . add . collider ( objectsA , objectsB ); objectsA , objectsB : A game object Game objects in array (Add or remove game objects) Physics group (Add or remove game objects) Group (Add or remove game objects)","title":"Push out"},{"location":"arcade-gameobject/#callbacks","text":"Add collider","title":"Callbacks"},{"location":"arcade-gameobject/#point-inside","text":"var hit = gameObject . hitTest ( x , y );","title":"Point inside"},{"location":"arcade-gameobject/#bounce","text":"Set gameObject . setBounce ( x , y ); or gameObject . setBounceX ( x ); gameObject . setBounceY ( y ); Get var bx = gameObject . body . bounce . x ; var by = gameObject . body . bounce . y ; Enable bounce when colliding with the world boundary gameObject . setCollideWorldBounds (); Disable bounce when colliding with the world boundary gameObject . setCollideWorldBounds ( false );","title":"Bounce"},{"location":"arcade-gameobject/#mass","text":"Set gameObject . setMass ( m ); Get var m = gameObject . body . mass ;","title":"Mass"},{"location":"arcade-gameobject/#static-game-object","text":"","title":"Static game object"},{"location":"arcade-gameobject/#sync","text":"Syncs the Bodies position and size in static game object. gameObject . refreshBody ();","title":"Sync"},{"location":"arcade-gameobject/#methods-of-group","text":"group . setVelocity ( x , y , step ); group . setVelocityX ( value , step ); group . setVelocityY ( value , step ); group . refresh (); // call this method when position of game objects were changed in static object group","title":"Methods of group"},{"location":"arcade-gameobject/#debug","text":"gameObject . setDebug ( showBody , showVelocity , bodyColor ); gameObject . setDebugBodyColor ( bodyColor );","title":"Debug"},{"location":"arcade-world/","text":"Introduction \u00b6 World of Arcade physics engine in phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 var config = { // ... physics : { default : 'arcade' , arcade : { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // gravity: { // x: 0, // y: 0 // }, // checkCollision: { // up: true, // down: true, // left: true, // right: true // }, // fps: 60, // timeScale: 1, // 2.0 = half speed, 0.5 = double speed // overlapBias: 4, // tileBias: 16, // forceX: false, // isPaused: false, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // maxEntries: 16, // useTree: true // set false if amount of dynamic bodies > 5000 } } // ... }; var game = new Phaser . Game ( config ); Control \u00b6 Pause \u00b6 scene . physics . pause (); Resume \u00b6 scene . physics . resume (); Duration per frame \u00b6 Time scale scene . physics . world . timeScale = timeScale ; 1.0 = normal speed 2.0 = half speed 0.5 = double speed FPS scene . physics . world . setFPS ( framerate ); Step \u00b6 Advances the simulation by one step. scene . physics . world . step ( delta ); Collision \u00b6 Set bound \u00b6 See bound in body object , or game object . Collider & callback \u00b6 Add collider Push out scene . physics . add . collider ( objectsA , objectsB ); Performs a collision check and separation between the two physics enabled objects given. var collider = scene . physics . add . collider ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext); If you don't require separation then use overlap instead. var collider = scene . physics . add . overlap ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext); Parameters objectsA , objectsB : A game object An array contains Game objects (Add or remove game objects) Physics group/Group (Add or remove game objects) An array contains Physics group/Group collideCallback : var collideCallback = function ( gameObject1 , gameObject2 ) { // ... } processCallback : Fired when gameObject1 intersects gameObject2, optional. var processCallback = function ( gameObject1 , gameObject2 ) { return true ; // return false will discard remaining collision checking } Remove collider scene . physics . world . removeCollider ( collider ); Deactivate collider collider . active = false ; // Set true to activate again Name of collider (unused by engine) collider . name = name ; Testing wo collider \u00b6 Test overlapping var isOverlapping = scene . physics . world . overlap ( object1 , object2 ); or var isOverlapping = scene . physics . world . overlap ( object1 , object2 , collideCallback ); // var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext); Test colliding, also push out var isCollided = scene . physics . world . collide ( object1 , object2 ); or var isCollided = scene . physics . world . collide ( object1 , object2 , collideCallback ); // var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext); World bounds \u00b6 Enable \u00b6 Body : Set body.setCollideWorldBounds() to enable worldBounds property. World : Set bounds rectangle and enable bounds scene . physics . world . setBounds ( x , y , width , height ); // scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown); Set bounds rectangle scene . physics . world . bounds . setTo ( x , y , width , height ); or scene . physics . world . bounds . x = x ; scene . physics . world . bounds . y = y ; scene . physics . world . bounds . width = width ; scene . physics . world . bounds . height = height ; Enable bounds scene . physics . world . setBoundsCollision (); // scene.physics.world.setBoundsCollision(left, right, up, down); or scene . physics . world . checkCollision . left = left ; scene . physics . world . checkCollision . right = right ; scene . physics . world . checkCollision . up = up ; scene . physics . world . checkCollision . down = down ; Get bounds rectangle var top = scene . physics . world . bounds . top ; var bottom = scene . physics . world . bounds . bottom ; var left = scene . physics . world . bounds . left ; var right = scene . physics . world . bounds . right ; Events \u00b6 World bounds var callback = function ( body , blockedUp , blockedDown , blockedLeft , blockedRight ) { /* ... */ }; scene . physics . world . on ( 'worldbounds' , callback ); Wrap \u00b6 scene . physics . world . wrap ( gameObject , padding ); gameObject: game object group array of game objects Move to \u00b6 Move to position with a steady velocity scene . physics . moveTo ( gameObject , x , y , speed , maxTime ); Move to object with a steady velocity scene . physics . moveToObject ( gameObject , destination , speed , maxTime ); Accelerate to \u00b6 Accelerate to position scene . physics . accelerateTo ( gameObject , x , y , acceleration , xSpeedMax , ySpeedMax ); Accelerate to object scene . physics . accelerateToObject ( gameObject , destination , acceleration , xSpeedMax , ySpeedMax ); Gravity \u00b6 Set scene . physics . world . gravity . x = gx ; scene . physics . world . gravity . y = gy ; Get var gx = scene . physics . world . gravity . x ; var gy = scene . physics . world . gravity . y ; Total Gravity = world.gravity + body.gravity Bodies \u00b6 Closest/furthest \u00b6 Closest var body = scene . physics . closest ( point ); // point: {x,y} Furthest var body = scene . physics . furthest ( point ); // point: {x,y} Debug \u00b6 Draw body & velocity \u00b6 Bounds of dynamic Body Enable drawing body scene . physics . world . defaults . debugShowBody = true ; Color scene . physics . world . defaults . bodyDebugColor = 0xff00ff ; Bounds of static Body Enable drawing body scene . physics . world . defaults . debugShowStaticBody = true ; Color scene . physics . world . defaults . staticBodyDebugColor = 0x0000ff ; Direction and magnitude of velocity Enable drawing body scene . physics . world . defaults . debugShowVelocity = true ; Color scene . physics . world . defaults . velocityDebugColor = 0x00ff00 ; Graphics \u00b6 Draw debug body & velocity on a Graphics object . var graphics = scene . physics . world . debugGraphic ; Set visible scene . physics . world . debugGraphic . setVisible (); Set invisible scene . physics . world . debugGraphic . setVisible ( false ); Update loop \u00b6 scene.sys.events: update Update position & angle of each body Process each collider Update final position of each body Emit worldstep event scene.sys.events: postupdate Draw debug graphics graph TB SceneEventUpdate>\"scene.sys.events: update<br><br>Update arcade world<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.sys.events: postupdate<br><br>Post update arcade world\"] Render SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate --> Render","title":"World"},{"location":"arcade-world/#introduction","text":"World of Arcade physics engine in phaser. Author: Richard Davey","title":"Introduction"},{"location":"arcade-world/#usage","text":"","title":"Usage"},{"location":"arcade-world/#configuration","text":"var config = { // ... physics : { default : 'arcade' , arcade : { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // gravity: { // x: 0, // y: 0 // }, // checkCollision: { // up: true, // down: true, // left: true, // right: true // }, // fps: 60, // timeScale: 1, // 2.0 = half speed, 0.5 = double speed // overlapBias: 4, // tileBias: 16, // forceX: false, // isPaused: false, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // maxEntries: 16, // useTree: true // set false if amount of dynamic bodies > 5000 } } // ... }; var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"arcade-world/#control","text":"","title":"Control"},{"location":"arcade-world/#pause","text":"scene . physics . pause ();","title":"Pause"},{"location":"arcade-world/#resume","text":"scene . physics . resume ();","title":"Resume"},{"location":"arcade-world/#duration-per-frame","text":"Time scale scene . physics . world . timeScale = timeScale ; 1.0 = normal speed 2.0 = half speed 0.5 = double speed FPS scene . physics . world . setFPS ( framerate );","title":"Duration per frame"},{"location":"arcade-world/#step","text":"Advances the simulation by one step. scene . physics . world . step ( delta );","title":"Step"},{"location":"arcade-world/#collision","text":"","title":"Collision"},{"location":"arcade-world/#set-bound","text":"See bound in body object , or game object .","title":"Set bound"},{"location":"arcade-world/#collider-callback","text":"Add collider Push out scene . physics . add . collider ( objectsA , objectsB ); Performs a collision check and separation between the two physics enabled objects given. var collider = scene . physics . add . collider ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.collider(objectsA, objectsB, collideCallback, processCallback, callbackContext); If you don't require separation then use overlap instead. var collider = scene . physics . add . overlap ( objectsA , objectsB , collideCallback ); // var collider = scene.physics.add.overlap(objectsA, objectsB, collideCallback, processCallback, callbackContext); Parameters objectsA , objectsB : A game object An array contains Game objects (Add or remove game objects) Physics group/Group (Add or remove game objects) An array contains Physics group/Group collideCallback : var collideCallback = function ( gameObject1 , gameObject2 ) { // ... } processCallback : Fired when gameObject1 intersects gameObject2, optional. var processCallback = function ( gameObject1 , gameObject2 ) { return true ; // return false will discard remaining collision checking } Remove collider scene . physics . world . removeCollider ( collider ); Deactivate collider collider . active = false ; // Set true to activate again Name of collider (unused by engine) collider . name = name ;","title":"Collider &amp; callback"},{"location":"arcade-world/#testing-wo-collider","text":"Test overlapping var isOverlapping = scene . physics . world . overlap ( object1 , object2 ); or var isOverlapping = scene . physics . world . overlap ( object1 , object2 , collideCallback ); // var isOverlapping = scene.physics.world.overlap(object1, object2, collideCallback, processCallback, callbackContext); Test colliding, also push out var isCollided = scene . physics . world . collide ( object1 , object2 ); or var isCollided = scene . physics . world . collide ( object1 , object2 , collideCallback ); // var isCollided = scene.physics.world.collide(object1, object2, collideCallback, processCallback, callbackContext);","title":"Testing wo collider"},{"location":"arcade-world/#world-bounds","text":"","title":"World bounds"},{"location":"arcade-world/#enable","text":"Body : Set body.setCollideWorldBounds() to enable worldBounds property. World : Set bounds rectangle and enable bounds scene . physics . world . setBounds ( x , y , width , height ); // scene.physics.world.setBounds(x, y, width, height, checkLeft, checkRight, checkUp, checkDown); Set bounds rectangle scene . physics . world . bounds . setTo ( x , y , width , height ); or scene . physics . world . bounds . x = x ; scene . physics . world . bounds . y = y ; scene . physics . world . bounds . width = width ; scene . physics . world . bounds . height = height ; Enable bounds scene . physics . world . setBoundsCollision (); // scene.physics.world.setBoundsCollision(left, right, up, down); or scene . physics . world . checkCollision . left = left ; scene . physics . world . checkCollision . right = right ; scene . physics . world . checkCollision . up = up ; scene . physics . world . checkCollision . down = down ; Get bounds rectangle var top = scene . physics . world . bounds . top ; var bottom = scene . physics . world . bounds . bottom ; var left = scene . physics . world . bounds . left ; var right = scene . physics . world . bounds . right ;","title":"Enable"},{"location":"arcade-world/#events","text":"World bounds var callback = function ( body , blockedUp , blockedDown , blockedLeft , blockedRight ) { /* ... */ }; scene . physics . world . on ( 'worldbounds' , callback );","title":"Events"},{"location":"arcade-world/#wrap","text":"scene . physics . world . wrap ( gameObject , padding ); gameObject: game object group array of game objects","title":"Wrap"},{"location":"arcade-world/#move-to","text":"Move to position with a steady velocity scene . physics . moveTo ( gameObject , x , y , speed , maxTime ); Move to object with a steady velocity scene . physics . moveToObject ( gameObject , destination , speed , maxTime );","title":"Move to"},{"location":"arcade-world/#accelerate-to","text":"Accelerate to position scene . physics . accelerateTo ( gameObject , x , y , acceleration , xSpeedMax , ySpeedMax ); Accelerate to object scene . physics . accelerateToObject ( gameObject , destination , acceleration , xSpeedMax , ySpeedMax );","title":"Accelerate to"},{"location":"arcade-world/#gravity","text":"Set scene . physics . world . gravity . x = gx ; scene . physics . world . gravity . y = gy ; Get var gx = scene . physics . world . gravity . x ; var gy = scene . physics . world . gravity . y ; Total Gravity = world.gravity + body.gravity","title":"Gravity"},{"location":"arcade-world/#bodies","text":"","title":"Bodies"},{"location":"arcade-world/#closestfurthest","text":"Closest var body = scene . physics . closest ( point ); // point: {x,y} Furthest var body = scene . physics . furthest ( point ); // point: {x,y}","title":"Closest/furthest"},{"location":"arcade-world/#debug","text":"","title":"Debug"},{"location":"arcade-world/#draw-body-velocity","text":"Bounds of dynamic Body Enable drawing body scene . physics . world . defaults . debugShowBody = true ; Color scene . physics . world . defaults . bodyDebugColor = 0xff00ff ; Bounds of static Body Enable drawing body scene . physics . world . defaults . debugShowStaticBody = true ; Color scene . physics . world . defaults . staticBodyDebugColor = 0x0000ff ; Direction and magnitude of velocity Enable drawing body scene . physics . world . defaults . debugShowVelocity = true ; Color scene . physics . world . defaults . velocityDebugColor = 0x00ff00 ;","title":"Draw body &amp; velocity"},{"location":"arcade-world/#graphics","text":"Draw debug body & velocity on a Graphics object . var graphics = scene . physics . world . debugGraphic ; Set visible scene . physics . world . debugGraphic . setVisible (); Set invisible scene . physics . world . debugGraphic . setVisible ( false );","title":"Graphics"},{"location":"arcade-world/#update-loop","text":"scene.sys.events: update Update position & angle of each body Process each collider Update final position of each body Emit worldstep event scene.sys.events: postupdate Draw debug graphics graph TB SceneEventUpdate>\"scene.sys.events: update<br><br>Update arcade world<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.sys.events: postupdate<br><br>Post update arcade world\"] Render SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate --> Render","title":"Update loop"},{"location":"array-addremove/","text":"Introduction \u00b6 Add/insert/remove item(s) of an array, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Add item \u00b6 Phaser . Utils . Array . Add ( arr , item ); // Phaser.Utils.Array.Add(arr, item, limit, callback, context); item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked. Insert item at \u00b6 Phaser . Utils . Array . AddAt ( arr , item , index ); // Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context); index : The index in the array where the item will be inserted. item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked. Remove item \u00b6 Phaser . Utils . Array . Remove ( arr , item ); // Phaser.Utils.Array.Remove(arr, item, callback, context); item : An item, or an array of items. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove item at \u00b6 var removed = Phaser . Utils . Array . RemoveAt ( arr , index ); // var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context); removed : Removed item. index : The array index to remove the item from. The index must be in bounds or it will throw an error. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove items between \u00b6 var removed = Phaser . Utils . Array . RemoveBetween ( arr , startIndex , endIndex ); // var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context); removed : Removed items. startIndex : The start index to remove from. callback : The end index to remove to. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked. Remove random item \u00b6 var item = Phaser . Utils . Array . RemoveRandomElement ( arr ); Replace item \u00b6 Replaces an element of the array with the new element. The new element cannot already be a member of the array. Phaser . Utils . Array . Replace ( arr , oldItem , newItem ); oldItem : An item in array. newItem : Another item, which is not in array.","title":"Add/remove"},{"location":"array-addremove/#introduction","text":"Add/insert/remove item(s) of an array, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-addremove/#usage","text":"","title":"Usage"},{"location":"array-addremove/#add-item","text":"Phaser . Utils . Array . Add ( arr , item ); // Phaser.Utils.Array.Add(arr, item, limit, callback, context); item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked.","title":"Add item"},{"location":"array-addremove/#insert-item-at","text":"Phaser . Utils . Array . AddAt ( arr , item , index ); // Phaser.Utils.Array.AddAt(arr, item, index, limit, callback, context); index : The index in the array where the item will be inserted. item : An item, or an array of items. limit : Optional limit which caps the size of the array. callback : A callback to be invoked for each item successfully added to the array. context : The context in which the callback is invoked.","title":"Insert item at"},{"location":"array-addremove/#remove-item","text":"Phaser . Utils . Array . Remove ( arr , item ); // Phaser.Utils.Array.Remove(arr, item, callback, context); item : An item, or an array of items. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove item"},{"location":"array-addremove/#remove-item-at","text":"var removed = Phaser . Utils . Array . RemoveAt ( arr , index ); // var removed = Phaser.Utils.Array.RemoveAt(arr, index, callback, context); removed : Removed item. index : The array index to remove the item from. The index must be in bounds or it will throw an error. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove item at"},{"location":"array-addremove/#remove-items-between","text":"var removed = Phaser . Utils . Array . RemoveBetween ( arr , startIndex , endIndex ); // var removed = Phaser.Utils.Array.RemoveBetween(arr, startIndex, endIndex, callback, context); removed : Removed items. startIndex : The start index to remove from. callback : The end index to remove to. callback : A callback to be invoked for each item successfully removed from the array. context : The context in which the callback is invoked.","title":"Remove items between"},{"location":"array-addremove/#remove-random-item","text":"var item = Phaser . Utils . Array . RemoveRandomElement ( arr );","title":"Remove random item"},{"location":"array-addremove/#replace-item","text":"Replaces an element of the array with the new element. The new element cannot already be a member of the array. Phaser . Utils . Array . Replace ( arr , oldItem , newItem ); oldItem : An item in array. newItem : Another item, which is not in array.","title":"Replace item"},{"location":"array-filter/","text":"Introduction \u00b6 Built-in javascript object. Author: Built-in javascript function Usage \u00b6 Run function for each element \u00b6 arr . forEach ( function ( element , index , arr ) { // }, scope ); Filter elements \u00b6 Creates a new array with all elements that pass the test function. var result = arr . filter ( function ( element , index , arr ) { return true ; // false }, scope ); Find one element \u00b6 var element = arr . find ( function ( element , index , arr ) { return true ; // false }, scope ); Map elements to a new array \u00b6 var newArray = arr . map ( function ( element , index , arr ) { return newElement ; }, scope );","title":"Filter/Map"},{"location":"array-filter/#introduction","text":"Built-in javascript object. Author: Built-in javascript function","title":"Introduction"},{"location":"array-filter/#usage","text":"","title":"Usage"},{"location":"array-filter/#run-function-for-each-element","text":"arr . forEach ( function ( element , index , arr ) { // }, scope );","title":"Run function for each element"},{"location":"array-filter/#filter-elements","text":"Creates a new array with all elements that pass the test function. var result = arr . filter ( function ( element , index , arr ) { return true ; // false }, scope );","title":"Filter elements"},{"location":"array-filter/#find-one-element","text":"var element = arr . find ( function ( element , index , arr ) { return true ; // false }, scope );","title":"Find one element"},{"location":"array-filter/#map-elements-to-a-new-array","text":"var newArray = arr . map ( function ( element , index , arr ) { return newElement ; }, scope );","title":"Map elements to a new array"},{"location":"array-random/","text":"Introduction \u00b6 Random operation of an array, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get random item \u00b6 var item = Phaser . Utils . Array . GetRandom ( arr ); // var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length); Remove random item \u00b6 var item = Phaser . Utils . Array . RemoveRandomElement ( arr ); Shuffle \u00b6 var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Random"},{"location":"array-random/#introduction","text":"Random operation of an array, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-random/#usage","text":"","title":"Usage"},{"location":"array-random/#get-random-item","text":"var item = Phaser . Utils . Array . GetRandom ( arr ); // var item = Phaser.Utils.Array.GetRandom(arr, startIndex, length);","title":"Get random item"},{"location":"array-random/#remove-random-item","text":"var item = Phaser . Utils . Array . RemoveRandomElement ( arr );","title":"Remove random item"},{"location":"array-random/#shuffle","text":"var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Shuffle"},{"location":"array-sort/","text":"Introduction \u00b6 Array sorting, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Built-in array sort \u00b6 var out = arr . sort ( compareFunction ); compareFunction : A function that defines an alternative sort order. function ( a , b ) { // return a - b; } Return a negative value Return 0 Return a positive value Stable array sort \u00b6 var out = Phaser . Utils . Array . StableSort ( arr , compareFunction ); Shuffle \u00b6 var arr = Phaser . Utils . Array . Shuffle ( arr ); Move item \u00b6 Moves the given element to the top of the array. Phaser . Utils . Array . BringToTop ( arr , item ); Moves the given element to the bottom of the array. Phaser . Utils . Array . SendToBack ( arr , item ); Moves the given array element up. Phaser . Utils . Array . MoveUp ( array , item ); Moves the given array element down. Phaser . Utils . Array . MoveDown ( array , item ); Moves an element in an array to a new position. Phaser . Utils . Array . MoveTo ( array , item , index ); Swaps the position of two elements. Phaser . Utils . Array . Swap ( array , item1 , item2 ); Moves the element at the start of the array to the end, shifting all items in the process. Phaser . Utils . Array . RotateLeft ( array , steps ); steps : The number of times to shift the array. Moves the element at the end of the array to the start, shifting all items in the process. Phaser . Utils . Array . RotateRight ( array , steps ); steps : The number of times to shift the array.","title":"Sort"},{"location":"array-sort/#introduction","text":"Array sorting, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"array-sort/#usage","text":"","title":"Usage"},{"location":"array-sort/#built-in-array-sort","text":"var out = arr . sort ( compareFunction ); compareFunction : A function that defines an alternative sort order. function ( a , b ) { // return a - b; } Return a negative value Return 0 Return a positive value","title":"Built-in array sort"},{"location":"array-sort/#stable-array-sort","text":"var out = Phaser . Utils . Array . StableSort ( arr , compareFunction );","title":"Stable array sort"},{"location":"array-sort/#shuffle","text":"var arr = Phaser . Utils . Array . Shuffle ( arr );","title":"Shuffle"},{"location":"array-sort/#move-item","text":"Moves the given element to the top of the array. Phaser . Utils . Array . BringToTop ( arr , item ); Moves the given element to the bottom of the array. Phaser . Utils . Array . SendToBack ( arr , item ); Moves the given array element up. Phaser . Utils . Array . MoveUp ( array , item ); Moves the given array element down. Phaser . Utils . Array . MoveDown ( array , item ); Moves an element in an array to a new position. Phaser . Utils . Array . MoveTo ( array , item , index ); Swaps the position of two elements. Phaser . Utils . Array . Swap ( array , item1 , item2 ); Moves the element at the start of the array to the end, shifting all items in the process. Phaser . Utils . Array . RotateLeft ( array , steps ); steps : The number of times to shift the array. Moves the element at the end of the array to the start, shifting all items in the process. Phaser . Utils . Array . RotateRight ( array , steps ); steps : The number of times to shift the array.","title":"Move item"},{"location":"audio/","text":"Introduction \u00b6 Play sounds, built-in object of phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 Web audio \u00b6 Web audio is the default audio context. Html5 audio \u00b6 var config = { // .... audio : { disableWebAudio : true } // .... }; var game = new Phaser . Game ( config ); No audio \u00b6 var config = { // .... audio : { noAudio : true } // .... }; var game = new Phaser . Game ( config ); Load audio file \u00b6 scene . load . audio ( key , urls ); // urls: an array of file url See loader Decode audio \u00b6 scene . sound . decodeAudio ( key , audioData ); audioData : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Or scene . sound . decodeAudio ( audioFiles ); audioFiles : An array of {key, data} data : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Decoded events \u00b6 Finished decoding an audio data scene . sound . on ( 'decoded' , key ); Finished decoding all audio data scene . sound . on ( 'decodedall' ); Play sound \u00b6 Sound instance will be destroyed when playback ends. scene . sound . play ( key ); Sound instance \u00b6 Create sound instance \u00b6 var music = scene . sound . add ( key ); var music = scene . sound . add ( key , config ); Configuration \u00b6 { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } Play sound instance \u00b6 Start playing music . play (); Start playing with configuration music . play ( config ); config Stop music . stop (); Pause music . pause (); Resume music . resume (); Methods \u00b6 Mute \u00b6 Set music . setMute ( mute ); // mute: true/false // music.mute = mute; Get var mute = music . mute ; Volume \u00b6 Set music . setVolume ( volume ); // volume: 0 to 1 // music.volume = volume; Get var volume = music . volume ; Detune \u00b6 Set music . setDetune ( detune ); // detune: -1200 to 1200 // music.detune = detune; Get var detune = music . detune ; Play-rate \u00b6 Set music . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // music.rate = rate; Get var rate = music . rate ; Seek to \u00b6 Seek to music . setSeek ( time ); // seek: playback time // music.seek = seek; Get current playback time var time = music . seek ; // return 0 when playback ends Loop \u00b6 Set music . setLoop ( loop ); // loop: true/false // music.loop = loop; Get var loop = music . loop ; Properties \u00b6 Duration : duration of this sound var duratuin = music . duration ; Is playing var isPlaying = music . isPlaying ; Is paused var isPaused = music . isPaused ; Events \u00b6 Start playing music . once ( 'play' , function ( music ){}); Playback end music . once ( 'complete' , function ( music ){}); Looping music . once ( 'looped' , function ( music ){}); Pause music . once ( 'pause' , function ( music ){}); Resume music . once ( 'resume' , function ( music ){}); Stop music . once ( 'stop' , function ( music ){}); Set mute music . once ( 'mute' , function ( music , mute ){}); Set volume music . once ( 'volume' , function ( music , volume ){}); Set detune music . once ( 'detune' , function ( music , detune ){}); Set play-rate music . once ( 'rate' , function ( music , rate ){}); Seek to music . once ( 'seek' , function ( music , time ){}); set loop music . once ( 'loop' , function ( music , loop ){}); Play marked sound \u00b6 Sound instance will be destroyed when playback ends. scene . sound . play ( key , marker ); Marker \u00b6 { name : '' , start : 0 , duration : music . duration , config : { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } } Markers in sound instance \u00b6 Add marker \u00b6 music . addMarker ( marker ); Marker Play marked sound \u00b6 music . play ( markerName ); music . play ( markerName , config ); config Audio sprite \u00b6 Load audio sprite \u00b6 scene . load . audioSprite ( key , urls , markersConfig , config ); See loader Format of markersConfig { resources : urls , // an array of audio files spritemap : { markerName0 : { start : 0 , end : 0 }, markerName1 : { start : 0 , end : 0 } // ... } } Play sound \u00b6 Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends. scene . sound . playAudioSprite ( key , markerName , config ); config Sound instance \u00b6 Create a sound instance with markers. var music = scene . sound . addAudioSprite ( key , config ); config Play sound instance \u00b6 music . play ( markerName ); music . play ( markerName , config ); config Sound manager \u00b6 Methods \u00b6 Mute \u00b6 Set scene . sound . setMute ( mute ); // mute: true/false // scene.sound.mute = mute; Get var mute = scene . sound . mute ; Volume \u00b6 Set scene . sound . setVolume ( volume ); // volume: 0 to 1 // scene.sound.volume = volume; Get var volume = scene . sound . volume ; Detune \u00b6 Set scene . sound . setDetune ( detune ); // detune: -1200 to 1200 // scene.sound.detune = detune; Get var detune = scene . sound . detune ; Play-rate \u00b6 Set scene . sound . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // scene.sound.rate = rate; Get var rate = scene . sound . rate ; Analyser \u00b6 Analyser node is only available in Web audio mode . Create analyser node var analyser = scene . sound . context . createAnalyser (); Configure analyser node analyser . smoothingTimeConstant = 1 ; analyser . fftSize = 8192 ; analyser . minDecibels = - 90 ; analyser . maxDecibels = - 10 ; smoothingTimeConstant : Averaging constant with the last analysis frame. 0 (no time averaging) ~ 1 . Default value is 0.8 . fftSize : Window size. 32 , 64 , 128 , 256 , 512 , 1024 , 2048 , 4096 , 8192 , 16384 , and 32768 . Defaults to 2048 . minDecibels : Minimum decibel value for scaling the FFT analysis data. 0 dB is the loudest possible sound, -10 dB is a 10 th of that, etc. The default value is -100 dB maxDecibels : Maximum decibel value for scaling the FFT analysis data. The default value is -30 dB. Set source of analyser node Global volume nodee -> analyser node scene . sound . masterVolumeNode . connect ( analyser ); A sound instance -> analyser node music . volumeNode . connect ( analyser ); Ouput analyser node to audio context analyser . connect ( scene . sound . context . destination ); Create output data array var dataArrayLength = analyser . frequencyBinCount ; var dataArray = new Uint8Array ( dataArrayLength ); Get output data analyser . getByteTimeDomainData ( dataArray ); Retrieve output data for ( var i = 0 ; i < dataArrayLength ; i ++ ) { var data = dataArray [ i ]; }","title":"Audio"},{"location":"audio/#introduction","text":"Play sounds, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"audio/#usage","text":"","title":"Usage"},{"location":"audio/#configuration","text":"","title":"Configuration"},{"location":"audio/#web-audio","text":"Web audio is the default audio context.","title":"Web audio"},{"location":"audio/#html5-audio","text":"var config = { // .... audio : { disableWebAudio : true } // .... }; var game = new Phaser . Game ( config );","title":"Html5 audio"},{"location":"audio/#no-audio","text":"var config = { // .... audio : { noAudio : true } // .... }; var game = new Phaser . Game ( config );","title":"No audio"},{"location":"audio/#load-audio-file","text":"scene . load . audio ( key , urls ); // urls: an array of file url See loader","title":"Load audio file"},{"location":"audio/#decode-audio","text":"scene . sound . decodeAudio ( key , audioData ); audioData : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance Or scene . sound . decodeAudio ( audioFiles ); audioFiles : An array of {key, data} data : Audio data A base64 encoded string An audio media-type data uri An ArrayBuffer instance","title":"Decode audio"},{"location":"audio/#decoded-events","text":"Finished decoding an audio data scene . sound . on ( 'decoded' , key ); Finished decoding all audio data scene . sound . on ( 'decodedall' );","title":"Decoded events"},{"location":"audio/#play-sound","text":"Sound instance will be destroyed when playback ends. scene . sound . play ( key );","title":"Play sound"},{"location":"audio/#sound-instance","text":"","title":"Sound instance"},{"location":"audio/#create-sound-instance","text":"var music = scene . sound . add ( key ); var music = scene . sound . add ( key , config );","title":"Create sound instance"},{"location":"audio/#configuration_1","text":"{ mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 }","title":"Configuration"},{"location":"audio/#play-sound-instance","text":"Start playing music . play (); Start playing with configuration music . play ( config ); config Stop music . stop (); Pause music . pause (); Resume music . resume ();","title":"Play sound instance"},{"location":"audio/#methods","text":"","title":"Methods"},{"location":"audio/#mute","text":"Set music . setMute ( mute ); // mute: true/false // music.mute = mute; Get var mute = music . mute ;","title":"Mute"},{"location":"audio/#volume","text":"Set music . setVolume ( volume ); // volume: 0 to 1 // music.volume = volume; Get var volume = music . volume ;","title":"Volume"},{"location":"audio/#detune","text":"Set music . setDetune ( detune ); // detune: -1200 to 1200 // music.detune = detune; Get var detune = music . detune ;","title":"Detune"},{"location":"audio/#play-rate","text":"Set music . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // music.rate = rate; Get var rate = music . rate ;","title":"Play-rate"},{"location":"audio/#seek-to","text":"Seek to music . setSeek ( time ); // seek: playback time // music.seek = seek; Get current playback time var time = music . seek ; // return 0 when playback ends","title":"Seek to"},{"location":"audio/#loop","text":"Set music . setLoop ( loop ); // loop: true/false // music.loop = loop; Get var loop = music . loop ;","title":"Loop"},{"location":"audio/#properties","text":"Duration : duration of this sound var duratuin = music . duration ; Is playing var isPlaying = music . isPlaying ; Is paused var isPaused = music . isPaused ;","title":"Properties"},{"location":"audio/#events","text":"Start playing music . once ( 'play' , function ( music ){}); Playback end music . once ( 'complete' , function ( music ){}); Looping music . once ( 'looped' , function ( music ){}); Pause music . once ( 'pause' , function ( music ){}); Resume music . once ( 'resume' , function ( music ){}); Stop music . once ( 'stop' , function ( music ){}); Set mute music . once ( 'mute' , function ( music , mute ){}); Set volume music . once ( 'volume' , function ( music , volume ){}); Set detune music . once ( 'detune' , function ( music , detune ){}); Set play-rate music . once ( 'rate' , function ( music , rate ){}); Seek to music . once ( 'seek' , function ( music , time ){}); set loop music . once ( 'loop' , function ( music , loop ){});","title":"Events"},{"location":"audio/#play-marked-sound","text":"Sound instance will be destroyed when playback ends. scene . sound . play ( key , marker );","title":"Play marked sound"},{"location":"audio/#marker","text":"{ name : '' , start : 0 , duration : music . duration , config : { mute : false , volume : 1 , rate : 1 , detune : 0 , seek : 0 , loop : false , delay : 0 } }","title":"Marker"},{"location":"audio/#markers-in-sound-instance","text":"","title":"Markers in sound instance"},{"location":"audio/#add-marker","text":"music . addMarker ( marker ); Marker","title":"Add marker"},{"location":"audio/#play-marked-sound_1","text":"music . play ( markerName ); music . play ( markerName , config ); config","title":"Play marked sound"},{"location":"audio/#audio-sprite","text":"","title":"Audio sprite"},{"location":"audio/#load-audio-sprite","text":"scene . load . audioSprite ( key , urls , markersConfig , config ); See loader Format of markersConfig { resources : urls , // an array of audio files spritemap : { markerName0 : { start : 0 , end : 0 }, markerName1 : { start : 0 , end : 0 } // ... } }","title":"Load audio sprite"},{"location":"audio/#play-sound_1","text":"Create a sound instance then play the marked section, this sound instance will be destroyed when playback ends. scene . sound . playAudioSprite ( key , markerName , config ); config","title":"Play sound"},{"location":"audio/#sound-instance_1","text":"Create a sound instance with markers. var music = scene . sound . addAudioSprite ( key , config ); config","title":"Sound instance"},{"location":"audio/#play-sound-instance_1","text":"music . play ( markerName ); music . play ( markerName , config ); config","title":"Play sound instance"},{"location":"audio/#sound-manager","text":"","title":"Sound manager"},{"location":"audio/#methods_1","text":"","title":"Methods"},{"location":"audio/#mute_1","text":"Set scene . sound . setMute ( mute ); // mute: true/false // scene.sound.mute = mute; Get var mute = scene . sound . mute ;","title":"Mute"},{"location":"audio/#volume_1","text":"Set scene . sound . setVolume ( volume ); // volume: 0 to 1 // scene.sound.volume = volume; Get var volume = scene . sound . volume ;","title":"Volume"},{"location":"audio/#detune_1","text":"Set scene . sound . setDetune ( detune ); // detune: -1200 to 1200 // scene.sound.detune = detune; Get var detune = scene . sound . detune ;","title":"Detune"},{"location":"audio/#play-rate_1","text":"Set scene . sound . setRate ( rate ); // rate: 1.0(normal speed), 0.5(half speed), 2.0(double speed) // scene.sound.rate = rate; Get var rate = scene . sound . rate ;","title":"Play-rate"},{"location":"audio/#analyser","text":"Analyser node is only available in Web audio mode . Create analyser node var analyser = scene . sound . context . createAnalyser (); Configure analyser node analyser . smoothingTimeConstant = 1 ; analyser . fftSize = 8192 ; analyser . minDecibels = - 90 ; analyser . maxDecibels = - 10 ; smoothingTimeConstant : Averaging constant with the last analysis frame. 0 (no time averaging) ~ 1 . Default value is 0.8 . fftSize : Window size. 32 , 64 , 128 , 256 , 512 , 1024 , 2048 , 4096 , 8192 , 16384 , and 32768 . Defaults to 2048 . minDecibels : Minimum decibel value for scaling the FFT analysis data. 0 dB is the loudest possible sound, -10 dB is a 10 th of that, etc. The default value is -100 dB maxDecibels : Maximum decibel value for scaling the FFT analysis data. The default value is -30 dB. Set source of analyser node Global volume nodee -> analyser node scene . sound . masterVolumeNode . connect ( analyser ); A sound instance -> analyser node music . volumeNode . connect ( analyser ); Ouput analyser node to audio context analyser . connect ( scene . sound . context . destination ); Create output data array var dataArrayLength = analyser . frequencyBinCount ; var dataArray = new Uint8Array ( dataArrayLength ); Get output data analyser . getByteTimeDomainData ( dataArray ); Retrieve output data for ( var i = 0 ; i < dataArrayLength ; i ++ ) { var data = dataArray [ i ]; }","title":"Analyser"},{"location":"awaitloader/","text":"Introduction \u00b6 Await custom task in preload stage. Author: Rex Custom File of loader Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'AwaitLoader' , plugin : AwaitLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene) Await task \u00b6 In preload stage: var callback = function ( successCallback , failureCallback ) { // successCallback(); }; this . load . rexAwait ( key , { callback : callback , // scope: scope }); This plugin runs callback to start custom task. Calls successCallback when custom task completed, or failureCallback if error.","title":"Await loader"},{"location":"awaitloader/#introduction","text":"Await custom task in preload stage. Author: Rex Custom File of loader","title":"Introduction"},{"location":"awaitloader/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"awaitloader/#usage","text":"Sample code","title":"Usage"},{"location":"awaitloader/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'AwaitLoader' , plugin : AwaitLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene)","title":"Install plugin"},{"location":"awaitloader/#await-task","text":"In preload stage: var callback = function ( successCallback , failureCallback ) { // successCallback(); }; this . load . rexAwait ( key , { callback : callback , // scope: scope }); This plugin runs callback to start custom task. Calls successCallback when custom task completed, or failureCallback if error.","title":"Await task"},{"location":"awaytime/","text":"Introduction \u00b6 Get time from previous closing application to now. Author: Rex Standalone object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexAwayTime from './plugins/awaytime.js' ; Install global plugin \u00b6 Install plugin in configuration of game import AwayTimePlugin from './plugins/awaytime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAwayTime' , plugin : AwayTimePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Default away-timer \u00b6 Get away-time \u00b6 var awayTime = scene . plugins . get ( 'rexAwayTime' ). awayTime ; // var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime; awayTime : Time in millisecond. key : Save curent time-stamp in key of localstorage . Default value is 'away' . time : Period of saving current time-stamp. Default value is 1000 . Note This action also starts saving current time-stamp periodically into localstorage. Set key \u00b6 scene . plugins . get ( 'rexAwayTime' ). setKey ( key ); key : Save curent time-stamp in key of localstorage Set period \u00b6 scene . plugins . get ( 'rexAwayTime' ). setPeriod ( time ); time : Period of saving current time-stamp.","title":"Away time"},{"location":"awaytime/#introduction","text":"Get time from previous closing application to now. Author: Rex Standalone object","title":"Introduction"},{"location":"awaytime/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"awaytime/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"awaytime/#import-class","text":"import rexAwayTime from './plugins/awaytime.js' ;","title":"Import class"},{"location":"awaytime/#install-global-plugin","text":"Install plugin in configuration of game import AwayTimePlugin from './plugins/awaytime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexAwayTime' , plugin : AwayTimePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"awaytime/#default-away-timer","text":"","title":"Default away-timer"},{"location":"awaytime/#get-away-time","text":"var awayTime = scene . plugins . get ( 'rexAwayTime' ). awayTime ; // var awayTime = scene.plugins.get('rexAwayTime').setKey(key).setPeriod(time).awayTime; awayTime : Time in millisecond. key : Save curent time-stamp in key of localstorage . Default value is 'away' . time : Period of saving current time-stamp. Default value is 1000 . Note This action also starts saving current time-stamp periodically into localstorage.","title":"Get away-time"},{"location":"awaytime/#set-key","text":"scene . plugins . get ( 'rexAwayTime' ). setKey ( key ); key : Save curent time-stamp in key of localstorage","title":"Set key"},{"location":"awaytime/#set-period","text":"scene . plugins . get ( 'rexAwayTime' ). setPeriod ( time ); time : Period of saving current time-stamp.","title":"Set period"},{"location":"base64/","text":"Introduction \u00b6 Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser. Author: Richard Davey Usage \u00b6 Base64 -> Array buffer \u00b6 var arrayBuffer = Phaser . Utils . Base64 . Base64ToArrayBuffer ( base64 ); Array buffer -> Base64 \u00b6 var base64 = Phaser . Utils . Base64 . ArrayBufferToBase64 ( arrayBuffer , mediaType ); mediaType : An optional media type, i.e. audio/ogg or image/jpeg","title":"Base64"},{"location":"base64/#introduction","text":"Decode a base64 string to an array buffer, or create a base64 string from an array buffer, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"base64/#usage","text":"","title":"Usage"},{"location":"base64/#base64-array-buffer","text":"var arrayBuffer = Phaser . Utils . Base64 . Base64ToArrayBuffer ( base64 );","title":"Base64 -&gt; Array buffer"},{"location":"base64/#array-buffer-base64","text":"var base64 = Phaser . Utils . Base64 . ArrayBufferToBase64 ( arrayBuffer , mediaType ); mediaType : An optional media type, i.e. audio/ogg or image/jpeg","title":"Array buffer -&gt; Base64"},{"location":"bbcodetext/","text":"Introduction \u00b6 Drawing text with BBCode protocol. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code BBCode \u00b6 Bold : [b]text[/b] Italic : [i]text[/i] Color : [color=red]text[/color] Size : [size=18]text[/size] Stroke : [stroke]text[/stroke] Stroke with color setting : [stroke=red]text[/stroke] Shadow : [shadow]text[/shadow] Underline : [u]text[/u] Underline with color setting : [u=red]text[/u] Image : [img=imgKey] Hit area of words : [area=key]text[/area] Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexBBCodeTextPlugin' , plugin : BBCodeTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text object \u00b6 var txt = scene . add . rexBBCodeText ( x , y , '[b]h[/b]ello' ); // var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . rexBBCodeText ({ x : 0 , y : 0 , padding : { left : 0 , right : 0 , top : 0 , bottom : 0 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom Custom class \u00b6 Define class class MyText extends BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '[b]h[/b]ello' ); Wrap \u00b6 Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width ); Content \u00b6 Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '[b]h[/b]ello' ); // txt.text = '[b]h[/b]ello'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Image \u00b6 Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config} Hit area of words \u00b6 Hitting events \u00b6 Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope ) Draw hit-areas \u00b6 txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"BBCode Text"},{"location":"bbcodetext/#introduction","text":"Drawing text with BBCode protocol. Author: Rex Game object","title":"Introduction"},{"location":"bbcodetext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"bbcodetext/#usage","text":"Sample code","title":"Usage"},{"location":"bbcodetext/#bbcode","text":"Bold : [b]text[/b] Italic : [i]text[/i] Color : [color=red]text[/color] Size : [size=18]text[/size] Stroke : [stroke]text[/stroke] Stroke with color setting : [stroke=red]text[/stroke] Shadow : [shadow]text[/shadow] Underline : [u]text[/u] Underline with color setting : [u=red]text[/u] Image : [img=imgKey] Hit area of words : [area=key]text[/area]","title":"BBCode"},{"location":"bbcodetext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexBBCodeTextPlugin' , plugin : BBCodeTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"bbcodetext/#add-text-object","text":"var txt = scene . add . rexBBCodeText ( x , y , '[b]h[/b]ello' ); // var txt = scene.add.rexBBCodeText(x, y, '[b]h[/b]ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . rexBBCodeText ({ x : 0 , y : 0 , padding : { left : 0 , right : 0 , top : 0 , bottom : 0 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom","title":"Add text object"},{"location":"bbcodetext/#custom-class","text":"Define class class MyText extends BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '[b]h[/b]ello' );","title":"Custom class"},{"location":"bbcodetext/#wrap","text":"Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width );","title":"Wrap"},{"location":"bbcodetext/#content","text":"Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '[b]h[/b]ello' ); // txt.text = '[b]h[/b]ello';","title":"Content"},{"location":"bbcodetext/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"bbcodetext/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"bbcodetext/#image","text":"Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config}","title":"Image"},{"location":"bbcodetext/#hit-area-of-words","text":"","title":"Hit area of words"},{"location":"bbcodetext/#hitting-events","text":"Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope )","title":"Hitting events"},{"location":"bbcodetext/#draw-hit-areas","text":"txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw hit-areas"},{"location":"bbcodetext/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"bbcodetext/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"bbcodetext/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"bbcodetext/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"bitmaptext/","text":"Introduction \u00b6 Drawing text by texture, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load bitmap font \u00b6 Load bitmap font from texture and xml configuration scene . load . bitmapFont ( key , textureURL , xmlURL ); Reference: load bitmap font Load retro bitmap font from texture and JSON configuration Load texture in preload stage scene . load . image ( key , url ); Reference: load image Add retro bitmap font var config = { // image image : '' , offset : { x : 0 , y : 0 }, // characters width : 32 , height : 32 , chars : '' , charsPerRow : 10 , // spacing spacing : { x : 0 , y : 0 }, lineSpacing : 0 } scene . cache . bitmapFont . add ( key , Phaser . GameObjects . RetroFont . Parse ( scene , config )); Image : image : The key of the image containing the font. offset : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here. Characters : width : The width of each character in the font set. height : The height of each character in the font set. chars : The characters used in the font set, in display order. Default characters set charsPerRow : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth. Spacing : spacing : If the characters in the font set have horizontal/vertical spacing between them set the required amount here. lineSpacing : The amount of vertical space to add to the line height of the font. Add bitmap text object \u00b6 var txt = scene . bitmapText ( x , y , key , text ); // var txt = scene.bitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . bitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . BitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text ); Set text \u00b6 txt . setText ( '...' ); or txt . text = '...' ; Set align \u00b6 Left aligned txt . setLeftAlign (); Middle aligned txt . setCenterAlign (); Right aligned txt . setRightAlign (); or txt . align = align ; align : 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Set letter spacing \u00b6 txt . setLetterSpacing ( spacing ); or txt . letterSpacing = spacing ; Can be a positive value to increase the space, or negative to reduce it. Set font size \u00b6 txt . setFontSize ( size ); or txt . fontSize = size ; Set font \u00b6 txt . setFont ( key ); // txt.setFont(key, size, align); Get bound \u00b6 var width = txt . width ; var height = txt . height ; or var bounds = txt . getTextBounds ( round ); // bounds = { // local: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // global: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // lines: { // shortest: 0, // longest: 0, // lengths: null // } // }; round : Set true to round the results to the nearest integer. local : The BitmapText based on fontSize and 0x0 coords. global : The BitmapText, taking into account scale and world position. lines : The BitmapText line data. Other properties \u00b6 See game object Appendix \u00b6 Default characters set of retro font \u00b6 Phaser.GameObjects.RetroFont.TEXT_SET1 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~' Phaser.GameObjects.RetroFont.TEXT_SET2 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET3 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ' Phaser.GameObjects.RetroFont.TEXT_SET4 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789' Phaser.GameObjects.RetroFont.TEXT_SET5 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789' Phaser.GameObjects.RetroFont.TEXT_SET6 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' ' Phaser.GameObjects.RetroFont.TEXT_SET7 : 'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39' Phaser.GameObjects.RetroFont.TEXT_SET8 : '0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET9 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!' Phaser.GameObjects.RetroFont.TEXT_SET10 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET11 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'","title":"Static bitmap text"},{"location":"bitmaptext/#introduction","text":"Drawing text by texture, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"bitmaptext/#usage","text":"","title":"Usage"},{"location":"bitmaptext/#load-bitmap-font","text":"Load bitmap font from texture and xml configuration scene . load . bitmapFont ( key , textureURL , xmlURL ); Reference: load bitmap font Load retro bitmap font from texture and JSON configuration Load texture in preload stage scene . load . image ( key , url ); Reference: load image Add retro bitmap font var config = { // image image : '' , offset : { x : 0 , y : 0 }, // characters width : 32 , height : 32 , chars : '' , charsPerRow : 10 , // spacing spacing : { x : 0 , y : 0 }, lineSpacing : 0 } scene . cache . bitmapFont . add ( key , Phaser . GameObjects . RetroFont . Parse ( scene , config )); Image : image : The key of the image containing the font. offset : If the font set doesn't start at the top left of the given image, specify the X/Y coordinate offset here. Characters : width : The width of each character in the font set. height : The height of each character in the font set. chars : The characters used in the font set, in display order. Default characters set charsPerRow : The number of characters per row in the font set. If not given charsPerRow will be the image width / characterWidth. Spacing : spacing : If the characters in the font set have horizontal/vertical spacing between them set the required amount here. lineSpacing : The amount of vertical space to add to the line height of the font.","title":"Load bitmap font"},{"location":"bitmaptext/#add-bitmap-text-object","text":"var txt = scene . bitmapText ( x , y , key , text ); // var txt = scene.bitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . bitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true });","title":"Add bitmap text object"},{"location":"bitmaptext/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . BitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text );","title":"Custom class"},{"location":"bitmaptext/#set-text","text":"txt . setText ( '...' ); or txt . text = '...' ;","title":"Set text"},{"location":"bitmaptext/#set-align","text":"Left aligned txt . setLeftAlign (); Middle aligned txt . setCenterAlign (); Right aligned txt . setRightAlign (); or txt . align = align ; align : 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned","title":"Set align"},{"location":"bitmaptext/#set-letter-spacing","text":"txt . setLetterSpacing ( spacing ); or txt . letterSpacing = spacing ; Can be a positive value to increase the space, or negative to reduce it.","title":"Set letter spacing"},{"location":"bitmaptext/#set-font-size","text":"txt . setFontSize ( size ); or txt . fontSize = size ;","title":"Set font size"},{"location":"bitmaptext/#set-font","text":"txt . setFont ( key ); // txt.setFont(key, size, align);","title":"Set font"},{"location":"bitmaptext/#get-bound","text":"var width = txt . width ; var height = txt . height ; or var bounds = txt . getTextBounds ( round ); // bounds = { // local: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // global: { // x: 0, // y: 0, // width: 0, // height: 0 // }, // lines: { // shortest: 0, // longest: 0, // lengths: null // } // }; round : Set true to round the results to the nearest integer. local : The BitmapText based on fontSize and 0x0 coords. global : The BitmapText, taking into account scale and world position. lines : The BitmapText line data.","title":"Get bound"},{"location":"bitmaptext/#other-properties","text":"See game object","title":"Other properties"},{"location":"bitmaptext/#appendix","text":"","title":"Appendix"},{"location":"bitmaptext/#default-characters-set-of-retro-font","text":"Phaser.GameObjects.RetroFont.TEXT_SET1 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`abcdefghijklmnopqrstuvwxyz{|}~' Phaser.GameObjects.RetroFont.TEXT_SET2 : ' !\"#$%&\\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET3 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ' Phaser.GameObjects.RetroFont.TEXT_SET4 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789' Phaser.GameObjects.RetroFont.TEXT_SET5 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() \\'!?-*:0123456789' Phaser.GameObjects.RetroFont.TEXT_SET6 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.\\' ' Phaser.GameObjects.RetroFont.TEXT_SET7 : 'AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-\\'39' Phaser.GameObjects.RetroFont.TEXT_SET8 : '0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET9 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,\\'\"?!' Phaser.GameObjects.RetroFont.TEXT_SET10 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' Phaser.GameObjects.RetroFont.TEXT_SET11 : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()\\':;0123456789'","title":"Default characters set of retro font"},{"location":"blitter/","text":"Introduction \u00b6 Display of static images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add blitter container \u00b6 Add blitter container var blitter = scene . add . blitter ( x , y , key ); Add blitter container from JSON var blitter = scene . make . blitter ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true }); Custom class \u00b6 Define class class MyBlitter extends Phaser . GameObjects . Blitter { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var blitter = new MyBlitter ( scene , x , y , key ); Add bob object \u00b6 var bob = blitter . create ( x , y ); // var bob = blitter.create(x, y, frame, visible, index); frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using. visible : Should the created Bob render or not? index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list. Add mutiple bob objects \u00b6 var bobs = blitter . createMultiple ( quantity , frame , visible ); quantity : The quantity of Bob objects to create. Add bob object from callback \u00b6 var bobs = blitter . createFromCallback ( callback , quantity , frame , visible ) // var callback = function(bob, i){}; Get bob objects \u00b6 var bobs = blitter . children . list ; Clear all bob objects \u00b6 blitter . clear (); Bob object \u00b6 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. Position \u00b6 Get var x = bob . x ; var y = bob . y ; Set bob . setPosition ( x , y ); // bob.x = 0; // bob.y = 0; or bob . reset ( x , y ); // bob.reset(x, y, frame); Frame \u00b6 Get var frame = bob . frame ; frame : Frame object . Set bob . setFrame ( frame ); Flip \u00b6 Get var flipX = bob . flipX ; var flipY = bob . flipY ; Set bob . setFlip ( boolX , boolY ); // bob.setFlipX(boolean); // bob.setFlipY(boolean); // bob.flipX = flipX; // bob.flipY = flipY; or bob . resetFlip (); // bob.setFlip(false, false) Visible \u00b6 Get var visible = bob . visible ; Set bob . setVisible ( boolean ); // bob.visible = v; Alpha \u00b6 Get var alpha = bob . alpha ; Set bob . setAlpha ( v ); // bob.aplha = v; Tint \u00b6 Get var tint = bob . tint ; Set bob . setTint ( tint ); // bob.tint = tint; tint : Tint value, between 0 and 0xffffff . Destroy \u00b6 bob . destroy (); Data \u00b6 var data = bob . data ; // {}","title":"Blitter"},{"location":"blitter/#introduction","text":"Display of static images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"blitter/#usage","text":"","title":"Usage"},{"location":"blitter/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"blitter/#add-blitter-container","text":"Add blitter container var blitter = scene . add . blitter ( x , y , key ); Add blitter container from JSON var blitter = scene . make . blitter ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true });","title":"Add blitter container"},{"location":"blitter/#custom-class","text":"Define class class MyBlitter extends Phaser . GameObjects . Blitter { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var blitter = new MyBlitter ( scene , x , y , key );","title":"Custom class"},{"location":"blitter/#add-bob-object","text":"var bob = blitter . create ( x , y ); // var bob = blitter.create(x, y, frame, visible, index); frame : The Frame the Bob will use. It must be part of the Texture the parent Blitter object is using. visible : Should the created Bob render or not? index : The position in the Blitters Display List to add the new Bob at. Defaults to the top of the list.","title":"Add bob object"},{"location":"blitter/#add-mutiple-bob-objects","text":"var bobs = blitter . createMultiple ( quantity , frame , visible ); quantity : The quantity of Bob objects to create.","title":"Add mutiple bob objects"},{"location":"blitter/#add-bob-object-from-callback","text":"var bobs = blitter . createFromCallback ( callback , quantity , frame , visible ) // var callback = function(bob, i){};","title":"Add bob object from callback"},{"location":"blitter/#get-bob-objects","text":"var bobs = blitter . children . list ;","title":"Get bob objects"},{"location":"blitter/#clear-all-bob-objects","text":"blitter . clear ();","title":"Clear all bob objects"},{"location":"blitter/#bob-object","text":"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.","title":"Bob object"},{"location":"blitter/#position","text":"Get var x = bob . x ; var y = bob . y ; Set bob . setPosition ( x , y ); // bob.x = 0; // bob.y = 0; or bob . reset ( x , y ); // bob.reset(x, y, frame);","title":"Position"},{"location":"blitter/#frame","text":"Get var frame = bob . frame ; frame : Frame object . Set bob . setFrame ( frame );","title":"Frame"},{"location":"blitter/#flip","text":"Get var flipX = bob . flipX ; var flipY = bob . flipY ; Set bob . setFlip ( boolX , boolY ); // bob.setFlipX(boolean); // bob.setFlipY(boolean); // bob.flipX = flipX; // bob.flipY = flipY; or bob . resetFlip (); // bob.setFlip(false, false)","title":"Flip"},{"location":"blitter/#visible","text":"Get var visible = bob . visible ; Set bob . setVisible ( boolean ); // bob.visible = v;","title":"Visible"},{"location":"blitter/#alpha","text":"Get var alpha = bob . alpha ; Set bob . setAlpha ( v ); // bob.aplha = v;","title":"Alpha"},{"location":"blitter/#tint","text":"Get var tint = bob . tint ; Set bob . setTint ( tint ); // bob.tint = tint; tint : Tint value, between 0 and 0xffffff .","title":"Tint"},{"location":"blitter/#destroy","text":"bob . destroy ();","title":"Destroy"},{"location":"blitter/#data","text":"var data = bob . data ; // {}","title":"Data"},{"location":"board-bejeweled/","text":"Introduction \u00b6 Match3-like gameplay template. Author: Rex Template Source code \u00b6 Template , minify Usage \u00b6 Sample code Create bejeweled object \u00b6 var bejeweled = new Bejeweled ( scene , { board : { grid : { gridType : 'quadGrid' , x : 30 , y : 30 - 600 , cellWidth : 60 , cellHeight : 60 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 10 , height : 20 // Prepared rows: upper 10 rows }, match : { // wildcard: undefined // dirMask: undefined }, chess : { // pick random symbol from array, or a callback to return symbol symbols : [ 0 , 1 , 2 , 3 , 4 , 5 ], // symbols: function(board, tileX, tileY, excluded) { return symbol; } // User-defined chess game object create : function ( board ) { // Create Game object (Shape, Image, or Sprite) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; }, // scope for callbacks scope : undefined , // moveTo behavior moveTo : { speed : 400 }, // tileZ: 1, }, // callback of matched lines onMatchLinesCallback : function ( lines , board ) { }, onMatchLinesCallbackScope : undefined , // callback of eliminating chess onEliminatingChessCallback : function ( chess , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM }, onEliminatingChessCallbackScope : undefined , // callback of falling chess onFallingChessCallback : function ( board ) { // return eventEmitter; // custom falling task, fires 'complete' event to continue FSM }, onFallingChessCallback : undefined , // input: true }) Configurations Board properties board.width : Board width in tiles. board.height : Board height in tiles. board.grid.x , board.grid.y : World position of tile (0, 0) board.grid.cellWidth , board.grid.cellHeight : The width/height of the cell, in pixels. Chess properties chess.symbols : An array of possible symbols, or a callback to return a symbol. See Generate symbol chess.create , chess.scope : Callback of creating chess object . chess.moveTo.speed : Constant moving speed of chess, in pixel per-second. Callbacks onMatchLinesCallback , onMatchLinesCallbackScope : On matched lines onEliminatingChessCallback , onEliminatingChessCallbackScope : On eliminating chess onFallingChessCallback , onFallingChessCallback : On falling chess Touch input input : Set true to register default touch input logic. It also install Board plugins into Game system. Board height \u00b6 Board is separated into two parts: upper and bottom Bottom : Visible N rows , to swap chess and run matching. Upper : Invisible N rows , chess in these rows will move down, to fill bottom rows. For example, if amount of visible rows is 10 , board.height should set to 20 . Generate symbol \u00b6 Symbols are declared in property chess.symbols in a symbol array like [0, 1, 2, 3, 4, 5] , or a callback to return a symbol. The callback also use chess.scope as the scope. function ( board , tileX , tileY , excluded ) { return symbol } excluded : undefined or a symbol array. Don't return these symbols. Create chess object \u00b6 Return a game object from a callback. function ( board ) { // Create Game object (Image, Sprite, or Shape) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; } Each chess has a symbol value stored in 'symbol' key in private data. Add data changed event of 'symbol` key to change the appearance of game object via new symbol value. Callbacks \u00b6 On matched lines \u00b6 function ( lines , board ) { } lines : An array of matched lines, each line is a built-in Set object . Length of each line ( lines[i].size ) could be 5 , 4 , or 3 . lines[i].entries : An array of chess (Game Object) in a matched line. All chess game objects in matched lines will be eliminated in next stage. Add/remove chess game object in these lines, or add new line in lines array to change the eliminated targets. board : Board object . Get tile position {x,y,z} of a chess game object via var tileXYZ = gameObject . rexChess . tileXYZ ; Get chess game object of a tile position {x,y,z} via var gameObject = board . tileXYZToChess ( tileX , tileY , tileZ ); Get array of neighbor chess of a chess game object via var gameObjects = board . getNeighborChess ( chess , null ); Use cases: Get cross chess of two lines via lineA.intersect(lineB) . Add chess into line(s) to eliminate more chess. On eliminating chess \u00b6 function ( chessArray , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM } chessArray : An array of chess (Game Object) to be eliminated board : Board object Use csees: Accumulate scores via amount of eliminated chess On falling chess \u00b6 Start gameplay \u00b6 bejeweled . start (); Input control \u00b6 Default input \u00b6 Enable default input control var bejeweled = new Bejeweled ( scene , { // ... input : true }); Enable/disable temporarily. Enable bejeweled . setInputEnable (); Disable bejeweled . setInputEnable ( false ); Custom input \u00b6 Discard default input control var bejeweled = new Bejeweled ( scene , { // ... input : false }); Add custom input logic like scene . input . on ( 'pointerdown' , function ( pointer ) { var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess ) { bejeweled . selectChess1 ( chess ); } }, scene ) . on ( 'pointermove' , function ( pointer ) { if ( ! pointer . isDown ) { return ; } var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess && ( chess !== this . bejeweled . selectedChess1 )) { bejeweled . selectChess2 ( chess ); } }, scene ); Helper methods Get chess via worldXY position var chess = bejeweled . worldXYToChess ( worldX , worldY ); Get chess via tileXY position var chess = bejeweled . tileXYToChess ( tileX , tileY ); Get neighbor chess via angle var chess2 = bejeweled . getNeighborChessAtAngle ( chess1 , angle ); chess1 : Chess object, or tileXY position {x, y} . angle : Angle in radius. Get neighbor chess via direction var chess2 = bejeweled . getNeighborChessAtDirection ( chess1 , direction ); chess1 : Chess object, or tileXY position {x, y} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Bejeweled"},{"location":"board-bejeweled/#introduction","text":"Match3-like gameplay template. Author: Rex Template","title":"Introduction"},{"location":"board-bejeweled/#source-code","text":"Template , minify","title":"Source code"},{"location":"board-bejeweled/#usage","text":"Sample code","title":"Usage"},{"location":"board-bejeweled/#create-bejeweled-object","text":"var bejeweled = new Bejeweled ( scene , { board : { grid : { gridType : 'quadGrid' , x : 30 , y : 30 - 600 , cellWidth : 60 , cellHeight : 60 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 10 , height : 20 // Prepared rows: upper 10 rows }, match : { // wildcard: undefined // dirMask: undefined }, chess : { // pick random symbol from array, or a callback to return symbol symbols : [ 0 , 1 , 2 , 3 , 4 , 5 ], // symbols: function(board, tileX, tileY, excluded) { return symbol; } // User-defined chess game object create : function ( board ) { // Create Game object (Shape, Image, or Sprite) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; }, // scope for callbacks scope : undefined , // moveTo behavior moveTo : { speed : 400 }, // tileZ: 1, }, // callback of matched lines onMatchLinesCallback : function ( lines , board ) { }, onMatchLinesCallbackScope : undefined , // callback of eliminating chess onEliminatingChessCallback : function ( chess , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM }, onEliminatingChessCallbackScope : undefined , // callback of falling chess onFallingChessCallback : function ( board ) { // return eventEmitter; // custom falling task, fires 'complete' event to continue FSM }, onFallingChessCallback : undefined , // input: true }) Configurations Board properties board.width : Board width in tiles. board.height : Board height in tiles. board.grid.x , board.grid.y : World position of tile (0, 0) board.grid.cellWidth , board.grid.cellHeight : The width/height of the cell, in pixels. Chess properties chess.symbols : An array of possible symbols, or a callback to return a symbol. See Generate symbol chess.create , chess.scope : Callback of creating chess object . chess.moveTo.speed : Constant moving speed of chess, in pixel per-second. Callbacks onMatchLinesCallback , onMatchLinesCallbackScope : On matched lines onEliminatingChessCallback , onEliminatingChessCallbackScope : On eliminating chess onFallingChessCallback , onFallingChessCallback : On falling chess Touch input input : Set true to register default touch input logic. It also install Board plugins into Game system.","title":"Create bejeweled object"},{"location":"board-bejeweled/#board-height","text":"Board is separated into two parts: upper and bottom Bottom : Visible N rows , to swap chess and run matching. Upper : Invisible N rows , chess in these rows will move down, to fill bottom rows. For example, if amount of visible rows is 10 , board.height should set to 20 .","title":"Board height"},{"location":"board-bejeweled/#generate-symbol","text":"Symbols are declared in property chess.symbols in a symbol array like [0, 1, 2, 3, 4, 5] , or a callback to return a symbol. The callback also use chess.scope as the scope. function ( board , tileX , tileY , excluded ) { return symbol } excluded : undefined or a symbol array. Don't return these symbols.","title":"Generate symbol"},{"location":"board-bejeweled/#create-chess-object","text":"Return a game object from a callback. function ( board ) { // Create Game object (Image, Sprite, or Shape) var scene = board . scene ; var gameObject = scene . add . sprite ( 0 , 0 , textureKey , frame ); // Initial 'symbol' value gameObject . setData ( 'symbol' , undefined ); // Add data changed event of 'symbol` key gameObject . data . events . on ( 'changedata_symbol' , function ( gameObject , value , previousValue ) { // Change the appearance of game object via new symbol value gameObject . setFrame ( newFrame ); }); return gameObject ; } Each chess has a symbol value stored in 'symbol' key in private data. Add data changed event of 'symbol` key to change the appearance of game object via new symbol value.","title":"Create chess object"},{"location":"board-bejeweled/#callbacks","text":"","title":"Callbacks"},{"location":"board-bejeweled/#on-matched-lines","text":"function ( lines , board ) { } lines : An array of matched lines, each line is a built-in Set object . Length of each line ( lines[i].size ) could be 5 , 4 , or 3 . lines[i].entries : An array of chess (Game Object) in a matched line. All chess game objects in matched lines will be eliminated in next stage. Add/remove chess game object in these lines, or add new line in lines array to change the eliminated targets. board : Board object . Get tile position {x,y,z} of a chess game object via var tileXYZ = gameObject . rexChess . tileXYZ ; Get chess game object of a tile position {x,y,z} via var gameObject = board . tileXYZToChess ( tileX , tileY , tileZ ); Get array of neighbor chess of a chess game object via var gameObjects = board . getNeighborChess ( chess , null ); Use cases: Get cross chess of two lines via lineA.intersect(lineB) . Add chess into line(s) to eliminate more chess.","title":"On matched lines"},{"location":"board-bejeweled/#on-eliminating-chess","text":"function ( chessArray , board ) { // return eventEmitter; // custom eliminating task, fires 'complete' event to continue FSM } chessArray : An array of chess (Game Object) to be eliminated board : Board object Use csees: Accumulate scores via amount of eliminated chess","title":"On eliminating chess"},{"location":"board-bejeweled/#on-falling-chess","text":"","title":"On falling chess"},{"location":"board-bejeweled/#start-gameplay","text":"bejeweled . start ();","title":"Start gameplay"},{"location":"board-bejeweled/#input-control","text":"","title":"Input control"},{"location":"board-bejeweled/#default-input","text":"Enable default input control var bejeweled = new Bejeweled ( scene , { // ... input : true }); Enable/disable temporarily. Enable bejeweled . setInputEnable (); Disable bejeweled . setInputEnable ( false );","title":"Default input"},{"location":"board-bejeweled/#custom-input","text":"Discard default input control var bejeweled = new Bejeweled ( scene , { // ... input : false }); Add custom input logic like scene . input . on ( 'pointerdown' , function ( pointer ) { var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess ) { bejeweled . selectChess1 ( chess ); } }, scene ) . on ( 'pointermove' , function ( pointer ) { if ( ! pointer . isDown ) { return ; } var chess = bejeweled . worldXYToChess ( pointer . worldX , pointer . worldY ); if ( chess && ( chess !== this . bejeweled . selectedChess1 )) { bejeweled . selectChess2 ( chess ); } }, scene ); Helper methods Get chess via worldXY position var chess = bejeweled . worldXYToChess ( worldX , worldY ); Get chess via tileXY position var chess = bejeweled . tileXYToChess ( tileX , tileY ); Get neighbor chess via angle var chess2 = bejeweled . getNeighborChessAtAngle ( chess1 , angle ); chess1 : Chess object, or tileXY position {x, y} . angle : Angle in radius. Get neighbor chess via direction var chess2 = bejeweled . getNeighborChessAtDirection ( chess1 , direction ); chess1 : Chess object, or tileXY position {x, y} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Custom input"},{"location":"board-chessdata/","text":"Introduction \u00b6 Properties of chess, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Add chess data object \u00b6 Chess data will be added to game object via gameObject.rexChess once adding this game object to board, or attach any chess behavior. Get chess data \u00b6 var chessData = gameObject . rexChess ; Set tile Z \u00b6 gameObject . rexChess . setTileZ ( tileZ ); (tileX, tileY) won't be changed. Get tile position \u00b6 var tileXYZ = gameObject . rexChess . tileXYZ ; tileXYZ : Tile position {x,y,z} , return null if this chess is not added to any board. Get board \u00b6 var board = gameObject . rexChess . board ; board : Board object , or null if this chess is not added to any board. Blocker \u00b6 Set gameObject . rexChess . setBlocker (); Disable gameObject . rexChess . setBlocker ( false ); Get var blocker = gameObject . rexChess . blocker ;","title":"Chess data"},{"location":"board-chessdata/#introduction","text":"Properties of chess, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-chessdata/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-chessdata/#usage","text":"","title":"Usage"},{"location":"board-chessdata/#add-chess-data-object","text":"Chess data will be added to game object via gameObject.rexChess once adding this game object to board, or attach any chess behavior.","title":"Add chess data object"},{"location":"board-chessdata/#get-chess-data","text":"var chessData = gameObject . rexChess ;","title":"Get chess data"},{"location":"board-chessdata/#set-tile-z","text":"gameObject . rexChess . setTileZ ( tileZ ); (tileX, tileY) won't be changed.","title":"Set tile Z"},{"location":"board-chessdata/#get-tile-position","text":"var tileXYZ = gameObject . rexChess . tileXYZ ; tileXYZ : Tile position {x,y,z} , return null if this chess is not added to any board.","title":"Get tile position"},{"location":"board-chessdata/#get-board","text":"var board = gameObject . rexChess . board ; board : Board object , or null if this chess is not added to any board.","title":"Get board"},{"location":"board-chessdata/#blocker","text":"Set gameObject . rexChess . setBlocker (); Disable gameObject . rexChess . setBlocker ( false ); Get var blocker = gameObject . rexChess . blocker ;","title":"Blocker"},{"location":"board-fieldofview/","text":"Introduction \u00b6 Visible testing, to find field of view, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var fieldOfView = scene . rexBoard . add . fieldOfView ( chess , { // face: 0, // cone: undefined, // coneMode: 0, // ** pre-test ** // occupiedTest: false, // blockerTest: false, // preTestCallback: undefined, // preTestCallbackScope: undefined, // ** cost ** // costCallback: undefined, // costCallbackScope: undefined, // cost: undefined, // constant cost // debug: { // graphics: undefined, // visibleLineColor: 0x00ff00, // invisibleLineColor: 0xff0000, // log: false, // } }) face : Face of chess. 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . cone : View of cone. Tile position or chess which not in view of cone will be invisible. undefined : Ignore this feature coneMode : Unit of cone , in direction or angle. 'direction' , or 0 : Cone in directions. For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set face : 0, cone : 2, coneMode: 0 'angle' , or 1 : Cone in angle. For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set face : 0, cone : 120, coneMode: 1 Pre-test : Test tiles on visible path. occupiedTest : Set true to test if target tile position is occupied or not. blockerTest : Set true to test blocker property . preTestCallback , preTestCallbackScope : Custom pre-test function, return false to discard cost function. function ( tileXYArray , visiblePoints , fieldOfView ) { // return false; } tileXYArray[0] is current tileXY position of chess. Cost function of each tile on visible path cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. debug : debug.graphics : A graphics object for showing debug messages. debug.visibleLineColor : Color of visible line. Set undefined to not draw any line. debug.invisibleLineColor : Color of invisible line. Set undefined to not draw any line. Set pre-test function \u00b6 fieldOfView . setPreTestFunction ( callback , scope ); callback var callback = function ( tileXYArray , visiblePoints , fieldOfView ) { return false ; } tileXYArray[0] is current tileXY position of chess. Set cost function \u00b6 Constant cost for each non-blocked tile fieldOfView . setCostFunction ( cost ); Get cost via callback fieldOfView . setCostFunction ( callback , scope ); callback var callback = function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. Is tileXY/chess visible \u00b6 var isVisible = fieldOfView . isInLOS ( chess ); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY); chess : Chess object or tileXY visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Get tileXY array in field of view \u00b6 var tileXYArray = fieldOfView . findFOV (); // var tileXYArray = fieldOfView.findFOV(visiblePoints); // var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY); // var out = fieldOfView.findFOV(visiblePoints, out); // var out = fieldOfView.findFOV(visiblePoints, originTileXY, out); visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. out : Returned tileXY array. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array \u00b6 Filter visible tileXY array var out = fieldOfView . LOS ( chessArray ); // var out = fieldOfView.LOS(chessArray, originTileXY); // var out = fieldOfView.LOS(chessArray, out); // var out = fieldOfView.LOS(chessArray, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array with visible points var out = fieldOfView . LOS ( chessArray , visiblePoints ); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY); // var out = fieldOfView.LOS(chessArray, visiblePoints, out); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Face \u00b6 Face direction Get var face = fieldOfView . face ; Set fieldOfView . setFace ( direction ); or fieldOfView . face = direction ; // fieldOfView.face ++; face : 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Debug \u00b6 Clear debug graphics fieldOfView . clearDebugGraphics (); Set color of lines fieldOfView . setDebugLineColor ( visibleLineColor , invisibleLineColor ); visibleLineColor , invisibleLineColor : Set undefined to not draw any line.","title":"Field of view"},{"location":"board-fieldofview/#introduction","text":"Visible testing, to find field of view, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-fieldofview/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-fieldofview/#usage","text":"Sample code","title":"Usage"},{"location":"board-fieldofview/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-fieldofview/#create-instance","text":"var fieldOfView = scene . rexBoard . add . fieldOfView ( chess , { // face: 0, // cone: undefined, // coneMode: 0, // ** pre-test ** // occupiedTest: false, // blockerTest: false, // preTestCallback: undefined, // preTestCallbackScope: undefined, // ** cost ** // costCallback: undefined, // costCallbackScope: undefined, // cost: undefined, // constant cost // debug: { // graphics: undefined, // visibleLineColor: 0x00ff00, // invisibleLineColor: 0xff0000, // log: false, // } }) face : Face of chess. 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . cone : View of cone. Tile position or chess which not in view of cone will be invisible. undefined : Ignore this feature coneMode : Unit of cone , in direction or angle. 'direction' , or 0 : Cone in directions. For example, visible directions are between (0 - 2/2) to (0 + 2/2) if set face : 0, cone : 2, coneMode: 0 'angle' , or 1 : Cone in angle. For example, visible angle is between (0 - 120/2) to (0 + 120/2) if set face : 0, cone : 120, coneMode: 1 Pre-test : Test tiles on visible path. occupiedTest : Set true to test if target tile position is occupied or not. blockerTest : Set true to test blocker property . preTestCallback , preTestCallbackScope : Custom pre-test function, return false to discard cost function. function ( tileXYArray , visiblePoints , fieldOfView ) { // return false; } tileXYArray[0] is current tileXY position of chess. Cost function of each tile on visible path cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path. debug : debug.graphics : A graphics object for showing debug messages. debug.visibleLineColor : Color of visible line. Set undefined to not draw any line. debug.invisibleLineColor : Color of invisible line. Set undefined to not draw any line.","title":"Create instance"},{"location":"board-fieldofview/#set-pre-test-function","text":"fieldOfView . setPreTestFunction ( callback , scope ); callback var callback = function ( tileXYArray , visiblePoints , fieldOfView ) { return false ; } tileXYArray[0] is current tileXY position of chess.","title":"Set pre-test function"},{"location":"board-fieldofview/#set-cost-function","text":"Constant cost for each non-blocked tile fieldOfView . setCostFunction ( cost ); Get cost via callback fieldOfView . setCostFunction ( callback , scope ); callback var callback = function ( curTile , fieldOfView , tileXYArray ) { return cost ; } Cost of blocker : fieldOfView.BLOCKER curTile : Currest testing tileXY. tileXYArray : A read only tileXY array of sight path.","title":"Set cost function"},{"location":"board-fieldofview/#is-tilexychess-visible","text":"var isVisible = fieldOfView . isInLOS ( chess ); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints); // var isVisible = fieldOfView.isInLOS(chess, visiblePoints, originTileXY); chess : Chess object or tileXY visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Is tileXY/chess visible"},{"location":"board-fieldofview/#get-tilexy-array-in-field-of-view","text":"var tileXYArray = fieldOfView . findFOV (); // var tileXYArray = fieldOfView.findFOV(visiblePoints); // var tileXYArray = fieldOfView.findFOV(visiblePoints, originTileXY); // var out = fieldOfView.findFOV(visiblePoints, out); // var out = fieldOfView.findFOV(visiblePoints, originTileXY, out); visiblePoints fieldOfView.INFINITY ( undefined ) : Infinity visible points. Default value. out : Returned tileXY array. originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Get tileXY array in field of view"},{"location":"board-fieldofview/#filter-visible-tilexy-array","text":"Filter visible tileXY array var out = fieldOfView . LOS ( chessArray ); // var out = fieldOfView.LOS(chessArray, originTileXY); // var out = fieldOfView.LOS(chessArray, out); // var out = fieldOfView.LOS(chessArray, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing. Filter visible tileXY array with visible points var out = fieldOfView . LOS ( chessArray , visiblePoints ); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY); // var out = fieldOfView.LOS(chessArray, visiblePoints, out); // var out = fieldOfView.LOS(chessArray, visiblePoints, originTileXY, out); chessArray : Array of chess object or tileXY out : Array of visible chess object or tileXY originTileXY : Put chess at this tileXY position for visible testing temporary. undefined : Use current tileXY position for visible testing.","title":"Filter visible tileXY array"},{"location":"board-fieldofview/#face","text":"Face direction Get var face = fieldOfView . face ; Set fieldOfView . setFace ( direction ); or fieldOfView . face = direction ; // fieldOfView.face ++; face : 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid .","title":"Face"},{"location":"board-fieldofview/#debug","text":"Clear debug graphics fieldOfView . clearDebugGraphics (); Set color of lines fieldOfView . setDebugLineColor ( visibleLineColor , invisibleLineColor ); visibleLineColor , invisibleLineColor : Set undefined to not draw any line.","title":"Debug"},{"location":"board-hexagongrid/","text":"Introduction \u00b6 Hexagon grid object of Board system. Author: Rex Grid object of board Source code \u00b6 Included in board plugin . Usage \u00b6 See board examples . Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var grid = scene . rexBoard . add . hexagonGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , // size: undefined, staggeraxis : 1 , staggerindex : 1 }); x , y : World position of origin tile (i.e. tileX = 0, tileY = 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. size : Distance between center to each corner. Get cellWidth and cellHeight from size if this parameter is not undefined. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd Set world position of tile (0, 0) \u00b6 grid . setOriginPosition ( worldX , worldY ); Set cell size \u00b6 grid . setCellSize ( cellWidth , cellHeight ); Set grid type \u00b6 grid . setType ( staggeraxis , staggerindex ); staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd Get world position \u00b6 var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Get tile position \u00b6 var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Directions \u00b6 staggeraxis = 0 / y 0 : Down-right 1 : Down 2 : Down-left 3 : Up-left 4 : Up 5 : Up-right staggeraxis = 1 / x 0 : Right 1 : Down-right 2 : Down-left 3 : Left 4 : Up-left 5 : Up-right","title":"Hexagon"},{"location":"board-hexagongrid/#introduction","text":"Hexagon grid object of Board system. Author: Rex Grid object of board","title":"Introduction"},{"location":"board-hexagongrid/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-hexagongrid/#usage","text":"See board examples .","title":"Usage"},{"location":"board-hexagongrid/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-hexagongrid/#create-instance","text":"var grid = scene . rexBoard . add . hexagonGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , // size: undefined, staggeraxis : 1 , staggerindex : 1 }); x , y : World position of origin tile (i.e. tileX = 0, tileY = 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. size : Distance between center to each corner. Get cellWidth and cellHeight from size if this parameter is not undefined. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd","title":"Create instance"},{"location":"board-hexagongrid/#set-world-position-of-tile-0-0","text":"grid . setOriginPosition ( worldX , worldY );","title":"Set world position of tile (0, 0)"},{"location":"board-hexagongrid/#set-cell-size","text":"grid . setCellSize ( cellWidth , cellHeight );","title":"Set cell size"},{"location":"board-hexagongrid/#set-grid-type","text":"grid . setType ( staggeraxis , staggerindex ); staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd","title":"Set grid type"},{"location":"board-hexagongrid/#get-world-position","text":"var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get world position"},{"location":"board-hexagongrid/#get-tile-position","text":"var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get tile position"},{"location":"board-hexagongrid/#directions","text":"staggeraxis = 0 / y 0 : Down-right 1 : Down 2 : Down-left 3 : Up-left 4 : Up 5 : Up-right staggeraxis = 1 / x 0 : Right 1 : Down-right 2 : Down-left 3 : Left 4 : Up-left 5 : Up-right","title":"Directions"},{"location":"board-hexagonmap/","text":"Introduction \u00b6 Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Author: Rex Help method of board Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create tile positions \u00b6 Hexagon \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . hexagon ( board , radius ); // var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out); tileXYArray : An array of tile position {x, y} . board : Board object . radius : Radius in tile count. staggeraxis y x Parallelogram \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . parallelogram ( board , type , width , height ); // var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . width , height : Size of parallelogram type\\staggeraxis y x 0 1 2 Triangle \u00b6 var tileXYArray = scene . rexBoard . hexagonMap . triangle ( board , type , height ); // var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . height : Size of Triangle type\\staggeraxis y x 0 1 Retrieve tile positions \u00b6 Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. var tileXYArray = board . fit ( tileXYArray ); Retrieve tile positions var tileXY ; for ( var i = 0 , cnt = tileXYArray . length ; i < cnt ; i ++ ) { tileXY = tileXYArray [ i ]; // ... }","title":"Hexagon map"},{"location":"board-hexagonmap/#introduction","text":"Create tile positions in hexagon/triangle/parallelogram geometry in hexagon grid. Author: Rex Help method of board","title":"Introduction"},{"location":"board-hexagonmap/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-hexagonmap/#usage","text":"Sample code","title":"Usage"},{"location":"board-hexagonmap/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-hexagonmap/#create-tile-positions","text":"","title":"Create tile positions"},{"location":"board-hexagonmap/#hexagon","text":"var tileXYArray = scene . rexBoard . hexagonMap . hexagon ( board , radius ); // var out = scene.rexBoard.hexagonMap.hexagon(board, radius, out); tileXYArray : An array of tile position {x, y} . board : Board object . radius : Radius in tile count. staggeraxis y x","title":"Hexagon"},{"location":"board-hexagonmap/#parallelogram","text":"var tileXYArray = scene . rexBoard . hexagonMap . parallelogram ( board , type , width , height ); // var out = scene.rexBoard.hexagonMap.parallelogram(board, type, width, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . width , height : Size of parallelogram type\\staggeraxis y x 0 1 2","title":"Parallelogram"},{"location":"board-hexagonmap/#triangle","text":"var tileXYArray = scene . rexBoard . hexagonMap . triangle ( board , type , height ); // var out = scene.rexBoard.hexagonMap.triangle(board, type, height, out); tileXYArray : An array of tile position {x, y} . board : Board object . height : Size of Triangle type\\staggeraxis y x 0 1","title":"Triangle"},{"location":"board-hexagonmap/#retrieve-tile-positions","text":"Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. var tileXYArray = board . fit ( tileXYArray ); Retrieve tile positions var tileXY ; for ( var i = 0 , cnt = tileXYArray . length ; i < cnt ; i ++ ) { tileXY = tileXYArray [ i ]; // ... }","title":"Retrieve tile positions"},{"location":"board-match/","text":"Introduction \u00b6 Get matched chess. Author: Rex Application of Board system Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add match object \u00b6 var match = scene . rexBoard . add . match ({ board : board , // wildcard: undefined // dirMask: undefined }); board : A board object wildcard : A string or a number dirMask : Enable/Disable matching at directions, all directions are enbale by default. Quad grid , 4 directions { 0 : true , // set false to disable left/right matching 1 : true // set false to disable up/down matching } Quad grid , 8 directions { 0 : true , // set false to disable left/right matching 1 : true , // set false to disable up/down matching 4 : true , // set false to disable left-down/right-up matching 5 : true // set false to disable right-down/left-up matching } Hexagon grid { 0 : true , 1 : true , 3 : true } Custom class \u00b6 Define class class MyMatch extends RexPlugins . Board . Match { constructor ( config ) { super ( config ); // ... } // ... } Create instance var match = new MyMatch ( config ); Set board \u00b6 Board object could be assigned later. match . setBoard ( board ); Update symbols \u00b6 Each tile position (tileX, tileY) has a symbol. Update all symbols in board \u00b6 match . refreshSymbols ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); tileXY : Tile position {x, y} board : Board object symbol : A string or a number null : No symbol Updata a symbol \u00b6 match . setSymbol ( tileX , tileY , symbol ); or match . setSymbol ( tileX , tileY , ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); Get symbol \u00b6 var symbol = match . getSymbol ( tileX , tileY ); Dump symbols \u00b6 match . dumpSymobls ( function ( tileXY , symbol , board ) { }, scope ) tileXY : Tile position {x, y} symbol : A string or a number null : No symbol board : Board object Directions mask \u00b6 Enable/Disable matching at directions, all directions are enbale by default. match . setDirMask ( dir , value ); dir : Quad grid , 4 directions : 0 , 1 Quad grid , 8 directions : 0 , 1 , 4 , 5 Hexagon grid : 0 , 1 , 2 value : true or false Match \u00b6 Match-N \u00b6 match . match ( n , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); n : A number, to get matched chess with n equal symbols result : A group of chess { tileXY : [], direction : 0 pattern : symbol } tileXY : An array of tile positions {x, y} direction : Direction of this chess group 0 , 1 , for quad grid with 4 directions 0 , 1 , 4 , 5 , for quad grid with 8 directions 0 , 1 , 2 , for hexagon grid pattern : Matched symbol board : Board object Any match-N \u00b6 var hasAnyMatchN = match . anyMatch ( n ); Match pattern \u00b6 match . match ( pattern , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); pattern : A list of symbols Any match pattern \u00b6 var hasAnyMatchN = match . anyMatch ( pattern );","title":"Match"},{"location":"board-match/#introduction","text":"Get matched chess. Author: Rex Application of Board system","title":"Introduction"},{"location":"board-match/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-match/#usage","text":"Sample code","title":"Usage"},{"location":"board-match/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-match/#add-match-object","text":"var match = scene . rexBoard . add . match ({ board : board , // wildcard: undefined // dirMask: undefined }); board : A board object wildcard : A string or a number dirMask : Enable/Disable matching at directions, all directions are enbale by default. Quad grid , 4 directions { 0 : true , // set false to disable left/right matching 1 : true // set false to disable up/down matching } Quad grid , 8 directions { 0 : true , // set false to disable left/right matching 1 : true , // set false to disable up/down matching 4 : true , // set false to disable left-down/right-up matching 5 : true // set false to disable right-down/left-up matching } Hexagon grid { 0 : true , 1 : true , 3 : true }","title":"Add match object"},{"location":"board-match/#custom-class","text":"Define class class MyMatch extends RexPlugins . Board . Match { constructor ( config ) { super ( config ); // ... } // ... } Create instance var match = new MyMatch ( config );","title":"Custom class"},{"location":"board-match/#set-board","text":"Board object could be assigned later. match . setBoard ( board );","title":"Set board"},{"location":"board-match/#update-symbols","text":"Each tile position (tileX, tileY) has a symbol.","title":"Update symbols"},{"location":"board-match/#update-all-symbols-in-board","text":"match . refreshSymbols ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope ); tileXY : Tile position {x, y} board : Board object symbol : A string or a number null : No symbol","title":"Update all symbols in board"},{"location":"board-match/#updata-a-symbol","text":"match . setSymbol ( tileX , tileY , symbol ); or match . setSymbol ( tileX , tileY , ( function ( tileXY , board ) { // var chess = board.tileXYZToChess(tileXY.x, tileXY.y, 0); // if (chess == null) { return null; } return symbol ; }, scope );","title":"Updata a symbol"},{"location":"board-match/#get-symbol","text":"var symbol = match . getSymbol ( tileX , tileY );","title":"Get symbol"},{"location":"board-match/#dump-symbols","text":"match . dumpSymobls ( function ( tileXY , symbol , board ) { }, scope ) tileXY : Tile position {x, y} symbol : A string or a number null : No symbol board : Board object","title":"Dump symbols"},{"location":"board-match/#directions-mask","text":"Enable/Disable matching at directions, all directions are enbale by default. match . setDirMask ( dir , value ); dir : Quad grid , 4 directions : 0 , 1 Quad grid , 8 directions : 0 , 1 , 4 , 5 Hexagon grid : 0 , 1 , 2 value : true or false","title":"Directions mask"},{"location":"board-match/#match","text":"","title":"Match"},{"location":"board-match/#match-n","text":"match . match ( n , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); n : A number, to get matched chess with n equal symbols result : A group of chess { tileXY : [], direction : 0 pattern : symbol } tileXY : An array of tile positions {x, y} direction : Direction of this chess group 0 , 1 , for quad grid with 4 directions 0 , 1 , 4 , 5 , for quad grid with 8 directions 0 , 1 , 2 , for hexagon grid pattern : Matched symbol board : Board object","title":"Match-N"},{"location":"board-match/#any-match-n","text":"var hasAnyMatchN = match . anyMatch ( n );","title":"Any match-N"},{"location":"board-match/#match-pattern","text":"match . match ( pattern , function ( result , board ) { // var chess = board.tileXYArrayToChess(result.tileXY, 0); // GroupCall(chess, function (chess) { chess.setScale(0.8); }); }, scope ); pattern : A list of symbols","title":"Match pattern"},{"location":"board-match/#any-match-pattern","text":"var hasAnyMatchN = match . anyMatch ( pattern );","title":"Any match pattern"},{"location":"board-miniboard/","text":"Introduction \u00b6 Chess Container , to rotate/mirror/drag chess together. Author: Rex Container Game object of chess group Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add Container \u00b6 var miniBoard = scene . rexBoard . add . miniBoard ( x , y , { grid : grid , draggable : undefined , }); grid : Create board object first, then get grid object via board.grid . gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid draggable : Set true to enable dragging events Add chess \u00b6 miniBoard . addChess ( gameObject , tileX , tileY , tileZ ); chess : A game object. tileX , tileY , tileZ : Tile position. Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . These world properties of chess will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Remove chess \u00b6 Remove chess object from board miniBoard . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board miniBoard . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess miniBoard . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object. Main board \u00b6 Put chess to a main-board ( Board object ) with the same tile position in mini-board, or pull chess out from main-board. Put on main-board \u00b6 miniBoard . putOnMainBoard ( mainBoard , tileX , tileY ); // miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align); mainBoard : Board object . tileX , tileY : Tile position to put on. align : Set true to align world position of each chess Game object to grid of main-board. Default is true . or miniBoard . putOnMainBoard ( mainBoard ); To put this mini-board to nearest grid of main-board. Pull out from main-board \u00b6 miniBoard . pullOutFromMainBoard (); Remove all chess from main-board. Put back to previous main-board \u00b6 miniBoard . putBack (); Previous main-board and tile position will be remembered for putting back. Is overlapping to main-board \u00b6 Return true if any chess is overlapping to main-board. miniBoard . isOverlapping ( mainBoard ); or miniBoard . isOverlapping ( mainBoard , tileZ ); Align world position to grid of main-board \u00b6 miniBoard . alignToMainBoard ( mainBoard , tileX , tileY ); mainBoard : Board object tileX , tileY : Tile position on main-board or miniBoard . alignToMainBoard ( mainBoard ); to align this mini-board to nearest grid of main-board. Get current main-board \u00b6 var board = miniBoard . mainBoard ; board : Board object Return null if this mini-board is not at any main-board. Rotate \u00b6 Can rotate \u00b6 miniBoard . canRotate ( n ); n : Rotate to direction current direction + n or miniBoard . canRotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Always return true if this mini-board is not on a main-board. Rotate \u00b6 miniBoard . rotate ( n ); n : Rotate direction to current direction + n or miniBoard . rotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Return true if this rotating request is accepted. var isSuccess = miniBoard . lastTransferResult ; Mirror \u00b6 Can mirror \u00b6 miniBoard . canMirror ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Always return true if this mini-board is not on a main-board. Mirror \u00b6 miniBoard . rotate ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Return true if this mirroring request is accepted. var isSuccess = miniBoard . lastTransferResult ; Touch events \u00b6 Set interactive \u00b6 Enable miniBoard . setInteractive (); Disable miniBoard . setInteractive ( false ); Set drag-able \u00b6 Enable miniBoard . setDragEnable (); Disable miniBoard . setDragEnable ( false ); Drag events \u00b6 Drag-start miniBoard . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* miniBoard.pullOutFromMainBoard(); */ }, scope ); Pull out from main-board for dragging. Dragging miniBoard . on ( 'drag' , function ( pointer , dragX , dragY ){ /* miniBoard.setPosition(dragX, dragY); if (miniBoard.isOverlapping(mainBoard)) { miniBoard.alignToMainBoard(mainBoard); } */ }, scope ); Set world position of mini-board via ( dragX , dragY ), align to nearest grid of main-board if overlapping with that main-board. Drag-end miniBoard . on ( 'dragend' , function ( pointer , dragX , dragY ){ /* miniBoard.putOnMainBoard(mainBoard); if (miniBoard.mainBoard) { } */ }, scope ); Put chess on main-board at nearest grid. Touch event \u00b6 Pointer down at a chess miniBoard . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up at a chess miniBoard . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move to another chess miniBoard . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Mini board"},{"location":"board-miniboard/#introduction","text":"Chess Container , to rotate/mirror/drag chess together. Author: Rex Container Game object of chess group","title":"Introduction"},{"location":"board-miniboard/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-miniboard/#usage","text":"Sample code","title":"Usage"},{"location":"board-miniboard/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-miniboard/#add-container","text":"var miniBoard = scene . rexBoard . add . miniBoard ( x , y , { grid : grid , draggable : undefined , }); grid : Create board object first, then get grid object via board.grid . gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid draggable : Set true to enable dragging events","title":"Add Container"},{"location":"board-miniboard/#add-chess","text":"miniBoard . addChess ( gameObject , tileX , tileY , tileZ ); chess : A game object. tileX , tileY , tileZ : Tile position. Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . These world properties of chess will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask","title":"Add chess"},{"location":"board-miniboard/#remove-chess","text":"Remove chess object from board miniBoard . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board miniBoard . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess miniBoard . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object.","title":"Remove chess"},{"location":"board-miniboard/#main-board","text":"Put chess to a main-board ( Board object ) with the same tile position in mini-board, or pull chess out from main-board.","title":"Main board"},{"location":"board-miniboard/#put-on-main-board","text":"miniBoard . putOnMainBoard ( mainBoard , tileX , tileY ); // miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align); mainBoard : Board object . tileX , tileY : Tile position to put on. align : Set true to align world position of each chess Game object to grid of main-board. Default is true . or miniBoard . putOnMainBoard ( mainBoard ); To put this mini-board to nearest grid of main-board.","title":"Put on main-board"},{"location":"board-miniboard/#pull-out-from-main-board","text":"miniBoard . pullOutFromMainBoard (); Remove all chess from main-board.","title":"Pull out from main-board"},{"location":"board-miniboard/#put-back-to-previous-main-board","text":"miniBoard . putBack (); Previous main-board and tile position will be remembered for putting back.","title":"Put back to previous main-board"},{"location":"board-miniboard/#is-overlapping-to-main-board","text":"Return true if any chess is overlapping to main-board. miniBoard . isOverlapping ( mainBoard ); or miniBoard . isOverlapping ( mainBoard , tileZ );","title":"Is overlapping to main-board"},{"location":"board-miniboard/#align-world-position-to-grid-of-main-board","text":"miniBoard . alignToMainBoard ( mainBoard , tileX , tileY ); mainBoard : Board object tileX , tileY : Tile position on main-board or miniBoard . alignToMainBoard ( mainBoard ); to align this mini-board to nearest grid of main-board.","title":"Align world position to grid of main-board"},{"location":"board-miniboard/#get-current-main-board","text":"var board = miniBoard . mainBoard ; board : Board object Return null if this mini-board is not at any main-board.","title":"Get current main-board"},{"location":"board-miniboard/#rotate","text":"","title":"Rotate"},{"location":"board-miniboard/#can-rotate","text":"miniBoard . canRotate ( n ); n : Rotate to direction current direction + n or miniBoard . canRotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Always return true if this mini-board is not on a main-board.","title":"Can rotate"},{"location":"board-miniboard/#rotate_1","text":"miniBoard . rotate ( n ); n : Rotate direction to current direction + n or miniBoard . rotateTo ( direction ); direction : Rotate to direction 0 ~ 3 : Quad grid . 0 ~ 5 : Hexagon grid . Return true if this rotating request is accepted. var isSuccess = miniBoard . lastTransferResult ;","title":"Rotate"},{"location":"board-miniboard/#mirror","text":"","title":"Mirror"},{"location":"board-miniboard/#can-mirror","text":"miniBoard . canMirror ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Always return true if this mini-board is not on a main-board.","title":"Can mirror"},{"location":"board-miniboard/#mirror_1","text":"miniBoard . rotate ( mode ); mode : 0 , or 'x' : Set tileX to -tileX 1 , or 'y' : Set tileY to -tileY 3 , or 'x&y' : Set tileX to -tileX , and tileY to -tileY Return true if this mirroring request is accepted. var isSuccess = miniBoard . lastTransferResult ;","title":"Mirror"},{"location":"board-miniboard/#touch-events","text":"","title":"Touch events"},{"location":"board-miniboard/#set-interactive","text":"Enable miniBoard . setInteractive (); Disable miniBoard . setInteractive ( false );","title":"Set interactive"},{"location":"board-miniboard/#set-drag-able","text":"Enable miniBoard . setDragEnable (); Disable miniBoard . setDragEnable ( false );","title":"Set drag-able"},{"location":"board-miniboard/#drag-events","text":"Drag-start miniBoard . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* miniBoard.pullOutFromMainBoard(); */ }, scope ); Pull out from main-board for dragging. Dragging miniBoard . on ( 'drag' , function ( pointer , dragX , dragY ){ /* miniBoard.setPosition(dragX, dragY); if (miniBoard.isOverlapping(mainBoard)) { miniBoard.alignToMainBoard(mainBoard); } */ }, scope ); Set world position of mini-board via ( dragX , dragY ), align to nearest grid of main-board if overlapping with that main-board. Drag-end miniBoard . on ( 'dragend' , function ( pointer , dragX , dragY ){ /* miniBoard.putOnMainBoard(mainBoard); if (miniBoard.mainBoard) { } */ }, scope ); Put chess on main-board at nearest grid.","title":"Drag events"},{"location":"board-miniboard/#touch-event","text":"Pointer down at a chess miniBoard . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up at a chess miniBoard . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move to another chess miniBoard . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'miniboard.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Touch event"},{"location":"board-monopoly/","text":"Introduction \u00b6 Move through path tiles, used in monopoly-like application, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var monopoly = scene . rexBoard . add . monopoly ( chess , { face : 0 , // ** cost ** // pathTileZ: 0, // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined }) face : Moving direction. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Cost function pathTileZ : TileZ of path tiles. cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , monopoly ) { return cost ; } Board : monopoly.board Chess game object : monopoly.gameObject Cost of stop : monopoly.STOP Cost of blocker : monopoly.BLOCKER Cost function \u00b6 var callback = function ( curTileXY , preTileXY , monopoly ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . monopoly : Path finder object. monopoly.board : Board object monopoly.gameObject : Chess game object. monopoly.STOP : Cost of stop. Return this value means chess will stop at curTileXY . monopoly.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY . Set cost function \u00b6 Constant cost for each non-blocked tile monopoly . setCostFunction ( cost ); Get cost via callback monopoly . setCostFunction ( callback , scope ); Set face direction \u00b6 monopoly . setFace ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Moving direction Get path toward this face direction. Get path \u00b6 var tileXYArray = monopoly . getPath ( movingPoints ); // var out = monopoly.getPath(movingPoints, out); tileXYArray : Moving path in an array of tile positions {x,y} Uses moveTo behavior to move chess along path.","title":"Monopoly"},{"location":"board-monopoly/#introduction","text":"Move through path tiles, used in monopoly-like application, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-monopoly/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-monopoly/#usage","text":"Sample code","title":"Usage"},{"location":"board-monopoly/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-monopoly/#create-instance","text":"var monopoly = scene . rexBoard . add . monopoly ( chess , { face : 0 , // ** cost ** // pathTileZ: 0, // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined }) face : Moving direction. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Cost function pathTileZ : TileZ of path tiles. cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , monopoly ) { return cost ; } Board : monopoly.board Chess game object : monopoly.gameObject Cost of stop : monopoly.STOP Cost of blocker : monopoly.BLOCKER","title":"Create instance"},{"location":"board-monopoly/#cost-function","text":"var callback = function ( curTileXY , preTileXY , monopoly ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . monopoly : Path finder object. monopoly.board : Board object monopoly.gameObject : Chess game object. monopoly.STOP : Cost of stop. Return this value means chess will stop at curTileXY . monopoly.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY .","title":"Cost function"},{"location":"board-monopoly/#set-cost-function","text":"Constant cost for each non-blocked tile monopoly . setCostFunction ( cost ); Get cost via callback monopoly . setCostFunction ( callback , scope );","title":"Set cost function"},{"location":"board-monopoly/#set-face-direction","text":"monopoly . setFace ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Moving direction Get path toward this face direction.","title":"Set face direction"},{"location":"board-monopoly/#get-path","text":"var tileXYArray = monopoly . getPath ( movingPoints ); // var out = monopoly.getPath(movingPoints, out); tileXYArray : Moving path in an array of tile positions {x,y} Uses moveTo behavior to move chess along path.","title":"Get path"},{"location":"board-moveto/","text":"Introduction \u00b6 Move chess towards target position with a steady speed, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var moveTo = scene . rexBoard . add . moveTo ( chess , { // speed: 400, // rotateToTarget: false, // occupiedTest: false, // blockerTest: false, // sneak: false, }) speed : moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. occupiedTest : Set true to test if target tile position is occupied or not, in moveable testing. blockerTest : Set true to test blocker property in moveable testing. sneak : Set true to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied. occupiedTest will be ignored when sneak is true . Move to destination tile \u00b6 moveTo . moveTo ( tileX , tileY ); // moveTo.moveTo(tileXY); tileXY : Tile position {x,y} Move to neighbor tile \u00b6 moveTo . moveToward ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . Move to random neighbor tile \u00b6 moveTo . moveToRandomNeighbor (); Move away or move closer \u00b6 Move away from a tile position moveTo . moveAway ( tileX , tileY ); or moveTo . moveAway ( tileXY ); tileXY : Tile position {x,y} Move closer to a tile position moveTo . moveCloser ( tileX , tileY ); or moveTo . moveCloser ( tileXY ); tileXY : Tile position {x,y} Can move to tile \u00b6 var canMoveTo = moveTo . canMoveTo ( tileX , tileY ); Return true if chess can move to (tileX, tileY) Last move result \u00b6 var lastMoveResult = moveTo . lastMoveResult ; Return true if chess is moved by moveTo.moveTo() , moveTo.moveToward() , or moveTo.moveToRandomNeighbor() Destination \u00b6 var destinationTileX = moveTo . destinationTileX ; var destinationTileY = moveTo . destinationTileY ; var destinationDirection = moveTo . destinationDirection ; Pause, Resume, stop moving \u00b6 moveTo . pause (); moveTo . resume (); moveTo . stop (); Enable \u00b6 Enable/resume (default) moveTo . setEnable (); or moveTo . enable = true ; Disable/pause moveTo . setEnable ( false ); or moveTo . enable = false ; Set speed \u00b6 moveTo . setSpeed ( speed ); // moveTo.speed = speed; Set rotate-to-target \u00b6 moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target Events \u00b6 Try to move on an occupied tile position moveTo . on ( 'occupy' , function ( occupiedChess , gameObject , moveTo ){ // Move away occupiedChess }); On reached target moveTo . on ( 'complete' , function ( moveTo , gameObject ){}); // moveTo.once('complete', function(moveTo, gameObject){}); Status \u00b6 Is moving var isRunning = moveTo . isRunning ;","title":"Move to"},{"location":"board-moveto/#introduction","text":"Move chess towards target position with a steady speed, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-moveto/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-moveto/#usage","text":"Sample code","title":"Usage"},{"location":"board-moveto/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-moveto/#create-instance","text":"var moveTo = scene . rexBoard . add . moveTo ( chess , { // speed: 400, // rotateToTarget: false, // occupiedTest: false, // blockerTest: false, // sneak: false, }) speed : moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. occupiedTest : Set true to test if target tile position is occupied or not, in moveable testing. blockerTest : Set true to test blocker property in moveable testing. sneak : Set true to allow changing tileZ when target tile position is occupied. Changing back when target tile position is not occupied. occupiedTest will be ignored when sneak is true .","title":"Create instance"},{"location":"board-moveto/#move-to-destination-tile","text":"moveTo . moveTo ( tileX , tileY ); // moveTo.moveTo(tileXY); tileXY : Tile position {x,y}","title":"Move to destination tile"},{"location":"board-moveto/#move-to-neighbor-tile","text":"moveTo . moveToward ( direction ); direction : 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid .","title":"Move to neighbor tile"},{"location":"board-moveto/#move-to-random-neighbor-tile","text":"moveTo . moveToRandomNeighbor ();","title":"Move to random neighbor tile"},{"location":"board-moveto/#move-away-or-move-closer","text":"Move away from a tile position moveTo . moveAway ( tileX , tileY ); or moveTo . moveAway ( tileXY ); tileXY : Tile position {x,y} Move closer to a tile position moveTo . moveCloser ( tileX , tileY ); or moveTo . moveCloser ( tileXY ); tileXY : Tile position {x,y}","title":"Move away or move closer"},{"location":"board-moveto/#can-move-to-tile","text":"var canMoveTo = moveTo . canMoveTo ( tileX , tileY ); Return true if chess can move to (tileX, tileY)","title":"Can move to tile"},{"location":"board-moveto/#last-move-result","text":"var lastMoveResult = moveTo . lastMoveResult ; Return true if chess is moved by moveTo.moveTo() , moveTo.moveToward() , or moveTo.moveToRandomNeighbor()","title":"Last move result"},{"location":"board-moveto/#destination","text":"var destinationTileX = moveTo . destinationTileX ; var destinationTileY = moveTo . destinationTileY ; var destinationDirection = moveTo . destinationDirection ;","title":"Destination"},{"location":"board-moveto/#pause-resume-stop-moving","text":"moveTo . pause (); moveTo . resume (); moveTo . stop ();","title":"Pause, Resume, stop moving"},{"location":"board-moveto/#enable","text":"Enable/resume (default) moveTo . setEnable (); or moveTo . enable = true ; Disable/pause moveTo . setEnable ( false ); or moveTo . enable = false ;","title":"Enable"},{"location":"board-moveto/#set-speed","text":"moveTo . setSpeed ( speed ); // moveTo.speed = speed;","title":"Set speed"},{"location":"board-moveto/#set-rotate-to-target","text":"moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target","title":"Set rotate-to-target"},{"location":"board-moveto/#events","text":"Try to move on an occupied tile position moveTo . on ( 'occupy' , function ( occupiedChess , gameObject , moveTo ){ // Move away occupiedChess }); On reached target moveTo . on ( 'complete' , function ( moveTo , gameObject ){}); // moveTo.once('complete', function(moveTo, gameObject){});","title":"Events"},{"location":"board-moveto/#status","text":"Is moving var isRunning = moveTo . isRunning ;","title":"Status"},{"location":"board-overview/","text":"List of board plugins \u00b6 Board \u00b6 Board Grids Quad grid Hexagon grid Chess Shapes \u00b6 Shape Behaviors \u00b6 Move to Applications \u00b6 Path finder Monopoly Field of view Match Hexagon map Mini-board \u00b6 Mini-board Templates \u00b6 Bejeweled","title":"Overview"},{"location":"board-overview/#list-of-board-plugins","text":"","title":"List of board plugins"},{"location":"board-overview/#board","text":"Board Grids Quad grid Hexagon grid Chess","title":"Board"},{"location":"board-overview/#shapes","text":"Shape","title":"Shapes"},{"location":"board-overview/#behaviors","text":"Move to","title":"Behaviors"},{"location":"board-overview/#applications","text":"Path finder Monopoly Field of view Match Hexagon map","title":"Applications"},{"location":"board-overview/#mini-board","text":"Mini-board","title":"Mini-board"},{"location":"board-overview/#templates","text":"Bejeweled","title":"Templates"},{"location":"board-pathfinder/","text":"Introduction \u00b6 Find moveable area or moving path, chess behavior of Board system. Author: Rex Behavior of chess Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var pathFinder = scene . rexBoard . add . pathFinder ( chess , { // occupiedTest: false, // blockerTest: false, // ** cost ** // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined, // cacheCost: true, // pathMode: 10, // A* // weight: 10, // weight for A* searching mode // shuffleNeighbors: false, }) occupiedTest : Set true to test if target tile position is occupied or not, in cost function. blockerTest : Set true to test blocker property in cost function. Cost function cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , preTile , pathFinder ) { return cost ; } Board : pathFinder.board Chess game object : pathFinder.gameObject Cost of blocker : pathFinder.BLOCKER pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 weight : Weight parameter for A* searching mode. cacheCost : Set false to get cost every time. It is useful when cost is a function of (current tile, previous tile). shuffleNeighbors : Shuffle neighbors. Cost function \u00b6 var callback = function ( curTileXY , preTileXY , pathFinder ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . preTileXY.pathCost : Path cost of preTilexY . preTileXY.preNodes : Previous tiles of preTileXY . pathFinder : Path finder object. pathFinder.board : Board object pathFinder.gameObject : Chess game object. pathFinder.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY . Set cost function \u00b6 Constant cost for each non-blocked tile pathFinder . setCostFunction ( cost ); Get cost via callback pathFinder . setCostFunction ( callback , scope ); Set path mode \u00b6 pathFinder . setPathMode ( pathMode ) pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 Find moveable area \u00b6 var tileXYArray = pathFinder . findArea ( movingPoints ); // var out = pathFinder.findArea(movingPoints, out); movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. tileXYArray : An array of moveable tile positions {x,y,pathCost} Get shortest path to a moveable tile \u00b6 var tileXYArray = pathFinder . getPath ( endTileXY ); endTileXY : Tile position of moveable area in last result of pathFinder.findArea() tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. Path mode Path info of each tile is calculated during pathFinder.findArea() Find moving path \u00b6 var tileXYArray = pathFinder . findPath ( endTileXY ); // var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out); endTileXY : Tile position tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. isClosest : Set true to get closest path. Path mode Set pathMode to A* ( 'A*' , 'A*-random' , or 'A*-line' ) to speed up calculating. Cost of tile \u00b6 During or after finding moveable area... Get cost of path from chess to tile var pathCost = pathFinder . tileXYToCost ( tileX , tileY , true ); Get cost of tile var tileCost = pathFinder . tileXYToCost ( tileX , tileY , false );","title":"Path finder"},{"location":"board-pathfinder/#introduction","text":"Find moveable area or moving path, chess behavior of Board system. Author: Rex Behavior of chess","title":"Introduction"},{"location":"board-pathfinder/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-pathfinder/#usage","text":"Sample code","title":"Usage"},{"location":"board-pathfinder/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-pathfinder/#create-instance","text":"var pathFinder = scene . rexBoard . add . pathFinder ( chess , { // occupiedTest: false, // blockerTest: false, // ** cost ** // cost: 1, // constant cost // costCallback: undefined, // costCallbackScope: undefined, // cacheCost: true, // pathMode: 10, // A* // weight: 10, // weight for A* searching mode // shuffleNeighbors: false, }) occupiedTest : Set true to test if target tile position is occupied or not, in cost function. blockerTest : Set true to test blocker property in cost function. Cost function cost : A constant cost for each non-blocked tile costCallback , costCallbackScope : Get cost via callback function ( curTile , preTile , pathFinder ) { return cost ; } Board : pathFinder.board Chess game object : pathFinder.gameObject Cost of blocker : pathFinder.BLOCKER pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12 weight : Weight parameter for A* searching mode. cacheCost : Set false to get cost every time. It is useful when cost is a function of (current tile, previous tile). shuffleNeighbors : Shuffle neighbors.","title":"Create instance"},{"location":"board-pathfinder/#cost-function","text":"var callback = function ( curTileXY , preTileXY , pathFinder ) { return cost ; } cost : Number cost. curTileXY , preTileXY : TileXY position {x, y} . Cost of moving from preTileXY to curTileXY . preTileXY.pathCost : Path cost of preTilexY . preTileXY.preNodes : Previous tiles of preTileXY . pathFinder : Path finder object. pathFinder.board : Board object pathFinder.gameObject : Chess game object. pathFinder.BLOCKER : Cost of blocker. Return this value means that chess can not move to curTileXY .","title":"Cost function"},{"location":"board-pathfinder/#set-cost-function","text":"Constant cost for each non-blocked tile pathFinder . setCostFunction ( cost ); Get cost via callback pathFinder . setCostFunction ( callback , scope );","title":"Set cost function"},{"location":"board-pathfinder/#set-path-mode","text":"pathFinder . setPathMode ( pathMode ) pathMode Shortest path 'random' , or 0 'diagonal' , or 1 'straight' , or 2 'line' , or 3 A* path 'A*' , or 10 'A*-random' , or 11 'A*-line' , or 12","title":"Set path mode"},{"location":"board-pathfinder/#find-moveable-area","text":"var tileXYArray = pathFinder . findArea ( movingPoints ); // var out = pathFinder.findArea(movingPoints, out); movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. tileXYArray : An array of moveable tile positions {x,y,pathCost}","title":"Find moveable area"},{"location":"board-pathfinder/#get-shortest-path-to-a-moveable-tile","text":"var tileXYArray = pathFinder . getPath ( endTileXY ); endTileXY : Tile position of moveable area in last result of pathFinder.findArea() tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. Path mode Path info of each tile is calculated during pathFinder.findArea()","title":"Get shortest path to a moveable tile"},{"location":"board-pathfinder/#find-moving-path","text":"var tileXYArray = pathFinder . findPath ( endTileXY ); // var tileXYArray = pathFinder.findPath(endTileXY, movingPoints, isClosest, out); endTileXY : Tile position tileXYArray : Moving path in an array of tile positions {x,y,pathCost} Uses moveTo behavior to move chess along path. movingPoints pathFinder.INFINITY ( undefined ) : Infinity moving points. Default value. isClosest : Set true to get closest path. Path mode Set pathMode to A* ( 'A*' , 'A*-random' , or 'A*-line' ) to speed up calculating.","title":"Find moving path"},{"location":"board-pathfinder/#cost-of-tile","text":"During or after finding moveable area... Get cost of path from chess to tile var pathCost = pathFinder . tileXYToCost ( tileX , tileY , true ); Get cost of tile var tileCost = pathFinder . tileXYToCost ( tileX , tileY , false );","title":"Cost of tile"},{"location":"board-quadgrid/","text":"Introduction \u00b6 Quad grid object of Board system. Author: Rex Grid object of board Source code \u00b6 Included in board plugin . Usage \u00b6 See board examples . Install scene plugin \u00b6 Included in board plugin. Create instance \u00b6 var grid = scene . rexBoard . add . quadGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 0 , // dir: 4 }); x , y : World position of tile (0, 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric dir : 4 or '4dir' : Left/Down/Right/Up 8 or '8dir' : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left Set world position of tile (0, 0) \u00b6 grid . setOriginPosition ( worldX , worldY ); Set cell size \u00b6 grid . setCellSize ( cellWidth , cellHeight ); Set grid type \u00b6 grid . setType ( type ); type 0 , or orthogonal 1 , or isometric Get world position \u00b6 var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Get tile position \u00b6 var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out); Directions \u00b6 0 : Left 1 : Down 2 : Right 3 : Up 4 : Left-down 5 : Down-right 6 : Right-up 7 : Up-left","title":"Quad"},{"location":"board-quadgrid/#introduction","text":"Quad grid object of Board system. Author: Rex Grid object of board","title":"Introduction"},{"location":"board-quadgrid/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-quadgrid/#usage","text":"See board examples .","title":"Usage"},{"location":"board-quadgrid/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-quadgrid/#create-instance","text":"var grid = scene . rexBoard . add . quadGrid ({ x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 0 , // dir: 4 }); x , y : World position of tile (0, 0) cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric dir : 4 or '4dir' : Left/Down/Right/Up 8 or '8dir' : Left/Down/Right/Up/Left-down/Down-right/Right-up/Up-left","title":"Create instance"},{"location":"board-quadgrid/#set-world-position-of-tile-0-0","text":"grid . setOriginPosition ( worldX , worldY );","title":"Set world position of tile (0, 0)"},{"location":"board-quadgrid/#set-cell-size","text":"grid . setCellSize ( cellWidth , cellHeight );","title":"Set cell size"},{"location":"board-quadgrid/#set-grid-type","text":"grid . setType ( type ); type 0 , or orthogonal 1 , or isometric","title":"Set grid type"},{"location":"board-quadgrid/#get-world-position","text":"var worldXY = grid . getWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get world position"},{"location":"board-quadgrid/#get-tile-position","text":"var tileXY = grid . getWorldXY ( tileX , tileY ); // tileXY: {x, y} // var out = grid.getWorldXY(tileX, tileY, out);","title":"Get tile position"},{"location":"board-quadgrid/#directions","text":"0 : Left 1 : Down 2 : Right 3 : Up 4 : Left-down 5 : Down-right 6 : Right-up 7 : Up-left","title":"Directions"},{"location":"board-shape/","text":"Introduction \u00b6 Grid (polygon) shape object. Author: Rex Polygon Shape Game object of Board system Source code \u00b6 Included in board plugin . Usage \u00b6 Sample code Install scene plugin \u00b6 Included in board plugin. Add shape object \u00b6 Create shape object and add to board var shape = scene . rexBoard . add . shape ( board , tileX , tileY , tileZ , fillColor ); // var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha); board : Board object tileX , tileY , tileZ : Tile position fillColor , fillAlpha : Color of this shape object Create shape object but not add to board var shape = scene . rexBoard . add . shape ( board , x , y , undefined , fillColor , fillAlpha , false ); board : Board object x , y : World position fillColor , fillAlpha : Color of this shape object Set color \u00b6 Fill color polygon . setFillStyle ( color , alpha ) Stroke color polygon . setStrokeStyle ( lineWidth , color , alpha ) No tint methods Uses shape.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Shape"},{"location":"board-shape/#introduction","text":"Grid (polygon) shape object. Author: Rex Polygon Shape Game object of Board system","title":"Introduction"},{"location":"board-shape/#source-code","text":"Included in board plugin .","title":"Source code"},{"location":"board-shape/#usage","text":"Sample code","title":"Usage"},{"location":"board-shape/#install-scene-plugin","text":"Included in board plugin.","title":"Install scene plugin"},{"location":"board-shape/#add-shape-object","text":"Create shape object and add to board var shape = scene . rexBoard . add . shape ( board , tileX , tileY , tileZ , fillColor ); // var shape = scene.rexBoard.add.shape(board, tileX, tileY, tileZ, fillColor, fillAlpha); board : Board object tileX , tileY , tileZ : Tile position fillColor , fillAlpha : Color of this shape object Create shape object but not add to board var shape = scene . rexBoard . add . shape ( board , x , y , undefined , fillColor , fillAlpha , false ); board : Board object x , y : World position fillColor , fillAlpha : Color of this shape object","title":"Add shape object"},{"location":"board-shape/#set-color","text":"Fill color polygon . setFillStyle ( color , alpha ) Stroke color polygon . setStrokeStyle ( lineWidth , color , alpha ) No tint methods Uses shape.setFillStyle(color, alpha) to change color.","title":"Set color"},{"location":"board-shape/#other-properties","text":"See game object","title":"Other properties"},{"location":"board/","text":"Introduction \u00b6 Core object of Board system. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Install scene plugin \u00b6 Install plugin in configuration of game import BoardPlugin from './plugins/board-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexBoard' , plugin : BoardPlugin , mapping : 'rexBoard' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add board object \u00b6 Quad board var board = scene . rexBoard . add . board ({ grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); Hexagon board var board = scene . rexBoard . add . board ({ grid : { gridType : 'hexagonGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , staggeraxis : 'x' , // 'x'|'y' staggerindex : 'odd' // 'odd'|'even' }, width : 0 , height : 0 }); Configuration grid : gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid width : Board width in tiles height : Board height in tiles Custom class \u00b6 Define class class MyBoard extends RexPlugins . Board . Board { constructor ( scene ) { super ( scene , { grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); // ... } // ... } Create instance var board = new MyBoard ( scene ); Board size \u00b6 Width : Board width in tiles Get var width = board . width ; Set board . setBoardWidth ( width ); Height : Board height in tiles Get var height = board . height ; Set board . setBoardHeight ( height ); Add chess \u00b6 board . addChess ( chess , tileX , tileY , tileZ , align ); chess : A game object. tileX , tileY , tileZ : Tile position. align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Default is true . Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth . Kick-out event \u00b6 Board will fire kickout event when adding chess to an occupied grid. board . on ( 'kickout' , function ( chessToAdd , occupiedChess , tileXYZ ){ }) chessToAdd kicks out occupiedChess at tile position tileXYZ ( {x,y,z} ). Remove chess \u00b6 Remove chess object from board board . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board board . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess board . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object. Move chess \u00b6 board . moveChess ( chess , toTileX , toTileY , toTileZ , align ); chess : A game object toTileX , toTileY , toTileZ : Target tile position align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Swap chess \u00b6 board . swapChess ( chessA , chessB , align ); chessA , chessB : Game objects align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Chess -> tile position \u00b6 var tileXYZ = board . chessToTileXYZ ( chess ); chess : A game object tileXYZ : {x,y,z} or null if chess is not added to board. Tile position -> chess \u00b6 Get chess at (tileX, tileY, tileZ) var chess = board . tileXYZToChess ( tileX , tileY , tileZ ); chess : A game object Get chess at (tileX, tileY) var out = board . tileXYToChessArray ( tileX , tileY ); // var out = board.tileXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at tileZ var out = board . tileZToChessArray ( tileZ ); // var out = board.tileZToChessArray(tileZ, out); out : An array of chess Get chess from array of (tileX, tileY) var out = board . tileXYArrayToChessArray ( tileXYArray ); // var out = board.tileXYArrayToChessArray(tileXYArray, out); or var out = board . tileXYArrayToChessArray ( tileXYArray , tileZ ); // var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out); tileXYArray : An array of tileXY {x, y} out : An array of chess World position -> chess \u00b6 Get chess at (worldX, worldY) var out = board . worldXYToChessArray ( worldX , worldY ); // var out = board.worldXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at (worldX, worldY), tileZ var chess = board . worldXYToChess ( worldX , worldY , tileZ ); chess : A game object Get chess at (worldX, worldY) var chess = board . worldXYToChess ( worldX , worldY ); chess : A game object at a tileZ. Contains \u00b6 Is (tileX, tileY) inside board? var isTileInBoard = board . contains ( tileX , tileY ); Does (tileX, tileY, tileZ) have chess? var isTileInBoard = board . contains ( tileX , tileY , tileZ ); Is chess inside board? var isChessInBoard = board . exists ( chess ); chess : A game object For each tile \u00b6 board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); Iteration order : board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); order : 0 , or x+ : Increasing x, increasing y. 1 , or x- : Decreasing x, increasing y. 2 , or y+ : Increasing y, increasing x. 3 , or y- : Decreasing y, increasing x. Or using for-loop for ( var tileY = 0 ; tileY < board . height ; tileY ++ ) { for ( var tileX = 0 ; tileX < board . width ; tileX ++ ) { // ... } } board.width , board.height : Board width/height in tiles. Tile position -> world position \u00b6 var worldXY = board . tileXYToWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = board.tileXYToWorldXY(tileX, tileY, out); World position -> tile position \u00b6 var tileXY = board . worldXYToTileXY ( worldX , worldY ); // tileXY: {x, y} // var out = board.worldXYToTileXY(worldX, worldY, out); World position -> Grid world position \u00b6 var gridWorldXY = board . worldXYSnapToGrid ( worldX , worldY ); // var out = board.worldXYSnapToGrid(worldX, worldY, out); Ring -> tile position \u00b6 Get array of tile position around a ring. var out = board . ringToTileXYArray ( centerTileXY , radius ); // var out = board.ringToTileXYArray(centerTileXY, radius, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. Get array of tile position within a filled ring. var out = board . filledRingToTileXYArray ( centerTileXY , radius ); var out = board . filledRingToTileXYArray ( centerTileXY , radius , nearToFar ); // var out = board.filledRingToTileXYArray(centerTileXY, radius, out); // var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. nearToFar : From near ring to far ring. Default value is true . Shape -> tile position \u00b6 Line -> tile position \u00b6 Get array of tile position along a line defined via ( startWorldX , startWorldY ) to ( endWorldX , endWorldY ) var out = board . lineToTileXYArray ( startWorldX , startWorldY , endWorldX , endWorldY ); // var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out); startWorldX , startWorldY , endWorldX , endWorldY : Start and end pointer of a line out : An array of tile position or var out = board . lineToTileXYArray ( line ); // var out = board.lineToTileXYArray(line, out); line : Line object Circle -> tile position \u00b6 Get array of tile position inside a circle shape var out = board . circleToTileXYArray ( circle ); // var out = board.circleToTileXYArray(circle, out); circle : Circle shape out : An array of tile position Rectangle -> tile position \u00b6 Get array of tile position inside a rectangle shape var out = board . rectangleToTileXYArray ( rectangle ); // var out = board.rectangleToTileXYArray(rectangle, out); rectangle : Rectangle shape out : An array of tile position Ellipse -> tile position \u00b6 Get array of tile position inside a ellipse shape var out = board . ellipseToTileXYArray ( ellipse ); // var out = board.ellipseToTileXYArray(ellipse, out); ellipse : Ellipse shape out : An array of tile position Triangle -> tile position \u00b6 Get array of tile position inside a triangle shape var out = board . triangleToTileXYArray ( triangle ); // var out = board.triangleToTileXYArray(triangle, out); triangle : Triangle shape out : An array of tile position Polygon -> tile position \u00b6 Get array of tile position inside a polygon shape var out = board . polygonToTileXYArray ( polygon ); // var out = board.polygonToTileXYArray(polygon, out); polygon : Polygon shape out : An array of tile position Angle between world position of 2 tiles \u00b6 var radian = board . angleBetween ( tileXY0 , tileXY1 ); radian : Angle between world position of 2 tiles, in radian. tileXY0 , tileXY1 : tile position {x, y} Is angle in cone \u00b6 var isInCone = board . isAngleInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared angle is between face - (cone/2) to face + (cone/2) . Angle in radian. Direction between 2 tiles \u00b6 var direction = board . directionBetween ( chessA , chessB ); chessA , chessB : A chess object, or tile position {x,y} . direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . var direction = board . directionBetween ( chessA , chessB , false ); direction : Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6. Is direction in cone \u00b6 var isInCone = board . isDirectionInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared direction is between face - (cone/2) to face + (cone/2) . Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , or float number between 0~1, 1~2, 2~3, 3~4. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6. Opposite direction \u00b6 var direction = board . getOppositeDirection ( tileX , tileY , direction ); Angle snap to direction \u00b6 var direction = board . angleSnapToDirection ( chess , angle ); chess : Chess object, or tileXY, or undefined . angle : Angle in radius. direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . Align world position to grid \u00b6 Align one chess object board . gridAlign ( chess ); Align all chess board . gridAlign (); Is overlapping with world position \u00b6 var isOverlapping = board . isOverlappingPoint ( worldX , worldY ); or var isOverlapping = board . isOverlappingPoint ( worldX , worldY , tileZ ); Neighbors \u00b6 Neighbor tile position \u00b6 Get neighbor tile position at 1 direction var neighborTileXY = board . getNeighborTileXY ( srcTileXY , direction ); // var out = board.getNeighborTileXY(srcTileXY, direction, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Get neighbor tile position at directions var neighborTileXY = board . getNeighborTileXY ( srcTileXY , directions ); // var out = board.getNeighborTileXY(srcTileXY, directions, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position array of all neighbors Get neighbor tile position at all directions var out = board . getNeighborTileXY ( srcTileXY , null ); // var out = board.getNeighborTileXY(srcTileXY, null, out); out : Tile position array of all neighbors Get direction between 2 tile positions var direction = board . getNeighborTileDirection ( srcTile , neighborTileXY ); direction : Return null if these 2 tile positions are not neighbors. Get neighbor tile position at angle var neighborTileXY = board . getNeighborTileXYAtAngle ( srcTileXY , angle ); // var out = board.getNeighborTileXY(srcTileXY, angle, out); srcTileXY : Tile position {x, y} of source. angle : Angle in radius. neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Neighbor chess \u00b6 Get neighbor chess at 1 direction var neighborChess = board . getNeighborChess ( chess , direction ); // neighborTileZ = tileZ of chess // var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ); chess : A chess object, or tile position {x,y,z} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborChess : A chess object. Get neighbor chess at directions var out = board . getNeighborChess ( chess , directions ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, directions, neighborTileZ); chess : A chess object, or tile position {x,y,z} . directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Chess array of neighbors. Get neighbor chess at all directions var out = board . getNeighborChess ( chess , null ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, null, neighborTileZ); chess : A chess object, or tile position {x,y,z} . out : Chess array of all neighbors. Get direction between 2 chess var direction = board . getNeighborChessDirection ( chess , neighborChess ); direction : Return null if these 2 chess are not neighbors. Are 2 chess neighbors? var areNeighbor = board . areNeighbors ( chessA , chessB ); areNeighbor : Return true if chessA and chessB are neighbors. Tile at direction \u00b6 Get tile position at 1 direction var out = board . getTileXYAtDirection ( srcTileXY , direction , distance ); // var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . distance : A JSON, number, or number array. JSON : Range of distances. {end: 3} is equal to [1,2,3] . { start : 1 , end : 1 , step : 1 } start : Start distance. Default value is 1 . end : End distance. Default value is 1 . step : Step. Default value is 1 . Number, 3 . Array of numbers, [2, 3, 5] : Array of distances. out : A single tile position, if distance is a number. Tile position {x, y} array, if distance is a JSON or an array. Get tile positions at directions var neighborTileXY = board . getTileXYAtDirection ( srcTileXY , directions , distance ); // var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position {x, y} array. Get tile positions at all directions var out = board . getTileXYAtDirection ( srcTileXY , null , distance ); // var out = board.getTileXYAtDirection(srcTileXY, null, distance, out); out : Tile position {x, y} array. Empty tile position \u00b6 Get a random tile position which does not have any chess var tileXY = board . getRandomEmptyTileXY ( tileZ ); // var out = board.getRandomEmptyTileXY(tileZ, out); tileXY : Tile position {x, y} , return null if all positions are occupied. Get an array of tile position which does not have any chess var tileXYArray = board . getEmptyTileXYArray ( tileZ ); // var out = board.getEmptyTileXYArray(tileZ, out); tileXYArray : An array of tile position Get all chess \u00b6 var chessArray = board . getAllChess (); Fit \u00b6 var out = board . fit ( tileXYArray ); tileXYArray : An array of tile position {x,y} . Offset all of tile positions to (0, 0) , and set board size to fit these tile positions. Blocker \u00b6 Set blocker property : See chess data Has blocker at tile position (tileX, tileY, tileZ) var hasBlocker = board . hasBlocker ( tileX , tileY , tileZ ); Any chess at (tileX, tileY) has blocker property var hasBlocker = board . hasBlocker ( tileX , tileY ); Touch events \u00b6 Set interactive \u00b6 Enable board . setInteractive (); Disable board . setInteractive ( false ); Pointer down \u00b6 Pointer down at any tile board . on ( 'tiledown' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); pointer : Touch pointer tileXY : {x, y} Pointer down at chess board . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer up \u00b6 Pointer up at any tile board . on ( 'tileup' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Pointer up at chess board . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Pointer move \u00b6 Pointer move to another tile board . on ( 'tilemove' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Only triggered when tileXY is changed. Pointer move to another chess board . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY) Tap \u00b6 Tap at any tile board . on ( 'tiletap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; // var tapsCount = tap.tapsCount; }); tap : Tap behavior . tap.tapsCount : Taps count. tileXY : {x, y} N-taps at any tile board . on ( 'tile' + tapsCount + 'tap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); 'tile' + tapsCount + 'tap' : 'tile1tap' , 'tile2tap' , 'tile3tap' , etc ... tap : Tap behavior . tileXY : {x, y} Tap at chess board . on ( 'gameobjecttap' , function ( tap , gameObject ) { // var tapsCount = tap.tapsCount; }) or gameObject . on ( 'board.tap' , function ( tap ) { // var tapsCount = tap.tapsCount; }) tap : Tap behavior . tap.tapsCount : Taps count. gameObject : Game object at touched (tileX, tileY) N-taps at chess board . on ( 'gameobject' + tapsCount + 'tap' , function ( tap , gameObject ) { }) or gameObject . on ( 'board.' + tapsCount + 'tap' , function ( tap ) { }) 'gameobject' + tapsCount + 'tap' : 'gameobject1tap' , 'gameobject2tap' , 'gameobject3tap' , etc ... 'board.' + tapsCount + 'tap' : 'board.1tap' , 'board.2tap' , 'board.3tap' , etc ... tap : Tap behavior . gameObject : Game object at touched (tileX, tileY) Press \u00b6 Press-start at any tile board . on ( 'tilepressstart' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-end at any tile board . on ( 'tilepressend' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-star at chess board . on ( 'gameobjectpressstart' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressstart' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Press-end at chess board . on ( 'gameobjectpressend' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressend' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Grid points \u00b6 Get an array of grid points at tile position (tileX, tileY). var points = board . getGridPoints ( tileX , tileY ); // var out = board.getGridPoints(tileX, tileY, out); Draw grid polygon on graphics object graphics . strokePoints ( points , true ); Other properties \u00b6 Scene var scene = board . scene ;","title":"Board"},{"location":"board/#introduction","text":"Core object of Board system. Author: Rex Member of scene","title":"Introduction"},{"location":"board/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"board/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"board/#install-scene-plugin","text":"Install plugin in configuration of game import BoardPlugin from './plugins/board-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexBoard' , plugin : BoardPlugin , mapping : 'rexBoard' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"board/#add-board-object","text":"Quad board var board = scene . rexBoard . add . board ({ grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); Hexagon board var board = scene . rexBoard . add . board ({ grid : { gridType : 'hexagonGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , staggeraxis : 'x' , // 'x'|'y' staggerindex : 'odd' // 'odd'|'even' }, width : 0 , height : 0 }); Configuration grid : gridType : 'quadGrid' : Quad grid 'hexagonGrid' : hexagon grid width : Board width in tiles height : Board height in tiles","title":"Add board object"},{"location":"board/#custom-class","text":"Define class class MyBoard extends RexPlugins . Board . Board { constructor ( scene ) { super ( scene , { grid : { gridType : 'quadGrid' , x : 0 , y : 0 , cellWidth : 0 , cellHeight : 0 , type : 'orthogonal' // 'orthogonal'|'isometric' }, width : 0 , height : 0 }); // ... } // ... } Create instance var board = new MyBoard ( scene );","title":"Custom class"},{"location":"board/#board-size","text":"Width : Board width in tiles Get var width = board . width ; Set board . setBoardWidth ( width ); Height : Board height in tiles Get var height = board . height ; Set board . setBoardHeight ( height );","title":"Board size"},{"location":"board/#add-chess","text":"board . addChess ( chess , tileX , tileY , tileZ , align ); chess : A game object. tileX , tileY , tileZ : Tile position. align : Set true to align (i.e. set position) chess to grid (tileX, tileY). Default is true . Chess and tile position Any chess has a (tileX, tileY, tileZ) index Any (tileX, tileY, tileZ) index contains only 1 chess. (tileX, tileY) could have more then 1 chess with different tileZ index. tileZ is not equal to depth .","title":"Add chess"},{"location":"board/#kick-out-event","text":"Board will fire kickout event when adding chess to an occupied grid. board . on ( 'kickout' , function ( chessToAdd , occupiedChess , tileXYZ ){ }) chessToAdd kicks out occupiedChess at tile position tileXYZ ( {x,y,z} ).","title":"Kick-out event"},{"location":"board/#remove-chess","text":"Remove chess object from board board . removeChess ( chess , null , null , null , destroy ); chess : A game object destroy : Set true to desrtoy chess object. Remove chess at (tileX, tileY, tileZ) from board board . removeChess ( null , tileX , tileY , tileZ , destroy ); tileX , tileY , tileZ : Tile position destroy : Set true to desrtoy chess object. Remove all chess board . removeAllChess ( destroy ); destroy : Set true to desrtoy chess object.","title":"Remove chess"},{"location":"board/#move-chess","text":"board . moveChess ( chess , toTileX , toTileY , toTileZ , align ); chess : A game object toTileX , toTileY , toTileZ : Target tile position align : Set true to align (i.e. set position) chess to grid (tileX, tileY).","title":"Move chess"},{"location":"board/#swap-chess","text":"board . swapChess ( chessA , chessB , align ); chessA , chessB : Game objects align : Set true to align (i.e. set position) chess to grid (tileX, tileY).","title":"Swap chess"},{"location":"board/#chess-tile-position","text":"var tileXYZ = board . chessToTileXYZ ( chess ); chess : A game object tileXYZ : {x,y,z} or null if chess is not added to board.","title":"Chess -&gt; tile position"},{"location":"board/#tile-position-chess","text":"Get chess at (tileX, tileY, tileZ) var chess = board . tileXYZToChess ( tileX , tileY , tileZ ); chess : A game object Get chess at (tileX, tileY) var out = board . tileXYToChessArray ( tileX , tileY ); // var out = board.tileXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at tileZ var out = board . tileZToChessArray ( tileZ ); // var out = board.tileZToChessArray(tileZ, out); out : An array of chess Get chess from array of (tileX, tileY) var out = board . tileXYArrayToChessArray ( tileXYArray ); // var out = board.tileXYArrayToChessArray(tileXYArray, out); or var out = board . tileXYArrayToChessArray ( tileXYArray , tileZ ); // var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out); tileXYArray : An array of tileXY {x, y} out : An array of chess","title":"Tile position -&gt; chess"},{"location":"board/#world-position-chess","text":"Get chess at (worldX, worldY) var out = board . worldXYToChessArray ( worldX , worldY ); // var out = board.worldXYToChessArray(tileX, tileY, out); out : An array of chess Get chess at (worldX, worldY), tileZ var chess = board . worldXYToChess ( worldX , worldY , tileZ ); chess : A game object Get chess at (worldX, worldY) var chess = board . worldXYToChess ( worldX , worldY ); chess : A game object at a tileZ.","title":"World position -&gt; chess"},{"location":"board/#contains","text":"Is (tileX, tileY) inside board? var isTileInBoard = board . contains ( tileX , tileY ); Does (tileX, tileY, tileZ) have chess? var isTileInBoard = board . contains ( tileX , tileY , tileZ ); Is chess inside board? var isChessInBoard = board . exists ( chess ); chess : A game object","title":"Contains"},{"location":"board/#for-each-tile","text":"board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); Iteration order : board . forEachTileXY ( function ( tileXY , board ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }, scope , order ); order : 0 , or x+ : Increasing x, increasing y. 1 , or x- : Decreasing x, increasing y. 2 , or y+ : Increasing y, increasing x. 3 , or y- : Decreasing y, increasing x. Or using for-loop for ( var tileY = 0 ; tileY < board . height ; tileY ++ ) { for ( var tileX = 0 ; tileX < board . width ; tileX ++ ) { // ... } } board.width , board.height : Board width/height in tiles.","title":"For each tile"},{"location":"board/#tile-position-world-position","text":"var worldXY = board . tileXYToWorldXY ( tileX , tileY ); // worldXY: {x, y} // var out = board.tileXYToWorldXY(tileX, tileY, out);","title":"Tile position -&gt; world position"},{"location":"board/#world-position-tile-position","text":"var tileXY = board . worldXYToTileXY ( worldX , worldY ); // tileXY: {x, y} // var out = board.worldXYToTileXY(worldX, worldY, out);","title":"World position -&gt; tile position"},{"location":"board/#world-position-grid-world-position","text":"var gridWorldXY = board . worldXYSnapToGrid ( worldX , worldY ); // var out = board.worldXYSnapToGrid(worldX, worldY, out);","title":"World position -&gt; Grid world position"},{"location":"board/#ring-tile-position","text":"Get array of tile position around a ring. var out = board . ringToTileXYArray ( centerTileXY , radius ); // var out = board.ringToTileXYArray(centerTileXY, radius, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. Get array of tile position within a filled ring. var out = board . filledRingToTileXYArray ( centerTileXY , radius ); var out = board . filledRingToTileXYArray ( centerTileXY , radius , nearToFar ); // var out = board.filledRingToTileXYArray(centerTileXY, radius, out); // var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out); centerTileXY : Tile position {x, y} of ring center. radius : Radius of the ring. nearToFar : From near ring to far ring. Default value is true .","title":"Ring -&gt; tile position"},{"location":"board/#shape-tile-position","text":"","title":"Shape -&gt; tile position"},{"location":"board/#line-tile-position","text":"Get array of tile position along a line defined via ( startWorldX , startWorldY ) to ( endWorldX , endWorldY ) var out = board . lineToTileXYArray ( startWorldX , startWorldY , endWorldX , endWorldY ); // var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out); startWorldX , startWorldY , endWorldX , endWorldY : Start and end pointer of a line out : An array of tile position or var out = board . lineToTileXYArray ( line ); // var out = board.lineToTileXYArray(line, out); line : Line object","title":"Line -&gt; tile position"},{"location":"board/#circle-tile-position","text":"Get array of tile position inside a circle shape var out = board . circleToTileXYArray ( circle ); // var out = board.circleToTileXYArray(circle, out); circle : Circle shape out : An array of tile position","title":"Circle -&gt; tile position"},{"location":"board/#rectangle-tile-position","text":"Get array of tile position inside a rectangle shape var out = board . rectangleToTileXYArray ( rectangle ); // var out = board.rectangleToTileXYArray(rectangle, out); rectangle : Rectangle shape out : An array of tile position","title":"Rectangle -&gt; tile position"},{"location":"board/#ellipse-tile-position","text":"Get array of tile position inside a ellipse shape var out = board . ellipseToTileXYArray ( ellipse ); // var out = board.ellipseToTileXYArray(ellipse, out); ellipse : Ellipse shape out : An array of tile position","title":"Ellipse -&gt; tile position"},{"location":"board/#triangle-tile-position","text":"Get array of tile position inside a triangle shape var out = board . triangleToTileXYArray ( triangle ); // var out = board.triangleToTileXYArray(triangle, out); triangle : Triangle shape out : An array of tile position","title":"Triangle -&gt; tile position"},{"location":"board/#polygon-tile-position","text":"Get array of tile position inside a polygon shape var out = board . polygonToTileXYArray ( polygon ); // var out = board.polygonToTileXYArray(polygon, out); polygon : Polygon shape out : An array of tile position","title":"Polygon -&gt; tile position"},{"location":"board/#angle-between-world-position-of-2-tiles","text":"var radian = board . angleBetween ( tileXY0 , tileXY1 ); radian : Angle between world position of 2 tiles, in radian. tileXY0 , tileXY1 : tile position {x, y}","title":"Angle between world position of 2 tiles"},{"location":"board/#is-angle-in-cone","text":"var isInCone = board . isAngleInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared angle is between face - (cone/2) to face + (cone/2) . Angle in radian.","title":"Is angle in cone"},{"location":"board/#direction-between-2-tiles","text":"var direction = board . directionBetween ( chessA , chessB ); chessA , chessB : A chess object, or tile position {x,y} . direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 . var direction = board . directionBetween ( chessA , chessB , false ); direction : Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.","title":"Direction between 2 tiles"},{"location":"board/#is-direction-in-cone","text":"var isInCone = board . isDirectionInCone ( chessA , chessB , face , cone ); chessA , chessB : Direction from chessA to chessB. Chess object, or tileXY. face , cone : Range of compared direction is between face - (cone/2) to face + (cone/2) . Integer number, or float number. Quad grid : 0 , 1 , 2 , 3 , or float number between 0~1, 1~2, 2~3, 3~4. Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 , or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.","title":"Is direction in cone"},{"location":"board/#opposite-direction","text":"var direction = board . getOppositeDirection ( tileX , tileY , direction );","title":"Opposite direction"},{"location":"board/#angle-snap-to-direction","text":"var direction = board . angleSnapToDirection ( chess , angle ); chess : Chess object, or tileXY, or undefined . angle : Angle in radius. direction : Integer number. Quad grid : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 . Hexagon grid : 0 , 1 , 2 , 3 , 4 , 5 .","title":"Angle snap to direction"},{"location":"board/#align-world-position-to-grid","text":"Align one chess object board . gridAlign ( chess ); Align all chess board . gridAlign ();","title":"Align world position to grid"},{"location":"board/#is-overlapping-with-world-position","text":"var isOverlapping = board . isOverlappingPoint ( worldX , worldY ); or var isOverlapping = board . isOverlappingPoint ( worldX , worldY , tileZ );","title":"Is overlapping with world position"},{"location":"board/#neighbors","text":"","title":"Neighbors"},{"location":"board/#neighbor-tile-position","text":"Get neighbor tile position at 1 direction var neighborTileXY = board . getNeighborTileXY ( srcTileXY , direction ); // var out = board.getNeighborTileXY(srcTileXY, direction, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.) Get neighbor tile position at directions var neighborTileXY = board . getNeighborTileXY ( srcTileXY , directions ); // var out = board.getNeighborTileXY(srcTileXY, directions, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position array of all neighbors Get neighbor tile position at all directions var out = board . getNeighborTileXY ( srcTileXY , null ); // var out = board.getNeighborTileXY(srcTileXY, null, out); out : Tile position array of all neighbors Get direction between 2 tile positions var direction = board . getNeighborTileDirection ( srcTile , neighborTileXY ); direction : Return null if these 2 tile positions are not neighbors. Get neighbor tile position at angle var neighborTileXY = board . getNeighborTileXYAtAngle ( srcTileXY , angle ); // var out = board.getNeighborTileXY(srcTileXY, angle, out); srcTileXY : Tile position {x, y} of source. angle : Angle in radius. neighborTileXY : Tile position {x, y} of neighbor. Retrun null if no neighbor there (i.e. source chess is at the edge of board.)","title":"Neighbor tile position"},{"location":"board/#neighbor-chess","text":"Get neighbor chess at 1 direction var neighborChess = board . getNeighborChess ( chess , direction ); // neighborTileZ = tileZ of chess // var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ); chess : A chess object, or tile position {x,y,z} . direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . neighborChess : A chess object. Get neighbor chess at directions var out = board . getNeighborChess ( chess , directions ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, directions, neighborTileZ); chess : A chess object, or tile position {x,y,z} . directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Chess array of neighbors. Get neighbor chess at all directions var out = board . getNeighborChess ( chess , null ); // neighborTileZ = tileZ of chess // var out = board.getNeighborChess(chess, null, neighborTileZ); chess : A chess object, or tile position {x,y,z} . out : Chess array of all neighbors. Get direction between 2 chess var direction = board . getNeighborChessDirection ( chess , neighborChess ); direction : Return null if these 2 chess are not neighbors. Are 2 chess neighbors? var areNeighbor = board . areNeighbors ( chessA , chessB ); areNeighbor : Return true if chessA and chessB are neighbors.","title":"Neighbor chess"},{"location":"board/#tile-at-direction","text":"Get tile position at 1 direction var out = board . getTileXYAtDirection ( srcTileXY , direction , distance ); // var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out); srcTileXY : Tile position {x, y} of source. direction : Number, or string number. 0 ~ 3 : Quad grid in 4 directions mode. 0 ~ 7 : Quad grid in 8 directions mode. 0 ~ 5 : Hexagon grid . distance : A JSON, number, or number array. JSON : Range of distances. {end: 3} is equal to [1,2,3] . { start : 1 , end : 1 , step : 1 } start : Start distance. Default value is 1 . end : End distance. Default value is 1 . step : Step. Default value is 1 . Number, 3 . Array of numbers, [2, 3, 5] : Array of distances. out : A single tile position, if distance is a number. Tile position {x, y} array, if distance is a JSON or an array. Get tile positions at directions var neighborTileXY = board . getTileXYAtDirection ( srcTileXY , directions , distance ); // var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out); directions Array of numbers, [0, 2, 4] . String number concatenated via , , '0,2,4' . out : Tile position {x, y} array. Get tile positions at all directions var out = board . getTileXYAtDirection ( srcTileXY , null , distance ); // var out = board.getTileXYAtDirection(srcTileXY, null, distance, out); out : Tile position {x, y} array.","title":"Tile at direction"},{"location":"board/#empty-tile-position","text":"Get a random tile position which does not have any chess var tileXY = board . getRandomEmptyTileXY ( tileZ ); // var out = board.getRandomEmptyTileXY(tileZ, out); tileXY : Tile position {x, y} , return null if all positions are occupied. Get an array of tile position which does not have any chess var tileXYArray = board . getEmptyTileXYArray ( tileZ ); // var out = board.getEmptyTileXYArray(tileZ, out); tileXYArray : An array of tile position","title":"Empty tile position"},{"location":"board/#get-all-chess","text":"var chessArray = board . getAllChess ();","title":"Get all chess"},{"location":"board/#fit","text":"var out = board . fit ( tileXYArray ); tileXYArray : An array of tile position {x,y} . Offset all of tile positions to (0, 0) , and set board size to fit these tile positions.","title":"Fit"},{"location":"board/#blocker","text":"Set blocker property : See chess data Has blocker at tile position (tileX, tileY, tileZ) var hasBlocker = board . hasBlocker ( tileX , tileY , tileZ ); Any chess at (tileX, tileY) has blocker property var hasBlocker = board . hasBlocker ( tileX , tileY );","title":"Blocker"},{"location":"board/#touch-events","text":"","title":"Touch events"},{"location":"board/#set-interactive","text":"Enable board . setInteractive (); Disable board . setInteractive ( false );","title":"Set interactive"},{"location":"board/#pointer-down","text":"Pointer down at any tile board . on ( 'tiledown' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); pointer : Touch pointer tileXY : {x, y} Pointer down at chess board . on ( 'gameobjectdown' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerdown' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer down"},{"location":"board/#pointer-up","text":"Pointer up at any tile board . on ( 'tileup' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Pointer up at chess board . on ( 'gameobjectup' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointerup' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer up"},{"location":"board/#pointer-move","text":"Pointer move to another tile board . on ( 'tilemove' , function ( pointer , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); tileXY : {x, y} Only triggered when tileXY is changed. Pointer move to another chess board . on ( 'gameobjectmove' , function ( pointer , gameObject ) { }) or gameObject . on ( 'board.pointermove' , function ( pointer ) { }) pointer : Touch pointer gameObject : Game object at touched (tileX, tileY)","title":"Pointer move"},{"location":"board/#tap","text":"Tap at any tile board . on ( 'tiletap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; // var tapsCount = tap.tapsCount; }); tap : Tap behavior . tap.tapsCount : Taps count. tileXY : {x, y} N-taps at any tile board . on ( 'tile' + tapsCount + 'tap' , function ( tap , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); 'tile' + tapsCount + 'tap' : 'tile1tap' , 'tile2tap' , 'tile3tap' , etc ... tap : Tap behavior . tileXY : {x, y} Tap at chess board . on ( 'gameobjecttap' , function ( tap , gameObject ) { // var tapsCount = tap.tapsCount; }) or gameObject . on ( 'board.tap' , function ( tap ) { // var tapsCount = tap.tapsCount; }) tap : Tap behavior . tap.tapsCount : Taps count. gameObject : Game object at touched (tileX, tileY) N-taps at chess board . on ( 'gameobject' + tapsCount + 'tap' , function ( tap , gameObject ) { }) or gameObject . on ( 'board.' + tapsCount + 'tap' , function ( tap ) { }) 'gameobject' + tapsCount + 'tap' : 'gameobject1tap' , 'gameobject2tap' , 'gameobject3tap' , etc ... 'board.' + tapsCount + 'tap' : 'board.1tap' , 'board.2tap' , 'board.3tap' , etc ... tap : Tap behavior . gameObject : Game object at touched (tileX, tileY)","title":"Tap"},{"location":"board/#press","text":"Press-start at any tile board . on ( 'tilepressstart' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-end at any tile board . on ( 'tilepressend' , function ( press , tileXY ) { // var tileX = tileXY.x; // var tileY = tileXY.y; }); press : Press behavior . tileXY : {x, y} Press-star at chess board . on ( 'gameobjectpressstart' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressstart' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY) Press-end at chess board . on ( 'gameobjectpressend' , function ( press , gameObject ) { }) or gameObject . on ( 'board.pressend' , function ( press ) { }) press : Press behavior . gameObject : Game object at touched (tileX, tileY)","title":"Press"},{"location":"board/#grid-points","text":"Get an array of grid points at tile position (tileX, tileY). var points = board . getGridPoints ( tileX , tileY ); // var out = board.getGridPoints(tileX, tileY, out); Draw grid polygon on graphics object graphics . strokePoints ( points , true );","title":"Grid points"},{"location":"board/#other-properties","text":"Scene var scene = board . scene ;","title":"Other properties"},{"location":"buffdata/","text":"Introduction \u00b6 Data manager with buffs, extends from built-in data manager . Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBuffData from './plugins/buffdata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import BuffDataPlugin from './plugins/buffdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexBuffData' , plugin : BuffDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var data = scene . plugins . get ( 'rexBuffData' ). add ( parent ); // var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter); data : Buff data manager parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter . Extend existing data manager \u00b6 var data = scene . plugins . get ( 'rexBuffData' ). extend ( data ); data : Existing data manager Buff \u00b6 A value is composed of baseValue , and some buffs , clamped by min , max values. Base value Set data . setBaseValue ( key , value ); Remove data . removeBaseValue ( key ); Get var baseValue = data . getBaseValue ( key ); Buffs, each value can have many buffs, or no buff. Add/set a buff data . setBuff ( key , buffKey , value ); value : A number A string for percentage like '10%' , which means that (baseValue * percentage) Remove a buff of a key data . removeBuff ( key , buffKey ); Remove all buffs of a key data . removeBuff ( key ); Get a buff value var buffValue = data . getBuffs ( key , buffKey ). value ; Min, max bounds, optional. Set data . setMin ( key , min ); data . setMax ( key , max ); data . setBounds ( key , min , max ); min , max : Clamp buffed result value between min and max value. Set undefined to ignore it. Get var min = data . getBounds ( key ). min ; var max = data . getBounds ( key ). max ; Buffed result Get var result = data . get ( key ); Events","title":"Buff data"},{"location":"buffdata/#introduction","text":"Data manager with buffs, extends from built-in data manager . Author: Rex Member of scene","title":"Introduction"},{"location":"buffdata/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"buffdata/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"buffdata/#import-class","text":"import rexBuffData from './plugins/buffdata.js' ;","title":"Import class"},{"location":"buffdata/#install-global-plugin","text":"Install plugin in configuration of game import BuffDataPlugin from './plugins/buffdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexBuffData' , plugin : BuffDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"buffdata/#create-instance","text":"var data = scene . plugins . get ( 'rexBuffData' ). add ( parent ); // var data = scene.plugins.get('rexBuffData').add(parent, eventEmitter); data : Buff data manager parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter .","title":"Create instance"},{"location":"buffdata/#extend-existing-data-manager","text":"var data = scene . plugins . get ( 'rexBuffData' ). extend ( data ); data : Existing data manager","title":"Extend existing data manager"},{"location":"buffdata/#buff","text":"A value is composed of baseValue , and some buffs , clamped by min , max values. Base value Set data . setBaseValue ( key , value ); Remove data . removeBaseValue ( key ); Get var baseValue = data . getBaseValue ( key ); Buffs, each value can have many buffs, or no buff. Add/set a buff data . setBuff ( key , buffKey , value ); value : A number A string for percentage like '10%' , which means that (baseValue * percentage) Remove a buff of a key data . removeBuff ( key , buffKey ); Remove all buffs of a key data . removeBuff ( key ); Get a buff value var buffValue = data . getBuffs ( key , buffKey ). value ; Min, max bounds, optional. Set data . setMin ( key , min ); data . setMax ( key , max ); data . setBounds ( key , min , max ); min , max : Clamp buffed result value between min and max value. Set undefined to ignore it. Get var min = data . getBounds ( key ). min ; var max = data . getBounds ( key ). max ; Buffed result Get var result = data . get ( key ); Events","title":"Buff"},{"location":"buildarcadeobject/","text":"Introduction \u00b6 Create arcade body, and inject arcade object methods. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBuildArcadeObject from './plugins/buildarcadeobject.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import BuildArcadeObjectPlugin from './plugins/buildarcadeobject-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBuildArcadeObject' , plugin : BuildArcadeObjectPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Inject arcade object methods \u00b6 Create dynamic arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects); Create static arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject , true ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);","title":"Build arcade object"},{"location":"buildarcadeobject/#introduction","text":"Create arcade body, and inject arcade object methods. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"buildarcadeobject/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"buildarcadeobject/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"buildarcadeobject/#import-class","text":"import rexBuildArcadeObject from './plugins/buildarcadeobject.js' ;","title":"Import class"},{"location":"buildarcadeobject/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import BuildArcadeObjectPlugin from './plugins/buildarcadeobject-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBuildArcadeObject' , plugin : BuildArcadeObjectPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"buildarcadeobject/#inject-arcade-object-methods","text":"Create dynamic arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects); Create static arcade body var gameObject = scene . plugins . get ( 'rexBuildArcadeObject' ). build ( gameObject , true ); // var gameObjects = scene.plugins.get('rexBuildArcadeObject').build(gameObjects, true);","title":"Inject arcade object methods"},{"location":"bullet/","text":"Introduction \u00b6 Move game object toward current angle of game object, with a constant speed. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexBullet from './plugins/bullet.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import BulletPlugin from './plugins/bullet-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBullet' , plugin : BulletPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var bullet = scene . plugins . get ( 'rexBullet' ). add ( gameObject , { speed : 200 , // enable: true }); speed : moving speed, pixels in second. enable : set false to disable moving. Speed \u00b6 Set bullet . setSpeed ( speed ); // bullet.speed = speed; Get var speed = bullet . speed ;","title":"Bullet"},{"location":"bullet/#introduction","text":"Move game object toward current angle of game object, with a constant speed. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"bullet/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"bullet/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"bullet/#import-class","text":"import rexBullet from './plugins/bullet.js' ;","title":"Import class"},{"location":"bullet/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import BulletPlugin from './plugins/bullet-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexBullet' , plugin : BulletPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"bullet/#create-instance","text":"var bullet = scene . plugins . get ( 'rexBullet' ). add ( gameObject , { speed : 200 , // enable: true }); speed : moving speed, pixels in second. enable : set false to disable moving.","title":"Create instance"},{"location":"bullet/#speed","text":"Set bullet . setSpeed ( speed ); // bullet.speed = speed; Get var speed = bullet . speed ;","title":"Speed"},{"location":"button/","text":"Introduction \u00b6 Fires 'click' event when touch releasd after pressed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexButton from './plugins/button.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ButtonPlugin from './plugins/button-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexButton' , plugin : ButtonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var button = scene . plugins . get ( 'rexButton' ). add ( gameObject , { // enable: true, // mode: 1, // 0|'press'|1|'release' // clickInterval: 100 // ms }); enable : drag-able mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. clickInterval : Interval between 2 'click' events, in ms. Events \u00b6 button . on ( 'click' , function ( button , gameObject , pointer , event ) { // ... }, scope ); Cancel remaining touched events : event.stopPropagation() Enable \u00b6 Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false Set mode \u00b6 button . setMode ( mode ); mode : 'press' , or 0 : Fire 'click' event when touch pressed. 'release' , or 1 : Fire 'click' event when touch released after pressed. Set click interval \u00b6 button . setClickInterval ( interval ); // interval in ms","title":"Button"},{"location":"button/#introduction","text":"Fires 'click' event when touch releasd after pressed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"button/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"button/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"button/#import-class","text":"import rexButton from './plugins/button.js' ;","title":"Import class"},{"location":"button/#install-global-plugin","text":"Install plugin in configuration of game import ButtonPlugin from './plugins/button-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexButton' , plugin : ButtonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"button/#create-instance","text":"var button = scene . plugins . get ( 'rexButton' ). add ( gameObject , { // enable: true, // mode: 1, // 0|'press'|1|'release' // clickInterval: 100 // ms }); enable : drag-able mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. clickInterval : Interval between 2 'click' events, in ms.","title":"Create instance"},{"location":"button/#events","text":"button . on ( 'click' , function ( button , gameObject , pointer , event ) { // ... }, scope ); Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"button/#enable","text":"Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"button/#set-mode","text":"button . setMode ( mode ); mode : 'press' , or 0 : Fire 'click' event when touch pressed. 'release' , or 1 : Fire 'click' event when touch released after pressed.","title":"Set mode"},{"location":"button/#set-click-interval","text":"button . setClickInterval ( interval ); // interval in ms","title":"Set click interval"},{"location":"camera-controllor/","text":"Introduction \u00b6 Scroll/zoom camera. Author: Richard Davey Usage \u00b6 Setup \u00b6 Create controllor // var cursors = scene.input.keyboard.createCursorKeys(); var config = { camera : camera , left : cursors . left , // { isDown, isUp } right : cursors . right , // { isDown, isUp } up : cursors . up , // { isDown, isUp } down : cursors . down , // { isDown, isUp } zoomIn : null , // { isDown, isUp } zoomOut : null , // { isDown, isUp } zoomSpeed : 0.01 , acceleration : null , // acceleration: { // x: 0, // y: 0 // } drag : null , // drag: { // x: 0, // y: 0 // } maxSpeed : null // maxSpeed: { // x: 0, // y: 0 // } }; var controls = new Phaser . Cameras . Controls . SmoothedKeyControl ( config ); // var controls = new Phaser.Cameras.Controls.FixedKeyControl(config); Update scene . update = function ( time , delta ) { controls . update ( delta ); } Other methods \u00b6 Start controls . start (); Stop controls . stop (); Set camera controls . setCamera ( camera );","title":"Controllor"},{"location":"camera-controllor/#introduction","text":"Scroll/zoom camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-controllor/#usage","text":"","title":"Usage"},{"location":"camera-controllor/#setup","text":"Create controllor // var cursors = scene.input.keyboard.createCursorKeys(); var config = { camera : camera , left : cursors . left , // { isDown, isUp } right : cursors . right , // { isDown, isUp } up : cursors . up , // { isDown, isUp } down : cursors . down , // { isDown, isUp } zoomIn : null , // { isDown, isUp } zoomOut : null , // { isDown, isUp } zoomSpeed : 0.01 , acceleration : null , // acceleration: { // x: 0, // y: 0 // } drag : null , // drag: { // x: 0, // y: 0 // } maxSpeed : null // maxSpeed: { // x: 0, // y: 0 // } }; var controls = new Phaser . Cameras . Controls . SmoothedKeyControl ( config ); // var controls = new Phaser.Cameras.Controls.FixedKeyControl(config); Update scene . update = function ( time , delta ) { controls . update ( delta ); }","title":"Setup"},{"location":"camera-controllor/#other-methods","text":"Start controls . start (); Stop controls . stop (); Set camera controls . setCamera ( camera );","title":"Other methods"},{"location":"camera-effects/","text":"Introduction \u00b6 Effects of camera. Author: Richard Davey Usage \u00b6 Fade-in / fade-out \u00b6 camera . fadeIn ( duration ); // duration in ms // camera.fadeIn(duration, red, green, blue, callback, context); // red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255. camera . fadeOut ( duration ); // duration in ms // camera.fadeOut(duration, red, green, blue, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'camerafadeincomplete' , camera , fade ); camera . on ( 'camerafadeoutcomplete' , camera , fade ); Flash \u00b6 camera . flash ( duration ); // duration in ms // camera.flash(duration, red, green, blue, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'cameraflashstart' , camera , flash , duration , red , green , blue ); camera . on ( 'cameraflashcomplete' , camera , flash ); Shake \u00b6 camera . shake ( duration ); // duration in ms // camera.shake(duration, intensity, force, callback, context); // callback: invoked when completed callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {} Events \u00b6 camera . on ( 'camerashakestart' , camera , shake , duration , intensity ); camera . on ( 'camerashakecomplete' , camera , shake ); Pan \u00b6 camera . pan ( x , y , duration ); // duration in ms // camera.pan(x, y, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , x , y ) {} Events \u00b6 camera . on ( 'camerapanstart' , camera , pan , duration , x , y ); camera . on ( 'camerapancomplete' , camera , pan ); Zoom \u00b6 camera . zoomTo ( zoomValue , duration ); // duration in ms // camera.zoomTo(zoomValue, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , zoomValue ) {} Events \u00b6 camera . on ( 'camerazoomstart' , camera , zoom , duration , zoomValue ); camera . on ( 'camerazoomcomplete' , camera , zoom ); Mask \u00b6 Add mask camera . setMask ( mask ); Clear mask camera . clearMask (); More detail about mask","title":"Effects"},{"location":"camera-effects/#introduction","text":"Effects of camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-effects/#usage","text":"","title":"Usage"},{"location":"camera-effects/#fade-in-fade-out","text":"camera . fadeIn ( duration ); // duration in ms // camera.fadeIn(duration, red, green, blue, callback, context); // red/green/blue: the value to fade the red/green/blue channel from. A value between 0 and 255. camera . fadeOut ( duration ); // duration in ms // camera.fadeOut(duration, red, green, blue, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Fade-in / fade-out"},{"location":"camera-effects/#events","text":"camera . on ( 'camerafadeincomplete' , camera , fade ); camera . on ( 'camerafadeoutcomplete' , camera , fade );","title":"Events"},{"location":"camera-effects/#flash","text":"camera . flash ( duration ); // duration in ms // camera.flash(duration, red, green, blue, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Flash"},{"location":"camera-effects/#events_1","text":"camera . on ( 'cameraflashstart' , camera , flash , duration , red , green , blue ); camera . on ( 'cameraflashcomplete' , camera , flash );","title":"Events"},{"location":"camera-effects/#shake","text":"camera . shake ( duration ); // duration in ms // camera.shake(duration, intensity, force, callback, context); // callback: invoked when completed callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress ) {}","title":"Shake"},{"location":"camera-effects/#events_2","text":"camera . on ( 'camerashakestart' , camera , shake , duration , intensity ); camera . on ( 'camerashakecomplete' , camera , shake );","title":"Events"},{"location":"camera-effects/#pan","text":"camera . pan ( x , y , duration ); // duration in ms // camera.pan(x, y, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , x , y ) {}","title":"Pan"},{"location":"camera-effects/#events_3","text":"camera . on ( 'camerapanstart' , camera , pan , duration , x , y ); camera . on ( 'camerapancomplete' , camera , pan );","title":"Events"},{"location":"camera-effects/#zoom","text":"camera . zoomTo ( zoomValue , duration ); // duration in ms // camera.zoomTo(zoomValue, duration, ease, force, callback, context); callback , context : It will be invoked every frame for the duration of the effect. function ( camera , progress , zoomValue ) {}","title":"Zoom"},{"location":"camera-effects/#events_4","text":"camera . on ( 'camerazoomstart' , camera , zoom , duration , zoomValue ); camera . on ( 'camerazoomcomplete' , camera , zoom );","title":"Events"},{"location":"camera-effects/#mask","text":"Add mask camera . setMask ( mask ); Clear mask camera . clearMask (); More detail about mask","title":"Mask"},{"location":"camera-shader-effect/","text":"Introduction \u00b6 Shader effect of camera. Author: Richard Davey Usage \u00b6 Setup \u00b6 Create filter javascript var config = { game: scene.game, renderer: scene.game.renderer, fragShader: '...' // GLSL shader }; var customPipeline = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline(config); var filter = scene.game.renderer.addPipeline(pipelineName, customPipeline); pipelineName : Name of this render pipeline, a string. Add filter camera . setRenderToTexture ( filter ); Set/change properties of filter Property with 1 value Float filter . setFloat1 ( name , value0 ); uniform1fv filter . setFloat1v ( name , value0 ); Int filter . setInt1 ( name , value0 ); Property with 2 values Float filter . setFloat2 ( name , value0 , value1 ); uniform2fv filter . setFloat2v ( name , value0 , value1 ); Int filter . setInt2 ( name , value0 , value1 ); Property with 3 value Float filter . setFloat3 ( name , value0 , value1 , value2 ); uniform3fv filter . setFloat3v ( name , value0 , value1 , value2 ); Int filter . setInt3 ( name , value0 , value1 , value2 ); Property with 4 values Float filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); uniform4fv filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); Int filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Other methods \u00b6 Change filter camera . setPipeline ( pipelineName ); or camera . setPipeline ( filter ); pipelineName : Name of this render pipeline, a string. Clear filter camera . clearRenderToTexture ();","title":"Shader effect"},{"location":"camera-shader-effect/#introduction","text":"Shader effect of camera. Author: Richard Davey","title":"Introduction"},{"location":"camera-shader-effect/#usage","text":"","title":"Usage"},{"location":"camera-shader-effect/#setup","text":"Create filter javascript var config = { game: scene.game, renderer: scene.game.renderer, fragShader: '...' // GLSL shader }; var customPipeline = new Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline(config); var filter = scene.game.renderer.addPipeline(pipelineName, customPipeline); pipelineName : Name of this render pipeline, a string. Add filter camera . setRenderToTexture ( filter ); Set/change properties of filter Property with 1 value Float filter . setFloat1 ( name , value0 ); uniform1fv filter . setFloat1v ( name , value0 ); Int filter . setInt1 ( name , value0 ); Property with 2 values Float filter . setFloat2 ( name , value0 , value1 ); uniform2fv filter . setFloat2v ( name , value0 , value1 ); Int filter . setInt2 ( name , value0 , value1 ); Property with 3 value Float filter . setFloat3 ( name , value0 , value1 , value2 ); uniform3fv filter . setFloat3v ( name , value0 , value1 , value2 ); Int filter . setInt3 ( name , value0 , value1 , value2 ); Property with 4 values Float filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); uniform4fv filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); Int filter . setInt4 ( name , value0 , value1 , value2 , value3 );","title":"Setup"},{"location":"camera-shader-effect/#other-methods","text":"Change filter camera . setPipeline ( pipelineName ); or camera . setPipeline ( filter ); pipelineName : Name of this render pipeline, a string. Clear filter camera . clearRenderToTexture ();","title":"Other methods"},{"location":"camera/","text":"Introduction \u00b6 Camera to display game objects, built-in object of phaser. Author: Richard Davey Usage \u00b6 Get camera \u00b6 Each scene has one or more cameras. Main camera var camera = scene . cameras . main ; Add new camera var camera = scene . cameras . add ( x , y , width , height ); Add existed camera scene . cameras . addExisting ( camera ); Create cameras from JSON \u00b6 scene . cameras . fromJSON ( config ); // scene.cameras.fromJSON(configArray); config : { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } Remove camera \u00b6 scene . cameras . remove ( camera ); Destroy camera \u00b6 camera . destroy (); View port \u00b6 Set camera . setViewport ( top , left , width , height ); or camera . setPosition ( top , left ); // camera.x = top; // camera.y = left; camera . setSize ( width , height ); // camera.width = width; // camera.height = height; Get Position Top-left var top = camera . x ; var left = camera . y ; Center, relative to the top-left of the game canvas. var x = camera . centerX ; var y = camera . centerY ; Width & height var width = camera . width ; var height = camera . height ; var displayWidth = camera . displayWidth ; var displayHeight = camera . displayHeight ; Zoom \u00b6 Set camera . setZoom ( zoomValue ); // The minimum it can be is 0.001. camera . zoom = zoomValue ; Get var zoomValue = camera . zoom ; Rotation \u00b6 Set camera . setAngle ( angle ); // angle in degree camera . setRotation ( angle ); // angle in radians camera . rotation = angle ; // angle in radians Get var angle = camera . rotation ; // angle in radians Visible \u00b6 A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests. camera . setVisible ( value ); // camera.visible = value var visible = camera . visible ; Alpha \u00b6 camera . setAlpha ( value ); // camera.alpha = value; var alpha = camera . alpha ; Scroll \u00b6 camera . setScroll ( x , y ) camera . scrollX = scrollX ; camera . scrollY = scrollY ; camera . centerToBounds (); camera . centerOn ( x , y ); // centered on the given coordinates camera . centerOnX ( x ); camera . centerOnY ( y ); camera . centerToSize (); Follow game object \u00b6 Start following camera . startFollow ( gameObject ); // camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY); // roundPx : set true to round the camera position to integers Stop following camera . stopFollow (); Set follow offset camera . setFollowOffset ( x , y ); Set lerp camera . setLerp ( x , y ); 1 : Camera will instantly snap to the target coordinates. 0.1 : Camera will more slowly track the target, giving a smooth transition. Deadzone camera . setDeadzone ( width , height ); If the target moves outside of this area, the camera will begin scrolling in order to follow it. Boundaries var left = camera . deadzone . left ; var right = camera . deadzone . right ; var top = camera . deadzone . top ; var bootom = camera . deadzone . bottom ; Clear deadzone camera . setDeadzone (); Scroll factor \u00b6 See Scroll factor in game object. Bounds \u00b6 Set camera . setBounds ( x , y , width , height ) Get var bounds = camera . getBounds (); // bounds: a rectangle object // var out = camera.getBounds(out); World coordinates \u00b6 World view, a rectangle object var worldView = camera . worldView ; var x = worldView . x ; var y = worldView . y ; var width = worldView . width ; // displayWidth var height = worldView . height ; // displayHeight var left = worldView . left ; // x var right = worldView . right ; // x + width var top = worldView . top ; // y var bottom = worldView . bottom ; // y + height var centerX = worldView . centerX ; var centerY = worldView . centerY ; var isInside = worldView . contains ( x , y ); var randPoint = worldView . getRandomPoint ( point ); // point: {x, y} Middle point var x = camera . midPoint . x ; var y = camera . midPoint . y ; Get world position var out = camera . getWorldPoint ( x , y ); // var out = camera.getWorldPoint(x, y, out); x , y : Position of camera. out : World position {x, y} Works for zoom of 1 with any resolution, but resolution > 1 and zoom !== 1 breaks Set background color \u00b6 camera . setBackgroundColor ( color ); Ignore game object \u00b6 Ignored game objects won't show at that camera. camera . ignore ( gameObject ); gameObject : A game object An array of game objects A group Get cameras below pointer \u00b6 var cameras = scene . cameras . getCamerasBelowPointer ( pointer ); cameras : An array of cameras. pointer : {x, y}","title":"Camera"},{"location":"camera/#introduction","text":"Camera to display game objects, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"camera/#usage","text":"","title":"Usage"},{"location":"camera/#get-camera","text":"Each scene has one or more cameras. Main camera var camera = scene . cameras . main ; Add new camera var camera = scene . cameras . add ( x , y , width , height ); Add existed camera scene . cameras . addExisting ( camera );","title":"Get camera"},{"location":"camera/#create-cameras-from-json","text":"scene . cameras . fromJSON ( config ); // scene.cameras.fromJSON(configArray); config : { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} }","title":"Create cameras from JSON"},{"location":"camera/#remove-camera","text":"scene . cameras . remove ( camera );","title":"Remove camera"},{"location":"camera/#destroy-camera","text":"camera . destroy ();","title":"Destroy camera"},{"location":"camera/#view-port","text":"Set camera . setViewport ( top , left , width , height ); or camera . setPosition ( top , left ); // camera.x = top; // camera.y = left; camera . setSize ( width , height ); // camera.width = width; // camera.height = height; Get Position Top-left var top = camera . x ; var left = camera . y ; Center, relative to the top-left of the game canvas. var x = camera . centerX ; var y = camera . centerY ; Width & height var width = camera . width ; var height = camera . height ; var displayWidth = camera . displayWidth ; var displayHeight = camera . displayHeight ;","title":"View port"},{"location":"camera/#zoom","text":"Set camera . setZoom ( zoomValue ); // The minimum it can be is 0.001. camera . zoom = zoomValue ; Get var zoomValue = camera . zoom ;","title":"Zoom"},{"location":"camera/#rotation","text":"Set camera . setAngle ( angle ); // angle in degree camera . setRotation ( angle ); // angle in radians camera . rotation = angle ; // angle in radians Get var angle = camera . rotation ; // angle in radians","title":"Rotation"},{"location":"camera/#visible","text":"A visible camera will render and perform input tests. An invisible camera will not render anything and will skip input tests. camera . setVisible ( value ); // camera.visible = value var visible = camera . visible ;","title":"Visible"},{"location":"camera/#alpha","text":"camera . setAlpha ( value ); // camera.alpha = value; var alpha = camera . alpha ;","title":"Alpha"},{"location":"camera/#scroll","text":"camera . setScroll ( x , y ) camera . scrollX = scrollX ; camera . scrollY = scrollY ; camera . centerToBounds (); camera . centerOn ( x , y ); // centered on the given coordinates camera . centerOnX ( x ); camera . centerOnY ( y ); camera . centerToSize ();","title":"Scroll"},{"location":"camera/#follow-game-object","text":"Start following camera . startFollow ( gameObject ); // camera.startFollow(gameObject, roundPx, lerpX, lerpY, offsetX, offsetY); // roundPx : set true to round the camera position to integers Stop following camera . stopFollow (); Set follow offset camera . setFollowOffset ( x , y ); Set lerp camera . setLerp ( x , y ); 1 : Camera will instantly snap to the target coordinates. 0.1 : Camera will more slowly track the target, giving a smooth transition. Deadzone camera . setDeadzone ( width , height ); If the target moves outside of this area, the camera will begin scrolling in order to follow it. Boundaries var left = camera . deadzone . left ; var right = camera . deadzone . right ; var top = camera . deadzone . top ; var bootom = camera . deadzone . bottom ; Clear deadzone camera . setDeadzone ();","title":"Follow game object"},{"location":"camera/#scroll-factor","text":"See Scroll factor in game object.","title":"Scroll factor"},{"location":"camera/#bounds","text":"Set camera . setBounds ( x , y , width , height ) Get var bounds = camera . getBounds (); // bounds: a rectangle object // var out = camera.getBounds(out);","title":"Bounds"},{"location":"camera/#world-coordinates","text":"World view, a rectangle object var worldView = camera . worldView ; var x = worldView . x ; var y = worldView . y ; var width = worldView . width ; // displayWidth var height = worldView . height ; // displayHeight var left = worldView . left ; // x var right = worldView . right ; // x + width var top = worldView . top ; // y var bottom = worldView . bottom ; // y + height var centerX = worldView . centerX ; var centerY = worldView . centerY ; var isInside = worldView . contains ( x , y ); var randPoint = worldView . getRandomPoint ( point ); // point: {x, y} Middle point var x = camera . midPoint . x ; var y = camera . midPoint . y ; Get world position var out = camera . getWorldPoint ( x , y ); // var out = camera.getWorldPoint(x, y, out); x , y : Position of camera. out : World position {x, y} Works for zoom of 1 with any resolution, but resolution > 1 and zoom !== 1 breaks","title":"World coordinates"},{"location":"camera/#set-background-color","text":"camera . setBackgroundColor ( color );","title":"Set background color"},{"location":"camera/#ignore-game-object","text":"Ignored game objects won't show at that camera. camera . ignore ( gameObject ); gameObject : A game object An array of game objects A group","title":"Ignore game object"},{"location":"camera/#get-cameras-below-pointer","text":"var cameras = scene . cameras . getCamerasBelowPointer ( pointer ); cameras : An array of cameras. pointer : {x, y}","title":"Get cameras below pointer"},{"location":"canvas-data/","text":"Introduction \u00b6 Get image data from texture, or text object. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCanvasData from './plugins/canvasdata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CanvasDataPlugin from './plugins/canvasdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCanvasData' , plugin : CanvasDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Text object -> Bit map \u00b6 var canvasData = scene . plugins . get ( 'rexCanvasData' ). textObjectToBitMap ( textObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textObject, out); textObject : text object , bbcode text object , or tag text boject For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : true , or false Texture -> Color map \u00b6 Texture -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( textureKey , frameName ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textureKey, frameName, out); Texture of game object -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( gameObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(gameObject, out); For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : Color32 integer = color integer + (alpha << 24) Get color integer (0 ~ 0xffffff) var color = value & 0xffffff ; or var color = canvasData . color32ToColorInt ( value ); Get alpha (0 ~ 0xff) var alpha = value >>> 24 ; var alpha = canvasData . color32TAlpha ( value ); Canvas data \u00b6 For each pixel \u00b6 For each pixel data canvasData . forEach ( callback , scope ); callback : Callback for each pixel function ( value , x , y , canvasData ) { } For each non zero pixel data canvasData . forEachNonZero ( callback , scope ); Get pixel data \u00b6 var data = canvasData . get ( x , y ); data : true , or false in result of textObjectToBitMap method Color32 in result of textureTColorMap method","title":"Canvas image data"},{"location":"canvas-data/#introduction","text":"Get image data from texture, or text object. Author: Rex Method only","title":"Introduction"},{"location":"canvas-data/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"canvas-data/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"canvas-data/#import-class","text":"import rexCanvasData from './plugins/canvasdata.js' ;","title":"Import class"},{"location":"canvas-data/#install-global-plugin","text":"Install plugin in configuration of game import CanvasDataPlugin from './plugins/canvasdata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCanvasData' , plugin : CanvasDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"canvas-data/#text-object-bit-map","text":"var canvasData = scene . plugins . get ( 'rexCanvasData' ). textObjectToBitMap ( textObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textObject, out); textObject : text object , bbcode text object , or tag text boject For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : true , or false","title":"Text object -&gt; Bit map"},{"location":"canvas-data/#texture-color-map","text":"Texture -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( textureKey , frameName ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(textureKey, frameName, out); Texture of game object -> Color map var canvasData = scene . plugins . get ( 'rexCanvasData' ). textureTColorMap ( gameObject ); // var out = scene.plugins.get('rexCanvasData').textObjectToBitMap(gameObject, out); For each pixel data canvasData . forEach ( function ( value , x , y , canvasData ){ }, scope ); value : Color32 integer = color integer + (alpha << 24) Get color integer (0 ~ 0xffffff) var color = value & 0xffffff ; or var color = canvasData . color32ToColorInt ( value ); Get alpha (0 ~ 0xff) var alpha = value >>> 24 ; var alpha = canvasData . color32TAlpha ( value );","title":"Texture -&gt; Color map"},{"location":"canvas-data/#canvas-data","text":"","title":"Canvas data"},{"location":"canvas-data/#for-each-pixel","text":"For each pixel data canvasData . forEach ( callback , scope ); callback : Callback for each pixel function ( value , x , y , canvasData ) { } For each non zero pixel data canvasData . forEachNonZero ( callback , scope );","title":"For each pixel"},{"location":"canvas-data/#get-pixel-data","text":"var data = canvasData . get ( x , y ); data : true , or false in result of textObjectToBitMap method Color32 in result of textureTColorMap method","title":"Get pixel data"},{"location":"canvas-texture/","text":"Introduction \u00b6 Canvas texture stored in texture cache , built-in object of phaser. Author: Richard Davey Usage \u00b6 Create canvas texture \u00b6 var texture = scene . textures . createCanvas ( key , width , height ); Get canvas element \u00b6 var canvas = texture . getCanvas (); var context = texture . getContext (); Canvas api Draw frame \u00b6 texture . drawFrame ( key , frame , x , y ); Clear \u00b6 texture . clear (); texture . clear ( x , y , width , height ); Refresh texture \u00b6 texture . refresh (); Color \u00b6 Set texture . setPixel ( x , y , red , green , blue ); // texture.setPixel(x, y, red, green, blue, alpha); Get var color = texture . getPixel ( x , y ); // var color = texture.getPixel(x, y, color); var colors = texture . getPixels ( x , y , width , height ); colors : [{x, y, color, alpha}, ...] Image data \u00b6 Set texture . putData ( imageData , x , y ); Get var imageData = texture . getData ( x , y , width , height ); Add frame \u00b6 texture . add ( name , sourceIndex , x , y , width , height ); name : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x : The x coordinate of the top-left of this Frame. y : The y coordinate of the top-left of this Frame. width : The width of this Frame. height : The height of this Frame.","title":"Canvas texture"},{"location":"canvas-texture/#introduction","text":"Canvas texture stored in texture cache , built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"canvas-texture/#usage","text":"","title":"Usage"},{"location":"canvas-texture/#create-canvas-texture","text":"var texture = scene . textures . createCanvas ( key , width , height );","title":"Create canvas texture"},{"location":"canvas-texture/#get-canvas-element","text":"var canvas = texture . getCanvas (); var context = texture . getContext (); Canvas api","title":"Get canvas element"},{"location":"canvas-texture/#draw-frame","text":"texture . drawFrame ( key , frame , x , y );","title":"Draw frame"},{"location":"canvas-texture/#clear","text":"texture . clear (); texture . clear ( x , y , width , height );","title":"Clear"},{"location":"canvas-texture/#refresh-texture","text":"texture . refresh ();","title":"Refresh texture"},{"location":"canvas-texture/#color","text":"Set texture . setPixel ( x , y , red , green , blue ); // texture.setPixel(x, y, red, green, blue, alpha); Get var color = texture . getPixel ( x , y ); // var color = texture.getPixel(x, y, color); var colors = texture . getPixels ( x , y , width , height ); colors : [{x, y, color, alpha}, ...]","title":"Color"},{"location":"canvas-texture/#image-data","text":"Set texture . putData ( imageData , x , y ); Get var imageData = texture . getData ( x , y , width , height );","title":"Image data"},{"location":"canvas-texture/#add-frame","text":"texture . add ( name , sourceIndex , x , y , width , height ); name : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x : The x coordinate of the top-left of this Frame. y : The y coordinate of the top-left of this Frame. width : The width of this Frame. height : The height of this Frame.","title":"Add frame"},{"location":"canvas/","text":"Introduction \u00b6 Drawing on canvas . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCanvasPlugin' , plugin : CanvasPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var canvas = scene . add . rexCanvas ( x , y , width , height ); Add canvas from JSON var canvas = scene . make . rexCanvas ({ x : 0 , y : 0 , width : 256 , height : 256 , //fill: null, add : true }); Custom class \u00b6 Define class class MyCanvas extends Canvas { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var canvas = new MyCanvas ( scene , x , y , width , height ); Clear or fill canvas \u00b6 Clear canvas . clear (); Fill color canvas . fill ( color ); Update canvas \u00b6 Get canvas elemet var canvasElem = canvas . getCanvas (); var context = canvasElem . getContext ( '2d' ); or var canvaesElem = canvas . canvas ; var context = canvas . context ; Draw on context Update display texture \u00b6 Update texture when rendering canvas . needRedraw (); Update texture now canvas . updateTexture (); or update canvas and texture var callback = function ( canvasElem , context ) { }; canvas . updateTexture ( callback ); // canvas.updateTexture(callback, scope); Load or save texture \u00b6 Save canvas to texuture canvas . generateTexture ( key , x , y , width , height ); Copy canvas from texture canvas . loadTexture ( key , resize ); Pixel color \u00b6 Get color var color = canvas . getPixel ( x , y ); color : Color object color.red , color.green , color.blue , color.alpha Set color canvas . setPixel ( x , y , r , g , b ); // canvas.setPixel(x, y, r, g, b, a); or canvas . setPixel ( x , y , color ); r , g , b , a : Integer number between 0 ~ 255. color : Color object Compare with Graphics object \u00b6 Drawing method This canvas object draws stuff on canvas in WEBGL or CANVAS render mode. Graphics object draws stuff on webgl render pipeline in WEBGL render mode. Size This canvas object has size (width, height) and origin. Graphics object does not have size and origin.","title":"Canvas"},{"location":"canvas/#introduction","text":"Drawing on canvas . Author: Rex Game object","title":"Introduction"},{"location":"canvas/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"canvas/#usage","text":"Sample code","title":"Usage"},{"location":"canvas/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCanvasPlugin' , plugin : CanvasPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"canvas/#create-instance","text":"var canvas = scene . add . rexCanvas ( x , y , width , height ); Add canvas from JSON var canvas = scene . make . rexCanvas ({ x : 0 , y : 0 , width : 256 , height : 256 , //fill: null, add : true });","title":"Create instance"},{"location":"canvas/#custom-class","text":"Define class class MyCanvas extends Canvas { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var canvas = new MyCanvas ( scene , x , y , width , height );","title":"Custom class"},{"location":"canvas/#clear-or-fill-canvas","text":"Clear canvas . clear (); Fill color canvas . fill ( color );","title":"Clear or fill canvas"},{"location":"canvas/#update-canvas","text":"Get canvas elemet var canvasElem = canvas . getCanvas (); var context = canvasElem . getContext ( '2d' ); or var canvaesElem = canvas . canvas ; var context = canvas . context ; Draw on context","title":"Update canvas"},{"location":"canvas/#update-display-texture","text":"Update texture when rendering canvas . needRedraw (); Update texture now canvas . updateTexture (); or update canvas and texture var callback = function ( canvasElem , context ) { }; canvas . updateTexture ( callback ); // canvas.updateTexture(callback, scope);","title":"Update display texture"},{"location":"canvas/#load-or-save-texture","text":"Save canvas to texuture canvas . generateTexture ( key , x , y , width , height ); Copy canvas from texture canvas . loadTexture ( key , resize );","title":"Load or save texture"},{"location":"canvas/#pixel-color","text":"Get color var color = canvas . getPixel ( x , y ); color : Color object color.red , color.green , color.blue , color.alpha Set color canvas . setPixel ( x , y , r , g , b ); // canvas.setPixel(x, y, r, g, b, a); or canvas . setPixel ( x , y , color ); r , g , b , a : Integer number between 0 ~ 255. color : Color object","title":"Pixel color"},{"location":"canvas/#compare-with-graphics-object","text":"Drawing method This canvas object draws stuff on canvas in WEBGL or CANVAS render mode. Graphics object draws stuff on webgl render pipeline in WEBGL render mode. Size This canvas object has size (width, height) and origin. Graphics object does not have size and origin.","title":"Compare with Graphics object"},{"location":"capitalizes-first/","text":"Introduction \u00b6 Capitalizes the first letter of a string, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . UppercaseFirst ( str );","title":"Capitalizes first"},{"location":"capitalizes-first/#introduction","text":"Capitalizes the first letter of a string, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"capitalizes-first/#usage","text":"var result = Phaser . Utils . String . UppercaseFirst ( str );","title":"Usage"},{"location":"circlemaskimage/","text":"Introduction \u00b6 Load a texture, then apply a circle mask. Extended from canvas plugin . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCircleMaskImagePlugin' , plugin : CircleMaskImagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var image = scene . add . rexCircleMaskImage ( x , y , key , frame , config ); config : maskType : Type of mask. null : No mask. 0 , or 'circle' : Circle mask. 1 , or 'ellipse' : Ellipse mask. Add image from JSON var image = scene . make . rexCircleMaskImage ({ x : 0 , y : 0 , key : key , frame : name , add : true }); Custom class \u00b6 Define class class MyImage extends CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , key , frame , config ); Set texture \u00b6 image . setTexture ( key , frame ); // image.setTexture(key, frame, maskType); maskType : Type of mask null : No mask. 0 , or 'circle' : Circle mask. Default value. 1 , or 'ellipse' : Ellipse mask.","title":"Circle mask image"},{"location":"circlemaskimage/#introduction","text":"Load a texture, then apply a circle mask. Extended from canvas plugin . Author: Rex Game object","title":"Introduction"},{"location":"circlemaskimage/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"circlemaskimage/#usage","text":"Sample code","title":"Usage"},{"location":"circlemaskimage/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexCircleMaskImagePlugin' , plugin : CircleMaskImagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"circlemaskimage/#create-instance","text":"var image = scene . add . rexCircleMaskImage ( x , y , key , frame , config ); config : maskType : Type of mask. null : No mask. 0 , or 'circle' : Circle mask. 1 , or 'ellipse' : Ellipse mask. Add image from JSON var image = scene . make . rexCircleMaskImage ({ x : 0 , y : 0 , key : key , frame : name , add : true });","title":"Create instance"},{"location":"circlemaskimage/#custom-class","text":"Define class class MyImage extends CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , key , frame , config );","title":"Custom class"},{"location":"circlemaskimage/#set-texture","text":"image . setTexture ( key , frame ); // image.setTexture(key, frame, maskType); maskType : Type of mask null : No mask. 0 , or 'circle' : Circle mask. Default value. 1 , or 'ellipse' : Ellipse mask.","title":"Set texture"},{"location":"clamp/","text":"Introduction \u00b6 Force a value within the boundaries by clamping it to the range min , max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Clamp ( value , min , max ); value : The value to be clamped.","title":"Clamp"},{"location":"clamp/#introduction","text":"Force a value within the boundaries by clamping it to the range min , max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"clamp/#usage","text":"var result = Phaser . Math . Clamp ( value , min , max ); value : The value to be clamped.","title":"Usage"},{"location":"clock/","text":"Introduction \u00b6 A clock to count elapsed time. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexClock from './plugins/clock.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ClockPlugin from './plugins/clock-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexClock' , plugin : ClockPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var clock = scene . plugins . get ( 'rexClock' ). add ( scene , { // timeScale: 1 }); timeScale : time-scale for counting elapsed time. Start counting \u00b6 clock . start (); // clock.start(startAt); // start-at time in ms Get elapsed time \u00b6 var now = clock . now ; // elapsed time in ms Pause, Resume, stop counting \u00b6 clock . pause (); clock . resume (); clock . stop (); Seek elapsed time \u00b6 clock . seek ( time ); // elapsed time in ms State of counting \u00b6 var isRunning = clock . isRunning ; Time-scale \u00b6 var timeScale = clock . timeScale ; clock . timeScale = 0.5 ;","title":"Clock"},{"location":"clock/#introduction","text":"A clock to count elapsed time. Author: Rex Member of scene","title":"Introduction"},{"location":"clock/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"clock/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"clock/#import-class","text":"import rexClock from './plugins/clock.js' ;","title":"Import class"},{"location":"clock/#install-global-plugin","text":"Install plugin in configuration of game import ClockPlugin from './plugins/clock-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexClock' , plugin : ClockPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"clock/#create-instance","text":"var clock = scene . plugins . get ( 'rexClock' ). add ( scene , { // timeScale: 1 }); timeScale : time-scale for counting elapsed time.","title":"Create instance"},{"location":"clock/#start-counting","text":"clock . start (); // clock.start(startAt); // start-at time in ms","title":"Start counting"},{"location":"clock/#get-elapsed-time","text":"var now = clock . now ; // elapsed time in ms","title":"Get elapsed time"},{"location":"clock/#pause-resume-stop-counting","text":"clock . pause (); clock . resume (); clock . stop ();","title":"Pause, Resume, stop counting"},{"location":"clock/#seek-elapsed-time","text":"clock . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"clock/#state-of-counting","text":"var isRunning = clock . isRunning ;","title":"State of counting"},{"location":"clock/#time-scale","text":"var timeScale = clock . timeScale ; clock . timeScale = 0.5 ;","title":"Time-scale"},{"location":"color/","text":"Introduction \u00b6 Get color value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get color integer \u00b6 Hex string, or color integer var color = Phaser . Display . Color . ValueToColor ( input ); input : Hex string, or color integer RGB to color var color = Phaser . Display . Color . GetColor ( red , green , blue ); red , green , blue : 0 ~ 255 RGBA to color var color = Phaser . Display . Color . GetColor32 ( red , green , blue , alpha ); red , green , blue , alpha : 0 ~ 255 Hex string to color var color = Phaser . Display . Color . HexStringToColor ( hex ). color ; hex : #0033ff , #03f , 0x0033ff , or 0x03f RGB string to color var color = Phaser . Display . Color . RGBStringToColor ( rgb ); rgb : 'rgb(r,g,b)' , or 'rgba(r,g,b,a)' r, g, b : 0 ~ 255 a : 0 ~ 1 HSV to color var color = Phaser . Display . Color . HSVToRGB ( h , s , v ). color ; h , s , v : 0 ~ 1 Color integer to RGB \u00b6 var rgb = Phaser . Display . Color . IntegerToRGB ( color ); color : Color integer ( 0xAARRGGBB ) rgb : JSON object ( {r, g, b, a} ) HSV color wheel \u00b6 Create color array var colorArray = Phaser . Display . Color . HSVColorWheel ( s , v ); Get color var color = colorArray [ i ]. color ; // i : 0 ~ 359 Color object \u00b6 Create color object \u00b6 Create via r,g,b,a components var color = new Phaser . Display . Color ( red , green , blue ); // alpha = 255 // var color = new Phaser.Display.Color(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Create via color integer var color = Phaser . Display . Color . IntegerToColor ( colorInteger ); colorInteger : Color integer ( 0xAARRGGBB ) Set color \u00b6 Set color color . setTo ( red , green , blue ); // alpha = 255 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Set color in GL values color . setGLTo ( red , green , blue ); // alpha = 1 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 1 Set color from color object color . setFromRGB ( rgba ); rgba : { r : 0 , g : 0 , b : 0 , // a: 0 } Set color from HSV color . setFromHSV ( h , s , v ); Set to transparent () color . transparent (); Set (red, green, blue) to 0 Set to gray color color . gray ( value ); Set to a random color color . random (); or color . random ( min , max ); min : 0 ~ 255. Default value is 0. max : 0 ~ 255. Default value is 255. Set to random gray color . randomGray (); or color . randomGray ( min , max ); Set red/green/blue/alpha channel : 0 ~ 255 color . red = value ; // color.red += value; color . green = value ; // color.green += value; color . blue = value ; // color.blue += value; color . alpha = value ; // color.alpha += value; Set H/S/V channel : 0 ~ 1 color . h = value ; // color.h += value; color . s = value ; // color.s += value; color . v = value ; // color.v += value; Set normalized red, green, blue, alpha : 0 ~ 1 color . redGL = value ; // color.redGL += value; color . greenGL = value ; // color.greenGL += value; color . blueGL = value ; // color.blueGL += value; color . alphaGL = value ; // color.alphaGL += value; Set brighten color . brighten ( value ); value : Percentage, 0 ~ 100 Saturate : Increase the saturation (S) of this Color by the percentage amount given. color . saturate ( value ); value : Percentage, 0 ~ 100 Desaturate : Decrease the saturation (S) of this Color by the percentage amount given. color . desaturate ( value ); value : Percentage, 0 ~ 100 Lighten : Increase the lightness (V) of this Color by the percentage amount given. color . lighten ( value ); value : Percentage, 0 ~ 100 Darken : Decrease the lightness (V) of this Color by the percentage amount given. color . darken ( value ); value : Percentage, 0 ~ 100 Properties \u00b6 RGB Color, not including the alpha channel var c = color . color ; RGB Color, including the alpha channel. var c = color . color32 ; RGB color string which can be used in CSS color values. var c = color . rgba ; Red, green, blue, alpha : 0 ~ 255 var r = color . red ; var g = color . green ; var b = color . blue ; var a = color . alpha ; H, S, V : 0 ~ 1 var h = color . h ; var s = color . s ; var v = color . v ; Normalized red, green, blue, alpha : 0 ~ 1 var r = color . redGL ; var g = color . greenGL ; var b = color . blueGL ; var a = color . alphaGL ; Clone \u00b6 var newColor = color . clone (); To hex string \u00b6 var hexString = Phaser . Display . Color . RGBToString ( color . r , color . g , color . b , color . a ); // var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix); Interpolation \u00b6 Interpolate between 2 colors. var colorOut = Phaser . Display . Color . Interpolate . RGBWithRGB ( r1 , g1 , b1 , r2 , g2 , b2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithColor ( color1 , color2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithRGB ( color , r , g , b , length , index ); length , index : t = index/length (0~1)","title":"Color"},{"location":"color/#introduction","text":"Get color value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"color/#usage","text":"","title":"Usage"},{"location":"color/#get-color-integer","text":"Hex string, or color integer var color = Phaser . Display . Color . ValueToColor ( input ); input : Hex string, or color integer RGB to color var color = Phaser . Display . Color . GetColor ( red , green , blue ); red , green , blue : 0 ~ 255 RGBA to color var color = Phaser . Display . Color . GetColor32 ( red , green , blue , alpha ); red , green , blue , alpha : 0 ~ 255 Hex string to color var color = Phaser . Display . Color . HexStringToColor ( hex ). color ; hex : #0033ff , #03f , 0x0033ff , or 0x03f RGB string to color var color = Phaser . Display . Color . RGBStringToColor ( rgb ); rgb : 'rgb(r,g,b)' , or 'rgba(r,g,b,a)' r, g, b : 0 ~ 255 a : 0 ~ 1 HSV to color var color = Phaser . Display . Color . HSVToRGB ( h , s , v ). color ; h , s , v : 0 ~ 1","title":"Get color integer"},{"location":"color/#color-integer-to-rgb","text":"var rgb = Phaser . Display . Color . IntegerToRGB ( color ); color : Color integer ( 0xAARRGGBB ) rgb : JSON object ( {r, g, b, a} )","title":"Color integer to RGB"},{"location":"color/#hsv-color-wheel","text":"Create color array var colorArray = Phaser . Display . Color . HSVColorWheel ( s , v ); Get color var color = colorArray [ i ]. color ; // i : 0 ~ 359","title":"HSV color wheel"},{"location":"color/#color-object","text":"","title":"Color object"},{"location":"color/#create-color-object","text":"Create via r,g,b,a components var color = new Phaser . Display . Color ( red , green , blue ); // alpha = 255 // var color = new Phaser.Display.Color(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Create via color integer var color = Phaser . Display . Color . IntegerToColor ( colorInteger ); colorInteger : Color integer ( 0xAARRGGBB )","title":"Create color object"},{"location":"color/#set-color","text":"Set color color . setTo ( red , green , blue ); // alpha = 255 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 255 Set color in GL values color . setGLTo ( red , green , blue ); // alpha = 1 // color.setTo(red, green, blue, alpha); red , green , blue , alpha : 0 ~ 1 Set color from color object color . setFromRGB ( rgba ); rgba : { r : 0 , g : 0 , b : 0 , // a: 0 } Set color from HSV color . setFromHSV ( h , s , v ); Set to transparent () color . transparent (); Set (red, green, blue) to 0 Set to gray color color . gray ( value ); Set to a random color color . random (); or color . random ( min , max ); min : 0 ~ 255. Default value is 0. max : 0 ~ 255. Default value is 255. Set to random gray color . randomGray (); or color . randomGray ( min , max ); Set red/green/blue/alpha channel : 0 ~ 255 color . red = value ; // color.red += value; color . green = value ; // color.green += value; color . blue = value ; // color.blue += value; color . alpha = value ; // color.alpha += value; Set H/S/V channel : 0 ~ 1 color . h = value ; // color.h += value; color . s = value ; // color.s += value; color . v = value ; // color.v += value; Set normalized red, green, blue, alpha : 0 ~ 1 color . redGL = value ; // color.redGL += value; color . greenGL = value ; // color.greenGL += value; color . blueGL = value ; // color.blueGL += value; color . alphaGL = value ; // color.alphaGL += value; Set brighten color . brighten ( value ); value : Percentage, 0 ~ 100 Saturate : Increase the saturation (S) of this Color by the percentage amount given. color . saturate ( value ); value : Percentage, 0 ~ 100 Desaturate : Decrease the saturation (S) of this Color by the percentage amount given. color . desaturate ( value ); value : Percentage, 0 ~ 100 Lighten : Increase the lightness (V) of this Color by the percentage amount given. color . lighten ( value ); value : Percentage, 0 ~ 100 Darken : Decrease the lightness (V) of this Color by the percentage amount given. color . darken ( value ); value : Percentage, 0 ~ 100","title":"Set color"},{"location":"color/#properties","text":"RGB Color, not including the alpha channel var c = color . color ; RGB Color, including the alpha channel. var c = color . color32 ; RGB color string which can be used in CSS color values. var c = color . rgba ; Red, green, blue, alpha : 0 ~ 255 var r = color . red ; var g = color . green ; var b = color . blue ; var a = color . alpha ; H, S, V : 0 ~ 1 var h = color . h ; var s = color . s ; var v = color . v ; Normalized red, green, blue, alpha : 0 ~ 1 var r = color . redGL ; var g = color . greenGL ; var b = color . blueGL ; var a = color . alphaGL ;","title":"Properties"},{"location":"color/#clone","text":"var newColor = color . clone ();","title":"Clone"},{"location":"color/#to-hex-string","text":"var hexString = Phaser . Display . Color . RGBToString ( color . r , color . g , color . b , color . a ); // var hexString = Phaser.Display.Color.RGBToString(color.r, color.g, color.b, color.a, prefix);","title":"To hex string"},{"location":"color/#interpolation","text":"Interpolate between 2 colors. var colorOut = Phaser . Display . Color . Interpolate . RGBWithRGB ( r1 , g1 , b1 , r2 , g2 , b2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithColor ( color1 , color2 , length , index ); var colorOut = Phaser . Display . Color . Interpolate . ColorWithRGB ( color , r , g , b , length , index ); length , index : t = index/length (0~1)","title":"Interpolation"},{"location":"conditionstable/","text":"Introduction \u00b6 Check conditions to find passed tests listed in a csv table. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexConditionsTable from './plugins/conditionstable.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ConditionsTablePlugin from './plugins/conditionstable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexConditionsTable' , plugin : ConditionsTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var table = scene . plugins . get ( 'rexConditionsTable' ). add (); Load table from csv string \u00b6 table . loadCSV ( csvString , { // delimiter: ',' }); For exameple, csv string name A A B Test1 >= 10 <= 20 Test2 3 ,A,A,B Test1,>= 10,<= 20, Test2,,,3 means that: Test1: (A>=10) && (A<=20) Test2: (B==3) Test \u00b6 Get first pass test name \u00b6 table . anyPassTest ( values , function ( testName ){ }, scope ); values : Inputs in Key-value pairs or var testName = table . anyPassTest ( values ); Get each pass test name \u00b6 table . eachPassTest ( values , function ( testName ){ }, scope ); Get result of each test \u00b6 table . eachTest ( values , function ( testName , result ){ }, scope );","title":"Conditions table"},{"location":"conditionstable/#introduction","text":"Check conditions to find passed tests listed in a csv table. Author: Rex Member of scene","title":"Introduction"},{"location":"conditionstable/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"conditionstable/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"conditionstable/#import-class","text":"import rexConditionsTable from './plugins/conditionstable.js' ;","title":"Import class"},{"location":"conditionstable/#install-global-plugin","text":"Install plugin in configuration of game import ConditionsTablePlugin from './plugins/conditionstable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexConditionsTable' , plugin : ConditionsTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"conditionstable/#create-instance","text":"var table = scene . plugins . get ( 'rexConditionsTable' ). add ();","title":"Create instance"},{"location":"conditionstable/#load-table-from-csv-string","text":"table . loadCSV ( csvString , { // delimiter: ',' }); For exameple, csv string name A A B Test1 >= 10 <= 20 Test2 3 ,A,A,B Test1,>= 10,<= 20, Test2,,,3 means that: Test1: (A>=10) && (A<=20) Test2: (B==3)","title":"Load table from csv string"},{"location":"conditionstable/#test","text":"","title":"Test"},{"location":"conditionstable/#get-first-pass-test-name","text":"table . anyPassTest ( values , function ( testName ){ }, scope ); values : Inputs in Key-value pairs or var testName = table . anyPassTest ( values );","title":"Get first pass test name"},{"location":"conditionstable/#get-each-pass-test-name","text":"table . eachPassTest ( values , function ( testName ){ }, scope );","title":"Get each pass test name"},{"location":"conditionstable/#get-result-of-each-test","text":"table . eachTest ( values , function ( testName , result ){ }, scope );","title":"Get result of each test"},{"location":"config-data/","text":"Introduction \u00b6 Get parameters from configuration object. Author: Richard Davey Usage \u00b6 Quick start \u00b6 const GetValue = Phaser . Utils . Objects . GetValue ; var myMethod = function ( config ) { var x = GetValue ( config , 'x' , 0 ); var y = GetValue ( config , 'y' , 0 ); var width = GetValue ( config , 'width' , 0 ); var height = GetValue ( config , 'height' , 0 ); // ... } Get value \u00b6 Retrieves a value from an object. var value = Phaser . Utils . Objects . GetValue ( source , key , defaultValue ); source : Configuration object. key : The name of the property to retrieve from the object. For example, Property source.name , key = name Property source.position.x , key = position.x defaultValue : The value to return if the key isn't found in the source object. Finds the key within the top level of the source object, or returns defaultValue . var value = Phaser . Utils . Objects . GetFastValue ( source , key , defaultValue ); key : The key for the property on source. Must exist at the top level of the source object. Retrieves a value from an object. Allows for more advanced selection options. var value = Phaser . Utils . Objects . GetAdvancedValue ( source , key , defaultValue ); Implicit var source = { x : 4 }; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 From function var source = { x : function ( key ){ return 4 ;}}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 Pass key to function's 1 st parameter, and get return value as final result. Randomly pick one element from the array var source = { x : [ a , b , c ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random item from array [a, b, c] Random integer between min and max var source = { x : randInt : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random int min~max Random float between min and max var source = { x : randFloat : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random float min~max Is plain object \u00b6 var isPlainObject = Phaser . Utils . Objects . IsPlainObject ( object ); Plain object: - var obj = {}; - var obj = new Object();","title":"Configuration data"},{"location":"config-data/#introduction","text":"Get parameters from configuration object. Author: Richard Davey","title":"Introduction"},{"location":"config-data/#usage","text":"","title":"Usage"},{"location":"config-data/#quick-start","text":"const GetValue = Phaser . Utils . Objects . GetValue ; var myMethod = function ( config ) { var x = GetValue ( config , 'x' , 0 ); var y = GetValue ( config , 'y' , 0 ); var width = GetValue ( config , 'width' , 0 ); var height = GetValue ( config , 'height' , 0 ); // ... }","title":"Quick start"},{"location":"config-data/#get-value","text":"Retrieves a value from an object. var value = Phaser . Utils . Objects . GetValue ( source , key , defaultValue ); source : Configuration object. key : The name of the property to retrieve from the object. For example, Property source.name , key = name Property source.position.x , key = position.x defaultValue : The value to return if the key isn't found in the source object. Finds the key within the top level of the source object, or returns defaultValue . var value = Phaser . Utils . Objects . GetFastValue ( source , key , defaultValue ); key : The key for the property on source. Must exist at the top level of the source object. Retrieves a value from an object. Allows for more advanced selection options. var value = Phaser . Utils . Objects . GetAdvancedValue ( source , key , defaultValue ); Implicit var source = { x : 4 }; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 From function var source = { x : function ( key ){ return 4 ;}}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = 4 Pass key to function's 1 st parameter, and get return value as final result. Randomly pick one element from the array var source = { x : [ a , b , c ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random item from array [a, b, c] Random integer between min and max var source = { x : randInt : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random int min~max Random float between min and max var source = { x : randFloat : [ min , max ]}; var value = Phaser . Utils . Objects . GetAdvancedValue ( source , 'x' ); // value = random float min~max","title":"Get value"},{"location":"config-data/#is-plain-object","text":"var isPlainObject = Phaser . Utils . Objects . IsPlainObject ( object ); Plain object: - var obj = {}; - var obj = new Object();","title":"Is plain object"},{"location":"container/","text":"Introduction \u00b6 Control the position and angle of children game objects, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Container \u00b6 Add container object \u00b6 var container = scene . add . container ( x , y ); // var container = scene.add.container(x, y, children); // children: an array of game object Custom class \u00b6 Define class class MyContainer extends Phaser . GameObjects . Container { constructor ( scene , x , y , children ) { super ( scene , x , y , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , children ); Destroy \u00b6 container . destroy (); Also destroy all children game objects. Set properties \u00b6 Reference game object , to set position, angle, visible, alpha, etc... Set size \u00b6 container . setSize ( width , height ); Default size is 0x0. Set scroll factor \u00b6 container . setScrollFactor ( x , y ); Apply this scrollFactor to all Container children. container . setScrollFactor ( x , y , true ); Hit area \u00b6 container . setInteractive ( new Phaser . Geom . Circle ( 0 , 0 , radius ), Phaser . Geom . Circle . Contains ); // container.setInteractive(false); // disable Assign hit area with a circle shape. Non-exclusive \u00b6 container . setExclusive ( false ); Allows a game object added to container many times. Children \u00b6 Add child \u00b6 container . add ( child ); // child: a game object or an array of game objects container . addAt ( child , index ); Exist \u00b6 var hasChild = container . exists ( child ); Get child \u00b6 var firstChild = container . first ; var nextChild = container . next ; var prevChild = container . previous ; var lastChild = container . last ; var child = container . getByName ( name ); var child = container . getRandom ( startIndex , length ); var child = container . getFirst ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var children = container . getAll ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var amount = container . count ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. Sort children \u00b6 container . sort ( property ); container . sort ( property , function ( childA , childB ){ return 0 ; // 0, 1, -1 }); Remove child \u00b6 container . remove ( child ); // container.remove(child, true); // remove child object and destroy it container . removeAt ( index ); // container.removeAt(index, true); // remove child object and destroy it container . removeBetween ( startIndex , endIndex ); // container.removeBetween(startIndex, endIndex, true); // remove children objects and destroy them container . removeAll (); // container.removeAll(true); // remove all children objects and destroy them Replace child \u00b6 container . replace ( oldChild , newChild ); // container.replace(oldChild, newChild, true); // destroy oldChild Order of child \u00b6 container . moveTo ( child , index ); container . bringToTop ( child ); container . sendToBack ( child ); container . moveUp ( child ); container . moveDown ( child ); container . swap ( child1 , child2 ); container . reverse (); container . shuffle (); Set properties \u00b6 container . setAll ( property , value , startIndex , endIndex ); For each child \u00b6 Iterate current children list container . iterate ( callback ); // container.iterate(callback, context); // container.iterate(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Iterate a copy of current children list container . each ( callback ); // container.each(callback, context); // container.each(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Compare with group object \u00b6 Container and group objects are all have a children list. Container has position, angle, alpha, visible, ...etc, but group does not have. Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't. A game object could be added to many group, but it only could be added to a container ( exclusive mode).","title":"Container"},{"location":"container/#introduction","text":"Control the position and angle of children game objects, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"container/#usage","text":"","title":"Usage"},{"location":"container/#container","text":"","title":"Container"},{"location":"container/#add-container-object","text":"var container = scene . add . container ( x , y ); // var container = scene.add.container(x, y, children); // children: an array of game object","title":"Add container object"},{"location":"container/#custom-class","text":"Define class class MyContainer extends Phaser . GameObjects . Container { constructor ( scene , x , y , children ) { super ( scene , x , y , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , children );","title":"Custom class"},{"location":"container/#destroy","text":"container . destroy (); Also destroy all children game objects.","title":"Destroy"},{"location":"container/#set-properties","text":"Reference game object , to set position, angle, visible, alpha, etc...","title":"Set properties"},{"location":"container/#set-size","text":"container . setSize ( width , height ); Default size is 0x0.","title":"Set size"},{"location":"container/#set-scroll-factor","text":"container . setScrollFactor ( x , y ); Apply this scrollFactor to all Container children. container . setScrollFactor ( x , y , true );","title":"Set scroll factor"},{"location":"container/#hit-area","text":"container . setInteractive ( new Phaser . Geom . Circle ( 0 , 0 , radius ), Phaser . Geom . Circle . Contains ); // container.setInteractive(false); // disable Assign hit area with a circle shape.","title":"Hit area"},{"location":"container/#non-exclusive","text":"container . setExclusive ( false ); Allows a game object added to container many times.","title":"Non-exclusive"},{"location":"container/#children","text":"","title":"Children"},{"location":"container/#add-child","text":"container . add ( child ); // child: a game object or an array of game objects container . addAt ( child , index );","title":"Add child"},{"location":"container/#exist","text":"var hasChild = container . exists ( child );","title":"Exist"},{"location":"container/#get-child","text":"var firstChild = container . first ; var nextChild = container . next ; var prevChild = container . previous ; var lastChild = container . last ; var child = container . getByName ( name ); var child = container . getRandom ( startIndex , length ); var child = container . getFirst ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var children = container . getAll ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check. var amount = container . count ( property , value , startIndex , endIndex ); // value: the value to test the property against. Must pass a strict (`===`) comparison check.","title":"Get child"},{"location":"container/#sort-children","text":"container . sort ( property ); container . sort ( property , function ( childA , childB ){ return 0 ; // 0, 1, -1 });","title":"Sort children"},{"location":"container/#remove-child","text":"container . remove ( child ); // container.remove(child, true); // remove child object and destroy it container . removeAt ( index ); // container.removeAt(index, true); // remove child object and destroy it container . removeBetween ( startIndex , endIndex ); // container.removeBetween(startIndex, endIndex, true); // remove children objects and destroy them container . removeAll (); // container.removeAll(true); // remove all children objects and destroy them","title":"Remove child"},{"location":"container/#replace-child","text":"container . replace ( oldChild , newChild ); // container.replace(oldChild, newChild, true); // destroy oldChild","title":"Replace child"},{"location":"container/#order-of-child","text":"container . moveTo ( child , index ); container . bringToTop ( child ); container . sendToBack ( child ); container . moveUp ( child ); container . moveDown ( child ); container . swap ( child1 , child2 ); container . reverse (); container . shuffle ();","title":"Order of child"},{"location":"container/#set-properties_1","text":"container . setAll ( property , value , startIndex , endIndex );","title":"Set properties"},{"location":"container/#for-each-child","text":"Iterate current children list container . iterate ( callback ); // container.iterate(callback, context); // container.iterate(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {}; Iterate a copy of current children list container . each ( callback ); // container.each(callback, context); // container.each(callback, context, arg0, arg1, ...); // var callback = function(child, arg0, arg1, ...) {};","title":"For each child"},{"location":"container/#compare-with-group-object","text":"Container and group objects are all have a children list. Container has position, angle, alpha, visible, ...etc, but group does not have. Container controls properties of children (position, angle, alpha, visible, ...etc), but group won't. A game object could be added to many group, but it only could be added to a container ( exclusive mode).","title":"Compare with group object"},{"location":"containerlite/","text":"Introduction \u00b6 Control the position and angle of children game objects. It is inspired from Ziao/phaser3-interim-containers . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexContainerLitePlugin' , plugin : ContainerLitePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add container object \u00b6 var container = scene . add . rexContainerLite ( x , y ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height); or var container = scene . add . rexContainerLite ( x , y , children ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height, children); Add container from JSON var container = scene . make . rexContainerLite ({ x : 0 , y : 0 , width : 1 , height : 1 , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //} }); Custom class \u00b6 Define class class MyContainer extends ContainerLite { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , width , height , children ); Destroy \u00b6 container . destroy (); Also destroy all children. Other properties \u00b6 This container game object inherits from Zone . Add(pin) child \u00b6 Add(pin) a game obejct to container container . add ( child ); // child: a game object Or add(pin) children container . addMultiple ( children ); // children: an array of game objects // container.add(children); // children: an array of game objects These world properties of children will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Note Position of child is the world position, i.e. position of child won't be changed when adding to container initially. 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. This behavior is different from official container , which using related position of child when adding to container. 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. Remove child \u00b6 Remove a child container . remove ( child ); // container.remove(child, destroyChild); child : Game object destroyChild : Set true to destroy child. Default is false . Remove all children container . clear (); // container.clear(destroyChild); Get children \u00b6 Get children in this container-lite var gameObjects = container . getChildren (); Get all children under this container-lite (nested) var gameObjects = container . getAllChildren (); Draw on render texture rt . draw ( container . getAllChildren ()); Ignored in camera camera . ignore ( container . getAllChildren ()); Exist \u00b6 Return true if child is under this container-lite (nested). var hasChild = container . contains ( child ); Children group \u00b6 var group = container . children ; Reference Group Set properties of child \u00b6 Position \u00b6 // child.x = x; // child.y = y; container . resetChildPositionState ( child ); or container . setChildPosition ( child , x , y ); Visible \u00b6 // child.visible = visible; container . resetChildVisibleState ( child ); or container . setChildVisible ( child , visible ); Alpha \u00b6 // child.child = child; container . resetChildAlphaState ( child ); or container . setChildAlpha ( child , alpha ); Local state of child \u00b6 Get local state var localState = container . getLocalState ( child ); or var localState = child . rexContainer ; Properties of localState x , y rotation scaleX , scaleY visible alpha Change local state of child \u00b6 Local position container . setChildLocalPosition ( child , x , y ); Depth \u00b6 Get depth of container var depth = container . depth ; Set depth of container and all children container . setDepth ( value ); Swap depth with another container containerA . swapDepth ( containerB ); Increase of container and all children container . incDepth ( value ); Mask \u00b6 Assign mask object to children container . setMask ( mask ); // container.mask = mask; Remove mask object of children container . clearMask (); Scroll factor \u00b6 Set scroll factor to children container . setScrollFactor ( x , y ); Compare with Official Container \u00b6 Nested container : Container : Feature of nested container will be dropped after v3.12. Container-Lite : Support nested container. Position/anlge/scale of a child object : Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale. Container-Lite : World position/anlge/scale. Updating period Container : Re-calculate position/anlge/scale of each child every render. Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale. Mask Container : It has mask property, and it could become a mask object. Container-Lite : It has mask property, but it could not become a mask object.","title":"Container Lite"},{"location":"containerlite/#introduction","text":"Control the position and angle of children game objects. It is inspired from Ziao/phaser3-interim-containers . Author: Rex Game object","title":"Introduction"},{"location":"containerlite/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"containerlite/#usage","text":"Sample code","title":"Usage"},{"location":"containerlite/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexContainerLitePlugin' , plugin : ContainerLitePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"containerlite/#add-container-object","text":"var container = scene . add . rexContainerLite ( x , y ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height); or var container = scene . add . rexContainerLite ( x , y , children ); // width = 1, height = 1 // var container = scene.add.rexContainerLite(x, y, width, height, children); Add container from JSON var container = scene . make . rexContainerLite ({ x : 0 , y : 0 , width : 1 , height : 1 , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //} });","title":"Add container object"},{"location":"containerlite/#custom-class","text":"Define class class MyContainer extends ContainerLite { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var container = new MyContainer ( scene , x , y , width , height , children );","title":"Custom class"},{"location":"containerlite/#destroy","text":"container . destroy (); Also destroy all children.","title":"Destroy"},{"location":"containerlite/#other-properties","text":"This container game object inherits from Zone .","title":"Other properties"},{"location":"containerlite/#addpin-child","text":"Add(pin) a game obejct to container container . add ( child ); // child: a game object Or add(pin) children container . addMultiple ( children ); // children: an array of game objects // container.add(children); // children: an array of game objects These world properties of children will be changed with container. Position/Angle/Scale Visible Alpha Scroll factor Mask Note Position of child is the world position, i.e. position of child won't be changed when adding to container initially. 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. This behavior is different from official container , which using related position of child when adding to container. 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.","title":"Add(pin) child"},{"location":"containerlite/#remove-child","text":"Remove a child container . remove ( child ); // container.remove(child, destroyChild); child : Game object destroyChild : Set true to destroy child. Default is false . Remove all children container . clear (); // container.clear(destroyChild);","title":"Remove child"},{"location":"containerlite/#get-children","text":"Get children in this container-lite var gameObjects = container . getChildren (); Get all children under this container-lite (nested) var gameObjects = container . getAllChildren (); Draw on render texture rt . draw ( container . getAllChildren ()); Ignored in camera camera . ignore ( container . getAllChildren ());","title":"Get children"},{"location":"containerlite/#exist","text":"Return true if child is under this container-lite (nested). var hasChild = container . contains ( child );","title":"Exist"},{"location":"containerlite/#children-group","text":"var group = container . children ; Reference Group","title":"Children group"},{"location":"containerlite/#set-properties-of-child","text":"","title":"Set properties of child"},{"location":"containerlite/#position","text":"// child.x = x; // child.y = y; container . resetChildPositionState ( child ); or container . setChildPosition ( child , x , y );","title":"Position"},{"location":"containerlite/#visible","text":"// child.visible = visible; container . resetChildVisibleState ( child ); or container . setChildVisible ( child , visible );","title":"Visible"},{"location":"containerlite/#alpha","text":"// child.child = child; container . resetChildAlphaState ( child ); or container . setChildAlpha ( child , alpha );","title":"Alpha"},{"location":"containerlite/#local-state-of-child","text":"Get local state var localState = container . getLocalState ( child ); or var localState = child . rexContainer ; Properties of localState x , y rotation scaleX , scaleY visible alpha","title":"Local state of child"},{"location":"containerlite/#change-local-state-of-child","text":"Local position container . setChildLocalPosition ( child , x , y );","title":"Change local state of child"},{"location":"containerlite/#depth","text":"Get depth of container var depth = container . depth ; Set depth of container and all children container . setDepth ( value ); Swap depth with another container containerA . swapDepth ( containerB ); Increase of container and all children container . incDepth ( value );","title":"Depth"},{"location":"containerlite/#mask","text":"Assign mask object to children container . setMask ( mask ); // container.mask = mask; Remove mask object of children container . clearMask ();","title":"Mask"},{"location":"containerlite/#scroll-factor","text":"Set scroll factor to children container . setScrollFactor ( x , y );","title":"Scroll factor"},{"location":"containerlite/#compare-with-official-container","text":"Nested container : Container : Feature of nested container will be dropped after v3.12. Container-Lite : Support nested container. Position/anlge/scale of a child object : Container : Local position/anlge/scale, responding to parent container, not a world position/anlge/scale. Container-Lite : World position/anlge/scale. Updating period Container : Re-calculate position/anlge/scale of each child every render. Container-Lite: Re-calculate position/anlge/scale of each child when parent container changes position/anlge/scale. Mask Container : It has mask property, and it could become a mask object. Container-Lite : It has mask property, but it could not become a mask object.","title":"Compare with Official Container"},{"location":"create-number-array/","text":"Introduction \u00b6 Create an array representing the range of numbers, built-in method of phaser. Author: Richard Davey Usage \u00b6 Create number array \u00b6 Create an array representing the range of numbers (usually integers), between, and inclusive of, the given start and end arguments. var arr = Phaser . Utils . Array . NumberArray ( start , end ); For example, var arr = Phaser . Utils . Array . NumberArray ( 2 , 4 ); // arr = [2, 3, 4] Create number array with step \u00b6 Create an array of numbers (positive and/or negative) progressing from start up to but not including end by advancing by step . var arr = Phaser . Utils . Array . NumberArray ( start , end , step ); For example, var arr = Phaser . Utils . Array . NumberArrayStep ( 0 , 20 , 5 ); // arr = [0, 5, 10, 15] Create prefix-number-suffix string array \u00b6 var arr = Phaser . Utils . Array . NumberArray ( start , end , prefix , suffix ); For example, var arr = Phaser . Utils . Array . NumberArray ( 5 , 7 , 'HD-' , '.png' ); // arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']","title":"Number array"},{"location":"create-number-array/#introduction","text":"Create an array representing the range of numbers, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"create-number-array/#usage","text":"","title":"Usage"},{"location":"create-number-array/#create-number-array","text":"Create an array representing the range of numbers (usually integers), between, and inclusive of, the given start and end arguments. var arr = Phaser . Utils . Array . NumberArray ( start , end ); For example, var arr = Phaser . Utils . Array . NumberArray ( 2 , 4 ); // arr = [2, 3, 4]","title":"Create number array"},{"location":"create-number-array/#create-number-array-with-step","text":"Create an array of numbers (positive and/or negative) progressing from start up to but not including end by advancing by step . var arr = Phaser . Utils . Array . NumberArray ( start , end , step ); For example, var arr = Phaser . Utils . Array . NumberArrayStep ( 0 , 20 , 5 ); // arr = [0, 5, 10, 15]","title":"Create number array with step"},{"location":"create-number-array/#create-prefix-number-suffix-string-array","text":"var arr = Phaser . Utils . Array . NumberArray ( start , end , prefix , suffix ); For example, var arr = Phaser . Utils . Array . NumberArray ( 5 , 7 , 'HD-' , '.png' ); // arr = ['HD-5.png', 'HD-6.png', 'HD-7.png']","title":"Create prefix-number-suffix string array"},{"location":"csvscenario/","text":"Introduction \u00b6 Run script in csv format. Csv could be edited by excel or google document. Author: Rex Member of scene Source code \u00b6 Link Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCSVScenario from './plugins/csvscenario.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CSVScenarioPlugin from './plugins/csvscenario-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVScenario' , plugin : CSVScenarioPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var scenario = scene . plugins . get ( 'rexCSVScenario' ). add ( scene ); Load csv script \u00b6 scenario . load ( csvString , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // prefix: /^#([a-zA-Z]+)/ // argsConvert: true, // argsConvertScope: undefined }) timeUnit: time-unit of dt, for delay-execution 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second prefix: regex of picking control instructions argsConvert: a callback to convert parameters of run-custom-function , or true to use default convert function argsConvertScope: scope of argsConvert Start running instructions \u00b6 scenario . start ({ // label: '', // offset: 0 }) label : Go to the label and execute. '' label is starting from 1 st instruction offset : Offset time Events \u00b6 Complete scenario . on ( 'complete' , function ( scenario ){}); Label has changed scenario . on ( 'labelchange' , function (){}); Dump execution log scenario . on ( 'log' , function (){}); Notify error scenario . on ( 'error' , function (){}); Types of instructions \u00b6 Each row in csv table is an instruction. Run custom function \u00b6 Run custom function of scope , which passed from scenario.load(...) Format: -,fnName,param0,param1,... 1 st column of instruction: - Parameters will be converted to number, boolean, null, or string by default. Delay execution \u00b6 Run custom function after a delay. Format: time,fnName,param0,param1,... 1 st column of instruction: a number time-unit of delay is set from scenario.load(...) Parameters will be converted to number, boolean, null, or string by default. Wait then execution \u00b6 Run custom function until scenario.continue(eventName) Format: eventName,fnName,param0,param1,... 1 st column of instruction: not a number, not a string start from # Execution will be hang until scenario.continue(eventName) is called Parameters will be converted to number, boolean, null, or string by default. Task \u00b6 Sample code Scenario will be paused if custom function return an event emitter , resumed when that evnt emitter fires complete event. See also: Sequence Label \u00b6 Sample code A label for #GOTO or #IF instructions. Format: #LABEL,label 1 st column of instruction: #LABEL , case insensitive. Label '' is reserved, don't use '' for label name. Example: A label named 'AA' #LABEL,AA Exit \u00b6 Exit current execution. Format: #EXIT 1 st column of instruction: #EXIT , case insensitive. Goto \u00b6 Sample code Go to label and execute. Format: #GOTO,label 1 st column of instruction: #GOTO , case insensitive. An error event will be fired if label is not found. Example: Goto label 'AA' #GOTO,AA If-goto \u00b6 Sample code Go to trueLabel if condition is true, otherwise go to falseLabel . Format: #IF,condition,trueLabel,falseLabel 1 st column of instruction: #IF , case insensitive. conditon: boolean equation this is the scope passed from scenario.load(...) trueLabel/falseLabel: go to this label if condition is true/false run next instruction if label is '' An error event will be fired if label is not found. Example: Goto label 'AA' if (this.coin > 100), else run next instruction #IF,this.coin > 100,AA Wait \u00b6 Run next instruction after a delay time, or scenario.continue(eventName) . Format: #WAIT,time #WAIT,eventName 1 st column of instruction: #WAIT , case insensitive. 2 nd colume of instruction: a number: a delay time time-unit of delay is set from scenario.load(...) a string: an event name for scenario.continue(eventName) Example: Wait 1 time-unit #WAIT,1 Wait until 'click' #WAIT,click scenario . continue ( 'click' ) Other methods \u00b6 Pause \u00b6 scenario . pause () Resume \u00b6 scenario . resume ()","title":"CSV scenario"},{"location":"csvscenario/#introduction","text":"Run script in csv format. Csv could be edited by excel or google document. Author: Rex Member of scene","title":"Introduction"},{"location":"csvscenario/#source-code","text":"Link","title":"Source code"},{"location":"csvscenario/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvscenario/#import-class","text":"import rexCSVScenario from './plugins/csvscenario.js' ;","title":"Import class"},{"location":"csvscenario/#install-global-plugin","text":"Install plugin in configuration of game import CSVScenarioPlugin from './plugins/csvscenario-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVScenario' , plugin : CSVScenarioPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvscenario/#create-instance","text":"var scenario = scene . plugins . get ( 'rexCSVScenario' ). add ( scene );","title":"Create instance"},{"location":"csvscenario/#load-csv-script","text":"scenario . load ( csvString , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // prefix: /^#([a-zA-Z]+)/ // argsConvert: true, // argsConvertScope: undefined }) timeUnit: time-unit of dt, for delay-execution 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second prefix: regex of picking control instructions argsConvert: a callback to convert parameters of run-custom-function , or true to use default convert function argsConvertScope: scope of argsConvert","title":"Load csv script"},{"location":"csvscenario/#start-running-instructions","text":"scenario . start ({ // label: '', // offset: 0 }) label : Go to the label and execute. '' label is starting from 1 st instruction offset : Offset time","title":"Start running instructions"},{"location":"csvscenario/#events","text":"Complete scenario . on ( 'complete' , function ( scenario ){}); Label has changed scenario . on ( 'labelchange' , function (){}); Dump execution log scenario . on ( 'log' , function (){}); Notify error scenario . on ( 'error' , function (){});","title":"Events"},{"location":"csvscenario/#types-of-instructions","text":"Each row in csv table is an instruction.","title":"Types of instructions"},{"location":"csvscenario/#run-custom-function","text":"Run custom function of scope , which passed from scenario.load(...) Format: -,fnName,param0,param1,... 1 st column of instruction: - Parameters will be converted to number, boolean, null, or string by default.","title":"Run custom function"},{"location":"csvscenario/#delay-execution","text":"Run custom function after a delay. Format: time,fnName,param0,param1,... 1 st column of instruction: a number time-unit of delay is set from scenario.load(...) Parameters will be converted to number, boolean, null, or string by default.","title":"Delay execution"},{"location":"csvscenario/#wait-then-execution","text":"Run custom function until scenario.continue(eventName) Format: eventName,fnName,param0,param1,... 1 st column of instruction: not a number, not a string start from # Execution will be hang until scenario.continue(eventName) is called Parameters will be converted to number, boolean, null, or string by default.","title":"Wait then execution"},{"location":"csvscenario/#task","text":"Sample code Scenario will be paused if custom function return an event emitter , resumed when that evnt emitter fires complete event. See also: Sequence","title":"Task"},{"location":"csvscenario/#label","text":"Sample code A label for #GOTO or #IF instructions. Format: #LABEL,label 1 st column of instruction: #LABEL , case insensitive. Label '' is reserved, don't use '' for label name. Example: A label named 'AA' #LABEL,AA","title":"Label"},{"location":"csvscenario/#exit","text":"Exit current execution. Format: #EXIT 1 st column of instruction: #EXIT , case insensitive.","title":"Exit"},{"location":"csvscenario/#goto","text":"Sample code Go to label and execute. Format: #GOTO,label 1 st column of instruction: #GOTO , case insensitive. An error event will be fired if label is not found. Example: Goto label 'AA' #GOTO,AA","title":"Goto"},{"location":"csvscenario/#if-goto","text":"Sample code Go to trueLabel if condition is true, otherwise go to falseLabel . Format: #IF,condition,trueLabel,falseLabel 1 st column of instruction: #IF , case insensitive. conditon: boolean equation this is the scope passed from scenario.load(...) trueLabel/falseLabel: go to this label if condition is true/false run next instruction if label is '' An error event will be fired if label is not found. Example: Goto label 'AA' if (this.coin > 100), else run next instruction #IF,this.coin > 100,AA","title":"If-goto"},{"location":"csvscenario/#wait","text":"Run next instruction after a delay time, or scenario.continue(eventName) . Format: #WAIT,time #WAIT,eventName 1 st column of instruction: #WAIT , case insensitive. 2 nd colume of instruction: a number: a delay time time-unit of delay is set from scenario.load(...) a string: an event name for scenario.continue(eventName) Example: Wait 1 time-unit #WAIT,1 Wait until 'click' #WAIT,click scenario . continue ( 'click' )","title":"Wait"},{"location":"csvscenario/#other-methods","text":"","title":"Other methods"},{"location":"csvscenario/#pause","text":"scenario . pause ()","title":"Pause"},{"location":"csvscenario/#resume","text":"scenario . resume ()","title":"Resume"},{"location":"csvtoarray/","text":"Introduction \u00b6 Generate array from csv string. Reference: Papa Parse Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCSVToArray from './plugins/csvtoarray.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CSVToArrayPlugin from './plugins/csvtoarray-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVToArray' , plugin : CSVToArrayPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Convert csv \u00b6 var arr = scene . plugins . get ( 'rexCSVToArray' ). convert ( csvString , { // delimiter: ',', // convert: true }); Values will be converted to number , boolean , null , or string , if convert is true .","title":"CSV to array"},{"location":"csvtoarray/#introduction","text":"Generate array from csv string. Reference: Papa Parse Method only","title":"Introduction"},{"location":"csvtoarray/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"csvtoarray/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvtoarray/#import-class","text":"import rexCSVToArray from './plugins/csvtoarray.js' ;","title":"Import class"},{"location":"csvtoarray/#install-global-plugin","text":"Install plugin in configuration of game import CSVToArrayPlugin from './plugins/csvtoarray-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCSVToArray' , plugin : CSVToArrayPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvtoarray/#convert-csv","text":"var arr = scene . plugins . get ( 'rexCSVToArray' ). convert ( csvString , { // delimiter: ',', // convert: true }); Values will be converted to number , boolean , null , or string , if convert is true .","title":"Convert csv"},{"location":"csvtohashtable/","text":"Introduction \u00b6 Hash table indexed by (col-key, row-key) from csv string. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHashTable from './plugins/csvtohashtable.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HashTablePlugin from './plugins/csvtohashtable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHashTable' , plugin : HashTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var table = scene . plugins . get ( 'rexHashTable' ). add (); Load table from csv string \u00b6 table . loadCSV ( csvString , { // delimiter: ',', // convert: true // convertScope: undefined }); For exameple, csv string name hp mp Rex 100 20 Alice 300 40 name,hp,mp Rex,100,20 Alice,300,40 will be converted to { \"Alice\" : { \"name\" : \"Alice\" , \"hp\" : 300 , \"mp\" : 40 }, \"Rex\" : { \"name\" : \"Rex\" , \"hp\" : 100 , \"mp\" : 20 } } Then get value by var value = table . get ( 'Rex' , 'hp' ); Convert value type \u00b6 Values will be converted to number , boolean , null , or string , if convert is true , or assign your convert function by convert and convertScope when loading table ( table.loadCSV(...) ). var convertCallback = function ( table , rowKey , colKey , value ) { // value = ... return value ; }; Or uses these metheds to convert columns or rows. convert values in column table . convertCol ( colKey ); // colKey: a colKey, or an array of colKeys // table.convertCol(colKey, convertCallback, convertCallbackScope); convert values in row table . convertRow ( rowKey ); // rowKey: a rowKey, or an array of rowKeys // table.convertRow(rowKey, convertCallback, convertCallbackScope); Get value \u00b6 var val = table . get ( rowKey , colKey ); Set value \u00b6 table . set ( rowKey , colKey , value ); table . add ( rowKey , colKey , value ); // equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value); Has column/row key \u00b6 var hasRow = table . hasRowKey ( rowKey ); var hasCol = table . hasColKey ( colKey ); var hasCell = table . hasKey ( rowKey , colKey ); Value in column or row \u00b6 var existed = table . isValueInRol ( rowKey , data ); var existed = table . isValueInCol ( colKey , data ); Create table \u00b6 Clear table \u00b6 table . clear (); Append a column \u00b6 table . appendCol ( colKey , initValue ); // table.appendCol(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; }; Append a row \u00b6 table . appendRow ( colKey , initValue ); // table.appendRow(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; }; Remove a row \u00b6 table . removeRol ( colKey ); Remove a column \u00b6 table . removeCol ( colKey ); Sort column or row \u00b6 table . sortCol ( colKey , mode ); // table.sortCol(callback, scope); // sort column by callback table . sortRow ( rowKey , mode ); // table.sortRow(callback, scope); // sort column by callback Mode: 'ascending' , or 0 'descending' , or 1 'logical ascending' , or 2 'logical descending' , or 3 Sorting callback var callback = function ( rowKeyA , rowKeyB ) { return result ; // 1, -1, or 0 }; Retrieve columns or rows \u00b6 table . eachCol ( rowKey , callback , scope ); table . eachRow ( colKey , callback , scope ); Callback var callback = function ( table , rowKey , colKey , value ) { // ... };","title":"CSV to hash table"},{"location":"csvtohashtable/#introduction","text":"Hash table indexed by (col-key, row-key) from csv string. Author: Rex Member of scene","title":"Introduction"},{"location":"csvtohashtable/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"csvtohashtable/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"csvtohashtable/#import-class","text":"import rexHashTable from './plugins/csvtohashtable.js' ;","title":"Import class"},{"location":"csvtohashtable/#install-global-plugin","text":"Install plugin in configuration of game import HashTablePlugin from './plugins/csvtohashtable-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHashTable' , plugin : HashTablePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"csvtohashtable/#create-instance","text":"var table = scene . plugins . get ( 'rexHashTable' ). add ();","title":"Create instance"},{"location":"csvtohashtable/#load-table-from-csv-string","text":"table . loadCSV ( csvString , { // delimiter: ',', // convert: true // convertScope: undefined }); For exameple, csv string name hp mp Rex 100 20 Alice 300 40 name,hp,mp Rex,100,20 Alice,300,40 will be converted to { \"Alice\" : { \"name\" : \"Alice\" , \"hp\" : 300 , \"mp\" : 40 }, \"Rex\" : { \"name\" : \"Rex\" , \"hp\" : 100 , \"mp\" : 20 } } Then get value by var value = table . get ( 'Rex' , 'hp' );","title":"Load table from csv string"},{"location":"csvtohashtable/#convert-value-type","text":"Values will be converted to number , boolean , null , or string , if convert is true , or assign your convert function by convert and convertScope when loading table ( table.loadCSV(...) ). var convertCallback = function ( table , rowKey , colKey , value ) { // value = ... return value ; }; Or uses these metheds to convert columns or rows. convert values in column table . convertCol ( colKey ); // colKey: a colKey, or an array of colKeys // table.convertCol(colKey, convertCallback, convertCallbackScope); convert values in row table . convertRow ( rowKey ); // rowKey: a rowKey, or an array of rowKeys // table.convertRow(rowKey, convertCallback, convertCallbackScope);","title":"Convert value type"},{"location":"csvtohashtable/#get-value","text":"var val = table . get ( rowKey , colKey );","title":"Get value"},{"location":"csvtohashtable/#set-value","text":"table . set ( rowKey , colKey , value ); table . add ( rowKey , colKey , value ); // equal to table.set(rowKey, colKey, table.get(rowKey, colKey) + value);","title":"Set value"},{"location":"csvtohashtable/#has-columnrow-key","text":"var hasRow = table . hasRowKey ( rowKey ); var hasCol = table . hasColKey ( colKey ); var hasCell = table . hasKey ( rowKey , colKey );","title":"Has column/row key"},{"location":"csvtohashtable/#value-in-column-or-row","text":"var existed = table . isValueInRol ( rowKey , data ); var existed = table . isValueInCol ( colKey , data );","title":"Value in column or row"},{"location":"csvtohashtable/#create-table","text":"","title":"Create table"},{"location":"csvtohashtable/#clear-table","text":"table . clear ();","title":"Clear table"},{"location":"csvtohashtable/#append-a-column","text":"table . appendCol ( colKey , initValue ); // table.appendCol(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; };","title":"Append a column"},{"location":"csvtohashtable/#append-a-row","text":"table . appendRow ( colKey , initValue ); // table.appendRow(colKey, callback, scope); // get initValue from callback Callback var callback = function ( table , rowKey , colKey ) { // value = ... return value ; };","title":"Append a row"},{"location":"csvtohashtable/#remove-a-row","text":"table . removeRol ( colKey );","title":"Remove a row"},{"location":"csvtohashtable/#remove-a-column","text":"table . removeCol ( colKey );","title":"Remove a column"},{"location":"csvtohashtable/#sort-column-or-row","text":"table . sortCol ( colKey , mode ); // table.sortCol(callback, scope); // sort column by callback table . sortRow ( rowKey , mode ); // table.sortRow(callback, scope); // sort column by callback Mode: 'ascending' , or 0 'descending' , or 1 'logical ascending' , or 2 'logical descending' , or 3 Sorting callback var callback = function ( rowKeyA , rowKeyB ) { return result ; // 1, -1, or 0 };","title":"Sort column or row"},{"location":"csvtohashtable/#retrieve-columns-or-rows","text":"table . eachCol ( rowKey , callback , scope ); table . eachRow ( colKey , callback , scope ); Callback var callback = function ( table , rowKey , colKey , value ) { // ... };","title":"Retrieve columns or rows"},{"location":"cursor/","text":"Introduction \u00b6 Custom cursor, built-in feature of phaser. Author: Richard Davey Usage \u00b6 References: Cursor Using URL values for the cursor property Set default cursor \u00b6 scene . input . setDefaultCursor ( CSSString ); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor of a Game Object \u00b6 Change cursor image when cursor is over that Game Object. gameObject . setInteractive ({ cursor : CSSString }); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor image directly after gameObject.setInteractive() . gameObject . input . cursor = CSSString ; // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Use pointer (hand cursor). gameObject . setInteractive ({ useHandCursor : true });","title":"Cursor"},{"location":"cursor/#introduction","text":"Custom cursor, built-in feature of phaser. Author: Richard Davey","title":"Introduction"},{"location":"cursor/#usage","text":"References: Cursor Using URL values for the cursor property","title":"Usage"},{"location":"cursor/#set-default-cursor","text":"scene . input . setDefaultCursor ( CSSString ); // CSSString: 'url(assets/input/cursors/sword.cur), pointer'","title":"Set default cursor"},{"location":"cursor/#set-cursor-of-a-game-object","text":"Change cursor image when cursor is over that Game Object. gameObject . setInteractive ({ cursor : CSSString }); // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Set cursor image directly after gameObject.setInteractive() . gameObject . input . cursor = CSSString ; // CSSString: 'url(assets/input/cursors/sword.cur), pointer' Use pointer (hand cursor). gameObject . setInteractive ({ useHandCursor : true });","title":"Set cursor of a Game Object"},{"location":"cursoratbound/","text":"Introduction \u00b6 Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexCursorAtBound from './plugins/cursoratbound.js' ; Install global plugin \u00b6 Install plugin in configuration of game import CursorAtBoundPlugin from './plugins/cursoratbound-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCursorAtBound' , plugin : CursorAtBoundPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var cursorAtBound = scene . plugins . get ( 'rexCursorAtBound' ). add ( scene , { // bounds: undefined, // sensitiveDistance: 20, }); bounds : A rectangle object \u311d or undefined (to use game window as rectangle object), for detecting the position of cursor. sensitiveDistance : A sensitive distance in pixels. Map position of cursor to state of cursor key Position x is between left bound and left bound + sensitive distance : left cursor key is pressed. Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed. Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed. Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed. State of cursor keys \u00b6 var cursorKeys = cursorAtBound . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = cursorAtBound . left ; var rightKeyDown = cursorAtBound . right ; var upKeyDown = cursorAtBound . up ; var downKeyDown = cursorAtBound . down ; var noKeyDown = cursorAtBound . noKey ; Destroy \u00b6 cursorAtBound . destroy ();","title":"Cursor at bound"},{"location":"cursoratbound/#introduction","text":"Map cursor-at-(left/right/top/botttom-)bound to (left/right/up/down) cursor key state. Author: Rex Member of scene","title":"Introduction"},{"location":"cursoratbound/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"cursoratbound/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"cursoratbound/#import-class","text":"import rexCursorAtBound from './plugins/cursoratbound.js' ;","title":"Import class"},{"location":"cursoratbound/#install-global-plugin","text":"Install plugin in configuration of game import CursorAtBoundPlugin from './plugins/cursoratbound-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexCursorAtBound' , plugin : CursorAtBoundPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"cursoratbound/#create-instance","text":"var cursorAtBound = scene . plugins . get ( 'rexCursorAtBound' ). add ( scene , { // bounds: undefined, // sensitiveDistance: 20, }); bounds : A rectangle object \u311d or undefined (to use game window as rectangle object), for detecting the position of cursor. sensitiveDistance : A sensitive distance in pixels. Map position of cursor to state of cursor key Position x is between left bound and left bound + sensitive distance : left cursor key is pressed. Position x is between right bound and right bound - sensitive distance : Right cursor key is pressed. Position y is between top bound and top bound + sensitive distance : Up cursor key is pressed. Position y is between bottom bound and bottom bound - sensitive distance : Down cursor key is pressed.","title":"Create instance"},{"location":"cursoratbound/#state-of-cursor-keys","text":"var cursorKeys = cursorAtBound . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = cursorAtBound . left ; var rightKeyDown = cursorAtBound . right ; var upKeyDown = cursorAtBound . up ; var downKeyDown = cursorAtBound . down ; var noKeyDown = cursorAtBound . noKey ;","title":"State of cursor keys"},{"location":"cursoratbound/#destroy","text":"cursorAtBound . destroy ();","title":"Destroy"},{"location":"datamanager/","text":"Introduction \u00b6 Store data in key-value pairs, built-inobject of phaser. Author: Richard Davey Usage \u00b6 Write \u00b6 Set value \u00b6 parent . data . set ( key , value ); Set values \u00b6 parent . data . set ( data ); // data: {key:value, ...} Merge values \u00b6 parent . data . merge ( data ); // data: {key:value, ...} parent . data . merge ( data , false ); // won't overwrite existed keys Events \u00b6 Fires setdata event when a value is first set. parent . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Fires changedata , and changedata- + key events when a value is set that already exists. parent . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); parent . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); Read \u00b6 Get value \u00b6 var value = parent . data . get ( key ); Get values \u00b6 var values = parent . data . get ( keys ); // values: [value, value, ...], keys: [key, key, ...] Get all values \u00b6 var allValues = parent . data . getAll (); // return a copy of data Query \u00b6 Using string.match() to pick matched keys. var result = parent . data . query ( rgExp ); Remove \u00b6 Remove key \u00b6 parent . data . remove ( key ); Remove keys \u00b6 parent . data . remove ( keys ); // keys: [key, key, ...] Pop key \u00b6 var value = parent . data . pop ( key ); Get and remove that key. Events \u00b6 Fires removedata event when a key is removed. parent . data . events . on ( 'removedata' , function ( parent , key , value ){ /* ... */ }); Freeze \u00b6 var isFrozen = parent . data . freeze ; parent . data . freeze = true ; No changes can be written to it. Has key \u00b6 var hasKey = parent . data . has ( key ); For each key \u00b6 parent . data . each ( function ( parent , key , value ){ /* ... */ }, scope ); Count of data \u00b6 var cnt = parent . data . count ; Reset \u00b6 Reset status and clear all keys. parent . data . reset ()","title":"Built-in data"},{"location":"datamanager/#introduction","text":"Store data in key-value pairs, built-inobject of phaser. Author: Richard Davey","title":"Introduction"},{"location":"datamanager/#usage","text":"","title":"Usage"},{"location":"datamanager/#write","text":"","title":"Write"},{"location":"datamanager/#set-value","text":"parent . data . set ( key , value );","title":"Set value"},{"location":"datamanager/#set-values","text":"parent . data . set ( data ); // data: {key:value, ...}","title":"Set values"},{"location":"datamanager/#merge-values","text":"parent . data . merge ( data ); // data: {key:value, ...} parent . data . merge ( data , false ); // won't overwrite existed keys","title":"Merge values"},{"location":"datamanager/#events","text":"Fires setdata event when a value is first set. parent . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Fires changedata , and changedata- + key events when a value is set that already exists. parent . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); parent . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ });","title":"Events"},{"location":"datamanager/#read","text":"","title":"Read"},{"location":"datamanager/#get-value","text":"var value = parent . data . get ( key );","title":"Get value"},{"location":"datamanager/#get-values","text":"var values = parent . data . get ( keys ); // values: [value, value, ...], keys: [key, key, ...]","title":"Get values"},{"location":"datamanager/#get-all-values","text":"var allValues = parent . data . getAll (); // return a copy of data","title":"Get all values"},{"location":"datamanager/#query","text":"Using string.match() to pick matched keys. var result = parent . data . query ( rgExp );","title":"Query"},{"location":"datamanager/#remove","text":"","title":"Remove"},{"location":"datamanager/#remove-key","text":"parent . data . remove ( key );","title":"Remove key"},{"location":"datamanager/#remove-keys","text":"parent . data . remove ( keys ); // keys: [key, key, ...]","title":"Remove keys"},{"location":"datamanager/#pop-key","text":"var value = parent . data . pop ( key ); Get and remove that key.","title":"Pop key"},{"location":"datamanager/#events_1","text":"Fires removedata event when a key is removed. parent . data . events . on ( 'removedata' , function ( parent , key , value ){ /* ... */ });","title":"Events"},{"location":"datamanager/#freeze","text":"var isFrozen = parent . data . freeze ; parent . data . freeze = true ; No changes can be written to it.","title":"Freeze"},{"location":"datamanager/#has-key","text":"var hasKey = parent . data . has ( key );","title":"Has key"},{"location":"datamanager/#for-each-key","text":"parent . data . each ( function ( parent , key , value ){ /* ... */ }, scope );","title":"For each key"},{"location":"datamanager/#count-of-data","text":"var cnt = parent . data . count ;","title":"Count of data"},{"location":"datamanager/#reset","text":"Reset status and clear all keys. parent . data . reset ()","title":"Reset"},{"location":"date/","text":"Introduction \u00b6 Get current date or unix-timestamp. Author: Built-in javascript function Usage \u00b6 Reference Create instance \u00b6 var d = new Date (); var d = new Date ( timestamp ); var d = new Date ( dateString ); var d = new Date ( year , month , day , hours , minutes , seconds , milliseconds ); Get date \u00b6 var year = d . getFullYear (); // returns the year var month = d . getMonth (); // returns the month (0-11) var date = d . getDate (); // returns the day of the month (1-31) var day = d . getDay (); // returns the day of the week var hour = d . getHours (); // returns the hour (0-23) var min = d . getMinutes (); // returns the minutes (0-59) var sec = d . getSeconds (); // returns the seconds (0-59) var ms = d . getMilliseconds (); // returns the milliseconds (0-999) Get unix-timestamp \u00b6 var timestamp = d . getTime ();; // unix-timestamp in milliseconds or var timestamp = Date . now ();; // unix-timestamp in milliseconds To string \u00b6 var s = d . toLocaleString (); // locale conventions var iso = d . toISOString (); // ISO standard","title":"Date"},{"location":"date/#introduction","text":"Get current date or unix-timestamp. Author: Built-in javascript function","title":"Introduction"},{"location":"date/#usage","text":"Reference","title":"Usage"},{"location":"date/#create-instance","text":"var d = new Date (); var d = new Date ( timestamp ); var d = new Date ( dateString ); var d = new Date ( year , month , day , hours , minutes , seconds , milliseconds );","title":"Create instance"},{"location":"date/#get-date","text":"var year = d . getFullYear (); // returns the year var month = d . getMonth (); // returns the month (0-11) var date = d . getDate (); // returns the day of the month (1-31) var day = d . getDay (); // returns the day of the week var hour = d . getHours (); // returns the hour (0-23) var min = d . getMinutes (); // returns the minutes (0-59) var sec = d . getSeconds (); // returns the seconds (0-59) var ms = d . getMilliseconds (); // returns the milliseconds (0-999)","title":"Get date"},{"location":"date/#get-unix-timestamp","text":"var timestamp = d . getTime ();; // unix-timestamp in milliseconds or var timestamp = Date . now ();; // unix-timestamp in milliseconds","title":"Get unix-timestamp"},{"location":"date/#to-string","text":"var s = d . toLocaleString (); // locale conventions var iso = d . toISOString (); // ISO standard","title":"To string"},{"location":"device/","text":"Introduction \u00b6 Get information of device, built-in properties of phaser. Author: Richard Davey Usage \u00b6 OS \u00b6 Platform scene . sys . game . device . os . android // Is running on android? scene . sys . game . device . os . chromeOS // Is running on chromeOS? scene . sys . game . device . os . cordova // Is the game running under Apache Cordova? scene . sys . game . device . os . crosswalk // Is the game running under the Intel Crosswalk XDK? scene . sys . game . device . os . desktop // Is running on a desktop? scene . sys . game . device . os . ejecta // Is the game running under Ejecta? scene . sys . game . device . os . electron // Is the game running under GitHub Electron? scene . sys . game . device . os . iOS // Is running on iOS? scene . sys . game . device . os . iPad // Is running on iPad? scene . sys . game . device . os . iPhone // Is running on iPhone? scene . sys . game . device . os . kindle // Is running on an Amazon Kindle? scene . sys . game . device . os . linux // Is running on linux? scene . sys . game . device . os . macOS // Is running on macOS? scene . sys . game . device . os . node // Is the game running under Node.js? scene . sys . game . device . os . nodeWebkit // Is the game running under Node-/Webkit? scene . sys . game . device . os . webApp // Set to true if running as a WebApp, i.e. within a WebView scene . sys . game . device . os . windows // Is running on windows? scene . sys . game . device . os . windowsPhone // Is running on a Windows Phone? Major version number of ios var version = scene . sys . game . device . os . iOSVersion ; Pixel-ratio of the host device var pixelRatio = scene . sys . game . device . os . pixelRatio ; Browser \u00b6 Platform scene . sys . game . device . browser . chrome // Is running in Chrome? scene . sys . game . device . browser . edge // Is running in Microsoft Edge browser? scene . sys . game . device . browser . firefox // Is running in Firefox? scene . sys . game . device . browser . ie // Is running in Internet Explorer 11 or less (not Edge)? scene . sys . game . device . browser . mobileSafari // Is running in Mobile Safari? scene . sys . game . device . browser . opera // Is running in Opera? scene . sys . game . device . browser . safari // Is running in Safari? scene . sys . game . device . browser . silk // Is running in the Silk browser (as used on the Amazon Kindle)? scene . sys . game . device . browser . trident // Is running a Trident version of Internet Explorer (IE11+)? Version var version = scene . sys . game . device . browser . chromeVersion ; var version = scene . sys . game . device . browser . firefoxVersion ; var version = scene . sys . game . device . browser . ieVersion ; var version = scene . sys . game . device . browser . safariVersion ; var version = scene . sys . game . device . browser . tridentVersion ; Video \u00b6 var h264Video = scene . sys . game . device . video . h264 ; // Can this device play h264 mp4 video files? var hlsVideo = scene . sys . game . device . video . hls ; // Can this device play hls video files? var mp4Video = scene . sys . game . device . video . mp4 ; // Can this device play h264 mp4 video files? var oggVideo = scene . sys . game . device . video . ogg ; // Can this device play ogg video files? var vp9Video = scene . sys . game . device . video . vp9 ; // Can this device play vp9 video files? var webmVideo = scene . sys . game . device . video . webm ; // Can this device play webm video files?","title":"Device"},{"location":"device/#introduction","text":"Get information of device, built-in properties of phaser. Author: Richard Davey","title":"Introduction"},{"location":"device/#usage","text":"","title":"Usage"},{"location":"device/#os","text":"Platform scene . sys . game . device . os . android // Is running on android? scene . sys . game . device . os . chromeOS // Is running on chromeOS? scene . sys . game . device . os . cordova // Is the game running under Apache Cordova? scene . sys . game . device . os . crosswalk // Is the game running under the Intel Crosswalk XDK? scene . sys . game . device . os . desktop // Is running on a desktop? scene . sys . game . device . os . ejecta // Is the game running under Ejecta? scene . sys . game . device . os . electron // Is the game running under GitHub Electron? scene . sys . game . device . os . iOS // Is running on iOS? scene . sys . game . device . os . iPad // Is running on iPad? scene . sys . game . device . os . iPhone // Is running on iPhone? scene . sys . game . device . os . kindle // Is running on an Amazon Kindle? scene . sys . game . device . os . linux // Is running on linux? scene . sys . game . device . os . macOS // Is running on macOS? scene . sys . game . device . os . node // Is the game running under Node.js? scene . sys . game . device . os . nodeWebkit // Is the game running under Node-/Webkit? scene . sys . game . device . os . webApp // Set to true if running as a WebApp, i.e. within a WebView scene . sys . game . device . os . windows // Is running on windows? scene . sys . game . device . os . windowsPhone // Is running on a Windows Phone? Major version number of ios var version = scene . sys . game . device . os . iOSVersion ; Pixel-ratio of the host device var pixelRatio = scene . sys . game . device . os . pixelRatio ;","title":"OS"},{"location":"device/#browser","text":"Platform scene . sys . game . device . browser . chrome // Is running in Chrome? scene . sys . game . device . browser . edge // Is running in Microsoft Edge browser? scene . sys . game . device . browser . firefox // Is running in Firefox? scene . sys . game . device . browser . ie // Is running in Internet Explorer 11 or less (not Edge)? scene . sys . game . device . browser . mobileSafari // Is running in Mobile Safari? scene . sys . game . device . browser . opera // Is running in Opera? scene . sys . game . device . browser . safari // Is running in Safari? scene . sys . game . device . browser . silk // Is running in the Silk browser (as used on the Amazon Kindle)? scene . sys . game . device . browser . trident // Is running a Trident version of Internet Explorer (IE11+)? Version var version = scene . sys . game . device . browser . chromeVersion ; var version = scene . sys . game . device . browser . firefoxVersion ; var version = scene . sys . game . device . browser . ieVersion ; var version = scene . sys . game . device . browser . safariVersion ; var version = scene . sys . game . device . browser . tridentVersion ;","title":"Browser"},{"location":"device/#video","text":"var h264Video = scene . sys . game . device . video . h264 ; // Can this device play h264 mp4 video files? var hlsVideo = scene . sys . game . device . video . hls ; // Can this device play hls video files? var mp4Video = scene . sys . game . device . video . mp4 ; // Can this device play h264 mp4 video files? var oggVideo = scene . sys . game . device . video . ogg ; // Can this device play ogg video files? var vp9Video = scene . sys . game . device . video . vp9 ; // Can this device play vp9 video files? var webmVideo = scene . sys . game . device . video . webm ; // Can this device play webm video files?","title":"Video"},{"location":"dialog-quest/","text":"Introduction \u00b6 Flow control of question manager with a dialog . Author: Rex Template Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Create dialog-quest object \u00b6 var quest = new DialogQuest ({ dialog : dialog , questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : true , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); dialog : A dialog game object. UI plugin does not included in this template , install it before creating a dialog game object. Reuse/update dialog game object for each question. The number of choice buttons should be equal or larger than the maximun number of options. Other parameters : See quest Flow chart \u00b6 graph TB Start[\"quest.start()\"] --> EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)<br>----<br>Update each choice button via question.option[i]\"] EventUpdateChoice --> EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)<br>----<br>Update dialog, action button via question\"] EventUpdateDialog --> EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)<br>----<br>Click any choice button\"] EventClickChoice --> EventClickAction[\"quest.emit('click-action', action, dialog, quest)<br>----<br>Click any action button\"] EventClickAction --> IsLast{\"quest.isLast()\"} EventClickChoice --> IsLast IsLast --> |No| Next[\"quest.next()\"] IsLast --> |Yes| Complete(\"Complete\") Next --> EventUpdateChoice Events \u00b6 Update dialog events Update each choice button via question.option[i] quest . on ( 'update-choice' , function ( choice , option , quest ){ }, scope ); choice : Choice button game object. Unused choice button game object will be hideen. option : Option object. quest : Quest object. Update dialog, action buttos via question quest . on ( 'update-dialog' , function ( dialog , question , quest ){ }, scope ); dialog : Dialog game object. Call dialog.layout() if needs. question : Question object. quest : Quest object. Button clicking events Click choice button quest . on ( 'click-choice' , function ( choice , dialog , quest ) { }, scope ); choice : Clicked choice button game object. dialog : Dialog game object. quest : Quest object. Click choice button quest . on ( 'click-action' , function ( action , dialog , quest ) { }, scope ); choice : Clicked action button game object. dialog : Dialog game object. quest : Quest object. Quest methods \u00b6 Start quest quest . start (); Next quest quest . next (); or quest . next ( key ); Is last question var isLast = quest . isLast (); Private data methods \u00b6 Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Dialog-quest"},{"location":"dialog-quest/#introduction","text":"Flow control of question manager with a dialog . Author: Rex Template","title":"Introduction"},{"location":"dialog-quest/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"dialog-quest/#usage","text":"Sample code","title":"Usage"},{"location":"dialog-quest/#create-dialog-quest-object","text":"var quest = new DialogQuest ({ dialog : dialog , questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : true , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); dialog : A dialog game object. UI plugin does not included in this template , install it before creating a dialog game object. Reuse/update dialog game object for each question. The number of choice buttons should be equal or larger than the maximun number of options. Other parameters : See quest","title":"Create dialog-quest object"},{"location":"dialog-quest/#flow-chart","text":"graph TB Start[\"quest.start()\"] --> EventUpdateChoice[\"quest.emit('update-choice', choice, option, quest)<br>----<br>Update each choice button via question.option[i]\"] EventUpdateChoice --> EventUpdateDialog[\"quest.emit('update-dialog', dialog, question, quest)<br>----<br>Update dialog, action button via question\"] EventUpdateDialog --> EventClickChoice[\"quest.emit('click-choice', choice, dialog, quest)<br>----<br>Click any choice button\"] EventClickChoice --> EventClickAction[\"quest.emit('click-action', action, dialog, quest)<br>----<br>Click any action button\"] EventClickAction --> IsLast{\"quest.isLast()\"} EventClickChoice --> IsLast IsLast --> |No| Next[\"quest.next()\"] IsLast --> |Yes| Complete(\"Complete\") Next --> EventUpdateChoice","title":"Flow chart"},{"location":"dialog-quest/#events","text":"Update dialog events Update each choice button via question.option[i] quest . on ( 'update-choice' , function ( choice , option , quest ){ }, scope ); choice : Choice button game object. Unused choice button game object will be hideen. option : Option object. quest : Quest object. Update dialog, action buttos via question quest . on ( 'update-dialog' , function ( dialog , question , quest ){ }, scope ); dialog : Dialog game object. Call dialog.layout() if needs. question : Question object. quest : Quest object. Button clicking events Click choice button quest . on ( 'click-choice' , function ( choice , dialog , quest ) { }, scope ); choice : Clicked choice button game object. dialog : Dialog game object. quest : Quest object. Click choice button quest . on ( 'click-action' , function ( action , dialog , quest ) { }, scope ); choice : Clicked action button game object. dialog : Dialog game object. quest : Quest object.","title":"Events"},{"location":"dialog-quest/#quest-methods","text":"Start quest quest . start (); Next quest quest . next (); or quest . next ( key ); Is last question var isLast = quest . isLast ();","title":"Quest methods"},{"location":"dialog-quest/#private-data-methods","text":"Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Private data methods"},{"location":"distance/","text":"Introduction \u00b6 Get distance, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get distance between 2 points var d = Phaser . Math . Distance . Between ( x1 , y1 , x2 , y2 ); Get speed var d = Phaser . Math . GetSpeed ( distance , time ); distance : The distance to travel in pixels. time : The time, in ms, to cover the distance in.","title":"Distance"},{"location":"distance/#introduction","text":"Get distance, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"distance/#usage","text":"Get distance between 2 points var d = Phaser . Math . Distance . Between ( x1 , y1 , x2 , y2 ); Get speed var d = Phaser . Math . GetSpeed ( distance , time ); distance : The distance to travel in pixels. time : The time, in ms, to cover the distance in.","title":"Usage"},{"location":"domelement/","text":"Introduction \u00b6 Carry DOM element, built-in game object of phaser. Limitations 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. Author: Richard Davey Usage \u00b6 Configuration \u00b6 Set parent to divId Set dom.createContainer to true . var config = { // ... parent : divId , dom : { createContainer : true }, // ... } var game = new Phaser . Game ( config ); Add DOM element object \u00b6 Add html string \u00b6 Load html string in preload stage scene . load . html ( key , url ); Reference: load html Add DOM element object with html string from cache var domElement = scene . add . dom ( x , y ). createFromCache ( key ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromCache(key, elementType); Add DOM element object with html string var domElement = scene . add . dom ( x , y ). createFromHTML ( htmlString ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType); Add existing DOM \u00b6 Create DOM element var el = document . createElement ( 'div' ); // el.style = '...'; // el.innerText = '...'; Add to scene var domElement = scene . add . dom ( x , y , el ); // var domElement = scene.add.dom(x, y, el, style, innerText); Custom class \u00b6 Define class class MyDOMElement extends Phaser . GameObjects . DOMElement { constructor ( scene , x , y , element , style , innerText ) { super ( scene , x , y , element , style , innerText ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var domElement = new MyDOMElement ( scene , x , y , element ); Event of DOM element \u00b6 Add listener domElement . addListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Add event handler var callback = function ( event ) { // event.target.name }; domElement . on ( eventName , callback , scope ); // domElement.once(eventName, callback, scope); Reference: event emitter Remove listener domElement . removeListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Get child \u00b6 Get child by name var child = domElement . getChildByName ( name ) Get child by id var child = domElement . getChildByID ( id ) Get child by property var child = domElement . getChildByProperty ( property , value ) Set inner html string \u00b6 scene . setHTML ( html ); or scene . setText ( html ); DOM Element \u00b6 Each DOM element object has 1 DOM element. Set domElement . setElement ( el ); // domElement.setElement(el, style, innerText); Get var el = domElement . node ; Depth \u00b6 domElement . setDepth ( value ); Skew \u00b6 domElement . setSkew ( x , y ); or domElement . skewX = x ; domElement . skewY = y ; Rotate 3d \u00b6 The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. domElement . rotate3d . set ( x , y , z , a ); Reference Other properties \u00b6 See game object","title":"DOM element"},{"location":"domelement/#introduction","text":"Carry DOM element, built-in game object of phaser. Limitations 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. Author: Richard Davey","title":"Introduction"},{"location":"domelement/#usage","text":"","title":"Usage"},{"location":"domelement/#configuration","text":"Set parent to divId Set dom.createContainer to true . var config = { // ... parent : divId , dom : { createContainer : true }, // ... } var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"domelement/#add-dom-element-object","text":"","title":"Add DOM element object"},{"location":"domelement/#add-html-string","text":"Load html string in preload stage scene . load . html ( key , url ); Reference: load html Add DOM element object with html string from cache var domElement = scene . add . dom ( x , y ). createFromCache ( key ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromCache(key, elementType); Add DOM element object with html string var domElement = scene . add . dom ( x , y ). createFromHTML ( htmlString ); // elementType = 'div' // var domElement = scene.add.dom(x, y).createFromHTML(htmlString, elementType);","title":"Add html string"},{"location":"domelement/#add-existing-dom","text":"Create DOM element var el = document . createElement ( 'div' ); // el.style = '...'; // el.innerText = '...'; Add to scene var domElement = scene . add . dom ( x , y , el ); // var domElement = scene.add.dom(x, y, el, style, innerText);","title":"Add existing DOM"},{"location":"domelement/#custom-class","text":"Define class class MyDOMElement extends Phaser . GameObjects . DOMElement { constructor ( scene , x , y , element , style , innerText ) { super ( scene , x , y , element , style , innerText ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var domElement = new MyDOMElement ( scene , x , y , element );","title":"Custom class"},{"location":"domelement/#event-of-dom-element","text":"Add listener domElement . addListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' ' Add event handler var callback = function ( event ) { // event.target.name }; domElement . on ( eventName , callback , scope ); // domElement.once(eventName, callback, scope); Reference: event emitter Remove listener domElement . removeListener ( eventName ); eventName : Event name Single string. ex. 'click' Event name joined with ' '","title":"Event of DOM element"},{"location":"domelement/#get-child","text":"Get child by name var child = domElement . getChildByName ( name ) Get child by id var child = domElement . getChildByID ( id ) Get child by property var child = domElement . getChildByProperty ( property , value )","title":"Get child"},{"location":"domelement/#set-inner-html-string","text":"scene . setHTML ( html ); or scene . setText ( html );","title":"Set inner html string"},{"location":"domelement/#dom-element","text":"Each DOM element object has 1 DOM element. Set domElement . setElement ( el ); // domElement.setElement(el, style, innerText); Get var el = domElement . node ;","title":"DOM Element"},{"location":"domelement/#depth","text":"domElement . setDepth ( value );","title":"Depth"},{"location":"domelement/#skew","text":"domElement . setSkew ( x , y ); or domElement . skewX = x ; domElement . skewY = y ;","title":"Skew"},{"location":"domelement/#rotate-3d","text":"The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. domElement . rotate3d . set ( x , y , z , a ); Reference","title":"Rotate 3d"},{"location":"domelement/#other-properties","text":"See game object","title":"Other properties"},{"location":"drag/","text":"Introduction \u00b6 Drag game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexDrag from './plugins/drag.js' ; Install global plugin \u00b6 Install plugin in configuration of game import DragPlugin from './plugins/drag-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDrag' , plugin : DragPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var drag = scene . plugins . get ( 'rexDrag' ). add ( gameObject , { // enable: true, // axis: 0, //0|'both'|'h&v'|1|'horizontal'|'h'|2|'vertical'|'v' // rotation: Phaser.Math.DegToRad(45) // axis rotation in rad }); enable : Set false to disable input events. axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. rotation : Axis rotation in rad, available in horizontal or vertical axis mode. Events \u00b6 Built-in dragging events gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /*...*/ }); Enable \u00b6 Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false Get dragging state \u00b6 var isDragging = drag . isDragging ; Set rotation of axis \u00b6 drag . setAxisRotation ( rad ); Set axis mode \u00b6 drag . setAxisMode ( axis ); axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. Try drag \u00b6 Game object will be dragged if there is any point above it. drag . drag (); Drop \u00b6 Game object will be dropped(dragend) manually. drag . dragend ();","title":"Drag"},{"location":"drag/#introduction","text":"Drag game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"drag/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"drag/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"drag/#import-class","text":"import rexDrag from './plugins/drag.js' ;","title":"Import class"},{"location":"drag/#install-global-plugin","text":"Install plugin in configuration of game import DragPlugin from './plugins/drag-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDrag' , plugin : DragPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"drag/#create-instance","text":"var drag = scene . plugins . get ( 'rexDrag' ). add ( gameObject , { // enable: true, // axis: 0, //0|'both'|'h&v'|1|'horizontal'|'h'|2|'vertical'|'v' // rotation: Phaser.Math.DegToRad(45) // axis rotation in rad }); enable : Set false to disable input events. axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis. rotation : Axis rotation in rad, available in horizontal or vertical axis mode.","title":"Create instance"},{"location":"drag/#events","text":"Built-in dragging events gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /*...*/ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /*...*/ });","title":"Events"},{"location":"drag/#enable","text":"Get var enable = drag . enable ; // enable: true, or false Set drag . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"drag/#get-dragging-state","text":"var isDragging = drag . isDragging ;","title":"Get dragging state"},{"location":"drag/#set-rotation-of-axis","text":"drag . setAxisRotation ( rad );","title":"Set rotation of axis"},{"location":"drag/#set-axis-mode","text":"drag . setAxisMode ( axis ); axis : 'both' , 'h&v' , 'x&y' , or 0 : Dragging on all directions. 'horizontal' , 'h' , 'x' , or 1 : Dragging on horizontal/x axis. 'vertical' , 'v' , 'y' , or 2 : Dragging on vertical/y axis.","title":"Set axis mode"},{"location":"drag/#try-drag","text":"Game object will be dragged if there is any point above it. drag . drag ();","title":"Try drag"},{"location":"drag/#drop","text":"Game object will be dropped(dragend) manually. drag . dragend ();","title":"Drop"},{"location":"dragrotate/","text":"Introduction \u00b6 Get dragging angle around a specific point. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexDragRotate from './plugins/dragrotate.js' ; Install global plugin \u00b6 Install plugin in configuration of game import DragRotatePlugin from './plugins/dragrotate-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDragRotate' , plugin : DragRotatePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var dragRotate = scene . plugins . get ( 'rexDragRotate' ). add ( scene , { x : 0 , y : 0 , maxRadius : 100 minRadius : 0 , // enable: true, }); x , y : Orgin point, in world position. maxRadius , minRadius : Dragging is valid when distance between touch pointer and origin position is larger then minRadius and less then maxRadius . enable : Set false to disable input events. Enable \u00b6 Get var enable = dragRotate . enable ; // enable: true, or false Set dragRotate . setEnable ( enable ); // enable: true, or false Origin point \u00b6 Get var x = dragRotate . x ; var y = dragRotate . y ; Set dragRotate . setOrigin ( x , y ); or dragRotate . setOrigin ( pointer ); // pointer: {x, y} Note Parameter (x,y) is world position, not camera position. Radius \u00b6 Get var maxRadius = dragRotate . maxRadius ; var minRadius = dragRotate . minRadius ; Set dragRotate . setRadius ( maxRadius , minRadius ); Get dragging state \u00b6 var state = dragRotate . state ; 0 : No touch pointer 1 : Catch touch pointer Fire 'dragstart' event when catching touch pointers. Fire 'drag' event when any catched touch pointer moved. Fire 'dragend' event when releasing catched touch pointer. Is drag \u00b6 var isDrag = dragRotate . isDrag ; Return true if (dragRotate.state === 1) and catched touch pointer just moved. Events \u00b6 On dragging \u00b6 On dragging dragRotate . on ( 'drag' , function ( dragRotate ) { // gameObject.rotation += dragRotate.deltaRotation; }, scope ); dragRotate.deltaRotation : Dragging angle around origin position, in radians. Add to gameObject.rotation to spin target game object. gameObject . rotation += dragRotate . deltaRotation ; dragRotate.deltaAngle : Dragging angle around origin position, in degrees. Add to gameObject.angle to spin target game object. gameObject . angle += dragRotate . deltAangle ; dragRotate.cw : Return true if dragging is clock-wise. dragRotate.ccw : Return true if dragging is counter-clock-wise. On drag start, on drag end \u00b6 On drag touch pointer start, fired when catching touch pointer. dragRotate . on ( 'dragstart' , function ( dragRotate ) { }, scope ); On drag touch pointer end, fired when releasing the catched touch pointer. dragRotate . on ( 'dragend' , function ( dragRotate ) { }, scope ); Catched touch pointer \u00b6 Pointer , available when state is 1 var pointer = dragRotate . pointer ; World position of pointer var x = pointer . worldX ; var y = pointer . worldY ;","title":"Drag rotate"},{"location":"dragrotate/#introduction","text":"Get dragging angle around a specific point. Author: Rex Member of scene","title":"Introduction"},{"location":"dragrotate/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"dragrotate/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"dragrotate/#import-class","text":"import rexDragRotate from './plugins/dragrotate.js' ;","title":"Import class"},{"location":"dragrotate/#install-global-plugin","text":"Install plugin in configuration of game import DragRotatePlugin from './plugins/dragrotate-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexDragRotate' , plugin : DragRotatePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"dragrotate/#create-instance","text":"var dragRotate = scene . plugins . get ( 'rexDragRotate' ). add ( scene , { x : 0 , y : 0 , maxRadius : 100 minRadius : 0 , // enable: true, }); x , y : Orgin point, in world position. maxRadius , minRadius : Dragging is valid when distance between touch pointer and origin position is larger then minRadius and less then maxRadius . enable : Set false to disable input events.","title":"Create instance"},{"location":"dragrotate/#enable","text":"Get var enable = dragRotate . enable ; // enable: true, or false Set dragRotate . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"dragrotate/#origin-point","text":"Get var x = dragRotate . x ; var y = dragRotate . y ; Set dragRotate . setOrigin ( x , y ); or dragRotate . setOrigin ( pointer ); // pointer: {x, y} Note Parameter (x,y) is world position, not camera position.","title":"Origin point"},{"location":"dragrotate/#radius","text":"Get var maxRadius = dragRotate . maxRadius ; var minRadius = dragRotate . minRadius ; Set dragRotate . setRadius ( maxRadius , minRadius );","title":"Radius"},{"location":"dragrotate/#get-dragging-state","text":"var state = dragRotate . state ; 0 : No touch pointer 1 : Catch touch pointer Fire 'dragstart' event when catching touch pointers. Fire 'drag' event when any catched touch pointer moved. Fire 'dragend' event when releasing catched touch pointer.","title":"Get dragging state"},{"location":"dragrotate/#is-drag","text":"var isDrag = dragRotate . isDrag ; Return true if (dragRotate.state === 1) and catched touch pointer just moved.","title":"Is drag"},{"location":"dragrotate/#events","text":"","title":"Events"},{"location":"dragrotate/#on-dragging","text":"On dragging dragRotate . on ( 'drag' , function ( dragRotate ) { // gameObject.rotation += dragRotate.deltaRotation; }, scope ); dragRotate.deltaRotation : Dragging angle around origin position, in radians. Add to gameObject.rotation to spin target game object. gameObject . rotation += dragRotate . deltaRotation ; dragRotate.deltaAngle : Dragging angle around origin position, in degrees. Add to gameObject.angle to spin target game object. gameObject . angle += dragRotate . deltAangle ; dragRotate.cw : Return true if dragging is clock-wise. dragRotate.ccw : Return true if dragging is counter-clock-wise.","title":"On dragging"},{"location":"dragrotate/#on-drag-start-on-drag-end","text":"On drag touch pointer start, fired when catching touch pointer. dragRotate . on ( 'dragstart' , function ( dragRotate ) { }, scope ); On drag touch pointer end, fired when releasing the catched touch pointer. dragRotate . on ( 'dragend' , function ( dragRotate ) { }, scope );","title":"On drag start, on drag end"},{"location":"dragrotate/#catched-touch-pointer","text":"Pointer , available when state is 1 var pointer = dragRotate . pointer ; World position of pointer var x = pointer . worldX ; var y = pointer . worldY ;","title":"Catched touch pointer"},{"location":"dynamicbitmaptext/","text":"Introduction \u00b6 Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load bitmap font \u00b6 Reference: load bitmap font Add bitmap text object \u00b6 var txt = scene . dynamicBitmapText ( x , y , key , text ); // var txt = scene.dynamicBitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . dynamicBitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . DynamicBitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text ); Set callback \u00b6 var callback = function ( data ) { // input // data.index, data.charCode // data.x, data.y, data.scale, data.rotation // data.data // data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight // modify input `data` then return it // ... // offset: data.y += 2 // set tint: data.color = tint return data ; } txt . setDisplayCallback ( callback ); Set text \u00b6 txt . setText ( '...' ); or txt . text = '...' ; Other properties \u00b6 This dynamic bitmap text class is extended from bitmap text","title":"Dynamic bitmap text"},{"location":"dynamicbitmaptext/#introduction","text":"Drawing text by texture with a callback for each character triggered at every tick, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"dynamicbitmaptext/#usage","text":"","title":"Usage"},{"location":"dynamicbitmaptext/#load-bitmap-font","text":"Reference: load bitmap font","title":"Load bitmap font"},{"location":"dynamicbitmaptext/#add-bitmap-text-object","text":"var txt = scene . dynamicBitmapText ( x , y , key , text ); // var txt = scene.dynamicBitmapText(x, y, key, text, size, align); size : The size of the font align : The alignment of the text in a multi-line BitmapText object. 0 : Left aligned (default) 1 : Middle aligned 2 : Right aligned Add text from JSON var txt = scene . make . dynamicBitmapText ({ x : 0 , y : 0 , text : 'Text\\nGame Object\\nCreated from config' , font : '' , size : false , align : 0 , add : true });","title":"Add bitmap text object"},{"location":"dynamicbitmaptext/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . DynamicBitmapText { constructor ( scene , x , y , key , text , size , align ) { super ( scene , x , y , key , text , size , align ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , key , text );","title":"Custom class"},{"location":"dynamicbitmaptext/#set-callback","text":"var callback = function ( data ) { // input // data.index, data.charCode // data.x, data.y, data.scale, data.rotation // data.data // data.tint.topLeft, data.tint.topRight, data.tint.bottomLeft, data.tint.bottomRight // modify input `data` then return it // ... // offset: data.y += 2 // set tint: data.color = tint return data ; } txt . setDisplayCallback ( callback );","title":"Set callback"},{"location":"dynamicbitmaptext/#set-text","text":"txt . setText ( '...' ); or txt . text = '...' ;","title":"Set text"},{"location":"dynamicbitmaptext/#other-properties","text":"This dynamic bitmap text class is extended from bitmap text","title":"Other properties"},{"location":"ease-function/","text":"Introduction \u00b6 Get ease function, built-in method of phaser. Author: Richard Davey Usage \u00b6 Get ease function \u00b6 var easeFunction = Phaser . Tweens . Builders . GetEaseFunction ( ease ); // var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams); ease : A string : Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut A custom function function ( v ) { return v ; } function ( v , param0 , param1 , ...) { return v ; } v : 0 ~ 1 Get result \u00b6 var result = easeFunction ( t ); t : 0 ~ 1","title":"Ease"},{"location":"ease-function/#introduction","text":"Get ease function, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"ease-function/#usage","text":"","title":"Usage"},{"location":"ease-function/#get-ease-function","text":"var easeFunction = Phaser . Tweens . Builders . GetEaseFunction ( ease ); // var easeFunction = Phaser.Tweens.Builders.GetEaseFunction(ease, easeParams); ease : A string : Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut A custom function function ( v ) { return v ; } function ( v , param0 , param1 , ...) { return v ; } v : 0 ~ 1","title":"Get ease function"},{"location":"ease-function/#get-result","text":"var result = easeFunction ( t ); t : 0 ~ 1","title":"Get result"},{"location":"eightdirection/","text":"Introduction \u00b6 Move game object by cursor keys, with a constant speed. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexEightDirection from './plugins/eightdirection.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import EightDirectionPlugin from './plugins/eightdirection-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexEightDirection' , plugin : EightDirectionPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var eightDirection = scene . plugins . get ( 'rexEightDirection' ). add ( gameObject , { speed : 200 , // dir: '8dir', // 0|'up&down'|1|'left&right'|2|'4dir'|3|'8dir' // rotateToDirection: false, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); speed : moving speed, pixels in second. dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. rotateToDirection : Set true to change angle towards moving direction. enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default. Set speed \u00b6 eightDirection . setSpeed ( speed ); // eightDirection.speed = speed; Set rotate-to-direction \u00b6 eightDirection . setRotateToDirection ( rotateToDirection ); rotateToDirection : Set true to change angle towards moving direction Set direction mode \u00b6 eightDirection . setDirMode ( dir ); dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.","title":"8 direction"},{"location":"eightdirection/#introduction","text":"Move game object by cursor keys, with a constant speed. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"eightdirection/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"eightdirection/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"eightdirection/#import-class","text":"import rexEightDirection from './plugins/eightdirection.js' ;","title":"Import class"},{"location":"eightdirection/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import EightDirectionPlugin from './plugins/eightdirection-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexEightDirection' , plugin : EightDirectionPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"eightdirection/#create-instance","text":"var eightDirection = scene . plugins . get ( 'rexEightDirection' ). add ( gameObject , { speed : 200 , // dir: '8dir', // 0|'up&down'|1|'left&right'|2|'4dir'|3|'8dir' // rotateToDirection: false, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); speed : moving speed, pixels in second. dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. rotateToDirection : Set true to change angle towards moving direction. enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default.","title":"Create instance"},{"location":"eightdirection/#set-speed","text":"eightDirection . setSpeed ( speed ); // eightDirection.speed = speed;","title":"Set speed"},{"location":"eightdirection/#set-rotate-to-direction","text":"eightDirection . setRotateToDirection ( rotateToDirection ); rotateToDirection : Set true to change angle towards moving direction","title":"Set rotate-to-direction"},{"location":"eightdirection/#set-direction-mode","text":"eightDirection . setDirMode ( dir ); dir : 'up&down' , or 0 :Aaccept up or down cursor keys only. 'left&right' , or 1 : Aaccept left or right cursor keys only. '4dir' , or 2 : Aaccept up, down, left or right cursor keys. '8dir' , or 3 : Aaccept up, up-left, up-right, down, down-left, down-right, left, or right cursor keys.","title":"Set direction mode"},{"location":"eventemitter3/","text":"Introduction \u00b6 Event emitter . Usage \u00b6 Get event emitter \u00b6 Scene: var ee = scene . events ; Game object: var ee = gameObject ; Attach listener \u00b6 ee . on ( eventName , callback , scope ); ee . once ( eventName , callback , scope ); // only fire listeners one time Alias ee . addListener ( eventName , callback , scope ); ee . addListener ( eventName , callback , scope , true ); // only fire listeners one time Fire event \u00b6 ee . emit ( eventName , parameter0 , ...); Remove listeners \u00b6 ee . off ( eventName , callback , scope ); ee . off ( eventName , callback , scope , true ); // only remove one-time listeners Alias ee . removeListener ( eventName , callback , scope ); ee . removeListener ( eventName , callback , scope , true ); // only remove one-time listeners Remove all listeners \u00b6 ee . removeAllListeners (); Get listeners count \u00b6 var count = ee . listenerCount ( eventName ); //var noListener = (ee.listenerCount(eventName) === 0); Get listeners \u00b6 var listeners = ee . listeners ( eventName ); Listener \u00b6 { fn : callback , context : scope , once : once }","title":"Event emitter"},{"location":"eventemitter3/#introduction","text":"Event emitter .","title":"Introduction"},{"location":"eventemitter3/#usage","text":"","title":"Usage"},{"location":"eventemitter3/#get-event-emitter","text":"Scene: var ee = scene . events ; Game object: var ee = gameObject ;","title":"Get event emitter"},{"location":"eventemitter3/#attach-listener","text":"ee . on ( eventName , callback , scope ); ee . once ( eventName , callback , scope ); // only fire listeners one time Alias ee . addListener ( eventName , callback , scope ); ee . addListener ( eventName , callback , scope , true ); // only fire listeners one time","title":"Attach listener"},{"location":"eventemitter3/#fire-event","text":"ee . emit ( eventName , parameter0 , ...);","title":"Fire event"},{"location":"eventemitter3/#remove-listeners","text":"ee . off ( eventName , callback , scope ); ee . off ( eventName , callback , scope , true ); // only remove one-time listeners Alias ee . removeListener ( eventName , callback , scope ); ee . removeListener ( eventName , callback , scope , true ); // only remove one-time listeners","title":"Remove listeners"},{"location":"eventemitter3/#remove-all-listeners","text":"ee . removeAllListeners ();","title":"Remove all listeners"},{"location":"eventemitter3/#get-listeners-count","text":"var count = ee . listenerCount ( eventName ); //var noListener = (ee.listenerCount(eventName) === 0);","title":"Get listeners count"},{"location":"eventemitter3/#get-listeners","text":"var listeners = ee . listeners ( eventName );","title":"Get listeners"},{"location":"eventemitter3/#listener","text":"{ fn : callback , context : scope , once : once }","title":"Listener"},{"location":"fadeoutdestroy/","text":"Introduction \u00b6 Fade out game object then destroy it. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Fade-out \u00b6 var fade = fadeOutDestroy ( gameObject , duration ); Events \u00b6 See Events of tween task Scale completes or is stopped. fade . on ( 'complete' , function ( fade , gameObject ){ }, scope );","title":"Fade out destroy"},{"location":"fadeoutdestroy/#introduction","text":"Fade out game object then destroy it. Author: Rex Method only","title":"Introduction"},{"location":"fadeoutdestroy/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fadeoutdestroy/#usage","text":"Sample code","title":"Usage"},{"location":"fadeoutdestroy/#fade-out","text":"var fade = fadeOutDestroy ( gameObject , duration );","title":"Fade-out"},{"location":"fadeoutdestroy/#events","text":"See Events of tween task Scale completes or is stopped. fade . on ( 'complete' , function ( fade , gameObject ){ }, scope );","title":"Events"},{"location":"fadevolume/","text":"Introduction \u00b6 Fade-in/fade-out volume of sound. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Import functions \u00b6 import rexSoundFade from './plugins/soundfade.js' ; var soundFadeIn = rexSoundFade . fadeIn ; var soundFadeOut = rexSoundFade . fadeOut ; Install global plugin \u00b6 Install plugin in configuration of game import SoundFadePlugin from './plugins/soundfade-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSoundFade' , plugin : SoundFadePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Get functions var soundFadeIn = scene . get ( 'rexSoundFade' ). fadeIn ; var soundFadeOut = scene . get ( 'rexSoundFade' ). fadeOut ; Fade in \u00b6 Play and fade in voluem. var sound = soundFadeIn ( scene , sound , duration ); // sound: sound instance, or a key of audio cache // var sound = soundFadeIn(scene, sound, duration, endVolume, startVolume); Fade out \u00b6 Fade out volume then destroy it soundFadeOut ( scene , sound , duration ); // sound: sound instance Fade out volume then stop it soundFadeOut ( scene , sound , duration , false ); // sound: sound instance","title":"Volume fading"},{"location":"fadevolume/#introduction","text":"Fade-in/fade-out volume of sound. Author: Rex Method only","title":"Introduction"},{"location":"fadevolume/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fadevolume/#usage","text":"Sample code","title":"Usage"},{"location":"fadevolume/#import-functions","text":"import rexSoundFade from './plugins/soundfade.js' ; var soundFadeIn = rexSoundFade . fadeIn ; var soundFadeOut = rexSoundFade . fadeOut ;","title":"Import functions"},{"location":"fadevolume/#install-global-plugin","text":"Install plugin in configuration of game import SoundFadePlugin from './plugins/soundfade-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSoundFade' , plugin : SoundFadePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Get functions var soundFadeIn = scene . get ( 'rexSoundFade' ). fadeIn ; var soundFadeOut = scene . get ( 'rexSoundFade' ). fadeOut ;","title":"Install global plugin"},{"location":"fadevolume/#fade-in","text":"Play and fade in voluem. var sound = soundFadeIn ( scene , sound , duration ); // sound: sound instance, or a key of audio cache // var sound = soundFadeIn(scene, sound, duration, endVolume, startVolume);","title":"Fade in"},{"location":"fadevolume/#fade-out","text":"Fade out volume then destroy it soundFadeOut ( scene , sound , duration ); // sound: sound instance Fade out volume then stop it soundFadeOut ( scene , sound , duration , false ); // sound: sound instance","title":"Fade out"},{"location":"firebase-auth/","text":"Introduction \u00b6 It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/auth' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); On sign-in/sign-out \u00b6 firebaseApp . auth (). onAuthStateChanged ( function ( user ) { if ( user ) { // User is signed in. var displayName = user . displayName ; var email = user . email ; var emailVerified = user . emailVerified ; var photoURL = user . photoURL ; var isAnonymous = user . isAnonymous ; var uid = user . uid ; var providerData = user . providerData ; // ... } else { // User is signed out. // ... } }); Sign-in with facebook \u00b6 var provider = new firebase . auth . FacebookAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... }); Sign-in with Google \u00b6 var provider = new firebase . auth . GoogleAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... console . log ( user ); }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... }); Sign-in with password \u00b6 Create new user firebaseApp . auth (). createUserWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-in firebase . auth (). signInWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-out \u00b6 firebaseApp . auth (). signOut (); Current sign-in user \u00b6 var user = firebaseApp . auth (). currentUser ; if ( user != null ) { var name = user . displayName ; var email = user . email ; var photoUrl = user . photoURL ; var emailVerified = user . emailVerified ; var uid = user . uid ; } Update email \u00b6 user . updateEmail ( '...' ). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. }); Update profile \u00b6 user . updateProfile ({ displayName : '...' , photoURL : '...' }). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. }); Send a verification email \u00b6 user . sendEmailVerification (). then ( function () { // Email sent. }). catch ( function ( error ) { // An error happened. });","title":"Authentication"},{"location":"firebase-auth/#introduction","text":"It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase","title":"Introduction"},{"location":"firebase-auth/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-auth/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/auth' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' });","title":"Setup"},{"location":"firebase-auth/#on-sign-insign-out","text":"firebaseApp . auth (). onAuthStateChanged ( function ( user ) { if ( user ) { // User is signed in. var displayName = user . displayName ; var email = user . email ; var emailVerified = user . emailVerified ; var photoURL = user . photoURL ; var isAnonymous = user . isAnonymous ; var uid = user . uid ; var providerData = user . providerData ; // ... } else { // User is signed out. // ... } });","title":"On sign-in/sign-out"},{"location":"firebase-auth/#sign-in-with-facebook","text":"var provider = new firebase . auth . FacebookAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... });","title":"Sign-in with facebook"},{"location":"firebase-auth/#sign-in-with-google","text":"var provider = new firebase . auth . GoogleAuthProvider (); firebaseApp . auth (). signInWithPopup ( provider ). then ( function ( result ) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result . credential . accessToken ; // The signed-in user info. var user = result . user ; // ... console . log ( user ); }). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; // The email of the user's account used. var email = error . email ; // The firebase.auth.AuthCredential type that was used. var credential = error . credential ; // ... });","title":"Sign-in with Google"},{"location":"firebase-auth/#sign-in-with-password","text":"Create new user firebaseApp . auth (). createUserWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; }); Sign-in firebase . auth (). signInWithEmailAndPassword ( email , password ). catch ( function ( error ) { // Handle Errors here. var errorCode = error . code ; var errorMessage = error . message ; });","title":"Sign-in with password"},{"location":"firebase-auth/#sign-out","text":"firebaseApp . auth (). signOut ();","title":"Sign-out"},{"location":"firebase-auth/#current-sign-in-user","text":"var user = firebaseApp . auth (). currentUser ; if ( user != null ) { var name = user . displayName ; var email = user . email ; var photoUrl = user . photoURL ; var emailVerified = user . emailVerified ; var uid = user . uid ; }","title":"Current sign-in user"},{"location":"firebase-auth/#update-email","text":"user . updateEmail ( '...' ). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. });","title":"Update email"},{"location":"firebase-auth/#update-profile","text":"user . updateProfile ({ displayName : '...' , photoURL : '...' }). then ( function () { // Update successful. }). catch ( function ( error ) { // An error happened. });","title":"Update profile"},{"location":"firebase-auth/#send-a-verification-email","text":"user . sendEmailVerification (). then ( function () { // Email sent. }). catch ( function ( error ) { // An error happened. });","title":"Send a verification email"},{"location":"firebase-firestore/","text":"Introduction \u00b6 Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/firestore' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var db = firebaseApp . firestore (); db . settings ({ timestampsInSnapshots : true }) References \u00b6 Reference of collection var collectionRef = db . collection ( collectionName ); Reference of document var docRef = db . collection ( collectionName ). doc ( docName ); Save \u00b6 Add document db . collection ( collectionName ). add ( doc ) // doc: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum size for a document : 1 MiB (1,048,576 bytes) Set document db . collection ( collectionName ). doc ( docName ). set ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Overwrite document Update data db . collection ( collectionName ). doc ( docName ). update ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Batched writes // Get a new write batch var batch = db . batch (); batch . set ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . update ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . delete ( db . collection ( collectionName ). doc ( docName )); // ... // Commit the batch batch . commit () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum document writting in a commit : 500 Delete a document db . collection ( collectionName ). doc ( docName ). delete () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Delete a field db . collection ( collectionName ). doc ( docName ). update ({ key : firebase . firestore . FieldValue . delete () }) . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Transaction var docRef = db . collection ( collectionName ). doc ( docName ); db . runTransaction ( function ( transaction ) { // read-modify-write // This code may get re-run multiple times if there are conflicts. return transaction . get ( docRef ). then ( function ( doc ) { // doc.exists transaction . update ( docRef , keyValues ); }); }) . then ( function () { //console.log(\"Transaction successfully committed!\"); }) . catch ( function ( error ) { //console.log(\"Transaction failed: \", error); }); Limitation : Writes and transactions section Server timestamp \u00b6 firebase . firestore . FieldValue . serverTimestamp () Load \u00b6 Get a document db . collection ( collectionName ). doc ( docName ). get () . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); doc doc.id doc.data() Get all documents db . collection ( collectionName ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); querySnapshot querySnapshot.docs querySnapshot.forEach(callback, thisArg) querySnapshot.empty querySnapshot.size Simple queries db . collection ( collectionName ). where ( key , op , value ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); op : '>' , '==' , '<' , '>=' , '<=' != : where(key,'>', value).where(key, '<', value) Compound queries db . collection ( collectionName ). where ( key0 , op0 , value0 ). where ( key1 , op1 , value1 ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); Range filters ( < , <= , > , >= ) on only one field Paginate \u00b6 Order, limit db . collection ( collectionName ). orderBy ( key ). limit ( count ) Descending order : orderBy(key, 'desc') Order by multiple fields : orderBy(key0).orderBy(key1) Query, order, limit db . collection ( collectionName ). where ( key , op , value ). orderBy ( key ). limit ( count ) Key of first order must be equal to range comparison ( < , <= , > , >= ) Page Start at db . collection ( collectionName ). orderBy ( key ). startAt ( value ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endAt(value) Next page var lastDoc = querySnapshot . docs [ querySnapshot . docs . length - 1 ]; db . collection ( collectionName ). orderBy ( key ). startAfter ( lastDoc ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endBefore(lastDoc) Get realtime updates \u00b6 Get updates of a document var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ( function ( doc ) { /* ... */ }); Get updates of documents var unsubscribe = db . collection ( collectionName ). where ( key , op , value ) . onSnapshot ( function ( querySnapshot ) { /* ... */ }); Changes var changes = querySnapshot . docChanges (); // [change] Change change.type : 'added' , 'modified' , 'removed' change.newIndex change.oldIndex Detach a listener unsubscribe (); Events for metadata changes var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ({ includeMetadataChanges : true // Listen for document metadata changes }, function ( doc ) { /* ... */ } ); Indexing \u00b6 Reference","title":"Firestore"},{"location":"firebase-firestore/#introduction","text":"Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Author: Firebase","title":"Introduction"},{"location":"firebase-firestore/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-firestore/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/firestore' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var db = firebaseApp . firestore (); db . settings ({ timestampsInSnapshots : true })","title":"Setup"},{"location":"firebase-firestore/#references","text":"Reference of collection var collectionRef = db . collection ( collectionName ); Reference of document var docRef = db . collection ( collectionName ). doc ( docName );","title":"References"},{"location":"firebase-firestore/#save","text":"Add document db . collection ( collectionName ). add ( doc ) // doc: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum size for a document : 1 MiB (1,048,576 bytes) Set document db . collection ( collectionName ). doc ( docName ). set ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Overwrite document Update data db . collection ( collectionName ). doc ( docName ). update ( keyValues ) // keyValues: { ... } . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Batched writes // Get a new write batch var batch = db . batch (); batch . set ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . update ( db . collection ( collectionName ). doc ( docName ), keyValues ); batch . delete ( db . collection ( collectionName ). doc ( docName )); // ... // Commit the batch batch . commit () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Maximum document writting in a commit : 500 Delete a document db . collection ( collectionName ). doc ( docName ). delete () . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Delete a field db . collection ( collectionName ). doc ( docName ). update ({ key : firebase . firestore . FieldValue . delete () }) . then ( function () { /* ... */ }) . catch ( function ( error ) { /* ... */ }); Transaction var docRef = db . collection ( collectionName ). doc ( docName ); db . runTransaction ( function ( transaction ) { // read-modify-write // This code may get re-run multiple times if there are conflicts. return transaction . get ( docRef ). then ( function ( doc ) { // doc.exists transaction . update ( docRef , keyValues ); }); }) . then ( function () { //console.log(\"Transaction successfully committed!\"); }) . catch ( function ( error ) { //console.log(\"Transaction failed: \", error); }); Limitation : Writes and transactions section","title":"Save"},{"location":"firebase-firestore/#server-timestamp","text":"firebase . firestore . FieldValue . serverTimestamp ()","title":"Server timestamp"},{"location":"firebase-firestore/#load","text":"Get a document db . collection ( collectionName ). doc ( docName ). get () . then ( function ( doc ) { /* ... */ }) . catch ( function ( error ) { /* ... */ }); doc doc.id doc.data() Get all documents db . collection ( collectionName ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); querySnapshot querySnapshot.docs querySnapshot.forEach(callback, thisArg) querySnapshot.empty querySnapshot.size Simple queries db . collection ( collectionName ). where ( key , op , value ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); op : '>' , '==' , '<' , '>=' , '<=' != : where(key,'>', value).where(key, '<', value) Compound queries db . collection ( collectionName ). where ( key0 , op0 , value0 ). where ( key1 , op1 , value1 ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); Range filters ( < , <= , > , >= ) on only one field","title":"Load"},{"location":"firebase-firestore/#paginate","text":"Order, limit db . collection ( collectionName ). orderBy ( key ). limit ( count ) Descending order : orderBy(key, 'desc') Order by multiple fields : orderBy(key0).orderBy(key1) Query, order, limit db . collection ( collectionName ). where ( key , op , value ). orderBy ( key ). limit ( count ) Key of first order must be equal to range comparison ( < , <= , > , >= ) Page Start at db . collection ( collectionName ). orderBy ( key ). startAt ( value ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endAt(value) Next page var lastDoc = querySnapshot . docs [ querySnapshot . docs . length - 1 ]; db . collection ( collectionName ). orderBy ( key ). startAfter ( lastDoc ). limit ( count ). get () . then ( function ( querySnapshot ) { /* ... */ }) . catch ( function ( error ){ /* ... */ }); endBefore(lastDoc)","title":"Paginate"},{"location":"firebase-firestore/#get-realtime-updates","text":"Get updates of a document var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ( function ( doc ) { /* ... */ }); Get updates of documents var unsubscribe = db . collection ( collectionName ). where ( key , op , value ) . onSnapshot ( function ( querySnapshot ) { /* ... */ }); Changes var changes = querySnapshot . docChanges (); // [change] Change change.type : 'added' , 'modified' , 'removed' change.newIndex change.oldIndex Detach a listener unsubscribe (); Events for metadata changes var unsubscribe = db . collection ( collectionName ). doc ( docName ) . onSnapshot ({ includeMetadataChanges : true // Listen for document metadata changes }, function ( doc ) { /* ... */ } );","title":"Get realtime updates"},{"location":"firebase-firestore/#indexing","text":"Reference","title":"Indexing"},{"location":"firebase-storage/","text":"Introduction \u00b6 It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase Usage \u00b6 Official document Sample code Setup \u00b6 Import firestore import firebase from 'firebase/app' ; import 'firebase/storage' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var storageRef = firebaseApp . storage (). ref (); Upload string \u00b6 Upload string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64 formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64url formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload data URL string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'data_url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload image \u00b6 Get image from image texture var image = scene . textures . get ( key ). getSourceImage (); Copy image to canvas var canvas = CanvasPool . create ( scene , image . width , image . height ); var ctx = canvas . getContext ( '2d' ); ctx . drawImage ( image , 0 , 0 , image . width , image . height ); Get blob from canvas, then upload this blob. var uploadTask ; canvasToBlob ( canvas ) . then ( function ( blob ) { var metadata = { contentType : 'image/jpeg' , }; var fileRef = storageRef . child ( 'path/to/filename' ); uploadTask = fileRef . put ( blob , metadata ); return uploadTask ; }) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Reference: canvasToBlob Free canvas CanvasPool . remove ( canvas ); Upload task \u00b6 Pause task uploadTask . pause (); Resume task uploadTask . resume (); Cancel task uploadTask . cancel (); Monitor progress uploadTask . on ( 'state_changed' , function ( snapshot ){ // Observe state change events such as progress, pause, and resume var progress = ( snapshot . bytesTransferred / snapshot . totalBytes ) * 100 ; switch ( snapshot . state ) { case firebase . storage . TaskState . PAUSED : // or 'paused' console . log ( 'Upload is paused' ); break ; case firebase . storage . TaskState . RUNNING : // or 'running' console . log ( 'Upload is running' ); break ; } }, function ( error ) { // Handle unsuccessful uploads // https://firebase.google.com/docs/storage/web/handle-errors switch ( error . code ) { case 'storage/unauthorized' : // User doesn't have permission to access the object break ; case 'storage/canceled' : // User canceled the upload break ; case 'storage/unknown' : // Unknown error occurred, inspect error.serverResponse break ; } }, function () { // Handle successful uploads on complete // Get download url uploadTask . snapshot . ref . getDownloadURL () . then ( function ( url ) { console . log ( 'File available at' , url ); }) . catch ( function ( error ) {}); } ); Download file \u00b6 Get download url var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . getDownloadURL () . then ( function ( url ) {}) . catch ( function ( error ) {}); Download file by loader Delete file \u00b6 var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . delete () . then ( function () {}) . catch ( function ( error ) {});","title":"Storage"},{"location":"firebase-storage/#introduction","text":"It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Author: Firebase","title":"Introduction"},{"location":"firebase-storage/#usage","text":"Official document Sample code","title":"Usage"},{"location":"firebase-storage/#setup","text":"Import firestore import firebase from 'firebase/app' ; import 'firebase/storage' ; Firebase has been included in package.json . Initialize var firebaseApp = firebase . initializeApp ({ apiKey : '...' , authDomain : '...' , databaseURL : '...' , projectId : '...' , storageBucket : '...' , messagingSenderId : '...' }); var storageRef = firebaseApp . storage (). ref ();","title":"Setup"},{"location":"firebase-storage/#upload-string","text":"Upload string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64 formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload base64url formatted string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'base64url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Upload data URL string var fileRef = storageRef . child ( 'path/to/filename' ); var uploadTask = fileRef . putString ( content , 'data_url' ) . then ( function ( snapshot ) {}) . catch ( function ( error ) {});","title":"Upload string"},{"location":"firebase-storage/#upload-image","text":"Get image from image texture var image = scene . textures . get ( key ). getSourceImage (); Copy image to canvas var canvas = CanvasPool . create ( scene , image . width , image . height ); var ctx = canvas . getContext ( '2d' ); ctx . drawImage ( image , 0 , 0 , image . width , image . height ); Get blob from canvas, then upload this blob. var uploadTask ; canvasToBlob ( canvas ) . then ( function ( blob ) { var metadata = { contentType : 'image/jpeg' , }; var fileRef = storageRef . child ( 'path/to/filename' ); uploadTask = fileRef . put ( blob , metadata ); return uploadTask ; }) . then ( function ( snapshot ) {}) . catch ( function ( error ) {}); Reference: canvasToBlob Free canvas CanvasPool . remove ( canvas );","title":"Upload image"},{"location":"firebase-storage/#upload-task","text":"Pause task uploadTask . pause (); Resume task uploadTask . resume (); Cancel task uploadTask . cancel (); Monitor progress uploadTask . on ( 'state_changed' , function ( snapshot ){ // Observe state change events such as progress, pause, and resume var progress = ( snapshot . bytesTransferred / snapshot . totalBytes ) * 100 ; switch ( snapshot . state ) { case firebase . storage . TaskState . PAUSED : // or 'paused' console . log ( 'Upload is paused' ); break ; case firebase . storage . TaskState . RUNNING : // or 'running' console . log ( 'Upload is running' ); break ; } }, function ( error ) { // Handle unsuccessful uploads // https://firebase.google.com/docs/storage/web/handle-errors switch ( error . code ) { case 'storage/unauthorized' : // User doesn't have permission to access the object break ; case 'storage/canceled' : // User canceled the upload break ; case 'storage/unknown' : // Unknown error occurred, inspect error.serverResponse break ; } }, function () { // Handle successful uploads on complete // Get download url uploadTask . snapshot . ref . getDownloadURL () . then ( function ( url ) { console . log ( 'File available at' , url ); }) . catch ( function ( error ) {}); } );","title":"Upload task"},{"location":"firebase-storage/#download-file","text":"Get download url var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . getDownloadURL () . then ( function ( url ) {}) . catch ( function ( error ) {}); Download file by loader","title":"Download file"},{"location":"firebase-storage/#delete-file","text":"var fileRef = storageRef . child ( 'path/to/filename' ); fileRef . delete () . then ( function () {}) . catch ( function ( error ) {});","title":"Delete file"},{"location":"flash/","text":"Introduction \u00b6 Flashing (set invisible then visible) game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexFlash from './plugins/flash.js' ; Install global plugin \u00b6 Install plugin in configuration of game import FlashPlugin from './plugins/flash-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlash' , plugin : FlashPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var flash = scene . plugins . get ( 'rexFlash' ). add ( gameObject , { // duration: 500, // repeat: 2 }); duration : Duration of invisible(50%) and visible(50%), in millisecond. repeat : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once) Start flashing \u00b6 flash . flash (); // flash.flash(duration, repeat); or flash . flash ({ duration : 500 , repeat : 2 }); Stop flashing \u00b6 flash . stop (); Enable \u00b6 Enable/resume (default) flash . setEnable (); or flash . enable = true ; Disable/pause flash . setEnable ( false ); or flash . enable = false ; Set duration \u00b6 flash . setDuration ( duration ); // flash.duration = duration; Set repeat \u00b6 flash . setRepeat ( repeat ); Events \u00b6 On reached target flash . on ( 'complete' , function ( flash , gameObject ){}); Status \u00b6 Is flashing var isRunning = flash . isRunning ;","title":"Flash"},{"location":"flash/#introduction","text":"Flashing (set invisible then visible) game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"flash/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"flash/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"flash/#import-class","text":"import rexFlash from './plugins/flash.js' ;","title":"Import class"},{"location":"flash/#install-global-plugin","text":"Install plugin in configuration of game import FlashPlugin from './plugins/flash-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlash' , plugin : FlashPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"flash/#create-instance","text":"var flash = scene . plugins . get ( 'rexFlash' ). add ( gameObject , { // duration: 500, // repeat: 2 }); duration : Duration of invisible(50%) and visible(50%), in millisecond. repeat : The number of times the flashing will repeat itself (a value of 1 means the flash will play twice, as it repeated once)","title":"Create instance"},{"location":"flash/#start-flashing","text":"flash . flash (); // flash.flash(duration, repeat); or flash . flash ({ duration : 500 , repeat : 2 });","title":"Start flashing"},{"location":"flash/#stop-flashing","text":"flash . stop ();","title":"Stop flashing"},{"location":"flash/#enable","text":"Enable/resume (default) flash . setEnable (); or flash . enable = true ; Disable/pause flash . setEnable ( false ); or flash . enable = false ;","title":"Enable"},{"location":"flash/#set-duration","text":"flash . setDuration ( duration ); // flash.duration = duration;","title":"Set duration"},{"location":"flash/#set-repeat","text":"flash . setRepeat ( repeat );","title":"Set repeat"},{"location":"flash/#events","text":"On reached target flash . on ( 'complete' , function ( flash , gameObject ){});","title":"Events"},{"location":"flash/#status","text":"Is flashing var isRunning = flash . isRunning ;","title":"Status"},{"location":"flip/","text":"Introduction \u00b6 Flipping game object to another face by scaling width/height. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code , Sample code-2 User could import class directly, or install it by global plugin. Import class \u00b6 import rexFlip from './plugins/flip.js' ; Install global plugin \u00b6 Install plugin in configuration of game import FlipPlugin from './plugins/flip-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlip' , plugin : FlipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var flip = scene . plugins . get ( 'rexFlip' ). add ( gameObject , { face : 'back' , front : { key , frame }, // key, or callback back : { key , frame }, // key, or callback // orientation: 0, // 0|'x'|1|'y' // duration: 500, // delay: 0, // ease: 'Sine', }); face : Initial face. 0 , 'front' : Front face. 1 , 'back' : Back face. front , back : Texture of front/back face. undefined : Use current texture key, or frame name key : A string for texture key. {key, frame} , or {frame} : A texture key and frame name callback : Configure game object via callback. function ( gameObject ) { } orientation : Flipping orientation. 0 , 'x' , or 'horizontal' : Horizontal flipping. 1 , 'y' , or 'vertical' : Vertical flipping. duration : Duration of flipping, in millisecond. delay : Initial delay ease Ease function. Default value is 'Sine' . Start flipping \u00b6 flip . flip (); // flip.flip(duration); Stop flipping \u00b6 flip . stop (); Set duration \u00b6 flip . setDuration ( duration ); // flip.duration = duration; Faces \u00b6 Current face \u00b6 Get var face = flip . face ; 0 : Front face 1 : Back face Set flip . setFace ( face ); 0 , 'front' : Front face. 1 , 'back' : Back face. Toggle face flip . toggleFace (); Set texture of face \u00b6 Front face flip . setFrontFace ( key , frame ); or flip . setFrontFace ( callback ); callback : function ( gameObject ) { // ... } Back face flip . setBackFace ( key , frame ); or flip . setBackFace ( callback ); callback : function ( gameObject ) { // ... } Events \u00b6 On flipping complete flip . on ( 'complete' , function ( flip , gameObject ){}); Status \u00b6 Is flipping var isRunning = flip . isRunning ;","title":"Flip"},{"location":"flip/#introduction","text":"Flipping game object to another face by scaling width/height. Author: Rex Behavior of game object","title":"Introduction"},{"location":"flip/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"flip/#usage","text":"Sample code , Sample code-2 User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"flip/#import-class","text":"import rexFlip from './plugins/flip.js' ;","title":"Import class"},{"location":"flip/#install-global-plugin","text":"Install plugin in configuration of game import FlipPlugin from './plugins/flip-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFlip' , plugin : FlipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"flip/#create-instance","text":"var flip = scene . plugins . get ( 'rexFlip' ). add ( gameObject , { face : 'back' , front : { key , frame }, // key, or callback back : { key , frame }, // key, or callback // orientation: 0, // 0|'x'|1|'y' // duration: 500, // delay: 0, // ease: 'Sine', }); face : Initial face. 0 , 'front' : Front face. 1 , 'back' : Back face. front , back : Texture of front/back face. undefined : Use current texture key, or frame name key : A string for texture key. {key, frame} , or {frame} : A texture key and frame name callback : Configure game object via callback. function ( gameObject ) { } orientation : Flipping orientation. 0 , 'x' , or 'horizontal' : Horizontal flipping. 1 , 'y' , or 'vertical' : Vertical flipping. duration : Duration of flipping, in millisecond. delay : Initial delay ease Ease function. Default value is 'Sine' .","title":"Create instance"},{"location":"flip/#start-flipping","text":"flip . flip (); // flip.flip(duration);","title":"Start flipping"},{"location":"flip/#stop-flipping","text":"flip . stop ();","title":"Stop flipping"},{"location":"flip/#set-duration","text":"flip . setDuration ( duration ); // flip.duration = duration;","title":"Set duration"},{"location":"flip/#faces","text":"","title":"Faces"},{"location":"flip/#current-face","text":"Get var face = flip . face ; 0 : Front face 1 : Back face Set flip . setFace ( face ); 0 , 'front' : Front face. 1 , 'back' : Back face. Toggle face flip . toggleFace ();","title":"Current face"},{"location":"flip/#set-texture-of-face","text":"Front face flip . setFrontFace ( key , frame ); or flip . setFrontFace ( callback ); callback : function ( gameObject ) { // ... } Back face flip . setBackFace ( key , frame ); or flip . setBackFace ( callback ); callback : function ( gameObject ) { // ... }","title":"Set texture of face"},{"location":"flip/#events","text":"On flipping complete flip . on ( 'complete' , function ( flip , gameObject ){});","title":"Events"},{"location":"flip/#status","text":"Is flipping var isRunning = flip . isRunning ;","title":"Status"},{"location":"format/","text":"Introduction \u00b6 Format string with variables, built-in method of phaser. Author: Richard Davey Usage \u00b6 Replace %x from an array. x starts from 1 . // const Format = Phaser.Utils.String.Format; var template = 'hello, %1' ; var view = [ 'rex' ]; var result = Format ( template , view );","title":"Format"},{"location":"format/#introduction","text":"Format string with variables, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"format/#usage","text":"Replace %x from an array. x starts from 1 . // const Format = Phaser.Utils.String.Format; var template = 'hello, %1' ; var view = [ 'rex' ]; var result = Format ( template , view );","title":"Usage"},{"location":"fsm/","text":"Introduction \u00b6 Finite state machine . Author: Rex Object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code New class \u00b6 Import FSM class \u00b6 import FSM from './plugins/fsm.js' ; Create new class \u00b6 class State extends FSM { constructor () { super (); } next_A () { return 'B' } enter_A () { /* ... */ } exit_A () { /* ... */ } } Members: next_ + stateName: Callback to get next state. enter_ + stateName: Callback when enter state. exit_ + stateName: Callback when exit state. Create instance \u00b6 var state = new State (); Create by config \u00b6 Install global plugin \u00b6 Install plugin in configuration of game import FSMPlugin from './plugins/fsm-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFSM' , plugin : FSMPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var config = { start : 'A' , // default: undefined states : { A : { next : 'B' , // function() { return 'B'; } enter : function () {}, exit : function () {} }, // ... }, init : function () {}, extend : { i : 0 , name : 'abc' // ... }, enable : true , eventEmitter : undefined , } var state = scene . plugins . get ( 'rexFSM' ). add ( config ) start : Initial state. states : Define states. stateName next : String of next state, or a callback to get next state. enter : Callback when enter state. exit : Callback when exit state. init : Initial callback when creating instance. extend : Inject key-value pairs into instance. enable : Set false to block any state changing. eventEmitter undefined : Create a private event emitter, default value. false : Don't add any event emitter, i.e. no event will be fired. Event emitter object : Fire event through this event emitter. Read state \u00b6 Current state var curState = state . state ; Previous state var preState = state . prevState ; Start at state \u00b6 Set new state without triggering any state-changing callbacks or events. state . start ( newState ); Next state \u00b6 graph TB next[\"state.next()\"] --> next_A[\"state.next_A()<br>return 'B'\"] next_A --> eventStateChange[\"state.emit('statechange', state)<br>state.prevState -> state.state\"] subgraph State changing eventStateChange --> exit_A[\"state.exit_A()\"] exit_A --> eventExitA[\"state.emit('exit_A', state)\"] eventExitA --> enter_B[\"state.enter_B()\"] enter_B --> eventEnterB[\"state.emit('enter_B', state)\"] subgraph Exit exit_A eventExitA end subgraph Enter enter_B eventEnterB end end goto[\"state.goto('B')\"] --> eventStateChange subgraph Request subgraph Next next next_A end subgraph Goto goto end end Request \u00b6 Get next state by callback state . next (); // nextState = state.next_A() Goto state state . goto ( nextState ); // state.state = nextState; State-changing \u00b6 These callbacks or events will be triggered if state is changing. For example, state is changing from 'A' to 'B'. event statechange state . on ( 'statechange' , function ( state ) { console . log ( state . prevState + '->' + state . state ); }); callback state.exit_A event exit_A state . on ( 'exit_A' , function ( state ) { /*...*/ }); callback state.enter_B event enter_B state . on ( 'enter_B' , function ( state ) { /*...*/ }); Enable \u00b6 state . setEnable (); // state.setEnable(false); // disable state.next() and state.goto() will be ignored if disabled.","title":"FSM"},{"location":"fsm/#introduction","text":"Finite state machine . Author: Rex Object","title":"Introduction"},{"location":"fsm/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"fsm/#usage","text":"Sample code","title":"Usage"},{"location":"fsm/#new-class","text":"","title":"New class"},{"location":"fsm/#import-fsm-class","text":"import FSM from './plugins/fsm.js' ;","title":"Import FSM class"},{"location":"fsm/#create-new-class","text":"class State extends FSM { constructor () { super (); } next_A () { return 'B' } enter_A () { /* ... */ } exit_A () { /* ... */ } } Members: next_ + stateName: Callback to get next state. enter_ + stateName: Callback when enter state. exit_ + stateName: Callback when exit state.","title":"Create new class"},{"location":"fsm/#create-instance","text":"var state = new State ();","title":"Create instance"},{"location":"fsm/#create-by-config","text":"","title":"Create by config"},{"location":"fsm/#install-global-plugin","text":"Install plugin in configuration of game import FSMPlugin from './plugins/fsm-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexFSM' , plugin : FSMPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"fsm/#create-instance_1","text":"var config = { start : 'A' , // default: undefined states : { A : { next : 'B' , // function() { return 'B'; } enter : function () {}, exit : function () {} }, // ... }, init : function () {}, extend : { i : 0 , name : 'abc' // ... }, enable : true , eventEmitter : undefined , } var state = scene . plugins . get ( 'rexFSM' ). add ( config ) start : Initial state. states : Define states. stateName next : String of next state, or a callback to get next state. enter : Callback when enter state. exit : Callback when exit state. init : Initial callback when creating instance. extend : Inject key-value pairs into instance. enable : Set false to block any state changing. eventEmitter undefined : Create a private event emitter, default value. false : Don't add any event emitter, i.e. no event will be fired. Event emitter object : Fire event through this event emitter.","title":"Create instance"},{"location":"fsm/#read-state","text":"Current state var curState = state . state ; Previous state var preState = state . prevState ;","title":"Read state"},{"location":"fsm/#start-at-state","text":"Set new state without triggering any state-changing callbacks or events. state . start ( newState );","title":"Start at state"},{"location":"fsm/#next-state","text":"graph TB next[\"state.next()\"] --> next_A[\"state.next_A()<br>return 'B'\"] next_A --> eventStateChange[\"state.emit('statechange', state)<br>state.prevState -> state.state\"] subgraph State changing eventStateChange --> exit_A[\"state.exit_A()\"] exit_A --> eventExitA[\"state.emit('exit_A', state)\"] eventExitA --> enter_B[\"state.enter_B()\"] enter_B --> eventEnterB[\"state.emit('enter_B', state)\"] subgraph Exit exit_A eventExitA end subgraph Enter enter_B eventEnterB end end goto[\"state.goto('B')\"] --> eventStateChange subgraph Request subgraph Next next next_A end subgraph Goto goto end end","title":"Next state"},{"location":"fsm/#request","text":"Get next state by callback state . next (); // nextState = state.next_A() Goto state state . goto ( nextState ); // state.state = nextState;","title":"Request"},{"location":"fsm/#state-changing","text":"These callbacks or events will be triggered if state is changing. For example, state is changing from 'A' to 'B'. event statechange state . on ( 'statechange' , function ( state ) { console . log ( state . prevState + '->' + state . state ); }); callback state.exit_A event exit_A state . on ( 'exit_A' , function ( state ) { /*...*/ }); callback state.enter_B event enter_B state . on ( 'enter_B' , function ( state ) { /*...*/ });","title":"State-changing"},{"location":"fsm/#enable","text":"state . setEnable (); // state.setEnable(false); // disable state.next() and state.goto() will be ignored if disabled.","title":"Enable"},{"location":"fullscreen/","text":"Introduction \u00b6 Enable or disable full screen mode, built-in method of phaser. Author: Richard Davey Usage \u00b6 Enable/disable \u00b6 Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { if ( scene . scale . isFullscreen ) { scene . scale . stopFullscreen (); // On stop fulll screen } else { scene . scale . startFullscreen (); // On start fulll screen } }); Fire one of these events 'fullscreenunsupported' : Tried to enter fullscreen mode, but it is unsupported by the browser. 'enterfullscreen' : Entered fullscreen mode successfully. 'fullscreenfailed' : Tried to enter fullscreen mode but failed. Toggle \u00b6 Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { scene . scale . toggleFullscreen (); if ( scene . scale . isFullscreen ) { // On start fulll screen } else { // On stop fulll screen } }); Fire 'fullscreenunsupported' or 'enterfullscreen' event. State \u00b6 Is in full screen mode var isFullScreen = scene . scale . isFullscreen ; Support full screen var supported = Phaser . Device . Fullscreen . available ; Events \u00b6 Full screen mode unsupported scene . scale . on ( 'fullscreenunsupported' , function () {}); Enter full screen mode scene . scale . on ( 'enterfullscreen' , function () {});","title":"Full screen"},{"location":"fullscreen/#introduction","text":"Enable or disable full screen mode, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"fullscreen/#usage","text":"","title":"Usage"},{"location":"fullscreen/#enabledisable","text":"Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { if ( scene . scale . isFullscreen ) { scene . scale . stopFullscreen (); // On stop fulll screen } else { scene . scale . startFullscreen (); // On start fulll screen } }); Fire one of these events 'fullscreenunsupported' : Tried to enter fullscreen mode, but it is unsupported by the browser. 'enterfullscreen' : Entered fullscreen mode successfully. 'fullscreenfailed' : Tried to enter fullscreen mode but failed.","title":"Enable/disable"},{"location":"fullscreen/#toggle","text":"Under any input event ( touch or keyboard ) gameObject . setInteractive (). on ( 'pointerdown' , function () { scene . scale . toggleFullscreen (); if ( scene . scale . isFullscreen ) { // On start fulll screen } else { // On stop fulll screen } }); Fire 'fullscreenunsupported' or 'enterfullscreen' event.","title":"Toggle"},{"location":"fullscreen/#state","text":"Is in full screen mode var isFullScreen = scene . scale . isFullscreen ; Support full screen var supported = Phaser . Device . Fullscreen . available ;","title":"State"},{"location":"fullscreen/#events","text":"Full screen mode unsupported scene . scale . on ( 'fullscreenunsupported' , function () {}); Enter full screen mode scene . scale . on ( 'enterfullscreen' , function () {});","title":"Events"},{"location":"game/","text":"Boot \u00b6 var config = { type : Phaser . AUTO , parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, scene : null }; var game = new Phaser . Game ( config ); Configuration \u00b6 Reference { type : Phaser . AUTO , parent : 'phaser-example' , width : 800 , height : 600 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, dom : { createContainer : false , }, scene : null , backgroundColor : 0x333333 } or { type : Phaser . AUTO , parent : null , width : 800 , height : 600 , scale : { mode : Phaser . Scale . NONE , autoCenter : Phaser . Scale . NO_CENTER }, autoRound : false , canvas : null , canvasStyle : null , scene : null , callbacks : { preBoot : NOOP , postBoot : NOOP }, seed : [ ( Date . now () * Math . random ()). toString () ], title : '' , url : 'https://phaser.io' , version : '' , input : { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }, disableContextMenu : false , backgroundColor : 0 , render : { antialias : true , antialiasGL : true , pixelArt : false , roundPixels : false , transparent : false , clearBeforeRender : true , premultipliedAlpha : true , preserveDrawingBuffer : false , failIfMajorPerformanceCaveat : false , powerPreference : 'default' , // 'high-performance', 'low-power' or 'default' batchSize : 2000 , desynchronized : false , }, physics : { default : false // no physics system enabled }, //physics: { // system: 'impact', // setBounds: true, // gravity: 0, // cellSize: 64 //}, loader : { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 }, images : { default : 'data:image/png;base64....' , missing : 'data:image/png;base64....' }, dom : { createContainer : false , behindCanvas : false , }, plugins : { global : [ //{key, plugin, start} ], scene : [ // ... ] }, fps : { min : 10 , target : 60 , forceSetTimeOut : false , deltaHistory : 10 }, disableContextMenu : false , banner : { hidePhaser : false , text : '#ffffff' , background : [ '#ff0000' , '#ffff00' , '#00ff00' , '#00ffff' , '#000000' ] } } Destroy \u00b6 game . destroy (); // game.destroy(removeCanvas, noReturn); Also fires game.events destroy event. removeCanvas : Set to true if you would like the parent canvas element removed from the DOM, or false to leave it in place. noReturn : If true all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this. Pause / Resume events \u00b6 Pause (window is invisible) game . events . on ( 'pause' , function () {}); Resume (window is visible) game . events . on ( 'resume' , function () {}); Global members \u00b6 Scene manager \u00b6 Global scene manager in game.scene , or scene.scene in each scene. Global data \u00b6 Instance of data manager in game.registry , or scene.registry in each scene. Game time \u00b6 The time that the current game step started at. var time = game . getTime (); // var time = scene.game.getTime(); The current game frame. var frameCount = game . getFrame (); // var frameCount = scene.game.getFrame(); The delta time, since the last game step. This is a clamped and smoothed average value. var delta = game . loop . delta ; // var delta = scene.game.loop.delta; Window size \u00b6 Width var width = game . config . width ; // var width = scene.game.config.width; Height var height = game . config . height ; // var height = scene.game.config.height;","title":"Game"},{"location":"game/#boot","text":"var config = { type : Phaser . AUTO , parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, scene : null }; var game = new Phaser . Game ( config );","title":"Boot"},{"location":"game/#configuration","text":"Reference { type : Phaser . AUTO , parent : 'phaser-example' , width : 800 , height : 600 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, dom : { createContainer : false , }, scene : null , backgroundColor : 0x333333 } or { type : Phaser . AUTO , parent : null , width : 800 , height : 600 , scale : { mode : Phaser . Scale . NONE , autoCenter : Phaser . Scale . NO_CENTER }, autoRound : false , canvas : null , canvasStyle : null , scene : null , callbacks : { preBoot : NOOP , postBoot : NOOP }, seed : [ ( Date . now () * Math . random ()). toString () ], title : '' , url : 'https://phaser.io' , version : '' , input : { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }, disableContextMenu : false , backgroundColor : 0 , render : { antialias : true , antialiasGL : true , pixelArt : false , roundPixels : false , transparent : false , clearBeforeRender : true , premultipliedAlpha : true , preserveDrawingBuffer : false , failIfMajorPerformanceCaveat : false , powerPreference : 'default' , // 'high-performance', 'low-power' or 'default' batchSize : 2000 , desynchronized : false , }, physics : { default : false // no physics system enabled }, //physics: { // system: 'impact', // setBounds: true, // gravity: 0, // cellSize: 64 //}, loader : { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 }, images : { default : 'data:image/png;base64....' , missing : 'data:image/png;base64....' }, dom : { createContainer : false , behindCanvas : false , }, plugins : { global : [ //{key, plugin, start} ], scene : [ // ... ] }, fps : { min : 10 , target : 60 , forceSetTimeOut : false , deltaHistory : 10 }, disableContextMenu : false , banner : { hidePhaser : false , text : '#ffffff' , background : [ '#ff0000' , '#ffff00' , '#00ff00' , '#00ffff' , '#000000' ] } }","title":"Configuration"},{"location":"game/#destroy","text":"game . destroy (); // game.destroy(removeCanvas, noReturn); Also fires game.events destroy event. removeCanvas : Set to true if you would like the parent canvas element removed from the DOM, or false to leave it in place. noReturn : If true all the core Phaser plugins are destroyed. You cannot create another instance of Phaser on the same web page if you do this.","title":"Destroy"},{"location":"game/#pause-resume-events","text":"Pause (window is invisible) game . events . on ( 'pause' , function () {}); Resume (window is visible) game . events . on ( 'resume' , function () {});","title":"Pause / Resume events"},{"location":"game/#global-members","text":"","title":"Global members"},{"location":"game/#scene-manager","text":"Global scene manager in game.scene , or scene.scene in each scene.","title":"Scene manager"},{"location":"game/#global-data","text":"Instance of data manager in game.registry , or scene.registry in each scene.","title":"Global data"},{"location":"game/#game-time","text":"The time that the current game step started at. var time = game . getTime (); // var time = scene.game.getTime(); The current game frame. var frameCount = game . getFrame (); // var frameCount = scene.game.getFrame(); The delta time, since the last game step. This is a clamped and smoothed average value. var delta = game . loop . delta ; // var delta = scene.game.loop.delta;","title":"Game time"},{"location":"game/#window-size","text":"Width var width = game . config . width ; // var width = scene.game.config.width; Height var height = game . config . height ; // var height = scene.game.config.height;","title":"Window size"},{"location":"gameobject/","text":"Introduction \u00b6 Base class of all game object in phaser. Author: Richard Davey Usage \u00b6 Destroy \u00b6 Destroy game object gameObject . destroy (); Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list. Event gameObject . once ( 'destroy' , function ( gameObject ) { }, scope ); Position \u00b6 Get var x = gameObject . x ; var y = gameObject . y ; Set gameObject . x = 0 ; gameObject . y = 0 ; gameObject . setPosition ( x , y ); gameObject . setX ( x ); gameObject . setY ( y ); Set random gameObject . setRandomPosition ( x , y , width , height ); // gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height Angle \u00b6 Get var angle = gameObject . angle ; var radians = gameObject . rotation ; // angle in radians Set gameObject . angle = degrees ; gameObject . rotation = radians ; gameObject . setAngle ( degrees ); gameObject . setRotation ( radians ); Visible \u00b6 Get var visible = gameObject . visible ; // visible: true/false Set gameObject . visible = visible ; gameObject . setVisible ( visible ); Alpha \u00b6 Get var alpha = gameObject . alpha ; // 0~1 Set gameObject . setAlpha ( alpha ); // gameObject.alpha = alpha; or gameObject . setAlpha ( topLeft , topRight , bottomLeft , bottomRight ); // gameObject.alphaTopLeft = alpha; // gameObject.alphaTopRight = alpha; // gameObject.alphaBottomLeft = alpha; // gameObject.alphaBottomRight = alpha; FlipX, FlipY \u00b6 Get var flip = gameObject . flipX ; // flip: true/false var flip = gameObject . flipY ; // flip: true/false Set gameObject . flipX = flip ; gameObject . flipY = flip ; gameObject . setFlipX ( flip ); gameObject . setFlipY ( flip ); gameObject . setFlip ( flipX , flipY ); gameObject . toggleFlipX (); gameObject . toggleFlipY (); gameObject . resetFlip (); // equal to gameObject.setFlip(false, false); Depth (z-index) \u00b6 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. Get var depth = gameObject . depth ; Set gameObject . depth = value ; gameObject . setDepth ( value ); Scroll factor \u00b6 Get var scrollFactorX = gameObject . scrollFactorX ; var scrollFactorY = gameObject . scrollFactorY ; Set gameObject . setScrollFactor ( scrollFactor ); gameObject . setScrollFactor ( scrollFactorX , scrollFactorY ); Scroll factor: 0~1 0= fixed to camera 0.25= quarter the speed of the camera 0.5= half the speed of the camera Bounds \u00b6 var output = gameObject . getTopLeft ( output ); // output: {x, y} var output = gameObject . getTopCenter ( output ); // output: {x, y} var output = gameObject . getTopRight ( output ); // output: {x, y} var output = gameObject . getLeftCenter ( output ); // output: {x, y} var output = gameObject . getRightCenter ( output ); // output: {x, y} var output = gameObject . getBottomLeft ( output ); // output: {x, y} var output = gameObject . getBottomCenter ( output ); // output: {x, y} var output = gameObject . getBottomRight ( output ); // output: {x, y} var output = gameObject . getCenter ( output ); // output: {x, y} var output = gameObject . getBounds ( output ); // output: {x, y, width, height} Origin \u00b6 Get var originX = gameObject . originX ; var originY = gameObject . originY ; Set gameObject . setOrigin ( x , y ); // gameObject.setOrigin(x); // y = x Set to top-left gameObject . setOrigin ( 0 ); Set to center gameObject . setOrigin ( 0.5 ); Set to bottom-right gameObject . setOrigin ( 1 ); Tint \u00b6 Get var color = gameObject . tintTopLeft ; // color: 0xRRGGBB var color = gameObject . tintTopRight ; var color = gameObject . tintBottomLeft ; var color = gameObject . tintBottomRight ; var isTinted = gameObject . isTinted ; Set gameObject . tint = color ; gameObject . setTint ( color ); // multiply color value gameObject . setTint ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . setTintFill ( color ); // replace color value gameObject . setTintFill ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . clearTint (); // equal to `gameObject.setTint(0xffffff)` Blend mode \u00b6 Get var blendMode = gameObject . blendMode ; Set gameObject . blendMode = blendMode ; gameObject . setBlendMode ( blendMode ); Under WebGL only the following Blend Modes are available 'ADD' , or Phaser.BlendModes.ADD , or 1 'MULTIPLY' , or Phaser.BlendModes.MULTIPLY , or 2 'SCREEN' , or Phaser.BlendModes.SCREEN , or 3 'ERASE' , or Phaser.BlendModes.ERASE , or 17 Only works when rendering to a framebuffer, like a Render Texture 'SOURCE_IN' , or Phaser.BlendModes.SOURCE_IN , or 18 Canvas render mode only 'SOURCE_OUT' , or Phaser.BlendModes.SOURCE_OUT , or 19 Canvas render mode only 'SOURCE_ATOP' , or Phaser.BlendModes.SOURCE_ATOP , or 20 Canvas render mode only 'DESTINATION_OVER' , or Phaser.BlendModes.DESTINATION_OVER , or 21 Canvas render mode only 'DESTINATION_IN' , or Phaser.BlendModes.DESTINATION_IN , or 22 Canvas render mode only 'DESTINATION_OUT' , or Phaser.BlendModes.DESTINATION_OUT , or 23 Canvas render mode only 'DESTINATION_ATOP' , or Phaser.BlendModes.DESTINATION_ATOP , or 24 Canvas render mode only 'LIGHTER' , or Phaser.BlendModes.LIGHTER , or 25 Canvas render mode only 'COPY' , or Phaser.BlendModes.COPY , or 26 Canvas render mode only 'XOR' , or Phaser.BlendModes.XOR , or 27 Canvas render mode only Canvas has more available depending on browser support. Render pipeline \u00b6 Defaule name of render pipeline : 'TextureTintPipeline' Set custom render pipeline Create filter var config = { game : scene . game , renderer : scene . game . renderer , fragShader : '...' // GLSL shader }; var customPipeline = new Phaser . Renderer . WebGL . Pipelines . TextureTintPipeline ( config ); var filter = scene . game . renderer . addPipeline ( pipelineName , customPipeline ); pipelineName : Name of this render pipeline, a string. Set filter gameObject . setPipeline ( pipelineName ); pipelineName : Name of this render pipeline, a string. Set/change properties of filter filter . setFloat1 ( name , value0 ); filter . setFloat1v ( name , value0 ); filter . setInt1 ( name , value0 ); filter . setFloat2 ( name , value0 , value1 ); filter . setFloat2v ( name , value0 , value1 ); filter . setInt2 ( name , value0 , value1 ); filter . setFloat3 ( name , value0 , value1 , value2 ); filter . setFloat3v ( name , value0 , value1 , value2 ); filter . setInt3 ( name , value0 , value1 , value2 ); filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Reset custom render pipeline to defaule render pipeline gameObject . resetPipeline (); Get current name of render pipeline: var pipelineName = gameObject . getPipelineName (); Size \u00b6 Native (un-scaled) size Get var width = gameObject . width ; var height = gameObject . height ; Set gameObject . setSize ( width , height ); or gameObject . width = width ; gameObject . height = height ; Display size Get var displayWidth = gameObject . displayWidth ; var displayHeight = gameObject . displayHeight ; Set gameObject . setDisplaySize ( displayWidth , displayHeight ); or gameObject . displayWidth = displayWidth ; gameObject . displayHeight = displayHeight ; Scale Get var scaleX = gameObject . scaleX ; var scaleY = gameObject . scaleY ; or var scale = gameObject . scale ; // Return (scaleX + scaleY)/2 Set gameObject . setScale ( scaleX , scaleY ); or gameObject . scaleX = scaleX ; gameObject . scaleY = scaleY ; or gameObject . scale = scale ; // Set scaleX, scaleY to scale Click \u00b6 gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); See touch event State \u00b6 Get var state = gameObject . state ; Set gameObject . setState ( state ); Private data \u00b6 Get var value = gameObject . getData ( key ); var values = gameObject . getData ( keys ); // keys: an array of keys var value = gameObject . data . values [ key ]; Set gameObject . setData ( key , value ); gameObject . setData ( obj ); // obj: {key0:value0, key1:value1, ...} gameObject . data . values [ key ] = value ; gameObject . data . values [ key ] += inc ; Enable gameObject . setDataEnabled (); Events : Set data evant gameObject . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Change data event gameObject . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); gameObject . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); See data manager Note Ensure data manager is created before binding any data-changed events. Texture \u00b6 Set texture via key string gameObject . setTexture ( key ); // gameObject.setTexture(key, frame); Set texture via texture object gameObject . setTexture ( texture ); // gameObject.setTexture(texture, frame); texture : Texture object , or canvas texture object Set frame gameObject . setFrame ( frame ); gameObject . setFrame ( frame , updateSize , updateOrigin ); frame :\u3000The name or index of the frame within the Texture. updateSize : Should this call adjust the size of the Game Object? updateOrigin : Should this call adjust the origin of the Game Object? Applies a crop to a texture gameObject . setCrop ( x , y , width , height ); The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left. Reset crop gameObject . setCrop (); // gameObject.isCropped = false; Get texture, frame . var texture = gameObject . texture ; var frame = gameObject . frame ; Get texture key, frame name. var textureKey = gameObject . texture . key ; var frameName = gameObject . frame . name ; Will render \u00b6 Test render flag and camera filter. var willRennder = gameObject . willRender ( camera ); Test render flag only var willRender = ( gameObject . renderFlags === Phaser . GameObjects . GameObject . RENDER_MASK ); Phaser.GameObjects.GameObject.RENDER_MASK : 15 (Visible, Alpha, Transform and Texture) Name \u00b6 Get var name = gameObject . name ; Set gameObject . setName ( name ); gameObject . name = name ; Custom class \u00b6 Define class class MyClass extends BaseClass { constructor ( scene , x , y ) { super ( scene , x , y ; // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta); // } // } // destroy(fromScene) { // // This Game Object has already been destroyed // if (!this.scene) { // return; // } // super.destroy(fromScene); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Some kinds of game object like Sprite, Dom-element has preUpdate method already. Create instance var image = new MyClass ( scene , x , y , key );","title":"Game object"},{"location":"gameobject/#introduction","text":"Base class of all game object in phaser. Author: Richard Davey","title":"Introduction"},{"location":"gameobject/#usage","text":"","title":"Usage"},{"location":"gameobject/#destroy","text":"Destroy game object gameObject . destroy (); Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list. Event gameObject . once ( 'destroy' , function ( gameObject ) { }, scope );","title":"Destroy"},{"location":"gameobject/#position","text":"Get var x = gameObject . x ; var y = gameObject . y ; Set gameObject . x = 0 ; gameObject . y = 0 ; gameObject . setPosition ( x , y ); gameObject . setX ( x ); gameObject . setY ( y ); Set random gameObject . setRandomPosition ( x , y , width , height ); // gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height","title":"Position"},{"location":"gameobject/#angle","text":"Get var angle = gameObject . angle ; var radians = gameObject . rotation ; // angle in radians Set gameObject . angle = degrees ; gameObject . rotation = radians ; gameObject . setAngle ( degrees ); gameObject . setRotation ( radians );","title":"Angle"},{"location":"gameobject/#visible","text":"Get var visible = gameObject . visible ; // visible: true/false Set gameObject . visible = visible ; gameObject . setVisible ( visible );","title":"Visible"},{"location":"gameobject/#alpha","text":"Get var alpha = gameObject . alpha ; // 0~1 Set gameObject . setAlpha ( alpha ); // gameObject.alpha = alpha; or gameObject . setAlpha ( topLeft , topRight , bottomLeft , bottomRight ); // gameObject.alphaTopLeft = alpha; // gameObject.alphaTopRight = alpha; // gameObject.alphaBottomLeft = alpha; // gameObject.alphaBottomRight = alpha;","title":"Alpha"},{"location":"gameobject/#flipx-flipy","text":"Get var flip = gameObject . flipX ; // flip: true/false var flip = gameObject . flipY ; // flip: true/false Set gameObject . flipX = flip ; gameObject . flipY = flip ; gameObject . setFlipX ( flip ); gameObject . setFlipY ( flip ); gameObject . setFlip ( flipX , flipY ); gameObject . toggleFlipX (); gameObject . toggleFlipY (); gameObject . resetFlip (); // equal to gameObject.setFlip(false, false);","title":"FlipX, FlipY"},{"location":"gameobject/#depth-z-index","text":"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. Get var depth = gameObject . depth ; Set gameObject . depth = value ; gameObject . setDepth ( value );","title":"Depth (z-index)"},{"location":"gameobject/#scroll-factor","text":"Get var scrollFactorX = gameObject . scrollFactorX ; var scrollFactorY = gameObject . scrollFactorY ; Set gameObject . setScrollFactor ( scrollFactor ); gameObject . setScrollFactor ( scrollFactorX , scrollFactorY ); Scroll factor: 0~1 0= fixed to camera 0.25= quarter the speed of the camera 0.5= half the speed of the camera","title":"Scroll factor"},{"location":"gameobject/#bounds","text":"var output = gameObject . getTopLeft ( output ); // output: {x, y} var output = gameObject . getTopCenter ( output ); // output: {x, y} var output = gameObject . getTopRight ( output ); // output: {x, y} var output = gameObject . getLeftCenter ( output ); // output: {x, y} var output = gameObject . getRightCenter ( output ); // output: {x, y} var output = gameObject . getBottomLeft ( output ); // output: {x, y} var output = gameObject . getBottomCenter ( output ); // output: {x, y} var output = gameObject . getBottomRight ( output ); // output: {x, y} var output = gameObject . getCenter ( output ); // output: {x, y} var output = gameObject . getBounds ( output ); // output: {x, y, width, height}","title":"Bounds"},{"location":"gameobject/#origin","text":"Get var originX = gameObject . originX ; var originY = gameObject . originY ; Set gameObject . setOrigin ( x , y ); // gameObject.setOrigin(x); // y = x Set to top-left gameObject . setOrigin ( 0 ); Set to center gameObject . setOrigin ( 0.5 ); Set to bottom-right gameObject . setOrigin ( 1 );","title":"Origin"},{"location":"gameobject/#tint","text":"Get var color = gameObject . tintTopLeft ; // color: 0xRRGGBB var color = gameObject . tintTopRight ; var color = gameObject . tintBottomLeft ; var color = gameObject . tintBottomRight ; var isTinted = gameObject . isTinted ; Set gameObject . tint = color ; gameObject . setTint ( color ); // multiply color value gameObject . setTint ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . setTintFill ( color ); // replace color value gameObject . setTintFill ( colorTopLeft , colorTopRight , colorBottomLeft , colorBottomRight ); gameObject . clearTint (); // equal to `gameObject.setTint(0xffffff)`","title":"Tint"},{"location":"gameobject/#blend-mode","text":"Get var blendMode = gameObject . blendMode ; Set gameObject . blendMode = blendMode ; gameObject . setBlendMode ( blendMode ); Under WebGL only the following Blend Modes are available 'ADD' , or Phaser.BlendModes.ADD , or 1 'MULTIPLY' , or Phaser.BlendModes.MULTIPLY , or 2 'SCREEN' , or Phaser.BlendModes.SCREEN , or 3 'ERASE' , or Phaser.BlendModes.ERASE , or 17 Only works when rendering to a framebuffer, like a Render Texture 'SOURCE_IN' , or Phaser.BlendModes.SOURCE_IN , or 18 Canvas render mode only 'SOURCE_OUT' , or Phaser.BlendModes.SOURCE_OUT , or 19 Canvas render mode only 'SOURCE_ATOP' , or Phaser.BlendModes.SOURCE_ATOP , or 20 Canvas render mode only 'DESTINATION_OVER' , or Phaser.BlendModes.DESTINATION_OVER , or 21 Canvas render mode only 'DESTINATION_IN' , or Phaser.BlendModes.DESTINATION_IN , or 22 Canvas render mode only 'DESTINATION_OUT' , or Phaser.BlendModes.DESTINATION_OUT , or 23 Canvas render mode only 'DESTINATION_ATOP' , or Phaser.BlendModes.DESTINATION_ATOP , or 24 Canvas render mode only 'LIGHTER' , or Phaser.BlendModes.LIGHTER , or 25 Canvas render mode only 'COPY' , or Phaser.BlendModes.COPY , or 26 Canvas render mode only 'XOR' , or Phaser.BlendModes.XOR , or 27 Canvas render mode only Canvas has more available depending on browser support.","title":"Blend mode"},{"location":"gameobject/#render-pipeline","text":"Defaule name of render pipeline : 'TextureTintPipeline' Set custom render pipeline Create filter var config = { game : scene . game , renderer : scene . game . renderer , fragShader : '...' // GLSL shader }; var customPipeline = new Phaser . Renderer . WebGL . Pipelines . TextureTintPipeline ( config ); var filter = scene . game . renderer . addPipeline ( pipelineName , customPipeline ); pipelineName : Name of this render pipeline, a string. Set filter gameObject . setPipeline ( pipelineName ); pipelineName : Name of this render pipeline, a string. Set/change properties of filter filter . setFloat1 ( name , value0 ); filter . setFloat1v ( name , value0 ); filter . setInt1 ( name , value0 ); filter . setFloat2 ( name , value0 , value1 ); filter . setFloat2v ( name , value0 , value1 ); filter . setInt2 ( name , value0 , value1 ); filter . setFloat3 ( name , value0 , value1 , value2 ); filter . setFloat3v ( name , value0 , value1 , value2 ); filter . setInt3 ( name , value0 , value1 , value2 ); filter . setFloat4 ( name , value0 , value1 , value2 , value3 ); filter . setFloat4v ( name , value0 , value1 , value2 , value3 ); filter . setInt4 ( name , value0 , value1 , value2 , value3 ); Reset custom render pipeline to defaule render pipeline gameObject . resetPipeline (); Get current name of render pipeline: var pipelineName = gameObject . getPipelineName ();","title":"Render pipeline"},{"location":"gameobject/#size","text":"Native (un-scaled) size Get var width = gameObject . width ; var height = gameObject . height ; Set gameObject . setSize ( width , height ); or gameObject . width = width ; gameObject . height = height ; Display size Get var displayWidth = gameObject . displayWidth ; var displayHeight = gameObject . displayHeight ; Set gameObject . setDisplaySize ( displayWidth , displayHeight ); or gameObject . displayWidth = displayWidth ; gameObject . displayHeight = displayHeight ; Scale Get var scaleX = gameObject . scaleX ; var scaleY = gameObject . scaleY ; or var scale = gameObject . scale ; // Return (scaleX + scaleY)/2 Set gameObject . setScale ( scaleX , scaleY ); or gameObject . scaleX = scaleX ; gameObject . scaleY = scaleY ; or gameObject . scale = scale ; // Set scaleX, scaleY to scale","title":"Size"},{"location":"gameobject/#click","text":"gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); See touch event","title":"Click"},{"location":"gameobject/#state","text":"Get var state = gameObject . state ; Set gameObject . setState ( state );","title":"State"},{"location":"gameobject/#private-data","text":"Get var value = gameObject . getData ( key ); var values = gameObject . getData ( keys ); // keys: an array of keys var value = gameObject . data . values [ key ]; Set gameObject . setData ( key , value ); gameObject . setData ( obj ); // obj: {key0:value0, key1:value1, ...} gameObject . data . values [ key ] = value ; gameObject . data . values [ key ] += inc ; Enable gameObject . setDataEnabled (); Events : Set data evant gameObject . data . events . on ( 'setdata' , function ( parent , key , value ){ /* ... */ }); Change data event gameObject . data . events . on ( 'changedata' , function ( parent , key , value , previousValue ){ /* ... */ }); gameObject . data . events . on ( 'changedata-' + key , function ( parent , value , previousValue ){ /* ... */ }); See data manager Note Ensure data manager is created before binding any data-changed events.","title":"Private data"},{"location":"gameobject/#texture","text":"Set texture via key string gameObject . setTexture ( key ); // gameObject.setTexture(key, frame); Set texture via texture object gameObject . setTexture ( texture ); // gameObject.setTexture(texture, frame); texture : Texture object , or canvas texture object Set frame gameObject . setFrame ( frame ); gameObject . setFrame ( frame , updateSize , updateOrigin ); frame :\u3000The name or index of the frame within the Texture. updateSize : Should this call adjust the size of the Game Object? updateOrigin : Should this call adjust the origin of the Game Object? Applies a crop to a texture gameObject . setCrop ( x , y , width , height ); The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left. Reset crop gameObject . setCrop (); // gameObject.isCropped = false; Get texture, frame . var texture = gameObject . texture ; var frame = gameObject . frame ; Get texture key, frame name. var textureKey = gameObject . texture . key ; var frameName = gameObject . frame . name ;","title":"Texture"},{"location":"gameobject/#will-render","text":"Test render flag and camera filter. var willRennder = gameObject . willRender ( camera ); Test render flag only var willRender = ( gameObject . renderFlags === Phaser . GameObjects . GameObject . RENDER_MASK ); Phaser.GameObjects.GameObject.RENDER_MASK : 15 (Visible, Alpha, Transform and Texture)","title":"Will render"},{"location":"gameobject/#name","text":"Get var name = gameObject . name ; Set gameObject . setName ( name ); gameObject . name = name ;","title":"Name"},{"location":"gameobject/#custom-class","text":"Define class class MyClass extends BaseClass { constructor ( scene , x , y ) { super ( scene , x , y ; // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta); // } // } // destroy(fromScene) { // // This Game Object has already been destroyed // if (!this.scene) { // return; // } // super.destroy(fromScene); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Some kinds of game object like Sprite, Dom-element has preUpdate method already. Create instance var image = new MyClass ( scene , x , y , key );","title":"Custom class"},{"location":"gashapon/","text":"Introduction \u00b6 Pick random item from box. Author: Rex Member of scene, or game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGashapon from './plugins/gashapon.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GashaponPlugin from './plugins/gashapon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGashapon' , plugin : GashaponPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var gashapon = scene . plugins . get ( 'rexGashapon' ). add ({ mode : 'shuffle' , // 0|'shuffle'|1|'random items : { // name:count a : 1 , b : 2 , c : 3 }, reload : true , // true|false rnd : undefined , }); mode : 'shuffle' , or 0 : pick item from box without put it back. 'random' , or 1 : pick item from box then put it back. reload : set true to reload items when box is empty for shuffle mode. items : initial items in box rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator. Pick item \u00b6 Pick a random item \u00b6 var item = gashapon . next (); return null if pick nothing Pick specific item \u00b6 var item = gashapon . next ( 'a' ); return null if pick nothing Last picked item \u00b6 var item = gashapon . result ; Set item \u00b6 Set item \u00b6 gashapon . setItem ( 'a' , 1 ); // gashapon.setItem('a', 1).setItem('b', 2).setItem('c', 3); Add item \u00b6 gashapon . addItem ( 'a' , 1 ); Remove item \u00b6 Remove item \u00b6 gashapon . removeItem ( 'a' ); // gashapon.removeItem('b').gashapon.removeItem('c'); Remove all items \u00b6 gashapon . removeAllItems (); Current status \u00b6 Get current status \u00b6 var status = gashapon . toJSON (); Clone object \u00b6 var status = gashapon . toJSON (); var gashapon2 = new Gashapon ( status ); Overwrite current status \u00b6 var status = gashapon . toJSON (); // gashapon.next()... gashapon . resetFromJSON ( status ); Get items \u00b6 For each item \u00b6 gashapon . eachItem ( function ( name , count ){ console . log ( name + \": \" + count ); }); Get items \u00b6 var items = gashapon . getItems (); Set random generator \u00b6 gashapon . setRND ( rnd ); rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Gashapon"},{"location":"gashapon/#introduction","text":"Pick random item from box. Author: Rex Member of scene, or game object","title":"Introduction"},{"location":"gashapon/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gashapon/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"gashapon/#import-class","text":"import rexGashapon from './plugins/gashapon.js' ;","title":"Import class"},{"location":"gashapon/#install-global-plugin","text":"Install plugin in configuration of game import GashaponPlugin from './plugins/gashapon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGashapon' , plugin : GashaponPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"gashapon/#create-instance","text":"var gashapon = scene . plugins . get ( 'rexGashapon' ). add ({ mode : 'shuffle' , // 0|'shuffle'|1|'random items : { // name:count a : 1 , b : 2 , c : 3 }, reload : true , // true|false rnd : undefined , }); mode : 'shuffle' , or 0 : pick item from box without put it back. 'random' , or 1 : pick item from box then put it back. reload : set true to reload items when box is empty for shuffle mode. items : initial items in box rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Create instance"},{"location":"gashapon/#pick-item","text":"","title":"Pick item"},{"location":"gashapon/#pick-a-random-item","text":"var item = gashapon . next (); return null if pick nothing","title":"Pick a random item"},{"location":"gashapon/#pick-specific-item","text":"var item = gashapon . next ( 'a' ); return null if pick nothing","title":"Pick specific item"},{"location":"gashapon/#last-picked-item","text":"var item = gashapon . result ;","title":"Last picked item"},{"location":"gashapon/#set-item","text":"","title":"Set item"},{"location":"gashapon/#set-item_1","text":"gashapon . setItem ( 'a' , 1 ); // gashapon.setItem('a', 1).setItem('b', 2).setItem('c', 3);","title":"Set item"},{"location":"gashapon/#add-item","text":"gashapon . addItem ( 'a' , 1 );","title":"Add item"},{"location":"gashapon/#remove-item","text":"","title":"Remove item"},{"location":"gashapon/#remove-item_1","text":"gashapon . removeItem ( 'a' ); // gashapon.removeItem('b').gashapon.removeItem('c');","title":"Remove item"},{"location":"gashapon/#remove-all-items","text":"gashapon . removeAllItems ();","title":"Remove all items"},{"location":"gashapon/#current-status","text":"","title":"Current status"},{"location":"gashapon/#get-current-status","text":"var status = gashapon . toJSON ();","title":"Get current status"},{"location":"gashapon/#clone-object","text":"var status = gashapon . toJSON (); var gashapon2 = new Gashapon ( status );","title":"Clone object"},{"location":"gashapon/#overwrite-current-status","text":"var status = gashapon . toJSON (); // gashapon.next()... gashapon . resetFromJSON ( status );","title":"Overwrite current status"},{"location":"gashapon/#get-items","text":"","title":"Get items"},{"location":"gashapon/#for-each-item","text":"gashapon . eachItem ( function ( name , count ){ console . log ( name + \": \" + count ); });","title":"For each item"},{"location":"gashapon/#get-items_1","text":"var items = gashapon . getItems ();","title":"Get items"},{"location":"gashapon/#set-random-generator","text":"gashapon . setRND ( rnd ); rnd : Use random data generator to generate result. undefined : Use Math.random() to generate result. Phaser.Math.RND : Use pre-defined random data generator.","title":"Set random generator"},{"location":"geom-circle/","text":"Introduction \u00b6 Circle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var circle = new Phaser . Geom . Circle ( x , y , radius ); Clone shape \u00b6 var circle1 = Phaser . Geom . Circle . Clone ( circle0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillCircleShape ( circle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeCircleShape ( circle ); Note Negative radius will be treated as positive radius. i.e. Math.abs(radius) Set properties \u00b6 All properties circle . setTo ( x , y , radius ); or Phaser . Geom . Circle . CopyFrom ( source , dest ); Position circle . setPosition ( x , y ); or circle . x = 0 ; circle . y = 0 ; or circle . left = 0 ; // circle.x circle . top = 0 ; // circle.y // circle.right = 0; // circle.x // circle.bottom = 0; // circle.y or Phaser . Geom . Circle . Offset ( circle , dx , dy ); // circle.x += dx, circle.y += dy or Phaser . Geom . Circle . OffsetPoint ( circle , point ); // circle.x += point.x, circle.y += point.y Radius circle . radius = radius ; or circle . diameter = diameter ; // diameter = 2 * radius Get properties \u00b6 Position var x = circle . x ; var y = circle . y ; var top = circle . top ; var left = circle . left ; var right = circle . right ; var bottom = circle . bottom ; Radius var radius = circle . radius ; // var diameter = circle.diameter; Bound var bound = Phaser . Geom . Circle . GetBounds ( circle ); // var bound = Phaser.Geom.Circle.GetBounds(circle, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Circle . Area ( circle ); Circumference var circumference = Phaser . Geom . Circle . Circumference ( circle ); Type: var type = circle . type ; // 0 Point(s) & shape \u00b6 Get point at shape's edge var point = circle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = circle.getPoint(t, point); // modify point or var point = Phaser . Geom . Circle . CircumferencePoint ( circle , angle ); // angle in degrees // var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point); // modify point Get a random point inside shape var point = circle . getRandomPoint (); // var point = circle.getRandomPoint(point); // modify point Get points around shape's edge var points = circle . getPoints ( quantity ); // var points = circle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = circle . getPoints ( false , step ); // var points = circle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = circle . contains ( x , y ); or var isInside = Phaser . Geom . Circle . ContainsPoint ( circle , point ); Rectangle is inside shape var isInside = Phaser . Geom . Circle . ContainsRect ( circle , rect ); // rect : 4 points Empty \u00b6 Set empty circle . setEmpty (); // circle.radius = 0 Is empty var isEmpty = circle . isEmpty (); // circle.radius <= 0 Equal \u00b6 var isEqual = Phaser . Geom . Circle . Equals ( circle0 , circle1 ); Position and radius are equal. Intersection \u00b6 Circle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToCircle ( circleA , circleB ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToCircle ( circleA , circleB ); // var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out); Circle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out); Circle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out); Circle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Circle"},{"location":"geom-circle/#introduction","text":"Circle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-circle/#usage","text":"","title":"Usage"},{"location":"geom-circle/#create-shape","text":"var circle = new Phaser . Geom . Circle ( x , y , radius );","title":"Create shape"},{"location":"geom-circle/#clone-shape","text":"var circle1 = Phaser . Geom . Circle . Clone ( circle0 );","title":"Clone shape"},{"location":"geom-circle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillCircleShape ( circle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeCircleShape ( circle ); Note Negative radius will be treated as positive radius. i.e. Math.abs(radius)","title":"Draw on graphics"},{"location":"geom-circle/#set-properties","text":"All properties circle . setTo ( x , y , radius ); or Phaser . Geom . Circle . CopyFrom ( source , dest ); Position circle . setPosition ( x , y ); or circle . x = 0 ; circle . y = 0 ; or circle . left = 0 ; // circle.x circle . top = 0 ; // circle.y // circle.right = 0; // circle.x // circle.bottom = 0; // circle.y or Phaser . Geom . Circle . Offset ( circle , dx , dy ); // circle.x += dx, circle.y += dy or Phaser . Geom . Circle . OffsetPoint ( circle , point ); // circle.x += point.x, circle.y += point.y Radius circle . radius = radius ; or circle . diameter = diameter ; // diameter = 2 * radius","title":"Set properties"},{"location":"geom-circle/#get-properties","text":"Position var x = circle . x ; var y = circle . y ; var top = circle . top ; var left = circle . left ; var right = circle . right ; var bottom = circle . bottom ; Radius var radius = circle . radius ; // var diameter = circle.diameter; Bound var bound = Phaser . Geom . Circle . GetBounds ( circle ); // var bound = Phaser.Geom.Circle.GetBounds(circle, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Circle . Area ( circle ); Circumference var circumference = Phaser . Geom . Circle . Circumference ( circle ); Type: var type = circle . type ; // 0","title":"Get properties"},{"location":"geom-circle/#points-shape","text":"Get point at shape's edge var point = circle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = circle.getPoint(t, point); // modify point or var point = Phaser . Geom . Circle . CircumferencePoint ( circle , angle ); // angle in degrees // var point = Phaser.Geom.Circle.CircumferencePoint(circle, angle, point); // modify point Get a random point inside shape var point = circle . getRandomPoint (); // var point = circle.getRandomPoint(point); // modify point Get points around shape's edge var points = circle . getPoints ( quantity ); // var points = circle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = circle . getPoints ( false , step ); // var points = circle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = circle . contains ( x , y ); or var isInside = Phaser . Geom . Circle . ContainsPoint ( circle , point ); Rectangle is inside shape var isInside = Phaser . Geom . Circle . ContainsRect ( circle , rect ); // rect : 4 points","title":"Point(s) &amp; shape"},{"location":"geom-circle/#empty","text":"Set empty circle . setEmpty (); // circle.radius = 0 Is empty var isEmpty = circle . isEmpty (); // circle.radius <= 0","title":"Empty"},{"location":"geom-circle/#equal","text":"var isEqual = Phaser . Geom . Circle . Equals ( circle0 , circle1 ); Position and radius are equal.","title":"Equal"},{"location":"geom-circle/#intersection","text":"","title":"Intersection"},{"location":"geom-circle/#circle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToCircle ( circleA , circleB ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToCircle ( circleA , circleB ); // var out = Phaser.Geom.Intersects.GetCircleToCircle(circleA, circleB, out);","title":"Circle to circle"},{"location":"geom-circle/#circle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);","title":"Circle to rectangle"},{"location":"geom-circle/#circle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);","title":"Circle to triangle"},{"location":"geom-circle/#circle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Circle to line"},{"location":"geom-ellipse/","text":"Introduction \u00b6 Ellipse shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Clone shape \u00b6 var ellipse1 = Phaser . Geom . Ellipse . Clone ( ellipse0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillEllipseShape ( ellipse ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeEllipseShape ( ellipse ); Note Negative width, height will be treated as positive width, height. i.e. Math.abs(width) , Math.abs(height) Set properties \u00b6 All properties ellipse . setTo ( x , y , width , height ); or Phaser . Geom . Ellipse . CopyFrom ( source , dest ); Position ellipse . setPosition ( x , y ); or ellipse . x = 0 ; ellipse . y = 0 ; or ellipse . left = 0 ; // ellipse.x ellipse . top = 0 ; // ellipse.y // ellipse.right = 0; // ellipse.x // ellipse.bottom = 0; // ellipse.y or Phaser . Geom . Ellipse . Offset ( ellipse , dx , dy ); // ellipse.x += dx, ellipse.y += dy or Phaser . Geom . Ellipse . OffsetPoint ( ellipse , point ); // ellipse.x += point.x, ellipse.y += point.y Width, height ellipse . width = width ; ellipse . height = height ; Get properties \u00b6 Position var x = ellipse . x ; var y = ellipse . y ; var top = ellipse . top ; var left = ellipse . left ; var right = ellipse . right ; var bottom = ellipse . bottom ; Width, height var width = ellipse . width ; var height = ellipse . height ; Bound var bound = Phaser . Geom . Ellipse . GetBounds ( ellipse ); // var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Ellipse . Area ( ellipse ); Circumference var circumference = Phaser . Geom . Ellipse . Circumference ( ellipse ); Type: var type = ellipse . type ; // 1 Point(s) & shape \u00b6 Get point at shape's edge var point = ellipse . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = ellipse.getPoint(t, point); // modify point or var point = Phaser . Geom . Ellipse . CircumferencePoint ( ellipse , angle ); // angle in degrees // var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point); // modify point Get a random point inside shape var point = ellipse . getRandomPoint (); // var point = ellipse.getRandomPoint(point); // modify point Get points around shape's edge var points = ellipse . getPoints ( quantity ); // var points = ellipse.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = ellipse . getPoints ( false , step ); // var points = ellipse.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = ellipse . contains ( x , y ); or var isInside = Phaser . Geom . Ellipse . ContainsPoint ( ellipse , point ); Rectangle is inside shape var isInside = Phaser . Geom . Ellipse . ContainsRect ( ellipse , rect ); // rect : 4 points Empty \u00b6 Set empty ellipse . setEmpty (); // ellipse.width = 0, ellipse.height = 0 Is empty var isEmpty = ellipse . isEmpty (); // ellipse.width <= 0 || ellipse.height <= 0 Equal \u00b6 var isEqual = Phaser . Geom . Ellipse . Equals ( ellipse0 , ellipse1 ); Position and width, height are equal.","title":"Ellipse"},{"location":"geom-ellipse/#introduction","text":"Ellipse shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-ellipse/#usage","text":"","title":"Usage"},{"location":"geom-ellipse/#create-shape","text":"var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height );","title":"Create shape"},{"location":"geom-ellipse/#clone-shape","text":"var ellipse1 = Phaser . Geom . Ellipse . Clone ( ellipse0 );","title":"Clone shape"},{"location":"geom-ellipse/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillEllipseShape ( ellipse ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeEllipseShape ( ellipse ); Note Negative width, height will be treated as positive width, height. i.e. Math.abs(width) , Math.abs(height)","title":"Draw on graphics"},{"location":"geom-ellipse/#set-properties","text":"All properties ellipse . setTo ( x , y , width , height ); or Phaser . Geom . Ellipse . CopyFrom ( source , dest ); Position ellipse . setPosition ( x , y ); or ellipse . x = 0 ; ellipse . y = 0 ; or ellipse . left = 0 ; // ellipse.x ellipse . top = 0 ; // ellipse.y // ellipse.right = 0; // ellipse.x // ellipse.bottom = 0; // ellipse.y or Phaser . Geom . Ellipse . Offset ( ellipse , dx , dy ); // ellipse.x += dx, ellipse.y += dy or Phaser . Geom . Ellipse . OffsetPoint ( ellipse , point ); // ellipse.x += point.x, ellipse.y += point.y Width, height ellipse . width = width ; ellipse . height = height ;","title":"Set properties"},{"location":"geom-ellipse/#get-properties","text":"Position var x = ellipse . x ; var y = ellipse . y ; var top = ellipse . top ; var left = ellipse . left ; var right = ellipse . right ; var bottom = ellipse . bottom ; Width, height var width = ellipse . width ; var height = ellipse . height ; Bound var bound = Phaser . Geom . Ellipse . GetBounds ( ellipse ); // var bound = Phaser.Geom.Ellipse.GetBounds(ellipse, bound); // push bound bound : A Rectangle shape object Area var area = Phaser . Geom . Ellipse . Area ( ellipse ); Circumference var circumference = Phaser . Geom . Ellipse . Circumference ( ellipse ); Type: var type = ellipse . type ; // 1","title":"Get properties"},{"location":"geom-ellipse/#points-shape","text":"Get point at shape's edge var point = ellipse . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = ellipse.getPoint(t, point); // modify point or var point = Phaser . Geom . Ellipse . CircumferencePoint ( ellipse , angle ); // angle in degrees // var point = Phaser.Geom.Ellipse.CircumferencePoint(ellipse, angle, point); // modify point Get a random point inside shape var point = ellipse . getRandomPoint (); // var point = ellipse.getRandomPoint(point); // modify point Get points around shape's edge var points = ellipse . getPoints ( quantity ); // var points = ellipse.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = ellipse . getPoints ( false , step ); // var points = ellipse.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = ellipse . contains ( x , y ); or var isInside = Phaser . Geom . Ellipse . ContainsPoint ( ellipse , point ); Rectangle is inside shape var isInside = Phaser . Geom . Ellipse . ContainsRect ( ellipse , rect ); // rect : 4 points","title":"Point(s) &amp; shape"},{"location":"geom-ellipse/#empty","text":"Set empty ellipse . setEmpty (); // ellipse.width = 0, ellipse.height = 0 Is empty var isEmpty = ellipse . isEmpty (); // ellipse.width <= 0 || ellipse.height <= 0","title":"Empty"},{"location":"geom-ellipse/#equal","text":"var isEqual = Phaser . Geom . Ellipse . Equals ( ellipse0 , ellipse1 ); Position and width, height are equal.","title":"Equal"},{"location":"geom-hexagon/","text":"Introduction \u00b6 Hexagon shape and methods, extends from Polygon shape . Author: Rex Geometry object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHexagon from './plugins/hexagon.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HexagonPlugin from './plugins/hexagon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHexagon' , plugin : HexagonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 var hexagon = scene . plugins . get ( 'rexHexagon' ). add ( x , y , size , type ); or var hexagon = scene . plugins . get ( 'rexHexagon' ). add ({ x : 0 , y : 0 , size : 20 , type : 0 // 0|'flat'|'vertical'|1|'pointy'|'horizontal' }); or var hexagon = new rexHexagon ( x , y , size , type ); // var hexagon = new Phaser.Geom.rexHexagon(x, y, size, type); x : Center X. y : Center Y. size : Distance between center to each corner. type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x' Draw on graphics \u00b6 See Polygon shape . Set properties \u00b6 All properties hexagon . setTo ( x , y , size , type ); Position hexagon . setPosition ( x , y ); or hexagon . x = 0 ; hexagon . y = 0 ; or hexagon . centerX = 0 ; // equal to hexagon.x hexagon . centerY = 0 ; // equal to hexagon.y or hexagon . left = 0 ; // hexagon.x hexagon . top = 0 ; // hexagon.y hexagon . right = 0 ; // hexagon.x hexagon . bottom = 0 ; // hexagon.y Size hexagon . setSize ( size ); or hexagon . size = size ; Type hexagon . setType ( type ); or hexagon . type = type ; type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x' Get properties \u00b6 See Polygon shape . Position Center var centerX = hexagon . centerX ; var centerY = hexagon . centerY ; or var centerX = hexagon . x ; var centerY = hexagon . y ; Bound var top = hexagon . top ; var left = hexagon . left ; var right = hexagon . right ; var bottom = hexagon . bottom ; Width var width = hexagon . width ; Height var width = hexagon . height ; Lines around hexagon var edge01 = hexagon . getLineA (); var edge12 = hexagon . getLineB (); var edge23 = hexagon . getLineC (); var edge34 = hexagon . getLineD (); var edge45 = hexagon . getLineE (); var edge50 = hexagon . getLineF (); // var out = hexagon.getLineF(out); or var edge = hexagon . getEdge ( edgeIdx ); // var out = hexagon.getEdge(edgeIdx, out); Point(s) & shape \u00b6 See Polygon shape .","title":"Hexagon"},{"location":"geom-hexagon/#introduction","text":"Hexagon shape and methods, extends from Polygon shape . Author: Rex Geometry object","title":"Introduction"},{"location":"geom-hexagon/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"geom-hexagon/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"geom-hexagon/#import-class","text":"import rexHexagon from './plugins/hexagon.js' ;","title":"Import class"},{"location":"geom-hexagon/#install-global-plugin","text":"Install plugin in configuration of game import HexagonPlugin from './plugins/hexagon-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHexagon' , plugin : HexagonPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"geom-hexagon/#create-shape","text":"var hexagon = scene . plugins . get ( 'rexHexagon' ). add ( x , y , size , type ); or var hexagon = scene . plugins . get ( 'rexHexagon' ). add ({ x : 0 , y : 0 , size : 20 , type : 0 // 0|'flat'|'vertical'|1|'pointy'|'horizontal' }); or var hexagon = new rexHexagon ( x , y , size , type ); // var hexagon = new Phaser.Geom.rexHexagon(x, y, size, type); x : Center X. y : Center Y. size : Distance between center to each corner. type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x'","title":"Create shape"},{"location":"geom-hexagon/#draw-on-graphics","text":"See Polygon shape .","title":"Draw on graphics"},{"location":"geom-hexagon/#set-properties","text":"All properties hexagon . setTo ( x , y , size , type ); Position hexagon . setPosition ( x , y ); or hexagon . x = 0 ; hexagon . y = 0 ; or hexagon . centerX = 0 ; // equal to hexagon.x hexagon . centerY = 0 ; // equal to hexagon.y or hexagon . left = 0 ; // hexagon.x hexagon . top = 0 ; // hexagon.y hexagon . right = 0 ; // hexagon.x hexagon . bottom = 0 ; // hexagon.y Size hexagon . setSize ( size ); or hexagon . size = size ; Type hexagon . setType ( type ); or hexagon . type = type ; type : See here 0 , 'flat' , or 'y' 1 , 'pointy' or , 'x'","title":"Set properties"},{"location":"geom-hexagon/#get-properties","text":"See Polygon shape . Position Center var centerX = hexagon . centerX ; var centerY = hexagon . centerY ; or var centerX = hexagon . x ; var centerY = hexagon . y ; Bound var top = hexagon . top ; var left = hexagon . left ; var right = hexagon . right ; var bottom = hexagon . bottom ; Width var width = hexagon . width ; Height var width = hexagon . height ; Lines around hexagon var edge01 = hexagon . getLineA (); var edge12 = hexagon . getLineB (); var edge23 = hexagon . getLineC (); var edge34 = hexagon . getLineD (); var edge45 = hexagon . getLineE (); var edge50 = hexagon . getLineF (); // var out = hexagon.getLineF(out); or var edge = hexagon . getEdge ( edgeIdx ); // var out = hexagon.getEdge(edgeIdx, out);","title":"Get properties"},{"location":"geom-hexagon/#points-shape","text":"See Polygon shape .","title":"Point(s) &amp; shape"},{"location":"geom-line/","text":"Introduction \u00b6 Line shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Clone shape \u00b6 var line1 = Phaser . Geom . Line . Clone ( line0 ); Draw on graphics \u00b6 // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeLineShape ( line ); Set properties \u00b6 All properties line . setTo ( x1 , y1 , x2 , y2 ); or Phaser . Geom . Line . CopyFrom ( source , dest ); Position line . x1 = 0 ; line . y1 = 0 ; line . x2 = 0 ; line . y2 = 0 ; or line . left = 0 ; // min(x1, x2) line . top = 0 ; // min(y1, y2) line . right = 0 ; // max(x1, x2) line . bottom = 0 ; // max(y1, y2) Offset start, end var line = Phaser . Geom . Line . Offset ( line , dx , dy ); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy Set center position var line = Phaser . Geom . Line . CenterOn ( line , x , y ); Start point, angle, length var line = Phaser . Geom . Line . SetToAngle ( line , x , y , angle , length ); line : The line to set x , y : start point angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); length :\u3000The length of the line Rotate Rotate around midpoint var line = Phaser . Geom . Line . Rotate ( line , angle ) line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Rotate around point var line = Phaser . Geom . Line . RotateAroundPoint ( line , point , angle ); or var line = Phaser . Geom . Line . RotateAroundXY ( line , x , y , angle ); line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Extend var line = Phaser . Geom . Line . Extend ( line , left , right ); Get properties \u00b6 Position var x1 = line . x1 ; var y1 = line . y1 ; var x2 = line . x2 ; var y2 = line . y2 ; var top = line . top ; // min(x1, x2) var left = line . left ; // min(y1, y2) var right = line . right ; // max(x1, x2) var bottom = line . bottom ; // max(y1, y2) Start point var start = line . getPointA (); // start: {x, y} var start = line . getPointA ( start ); // push start End point var end = line . getPointB (); // end: {x, y} var end = line . getPointB ( end ); // push end Middle point var middle = Phaser . Geom . Line . GetMidPoint ( line ); // middle: {x, y} // var middle = Phaser.Geom.Line.GetMidPoint(line, middle); Length var length = Phaser . Geom . Line . Length ( line ); Width : Abs(x1 - x2) var width = Phaser . Geom . Line . Width ( line ); Height : Abs(y1 - y2) var width = Phaser . Geom . Line . Height ( line ); Slope Slope : (y2 - y1) / (x2 - x1) var slope = Phaser . Geom . Line . Slope ( line ); Perpendicular slope : -((x2 - x1) / (y2 - y1)) var perpSlope = Phaser . Geom . Line . PerpSlope ( line ); Angle Angle var angle = Phaser . Geom . Line . Angle ( line ); angle : The angle of the line in radians var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Normal angle (angle - 90 degrees) Normal angle var normalAngle = Phaser . Geom . Line . NormalAngle ( line ); Normal vector var normal = Phaser . Geom . Line . GetNormal ( line ); // normal: {x, y} // var normal = Phaser.Geom.Line.GetNormal(line, normal); // push normal or var normalX = Phaser . Geom . Line . NormalX ( line ); var normalY = Phaser . Geom . Line . NormalY ( line ); Reflect angle var reflectAngle = Phaser . Geom . Line . ReflectAngle ( aimLine , reflectingLine ); Type: var type = line . type ; // 2 Point(s) & shape \u00b6 Get point at shape's edge var point = line . getPoint ( t ); // t : 0 ~ 1. 0=start, 0.5=middle, 1=end // var point = line.getPoint(t, point); // modify point Get a random point inside shape var point = line . getRandomPoint (); // var point = line.getRandomPoint(point); // modify point Get points around shape's edge var points = line . getPoints ( quantity ); // var points = line.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = line . getPoints ( false , step ); // var points = line.getPoints(false, step, points); // push points points : an array of point Get points using Bresenham 's line algorithm var points = Phaser . Geom . Line . BresenhamPoints ( line , step ); // var points = Phaser.Geom.Line.BresenhamPoints(line, step, points); // push points Get the nearest point on a line perpendicular to the given point. var point = Phaser . Geom . Line . GetNearestPoint ( line , pointIn ); // var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point); Get the shortest distance from a Line to the given Point. var distance = Phaser . Geom . Line . GetShortestDistance ( line , point ); Equal \u00b6 var isEqual = Phaser . Geom . Line . Equals ( line0 , line1 ); x1, y2, x2, y2 are equal. Intersection \u00b6 Line to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out); Line to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out); Line to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out); Line to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 ); out : intersected point Get intersection points var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 , out );","title":"Line"},{"location":"geom-line/#introduction","text":"Line shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-line/#usage","text":"","title":"Usage"},{"location":"geom-line/#create-shape","text":"var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 );","title":"Create shape"},{"location":"geom-line/#clone-shape","text":"var line1 = Phaser . Geom . Line . Clone ( line0 );","title":"Clone shape"},{"location":"geom-line/#draw-on-graphics","text":"// graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeLineShape ( line );","title":"Draw on graphics"},{"location":"geom-line/#set-properties","text":"All properties line . setTo ( x1 , y1 , x2 , y2 ); or Phaser . Geom . Line . CopyFrom ( source , dest ); Position line . x1 = 0 ; line . y1 = 0 ; line . x2 = 0 ; line . y2 = 0 ; or line . left = 0 ; // min(x1, x2) line . top = 0 ; // min(y1, y2) line . right = 0 ; // max(x1, x2) line . bottom = 0 ; // max(y1, y2) Offset start, end var line = Phaser . Geom . Line . Offset ( line , dx , dy ); // line.x1 += dx, line.y1 += dy, line.x2 += dx, line.y2 += dy Set center position var line = Phaser . Geom . Line . CenterOn ( line , x , y ); Start point, angle, length var line = Phaser . Geom . Line . SetToAngle ( line , x , y , angle , length ); line : The line to set x , y : start point angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); length :\u3000The length of the line Rotate Rotate around midpoint var line = Phaser . Geom . Line . Rotate ( line , angle ) line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Rotate around point var line = Phaser . Geom . Line . RotateAroundPoint ( line , point , angle ); or var line = Phaser . Geom . Line . RotateAroundXY ( line , x , y , angle ); line : The line to set angle : The angle of the line in radians var rad = Phaser . Math . DegToRad ( deg ); Extend var line = Phaser . Geom . Line . Extend ( line , left , right );","title":"Set properties"},{"location":"geom-line/#get-properties","text":"Position var x1 = line . x1 ; var y1 = line . y1 ; var x2 = line . x2 ; var y2 = line . y2 ; var top = line . top ; // min(x1, x2) var left = line . left ; // min(y1, y2) var right = line . right ; // max(x1, x2) var bottom = line . bottom ; // max(y1, y2) Start point var start = line . getPointA (); // start: {x, y} var start = line . getPointA ( start ); // push start End point var end = line . getPointB (); // end: {x, y} var end = line . getPointB ( end ); // push end Middle point var middle = Phaser . Geom . Line . GetMidPoint ( line ); // middle: {x, y} // var middle = Phaser.Geom.Line.GetMidPoint(line, middle); Length var length = Phaser . Geom . Line . Length ( line ); Width : Abs(x1 - x2) var width = Phaser . Geom . Line . Width ( line ); Height : Abs(y1 - y2) var width = Phaser . Geom . Line . Height ( line ); Slope Slope : (y2 - y1) / (x2 - x1) var slope = Phaser . Geom . Line . Slope ( line ); Perpendicular slope : -((x2 - x1) / (y2 - y1)) var perpSlope = Phaser . Geom . Line . PerpSlope ( line ); Angle Angle var angle = Phaser . Geom . Line . Angle ( line ); angle : The angle of the line in radians var deg = Phaser . Math . RadToDeg ( rad ); // deg : -180 ~ 180 Normal angle (angle - 90 degrees) Normal angle var normalAngle = Phaser . Geom . Line . NormalAngle ( line ); Normal vector var normal = Phaser . Geom . Line . GetNormal ( line ); // normal: {x, y} // var normal = Phaser.Geom.Line.GetNormal(line, normal); // push normal or var normalX = Phaser . Geom . Line . NormalX ( line ); var normalY = Phaser . Geom . Line . NormalY ( line ); Reflect angle var reflectAngle = Phaser . Geom . Line . ReflectAngle ( aimLine , reflectingLine ); Type: var type = line . type ; // 2","title":"Get properties"},{"location":"geom-line/#points-shape","text":"Get point at shape's edge var point = line . getPoint ( t ); // t : 0 ~ 1. 0=start, 0.5=middle, 1=end // var point = line.getPoint(t, point); // modify point Get a random point inside shape var point = line . getRandomPoint (); // var point = line.getRandomPoint(point); // modify point Get points around shape's edge var points = line . getPoints ( quantity ); // var points = line.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = line . getPoints ( false , step ); // var points = line.getPoints(false, step, points); // push points points : an array of point Get points using Bresenham 's line algorithm var points = Phaser . Geom . Line . BresenhamPoints ( line , step ); // var points = Phaser.Geom.Line.BresenhamPoints(line, step, points); // push points Get the nearest point on a line perpendicular to the given point. var point = Phaser . Geom . Line . GetNearestPoint ( line , pointIn ); // var point = Phaser.Geom.Line.GetNearestPoint(line, pointIn, point); Get the shortest distance from a Line to the given Point. var distance = Phaser . Geom . Line . GetShortestDistance ( line , point );","title":"Point(s) &amp; shape"},{"location":"geom-line/#equal","text":"var isEqual = Phaser . Geom . Line . Equals ( line0 , line1 ); x1, y2, x2, y2 are equal.","title":"Equal"},{"location":"geom-line/#intersection","text":"","title":"Intersection"},{"location":"geom-line/#line-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . LineToCircle ( line , circle ); // var result = Phaser.Geom.Intersects.LineToCircle(line, circle, nearest); nearest : Nearest point on line. Get intersection points var result = Phaser . Geom . Intersects . GetLineToCircle ( line , circle ); // var out = Phaser.Geom.Intersects.GetLineToCircle(line, circle, out);","title":"Line to circle"},{"location":"geom-line/#line-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Line to rectangle"},{"location":"geom-line/#line-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Line to triangle"},{"location":"geom-line/#line-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 ); out : intersected point Get intersection points var result = Phaser . Geom . Intersects . LineToLine ( line1 , line2 , out );","title":"Line to line"},{"location":"geom-point/","text":"Introduction \u00b6 Point shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var point = new Phaser . Geom . Point ( x , y ); Clone shape \u00b6 var point1 = Phaser . Geom . Point . Clone ( point0 ); Draw on graphics \u00b6 // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPointShape ( point , size ); Set properties \u00b6 All properties point . setTo ( x , y ); or Phaser . Geom . Point . CopyFrom ( source , dest ); Position point . x = 0 ; point . y = 0 ; Round Ceil : Apply Math.ceil() to each coordinate of the given Point var point = Phaser . Geom . Point . Ceil ( point ) Floor : Apply Math.floor() to each coordinate of the given Point. var point = Phaser . Geom . Point . Floor ( point ) Symmetry \u00b6 Invert : x = y, y = x var point = Phaser . Geom . Point . Invert ( point ); Negative : x = -x, y = -y var out = Phaser . Geom . Point . Negative ( point ); // var out = Phaser.Geom.Point.Negative(point, out); // modify out Get properties \u00b6 Position var x = point . x ; var y = point . y ; Type: var type = point . type ; // 3 Equal \u00b6 var isEqual = Phaser . Geom . Point . Equals ( point0 , point1 ); x, y are equal. Points \u00b6 Centroid : center-point over some points var out = Phaser . Geom . Point . GetCentroid ( points ); // var out = Phaser.Geom.Point.GetCentroid(points, out); // modify out Calculates the Axis Aligned Bounding Box (or aabb) from an array of points ( rectangle ) var rect = Phaser . Geom . Point . GetRectangleFromPoints ( points ); // var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect); // modify rect Interpolate var out = Phaser . Geom . Point . Interpolate ( pointA , pointB , t ); // out : point // var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out); // modify out Intersection \u00b6 Point to line var result = Phaser . Geom . Intersects . PointToLine ( point , line ); // var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness); var result = Phaser . Geom . Intersects . PointToLineSegment ( point , line ); Point as Vector \u00b6 Vector starting at (0,0) Magnitude : sqrt( (x * x) + (y * y) ) var magnitude = Phaser . Geom . Point . GetMagnitude ( point ); or var magnitudeSq = Phaser . Geom . Point . GetMagnitudeSq ( point ); Project var out = Phaser . Geom . Point . Project ( from , to ); // var out = Phaser.Geom.Point.Project(from, to, out); // modify out or var out = Phaser . Geom . Point . ProjectUnit ( from , to ); // vector `from` and `to` are unit vector (length = 1) // var out = Phaser.Geom.Point.ProjectUnit(from, to, out); // modify out","title":"Point"},{"location":"geom-point/#introduction","text":"Point shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-point/#usage","text":"","title":"Usage"},{"location":"geom-point/#create-shape","text":"var point = new Phaser . Geom . Point ( x , y );","title":"Create shape"},{"location":"geom-point/#clone-shape","text":"var point1 = Phaser . Geom . Point . Clone ( point0 );","title":"Clone shape"},{"location":"geom-point/#draw-on-graphics","text":"// graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPointShape ( point , size );","title":"Draw on graphics"},{"location":"geom-point/#set-properties","text":"All properties point . setTo ( x , y ); or Phaser . Geom . Point . CopyFrom ( source , dest ); Position point . x = 0 ; point . y = 0 ; Round Ceil : Apply Math.ceil() to each coordinate of the given Point var point = Phaser . Geom . Point . Ceil ( point ) Floor : Apply Math.floor() to each coordinate of the given Point. var point = Phaser . Geom . Point . Floor ( point )","title":"Set properties"},{"location":"geom-point/#symmetry","text":"Invert : x = y, y = x var point = Phaser . Geom . Point . Invert ( point ); Negative : x = -x, y = -y var out = Phaser . Geom . Point . Negative ( point ); // var out = Phaser.Geom.Point.Negative(point, out); // modify out","title":"Symmetry"},{"location":"geom-point/#get-properties","text":"Position var x = point . x ; var y = point . y ; Type: var type = point . type ; // 3","title":"Get properties"},{"location":"geom-point/#equal","text":"var isEqual = Phaser . Geom . Point . Equals ( point0 , point1 ); x, y are equal.","title":"Equal"},{"location":"geom-point/#points","text":"Centroid : center-point over some points var out = Phaser . Geom . Point . GetCentroid ( points ); // var out = Phaser.Geom.Point.GetCentroid(points, out); // modify out Calculates the Axis Aligned Bounding Box (or aabb) from an array of points ( rectangle ) var rect = Phaser . Geom . Point . GetRectangleFromPoints ( points ); // var rect = Phaser.Geom.Point.GetRectangleFromPoints(points, rect); // modify rect Interpolate var out = Phaser . Geom . Point . Interpolate ( pointA , pointB , t ); // out : point // var out = Phaser.Geom.Point.Interpolate(pointA, pointB, t, out); // modify out","title":"Points"},{"location":"geom-point/#intersection","text":"Point to line var result = Phaser . Geom . Intersects . PointToLine ( point , line ); // var result = Phaser.Geom.Intersects.PointToLine(point, line, lineThickness); var result = Phaser . Geom . Intersects . PointToLineSegment ( point , line );","title":"Intersection"},{"location":"geom-point/#point-as-vector","text":"Vector starting at (0,0) Magnitude : sqrt( (x * x) + (y * y) ) var magnitude = Phaser . Geom . Point . GetMagnitude ( point ); or var magnitudeSq = Phaser . Geom . Point . GetMagnitudeSq ( point ); Project var out = Phaser . Geom . Point . Project ( from , to ); // var out = Phaser.Geom.Point.Project(from, to, out); // modify out or var out = Phaser . Geom . Point . ProjectUnit ( from , to ); // vector `from` and `to` are unit vector (length = 1) // var out = Phaser.Geom.Point.ProjectUnit(from, to, out); // modify out","title":"Point as Vector"},{"location":"geom-polygon/","text":"Introduction \u00b6 Polygon shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var polygon = new Phaser . Geom . Polygon ( points ); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Clone shape \u00b6 var polygon1 = Phaser . Geom . Polygon . Clone ( polygon0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPoints ( polygon . points , true ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokePoints ( polygon . points , true ); Set properties \u00b6 polygon . setTo ( points ); // points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...] Get properties \u00b6 Points var points = polygon . points ; // array of points {x,y} Area var area = polygon . area ; Number array var out = Phaser . Geom . Polygon . GetNumberArray ( polygon ); // var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out); // modify out arr : [x0, y0, x1, y1, x2, y2, ...] AABB (A minimum rectangle to cover this polygon) var out = Phaser . Geom . Polygon . GetAABB ( polygon ); // var out = Phaser.Geom.Polygon.GetAABB(polygon, out); out : A rectangle object Type: var type = polygon . type ; // 4 Point(s) & shape \u00b6 Point is inside shape var isInside = polygon . contains ( x , y ); or var isInside = Phaser . Geom . Polygon . ContainsPoint ( polygon , point ); Reverse the order of points var polygon = Phaser . Geom . Polygon . Reverse ( polygon ); Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points. Phaser . Geom . Polygon . Smooth ( polygon )","title":"Polygon"},{"location":"geom-polygon/#introduction","text":"Polygon shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-polygon/#usage","text":"","title":"Usage"},{"location":"geom-polygon/#create-shape","text":"var polygon = new Phaser . Geom . Polygon ( points ); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...'","title":"Create shape"},{"location":"geom-polygon/#clone-shape","text":"var polygon1 = Phaser . Geom . Polygon . Clone ( polygon0 );","title":"Clone shape"},{"location":"geom-polygon/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillPoints ( polygon . points , true ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokePoints ( polygon . points , true );","title":"Draw on graphics"},{"location":"geom-polygon/#set-properties","text":"polygon . setTo ( points ); // points = [x0, y0, x1, y1, x2, y2, ...] , or [{x,y}, {x,y}, {x,y}, ...]","title":"Set properties"},{"location":"geom-polygon/#get-properties","text":"Points var points = polygon . points ; // array of points {x,y} Area var area = polygon . area ; Number array var out = Phaser . Geom . Polygon . GetNumberArray ( polygon ); // var out = Phaser.Geom.Polygon.GetNumberArray(polygon, out); // modify out arr : [x0, y0, x1, y1, x2, y2, ...] AABB (A minimum rectangle to cover this polygon) var out = Phaser . Geom . Polygon . GetAABB ( polygon ); // var out = Phaser.Geom.Polygon.GetAABB(polygon, out); out : A rectangle object Type: var type = polygon . type ; // 4","title":"Get properties"},{"location":"geom-polygon/#points-shape","text":"Point is inside shape var isInside = polygon . contains ( x , y ); or var isInside = Phaser . Geom . Polygon . ContainsPoint ( polygon , point ); Reverse the order of points var polygon = Phaser . Geom . Polygon . Reverse ( polygon ); Smooth : Takes a Polygon object and applies Chaikin's smoothing algorithm on its points. Phaser . Geom . Polygon . Smooth ( polygon )","title":"Point(s) &amp; shape"},{"location":"geom-rectangle/","text":"Introduction \u00b6 Rectangle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); or create from 4 points var rect = Phaser . Geom . Rectangle . FromPoints ( points ); // var rect = Phaser.Geom.Rectangle.FromPoints(points, rect); // push rect points : an array with 4 points. [x, y] , or {x:0, y:0} Clone shape \u00b6 var rect1 = Phaser . Geom . Rectangle . Clone ( rect0 ); Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillRectShape ( rect ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeRectShape ( rect ); Note x with positive/negative width is left/right bound y with positive/negative height is top/bottom bound Set properties \u00b6 All properties rect . setTo ( x , y , width , height ); or Phaser . Geom . Rectangle . CopyFrom ( source , dest ); Position rect . setPosition ( x , y ); or rect . x = 0 ; rect . y = 0 ; or rect . left = 0 ; // rect.x, rect.width rect . top = 0 ; // rect.y, rect.height // rect.right = 0; // rect.x, rect.width // rect.bottom = 0; // rect.y, rect.height rect . centerX = 0 ; // rect.x rect . centerY = 0 ; // rect.y or Phaser . Geom . Rectangle . Offset ( rect , dx , dy ); // rect.x += dx, rect.y += dy or Phaser . Geom . Rectangle . OffsetPoint ( rect , point ); // rect.x += point.x, rect.y += point.y or Phaser . Geom . Rectangle . CenterOn ( rect , x , y ); // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2) Size rect . setSize ( width , height ); // rect.setSize(width); // height = width or rect . width = 0 ; rect . height = 0 ; Scale Phaser . Geom . Rectangle . Scale ( rect , x , y ); // rect.width *= x, rect.height *= y; // Phaser.Geom.Rectangle.Scale(rect, x); // y = x Extend size to include points Phaser . Geom . Rectangle . MergePoints ( rect , points ); points : an array of points. [x, y] , or {x:0, y:0} Extend size to include another rectangle Phaser . Geom . Rectangle . MergeRect ( target , source ); Inflate Phaser . Geom . Rectangle . Inflate ( rect , x , y ); change size to width += x*2, height += y*2 center on previous position Fits the target rectangle into the source rectangle Phaser . Geom . Rectangle . FitInside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Fits the target rectangle around the source rectangle Phaser . Geom . Rectangle . FitOutside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Ceil Phaser . Geom . Rectangle . Ceil ( rect ); // ceil x, y Phaser . Geom . Rectangle . CeilAll ( rect ); // ceil x, y, width, height Floor Phaser . Geom . Rectangle . Floor ( rect ); // floor x, y Phaser . Geom . Rectangle . FloorAll ( rect ); // floor x, y, width, height Get properties \u00b6 Position var x = rect . x ; var y = rect . y ; Bound var top = rect . top ; var left = rect . left ; var right = rect . right ; var bottom = rect . bottom ; or var points = Phaser . Geom . Rectangle . Decompose ( rect ); // var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points points : top-left, top-right, bottom-right, bottom-left Center var centerX = rect . centerX ; var centerY = rect . centerY ; or var point = Phaser . Geom . Rectangle . GetCenter ( rect ); // var point = Phaser.Geom.Rectangle.GetCenter(rect, point); Size var width = rect . width ; var height = rect . height ; or var point = Phaser . Geom . Rectangle . GetSize ( rect ); // {x: rect.width, y: rect.height} Area var area = Phaser . Geom . Rectangle . Area ( rect ); Perimeter var perimeter = Phaser . Geom . Rectangle . Perimeter ( rect ); // 2 * (rect.width + rect.height) Aspect ratio var aspectRatio = Phaser . Geom . Rectangle . GetAspectRatio ( rect ); // rect.width / rect.height Lines around rectangle var topLine = rect . getLineA (); // top line of this rectangle var rightLine = rect . getLineB (); // right line of this rectangle var bottomLine = rect . getLineC (); // bottom line of this rectangle var leftLine = rect . getLineD (); // left line of this rectangle // var out = rect.getLineA(out); // top line of this rectangle Type: var type = rect . type ; // 5 Point(s) & shape \u00b6 Get point at shape's edge var point = rect . getPoint ( t ); // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left) // var point = rect.getPoint(t, point); // modify point or var point = Phaser . Geom . Rectangle . PerimeterPoint ( rect , angle ); // angle in degrees // var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point); // push point Get points around shape's edge var points = rect . getPoints ( quantity ); // var points = rect.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = rect . getPoints ( false , step ); // var points = rect.getPoints(false, step, points); // push points step : width of each step, in pixels. quantity = Perimeter(rectangle) / step; points : an array of point Point is inside shape var isInside = rect . contains ( x , y ); or var isInside = Phaser . Geom . Rectangle . ContainsPoint ( rect , point ); Get a random point inside shape var point = rect . getRandomPoint (); // var point = rect.getRandomPoint(point); // modify point Get a random point outside shape var point = Phaser . Geom . Rectangle . RandomOutside ( outer , inner ); // var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point Rectangle is inside shape var isInside = Phaser . Geom . Rectangle . ContainsRect ( rectA , rectB ); // rectB is inside rectA Rectangles \u00b6 Is overlapping var isOverlapping = Phaser . Geom . Rectangle . Overlaps ( rectA , rectB ); Get intersection rectangle var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB , rect ); // push rect Get union rectangle var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB , rect ); // push rect Empty \u00b6 Set empty rect . setEmpty (); // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0 Is empty var isEmpty = rect . isEmpty (); // rect.radius <= 0; Equal \u00b6 Position, width, and height are the same var isEqual = Phaser . Geom . Rectangle . Equals ( rect0 , rect1 ); Width and height are the same var isEqual = Phaser . Geom . Rectangle . SameDimensions ( rect0 , rect1 ); Intersection \u00b6 Rectangle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out); Rectangle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToRectangle ( rectA , rectB ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToRectangle ( rectA , rectB ); // var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out); Rectangle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out); Rectangle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Rectangle"},{"location":"geom-rectangle/#introduction","text":"Rectangle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-rectangle/#usage","text":"","title":"Usage"},{"location":"geom-rectangle/#create-shape","text":"var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); or create from 4 points var rect = Phaser . Geom . Rectangle . FromPoints ( points ); // var rect = Phaser.Geom.Rectangle.FromPoints(points, rect); // push rect points : an array with 4 points. [x, y] , or {x:0, y:0}","title":"Create shape"},{"location":"geom-rectangle/#clone-shape","text":"var rect1 = Phaser . Geom . Rectangle . Clone ( rect0 );","title":"Clone shape"},{"location":"geom-rectangle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillRectShape ( rect ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeRectShape ( rect ); Note x with positive/negative width is left/right bound y with positive/negative height is top/bottom bound","title":"Draw on graphics"},{"location":"geom-rectangle/#set-properties","text":"All properties rect . setTo ( x , y , width , height ); or Phaser . Geom . Rectangle . CopyFrom ( source , dest ); Position rect . setPosition ( x , y ); or rect . x = 0 ; rect . y = 0 ; or rect . left = 0 ; // rect.x, rect.width rect . top = 0 ; // rect.y, rect.height // rect.right = 0; // rect.x, rect.width // rect.bottom = 0; // rect.y, rect.height rect . centerX = 0 ; // rect.x rect . centerY = 0 ; // rect.y or Phaser . Geom . Rectangle . Offset ( rect , dx , dy ); // rect.x += dx, rect.y += dy or Phaser . Geom . Rectangle . OffsetPoint ( rect , point ); // rect.x += point.x, rect.y += point.y or Phaser . Geom . Rectangle . CenterOn ( rect , x , y ); // rect.x = x - (rect.width / 2), rect.y = y - (rect.height / 2) Size rect . setSize ( width , height ); // rect.setSize(width); // height = width or rect . width = 0 ; rect . height = 0 ; Scale Phaser . Geom . Rectangle . Scale ( rect , x , y ); // rect.width *= x, rect.height *= y; // Phaser.Geom.Rectangle.Scale(rect, x); // y = x Extend size to include points Phaser . Geom . Rectangle . MergePoints ( rect , points ); points : an array of points. [x, y] , or {x:0, y:0} Extend size to include another rectangle Phaser . Geom . Rectangle . MergeRect ( target , source ); Inflate Phaser . Geom . Rectangle . Inflate ( rect , x , y ); change size to width += x*2, height += y*2 center on previous position Fits the target rectangle into the source rectangle Phaser . Geom . Rectangle . FitInside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Fits the target rectangle around the source rectangle Phaser . Geom . Rectangle . FitOutside ( target , source ); Preserves aspect ratio, scales and centers the target rectangle to the source rectangle Ceil Phaser . Geom . Rectangle . Ceil ( rect ); // ceil x, y Phaser . Geom . Rectangle . CeilAll ( rect ); // ceil x, y, width, height Floor Phaser . Geom . Rectangle . Floor ( rect ); // floor x, y Phaser . Geom . Rectangle . FloorAll ( rect ); // floor x, y, width, height","title":"Set properties"},{"location":"geom-rectangle/#get-properties","text":"Position var x = rect . x ; var y = rect . y ; Bound var top = rect . top ; var left = rect . left ; var right = rect . right ; var bottom = rect . bottom ; or var points = Phaser . Geom . Rectangle . Decompose ( rect ); // var points = Phaser.Geom.Rectangle.Decompose(rect, points); // push result points points : top-left, top-right, bottom-right, bottom-left Center var centerX = rect . centerX ; var centerY = rect . centerY ; or var point = Phaser . Geom . Rectangle . GetCenter ( rect ); // var point = Phaser.Geom.Rectangle.GetCenter(rect, point); Size var width = rect . width ; var height = rect . height ; or var point = Phaser . Geom . Rectangle . GetSize ( rect ); // {x: rect.width, y: rect.height} Area var area = Phaser . Geom . Rectangle . Area ( rect ); Perimeter var perimeter = Phaser . Geom . Rectangle . Perimeter ( rect ); // 2 * (rect.width + rect.height) Aspect ratio var aspectRatio = Phaser . Geom . Rectangle . GetAspectRatio ( rect ); // rect.width / rect.height Lines around rectangle var topLine = rect . getLineA (); // top line of this rectangle var rightLine = rect . getLineB (); // right line of this rectangle var bottomLine = rect . getLineC (); // bottom line of this rectangle var leftLine = rect . getLineD (); // left line of this rectangle // var out = rect.getLineA(out); // top line of this rectangle Type: var type = rect . type ; // 5","title":"Get properties"},{"location":"geom-rectangle/#points-shape","text":"Get point at shape's edge var point = rect . getPoint ( t ); // t : 0 ~ 1 (0= top-left, 0.5= bottom-right, 1= top-left) // var point = rect.getPoint(t, point); // modify point or var point = Phaser . Geom . Rectangle . PerimeterPoint ( rect , angle ); // angle in degrees // var point = Phaser.Geom.Rectangle.PerimeterPoint(rect, angle, point); // push point Get points around shape's edge var points = rect . getPoints ( quantity ); // var points = rect.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = rect . getPoints ( false , step ); // var points = rect.getPoints(false, step, points); // push points step : width of each step, in pixels. quantity = Perimeter(rectangle) / step; points : an array of point Point is inside shape var isInside = rect . contains ( x , y ); or var isInside = Phaser . Geom . Rectangle . ContainsPoint ( rect , point ); Get a random point inside shape var point = rect . getRandomPoint (); // var point = rect.getRandomPoint(point); // modify point Get a random point outside shape var point = Phaser . Geom . Rectangle . RandomOutside ( outer , inner ); // var point = Phaser.Geom.Rectangle.RandomOutside(outer, inner, point); // modify point Rectangle is inside shape var isInside = Phaser . Geom . Rectangle . ContainsRect ( rectA , rectB ); // rectB is inside rectA","title":"Point(s) &amp; shape"},{"location":"geom-rectangle/#rectangles","text":"Is overlapping var isOverlapping = Phaser . Geom . Rectangle . Overlaps ( rectA , rectB ); Get intersection rectangle var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Intersection ( rectA , rectB , rect ); // push rect Get union rectangle var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB ); var rect = Phaser . Geom . Rectangle . Union ( rectA , rectB , rect ); // push rect","title":"Rectangles"},{"location":"geom-rectangle/#empty","text":"Set empty rect . setEmpty (); // rect.x = 0, rect.y = 0, rect.width = 0, rect.height = 0 Is empty var isEmpty = rect . isEmpty (); // rect.radius <= 0;","title":"Empty"},{"location":"geom-rectangle/#equal","text":"Position, width, and height are the same var isEqual = Phaser . Geom . Rectangle . Equals ( rect0 , rect1 ); Width and height are the same var isEqual = Phaser . Geom . Rectangle . SameDimensions ( rect0 , rect1 );","title":"Equal"},{"location":"geom-rectangle/#intersection","text":"","title":"Intersection"},{"location":"geom-rectangle/#rectangle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . CircleToRectangle ( circle , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetCircleToRectangle ( circle , rect ); // var out = Phaser.Geom.Intersects.GetCircleToRectangle(circle, rect, out);","title":"Rectangle to circle"},{"location":"geom-rectangle/#rectangle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToRectangle ( rectA , rectB ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToRectangle ( rectA , rectB ); // var out = Phaser.Geom.Intersects.GetRectangleToRectangle(rectA, rectB, out);","title":"Rectangle to rectangle"},{"location":"geom-rectangle/#rectangle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);","title":"Rectangle to triangle"},{"location":"geom-rectangle/#rectangle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . LineToRectangle ( line , rect ); Get intersection points var result = Phaser . Geom . Intersects . GetLineToRectangle ( line , rect ); // var out = Phaser.Geom.Intersects.GetLineToRectangle(line, rect, out);","title":"Rectangle to line"},{"location":"geom-rhombus/","text":"Introduction \u00b6 Rhombus shape and methods, extends from Polygon shape . Author: Rex Geometry object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRhombus from './plugins/rhombus.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RhombusPlugin from './plugins/rhombus-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRhombus' , plugin : RhombusPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 var rhombus = scene . plugins . get ( 'rexRhombus' ). add ( x , y , width , height ); or var rhombus = scene . plugins . get ( 'rexRhombus' ). add ({ x : 0 , y : 0 , width : 40 , height : 20 }); or var rhombus = new rexRhombus ( x , y , width , height ); // var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height); x : Top X. y : Left Y. Draw on graphics \u00b6 See Polygon shape . Set properties \u00b6 All properties rhombus . setTo ( x , y , width , height ); Position rhombus . setPosition ( x , y ); or rhombus . x = 0 ; rhombus . y = 0 ; or rhombus . left = 0 ; // rhombus.x rhombus . top = 0 ; // rhombus.y rhombus . right = 0 ; // rhombus.x rhombus . bottom = 0 ; // rhombus.y Size rhombus . setSize ( width , height ); or rhombus . width = width ; rhombus . height = height ; Get properties \u00b6 See Polygon shape . Position Center var centerX = rhombus . centerX ; var centerY = rhombus . centerY ; Bound var top = rhombus . top ; var left = rhombus . left ; var right = rhombus . right ; var bottom = rhombus . bottom ; Width var width = rhombus . width ; Height var width = rhombus . height ; Lines around rhombus var edge01 = rhombus . getLineA (); var edge12 = rhombus . getLineB (); var edge23 = rhombus . getLineC (); var edge34 = rhombus . getLineD (); or var edge = rhombus . getEdge ( edgeIdx ); // var out = rhombus.getEdge(edgeIdx, out); Point(s) & shape \u00b6 See Polygon shape .","title":"Rhombus"},{"location":"geom-rhombus/#introduction","text":"Rhombus shape and methods, extends from Polygon shape . Author: Rex Geometry object","title":"Introduction"},{"location":"geom-rhombus/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"geom-rhombus/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"geom-rhombus/#import-class","text":"import rexRhombus from './plugins/rhombus.js' ;","title":"Import class"},{"location":"geom-rhombus/#install-global-plugin","text":"Install plugin in configuration of game import RhombusPlugin from './plugins/rhombus-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRhombus' , plugin : RhombusPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"geom-rhombus/#create-shape","text":"var rhombus = scene . plugins . get ( 'rexRhombus' ). add ( x , y , width , height ); or var rhombus = scene . plugins . get ( 'rexRhombus' ). add ({ x : 0 , y : 0 , width : 40 , height : 20 }); or var rhombus = new rexRhombus ( x , y , width , height ); // var rhombus = new Phaser.Geom.rexRhombus(x, y, width, height); x : Top X. y : Left Y.","title":"Create shape"},{"location":"geom-rhombus/#draw-on-graphics","text":"See Polygon shape .","title":"Draw on graphics"},{"location":"geom-rhombus/#set-properties","text":"All properties rhombus . setTo ( x , y , width , height ); Position rhombus . setPosition ( x , y ); or rhombus . x = 0 ; rhombus . y = 0 ; or rhombus . left = 0 ; // rhombus.x rhombus . top = 0 ; // rhombus.y rhombus . right = 0 ; // rhombus.x rhombus . bottom = 0 ; // rhombus.y Size rhombus . setSize ( width , height ); or rhombus . width = width ; rhombus . height = height ;","title":"Set properties"},{"location":"geom-rhombus/#get-properties","text":"See Polygon shape . Position Center var centerX = rhombus . centerX ; var centerY = rhombus . centerY ; Bound var top = rhombus . top ; var left = rhombus . left ; var right = rhombus . right ; var bottom = rhombus . bottom ; Width var width = rhombus . width ; Height var width = rhombus . height ; Lines around rhombus var edge01 = rhombus . getLineA (); var edge12 = rhombus . getLineB (); var edge23 = rhombus . getLineC (); var edge34 = rhombus . getLineD (); or var edge = rhombus . getEdge ( edgeIdx ); // var out = rhombus.getEdge(edgeIdx, out);","title":"Get properties"},{"location":"geom-rhombus/#points-shape","text":"See Polygon shape .","title":"Point(s) &amp; shape"},{"location":"geom-triangle/","text":"Introduction \u00b6 Triangle shape and methods, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Clone shape \u00b6 var triangle1 = Phaser . Geom . Triangle . Clone ( triangle0 ); Equilateral triangle \u00b6 var triangle = Phaser . Geom . Triangle . BuildEquilateral ( x1 , y1 , length ); Right triangle \u00b6 var triangle = Phaser . Geom . Triangle . BuildRight ( x1 , y1 , width , height ); Polygon to triangles \u00b6 var out = Phaser . Geom . Triangle . BuildFromPolygon ( data ); // var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY); // out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out); data : A flat array of vertice coordinates like [x0,y0, x1,y1, x2,y2, ...] out : Array of triangles Draw on graphics \u00b6 Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillTriangleShape ( triangle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeTriangleShape ( triangle ); Set properties \u00b6 All properties triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); or Phaser . Geom . Triangle . CopyFrom ( source , dest ); Position triangle . x1 = 0 ; triangle . y1 = 0 ; triangle . x2 = 0 ; triangle . y2 = 0 ; triangle . x3 = 0 ; triangle . y3 = 0 ; or triangle . left = 0 ; // triangle.x1, triangle.x2, triangle.x3 triangle . top = 0 ; // triangle.y1, triangle.y2, triangle.y3 // triangle.right = 0; // triangle.x1, triangle.x2, triangle.x3 // triangle.bottom = 0; // triangle.y1, triangle.y2, triangle.y3 or Phaser . Geom . Triangle . Offset ( triangle , dx , dy ); // triangle.x += dx, triangle.y += dy or Phaser . Geom . Triangle . CenterOn ( triangle , x , y ); Rotate Rotate around center (incenter) var triangle = Phaser . Geom . Triangle . Rotate ( triangle , angle ); angle : Radian Rotate around point var triangle = Phaser . Geom . Triangle . RotateAroundPoint ( triangle , point , angle ); point : {x, y} angle : Radian Rotate around (x,y) var triangle = Phaser . Geom . Triangle . RotateAroundXY ( triangle , x , y , angle ); angle : Radian Get properties \u00b6 Position var x1 = triangle . x1 ; var y1 = triangle . y1 ; var x2 = triangle . x2 ; var y2 = triangle . y2 ; var x3 = triangle . x3 ; var y3 = triangle . y3 ; var top = triangle . top ; var left = triangle . left ; var right = triangle . right ; var bottom = triangle . bottom ; or var out = Phaser . Geom . Triangle . Decompose ( triangle ); // out: [{x1,y1}, {x2,y2}, {x3,y3}] // var out = Phaser.Geom.Triangle.Decompose(triangle, out); Perimeter var perimeter = Phaser . Geom . Triangle . Perimeter ( triangle ); Area var area = Phaser . Geom . Triangle . Area ( triangle ); Lines around triangle var line12 = rect . getLineA (); // line from (x1, y1) to (x2, y2) var line23 = rect . getLineB (); // line from (x2, y2) to (x3, y3) var line31 = rect . getLineC (); // line from (x3, y3) to (x1, y1) Centroid var out = Phaser . Geom . Triangle . Centroid ( triangle ); // out: {x,y} Incenter var out = Phaser . Geom . Triangle . InCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.InCenter(triangle, out); Circumcenter var out = Phaser . Geom . Triangle . CircumCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.CircumCenter(triangle, out); Circumcircle var out = Phaser . Geom . Triangle . CircumCircle ( triangle ); // out: a circle object // var out = Phaser.Geom.Triangle.CircumCircle(triangle, out); Type: var type = triangle . type ; // 6 Point(s) & shape \u00b6 Get point at shape's edge var point = triangle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = triangle.getPoint(t, point); // modify point Get a random point inside shape var point = triangle . getRandomPoint (); // var point = triangle.getRandomPoint(point); // modify point Get points around shape's edge var points = triangle . getPoints ( quantity ); // var points = triangle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = triangle . getPoints ( false , step ); // var points = triangle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = triangle . contains ( x , y ); or var isInside = Phaser . Geom . Triangle . ContainsPoint ( triangle , point ); Points inside shape var out = Phaser . Geom . Triangle . ContainsArray ( triangle , points , returnFirst ); // var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out); out : Points inside triangle returnFirst : True to get fist matched point Equal \u00b6 var isEqual = Phaser . Geom . Triangle . Equals ( triangle0 , triangle1 ); Position and radius are equal. Intersection \u00b6 Triangle to circle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out); Triangle to rectangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out); Triangle to triangle \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToTriangle ( triangleA , triangleB ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToTriangle ( triangleA , triangleB ); // var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out); Triangle to line \u00b6 Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Triangle"},{"location":"geom-triangle/#introduction","text":"Triangle shape and methods, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"geom-triangle/#usage","text":"","title":"Usage"},{"location":"geom-triangle/#create-shape","text":"var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Create shape"},{"location":"geom-triangle/#clone-shape","text":"var triangle1 = Phaser . Geom . Triangle . Clone ( triangle0 );","title":"Clone shape"},{"location":"geom-triangle/#equilateral-triangle","text":"var triangle = Phaser . Geom . Triangle . BuildEquilateral ( x1 , y1 , length );","title":"Equilateral triangle"},{"location":"geom-triangle/#right-triangle","text":"var triangle = Phaser . Geom . Triangle . BuildRight ( x1 , y1 , width , height );","title":"Right triangle"},{"location":"geom-triangle/#polygon-to-triangles","text":"var out = Phaser . Geom . Triangle . BuildFromPolygon ( data ); // var out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY); // out = Phaser.Geom.Triangle.BuildFromPolygon(data, holes, scaleX, scaleY, out); data : A flat array of vertice coordinates like [x0,y0, x1,y1, x2,y2, ...] out : Array of triangles","title":"Polygon to triangles"},{"location":"geom-triangle/#draw-on-graphics","text":"Fill shape // graphics.fillStyle(color, alpha); // color: 0xRRGGBB graphics . fillTriangleShape ( triangle ); Stroke shape // graphics.lineStyle(lineWidth, color, alpha); // color: 0xRRGGBB graphics . strokeTriangleShape ( triangle );","title":"Draw on graphics"},{"location":"geom-triangle/#set-properties","text":"All properties triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); or Phaser . Geom . Triangle . CopyFrom ( source , dest ); Position triangle . x1 = 0 ; triangle . y1 = 0 ; triangle . x2 = 0 ; triangle . y2 = 0 ; triangle . x3 = 0 ; triangle . y3 = 0 ; or triangle . left = 0 ; // triangle.x1, triangle.x2, triangle.x3 triangle . top = 0 ; // triangle.y1, triangle.y2, triangle.y3 // triangle.right = 0; // triangle.x1, triangle.x2, triangle.x3 // triangle.bottom = 0; // triangle.y1, triangle.y2, triangle.y3 or Phaser . Geom . Triangle . Offset ( triangle , dx , dy ); // triangle.x += dx, triangle.y += dy or Phaser . Geom . Triangle . CenterOn ( triangle , x , y ); Rotate Rotate around center (incenter) var triangle = Phaser . Geom . Triangle . Rotate ( triangle , angle ); angle : Radian Rotate around point var triangle = Phaser . Geom . Triangle . RotateAroundPoint ( triangle , point , angle ); point : {x, y} angle : Radian Rotate around (x,y) var triangle = Phaser . Geom . Triangle . RotateAroundXY ( triangle , x , y , angle ); angle : Radian","title":"Set properties"},{"location":"geom-triangle/#get-properties","text":"Position var x1 = triangle . x1 ; var y1 = triangle . y1 ; var x2 = triangle . x2 ; var y2 = triangle . y2 ; var x3 = triangle . x3 ; var y3 = triangle . y3 ; var top = triangle . top ; var left = triangle . left ; var right = triangle . right ; var bottom = triangle . bottom ; or var out = Phaser . Geom . Triangle . Decompose ( triangle ); // out: [{x1,y1}, {x2,y2}, {x3,y3}] // var out = Phaser.Geom.Triangle.Decompose(triangle, out); Perimeter var perimeter = Phaser . Geom . Triangle . Perimeter ( triangle ); Area var area = Phaser . Geom . Triangle . Area ( triangle ); Lines around triangle var line12 = rect . getLineA (); // line from (x1, y1) to (x2, y2) var line23 = rect . getLineB (); // line from (x2, y2) to (x3, y3) var line31 = rect . getLineC (); // line from (x3, y3) to (x1, y1) Centroid var out = Phaser . Geom . Triangle . Centroid ( triangle ); // out: {x,y} Incenter var out = Phaser . Geom . Triangle . InCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.InCenter(triangle, out); Circumcenter var out = Phaser . Geom . Triangle . CircumCenter ( triangle ); // out: {x,y} // var out = Phaser.Geom.Triangle.CircumCenter(triangle, out); Circumcircle var out = Phaser . Geom . Triangle . CircumCircle ( triangle ); // out: a circle object // var out = Phaser.Geom.Triangle.CircumCircle(triangle, out); Type: var type = triangle . type ; // 6","title":"Get properties"},{"location":"geom-triangle/#points-shape","text":"Get point at shape's edge var point = triangle . getPoint ( t ); // t : 0 ~ 1 (angle/360) // var point = triangle.getPoint(t, point); // modify point Get a random point inside shape var point = triangle . getRandomPoint (); // var point = triangle.getRandomPoint(point); // modify point Get points around shape's edge var points = triangle . getPoints ( quantity ); // var points = triangle.getPoints(quantity, null, points); // push points or calculate quantity from steps var points = triangle . getPoints ( false , step ); // var points = triangle.getPoints(false, step, points); // push points points : an array of point Point is inside shape var isInside = triangle . contains ( x , y ); or var isInside = Phaser . Geom . Triangle . ContainsPoint ( triangle , point ); Points inside shape var out = Phaser . Geom . Triangle . ContainsArray ( triangle , points , returnFirst ); // var out = Phaser.Geom.Triangle.ContainsArray(triangle, points, returnFirst, out); out : Points inside triangle returnFirst : True to get fist matched point","title":"Point(s) &amp; shape"},{"location":"geom-triangle/#equal","text":"var isEqual = Phaser . Geom . Triangle . Equals ( triangle0 , triangle1 ); Position and radius are equal.","title":"Equal"},{"location":"geom-triangle/#intersection","text":"","title":"Intersection"},{"location":"geom-triangle/#triangle-to-circle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToCircle ( triangle , circle ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToCircle ( triangle , circle ); // var out = Phaser.Geom.Intersects.GetTriangleToCircle(triangle, circle, out);","title":"Triangle to circle"},{"location":"geom-triangle/#triangle-to-rectangle","text":"Is intersection var result = Phaser . Geom . Intersects . RectangleToTriangle ( rect , triangle ); Get intersection points var result = Phaser . Geom . Intersects . GetRectangleToTriangle ( rect , triangle ); // var out = Phaser.Geom.Intersects.GetRectangleToTriangle(rect, triangle, out);","title":"Triangle to rectangle"},{"location":"geom-triangle/#triangle-to-triangle","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToTriangle ( triangleA , triangleB ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToTriangle ( triangleA , triangleB ); // var out = Phaser.Geom.Intersects.GetTriangleToTriangle(triangleA, triangleB, out);","title":"Triangle to triangle"},{"location":"geom-triangle/#triangle-to-line","text":"Is intersection var result = Phaser . Geom . Intersects . TriangleToLine ( triangle , line ); Get intersection points var result = Phaser . Geom . Intersects . GetTriangleToLine ( triangle , line ); // var out = Phaser.Geom.Intersects.GetTriangleToLine(triangle, line, out);","title":"Triangle to line"},{"location":"gesture-overview/","text":"List of gesture plugins \u00b6 One pointer gesture \u00b6 Tap Press Swipe Pan Two pointers gesture \u00b6 Pinch Rotate","title":"Overview"},{"location":"gesture-overview/#list-of-gesture-plugins","text":"","title":"List of gesture plugins"},{"location":"gesture-overview/#one-pointer-gesture","text":"Tap Press Swipe Pan","title":"One pointer gesture"},{"location":"gesture-overview/#two-pointers-gesture","text":"Pinch Rotate","title":"Two pointers gesture"},{"location":"gesture-pan/","text":"Introduction \u00b6 Get pan events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var pan = scene . rexGestures . add . pan ( gameObject , { // enable: true, // threshold: 10, }); enable : Set false to disable input events. threshold : Minimal movement when pointer is down. Enable \u00b6 Get var enable = pan . enable ; // enable: true, or false Set pan . setEnable ( enable ); // enable: true, or false Events \u00b6 Pan \u00b6 pan . on ( 'pan' , function ( pan ){ }, scope ); pan.dx , pan.dy : Vector from previous pointer to current pointer. pan.worldX , pan.worldY : World position of current pointer. pan.x , pan.y : Scene position of current pointer. Pan start \u00b6 pan . on ( 'panstart' , function ( pan ){ }, scope ); pan.startWorldX , pan.startWorldY : World position of pan-start pointer. pan.startX , pan.startY : Scene position of pan-start pointer. Pan end \u00b6 pan . on ( 'panend' , function ( pan ){ }, scope ); pan.endWorldX , pan.endWorldY : World position of pan-end pointer. pan.endX , pan.endY : Scene position of pan-end pointer.","title":"Pan"},{"location":"gesture-pan/#introduction","text":"Get pan events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-pan/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-pan/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-pan/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-pan/#create-instance","text":"var pan = scene . rexGestures . add . pan ( gameObject , { // enable: true, // threshold: 10, }); enable : Set false to disable input events. threshold : Minimal movement when pointer is down.","title":"Create instance"},{"location":"gesture-pan/#enable","text":"Get var enable = pan . enable ; // enable: true, or false Set pan . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-pan/#events","text":"","title":"Events"},{"location":"gesture-pan/#pan","text":"pan . on ( 'pan' , function ( pan ){ }, scope ); pan.dx , pan.dy : Vector from previous pointer to current pointer. pan.worldX , pan.worldY : World position of current pointer. pan.x , pan.y : Scene position of current pointer.","title":"Pan"},{"location":"gesture-pan/#pan-start","text":"pan . on ( 'panstart' , function ( pan ){ }, scope ); pan.startWorldX , pan.startWorldY : World position of pan-start pointer. pan.startX , pan.startY : Scene position of pan-start pointer.","title":"Pan start"},{"location":"gesture-pan/#pan-end","text":"pan . on ( 'panend' , function ( pan ){ }, scope ); pan.endWorldX , pan.endWorldY : World position of pan-end pointer. pan.endX , pan.endY : Scene position of pan-end pointer.","title":"Pan end"},{"location":"gesture-pinch/","text":"Introduction \u00b6 Get scale factor from 2 dragging touch pointers. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var pinch = scene . rexGestures . add . pinch ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire pinch events after dragging distances of catched pointers are larger than this threshold. Enable \u00b6 Get var enable = pinch . enable ; // enable: true, or false Set pinch . setEnable ( enable ); // enable: true, or false Events \u00b6 On dragging \u00b6 On dragging 1 st touch pointer, fired when 1 st touch pointer is moving pinch . on ( 'drag1' , function ( pinch ) { // var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y} }, scope ); pinch.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. pinch . on ( 'pinch' , function ( pinch ) { // var scaleFactor = pinch.scaleFactor; // gameObject.scaleX *= scaleFactor; // gameObject.scaleY *= scaleFactor; }, scope ); pinch.scaleFactor : Rate of distance change between 2 catched touch pointers. On drag start, on drag end \u00b6 On drag 1 touch pointer start, fired when catching 1 st touch pointer. pinch . on ( 'drag1start' , function ( pinch ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. pinch . on ( 'drag1end' , function ( pinch ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. pinch . on ( 'pinchstart' , function ( pinch ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. pinch . on ( 'pinchend' , function ( pinch ) { }, scope ); Scale factor \u00b6 var scaleFactor = pinch . scaleFactor ; Rate of distance change between 2 catched touch pointers. (i.e current distance between 2 catched touch pointers / previous distance ). Drag vector of 1 st touch pointer \u00b6 var drag1Vector = pinch . drag1Vector ; // {x, y} Catched touch pointers \u00b6 Pointer 0, available when state is 1 var pointer0 = pinch . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = pinch . pointers [ 1 ];","title":"Pinch"},{"location":"gesture-pinch/#introduction","text":"Get scale factor from 2 dragging touch pointers. Author: Rex Member of scene","title":"Introduction"},{"location":"gesture-pinch/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-pinch/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-pinch/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-pinch/#create-instance","text":"var pinch = scene . rexGestures . add . pinch ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire pinch events after dragging distances of catched pointers are larger than this threshold.","title":"Create instance"},{"location":"gesture-pinch/#enable","text":"Get var enable = pinch . enable ; // enable: true, or false Set pinch . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-pinch/#events","text":"","title":"Events"},{"location":"gesture-pinch/#on-dragging","text":"On dragging 1 st touch pointer, fired when 1 st touch pointer is moving pinch . on ( 'drag1' , function ( pinch ) { // var drag1Vector = pinch.drag1Vector; // drag1Vector: {x, y} }, scope ); pinch.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. pinch . on ( 'pinch' , function ( pinch ) { // var scaleFactor = pinch.scaleFactor; // gameObject.scaleX *= scaleFactor; // gameObject.scaleY *= scaleFactor; }, scope ); pinch.scaleFactor : Rate of distance change between 2 catched touch pointers.","title":"On dragging"},{"location":"gesture-pinch/#on-drag-start-on-drag-end","text":"On drag 1 touch pointer start, fired when catching 1 st touch pointer. pinch . on ( 'drag1start' , function ( pinch ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. pinch . on ( 'drag1end' , function ( pinch ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. pinch . on ( 'pinchstart' , function ( pinch ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. pinch . on ( 'pinchend' , function ( pinch ) { }, scope );","title":"On drag start, on drag end"},{"location":"gesture-pinch/#scale-factor","text":"var scaleFactor = pinch . scaleFactor ; Rate of distance change between 2 catched touch pointers. (i.e current distance between 2 catched touch pointers / previous distance ).","title":"Scale factor"},{"location":"gesture-pinch/#drag-vector-of-1st-touch-pointer","text":"var drag1Vector = pinch . drag1Vector ; // {x, y}","title":"Drag vector of 1st touch pointer"},{"location":"gesture-pinch/#catched-touch-pointers","text":"Pointer 0, available when state is 1 var pointer0 = pinch . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = pinch . pointers [ 1 ];","title":"Catched touch pointers"},{"location":"gesture-press/","text":"Introduction \u00b6 Get press events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var press = scene . rexGestures . add . press ( gameObject , { // enable: true, // time: 251, // threshold: 9, }); enable : Set false to disable input events. time : Minimal time of the pointer to be pressed. threshold : Minimal movement when pointer is down. Enable \u00b6 Get var enable = press . enable ; // enable: true, or false Set press . setEnable ( enable ); // enable: true, or false Events \u00b6 Pressing start \u00b6 press . on ( 'pressstart' , function ( press ){ }, scope ); press.gameObject : Parent gameobject of this press behavior. press.worldX , press.worldY : World position of pressing start. press.x , press.y : Scene position of pressing start. Pressing end \u00b6 press . on ( 'pressend' , function ( press ){ }, scope );","title":"Press"},{"location":"gesture-press/#introduction","text":"Get press events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-press/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-press/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-press/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-press/#create-instance","text":"var press = scene . rexGestures . add . press ( gameObject , { // enable: true, // time: 251, // threshold: 9, }); enable : Set false to disable input events. time : Minimal time of the pointer to be pressed. threshold : Minimal movement when pointer is down.","title":"Create instance"},{"location":"gesture-press/#enable","text":"Get var enable = press . enable ; // enable: true, or false Set press . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-press/#events","text":"","title":"Events"},{"location":"gesture-press/#pressing-start","text":"press . on ( 'pressstart' , function ( press ){ }, scope ); press.gameObject : Parent gameobject of this press behavior. press.worldX , press.worldY : World position of pressing start. press.x , press.y : Scene position of pressing start.","title":"Pressing start"},{"location":"gesture-press/#pressing-end","text":"press . on ( 'pressend' , function ( press ){ }, scope );","title":"Pressing end"},{"location":"gesture-rotate/","text":"Introduction \u00b6 Get spin angle from 2 dragging touch pointers. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var rotate = scene . rexGestures . add . rotate ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire rotate events after dragging distances of catched pointers are larger than this threshold. Enable \u00b6 Get var enable = rotate . enable ; // enable: true, or false Set rotate . setEnable ( enable ); // enable: true, or false Events \u00b6 On dragging \u00b6 On dragging 1 st touch pointer, fired when 1 st touch pointer is moving rotate . on ( 'drag1' , function ( rotate ) { // var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y} }, scope ); rotate.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. rotate . on ( 'rotate' , function ( rotate ) { // rotate.spinObject(gameObejects); // var angle = rotate.rotation; }, scope ); rotate.spinObject(gameObejects) : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers. rotate.rotation : Return spin angle of 2 dragging pointers, in radius. On drag start, on drag end \u00b6 On drag 1 touch pointer start, fired when catching 1 st touch pointer. rotate . on ( 'drag1start' , function ( rotate ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. rotate . on ( 'drag1end' , function ( rotate ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. rotate . on ( 'rotatestart' , function ( rotate ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. rotate . on ( 'rotateend' , function ( rotate ) { }, scope ); Spin game object \u00b6 rotate . spinObject ( gameObejects ); Drag and spin game objects around current center of 2 dragging pointers. Uses this function under 'rotate' event. gameObejects : An array of game object, or a game object. Spin angle \u00b6 var angle = rotate . rotation ; Spin angle of 2 dragging pointers, in radius. Drag vector of 1 st touch pointer \u00b6 var drag1Vector = rotate . drag1Vector ; // {x, y} Catched touch pointers \u00b6 Pointer 0, available when state is 1 var pointer0 = rotate . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = rotate . pointers [ 1 ];","title":"Rotate"},{"location":"gesture-rotate/#introduction","text":"Get spin angle from 2 dragging touch pointers. Author: Rex Member of scene","title":"Introduction"},{"location":"gesture-rotate/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-rotate/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-rotate/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-rotate/#create-instance","text":"var rotate = scene . rexGestures . add . rotate ({ // enable: true, // bounds: undefined, // threshold: 0, }); enable : Set false to disable input events. bounds : A rectangle object or undefined (to use game window as rectangle object), for detecting the position of cursor. threshold : Fire rotate events after dragging distances of catched pointers are larger than this threshold.","title":"Create instance"},{"location":"gesture-rotate/#enable","text":"Get var enable = rotate . enable ; // enable: true, or false Set rotate . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-rotate/#events","text":"","title":"Events"},{"location":"gesture-rotate/#on-dragging","text":"On dragging 1 st touch pointer, fired when 1 st touch pointer is moving rotate . on ( 'drag1' , function ( rotate ) { // var drag1Vector = rotate.drag1Vector; // drag1Vector: {x, y} }, scope ); rotate.drag1Vector : Drag vector from prevoius touch position to current touch position of 1 st catched touch pointer. On dragging 2 touch pointers, fired when any catched touch pointer moved. rotate . on ( 'rotate' , function ( rotate ) { // rotate.spinObject(gameObejects); // var angle = rotate.rotation; }, scope ); rotate.spinObject(gameObejects) : Drag and spin an array of game object, or a game object around current center of 2 dragging pointers. rotate.rotation : Return spin angle of 2 dragging pointers, in radius.","title":"On dragging"},{"location":"gesture-rotate/#on-drag-start-on-drag-end","text":"On drag 1 touch pointer start, fired when catching 1 st touch pointer. rotate . on ( 'drag1start' , function ( rotate ) { }, scope ); On drag 1 touch pointer end, fired when releasing the last one catched touch pointer. rotate . on ( 'drag1end' , function ( rotate ) { }, scope ); On drag 2 touch pointers start, fired when catching 2 touch pointers. rotate . on ( 'rotatestart' , function ( rotate ) { }, scope ); On drag 2 touch pointers end, fired when releasing any catched touch pointer. rotate . on ( 'rotateend' , function ( rotate ) { }, scope );","title":"On drag start, on drag end"},{"location":"gesture-rotate/#spin-game-object","text":"rotate . spinObject ( gameObejects ); Drag and spin game objects around current center of 2 dragging pointers. Uses this function under 'rotate' event. gameObejects : An array of game object, or a game object.","title":"Spin game object"},{"location":"gesture-rotate/#spin-angle","text":"var angle = rotate . rotation ; Spin angle of 2 dragging pointers, in radius.","title":"Spin angle"},{"location":"gesture-rotate/#drag-vector-of-1st-touch-pointer","text":"var drag1Vector = rotate . drag1Vector ; // {x, y}","title":"Drag vector of 1st touch pointer"},{"location":"gesture-rotate/#catched-touch-pointers","text":"Pointer 0, available when state is 1 var pointer0 = rotate . pointers [ 0 ]; Position of pointer var x = pointer0 . x ; var y = pointer0 . y ; var worldX = pointer0 . worldX ; var worldY = pointer0 . worldY ; Pointer 1, available when state is 2 var pointer0 = rotate . pointers [ 1 ];","title":"Catched touch pointers"},{"location":"gesture-swipe/","text":"Introduction \u00b6 Get swipe events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var swipe = scene . rexGestures . add . swipe ( gameObject , { // enable: true, // threshold: 10, // velocityThreshold: 1000, // direction: '8dir', }); enable : Set false to disable input events. time : Max time of the pointer to be down. threshold : Minimal movement when pointer is down. velocityThreshold : Minimal dragging speed. dir : 'up&down' , or 0 : Get up or down state only. 'left&right' , or 1 : Get left or right state only. '4dir' , or 2 : Get up , down , left or right state. '8dir' , or 3 : Get up , up / left , up / right , down , down / left , down / right , left , or right state. Enable \u00b6 Get var enable = swipe . enable ; // enable: true, or false Set swipe . setEnable ( enable ); // enable: true, or false Events \u00b6 Swipe \u00b6 swipe . on ( 'swipe' , function ( swipe ){ }, scope ); swipe.left , swipe.right , swipe.up , swipe.down : Swipe direction states. swipe.dragVelocity : Velocity of dragging.","title":"Swipe"},{"location":"gesture-swipe/#introduction","text":"Get swipe events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-swipe/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-swipe/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-swipe/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-swipe/#create-instance","text":"var swipe = scene . rexGestures . add . swipe ( gameObject , { // enable: true, // threshold: 10, // velocityThreshold: 1000, // direction: '8dir', }); enable : Set false to disable input events. time : Max time of the pointer to be down. threshold : Minimal movement when pointer is down. velocityThreshold : Minimal dragging speed. dir : 'up&down' , or 0 : Get up or down state only. 'left&right' , or 1 : Get left or right state only. '4dir' , or 2 : Get up , down , left or right state. '8dir' , or 3 : Get up , up / left , up / right , down , down / left , down / right , left , or right state.","title":"Create instance"},{"location":"gesture-swipe/#enable","text":"Get var enable = swipe . enable ; // enable: true, or false Set swipe . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-swipe/#events","text":"","title":"Events"},{"location":"gesture-swipe/#swipe","text":"swipe . on ( 'swipe' , function ( swipe ){ }, scope ); swipe.left , swipe.right , swipe.up , swipe.down : Swipe direction states. swipe.dragVelocity : Velocity of dragging.","title":"Swipe"},{"location":"gesture-tap/","text":"Introduction \u00b6 Get tap/multi-taps events of a game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var tap = scene . rexGestures . add . tap ( gameObject , { // enable: true, // time: 250, // tapInterval: 200, // threshold: 9, // tapOffset: 10, // taps: undefined, // minTaps: undefined, // maxTaps: undefined, }); enable : Set false to disable input events. time : Max time of the pointer to be down. tapInterval : Max time between the multi-tap taps. threshold : Minimal movement when pointer is down. tapOffset : A multi-tap can be a bit off the initial position. taps : Fire tap event only when taps count reaches this value. undefined : Fire tap event only when tapped end. i.e pointer-up time exceeds tapInterval . minTaps : Fire tap event only when taps count is larger than this value. undefined : Don't check taps count. maxTaps : Fire tap event only when taps count is less than this value. undefined : Don't check taps count. Enable \u00b6 Get var enable = tap . enable ; // enable: true, or false Set tap . setEnable ( enable ); // enable: true, or false Events \u00b6 Tap \u00b6 tap . on ( 'tap' , function ( tap ){ }, scope ); tap.tapsCount : Taps count. tap.gameObject : Parent gameobject of this tap behavior. tap.worldX , tap.worldY : World position of first tapping. tap.x , tap.y : Scene position of first tapping. tap . on ( tapsCount + 'tap' , function ( tap ){ }, scope ); tapsCount + 'tap' : 1tap , 2tap , 3tap , etc ... Tapping start \u00b6 Each pointer-down will increase taps count and fire tappingstart event. tap . on ( 'tappingstart' , function ( tap ){ }, scope ); Is tap \u00b6 var isTapped = tap . isTapped ; Return true if tapped end.","title":"Tap"},{"location":"gesture-tap/#introduction","text":"Get tap/multi-taps events of a game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"gesture-tap/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gesture-tap/#usage","text":"Sample code","title":"Usage"},{"location":"gesture-tap/#install-scene-plugin","text":"Install plugin in configuration of game import GesturesPlugin from './plugins/gestures-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexGestures' , plugin : GesturesPlugin , mapping : 'rexGestures' }] // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"gesture-tap/#create-instance","text":"var tap = scene . rexGestures . add . tap ( gameObject , { // enable: true, // time: 250, // tapInterval: 200, // threshold: 9, // tapOffset: 10, // taps: undefined, // minTaps: undefined, // maxTaps: undefined, }); enable : Set false to disable input events. time : Max time of the pointer to be down. tapInterval : Max time between the multi-tap taps. threshold : Minimal movement when pointer is down. tapOffset : A multi-tap can be a bit off the initial position. taps : Fire tap event only when taps count reaches this value. undefined : Fire tap event only when tapped end. i.e pointer-up time exceeds tapInterval . minTaps : Fire tap event only when taps count is larger than this value. undefined : Don't check taps count. maxTaps : Fire tap event only when taps count is less than this value. undefined : Don't check taps count.","title":"Create instance"},{"location":"gesture-tap/#enable","text":"Get var enable = tap . enable ; // enable: true, or false Set tap . setEnable ( enable ); // enable: true, or false","title":"Enable"},{"location":"gesture-tap/#events","text":"","title":"Events"},{"location":"gesture-tap/#tap","text":"tap . on ( 'tap' , function ( tap ){ }, scope ); tap.tapsCount : Taps count. tap.gameObject : Parent gameobject of this tap behavior. tap.worldX , tap.worldY : World position of first tapping. tap.x , tap.y : Scene position of first tapping. tap . on ( tapsCount + 'tap' , function ( tap ){ }, scope ); tapsCount + 'tap' : 1tap , 2tap , 3tap , etc ...","title":"Tap"},{"location":"gesture-tap/#tapping-start","text":"Each pointer-down will increase taps count and fire tappingstart event. tap . on ( 'tappingstart' , function ( tap ){ }, scope );","title":"Tapping start"},{"location":"gesture-tap/#is-tap","text":"var isTapped = tap . isTapped ; Return true if tapped end.","title":"Is tap"},{"location":"graphics/","text":"Introduction \u00b6 Drawing on webgl or canvas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add graphics object \u00b6 var graphics = scene . add . graphics (); or var graphics = scene . add . graphics ({ x : 0 , y : 0 , // lineStyle: { // width: 1, // color: 0xffffff, // alpha: 1 // }, // fillStyle: { // color: 0xffffff, // alpha: 1 // }, add : true }); Custom class \u00b6 Define class class MyGraphics extends Phaser . GameObjects . Graphics { constructor ( scene , options ) { super ( scene , options ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var graphics = new MyGraphics ( scene , options ); Drawing commands \u00b6 Set style \u00b6 Set default line style and fill style graphics . setDefaultStyles ({ lineStyle : { width : 1 , color : 0xffffff , alpha : 1 }, fillStyle : { color : 0xffffff , alpha : 1 } }); Set line style graphics . lineStyle ( lineWidth , color , alpha ); // color: 0xRRGGBB Set fill style Fill color graphics . fillStyle ( color , alpha ); // color: 0xRRGGBB Fill gradient color (WebGL only) graphics . fillStyle ( topLeft , topRight , bottomLeft , bottomRight ); // alpha= 1 // graphics.fillStyle(topLeft, topRight, bottomLeft, bottomRight, alpha); topLeft : The tint being applied to the top-left of the Game Object. topRight : The tint being applied to the top-right of the Game Object. bottomLeft : The tint being applied to the bottom-left of the Game Object. bottomRight : The tint being applied to the bottom-right of the Game Object. Clear \u00b6 graphics . clear (); Path \u00b6 graphics . beginPath (); graphics . closePath (); graphics . fillPath (); // = graphics.fill() graphics . strokePath (); // = graphics.stroke() Rectangle \u00b6 graphics . fillRectShape ( rect ); // rect: {x, y, width, height} graphics . fillRect ( x , y , width , height ); graphics . strokeRectShape ( rect ); // rect: {x, y, width, height} graphics . strokeRect ( x , y , width , height ); Rounded rectangle \u00b6 graphics . fillRoundedRect ( x , y , width , height , radius ); graphics . strokeRoundedRect ( x , y , width , height , radius ); radius : number or an object {tl, tr, bl, br} Triangle \u00b6 graphics . fillTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . fillTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); graphics . strokeTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . strokeTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Point \u00b6 graphics . fillPointShape ( point , size ); // point: {x, y} graphics . fillPoint ( x , y , size ); Line \u00b6 graphics . strokeLineShape ( line ); // line: {x1, y1, x2, y2} graphics . lineBetween ( x1 , y1 , x2 , y2 ); graphics . lineTo ( x , y ); graphics . moveTo ( x , y ); Lines \u00b6 graphics . strokePoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] graphics . fillPoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] points : Array of {x, y} closeShape : When true , the shape is closed by joining the last point to the first point. closePath : When true , the path is closed before being stroked. endIndex : The index of points to stop drawing at. Defaults to points.length . Circle \u00b6 graphics . fillCircleShape ( circle ); // circle: {x, y, radius} graphics . fillCircle ( x , y , radius ); graphics . strokeCircleShape ( circle ); // circle: {x, y, radius} graphics . strokeCircle ( x , y , radius ); Draw or fill circle shape by points. Ellipse \u00b6 graphics . strokeEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . strokeEllipse ( x , y , width , height , smoothness ); graphics . fillEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . fillEllipse ( x , y , width , height , smoothness ); Draw or fill ellipse shape by points. Arc \u00b6 graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw arc curve by points. Pie-chart slice \u00b6 graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw pie-chart slice shape by points. Fill this shape graphics . fillPath (); Fill pattern \u00b6 Load texture pattern graphics . setTexture ( key , frame , mode ); mode : 0 : Multiply 1 : Alpha only 2 : Texture only Fill pattern graphics . fillRect ( x , y , width , height ); WebGL only Clear pattern \u00b6 graphics . setTexture (); Transfer \u00b6 graphics . save (); graphics . restore (); graphics . translateCanvas ( x , y ); graphics . scaleCanvas ( x , y ); graphics . rotateCanvas ( radians ); Generate texture \u00b6 graphics . generateTexture ( key , width , height ); // key: texture key Create mask \u00b6 var mask = graphics . createGeometryMask (); See mask","title":"Graphics"},{"location":"graphics/#introduction","text":"Drawing on webgl or canvas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"graphics/#usage","text":"","title":"Usage"},{"location":"graphics/#add-graphics-object","text":"var graphics = scene . add . graphics (); or var graphics = scene . add . graphics ({ x : 0 , y : 0 , // lineStyle: { // width: 1, // color: 0xffffff, // alpha: 1 // }, // fillStyle: { // color: 0xffffff, // alpha: 1 // }, add : true });","title":"Add graphics object"},{"location":"graphics/#custom-class","text":"Define class class MyGraphics extends Phaser . GameObjects . Graphics { constructor ( scene , options ) { super ( scene , options ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var graphics = new MyGraphics ( scene , options );","title":"Custom class"},{"location":"graphics/#drawing-commands","text":"","title":"Drawing commands"},{"location":"graphics/#set-style","text":"Set default line style and fill style graphics . setDefaultStyles ({ lineStyle : { width : 1 , color : 0xffffff , alpha : 1 }, fillStyle : { color : 0xffffff , alpha : 1 } }); Set line style graphics . lineStyle ( lineWidth , color , alpha ); // color: 0xRRGGBB Set fill style Fill color graphics . fillStyle ( color , alpha ); // color: 0xRRGGBB Fill gradient color (WebGL only) graphics . fillStyle ( topLeft , topRight , bottomLeft , bottomRight ); // alpha= 1 // graphics.fillStyle(topLeft, topRight, bottomLeft, bottomRight, alpha); topLeft : The tint being applied to the top-left of the Game Object. topRight : The tint being applied to the top-right of the Game Object. bottomLeft : The tint being applied to the bottom-left of the Game Object. bottomRight : The tint being applied to the bottom-right of the Game Object.","title":"Set style"},{"location":"graphics/#clear","text":"graphics . clear ();","title":"Clear"},{"location":"graphics/#path","text":"graphics . beginPath (); graphics . closePath (); graphics . fillPath (); // = graphics.fill() graphics . strokePath (); // = graphics.stroke()","title":"Path"},{"location":"graphics/#rectangle","text":"graphics . fillRectShape ( rect ); // rect: {x, y, width, height} graphics . fillRect ( x , y , width , height ); graphics . strokeRectShape ( rect ); // rect: {x, y, width, height} graphics . strokeRect ( x , y , width , height );","title":"Rectangle"},{"location":"graphics/#rounded-rectangle","text":"graphics . fillRoundedRect ( x , y , width , height , radius ); graphics . strokeRoundedRect ( x , y , width , height , radius ); radius : number or an object {tl, tr, bl, br}","title":"Rounded rectangle"},{"location":"graphics/#triangle","text":"graphics . fillTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . fillTriangle ( x1 , y1 , x2 , y2 , x3 , y3 ); graphics . strokeTriangleShape ( triangle ); // triangle: {x1, y1, x2, y2, x3, y3} graphics . strokeTriangle ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Triangle"},{"location":"graphics/#point","text":"graphics . fillPointShape ( point , size ); // point: {x, y} graphics . fillPoint ( x , y , size );","title":"Point"},{"location":"graphics/#line","text":"graphics . strokeLineShape ( line ); // line: {x1, y1, x2, y2} graphics . lineBetween ( x1 , y1 , x2 , y2 ); graphics . lineTo ( x , y ); graphics . moveTo ( x , y );","title":"Line"},{"location":"graphics/#lines","text":"graphics . strokePoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] graphics . fillPoints ( points , closeShape , closePath , endIndex ); // points: [{x, y}, ...] points : Array of {x, y} closeShape : When true , the shape is closed by joining the last point to the first point. closePath : When true , the path is closed before being stroked. endIndex : The index of points to stop drawing at. Defaults to points.length .","title":"Lines"},{"location":"graphics/#circle","text":"graphics . fillCircleShape ( circle ); // circle: {x, y, radius} graphics . fillCircle ( x , y , radius ); graphics . strokeCircleShape ( circle ); // circle: {x, y, radius} graphics . strokeCircle ( x , y , radius ); Draw or fill circle shape by points.","title":"Circle"},{"location":"graphics/#ellipse","text":"graphics . strokeEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . strokeEllipse ( x , y , width , height , smoothness ); graphics . fillEllipseShape ( ellipse , smoothness ); // ellipse: Phaser.Geom.Ellipse graphics . fillEllipse ( x , y , width , height , smoothness ); Draw or fill ellipse shape by points.","title":"Ellipse"},{"location":"graphics/#arc","text":"graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . arc ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw arc curve by points.","title":"Arc"},{"location":"graphics/#pie-chart-slice","text":"graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise ); graphics . slice ( x , y , radius , startAngle , endAngle , anticlockwise , overshoot ); Draw pie-chart slice shape by points. Fill this shape graphics . fillPath ();","title":"Pie-chart slice"},{"location":"graphics/#fill-pattern","text":"Load texture pattern graphics . setTexture ( key , frame , mode ); mode : 0 : Multiply 1 : Alpha only 2 : Texture only Fill pattern graphics . fillRect ( x , y , width , height ); WebGL only","title":"Fill pattern"},{"location":"graphics/#clear-pattern","text":"graphics . setTexture ();","title":"Clear pattern"},{"location":"graphics/#transfer","text":"graphics . save (); graphics . restore (); graphics . translateCanvas ( x , y ); graphics . scaleCanvas ( x , y ); graphics . rotateCanvas ( radians );","title":"Transfer"},{"location":"graphics/#generate-texture","text":"graphics . generateTexture ( key , width , height ); // key: texture key","title":"Generate texture"},{"location":"graphics/#create-mask","text":"var mask = graphics . createGeometryMask (); See mask","title":"Create mask"},{"location":"gridalign/","text":"Introduction \u00b6 Align objects on quadrilateral or hexagon grid. See also built-in grid-align . Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGridAlign from './plugins/gridalign.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GridAlignPlugin from './plugins/gridalign-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGridAlign' , plugin : GridAlignPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Quadrilateral grid \u00b6 scene . plugins . get ( 'rexGridAlign' ). quad ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , type : 0 , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Hexagon grid \u00b6 scene . plugins . get ( 'rexGridAlign' ). hexagon ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , staggeraxis : 'x' , staggerindex : 'odd' , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Types of hexagon grid \u00b6 Reference odd-r : staggeraxis = x , staggerindex = odd even-r : staggeraxis = x , staggerindex = even odd-q : staggeraxis = y , staggerindex = odd even-q :staggeraxis = y , staggerindex = even","title":"Quad/Hexagon grid align"},{"location":"gridalign/#introduction","text":"Align objects on quadrilateral or hexagon grid. See also built-in grid-align . Author: Rex Methods","title":"Introduction"},{"location":"gridalign/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"gridalign/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"gridalign/#import-class","text":"import rexGridAlign from './plugins/gridalign.js' ;","title":"Import class"},{"location":"gridalign/#install-global-plugin","text":"Install plugin in configuration of game import GridAlignPlugin from './plugins/gridalign-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGridAlign' , plugin : GridAlignPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"gridalign/#quadrilateral-grid","text":"scene . plugins . get ( 'rexGridAlign' ). quad ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , type : 0 , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. type 0 , or orthogonal 1 , or isometric position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Quadrilateral grid"},{"location":"gridalign/#hexagon-grid","text":"scene . plugins . get ( 'rexGridAlign' ). hexagon ( items , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , staggeraxis : 'x' , staggerindex : 'odd' , position : Phaser . Display . Align . CENTER , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. staggeraxis 0 , or y 1 , or x staggerindex 0 , or even 1 , or odd position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Hexagon grid"},{"location":"gridalign/#types-of-hexagon-grid","text":"Reference odd-r : staggeraxis = x , staggerindex = odd even-r : staggeraxis = x , staggerindex = even odd-q : staggeraxis = y , staggerindex = odd even-q :staggeraxis = y , staggerindex = even","title":"Types of hexagon grid"},{"location":"gridtable/","text":"Introduction \u00b6 Viewer of grid table, to manipulate game object of each visible cell. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexGridTablePlugin' , plugin : GridTablePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var config = { cellsCount : 0 , columns : 1 , cellHeight : 30 , cellWidth : 30 , cellVisibleCallback : null , cellVisibleCallbackScope : undefined , reuseCellContainer : false , cellInvisibleCallback : null , cellInvisibleCallbackScope : undefined , clamplTableOXY : true , scrollMode : 0 , // 0|'v'|'vertical'|1|'h'|'horizontal' mask : { padding : 0 } } var table = scene . add . rexGridTable ( x , y , width , height , config ); cellsCount : Total cells count. columns : Columns count of each row. cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . cellVisibleCallback , cellVisibleCallbackScope : Callback when cell begins visible. reuseCellContainer : Set true to reuse cell container when cell is visible. cellInvisibleCallback , cellInvisibleCallbackScope : Callback when cell begins invisible. clamplTableOXY : Set true to clamp tableOX , tableOY when out-of-bound, Set false when dragging by scroller scrollMode : 0 , or 'v' , or 'vertical' : Scroll table vertically. 1 , or 'h' , or 'horizontal' : Scroll table horizontally. mask : A rectangle mask of cells mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. Add grid table from JSON var table = scene . make . rexGridTable ({ x : 0 , y : 0 , width : 256 , height : 256 , // cellsCount: 0, // total cells count // ... }); Custom class \u00b6 Define class class MyGridTable extends GridTable { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var table = new MyGridTable ( scene , x , y , width , height , config ); Cell begins visible \u00b6 Add container of cell when it begins visible in event cellvisible . table . on ( 'cellvisible' , function ( cell , cellContainer ){ if ( cellContainer === null ) { // No reusable cell container, create a new one var scene = cell . scene ; // cellContainer = scene.add.container(); } // Set child properties of cell container ... cell . setContainer ( cellContainer ); // Assign cell container }) It is equal to cellVisibleCallback in configuration. { // ... cellVisibleCallback : function ( cell , cellContainer ) { cell . setContainer ( cellContainer ); // Assign cell container }, // ... } cell Scene object of grid table. var scene = cell . scene ; Index of cell. var index = cell . index ; Size of cell. var cellWidth = cell . width ; var cellHeight = cell . height ; Change size of cell : Change cell height in scoll-vertical mode. cell . height = newHeight ; Change cell width in scroll-horizontal mode. cell . width = newWidth ; Assign cell container. Set origin point of this cell container to (0,0). cell . setContainer ( cellContainer ); cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. Each cell only has one container gameObject, old container will be destroyed when assigning a new container. Cell begins invisible \u00b6 Container of an invisible cell will be destroyed automatically. To resue container gameObject Set reuseCellContainer to true to put invisible cell container into object pool. Or, pop that container by cell.popContainer() in event cellinvisible . table . on ( 'cellinvisible' , function ( cell ){ // var container = cell.popContainer(); }) It is equal to cellInvisibleCallback in configuration. { // ... cellInvisibleCallback : function ( cell ) { // var container = cell.popContainer(); }, // ... } Scroll table content \u00b6 Set table . setTableOY ( oy ). updateTable (); table . addTableOY ( dy ). updateTable (); table . setTableOX ( ox ). updateTable (); table . addTableOX ( dx ). updateTable (); table . setTableOXY ( ox , oy ). updateTable (); table . addTableOXY ( dx , dy ). updateTable (); or table . tableOY = oy ; // include table.updateTable() table . tableOX = ox ; These will trigger cellvisible , or cellinvisible events. Get var tableOY = table . tableOY ; var tableOX = table . tableOX ; Use case Scroll table by scroller behavior. Scroll by percentage \u00b6 Set table . setTableOYByPercentage ( t ). updateTable (); // t: 0~1 or table . t = t ; // include table.updateTable() Get var t = table . getTableOYPercentage (); //var t = table.t; Use case Scroll table by slider behavior. Refresh table content \u00b6 Refresh all visible cells. table . updateTable ( true ); Table size in cells \u00b6 Set table size table . setGridSize ( colCount , rowCount ). updateTable (); Total cells count \u00b6 Get var count = table . cellsCount ; Set table . setCellsCount ( count ). updateTable (); Columns count \u00b6 Get var columnCount = table . columnCount ; Set table . setColumnCount ( count ). updateTable (); Table size in pixels \u00b6 Table height in pixels var tableHeight = table . tableHeight ; Table width in pixels var tableWidth = table . tableWidth ; Bounds of tableOX, tableOY \u00b6 Top bound of tableOY var topTableOY = table . topTableOY ; // 0 Bottom bound of tableOY var bottomTableOY = table . bottomTableOY ; // A negative number Left bound of tableOX var leftTableOX = table . leftTableOX ; // 0 Right bound of tableOX var rightTableOX = table . rightTableOX ; // A negative number Use case Set bounds of scroller Resize table \u00b6 table . resize ( width , height ); Cell \u00b6 Get cell \u00b6 var cell = table . getCell ( cellIndex ); Cell height \u00b6 Get var height = cell . height ; Set cell height, only worked in scoll-vertical mode. cell . height = height ; // cell.setHeight(height); or table . setCellHeight ( cellIndex , cellHeight ); Refresh table after the cell size is changed. table . updateTable ( true ); Cell width \u00b6 Get var width = cell . width ; Set cell width, only worked in scoll-horizontal mode. cell . width = width ; // cell.setWidth(width); or table . setCellWidth ( cellIndex , cellWidth ); Refresh table after the cell size is changed. table . updateTable ( true ); Fore each visible cell \u00b6 For when you absolutely know this Set won't be modified during the iteration table . iterateVisibleCell ( function ( cell ){ // ... }); For when you know this Set will be modified during the iteration. table . eachVisibleCell ( function ( cell ){ // ... }); Container \u00b6 Get var container = cell . getContainer (); Pop (get and remove) var container = cell . popContainer (); Set cell . setContainer ( container ); Remove cell . destroyContainer (); Properties \u00b6 var cellIndex = cell . index ;","title":"Grid table"},{"location":"gridtable/#introduction","text":"Viewer of grid table, to manipulate game object of each visible cell. Author: Rex Game object","title":"Introduction"},{"location":"gridtable/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"gridtable/#usage","text":"Sample code","title":"Usage"},{"location":"gridtable/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexGridTablePlugin' , plugin : GridTablePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"gridtable/#create-instance","text":"var config = { cellsCount : 0 , columns : 1 , cellHeight : 30 , cellWidth : 30 , cellVisibleCallback : null , cellVisibleCallbackScope : undefined , reuseCellContainer : false , cellInvisibleCallback : null , cellInvisibleCallbackScope : undefined , clamplTableOXY : true , scrollMode : 0 , // 0|'v'|'vertical'|1|'h'|'horizontal' mask : { padding : 0 } } var table = scene . add . rexGridTable ( x , y , width , height , config ); cellsCount : Total cells count. columns : Columns count of each row. cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . cellVisibleCallback , cellVisibleCallbackScope : Callback when cell begins visible. reuseCellContainer : Set true to reuse cell container when cell is visible. cellInvisibleCallback , cellInvisibleCallbackScope : Callback when cell begins invisible. clamplTableOXY : Set true to clamp tableOX , tableOY when out-of-bound, Set false when dragging by scroller scrollMode : 0 , or 'v' , or 'vertical' : Scroll table vertically. 1 , or 'h' , or 'horizontal' : Scroll table horizontally. mask : A rectangle mask of cells mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. Add grid table from JSON var table = scene . make . rexGridTable ({ x : 0 , y : 0 , width : 256 , height : 256 , // cellsCount: 0, // total cells count // ... });","title":"Create instance"},{"location":"gridtable/#custom-class","text":"Define class class MyGridTable extends GridTable { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var table = new MyGridTable ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"gridtable/#cell-begins-visible","text":"Add container of cell when it begins visible in event cellvisible . table . on ( 'cellvisible' , function ( cell , cellContainer ){ if ( cellContainer === null ) { // No reusable cell container, create a new one var scene = cell . scene ; // cellContainer = scene.add.container(); } // Set child properties of cell container ... cell . setContainer ( cellContainer ); // Assign cell container }) It is equal to cellVisibleCallback in configuration. { // ... cellVisibleCallback : function ( cell , cellContainer ) { cell . setContainer ( cellContainer ); // Assign cell container }, // ... } cell Scene object of grid table. var scene = cell . scene ; Index of cell. var index = cell . index ; Size of cell. var cellWidth = cell . width ; var cellHeight = cell . height ; Change size of cell : Change cell height in scoll-vertical mode. cell . height = newHeight ; Change cell width in scroll-horizontal mode. cell . width = newWidth ; Assign cell container. Set origin point of this cell container to (0,0). cell . setContainer ( cellContainer ); cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. Each cell only has one container gameObject, old container will be destroyed when assigning a new container.","title":"Cell begins visible"},{"location":"gridtable/#cell-begins-invisible","text":"Container of an invisible cell will be destroyed automatically. To resue container gameObject Set reuseCellContainer to true to put invisible cell container into object pool. Or, pop that container by cell.popContainer() in event cellinvisible . table . on ( 'cellinvisible' , function ( cell ){ // var container = cell.popContainer(); }) It is equal to cellInvisibleCallback in configuration. { // ... cellInvisibleCallback : function ( cell ) { // var container = cell.popContainer(); }, // ... }","title":"Cell begins invisible"},{"location":"gridtable/#scroll-table-content","text":"Set table . setTableOY ( oy ). updateTable (); table . addTableOY ( dy ). updateTable (); table . setTableOX ( ox ). updateTable (); table . addTableOX ( dx ). updateTable (); table . setTableOXY ( ox , oy ). updateTable (); table . addTableOXY ( dx , dy ). updateTable (); or table . tableOY = oy ; // include table.updateTable() table . tableOX = ox ; These will trigger cellvisible , or cellinvisible events. Get var tableOY = table . tableOY ; var tableOX = table . tableOX ; Use case Scroll table by scroller behavior.","title":"Scroll table content"},{"location":"gridtable/#scroll-by-percentage","text":"Set table . setTableOYByPercentage ( t ). updateTable (); // t: 0~1 or table . t = t ; // include table.updateTable() Get var t = table . getTableOYPercentage (); //var t = table.t; Use case Scroll table by slider behavior.","title":"Scroll by percentage"},{"location":"gridtable/#refresh-table-content","text":"Refresh all visible cells. table . updateTable ( true );","title":"Refresh table content"},{"location":"gridtable/#table-size-in-cells","text":"Set table size table . setGridSize ( colCount , rowCount ). updateTable ();","title":"Table size in cells"},{"location":"gridtable/#total-cells-count","text":"Get var count = table . cellsCount ; Set table . setCellsCount ( count ). updateTable ();","title":"Total cells count"},{"location":"gridtable/#columns-count","text":"Get var columnCount = table . columnCount ; Set table . setColumnCount ( count ). updateTable ();","title":"Columns count"},{"location":"gridtable/#table-size-in-pixels","text":"Table height in pixels var tableHeight = table . tableHeight ; Table width in pixels var tableWidth = table . tableWidth ;","title":"Table size in pixels"},{"location":"gridtable/#bounds-of-tableox-tableoy","text":"Top bound of tableOY var topTableOY = table . topTableOY ; // 0 Bottom bound of tableOY var bottomTableOY = table . bottomTableOY ; // A negative number Left bound of tableOX var leftTableOX = table . leftTableOX ; // 0 Right bound of tableOX var rightTableOX = table . rightTableOX ; // A negative number Use case Set bounds of scroller","title":"Bounds of tableOX, tableOY"},{"location":"gridtable/#resize-table","text":"table . resize ( width , height );","title":"Resize table"},{"location":"gridtable/#cell","text":"","title":"Cell"},{"location":"gridtable/#get-cell","text":"var cell = table . getCell ( cellIndex );","title":"Get cell"},{"location":"gridtable/#cell-height","text":"Get var height = cell . height ; Set cell height, only worked in scoll-vertical mode. cell . height = height ; // cell.setHeight(height); or table . setCellHeight ( cellIndex , cellHeight ); Refresh table after the cell size is changed. table . updateTable ( true );","title":"Cell height"},{"location":"gridtable/#cell-width","text":"Get var width = cell . width ; Set cell width, only worked in scoll-horizontal mode. cell . width = width ; // cell.setWidth(width); or table . setCellWidth ( cellIndex , cellWidth ); Refresh table after the cell size is changed. table . updateTable ( true );","title":"Cell width"},{"location":"gridtable/#fore-each-visible-cell","text":"For when you absolutely know this Set won't be modified during the iteration table . iterateVisibleCell ( function ( cell ){ // ... }); For when you know this Set will be modified during the iteration. table . eachVisibleCell ( function ( cell ){ // ... });","title":"Fore each visible cell"},{"location":"gridtable/#container","text":"Get var container = cell . getContainer (); Pop (get and remove) var container = cell . popContainer (); Set cell . setContainer ( container ); Remove cell . destroyContainer ();","title":"Container"},{"location":"gridtable/#properties","text":"var cellIndex = cell . index ;","title":"Properties"},{"location":"group/","text":"Introduction \u00b6 Objects pool, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add group object \u00b6 var group = scene . add . group ( config ); // var group = scene.add.group(gameObjects, config); // Add game objects into group config { classType : Phaser . GameObjects . Sprite , defaultKey : null , defaultFrame : null , active : true , maxSize : - 1 , runChildUpdate : false , createCallback : null , removeCallback : null , createMultipleCallback : null } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image runChildUpdate : Set true to run gameObject.update() every tick. createCallback : A function to be called when adding or creating group members. var callback = function ( gameObject ) { } removeCallback : A function to be called when removing group members. var callback = function ( gameObject ) { } createMultipleCallback : A function to be called when creating several group members at once. var callback = function ( gameObjects ) { } Add game object \u00b6 group . add ( gameObject ); // group.add(gameObject, true); // add this game object to display and update list of scene group . addMultiple ( gameObjects ); // array of game objects // group.addMultiple(gameObjects, true); Game object will only be added once. Game object will be removed automatically when destroyed. Remove game object \u00b6 group . remove ( gameObject ); // group.remove(gameObject, true); // also remove this game object from display and update list of scene Remove all game objects group . clear (); // group.clear(removeFromScene, destroyChild); Get game objects \u00b6 Get all game objects. var gameObjects = group . getChildren (); // array of game objects Amount of game objects. var len = group . getLength (); Group is full. Maximun size is set in maxSize . var isFull = group . isFull (); Game object is in group. var isInGroup = group . contains ( child ); Group actions \u00b6 group . playAnimation ( key , startFrame ); group . toggleVisible (); group . setDepth ( value , step ); Active/inactive game objects \u00b6 Set inactive group . kill ( gameObject ); // gameObject.setActive(false) group . killAndHide ( gameObject ); // gameObject.setActive(false).setVisible(false) Amount of active game objects var activeCount = group . countActive (); or var activeCount = group . getTotalUsed (); Amount of active game objects var inactiveCount = group . countActive ( false ); Amount of free (maxSize - activeCount) game objects var freeCount = group . getTotalFree (); // group.maxSize - group.getTotalUsed() Get first active/inactive game object, Return null if no game object picked. var gameObject = group . getFirst ( active ); // active = true/false var gameObject = group . getFirstAlive (); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead (); // Equal to group.getFirst(false, ...) Create one if no game object picked. var gameObject = group . getFirst ( active , true , x , y , key , frame , visible ); // active = true/false var gameObject = group . getFirstAlive ( true , x , y , key , frame , visible ); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead ( true , x , y , key , frame , visible ); // Equal to group.getFirst(false, ...) var gameObject = group . get ( x , y , key , frame , visible ); // Equal to group.getFirst(false, true, ...) Use ( x , y , key , frame ) to create Image / Sprite game object. var newGameObject = new GameObjectClass ( x , y , key , frame ); Create game objects \u00b6 var gameObjects = group . createFromConfig ( config ); var gameObjects = group . createMultiple ( config ); // config in array config { classType : this . classType , key : undefined , // Required frame : null , visible : true , active : true , repeat : 0 , // Create (1 + repeat) game objects createCallback : undefined , // Override this.createCallback if not undefined // Position setXY : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetXY(gameObjects, x, y, stepX, stepY) gridAlign : false , // { // width: -1, // height: -1, // cellWidth: 1, // cellHeight: 1, // position: Phaser.Display.Align.TOP_LEFT, // x: 0, // y: 0 // } // Actions.GridAlign(gameObjects, gridAlign) // Angle setRotation : { value : 0 , step : }, // Actions.SetRotation(gameObjects, value, step) // Scale setScale : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetScale(gameObjects, x, y, stepX, stepY) // Alpha setAlpha : { value : 0 , step : }, // Actions.SetAlpha(gameObjects, value, step) // Input hitArea : null , hitAreaCallback : null , // Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback) } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image","title":"Group"},{"location":"group/#introduction","text":"Objects pool, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"group/#usage","text":"","title":"Usage"},{"location":"group/#add-group-object","text":"var group = scene . add . group ( config ); // var group = scene.add.group(gameObjects, config); // Add game objects into group config { classType : Phaser . GameObjects . Sprite , defaultKey : null , defaultFrame : null , active : true , maxSize : - 1 , runChildUpdate : false , createCallback : null , removeCallback : null , createMultipleCallback : null } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image runChildUpdate : Set true to run gameObject.update() every tick. createCallback : A function to be called when adding or creating group members. var callback = function ( gameObject ) { } removeCallback : A function to be called when removing group members. var callback = function ( gameObject ) { } createMultipleCallback : A function to be called when creating several group members at once. var callback = function ( gameObjects ) { }","title":"Add group object"},{"location":"group/#add-game-object","text":"group . add ( gameObject ); // group.add(gameObject, true); // add this game object to display and update list of scene group . addMultiple ( gameObjects ); // array of game objects // group.addMultiple(gameObjects, true); Game object will only be added once. Game object will be removed automatically when destroyed.","title":"Add game object"},{"location":"group/#remove-game-object","text":"group . remove ( gameObject ); // group.remove(gameObject, true); // also remove this game object from display and update list of scene Remove all game objects group . clear (); // group.clear(removeFromScene, destroyChild);","title":"Remove game object"},{"location":"group/#get-game-objects","text":"Get all game objects. var gameObjects = group . getChildren (); // array of game objects Amount of game objects. var len = group . getLength (); Group is full. Maximun size is set in maxSize . var isFull = group . isFull (); Game object is in group. var isInGroup = group . contains ( child );","title":"Get game objects"},{"location":"group/#group-actions","text":"group . playAnimation ( key , startFrame ); group . toggleVisible (); group . setDepth ( value , step );","title":"Group actions"},{"location":"group/#activeinactive-game-objects","text":"Set inactive group . kill ( gameObject ); // gameObject.setActive(false) group . killAndHide ( gameObject ); // gameObject.setActive(false).setVisible(false) Amount of active game objects var activeCount = group . countActive (); or var activeCount = group . getTotalUsed (); Amount of active game objects var inactiveCount = group . countActive ( false ); Amount of free (maxSize - activeCount) game objects var freeCount = group . getTotalFree (); // group.maxSize - group.getTotalUsed() Get first active/inactive game object, Return null if no game object picked. var gameObject = group . getFirst ( active ); // active = true/false var gameObject = group . getFirstAlive (); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead (); // Equal to group.getFirst(false, ...) Create one if no game object picked. var gameObject = group . getFirst ( active , true , x , y , key , frame , visible ); // active = true/false var gameObject = group . getFirstAlive ( true , x , y , key , frame , visible ); // Equal to group.getFirst(true, ...) var gameObject = group . getFirstDead ( true , x , y , key , frame , visible ); // Equal to group.getFirst(false, ...) var gameObject = group . get ( x , y , key , frame , visible ); // Equal to group.getFirst(false, true, ...) Use ( x , y , key , frame ) to create Image / Sprite game object. var newGameObject = new GameObjectClass ( x , y , key , frame );","title":"Active/inactive game objects"},{"location":"group/#create-game-objects","text":"var gameObjects = group . createFromConfig ( config ); var gameObjects = group . createMultiple ( config ); // config in array config { classType : this . classType , key : undefined , // Required frame : null , visible : true , active : true , repeat : 0 , // Create (1 + repeat) game objects createCallback : undefined , // Override this.createCallback if not undefined // Position setXY : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetXY(gameObjects, x, y, stepX, stepY) gridAlign : false , // { // width: -1, // height: -1, // cellWidth: 1, // cellHeight: 1, // position: Phaser.Display.Align.TOP_LEFT, // x: 0, // y: 0 // } // Actions.GridAlign(gameObjects, gridAlign) // Angle setRotation : { value : 0 , step : }, // Actions.SetRotation(gameObjects, value, step) // Scale setScale : { x : 0 , y : 0 , stepX : 0 , stepY : 0 }, // Actions.SetScale(gameObjects, x, y, stepX, stepY) // Alpha setAlpha : { value : 0 , step : }, // Actions.SetAlpha(gameObjects, value, step) // Input hitArea : null , hitAreaCallback : null , // Actions.SetHitArea(gameObjects, hitArea, hitAreaCallback) } classType : Sprite : Phaser.GameObjects.Sprite Image : Phaser.GameObjects.Image","title":"Create game objects"},{"location":"groupactions/","text":"Introduction \u00b6 Set properties of game objects, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Call function \u00b6 Phaser . Actions . Call ( gameObjects , function ( gameObject ) { }, scope ); Set any property \u00b6 Phaser . Actions . PropertyValueSet ( gameObjects , key , value , step , index , direction ); gameObjects : An array of game objects. key : The property to be updated. value : The amount to be added to the property. step : This is added to the value amount, multiplied by the iteration counter. index : An optional offset to start searching from within the items array. direction : 1 : from beginning to end. -1 : from end to beginning. Phaser . Actions . PropertyValueInc ( gameObjects , key , value , step , index , direction ); Phaser . Actions . SmootherStep ( gameObjects , key , min , max , inc )); Phaser . Actions . SmoothStep ( gameObjects , key , min , max , inc )); Phaser . Actions . Spread ( gameObjects , key , min , max , inc )); Position \u00b6 Phaser . Actions . SetX ( gameObjects , value , step , index , direction ); Phaser . Actions . IncX ( gameObjects , value , step , index , direction ); Phaser . Actions . SetY ( gameObjects , value , step , index , direction ); Phaser . Actions . IncY ( gameObjects , value , step , index , direction ); Phaser . Actions . SetXY ( gameObjects , x , y , stepX , stepY , index , direction ); Phaser . Actions . IncXY ( gameObjects , x , y , stepX , stepY , index , direction ); Shift position \u00b6 Set the position of first game object to (x, y), others to the position of previous game object. Phaser . Actions . ShiftPosition ( gameObjects , x , y , direction , output ); Position on shape \u00b6 Grid align \u00b6 Phaser . Actions . GridAlign ( gameObjects , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , position : Phaser . Display . Align . TOP_LEFT , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item. Line \u00b6 Line : var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Phaser . Actions . PlaceOnLine ( gameObjects , line ); Phaser . Actions . RandomLine ( gameObjects , line ); Circle \u00b6 Circle : var circle = new Phaser . Geom . Circle ( x , y , radius ); Phaser . Actions . PlaceOnCircle ( gameObjects , circle , startAngle , endAngle ); Phaser . Actions . RandomCircle ( gameObjects , circle ); Ellipse \u00b6 Ellipse : var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Phaser . Actions . PlaceOnEllipse ( gameObjects , ellipse , startAngle , endAngle ); Triangle \u00b6 Triangle : var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Phaser . Actions . PlaceOnTriangle ( gameObjects , triangle , stepRate ); Phaser . Actions . RandomTriangle ( gameObjects , triangle ); Rectangle \u00b6 Rectangle : var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); Phaser . Actions . PlaceOnRectangle ( gameObjects , rect , shift ; Phaser . Actions . RandomRectangle ( gameObjects , rect ); Phaser . Actions . WrapInRectangle ( gameObjects , rect , padding ); Angle \u00b6 Phaser . Actions . Angle ( gameObjects , value , step , index , direction ); // value: angle in radians Phaser . Actions . Rotate ( gameObjects , value , step , index , direction ); // value: angle in degree Phaser . Actions . RotateAround ( gameObjects , point , angle ); // point: {x, y}, angle: angle in radians Phaser . Actions . RotateAroundDistance ( gameObjects , point , angle , distance ); // point: {x, y}, angle: angle in radians Visible \u00b6 Phaser . Actions . SetVisible ( gameObjects , value , index , direction ); Phaser . Actions . ToggleVisible ( gameObjects ); Alpha \u00b6 Phaser . Actions . SetAlpha ( gameObjects , value , step , index , direction ); Tint \u00b6 Phaser . Actions . setTint ( gameObjects , value ); //Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight); Origin \u00b6 Phaser . Actions . SetOrigin ( gameObjects , originX , originY , stepX , stepY , index , direction ); Scale \u00b6 Phaser . Actions . ScaleX ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleY ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleXY ( gameObjects , x , y , stepX , stepY , index , direction ); Depth \u00b6 Phaser . Actions . SetDepth ( gameObjects , value , step , index , direction ); Hit area \u00b6 Phaser . Actions . SetHitArea ( gameObjects , hitArea , hitAreaCallback ); Blend mode \u00b6 Phaser . Actions . SetBlendMode ( gameObjects , blendMode , index , direction ); blendMode : Phaser.BlendModes.SKIP_CHECK Phaser.BlendModes.NORMAL Phaser.BlendModes.ADD Phaser.BlendModes.MULTIPLY Phaser.BlendModes.SCREEN Phaser.BlendModes.OVERLAY Phaser.BlendModes.DARKEN Phaser.BlendModes.LIGHTEN Phaser.BlendModes.COLOR_DODGE Phaser.BlendModes.COLOR_BURN Phaser.BlendModes.HARD_LIGHT Phaser.BlendModes.SOFT_LIGHT Phaser.BlendModes.DIFFERENCE Phaser.BlendModes.EXCLUSION Phaser.BlendModes.HUE Phaser.BlendModes.SATURATION Phaser.BlendModes.COLOR Phaser.BlendModes.LUMINOSITY Play animation \u00b6 Phaser . Actions . PlayAnimation ( gameObjects , key , startFrame ); Shuffle \u00b6 Phaser . Actions . Shuffle ( gameObjects );","title":"Group actions"},{"location":"groupactions/#introduction","text":"Set properties of game objects, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"groupactions/#usage","text":"","title":"Usage"},{"location":"groupactions/#call-function","text":"Phaser . Actions . Call ( gameObjects , function ( gameObject ) { }, scope );","title":"Call function"},{"location":"groupactions/#set-any-property","text":"Phaser . Actions . PropertyValueSet ( gameObjects , key , value , step , index , direction ); gameObjects : An array of game objects. key : The property to be updated. value : The amount to be added to the property. step : This is added to the value amount, multiplied by the iteration counter. index : An optional offset to start searching from within the items array. direction : 1 : from beginning to end. -1 : from end to beginning. Phaser . Actions . PropertyValueInc ( gameObjects , key , value , step , index , direction ); Phaser . Actions . SmootherStep ( gameObjects , key , min , max , inc )); Phaser . Actions . SmoothStep ( gameObjects , key , min , max , inc )); Phaser . Actions . Spread ( gameObjects , key , min , max , inc ));","title":"Set any property"},{"location":"groupactions/#position","text":"Phaser . Actions . SetX ( gameObjects , value , step , index , direction ); Phaser . Actions . IncX ( gameObjects , value , step , index , direction ); Phaser . Actions . SetY ( gameObjects , value , step , index , direction ); Phaser . Actions . IncY ( gameObjects , value , step , index , direction ); Phaser . Actions . SetXY ( gameObjects , x , y , stepX , stepY , index , direction ); Phaser . Actions . IncXY ( gameObjects , x , y , stepX , stepY , index , direction );","title":"Position"},{"location":"groupactions/#shift-position","text":"Set the position of first game object to (x, y), others to the position of previous game object. Phaser . Actions . ShiftPosition ( gameObjects , x , y , direction , output );","title":"Shift position"},{"location":"groupactions/#position-on-shape","text":"","title":"Position on shape"},{"location":"groupactions/#grid-align","text":"Phaser . Actions . GridAlign ( gameObjects , { width : - 1 , height : - 1 , cellWidth : 1 , cellHeight : 1 , position : Phaser . Display . Align . TOP_LEFT , x : 0 , y : 0 }); width : The width of the grid in items (not pixels). -1 means lay all items out horizontally, regardless of quantity. height : The height of the grid in items (not pixels). -1 means lay all items out vertically, regardless of quantity. cellWidth : The width of the cell, in pixels. cellHeight : The height of the cell, in pixels. position : The alignment position. 0 , or Phaser.Display.Align.TOP_LEFT 1 , or Phaser.Display.Align.TOP_CENTER 2 , or Phaser.Display.Align.TOP_RIGHT 3 , or Phaser.Display.Align.LEFT_TOP 4 , or Phaser.Display.Align.LEFT_CENTER 5 , or Phaser.Display.Align.LEFT_BOTTOM 6 , or Phaser.Display.Align.CENTER 7 , or Phaser.Display.Align.RIGHT_TOP 8 , or Phaser.Display.Align.RIGHT_CENTER 9 , or Phaser.Display.Align.RIGHT_BOTTOM 10 , or Phaser.Display.Align.BOTTOM_LEFT 11 , or Phaser.Display.Align.BOTTOM_CENTER 12 , or Phaser.Display.Align.BOTTOM_RIGHT x , y : Position of first item.","title":"Grid align"},{"location":"groupactions/#line","text":"Line : var line = new Phaser . Geom . Line ( x1 , y1 , x2 , y2 ); Phaser . Actions . PlaceOnLine ( gameObjects , line ); Phaser . Actions . RandomLine ( gameObjects , line );","title":"Line"},{"location":"groupactions/#circle","text":"Circle : var circle = new Phaser . Geom . Circle ( x , y , radius ); Phaser . Actions . PlaceOnCircle ( gameObjects , circle , startAngle , endAngle ); Phaser . Actions . RandomCircle ( gameObjects , circle );","title":"Circle"},{"location":"groupactions/#ellipse","text":"Ellipse : var ellipse = new Phaser . Geom . Ellipse ( x , y , width , height ); Phaser . Actions . PlaceOnEllipse ( gameObjects , ellipse , startAngle , endAngle );","title":"Ellipse"},{"location":"groupactions/#triangle","text":"Triangle : var triangle = new Phaser . Geom . Triangle ( x1 , y1 , x2 , y2 , x3 , y3 ); Phaser . Actions . PlaceOnTriangle ( gameObjects , triangle , stepRate ); Phaser . Actions . RandomTriangle ( gameObjects , triangle );","title":"Triangle"},{"location":"groupactions/#rectangle","text":"Rectangle : var rect = new Phaser . Geom . Rectangle ( x , y , width , height ); Phaser . Actions . PlaceOnRectangle ( gameObjects , rect , shift ; Phaser . Actions . RandomRectangle ( gameObjects , rect ); Phaser . Actions . WrapInRectangle ( gameObjects , rect , padding );","title":"Rectangle"},{"location":"groupactions/#angle","text":"Phaser . Actions . Angle ( gameObjects , value , step , index , direction ); // value: angle in radians Phaser . Actions . Rotate ( gameObjects , value , step , index , direction ); // value: angle in degree Phaser . Actions . RotateAround ( gameObjects , point , angle ); // point: {x, y}, angle: angle in radians Phaser . Actions . RotateAroundDistance ( gameObjects , point , angle , distance ); // point: {x, y}, angle: angle in radians","title":"Angle"},{"location":"groupactions/#visible","text":"Phaser . Actions . SetVisible ( gameObjects , value , index , direction ); Phaser . Actions . ToggleVisible ( gameObjects );","title":"Visible"},{"location":"groupactions/#alpha","text":"Phaser . Actions . SetAlpha ( gameObjects , value , step , index , direction );","title":"Alpha"},{"location":"groupactions/#tint","text":"Phaser . Actions . setTint ( gameObjects , value ); //Phaser.Actions.setTint(gameObjects, topLeft, topRight, bottomLeft, bottomRight);","title":"Tint"},{"location":"groupactions/#origin","text":"Phaser . Actions . SetOrigin ( gameObjects , originX , originY , stepX , stepY , index , direction );","title":"Origin"},{"location":"groupactions/#scale","text":"Phaser . Actions . ScaleX ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleY ( gameObjects , value , step , index , direction ); Phaser . Actions . ScaleXY ( gameObjects , x , y , stepX , stepY , index , direction );","title":"Scale"},{"location":"groupactions/#depth","text":"Phaser . Actions . SetDepth ( gameObjects , value , step , index , direction );","title":"Depth"},{"location":"groupactions/#hit-area","text":"Phaser . Actions . SetHitArea ( gameObjects , hitArea , hitAreaCallback );","title":"Hit area"},{"location":"groupactions/#blend-mode","text":"Phaser . Actions . SetBlendMode ( gameObjects , blendMode , index , direction ); blendMode : Phaser.BlendModes.SKIP_CHECK Phaser.BlendModes.NORMAL Phaser.BlendModes.ADD Phaser.BlendModes.MULTIPLY Phaser.BlendModes.SCREEN Phaser.BlendModes.OVERLAY Phaser.BlendModes.DARKEN Phaser.BlendModes.LIGHTEN Phaser.BlendModes.COLOR_DODGE Phaser.BlendModes.COLOR_BURN Phaser.BlendModes.HARD_LIGHT Phaser.BlendModes.SOFT_LIGHT Phaser.BlendModes.DIFFERENCE Phaser.BlendModes.EXCLUSION Phaser.BlendModes.HUE Phaser.BlendModes.SATURATION Phaser.BlendModes.COLOR Phaser.BlendModes.LUMINOSITY","title":"Blend mode"},{"location":"groupactions/#play-animation","text":"Phaser . Actions . PlayAnimation ( gameObjects , key , startFrame );","title":"Play animation"},{"location":"groupactions/#shuffle","text":"Phaser . Actions . Shuffle ( gameObjects );","title":"Shuffle"},{"location":"image/","text":"Introduction \u00b6 Display of static images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add image object \u00b6 var image = scene . add . image ( x , y , key ); Add image from JSON var image = scene . make . image ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MyImage extends Phaser . GameObjects . Image { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , x , y , key ); Other properties \u00b6 See game object Create mask \u00b6 var mask = image . createBitmapMask (); See mask","title":"Image"},{"location":"image/#introduction","text":"Display of static images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"image/#usage","text":"","title":"Usage"},{"location":"image/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"image/#add-image-object","text":"var image = scene . add . image ( x , y , key ); Add image from JSON var image = scene . make . image ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add image object"},{"location":"image/#custom-class","text":"Define class class MyImage extends Phaser . GameObjects . Image { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyImage ( scene , x , y , key );","title":"Custom class"},{"location":"image/#other-properties","text":"See game object","title":"Other properties"},{"location":"image/#create-mask","text":"var mask = image . createBitmapMask (); See mask","title":"Create mask"},{"location":"input/","text":"Introduction \u00b6 Input system of each scene, built-in object of phaser. Author: Richard Davey Usage \u00b6 Enable/disable \u00b6 scene . input . enabled = enabled ; // enabled: true/false","title":"Input"},{"location":"input/#introduction","text":"Input system of each scene, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"input/#usage","text":"","title":"Usage"},{"location":"input/#enabledisable","text":"scene . input . enabled = enabled ; // enabled: true/false","title":"Enable/disable"},{"location":"inputtext/","text":"Introduction \u00b6 Input DOM element . Author: Rex DOM Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexInputTextPlugin' , plugin : InputTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Add text object \u00b6 var inputText = scene . add . rexInputText ( x , y , width , height , config ); // var inputText = scene.add.rexInputText(x, y, config); // var inputText = scene.add.rexInputText(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , type : 'text' , // 'text'|'password'|'textarea' // Element properties id : undefined , text : undefined , placeholder : undefined , tooltip : undefined , readOnly : false , spellCheck : false , autoComplete : 'off' , // Style properties align : undefined , fontFamily : undefined , fontSize : undefined , color : '#ffffff' , backgroundColor : 'transparent' , borderColor : 'transparent' , outline : 'none' , } x , y : Position width , height : Size of element type : Type of element 'text' , 'password' , or 'textarea' Element properties id : id element property. text : value element property. placeholder : placeholder element property. tooltip : title element property. readOnly : readonly element property. spellCheck : spellcheck element property. autoComplete : autocomplete element property. Element style properties align : text-align style property. fontFamily : font-family style property. fontSize : font-size style property. color : color style property. backgroundColor : backgroundColor style property. borderColor : borderColor style property. outline : outline style property. Custom class \u00b6 Define class class MyText extends InputText { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var inputText = new MyText ( scene , x , y , width , height , config ); Text \u00b6 Get var text = inputText . text ; Set inputText . setText ( text ); // inputText.text = text; Select all text inputText . selectText (); Scroll to bottom inputText . scrollToBottom (); Style \u00b6 Get var value = inputText . getStyle ( key ); Set inputText . setStyle ( key , value ) Focus \u00b6 Focus inputText . setFocus (); Blur inputText . setBlur (); Resize \u00b6 inputText . resize ( width , height ); Events \u00b6 On text changed inputText . on ( 'textchange' , function ( inputText ){ }, scope ); On focus inputText . on ( 'focus' , function ( inputText ){ }, scope ); On blur inputText . on ( 'blur' , function ( inputText ){ }, scope ); On click, double click inputText . on ( 'click' , function ( inputText ){ }, scope ); inputText . on ( 'dblclick' , function ( inputText ){ }, scope ); Touch/mouse events on input text object won't be propagated to game canvas.","title":"Input text"},{"location":"inputtext/#introduction","text":"Input DOM element . Author: Rex DOM Game object","title":"Introduction"},{"location":"inputtext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"inputtext/#usage","text":"Sample code","title":"Usage"},{"location":"inputtext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexInputTextPlugin' , plugin : InputTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"inputtext/#add-text-object","text":"var inputText = scene . add . rexInputText ( x , y , width , height , config ); // var inputText = scene.add.rexInputText(x, y, config); // var inputText = scene.add.rexInputText(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , type : 'text' , // 'text'|'password'|'textarea' // Element properties id : undefined , text : undefined , placeholder : undefined , tooltip : undefined , readOnly : false , spellCheck : false , autoComplete : 'off' , // Style properties align : undefined , fontFamily : undefined , fontSize : undefined , color : '#ffffff' , backgroundColor : 'transparent' , borderColor : 'transparent' , outline : 'none' , } x , y : Position width , height : Size of element type : Type of element 'text' , 'password' , or 'textarea' Element properties id : id element property. text : value element property. placeholder : placeholder element property. tooltip : title element property. readOnly : readonly element property. spellCheck : spellcheck element property. autoComplete : autocomplete element property. Element style properties align : text-align style property. fontFamily : font-family style property. fontSize : font-size style property. color : color style property. backgroundColor : backgroundColor style property. borderColor : borderColor style property. outline : outline style property.","title":"Add text object"},{"location":"inputtext/#custom-class","text":"Define class class MyText extends InputText { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var inputText = new MyText ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"inputtext/#text","text":"Get var text = inputText . text ; Set inputText . setText ( text ); // inputText.text = text; Select all text inputText . selectText (); Scroll to bottom inputText . scrollToBottom ();","title":"Text"},{"location":"inputtext/#style","text":"Get var value = inputText . getStyle ( key ); Set inputText . setStyle ( key , value )","title":"Style"},{"location":"inputtext/#focus","text":"Focus inputText . setFocus (); Blur inputText . setBlur ();","title":"Focus"},{"location":"inputtext/#resize","text":"inputText . resize ( width , height );","title":"Resize"},{"location":"inputtext/#events","text":"On text changed inputText . on ( 'textchange' , function ( inputText ){ }, scope ); On focus inputText . on ( 'focus' , function ( inputText ){ }, scope ); On blur inputText . on ( 'blur' , function ( inputText ){ }, scope ); On click, double click inputText . on ( 'click' , function ( inputText ){ }, scope ); inputText . on ( 'dblclick' , function ( inputText ){ }, scope ); Touch/mouse events on input text object won't be propagated to game canvas.","title":"Events"},{"location":"interception/","text":"Introduction \u00b6 Predict the intersection position of two game objects with constant moving speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexInterception from './plugins/interception.js' ; Install global plugin \u00b6 Install plugin in configuration of game import InterceptionPlugin from './plugins/interception-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInterception' , plugin : InterceptionPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var interception = scene . plugins . get ( 'rexInterception' ). add ( gameObject , { // target: undefined, // enable: true }); target : Game object. enable : Set true to enable predicting. Target \u00b6 Set interception . setTarget ( gameObject ); or interception . target = gameObject ; Disalbe interception . setTarget ( undefined ); or interception . target = undefined ; Get var target = interception . target ; Enable predicting \u00b6 Enable interception . setEnable (); Disable, uses target position as predicted position interception . setEnable ( false ); Predicted result \u00b6 Predicted position var position = interception . predictedPosition ; // {x, y} Angle to predicted position var rotation = interception . predictedAngle ; // Angle in radian","title":"Interception"},{"location":"interception/#introduction","text":"Predict the intersection position of two game objects with constant moving speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"interception/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"interception/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"interception/#import-class","text":"import rexInterception from './plugins/interception.js' ;","title":"Import class"},{"location":"interception/#install-global-plugin","text":"Install plugin in configuration of game import InterceptionPlugin from './plugins/interception-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInterception' , plugin : InterceptionPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"interception/#create-instance","text":"var interception = scene . plugins . get ( 'rexInterception' ). add ( gameObject , { // target: undefined, // enable: true }); target : Game object. enable : Set true to enable predicting.","title":"Create instance"},{"location":"interception/#target","text":"Set interception . setTarget ( gameObject ); or interception . target = gameObject ; Disalbe interception . setTarget ( undefined ); or interception . target = undefined ; Get var target = interception . target ;","title":"Target"},{"location":"interception/#enable-predicting","text":"Enable interception . setEnable (); Disable, uses target position as predicted position interception . setEnable ( false );","title":"Enable predicting"},{"location":"interception/#predicted-result","text":"Predicted position var position = interception . predictedPosition ; // {x, y} Angle to predicted position var rotation = interception . predictedAngle ; // Angle in radian","title":"Predicted result"},{"location":"interpolation/","text":"Introduction \u00b6 Calculates interpolation value over t (0~1), built-in method of phaser. Author: Richard Davey Usage \u00b6 Linear interpolation (lerp) var result = Phaser . Math . Linear ( p0 , p1 , t ); Smooth interpolation var result = Phaser . Math . Interpolation . SmoothStep ( t , min , max ); t : 0~1 Smoother interpolation var result = Phaser . Math . Interpolation . SmootherStep ( t , min , max ); t : 0~1 Quadratic bezier interpolation var result = Phaser . Math . Interpolation . QuadraticBezier ( t , p0 , p1 , p2 ); t : 0~1 p0 : The start point. p1 : The control point. p2 : The end point. Cubic bezier interpolation var result = Phaser . Math . Interpolation . CubicBezier ( t , p0 , p1 , p2 , p3 ); t : 0~1 p0 : The start point. p1 : The first control point. p2 : The second control point. p3 : The end point.","title":"Interpolation"},{"location":"interpolation/#introduction","text":"Calculates interpolation value over t (0~1), built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"interpolation/#usage","text":"Linear interpolation (lerp) var result = Phaser . Math . Linear ( p0 , p1 , t ); Smooth interpolation var result = Phaser . Math . Interpolation . SmoothStep ( t , min , max ); t : 0~1 Smoother interpolation var result = Phaser . Math . Interpolation . SmootherStep ( t , min , max ); t : 0~1 Quadratic bezier interpolation var result = Phaser . Math . Interpolation . QuadraticBezier ( t , p0 , p1 , p2 ); t : 0~1 p0 : The start point. p1 : The control point. p2 : The end point. Cubic bezier interpolation var result = Phaser . Math . Interpolation . CubicBezier ( t , p0 , p1 , p2 , p3 ); t : 0~1 p0 : The start point. p1 : The first control point. p2 : The second control point. p3 : The end point.","title":"Usage"},{"location":"keyboardcombo/","text":"Introduction \u00b6 Combo-keys events. Author: Richard Davey Usage \u00b6 Create combo var keyCombo = scene . input . keyboard . createCombo ( keys , { // resetOnWrongKey: true, // maxKeyDelay: 0, // resetOnMatch: false, // deleteOnMatch: false, }); keys : Array of keyCodes In strings. ex: ['up', 'up', 'down', 'down'] , or ['UP', 'UP', 'DOWN', 'DOWN'] In key map . ex: [Phaser.Input.Keyboard.KeyCodes.UP, ... ] In numbers. ex: [38, 38, 40, 40] resetOnWrongKey : Set true to reset the combo when press the wrong key. maxKeyDelay : The max delay in ms between each key press. Set 0 to disable this feature. resetOnMatch : Set true to reset the combo when previously matched. deleteOnMatch : Set true to delete this combo when matched. Listen combo matching event scene . input . keyboard . on ( 'keycombomatch' , function ( keyCombo , keyboardEvent ) { /* ... */ });","title":"Combo events"},{"location":"keyboardcombo/#introduction","text":"Combo-keys events. Author: Richard Davey","title":"Introduction"},{"location":"keyboardcombo/#usage","text":"Create combo var keyCombo = scene . input . keyboard . createCombo ( keys , { // resetOnWrongKey: true, // maxKeyDelay: 0, // resetOnMatch: false, // deleteOnMatch: false, }); keys : Array of keyCodes In strings. ex: ['up', 'up', 'down', 'down'] , or ['UP', 'UP', 'DOWN', 'DOWN'] In key map . ex: [Phaser.Input.Keyboard.KeyCodes.UP, ... ] In numbers. ex: [38, 38, 40, 40] resetOnWrongKey : Set true to reset the combo when press the wrong key. maxKeyDelay : The max delay in ms between each key press. Set 0 to disable this feature. resetOnMatch : Set true to reset the combo when previously matched. deleteOnMatch : Set true to delete this combo when matched. Listen combo matching event scene . input . keyboard . on ( 'keycombomatch' , function ( keyCombo , keyboardEvent ) { /* ... */ });","title":"Usage"},{"location":"keyboardevents/","text":"Introduction \u00b6 Built-in keyboard events of phaser. Author: Richard Davey Usage \u00b6 Quick start \u00b6 Is key-down/is key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Key is down after a duration var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = scene . input . keyboard . checkDown ( keyObj , duration ); On key-down/on key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); or scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); Any key-down/any key-up scene . input . keyboard . on ( 'keydown' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( event ) { /* ... */ }); event : KeyboardEvent event.code : 'Key' + 'W' Key object \u00b6 Get key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // see `Key map` section // var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); Get key objects var keys = scene . input . keyboard . addKeys ( 'W,S,A,D' ); // keys.W, keys.S, keys.A, keys.D or var keys = scene . input . keyboard . addKeys ({ up : 'up' , down : 'down' , left : 'left' , right : 'right' }); // keys.up, keys.down, keys.left, keys.right Remove key object scene . input . keyboard . removeKey ( 'W' ); // scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W); Key-down/key-up state var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Duration of key-down var duration = keyObj . getDuration (); // ms Enable/disable keyObj . enabled = enabled ; // Set false to disable key event Key object of cursorkeys \u00b6 Get key state object var cursorKeys = scene . input . keyboard . createCursorKeys (); Get key state var isUpDown = cursorKeys . up . isDown ; var isDownDown = cursorKeys . down . isDown ; var isLeftDown = cursorKeys . left . isDown ; var isRightDown = cursorKeys . right . isDown ; var isSpaceDown = cursorKeys . space . isDown ; var isShiftDown = cursorKeys . shift . isDown ; Order of key-down/key-up events \u00b6 Key-down/key-up events of key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. On key-down/on key-up scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Any key-down/on key-up scene . input . keyboard . on ( 'keydown' , function ( eventName , event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( eventName , event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Destroy key object \u00b6 keyObj . destroy (); Key map \u00b6 A ~ Z F1 ~ F12 BACKSPACE TAB ENTER SHIFT CTRL . ALT PAUSE CAPS_LOCK ESC SPACE PAGE_UP , PAGE_DOWN END , HOME LEFT , UP , RIGHT , DOWN PRINT_SCREEN INSERT , DELETE ZERO , ONE , TWO , THREE , FOUR , FIVE , SIX , SEVEN , EIGHT , NINE NUMPAD_ZERO , NUMPAD_ONE , NUMPAD_TWO , NUMPAD_THREE , NUMPAD_FOUR , NUMPAD_FIVE , NUMPAD_SIX , NUMPAD_SEVEN , NUMPAD_EIGHT , NUMPAD_NINE OPEN_BRACKET , CLOSED_BRACKET SEMICOLON_FIREFOX , COLON , COMMA_FIREFOX_WINDOWS , COMMA_FIREFOX , BRACKET_RIGHT_FIREFOX , BRACKET_LEFT_FIREFOX","title":"Keyboard events"},{"location":"keyboardevents/#introduction","text":"Built-in keyboard events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"keyboardevents/#usage","text":"","title":"Usage"},{"location":"keyboardevents/#quick-start","text":"Is key-down/is key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Key is down after a duration var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object var isDown = scene . input . keyboard . checkDown ( keyObj , duration ); On key-down/on key-up var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); or scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); Any key-down/any key-up scene . input . keyboard . on ( 'keydown' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( event ) { /* ... */ }); event : KeyboardEvent event.code : 'Key' + 'W'","title":"Quick start"},{"location":"keyboardevents/#key-object","text":"Get key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // see `Key map` section // var keyObj = scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); Get key objects var keys = scene . input . keyboard . addKeys ( 'W,S,A,D' ); // keys.W, keys.S, keys.A, keys.D or var keys = scene . input . keyboard . addKeys ({ up : 'up' , down : 'down' , left : 'left' , right : 'right' }); // keys.up, keys.down, keys.left, keys.right Remove key object scene . input . keyboard . removeKey ( 'W' ); // scene.input.keyboard.removeKey(Phaser.Input.Keyboard.KeyCodes.W); Key-down/key-up state var isDown = keyObj . isDown ; var isUp = keyObj . isUp ; Duration of key-down var duration = keyObj . getDuration (); // ms Enable/disable keyObj . enabled = enabled ; // Set false to disable key event","title":"Key object"},{"location":"keyboardevents/#key-object-of-cursorkeys","text":"Get key state object var cursorKeys = scene . input . keyboard . createCursorKeys (); Get key state var isUpDown = cursorKeys . up . isDown ; var isDownDown = cursorKeys . down . isDown ; var isLeftDown = cursorKeys . left . isDown ; var isRightDown = cursorKeys . right . isDown ; var isSpaceDown = cursorKeys . space . isDown ; var isShiftDown = cursorKeys . shift . isDown ;","title":"Key object of cursorkeys"},{"location":"keyboardevents/#order-of-key-downkey-up-events","text":"Key-down/key-up events of key object var keyObj = scene . input . keyboard . addKey ( 'W' ); // Get key object keyObj . on ( 'down' , function ( event ) { /* ... */ }); keyObj . on ( 'up' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. On key-down/on key-up scene . input . keyboard . on ( 'keydown-' + 'W' , function ( event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup-' + 'W' , function ( event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene. Any key-down/on key-up scene . input . keyboard . on ( 'keydown' , function ( eventName , event ) { /* ... */ }); scene . input . keyboard . on ( 'keyup' , function ( eventName , event ) { /* ... */ }); event.stopImmediatePropagation() : Stop any further listeners from being invoked in the current Scene. event.stopPropagation() : Stop it reaching any other Scene.","title":"Order of key-down/key-up events"},{"location":"keyboardevents/#destroy-key-object","text":"keyObj . destroy ();","title":"Destroy key object"},{"location":"keyboardevents/#key-map","text":"A ~ Z F1 ~ F12 BACKSPACE TAB ENTER SHIFT CTRL . ALT PAUSE CAPS_LOCK ESC SPACE PAGE_UP , PAGE_DOWN END , HOME LEFT , UP , RIGHT , DOWN PRINT_SCREEN INSERT , DELETE ZERO , ONE , TWO , THREE , FOUR , FIVE , SIX , SEVEN , EIGHT , NINE NUMPAD_ZERO , NUMPAD_ONE , NUMPAD_TWO , NUMPAD_THREE , NUMPAD_FOUR , NUMPAD_FIVE , NUMPAD_SIX , NUMPAD_SEVEN , NUMPAD_EIGHT , NUMPAD_NINE OPEN_BRACKET , CLOSED_BRACKET SEMICOLON_FIREFOX , COLON , COMMA_FIREFOX_WINDOWS , COMMA_FIREFOX , BRACKET_RIGHT_FIREFOX , BRACKET_LEFT_FIREFOX","title":"Key map"},{"location":"lifetime/","text":"Introduction \u00b6 Destroy game object when time-out. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexLifeTime from './plugins/lifeTime.js' ; Install global plugin \u00b6 Install plugin in configuration of game import LifeTimePlugin from './plugins/lifeTime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLifeTime' , plugin : LifeTimePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var lifeTime = scene . plugins . get ( 'rexLifeTime' ). add ( gameObject , { lifeTime : 1000 , // destroy: true, // start: true }); lifeTime : Life time in ms. destroy : Set true to destroy game object when time-out. start : Set true to starting counting now. Events \u00b6 On time-out lifeTime . on ( 'complete' , function ( gameObject , lifeTime ){}); // lifeTime.once('complete', function(gameObject, lifeTime){}); Life-time \u00b6 Set lifeTime . setLifeTime ( time ); Add to lifeTime . addToLifeTime ( time ); Get life-time var time = lifeTime . lifeTime ; Get remainder time var time = lifeTime . remainder ; Is alive var isAlive = lifeTime . isAlive ; Start/Stop/Pause/Resume \u00b6 Start lifeTime . start (); Stop lifeTime . stop (); Pause lifeTime . pause (); Resume lifeTime . resume ();","title":"Life time"},{"location":"lifetime/#introduction","text":"Destroy game object when time-out. Author: Rex Behavior of game object","title":"Introduction"},{"location":"lifetime/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"lifetime/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"lifetime/#import-class","text":"import rexLifeTime from './plugins/lifeTime.js' ;","title":"Import class"},{"location":"lifetime/#install-global-plugin","text":"Install plugin in configuration of game import LifeTimePlugin from './plugins/lifeTime-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLifeTime' , plugin : LifeTimePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"lifetime/#create-instance","text":"var lifeTime = scene . plugins . get ( 'rexLifeTime' ). add ( gameObject , { lifeTime : 1000 , // destroy: true, // start: true }); lifeTime : Life time in ms. destroy : Set true to destroy game object when time-out. start : Set true to starting counting now.","title":"Create instance"},{"location":"lifetime/#events","text":"On time-out lifeTime . on ( 'complete' , function ( gameObject , lifeTime ){}); // lifeTime.once('complete', function(gameObject, lifeTime){});","title":"Events"},{"location":"lifetime/#life-time","text":"Set lifeTime . setLifeTime ( time ); Add to lifeTime . addToLifeTime ( time ); Get life-time var time = lifeTime . lifeTime ; Get remainder time var time = lifeTime . remainder ; Is alive var isAlive = lifeTime . isAlive ;","title":"Life-time"},{"location":"lifetime/#startstoppauseresume","text":"Start lifeTime . start (); Stop lifeTime . stop (); Pause lifeTime . pause (); Resume lifeTime . resume ();","title":"Start/Stop/Pause/Resume"},{"location":"line/","text":"Introduction \u00b6 Draw a line with start/end/body textures. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexLinePlugin' , plugin : LinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var line = scene . add . rexLine ({ start : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 0.5 , }, // start: key, // start: undefined, end : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 1 , }, // end: key, // end: undefined, body : { key : undefined , frame : undefined , extendMode : 1 , width : undefined , }, // body: key, }); start : Configuration of line-start. Or texture key of line-start. start.x , start.y : Position of line-start. start.key , start.frame : Texrure of line-start. start.origin : Origin of line-start. Default is 0.5 . end : Configuration of line-end. Or texture key of line-end. end.x , end.y : Position of line-end. end.key , end.frame : Texrure of line-end. end.origin : Origin of line-end. Default is 1 . body : Configuration of line-body. Or texture key of line-body. body.key , body.frame : Texrure of line-body. Line-body will be drawn repeatedly. body.extendMode : Extend mode of line-body. 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. (Default value) body.width : Line width. Custom class \u00b6 Define class class MyLine extends Line { constructor ( scene , config ) { super ( scene , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , config ); Position of line-start/line-end \u00b6 Line start Get var x0 = line . x0 ; var y0 = line . y0 ; Set line . setLineStartPosition ( x , y ); or line . x0 = x ; line . y0 = y ; Line end Get var x1 = line . x1 ; var y1 = line . y1 ; Set line . setLineEndPosition ( x , y ); or line . x1 = x ; line . y1 = y ; Set textures \u00b6 Line-start Set line-start texture line . setLineStartTexture ( key , frameName ); Set origin of line-start texture line . setLineStartOrigin ( origin ); origin : 0 ~ 1 . Default is 0 , to align the left side of line-start texture with start position. Line-end Set line-end texture line . setLineEndTexture ( key , frameName ); Set origin of line-end texture line . setLineEndOrigin ( origin ); origin : 0 ~ 1 . Default is 1 , to align the right side of line-end texture with end position. Line-body Set line-body texture line . setLineBodyTexture ( key , frameName ); Set line-body extend mode line . setLineBodyExtendMode ( mode ); mode : 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. Set line-body width line . setLineBodyWidth ( width );","title":"Line"},{"location":"line/#introduction","text":"Draw a line with start/end/body textures. Author: Rex Game object","title":"Introduction"},{"location":"line/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"line/#usage","text":"Sample code","title":"Usage"},{"location":"line/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexLinePlugin' , plugin : LinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"line/#create-instance","text":"var line = scene . add . rexLine ({ start : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 0.5 , }, // start: key, // start: undefined, end : { x : 0 , y : 0 , key : undefined , frame : undefined , origin : 1 , }, // end: key, // end: undefined, body : { key : undefined , frame : undefined , extendMode : 1 , width : undefined , }, // body: key, }); start : Configuration of line-start. Or texture key of line-start. start.x , start.y : Position of line-start. start.key , start.frame : Texrure of line-start. start.origin : Origin of line-start. Default is 0.5 . end : Configuration of line-end. Or texture key of line-end. end.x , end.y : Position of line-end. end.key , end.frame : Texrure of line-end. end.origin : Origin of line-end. Default is 1 . body : Configuration of line-body. Or texture key of line-body. body.key , body.frame : Texrure of line-body. Line-body will be drawn repeatedly. body.extendMode : Extend mode of line-body. 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. (Default value) body.width : Line width.","title":"Create instance"},{"location":"line/#custom-class","text":"Define class class MyLine extends Line { constructor ( scene , config ) { super ( scene , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , config );","title":"Custom class"},{"location":"line/#position-of-line-startline-end","text":"Line start Get var x0 = line . x0 ; var y0 = line . y0 ; Set line . setLineStartPosition ( x , y ); or line . x0 = x ; line . y0 = y ; Line end Get var x1 = line . x1 ; var y1 = line . y1 ; Set line . setLineEndPosition ( x , y ); or line . x1 = x ; line . y1 = y ;","title":"Position of line-start/line-end"},{"location":"line/#set-textures","text":"Line-start Set line-start texture line . setLineStartTexture ( key , frameName ); Set origin of line-start texture line . setLineStartOrigin ( origin ); origin : 0 ~ 1 . Default is 0 , to align the left side of line-start texture with start position. Line-end Set line-end texture line . setLineEndTexture ( key , frameName ); Set origin of line-end texture line . setLineEndOrigin ( origin ); origin : 0 ~ 1 . Default is 1 , to align the right side of line-end texture with end position. Line-body Set line-body texture line . setLineBodyTexture ( key , frameName ); Set line-body extend mode line . setLineBodyExtendMode ( mode ); mode : 0 , or 'scale' : Draw line-body with scaled image game object. 1 , or 'repeat' : Draw line-body with tile-sprute game object. Set line-body width line . setLineBodyWidth ( width );","title":"Set textures"},{"location":"loader/","text":"Introduction \u00b6 Load assets, built-in object of phaser. Author: Richard Davey Usage \u00b6 Loading in preload stage \u00b6 scene . load . image ( key , url ); // scene.load.image(config); // config: {key, url} Loader in preload stage will start loading automatically by scene. Loading after preload stage \u00b6 scene . load . image ( key , url ); // add task // scene.load.image(config); // config: {key, url} scene . load . once ( 'complete' , callback ); // add callback of 'complete' event scene . load . start (); // start loading Set path \u00b6 scene . loader . setPath ( path ) Events \u00b6 Start loading scene . load . once ( 'start' , function (){}); Loading progressing scene . load . on ( 'progress' , function ( progress ){}); Loading a file object successful scene . load . once ( 'load' , function ( fileObj ){}); Loading a file object failed scene . load . once ( 'loaderror' , function ( fileObj ){}); All loading completed scene . load . once ( 'complete' , function (){}); Status of loader \u00b6 Ready to start loading var isReady = scene . load . isReady (); Is loading var isLoading = scene . load . isLoading (); File types \u00b6 Image \u00b6 Image scene . load . image ( key , url ); SVG scene . load . svg ( key , url ); // scene.load.svg(key, url, {width, height}); // scene.load.svg(key, url, {scale}); Html texture scene . load . htmlTexture ( key , url , width , height ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Sprite sheet \u00b6 scene . load . spritesheet ( key , url , { // frameWidth: frameWidth, // frameHeight: frameHeight, // startFrame: startFrame, // endFrame: endFrame, // margin: margin, // spacing: spacing }); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Texture atlas \u00b6 scene . load . atlas ( key , textureURL , atlasURL ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key ); Multi file texture atlas \u00b6 scene . load . multiatlas ( key , textureURLs , atlasURLs ); Unity texture atlas \u00b6 scene . load . unityAtlas ( key , textureURL , atlasURL ); Animation \u00b6 scene . load . animation ( key , url ); Audio \u00b6 scene . load . audio ( key , urls ); Get data from cache var cache = scene . cache . audio ; var data = cache . get ( key ); Audio sprite \u00b6 scene . load . audioSprite ( key , urls , json , config ); Video \u00b6 scene . load . video ( key , url , loadEvent , asBlob , noAudio ); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. asBlob : Load the video as a data blob, or via the Video element? Default value is false . noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false . Bitmap font \u00b6 scene . load . bitmapFont ( key , textureURL , xmlURL ); Get data from cache var cache = scene . cache . bitmapFont ; var data = cache . get ( key ); Tile map \u00b6 scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Get data from cache var cache = scene . cache . tilemap ; var data = cache . get ( key ); Text \u00b6 scene . load . text ( key , url ); Get data from cache var cache = scene . cache . text ; var data = cache . get ( key ); JSON \u00b6 scene . load . json ( key , url ); Get data from cache var cache = scene . cache . json ; var data = cache . get ( key ); XML \u00b6 scene . load . xml ( key , url ); Get data from cache var cache = scene . cache . xml ; var data = cache . get ( key ); HTML \u00b6 scene . load . html ( key , url ); Get data from cache var cache = scene . cache . html ; var data = cache . get ( key ); CSS \u00b6 scene . load . css ( key , url ); Get data from cache var cache = scene . cache . css ; var data = cache . get ( key ); Scene \u00b6 scene . load . sceneFile ( key , url ); The key matches the class name in the JavaScript file. Script \u00b6 scene . load . script ( key , url ); Scripts \u00b6 scene . load . scripts ( key , urlArray ); Add scripts in the exact order of urlArray . GLSL \u00b6 scene . load . glsl ( key , url ); Get data from cache var cache = scene . cache . shader ; var data = cache . get ( key ); A glsl file can contain multiple shaders, all separated by a frontmatter block. --- name : type : --- void main ( void ) { } Binary \u00b6 scene . load . binary ( key , url , dataType ); // dataType: Uint8Array // scene.load.binary(config); // config: {key, url, dataType} Get data from cache var cache = scene . cache . binary ; var data = cache . get ( key ); Plugin \u00b6 scene . load . plugin ( key , url , true ); // start plugin when loaded url : File url or class instance. Scene plugin \u00b6 scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance. File pack \u00b6 Load files in JSON format. scene . load . pack ( key , url , dataKey ); JSON pack file: { 'dataKey' : { // \"prefix\": \"...\", // optional, extend key by prefix // \"path\": \"...\", // optional, extend url by path // \"defaultType\": \"image\", // optional, default file type 'files' : [ { 'type' : 'image' , 'key' : '...' , 'url' : '...' }, { 'type' : 'image' , 'key' : '...' , 'url' : '...' } // ... ] }, 'node0' : { 'node1' : { 'node2' : { 'files' : [ // .... ] } } } // dataKey: 'node0.node1.node2' } File type: animationJSON audio binary glsl html htmlTexture image json script spritesheet svg text tilemapCSV tilemapJSON xml Release data \u00b6 var cache = scene . cache . text ; cache . remove ( key ); Data in cache \u00b6 var cache = scene . cache . text ; var hasData = cache . has ( key ); Replace \u00b6 Remove key . Load file again.","title":"Loader"},{"location":"loader/#introduction","text":"Load assets, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"loader/#usage","text":"","title":"Usage"},{"location":"loader/#loading-in-preload-stage","text":"scene . load . image ( key , url ); // scene.load.image(config); // config: {key, url} Loader in preload stage will start loading automatically by scene.","title":"Loading in preload stage"},{"location":"loader/#loading-after-preload-stage","text":"scene . load . image ( key , url ); // add task // scene.load.image(config); // config: {key, url} scene . load . once ( 'complete' , callback ); // add callback of 'complete' event scene . load . start (); // start loading","title":"Loading after preload stage"},{"location":"loader/#set-path","text":"scene . loader . setPath ( path )","title":"Set path"},{"location":"loader/#events","text":"Start loading scene . load . once ( 'start' , function (){}); Loading progressing scene . load . on ( 'progress' , function ( progress ){}); Loading a file object successful scene . load . once ( 'load' , function ( fileObj ){}); Loading a file object failed scene . load . once ( 'loaderror' , function ( fileObj ){}); All loading completed scene . load . once ( 'complete' , function (){});","title":"Events"},{"location":"loader/#status-of-loader","text":"Ready to start loading var isReady = scene . load . isReady (); Is loading var isLoading = scene . load . isLoading ();","title":"Status of loader"},{"location":"loader/#file-types","text":"","title":"File types"},{"location":"loader/#image","text":"Image scene . load . image ( key , url ); SVG scene . load . svg ( key , url ); // scene.load.svg(key, url, {width, height}); // scene.load.svg(key, url, {scale}); Html texture scene . load . htmlTexture ( key , url , width , height ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Image"},{"location":"loader/#sprite-sheet","text":"scene . load . spritesheet ( key , url , { // frameWidth: frameWidth, // frameHeight: frameHeight, // startFrame: startFrame, // endFrame: endFrame, // margin: margin, // spacing: spacing }); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Sprite sheet"},{"location":"loader/#texture-atlas","text":"scene . load . atlas ( key , textureURL , atlasURL ); Get data from texture cache var cache = scene . textures ; var data = cache . get ( key );","title":"Texture atlas"},{"location":"loader/#multi-file-texture-atlas","text":"scene . load . multiatlas ( key , textureURLs , atlasURLs );","title":"Multi file texture atlas"},{"location":"loader/#unity-texture-atlas","text":"scene . load . unityAtlas ( key , textureURL , atlasURL );","title":"Unity texture atlas"},{"location":"loader/#animation","text":"scene . load . animation ( key , url );","title":"Animation"},{"location":"loader/#audio","text":"scene . load . audio ( key , urls ); Get data from cache var cache = scene . cache . audio ; var data = cache . get ( key );","title":"Audio"},{"location":"loader/#audio-sprite","text":"scene . load . audioSprite ( key , urls , json , config );","title":"Audio sprite"},{"location":"loader/#video","text":"scene . load . video ( key , url , loadEvent , asBlob , noAudio ); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. asBlob : Load the video as a data blob, or via the Video element? Default value is false . noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false .","title":"Video"},{"location":"loader/#bitmap-font","text":"scene . load . bitmapFont ( key , textureURL , xmlURL ); Get data from cache var cache = scene . cache . bitmapFont ; var data = cache . get ( key );","title":"Bitmap font"},{"location":"loader/#tile-map","text":"scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Get data from cache var cache = scene . cache . tilemap ; var data = cache . get ( key );","title":"Tile map"},{"location":"loader/#text","text":"scene . load . text ( key , url ); Get data from cache var cache = scene . cache . text ; var data = cache . get ( key );","title":"Text"},{"location":"loader/#json","text":"scene . load . json ( key , url ); Get data from cache var cache = scene . cache . json ; var data = cache . get ( key );","title":"JSON"},{"location":"loader/#xml","text":"scene . load . xml ( key , url ); Get data from cache var cache = scene . cache . xml ; var data = cache . get ( key );","title":"XML"},{"location":"loader/#html","text":"scene . load . html ( key , url ); Get data from cache var cache = scene . cache . html ; var data = cache . get ( key );","title":"HTML"},{"location":"loader/#css","text":"scene . load . css ( key , url ); Get data from cache var cache = scene . cache . css ; var data = cache . get ( key );","title":"CSS"},{"location":"loader/#scene","text":"scene . load . sceneFile ( key , url ); The key matches the class name in the JavaScript file.","title":"Scene"},{"location":"loader/#script","text":"scene . load . script ( key , url );","title":"Script"},{"location":"loader/#scripts","text":"scene . load . scripts ( key , urlArray ); Add scripts in the exact order of urlArray .","title":"Scripts"},{"location":"loader/#glsl","text":"scene . load . glsl ( key , url ); Get data from cache var cache = scene . cache . shader ; var data = cache . get ( key ); A glsl file can contain multiple shaders, all separated by a frontmatter block. --- name : type : --- void main ( void ) { }","title":"GLSL"},{"location":"loader/#binary","text":"scene . load . binary ( key , url , dataType ); // dataType: Uint8Array // scene.load.binary(config); // config: {key, url, dataType} Get data from cache var cache = scene . cache . binary ; var data = cache . get ( key );","title":"Binary"},{"location":"loader/#plugin","text":"scene . load . plugin ( key , url , true ); // start plugin when loaded url : File url or class instance.","title":"Plugin"},{"location":"loader/#scene-plugin","text":"scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance.","title":"Scene plugin"},{"location":"loader/#file-pack","text":"Load files in JSON format. scene . load . pack ( key , url , dataKey ); JSON pack file: { 'dataKey' : { // \"prefix\": \"...\", // optional, extend key by prefix // \"path\": \"...\", // optional, extend url by path // \"defaultType\": \"image\", // optional, default file type 'files' : [ { 'type' : 'image' , 'key' : '...' , 'url' : '...' }, { 'type' : 'image' , 'key' : '...' , 'url' : '...' } // ... ] }, 'node0' : { 'node1' : { 'node2' : { 'files' : [ // .... ] } } } // dataKey: 'node0.node1.node2' } File type: animationJSON audio binary glsl html htmlTexture image json script spritesheet svg text tilemapCSV tilemapJSON xml","title":"File pack"},{"location":"loader/#release-data","text":"var cache = scene . cache . text ; cache . remove ( key );","title":"Release data"},{"location":"loader/#data-in-cache","text":"var cache = scene . cache . text ; var hasData = cache . has ( key );","title":"Data in cache"},{"location":"loader/#replace","text":"Remove key . Load file again.","title":"Replace"},{"location":"localforage/","text":"Introduction \u00b6 Offline storage, improved. Author: Mozilla Usage \u00b6 Official document Sample code By default, LocalForage selects backend drivers for the datastore in this order: IndexedDB WebSQL localStorage Save data \u00b6 Callback localforage . setItem ( key , value , function (){ /* ... */ }); Promise localforage . setItem ( key , value ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ }); Read data \u00b6 Callback localforage . getItem ( key , function ( err , value ){ /* ... */ }); Promise localforage . getItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ }); Remove data \u00b6 Callback localforage . removeItem ( key , function (){ /* ... */ }); Promise localforage . removeItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"LocalForage"},{"location":"localforage/#introduction","text":"Offline storage, improved. Author: Mozilla","title":"Introduction"},{"location":"localforage/#usage","text":"Official document Sample code By default, LocalForage selects backend drivers for the datastore in this order: IndexedDB WebSQL localStorage","title":"Usage"},{"location":"localforage/#save-data","text":"Callback localforage . setItem ( key , value , function (){ /* ... */ }); Promise localforage . setItem ( key , value ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Save data"},{"location":"localforage/#read-data","text":"Callback localforage . getItem ( key , function ( err , value ){ /* ... */ }); Promise localforage . getItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Read data"},{"location":"localforage/#remove-data","text":"Callback localforage . removeItem ( key , function (){ /* ... */ }); Promise localforage . removeItem ( key ) . then ( function ( value ){ /* ... */ }) . catch ( function ( err ){ /* ... */ });","title":"Remove data"},{"location":"localstorage/","text":"Introduction \u00b6 Store small data in key-value pairs locally within the user's browser. Author: Built-in javascript function Usage \u00b6 Reference Sample code Save data \u00b6 localStorage . setItem ( key , value ); Read data \u00b6 var value = localStorage . getItem ( key ); Remove data \u00b6 localStorage . removeItem ( key );","title":"LocalStorage"},{"location":"localstorage/#introduction","text":"Store small data in key-value pairs locally within the user's browser. Author: Built-in javascript function","title":"Introduction"},{"location":"localstorage/#usage","text":"Reference Sample code","title":"Usage"},{"location":"localstorage/#save-data","text":"localStorage . setItem ( key , value );","title":"Save data"},{"location":"localstorage/#read-data","text":"var value = localStorage . getItem ( key );","title":"Read data"},{"location":"localstorage/#remove-data","text":"localStorage . removeItem ( key );","title":"Remove data"},{"location":"lokijs/","text":"Introduction \u00b6 In-memory JavaScript Datastore with Persistence. Reference API Usage \u00b6 Sample code Create database \u00b6 var db = new loki (); // var db = new loki('loki.json'); // load database from file Create collection \u00b6 var collection = db . addCollection ( name ); Insert document \u00b6 var docInColl = collection . insert ( doc ); // doc: an object Get Id var id = docInColl . $loki ; Insert documents \u00b6 collection . insert ( docArray ); // documents in array Query \u00b6 Get document by id \u00b6 var doc = collection . get ( id ); // id: `$loki` Filter documents \u00b6 $eq : filter for document(s) with property of (strict) equality var docArray = collection . find ({ key : value }); // var docArray = collection.find({key: {'$eq': value}); $aeq : filter for document(s) with property of abstract (loose) equality var docArray = collection . find ({ key : { '$aeq' : value }); For example var results = coll . find ({ age : { '$aeq' : 20 }}); // age == '20' or age == 20 $ne : filter for document(s) with property not equal to provided value var docArray = collection . find ({ key : { '$ne' : value }); $gt : filter for document(s) with property greater than provided value var docArray = collection . find ({ key : { '$gt' : value }); $gte : filter for document(s) with property greater or equal to provided value var docArray = collection . find ({ key : { '$gte' : value }); $lt : filter for document(s) with property less than provided value var docArray = collection . find ({ key : { '$lt' : value }); $lte : filter for document(s) with property less than or equal to provided value var docArray = collection . find ({ key : { '$lte' : value }); $between : filter for documents(s) with property between provided values var docArray = collection . find ({ key : { '$between' : [ value0 , value1 ]}); $in : filter for document(s) with property matching any of the provided array values var docArray = collection . find ({ key : { '$in' : [ value0 , value1 , ...]}); Your property should not be an array but your compare values should be. $nin : filter for document(s) with property not matching any of the provided array values var docArray = collection . find ({ key : { '$nin' : [ value0 , value1 , ...]}); $contains : filter for document(s) with property containing the provided value var docArray = collection . find ({ key : { '$contains' : value }); Use this when your property contains an array but your compare value is not an array $containsAny : filter for document(s) with property containing any of the provided values var docArray = collection . find ({ key : { '$containsAny' : [ value0 , value1 , ...]}); $containsNone : filter for documents(s) with property containing none of the provided values var docArray = collection . find ({ key : { '$containsNone' : [ value0 , value1 , ...]}); $regex : filter for document(s) with property matching provided regular expression var docArray = collection . find ({ key : { '$regex' : pattern }); // var docArray = collection.find({key: {'$regex': [pattern, options]}); For example var docArray = collection . find ({ key : { '$regex' : 'din' }}); var docArray = collection . find ({ key : { '$regex' : [ 'din' , 'i' ] }}); $dteq : filter for document(s) with date property equal to provided date value var docArray = collection . find ({ key : { '$dteq' : new Date ( '1/1/2017' )}); $type : filter for documents which have a property of a specified type var docArray = collection . find ({ key : { '$type' : value }); // 'string', or 'number', ... $size : filter for documents which have array property of specified size var docArray = collection . find ({ key : { '$size' : value }); (does not work for strings) $len : filter for documents which have string property of specified length var docArray = collection . find ({ key : { '$len' : value }); $or : filter for documents which meet any of the nested subexpressions var docArray = collection . find ({ '$or' : [ { key0 : { '$lt' : value0 }, { key1 : { '$gte' : value1 }, // ... ]}); Find one document \u00b6 var doc = collection . findOne ({}); Filter by function \u00b6 var docArray = collection . where ( function ( doc ){ // ... return isPicked ; // true to pick this document }) Sort \u00b6 Sort with a key var docArray = collection . chain (). find ({}). simplesort ( key ). data (); // ascending // var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data(); // descending Sort with mutiple keys var docArray = collection . chain (). find ({}). compoundsort ([ key0 , key1 ]). data (); // key0, key1: ascending // var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending Sort with function var docArray = collection . chain (). find ({}). sort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }) . data (); result: 0 : equal 1 : greater -1 : less Pagination \u00b6 Get documents from start to start+count-1 . var docArray = collection . chain (). find ({}). offset ( start ). limit ( count ). data (); Update \u00b6 Update each filtered documents. var docArray = collection . chain (). find ({}). update ( function ( doc ) { // return doc ; }); Remove \u00b6 Remove filtered documents. collection . chain (). find ({}). remove (); Map \u00b6 Map document into a new anonymous collection, won't affect original collection. var docArray = collection . chain (). find ({}). map ( function ( doc ) { // ... return doc }) . data (); Map-reduce \u00b6 Map document into a new anonymous collection Run reduceFn to get final result value from result set of step 1. var mapFn = function ( doc ) { // ... return doc }; var reduceFn = function ( docArray ) { // ... return result ; } var result = collection . chain (). find ({}). mapReduce ( mapFn , reduceFn ); Clone result set \u00b6 var resultSet = collection . chain (). find ({}); var resultSetClone = resultSet . branch (); // resultSetClone.find({}).data(); Dynamic view \u00b6 Create dynamic view var view = children . addDynamicView ( name ); Add filters find view . applyFind ({}); where view . applyWhere ( function ( doc ) { return true ; }); simple sort view . applySimpleSort ( key ); sort by multiple keys view . applySortCriteria ([ key0 , key1 ]); // view.applySortCriteria([key0, [key1, true]]); sort function view . applySort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }); result: 0 : equal 1 : greater -1 : less Get result data var docArray = view . data (); Add new filters var docArray = view . branchResultset (). find ({}). data (); Speed-up quering \u00b6 Custom unique index \u00b6 Define custom unique index var collection = db . addCollection ( name , { unique : [ key0 ] }); Get document by custom unique index var doc = collection . by ( key0 , value ); Binary indices \u00b6 Define binary index var collection = db . addCollection ( name , { indices : [ key0 ] }); Or collection . ensureIndex ( key ); Get documents by normal filters var docArray = collection . find ({ key0 : { '$gt' : value }}); Methods of collection \u00b6 Average value of a property var avgValue = collection . avg ( key ); Maximum value of a property var maxValue = collection . max ( key ); Minimum value of a property var minValue = collection . min ( key ); Median value of a property var medianValue = collection . median ( key ); Amount of documents var amount = collection . count ( query ); // {key: {'$gt': value}} Serialize & Deserialize \u00b6 Database as string var s = db . serialize (); Load database from string db . loadJSON ( s );","title":"LokiJs"},{"location":"lokijs/#introduction","text":"In-memory JavaScript Datastore with Persistence. Reference API","title":"Introduction"},{"location":"lokijs/#usage","text":"Sample code","title":"Usage"},{"location":"lokijs/#create-database","text":"var db = new loki (); // var db = new loki('loki.json'); // load database from file","title":"Create database"},{"location":"lokijs/#create-collection","text":"var collection = db . addCollection ( name );","title":"Create collection"},{"location":"lokijs/#insert-document","text":"var docInColl = collection . insert ( doc ); // doc: an object Get Id var id = docInColl . $loki ;","title":"Insert document"},{"location":"lokijs/#insert-documents","text":"collection . insert ( docArray ); // documents in array","title":"Insert documents"},{"location":"lokijs/#query","text":"","title":"Query"},{"location":"lokijs/#get-document-by-id","text":"var doc = collection . get ( id ); // id: `$loki`","title":"Get document by id"},{"location":"lokijs/#filter-documents","text":"$eq : filter for document(s) with property of (strict) equality var docArray = collection . find ({ key : value }); // var docArray = collection.find({key: {'$eq': value}); $aeq : filter for document(s) with property of abstract (loose) equality var docArray = collection . find ({ key : { '$aeq' : value }); For example var results = coll . find ({ age : { '$aeq' : 20 }}); // age == '20' or age == 20 $ne : filter for document(s) with property not equal to provided value var docArray = collection . find ({ key : { '$ne' : value }); $gt : filter for document(s) with property greater than provided value var docArray = collection . find ({ key : { '$gt' : value }); $gte : filter for document(s) with property greater or equal to provided value var docArray = collection . find ({ key : { '$gte' : value }); $lt : filter for document(s) with property less than provided value var docArray = collection . find ({ key : { '$lt' : value }); $lte : filter for document(s) with property less than or equal to provided value var docArray = collection . find ({ key : { '$lte' : value }); $between : filter for documents(s) with property between provided values var docArray = collection . find ({ key : { '$between' : [ value0 , value1 ]}); $in : filter for document(s) with property matching any of the provided array values var docArray = collection . find ({ key : { '$in' : [ value0 , value1 , ...]}); Your property should not be an array but your compare values should be. $nin : filter for document(s) with property not matching any of the provided array values var docArray = collection . find ({ key : { '$nin' : [ value0 , value1 , ...]}); $contains : filter for document(s) with property containing the provided value var docArray = collection . find ({ key : { '$contains' : value }); Use this when your property contains an array but your compare value is not an array $containsAny : filter for document(s) with property containing any of the provided values var docArray = collection . find ({ key : { '$containsAny' : [ value0 , value1 , ...]}); $containsNone : filter for documents(s) with property containing none of the provided values var docArray = collection . find ({ key : { '$containsNone' : [ value0 , value1 , ...]}); $regex : filter for document(s) with property matching provided regular expression var docArray = collection . find ({ key : { '$regex' : pattern }); // var docArray = collection.find({key: {'$regex': [pattern, options]}); For example var docArray = collection . find ({ key : { '$regex' : 'din' }}); var docArray = collection . find ({ key : { '$regex' : [ 'din' , 'i' ] }}); $dteq : filter for document(s) with date property equal to provided date value var docArray = collection . find ({ key : { '$dteq' : new Date ( '1/1/2017' )}); $type : filter for documents which have a property of a specified type var docArray = collection . find ({ key : { '$type' : value }); // 'string', or 'number', ... $size : filter for documents which have array property of specified size var docArray = collection . find ({ key : { '$size' : value }); (does not work for strings) $len : filter for documents which have string property of specified length var docArray = collection . find ({ key : { '$len' : value }); $or : filter for documents which meet any of the nested subexpressions var docArray = collection . find ({ '$or' : [ { key0 : { '$lt' : value0 }, { key1 : { '$gte' : value1 }, // ... ]});","title":"Filter documents"},{"location":"lokijs/#find-one-document","text":"var doc = collection . findOne ({});","title":"Find one document"},{"location":"lokijs/#filter-by-function","text":"var docArray = collection . where ( function ( doc ){ // ... return isPicked ; // true to pick this document })","title":"Filter by function"},{"location":"lokijs/#sort","text":"Sort with a key var docArray = collection . chain (). find ({}). simplesort ( key ). data (); // ascending // var docArray = collection.chain().find({}).simplesort(key, {desc: true}).data(); // descending Sort with mutiple keys var docArray = collection . chain (). find ({}). compoundsort ([ key0 , key1 ]). data (); // key0, key1: ascending // var docArray = collection.chain().find({}).compoundsort([key0, [key1, true]]).data(); // key0: ascending, key1: descending Sort with function var docArray = collection . chain (). find ({}). sort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }) . data (); result: 0 : equal 1 : greater -1 : less","title":"Sort"},{"location":"lokijs/#pagination","text":"Get documents from start to start+count-1 . var docArray = collection . chain (). find ({}). offset ( start ). limit ( count ). data ();","title":"Pagination"},{"location":"lokijs/#update","text":"Update each filtered documents. var docArray = collection . chain (). find ({}). update ( function ( doc ) { // return doc ; });","title":"Update"},{"location":"lokijs/#remove","text":"Remove filtered documents. collection . chain (). find ({}). remove ();","title":"Remove"},{"location":"lokijs/#map","text":"Map document into a new anonymous collection, won't affect original collection. var docArray = collection . chain (). find ({}). map ( function ( doc ) { // ... return doc }) . data ();","title":"Map"},{"location":"lokijs/#map-reduce","text":"Map document into a new anonymous collection Run reduceFn to get final result value from result set of step 1. var mapFn = function ( doc ) { // ... return doc }; var reduceFn = function ( docArray ) { // ... return result ; } var result = collection . chain (). find ({}). mapReduce ( mapFn , reduceFn );","title":"Map-reduce"},{"location":"lokijs/#clone-result-set","text":"var resultSet = collection . chain (). find ({}); var resultSetClone = resultSet . branch (); // resultSetClone.find({}).data();","title":"Clone result set"},{"location":"lokijs/#dynamic-view","text":"Create dynamic view var view = children . addDynamicView ( name ); Add filters find view . applyFind ({}); where view . applyWhere ( function ( doc ) { return true ; }); simple sort view . applySimpleSort ( key ); sort by multiple keys view . applySortCriteria ([ key0 , key1 ]); // view.applySortCriteria([key0, [key1, true]]); sort function view . applySort ( function ( doc1 , doc2 ) { return result ; // 0, 1, -1 }); result: 0 : equal 1 : greater -1 : less Get result data var docArray = view . data (); Add new filters var docArray = view . branchResultset (). find ({}). data ();","title":"Dynamic view"},{"location":"lokijs/#speed-up-quering","text":"","title":"Speed-up quering"},{"location":"lokijs/#custom-unique-index","text":"Define custom unique index var collection = db . addCollection ( name , { unique : [ key0 ] }); Get document by custom unique index var doc = collection . by ( key0 , value );","title":"Custom unique index"},{"location":"lokijs/#binary-indices","text":"Define binary index var collection = db . addCollection ( name , { indices : [ key0 ] }); Or collection . ensureIndex ( key ); Get documents by normal filters var docArray = collection . find ({ key0 : { '$gt' : value }});","title":"Binary indices"},{"location":"lokijs/#methods-of-collection","text":"Average value of a property var avgValue = collection . avg ( key ); Maximum value of a property var maxValue = collection . max ( key ); Minimum value of a property var minValue = collection . min ( key ); Median value of a property var medianValue = collection . median ( key ); Amount of documents var amount = collection . count ( query ); // {key: {'$gt': value}}","title":"Methods of collection"},{"location":"lokijs/#serialize-deserialize","text":"Database as string var s = db . serialize (); Load database from string db . loadJSON ( s );","title":"Serialize &amp; Deserialize"},{"location":"lzstring/","text":"Introduction \u00b6 Compress string using LZ-based compression algorithm. Reference Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexXOR from './plugins/lzstring.js' ; Install global plugin \u00b6 Install plugin in configuration of game import LZString from './plugins/lzstring-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLZString' , plugin : LZString , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var lzstring = scene . plugins . get ( 'rexLZString' ). add ({ // encoding: 'none' // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3 }); encoding : 'none' , or 0 : no encoding. 'base64' , or 1 : base64 encoding. 'utf16' , or 2 : UTF16 encoding. 'uri' , or 3 : URI encoding. Compression \u00b6 var compressionResult = lzstring . compress ( src ); Decompression \u00b6 var decompressionResult = lzstring . decompress ( compressionResult ); Set encoding \u00b6 lzstring . setEncoding ( m ); // 0|'none'|1|'base64'|2|'utf16'|3|'uri'","title":"LZ string"},{"location":"lzstring/#introduction","text":"Compress string using LZ-based compression algorithm. Reference Author: Rex Member of scene","title":"Introduction"},{"location":"lzstring/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"lzstring/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"lzstring/#import-class","text":"import rexXOR from './plugins/lzstring.js' ;","title":"Import class"},{"location":"lzstring/#install-global-plugin","text":"Install plugin in configuration of game import LZString from './plugins/lzstring-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexLZString' , plugin : LZString , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"lzstring/#create-instance","text":"var lzstring = scene . plugins . get ( 'rexLZString' ). add ({ // encoding: 'none' // 'none'|0, 'base64'|1, 'utf16'|2, 'uri'|3 }); encoding : 'none' , or 0 : no encoding. 'base64' , or 1 : base64 encoding. 'utf16' , or 2 : UTF16 encoding. 'uri' , or 3 : URI encoding.","title":"Create instance"},{"location":"lzstring/#compression","text":"var compressionResult = lzstring . compress ( src );","title":"Compression"},{"location":"lzstring/#decompression","text":"var decompressionResult = lzstring . decompress ( compressionResult );","title":"Decompression"},{"location":"lzstring/#set-encoding","text":"lzstring . setEncoding ( m ); // 0|'none'|1|'base64'|2|'utf16'|3|'uri'","title":"Set encoding"},{"location":"mainloop/","text":"game.events prestep event. Global Managers like Input and Sound update. trigger game.sound.update() game.events step event. User-land code and plugins Register event scene . game . events . on ( 'step' , function ( time , delta ){ // }, scope ); Update the Scene Manager and all active Scenes scene.events preupdate event Register event scene . events . on ( 'preupdate' , function ( time , delta ){ // }, scope ); TweenManager.preUpdate() to arrange active targets UpdateList.preUpdate(), to arrange game objects in UpdateList scene.events update event Register event scene . events . on ( 'update' , function ( time , delta ){ // }, scope ); TweenManager.update(), to run active tweens UpdateList.update gameObject.preUpdate scene.update() scene.events postupdate event Register event scene . events . on ( 'postupdate' , function ( time , delta ){ // }, scope ); game.events poststep event. Final event before rendering starts. Register event scene . game . events . on ( 'poststep' , function ( time , delta ){ // }, scope ); game.renderer.preRender() game.events prerender event Register event scene . game . events . on ( 'prerender' , function ( renderer , time , delta ){ // }, scope ); SceneManager.render() Sort display list Render cameras scene.events render event Register event scene . game . events . on ( 'render' , function ( renderer ){ // }, scope ); game.renderer.postRender() game.events postrender event. Final event before the step repeats. Register event scene . game . events . on ( 'postrender' , function ( renderer , time , delta ){ // }, scope ); Note Each scene is a standalone system. Flow chart \u00b6 Game loop \u00b6 graph TB subgraph Render GameRenderPreRender[\"game.renderer.preRender()\"] GameEventPreRender>\"game.events: prerender\"] SceneManagerRender[\"SceneManager.render()<br>...See 'Scene steps'...\"] GameRenderPostRender[\"game.renderer.postRender()\"] GameEventPostRender>\"game.events: postrender\"] end subgraph Step GameEventPreStep>\"game.events: prestep<br><br>sound.update()\"] GameEventStep>\"game.events: step\"] SceneManagerUpdate[\"SceneManager.update()<br>...See 'Scene steps'...\"] GameEventPostStep>\"game.events: poststep\"] end GameEventPreStep --> GameEventStep GameEventStep --> SceneManagerUpdate SceneManagerUpdate --> GameEventPostStep GameEventPostStep --> GameRenderPreRender GameRenderPreRender --> GameEventPreRender GameEventPreRender --> SceneManagerRender SceneManagerRender --> GameRenderPostRender GameRenderPostRender --> GameEventPostRender GameEventPostRender --> GameEventPreStep Scene steps \u00b6 graph TB subgraph Render SceneEventRender>\"scene.events: render\"] end subgraph Update SceneEventPreUpdate>\"scene.events: preupdate<br><br>TweenManager.preUpdate()<br>UpdateList.preUpdate()\"] SceneEventUpdate>\"scene.events: update<br><br>TweenManager.update()<br>UpdateList.update()<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.events: postupdate\"] end SceneEventPreUpdate --> SceneEventUpdate SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate -.-> SceneEventRender","title":"Main loop"},{"location":"mainloop/#flow-chart","text":"","title":"Flow chart"},{"location":"mainloop/#game-loop","text":"graph TB subgraph Render GameRenderPreRender[\"game.renderer.preRender()\"] GameEventPreRender>\"game.events: prerender\"] SceneManagerRender[\"SceneManager.render()<br>...See 'Scene steps'...\"] GameRenderPostRender[\"game.renderer.postRender()\"] GameEventPostRender>\"game.events: postrender\"] end subgraph Step GameEventPreStep>\"game.events: prestep<br><br>sound.update()\"] GameEventStep>\"game.events: step\"] SceneManagerUpdate[\"SceneManager.update()<br>...See 'Scene steps'...\"] GameEventPostStep>\"game.events: poststep\"] end GameEventPreStep --> GameEventStep GameEventStep --> SceneManagerUpdate SceneManagerUpdate --> GameEventPostStep GameEventPostStep --> GameRenderPreRender GameRenderPreRender --> GameEventPreRender GameEventPreRender --> SceneManagerRender SceneManagerRender --> GameRenderPostRender GameRenderPostRender --> GameEventPostRender GameEventPostRender --> GameEventPreStep","title":"Game loop"},{"location":"mainloop/#scene-steps","text":"graph TB subgraph Render SceneEventRender>\"scene.events: render\"] end subgraph Update SceneEventPreUpdate>\"scene.events: preupdate<br><br>TweenManager.preUpdate()<br>UpdateList.preUpdate()\"] SceneEventUpdate>\"scene.events: update<br><br>TweenManager.update()<br>UpdateList.update()<br>gameObject.preUpdate()\"] SceneUpdate[\"scene.update()\"] SceneEventPostUpdate>\"scene.events: postupdate\"] end SceneEventPreUpdate --> SceneEventUpdate SceneEventUpdate --> SceneUpdate SceneUpdate --> SceneEventPostUpdate SceneEventPostUpdate -.-> SceneEventRender","title":"Scene steps"},{"location":"mask/","text":"Introduction \u00b6 Apply mask on game object. Built-in render of phaser. Author: Richard Davey Usage \u00b6 Add mask \u00b6 Create mask object Create mask from texture Create image ( image , sprite , quad , bitmap text, particles , text ) var shape = scene . add . image ( x , y , key ). setVisible ( false ); Create mask var mask = shape . createBitmapMask (); or var mask = new Phaser . Display . Masks . BitmapMask ( scene , shape ); WebGL only Create mask from graphics Create graphics var shape = scene . make . graphics (); Create mask var mask = shape . createGeometryMask (); or var mask = new Phaser . Display . Masks . GeometryMask ( scene , shape ); Add mask object to image game object // var image = scene.add.image(...); image . setMask ( mask ); // image.mask = mask; A mask object could be added to many game objects. Clear mask \u00b6 Clear mask image . clearMask (); Clear mask and destroy mask object image . clearMask ( true ); Invert alpha \u00b6 Only GeometryMask has inverse alpha feature. Inverse alpha mask . setInvertAlpha (); // mask.invertAlpha = true; Disable mask . setInvertAlpha ( false ); // mask.invertAlpha = false;","title":"Mask"},{"location":"mask/#introduction","text":"Apply mask on game object. Built-in render of phaser. Author: Richard Davey","title":"Introduction"},{"location":"mask/#usage","text":"","title":"Usage"},{"location":"mask/#add-mask","text":"Create mask object Create mask from texture Create image ( image , sprite , quad , bitmap text, particles , text ) var shape = scene . add . image ( x , y , key ). setVisible ( false ); Create mask var mask = shape . createBitmapMask (); or var mask = new Phaser . Display . Masks . BitmapMask ( scene , shape ); WebGL only Create mask from graphics Create graphics var shape = scene . make . graphics (); Create mask var mask = shape . createGeometryMask (); or var mask = new Phaser . Display . Masks . GeometryMask ( scene , shape ); Add mask object to image game object // var image = scene.add.image(...); image . setMask ( mask ); // image.mask = mask; A mask object could be added to many game objects.","title":"Add mask"},{"location":"mask/#clear-mask","text":"Clear mask image . clearMask (); Clear mask and destroy mask object image . clearMask ( true );","title":"Clear mask"},{"location":"mask/#invert-alpha","text":"Only GeometryMask has inverse alpha feature. Inverse alpha mask . setInvertAlpha (); // mask.invertAlpha = true; Disable mask . setInvertAlpha ( false ); // mask.invertAlpha = false;","title":"Invert alpha"},{"location":"matterjs-attractor/","text":"Introduction \u00b6 Apply continual forces on bodies. Reference Usage \u00b6 System configuration \u00b6 Game config var config = { // ... physics : { matter : { // ... plugins : { attractors : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableAttractorPlugin (); Matter object configuration \u00b6 var options = { // ... plugin : { attractors : [ callback , // ... ] }, // ... } callback : Retuen a force ( {x,y} ), which will be applied to bodyB function ( bodyA , bodyB ) { return { x , y }; // Force } bodyA : Attractor matter object. bodyB : Other matter object. Apply forece to bodies directly. function ( bodyA , bodyB ) { bodyA . gameObject . applyForce ({ x , y }); bodyB . gameObject . applyForce ({ x , y }); } bodyA : Attractor matter object. bodyA.gameObject : Game object . bodyB : Other matter object. bodyB.gameObject : Game object .","title":"Attractor"},{"location":"matterjs-attractor/#introduction","text":"Apply continual forces on bodies. Reference","title":"Introduction"},{"location":"matterjs-attractor/#usage","text":"","title":"Usage"},{"location":"matterjs-attractor/#system-configuration","text":"Game config var config = { // ... physics : { matter : { // ... plugins : { attractors : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableAttractorPlugin ();","title":"System configuration"},{"location":"matterjs-attractor/#matter-object-configuration","text":"var options = { // ... plugin : { attractors : [ callback , // ... ] }, // ... } callback : Retuen a force ( {x,y} ), which will be applied to bodyB function ( bodyA , bodyB ) { return { x , y }; // Force } bodyA : Attractor matter object. bodyB : Other matter object. Apply forece to bodies directly. function ( bodyA , bodyB ) { bodyA . gameObject . applyForce ({ x , y }); bodyB . gameObject . applyForce ({ x , y }); } bodyA : Attractor matter object. bodyA.gameObject : Game object . bodyB : Other matter object. bodyB.gameObject : Game object .","title":"Matter object configuration"},{"location":"matterjs-gameobject/","text":"Introduction \u00b6 Matterjs physics Image/Sprite/Group object. Author: Richard Davey Usage \u00b6 Add physics object \u00b6 Enable physics world Image object \u00b6 var image = scene . matter . add . imag ( x , y , key , frame ); // var image = scene.matter.add.imag(x, y, key, frame, config); config : Config object Sprite object \u00b6 var image = scene . matter . add . sprite ( x , y , key , frame ); // var image = scene.matter.add.sprite(x, y, key, frame, config); config : Config object Any game object \u00b6 var gameObject = scene . matter . add . gameObject ( gameObject ); // var gameObject = scene.matter.add.gameObject(gameObject, config); config : Config object Image composite \u00b6 Create a new composite containing Matter Image objects created in a grid arrangement. var composite = scene . matter . add . imageStack ( key , frame , x , y , columns , rows ); // var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options); key , frame : Texture key and frame name. x , y : Top-left position of these game objects. columns , rows : The number of columns/rows in the grid. columnGap , rowGap : The distance between each column/row. config : Config object composite : Composite matter object. composite.bodies : An array of bodies. Config \u00b6 { label : 'Body' , shape : 'rectangle' , chamfer : null , isStatic : false , isSensor : false , isSleeping : false , ignoreGravity : false , ignorePointer : false , sleepThreshold : 60 , density : 0.001 , restitution : 0 , friction : 0.1 , frictionStatic : 0.5 , frictionAir : 0.01 , force : { x : 0 , y : 0 }, angle : 0 , torque : 0 , collisionFilter : { group : 0 , category : 0x0001 , mask : 0xFFFFFFFF , }, // parts: [], // plugin: { // attractors: [ // (function(bodyA, bodyB) { return {x, y}}), // ] // }, slop : 0.05 , timeScale : 1 , } label : An arbitrary String name to help the user identify and manage bodies. shape : A string : 'rectangle' , 'circle' , 'trapezoid' , 'polygon' , 'fromVertices' , 'fromPhysicsEditor' An object : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Vertices { type : 'fromVertices' , verts : points , // flagInternal: false, // removeCollinear: 0.01, // minimumArea: 10, } points : A string : 'x0 y0 x1 y1 ...' An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] chamfer : null A number {radius: value} {radius: [topLeft, topRight, bottomRight, bottomLeft]} isStatic : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed. isSensor : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically. isSleeping : 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. sleepThreshold : The number of updates in which this body must have near-zero velocity before it is set as sleeping. density : Density of the body, that is its mass per unit area. restitution : The restitution/bounce/elasticity of the body. The value is always positive and is in the range (0, 1) . 0 : Collisions may be perfectly inelastic and no bouncing may occur. 0.8 : The body may bounce back with approximately 80% of its kinetic energy. friction : Friction of the body. The value is always positive and is in the range (0, 1) . 0 : The body may slide indefinitely. 1 : The body may come to a stop almost instantly after a force is applied. frictionStatic : The static friction of the body (in the Coulomb friction model). 0 : The body will never 'stick' when it is nearly stationary and only dynamic friction is used. 10 : The higher the value, the more force it will take to initially get the body moving when nearly stationary. frictionAir : The air friction of the body (air resistance). 0 : The body will never slow as it moves through space. The higher the value, the faster a body slows when moving through space. force : The force to apply in the current step. angle : Angle of the body, in radians. torque : the torque (turning force) to apply in the current step. collisionFilter : An Object that specifies the collision filtering properties of this body. collisionFilter.group collisionFilter.category : A bit field that specifies the collision category this body belongs to. collisionFilter.mask : A bit mask that specifies the collision categories this body may collide with. slop : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies. The default should generally suffice, although very large bodies may require larger values for stable stacking. Collision \u00b6 Collisions between two bodies will obey the following rules: (grpupA > 0) && (groupB > 0) : Collision = (groupA == groupB) (grpupA == 0) || (groupB == 0) : Collision = ((categoryA & maskB) !== 0) && ((categoryB & maskA) !== 0) Movement \u00b6 Velocity \u00b6 gameObject . setVelocity ( x , y ); gameObject . setVelocityX ( x ); gameObject . setVelocityY ( x ); Acceleration \u00b6 Force \u00b6 Applies a force to a body. gameObject . applyForce ( force ); force : {x, y} Applies a force to a body from a given position. gameObject . applyForceFrom ( position , force ); // position, force: {x, y} position : {x, y} force : {x, y} Apply thrust to the forward position of the body. gameObject . thrust ( speed ); speed : A number. Apply thrust to the left position of the body. gameObject . thrustLeft ( speed ); speed : A number. Apply thrust to the right position of the body. gameObject . thrustRight ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Gravity \u00b6 Ignore world gravity gameObject . setIgnoreGravity ( ignore ); ignore : Set to true to ignore the effect of world gravity Friction \u00b6 gameObject . setFriction ( value , air , fstatic ); gameObject . setFrictionAir ( v ); gameObject . setFrictionStatic ( v ); Rotation \u00b6 Fixed rotation \u00b6 gameObject . setFixedRotation (); Angular velocity \u00b6 gameObject . setAngularVelocity ( v ); Collision \u00b6 Enable \u00b6 Get var isSensor = gameObject . isSensor (); Set gameObject . setSensor ( value ); value : Set true to enable senser. Collision group \u00b6 Collision grpup gameObject . setCollisionGroup ( value ); Collision category Get new collision category var category = scene . matter . world . nextCategory (); category : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1<<31)) Set collision category of game object gameObject . setCollisionCategory ( category ); Set category mask gameObject . setCollidesWith ([ categoryA , categoryB , ...]); // gameObject.setCollidesWith(categoryA); Collision event \u00b6 scene . matter . world . on ( 'collisionstart' , function ( event , bodyA , bodyB ) { // var pairs = event.pairs; }); event : event.pairs : An array of collision pairs event.pairs[i].bodyA , event.pairs[i].bodyB : Matter body object. body.gameObject : Game object of matter body. bodyA , bodyB : Equal to event.pairs[0].bodyA , event.pairs[0].bodyB . Collision bound \u00b6 Rectangle gameObject . setRectangle ( width , height , options ); Circle gameObject . setCircle ( radius , options ); Polygon gameObject . setPolygon ( radius , sides , options ); Trapezoid gameObject . setTrapezoid ( width , height , slope , options ); Any gameObject . setBody ( config , options ); config : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Bounce \u00b6 gameObject . setBounce ( v ); restitution Mass \u00b6 gameObject . setMass ( v ); gameObject . setDensity ( v ); Sleep \u00b6 Enable \u00b6 var config = { // ... physics : { matter : { // ... enableSleeping : true // ... } } } Sleep threshold \u00b6 gameObject . setSleepThreshold ( value ); Sleep events \u00b6 Sleeping start scene . matter . world . on ( 'sleepstart' , function ( event , body ) { }); Sleeping end scene . matter . world . on ( 'sleepend' , function ( event , body ) { });","title":"Game object"},{"location":"matterjs-gameobject/#introduction","text":"Matterjs physics Image/Sprite/Group object. Author: Richard Davey","title":"Introduction"},{"location":"matterjs-gameobject/#usage","text":"","title":"Usage"},{"location":"matterjs-gameobject/#add-physics-object","text":"Enable physics world","title":"Add physics object"},{"location":"matterjs-gameobject/#image-object","text":"var image = scene . matter . add . imag ( x , y , key , frame ); // var image = scene.matter.add.imag(x, y, key, frame, config); config : Config object","title":"Image object"},{"location":"matterjs-gameobject/#sprite-object","text":"var image = scene . matter . add . sprite ( x , y , key , frame ); // var image = scene.matter.add.sprite(x, y, key, frame, config); config : Config object","title":"Sprite object"},{"location":"matterjs-gameobject/#any-game-object","text":"var gameObject = scene . matter . add . gameObject ( gameObject ); // var gameObject = scene.matter.add.gameObject(gameObject, config); config : Config object","title":"Any game object"},{"location":"matterjs-gameobject/#image-composite","text":"Create a new composite containing Matter Image objects created in a grid arrangement. var composite = scene . matter . add . imageStack ( key , frame , x , y , columns , rows ); // var composite = scene.matter.add.imageStack(key, frame, x, y, columns, rows, columnGap, rowGap, options); key , frame : Texture key and frame name. x , y : Top-left position of these game objects. columns , rows : The number of columns/rows in the grid. columnGap , rowGap : The distance between each column/row. config : Config object composite : Composite matter object. composite.bodies : An array of bodies.","title":"Image composite"},{"location":"matterjs-gameobject/#config","text":"{ label : 'Body' , shape : 'rectangle' , chamfer : null , isStatic : false , isSensor : false , isSleeping : false , ignoreGravity : false , ignorePointer : false , sleepThreshold : 60 , density : 0.001 , restitution : 0 , friction : 0.1 , frictionStatic : 0.5 , frictionAir : 0.01 , force : { x : 0 , y : 0 }, angle : 0 , torque : 0 , collisionFilter : { group : 0 , category : 0x0001 , mask : 0xFFFFFFFF , }, // parts: [], // plugin: { // attractors: [ // (function(bodyA, bodyB) { return {x, y}}), // ] // }, slop : 0.05 , timeScale : 1 , } label : An arbitrary String name to help the user identify and manage bodies. shape : A string : 'rectangle' , 'circle' , 'trapezoid' , 'polygon' , 'fromVertices' , 'fromPhysicsEditor' An object : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, } Vertices { type : 'fromVertices' , verts : points , // flagInternal: false, // removeCollinear: 0.01, // minimumArea: 10, } points : A string : 'x0 y0 x1 y1 ...' An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] chamfer : null A number {radius: value} {radius: [topLeft, topRight, bottomRight, bottomLeft]} isStatic : A flag that indicates whether a body is considered static. A static body can never change position or angle and is completely fixed. isSensor : A flag that indicates whether a body is a sensor. Sensor triggers collision events, but doesn't react with colliding body physically. isSleeping : 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. sleepThreshold : The number of updates in which this body must have near-zero velocity before it is set as sleeping. density : Density of the body, that is its mass per unit area. restitution : The restitution/bounce/elasticity of the body. The value is always positive and is in the range (0, 1) . 0 : Collisions may be perfectly inelastic and no bouncing may occur. 0.8 : The body may bounce back with approximately 80% of its kinetic energy. friction : Friction of the body. The value is always positive and is in the range (0, 1) . 0 : The body may slide indefinitely. 1 : The body may come to a stop almost instantly after a force is applied. frictionStatic : The static friction of the body (in the Coulomb friction model). 0 : The body will never 'stick' when it is nearly stationary and only dynamic friction is used. 10 : The higher the value, the more force it will take to initially get the body moving when nearly stationary. frictionAir : The air friction of the body (air resistance). 0 : The body will never slow as it moves through space. The higher the value, the faster a body slows when moving through space. force : The force to apply in the current step. angle : Angle of the body, in radians. torque : the torque (turning force) to apply in the current step. collisionFilter : An Object that specifies the collision filtering properties of this body. collisionFilter.group collisionFilter.category : A bit field that specifies the collision category this body belongs to. collisionFilter.mask : A bit mask that specifies the collision categories this body may collide with. slop : A tolerance on how far a body is allowed to 'sink' or rotate into other bodies. The default should generally suffice, although very large bodies may require larger values for stable stacking.","title":"Config"},{"location":"matterjs-gameobject/#collision","text":"Collisions between two bodies will obey the following rules: (grpupA > 0) && (groupB > 0) : Collision = (groupA == groupB) (grpupA == 0) || (groupB == 0) : Collision = ((categoryA & maskB) !== 0) && ((categoryB & maskA) !== 0)","title":"Collision"},{"location":"matterjs-gameobject/#movement","text":"","title":"Movement"},{"location":"matterjs-gameobject/#velocity","text":"gameObject . setVelocity ( x , y ); gameObject . setVelocityX ( x ); gameObject . setVelocityY ( x );","title":"Velocity"},{"location":"matterjs-gameobject/#acceleration","text":"","title":"Acceleration"},{"location":"matterjs-gameobject/#force","text":"Applies a force to a body. gameObject . applyForce ( force ); force : {x, y} Applies a force to a body from a given position. gameObject . applyForceFrom ( position , force ); // position, force: {x, y} position : {x, y} force : {x, y} Apply thrust to the forward position of the body. gameObject . thrust ( speed ); speed : A number. Apply thrust to the left position of the body. gameObject . thrustLeft ( speed ); speed : A number. Apply thrust to the right position of the body. gameObject . thrustRight ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number. Apply thrust to the back position of the body. gameObject . thrustBack ( speed ); speed : A number.","title":"Force"},{"location":"matterjs-gameobject/#gravity","text":"Ignore world gravity gameObject . setIgnoreGravity ( ignore ); ignore : Set to true to ignore the effect of world gravity","title":"Gravity"},{"location":"matterjs-gameobject/#friction","text":"gameObject . setFriction ( value , air , fstatic ); gameObject . setFrictionAir ( v ); gameObject . setFrictionStatic ( v );","title":"Friction"},{"location":"matterjs-gameobject/#rotation","text":"","title":"Rotation"},{"location":"matterjs-gameobject/#fixed-rotation","text":"gameObject . setFixedRotation ();","title":"Fixed rotation"},{"location":"matterjs-gameobject/#angular-velocity","text":"gameObject . setAngularVelocity ( v );","title":"Angular velocity"},{"location":"matterjs-gameobject/#collision_1","text":"","title":"Collision"},{"location":"matterjs-gameobject/#enable","text":"Get var isSensor = gameObject . isSensor (); Set gameObject . setSensor ( value ); value : Set true to enable senser.","title":"Enable"},{"location":"matterjs-gameobject/#collision-group","text":"Collision grpup gameObject . setCollisionGroup ( value ); Collision category Get new collision category var category = scene . matter . world . nextCategory (); category : An one-shot number (1, 2, 4, 8, ...., 2147483648 (1<<31)) Set collision category of game object gameObject . setCollisionCategory ( category ); Set category mask gameObject . setCollidesWith ([ categoryA , categoryB , ...]); // gameObject.setCollidesWith(categoryA);","title":"Collision group"},{"location":"matterjs-gameobject/#collision-event","text":"scene . matter . world . on ( 'collisionstart' , function ( event , bodyA , bodyB ) { // var pairs = event.pairs; }); event : event.pairs : An array of collision pairs event.pairs[i].bodyA , event.pairs[i].bodyB : Matter body object. body.gameObject : Game object of matter body. bodyA , bodyB : Equal to event.pairs[0].bodyA , event.pairs[0].bodyB .","title":"Collision event"},{"location":"matterjs-gameobject/#collision-bound","text":"Rectangle gameObject . setRectangle ( width , height , options ); Circle gameObject . setCircle ( radius , options ); Polygon gameObject . setPolygon ( radius , sides , options ); Trapezoid gameObject . setTrapezoid ( width , height , slope , options ); Any gameObject . setBody ( config , options ); config : Rectangle shape { type : 'rectangle' , // width: gameObject.width // height: gameObject.height } Circle shape { type : 'circle' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // maxSides: 25 } Trapezoid shape { type : 'trapezoid' , // slope: 0.5, } Polygon shape { type : 'polygon' , // radius: (Math.max(gameObject.width, gameObject.height) / 2), // sides: 5, }","title":"Collision bound"},{"location":"matterjs-gameobject/#bounce","text":"gameObject . setBounce ( v ); restitution","title":"Bounce"},{"location":"matterjs-gameobject/#mass","text":"gameObject . setMass ( v ); gameObject . setDensity ( v );","title":"Mass"},{"location":"matterjs-gameobject/#sleep","text":"","title":"Sleep"},{"location":"matterjs-gameobject/#enable_1","text":"var config = { // ... physics : { matter : { // ... enableSleeping : true // ... } } }","title":"Enable"},{"location":"matterjs-gameobject/#sleep-threshold","text":"gameObject . setSleepThreshold ( value );","title":"Sleep threshold"},{"location":"matterjs-gameobject/#sleep-events","text":"Sleeping start scene . matter . world . on ( 'sleepstart' , function ( event , body ) { }); Sleeping end scene . matter . world . on ( 'sleepend' , function ( event , body ) { });","title":"Sleep events"},{"location":"matterjs-world/","text":"Introduction \u00b6 Matter physics engine in phaser. Author: Richard Davey Usage \u00b6 Configuration \u00b6 var config = { // ... physics : { default : 'matter' , matter : { // enabled: true, // positionIterations: 6, // velocityIterations: 4, // constraintIterations: 2, // enableSleeping: false, // plugins: { // attractors: false, // wrap: false, // }, // gravity: { // x: 0, // y: 0, // } // setBounds: { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // thickness: 64, // left: true, // right: true, // top: true, // bottom: true, // }, // timing: { // timestamp: 0, // timeScale: 1, // }, // correction: 1, // getDelta: (function() { return 1000 / 60; }), // autoUpdate: true, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugBodyFillColor: 0xe3a7e3, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // debugShowJoint: true, // debugJointColor: 0x000000, // debugWireframes: true, // debugShowInternalEdges: false, // debugShowConvexHulls: false, // debugConvexHullColor: 0xaaaaaa, // debugShowSleeping: false, } } // ... }; var game = new Phaser . Game ( config ); Control \u00b6 Pause \u00b6 scene . matter . world . pause (); Resume \u00b6 scene . matter . world . resume (); Drag object \u00b6 scene . matter . add . mouseSpring (); // scene.matter.add.mouseSpring(options); options { length : 0.01 , stiffness : 0.1 , damping : 0 , angularStiffness : 1 , collisionFilter : { category : 0x0001 , mask : 0xFFFFFFFF , group : 0 } } collisionFilter : Drag filter, see collision . World bounds \u00b6 Enable \u00b6 World : Set bounds scene . matter . world . setBounds ( x , y , width , height ); // scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom); thickness : The thickness of each wall, in pixels. left , right , top , bottom : If true will create the left/right/top/bottom bounds wall. Gravity \u00b6 Set scene . matter . world . setGravity ( x , y ); // scene.matter.world.setGravity(x, y, scale); Disalbe scene . matter . world . disableGravity (); Constraint \u00b6 Constraint of 2 game objects \u00b6 var constraint = scene . matter . add . constraint ( gameObjectA , gameObjectB ); // var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options); gameObjectA , gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA , pointB : Offset position of gameObjectA , gameObjectB . Alias: var constraint = scene . matter . add . spring ( gameObjectA , gameObjectB , length , stiffness , options ); var constraint = scene . matter . add . joint ( gameObjectA , gameObjectB , length , stiffness , options ); Constraint to world position \u00b6 var constraint = scene . matter . add . worldConstraint ( gameObjectB , length , stiffness , options ); gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA : World position. pointB : Offset position of gameObjectB . Chain game objects \u00b6 var composite = scene . matter . add . chain ( composite , xOffsetA , yOffsetA , xOffsetB , yOffsetB , options ); composite : Image composite xOffsetA , yOffsetA : Offset position of gameObjectA, in scale. xOffset = (Offset distance / width) yOffset = (Offset distance / height) xOffsetB , yOffsetB : Offset position of gameObjectB, in scale. options : { length : undefined , stiffness : 1 , damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. composite composite.bodies : An array of bodies. composite.constraints : An array of constraints Remove constraint \u00b6 scene . matter . world . removeConstraint ( constraint );","title":"World"},{"location":"matterjs-world/#introduction","text":"Matter physics engine in phaser. Author: Richard Davey","title":"Introduction"},{"location":"matterjs-world/#usage","text":"","title":"Usage"},{"location":"matterjs-world/#configuration","text":"var config = { // ... physics : { default : 'matter' , matter : { // enabled: true, // positionIterations: 6, // velocityIterations: 4, // constraintIterations: 2, // enableSleeping: false, // plugins: { // attractors: false, // wrap: false, // }, // gravity: { // x: 0, // y: 0, // } // setBounds: { // x: 0, // y: 0, // width: scene.sys.scale.width, // height: scene.sys.scale.height, // thickness: 64, // left: true, // right: true, // top: true, // bottom: true, // }, // timing: { // timestamp: 0, // timeScale: 1, // }, // correction: 1, // getDelta: (function() { return 1000 / 60; }), // autoUpdate: true, // debug: false, // debugShowBody: true, // debugShowStaticBody: true, // debugShowVelocity: true, // debugBodyColor: 0xff00ff, // debugBodyFillColor: 0xe3a7e3, // debugStaticBodyColor: 0x0000ff, // debugVelocityColor: 0x00ff00, // debugShowJoint: true, // debugJointColor: 0x000000, // debugWireframes: true, // debugShowInternalEdges: false, // debugShowConvexHulls: false, // debugConvexHullColor: 0xaaaaaa, // debugShowSleeping: false, } } // ... }; var game = new Phaser . Game ( config );","title":"Configuration"},{"location":"matterjs-world/#control","text":"","title":"Control"},{"location":"matterjs-world/#pause","text":"scene . matter . world . pause ();","title":"Pause"},{"location":"matterjs-world/#resume","text":"scene . matter . world . resume ();","title":"Resume"},{"location":"matterjs-world/#drag-object","text":"scene . matter . add . mouseSpring (); // scene.matter.add.mouseSpring(options); options { length : 0.01 , stiffness : 0.1 , damping : 0 , angularStiffness : 1 , collisionFilter : { category : 0x0001 , mask : 0xFFFFFFFF , group : 0 } } collisionFilter : Drag filter, see collision .","title":"Drag object"},{"location":"matterjs-world/#world-bounds","text":"","title":"World bounds"},{"location":"matterjs-world/#enable","text":"World : Set bounds scene . matter . world . setBounds ( x , y , width , height ); // scene.matter.world.setBounds(x, y, width, height, thickness, left, right, top, bottom); thickness : The thickness of each wall, in pixels. left , right , top , bottom : If true will create the left/right/top/bottom bounds wall.","title":"Enable"},{"location":"matterjs-world/#gravity","text":"Set scene . matter . world . setGravity ( x , y ); // scene.matter.world.setGravity(x, y, scale); Disalbe scene . matter . world . disableGravity ();","title":"Gravity"},{"location":"matterjs-world/#constraint","text":"","title":"Constraint"},{"location":"matterjs-world/#constraint-of-2-game-objects","text":"var constraint = scene . matter . add . constraint ( gameObjectA , gameObjectB ); // var constraint = scene.matter.add.constraint(gameObjectA, gameObjectB, length, stiffness, options); gameObjectA , gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA , pointB : Offset position of gameObjectA , gameObjectB . Alias: var constraint = scene . matter . add . spring ( gameObjectA , gameObjectB , length , stiffness , options ); var constraint = scene . matter . add . joint ( gameObjectA , gameObjectB , length , stiffness , options );","title":"Constraint of 2 game objects"},{"location":"matterjs-world/#constraint-to-world-position","text":"var constraint = scene . matter . add . worldConstraint ( gameObjectB , length , stiffness , options ); gameObjectB : Matter game object, or matter body object. length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. options : { pointA : { x : 0 , y : 0 , }, pointB : { x : 0 , y : 0 , }, damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } pointA : World position. pointB : Offset position of gameObjectB .","title":"Constraint to world position"},{"location":"matterjs-world/#chain-game-objects","text":"var composite = scene . matter . add . chain ( composite , xOffsetA , yOffsetA , xOffsetB , yOffsetB , options ); composite : Image composite xOffsetA , yOffsetA : Offset position of gameObjectA, in scale. xOffset = (Offset distance / width) yOffset = (Offset distance / height) xOffsetB , yOffsetB : Offset position of gameObjectB, in scale. options : { length : undefined , stiffness : 1 , damping : 0 , angularStiffness : 0 , // render: { // visible: true // } } length : The target resting length of the constraint. undefined : Current distance between gameObjectA and gameObjectB. (Default value) stiffness : The stiffness of the constraint. 1 : Very stiff. (Default value) 0.2 : Acts as a soft spring. composite composite.bodies : An array of bodies. composite.constraints : An array of constraints","title":"Chain game objects"},{"location":"matterjs-world/#remove-constraint","text":"scene . matter . world . removeConstraint ( constraint );","title":"Remove constraint"},{"location":"matterjs-wrap/","text":"Introduction \u00b6 Automatically wrap the position of bodies and composites such that they always stay within the given bounds. Reference Usage \u00b6 System configuration \u00b6 Game config var config = { // ... physics : { matter : { // ... plugins : { wrap : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableWrapPlugin (); Matter object configuration \u00b6 var options = { // ... plugin : { wrap : { min : { x : 0 , y : 0 }, max : { x : 1024 , y : 1024 } } }, // ... }","title":"Wrap"},{"location":"matterjs-wrap/#introduction","text":"Automatically wrap the position of bodies and composites such that they always stay within the given bounds. Reference","title":"Introduction"},{"location":"matterjs-wrap/#usage","text":"","title":"Usage"},{"location":"matterjs-wrap/#system-configuration","text":"Game config var config = { // ... physics : { matter : { // ... plugins : { wrap : true , // ... } // ... } } // ... } var game = new Phaser . Game ( config ); Runtime scene . matter . system . enableWrapPlugin ();","title":"System configuration"},{"location":"matterjs-wrap/#matter-object-configuration","text":"var options = { // ... plugin : { wrap : { min : { x : 0 , y : 0 }, max : { x : 1024 , y : 1024 } } }, // ... }","title":"Matter object configuration"},{"location":"mousewheel/","text":"Introduction \u00b6 Mouse wheel events of phaser. Author: Richard Davey Usage \u00b6 Mouse wheel events \u00b6 Events on touched Game object gameObject . on ( 'wheel' , function ( pointer , dx , dy , dz , event ){ /* ... */ }); Event on input plugin for each touched Game object scene . input . on ( 'gameobjectwheel' , function ( pointer , gameObject , dx , dy , dz , event ){ /* ... */ }); Events to get all touched Game Objects scene . input . on ( 'wheel' , function ( pointer , currentlyOver , dx , dy , dz , event ){ /* ... */ }); Mouse wheel properties \u00b6 pointer.deltaX : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaY : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaZ : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.","title":"Mouse wheel"},{"location":"mousewheel/#introduction","text":"Mouse wheel events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"mousewheel/#usage","text":"","title":"Usage"},{"location":"mousewheel/#mouse-wheel-events","text":"Events on touched Game object gameObject . on ( 'wheel' , function ( pointer , dx , dy , dz , event ){ /* ... */ }); Event on input plugin for each touched Game object scene . input . on ( 'gameobjectwheel' , function ( pointer , gameObject , dx , dy , dz , event ){ /* ... */ }); Events to get all touched Game Objects scene . input . on ( 'wheel' , function ( pointer , currentlyOver , dx , dy , dz , event ){ /* ... */ });","title":"Mouse wheel events"},{"location":"mousewheel/#mouse-wheel-properties","text":"pointer.deltaX : The horizontal scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaY : The vertical scroll amount that occurred due to the user moving a mouse wheel or similar input device. pointer.deltaZ : The z-axis scroll amount that occurred due to the user moving a mouse wheel or similar input device.","title":"Mouse wheel properties"},{"location":"mousewheeltoupdown/","text":"Introduction \u00b6 Map mouse-wheeling to (up/down) cursor key state. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexMouseWheelToUpDown from './plugins/mousewheeltoupdown.js' ; Install global plugin \u00b6 Install plugin in configuration of game import MouseWheelToUpDownPlugin from './plugins/mousewheeltoupdown-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMouseWheelToUpDown' , plugin : MouseWheelToUpDownPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var mouseWheelToUpDown = scene . plugins . get ( 'rexMouseWheelToUpDown' ). add ( scene ); State of cursor keys \u00b6 var cursorKeys = mouseWheelToUpDown . createCursorKeys (); var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var upKeyDown = mouseWheelToUpDown . up ; var downKeyDown = mouseWheelToUpDown . down ; var noKeyDown = mouseWheelToUpDown . noKey ; Destroy \u00b6 mouseWheelToUpDown . destroy ();","title":"Mouse-wheel to up/down"},{"location":"mousewheeltoupdown/#introduction","text":"Map mouse-wheeling to (up/down) cursor key state. Author: Rex Member of scene","title":"Introduction"},{"location":"mousewheeltoupdown/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"mousewheeltoupdown/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"mousewheeltoupdown/#import-class","text":"import rexMouseWheelToUpDown from './plugins/mousewheeltoupdown.js' ;","title":"Import class"},{"location":"mousewheeltoupdown/#install-global-plugin","text":"Install plugin in configuration of game import MouseWheelToUpDownPlugin from './plugins/mousewheeltoupdown-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMouseWheelToUpDown' , plugin : MouseWheelToUpDownPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"mousewheeltoupdown/#create-instance","text":"var mouseWheelToUpDown = scene . plugins . get ( 'rexMouseWheelToUpDown' ). add ( scene );","title":"Create instance"},{"location":"mousewheeltoupdown/#state-of-cursor-keys","text":"var cursorKeys = mouseWheelToUpDown . createCursorKeys (); var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var upKeyDown = mouseWheelToUpDown . up ; var downKeyDown = mouseWheelToUpDown . down ; var noKeyDown = mouseWheelToUpDown . noKey ;","title":"State of cursor keys"},{"location":"mousewheeltoupdown/#destroy","text":"mouseWheelToUpDown . destroy ();","title":"Destroy"},{"location":"moveto/","text":"Introduction \u00b6 Move game object towards target position with a steady speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexMoveTo from './plugins/moveto.js' ; Install global plugin \u00b6 Install plugin in configuration of game import MoveToPlugin from './plugins/moveto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMoveTo' , plugin : MoveToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var moveTo = scene . plugins . get ( 'rexMoveTo' ). add ( gameObject , { // speed: 400, // rotateToTarget: false }); speed : Moving speed, pixels in second. rotateToTarget : Set true to change angle towards path. Start moving \u00b6 moveTo . moveTo ( x , y ); x , y : Target position or var config = { x : 0 , y : 0 , // speed: 0 } moveTo . moveTo ( config ); Enable \u00b6 Enable (default) moveTo . setEnable (); or moveTo . enable = true ; Disable moveTo . setEnable ( false ); or moveTo . enable = false ; Pause, Resume, stop moving \u00b6 moveTo . pause (); moveTo . resume (); moveTo . stop (); Set speed \u00b6 moveTo . setSpeed ( speed ); // moveTo.speed = speed; Set rotate-to-target \u00b6 moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target Events \u00b6 On reached target moveTo . on ( 'complete' , function ( gameObject , moveTo ){}); // moveTo.once('complete', function(gameObject, moveTo){}); Status \u00b6 Is moving var isRunning = moveTo . isRunning ;","title":"Move to"},{"location":"moveto/#introduction","text":"Move game object towards target position with a steady speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"moveto/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"moveto/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"moveto/#import-class","text":"import rexMoveTo from './plugins/moveto.js' ;","title":"Import class"},{"location":"moveto/#install-global-plugin","text":"Install plugin in configuration of game import MoveToPlugin from './plugins/moveto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexMoveTo' , plugin : MoveToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"moveto/#create-instance","text":"var moveTo = scene . plugins . get ( 'rexMoveTo' ). add ( gameObject , { // speed: 400, // rotateToTarget: false }); speed : Moving speed, pixels in second. rotateToTarget : Set true to change angle towards path.","title":"Create instance"},{"location":"moveto/#start-moving","text":"moveTo . moveTo ( x , y ); x , y : Target position or var config = { x : 0 , y : 0 , // speed: 0 } moveTo . moveTo ( config );","title":"Start moving"},{"location":"moveto/#enable","text":"Enable (default) moveTo . setEnable (); or moveTo . enable = true ; Disable moveTo . setEnable ( false ); or moveTo . enable = false ;","title":"Enable"},{"location":"moveto/#pause-resume-stop-moving","text":"moveTo . pause (); moveTo . resume (); moveTo . stop ();","title":"Pause, Resume, stop moving"},{"location":"moveto/#set-speed","text":"moveTo . setSpeed ( speed ); // moveTo.speed = speed;","title":"Set speed"},{"location":"moveto/#set-rotate-to-target","text":"moveTo . setRotateToTarget ( rotateToTarget ); rotateToTarget : Set true to change angle towards target","title":"Set rotate-to-target"},{"location":"moveto/#events","text":"On reached target moveTo . on ( 'complete' , function ( gameObject , moveTo ){}); // moveTo.once('complete', function(gameObject, moveTo){});","title":"Events"},{"location":"moveto/#status","text":"Is moving var isRunning = moveTo . isRunning ;","title":"Status"},{"location":"mustache/","text":"Introduction \u00b6 Format string with variables. Reference Usage \u00b6 var template = 'hello, {{name}}' ; var view = { name : 'rex' }; var result = Mustache . render ( template , view );","title":"Mustache"},{"location":"mustache/#introduction","text":"Format string with variables. Reference","title":"Introduction"},{"location":"mustache/#usage","text":"var template = 'hello, {{name}}' ; var view = { name : 'rex' }; var result = Mustache . render ( template , view );","title":"Usage"},{"location":"ninepatch/","text":"Introduction \u00b6 Stretchable image. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexNinePatchPlugin' , plugin : NinePatchPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var ninePatch = scene . add . rexNinePatch ( x , y , width , height , key , columns , rows , { stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , width , height , { key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , { width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ({ x : 0 , y : 0 , width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); x , y : Position of this object. width , height : Size of this object. key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] , or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] , or [20, undefined, 20] : Height of each row. undefined value will be replaced by remainder value from texture width. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. stretchMode : Stretch mode of edges and internal cells. A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } getFrameNameCallback : Callback to get frame name of each cell. undefined : Use default callback, which will return ${colIndex},${rowIndex} . Function object : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` } Custom class \u00b6 Define class class MyNinePatch extends NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ninePatch = new MyNinePatch ( scene , x , y , width , height , key , columns , rows , config ); Resize \u00b6 ninePatch . resize ( width , height ); Set texture of source image \u00b6 ninePatch . setTexture ( key , columns , rows ); key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] : Width of each column. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] : Height of each row. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. Set stretch mode \u00b6 ninePatch . setStretchMode ( mode ); mode : A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } Set get-frame-name callback \u00b6 ninePatch . setGetFrameNameCallback ( callback ); callback : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Nine patch"},{"location":"ninepatch/#introduction","text":"Stretchable image. Author: Rex Game object","title":"Introduction"},{"location":"ninepatch/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ninepatch/#usage","text":"Sample code","title":"Usage"},{"location":"ninepatch/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexNinePatchPlugin' , plugin : NinePatchPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ninepatch/#create-instance","text":"var ninePatch = scene . add . rexNinePatch ( x , y , width , height , key , columns , rows , { stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , width , height , { key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ( x , y , { width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); or var ninePatch = scene . add . rexNinePatch ({ x : 0 , y : 0 , width : 1 , height : 1 , key : undefined , columns : undefined , rows : undefined , stretchMode : 0 , getFrameNameCallback : undefined , }); x , y : Position of this object. width , height : Size of this object. key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] , or [20, undefined, 20] : Width of each column. undefined value will be replaced by remainder value from texture width. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] , or [20, undefined, 20] : Height of each row. undefined value will be replaced by remainder value from texture width. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched. stretchMode : Stretch mode of edges and internal cells. A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' } getFrameNameCallback : Callback to get frame name of each cell. undefined : Use default callback, which will return ${colIndex},${rowIndex} . Function object : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Create instance"},{"location":"ninepatch/#custom-class","text":"Define class class MyNinePatch extends NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ninePatch = new MyNinePatch ( scene , x , y , width , height , key , columns , rows , config );","title":"Custom class"},{"location":"ninepatch/#resize","text":"ninePatch . resize ( width , height );","title":"Resize"},{"location":"ninepatch/#set-texture-of-source-image","text":"ninePatch . setTexture ( key , columns , rows ); key : Texture key of source image. columns : Configuration of columns. A number array, like [20, 20, 20] : Width of each column. Width of odd columns (column 0 , column 2 , ...) will be origin width. Width of even columns (column 1 , column 3 , ...) will be stretched. rows : Configuration of rows. A number array, like [20, 20, 20] : Height of each row. Height of odd rows (row 0 , row 2 , ...) will be origin height. Height of odd rows (row 1 , row 3 , ...) will be stretched.","title":"Set texture of source image"},{"location":"ninepatch/#set-stretch-mode","text":"ninePatch . setStretchMode ( mode ); mode : A number ( 0 , or 1 ), or a string ( 'scale' , or 'repeat' ): 0 , or 'scale' : Stretch each edge and internal cell by scaled image. Default value. 1 , or 'repeat' : Stretch each edge and internal cell by repeated image (tile-sprite). An object : { edge : 0 , // 'scale', or 1, 'repeat' internal : 0 , // 'scale', or 1, 'repeat' }","title":"Set stretch mode"},{"location":"ninepatch/#set-get-frame-name-callback","text":"ninePatch . setGetFrameNameCallback ( callback ); callback : Return a string, or undefined . function ( colIndex , rowIndex ) { return ` ${ colIndex } , ${ rowIndex } ` }","title":"Set get-frame-name callback"},{"location":"orientation/","text":"Introduction \u00b6 Get oriention, built-in method of phaser. Author: Richard Davey Usage \u00b6 Orientation \u00b6 var orientation = scene . scale . orientation ; Events \u00b6 On orientation change scene . scale . on ( 'orientationchange' , function ( orientation ) { if ( orientation === Phaser . Scale . PORTRAIT ) { // ... } else if ( orientation === Phaser . Scale . LANDSCAPE ) { // ... } }); Lock orientation \u00b6 scene . scale . lockOrientation ( orientation ) orientation : 'portrait' 'landscape' 'portrait-primary' 'portrait-secondary' 'landscape-primary' 'landscape-secondary' 'default'","title":"Orientation"},{"location":"orientation/#introduction","text":"Get oriention, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"orientation/#usage","text":"","title":"Usage"},{"location":"orientation/#orientation","text":"var orientation = scene . scale . orientation ;","title":"Orientation"},{"location":"orientation/#events","text":"On orientation change scene . scale . on ( 'orientationchange' , function ( orientation ) { if ( orientation === Phaser . Scale . PORTRAIT ) { // ... } else if ( orientation === Phaser . Scale . LANDSCAPE ) { // ... } });","title":"Events"},{"location":"orientation/#lock-orientation","text":"scene . scale . lockOrientation ( orientation ) orientation : 'portrait' 'landscape' 'portrait-primary' 'portrait-secondary' 'landscape-primary' 'landscape-secondary' 'default'","title":"Lock orientation"},{"location":"pad/","text":"Introduction \u00b6 Takes the given string and pads it out, to the length required, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . Pad ( str , len , pad , dir ); str : String, or number. len : Length or result string. pad : The string to pad it out. dir : 1 : Left 2 : Right 3 : Both","title":"Pad"},{"location":"pad/#introduction","text":"Takes the given string and pads it out, to the length required, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"pad/#usage","text":"var result = Phaser . Utils . String . Pad ( str , len , pad , dir ); str : String, or number. len : Length or result string. pad : The string to pad it out. dir : 1 : Left 2 : Right 3 : Both","title":"Usage"},{"location":"particles/","text":"Introduction \u00b6 Particle uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add particle \u00b6 Create a particle manager var particles = scene . add . particles ( key ); Create particle manager and emitters var particles = scene . add . particles ( key , [ emitterConfig0 , emitterConfig1 , // ... ]); or var particles = scene . make . particles ({ key : key , add : true , emitters : [ emitterConfig0 , emitterConfig1 , // ... ] }); Create a particle emitter var emitter = particles . createEmitter ({ // **basic properties of particles** // **initial position** // x: 0, // { min, max }, or { min, max, steps } // y: 0, // { min, max }, or { min, max, steps } // follow: null, // followOffset: { // x: 0, // y: 0 // }, // **emit zone** // emitZone: { // type: 'random', // 'random', or 'edge' // source: geom, // Geom like Circle, or a Path or Curve // **type = edge** // quantity: 1, // stepRate: 0, // yoyo: false, // seamless: true // }, // **target position** // moveToX: // { min, max }, or { min, max, steps } // moveToY: // { min, max }, or { min, max, steps } // **death zone** // deathZone: { // type: 'onEnter', // 'onEnter', or 'onLeave' // source: geom // Geom like Circle or Rect that supports a 'contains' function // } // **angle** // radial: true, // angle: { min: 0, max: 360 }, // { start, end, steps } // **scale** // scale: 1, // { start, end }, // scaleX: 1, // scaleY: 1, // **render** // frame: // one or more texture frames, or a configuration object. // alpha: 1, // { min, max } // visible: true, // tint: 0xffffffff, // a number 0xfffffff, or an array [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ] // blendMode: 'NORMAL', // Phaser.BlendModes // delay: 0, // lifespan: 1000, // { min, max }, or { min, max, steps } // **physics** // speed: // { min, max }, or { min, max, steps } // speedX: // { min, max }, or { min, max, steps } // speedY: // { min, max }, or { min, max, steps } // gravityX: // gravityY: // accelerationX: // accelerationY: // maxVelocityX: 10000, // maxVelocityY: 10000, // **bounce** // bounce: 0, // bounds: nul, // Phaser.Geom.Rectangle, or { x, y, width, height } // collideBottom: true, // collideTop: true, // collideLeft: true, // collideRight : true, // **callback** // emitCallback: null, // emitCallbackScope: null, // deathCallback: null, // deathCallbackScope: null, // **custom particle** // particleClass: Phaser.GameObjects.Particles.Particle // **emitter** // name: '', // on: true, // set false to stop emitter // active: true, // set false to pause emitter and particles // frequency: 0, // -1 for exploding emitter // quantity: 1, // { min, max } // maxParticles: 0, // rotate: 0, // { start, end }, or { start, end, ease }, // timeScale: 1, }); Format of value {min, max} : Pick a random value between min and max {start, end} : Pick values incremented continuously across a range. ( ease = 'Linear' ) {start, end, ease} {start, end, steps} : Pick values incremented by steps across a range. {start, end, random} random : true or false {min, max, steps} : Pick values between min to max, with steps. {onEmit: function(particle, key, t, value) {return value}} : Get return value from a function invoking. on : Controls if the emitter is currently emitting a particle flow (when frequency >= 0). Already alive particles will continue to update until they expire. active : Whether this emitter updates itself and its particles. frequency 0 : One particle flow cycle for each logic update (the maximum flow frequency). > 0 : The time interval between particle flow cycles in ms. -1 : Exploding emitter. maxParticles 0 : Unlimited. > 0 : Hard limit the amount of particle objects. frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } emitZone : Emit zone { type : 'random' , source : geom , } Emit edge { type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true } deathZone { type : 'onEnter' , source : geom } Immortal particle : Set lifespan to Infinity . Emit zone \u00b6 emitter . setEmitZone ({ type : 'random' , source : geom , }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getRandomPoint(point) method Custom zone { getRandomPoint : function ( point ) { // point.x = ... // point.y = ... return point ; } } Zone source \u00b6 Get var source = emitter . emitZone . source ; Clear zone \u00b6 emitter . setEmitZone (); Emit edge \u00b6 emitter . setEmitZone ({ type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getPoints(quantity, stepRate) method Custom edge { getPoints : function ( quantity , stepRate ) { // output = [point0, point1, ...]; // point: Phaser.Math.Vector2, or {x, y} return output ; } } quantity : The number of particles to place on the source edge. Set to 0 to use stepRate instead. stepRate : The distance between each particle. When set, quantity is implied and should be set to 0. yoyo : Whether particles are placed from start to end and then end to start. Default is false . seamless : Whether one endpoint will be removed if it's identical to the other. Default is true . Curve surce \u00b6 Get curve source var source = emitter . emitZone . source ; Update points of curve source emitter . emitZone . updateSource (); Set source to another curve, also update points emitter . emitZone . changeSource ( curve ); Clear edge zone \u00b6 emitter . setEmitZone (); Death zone \u00b6 emitter . setDeathZone ({ type : 'onEnter' , source : geom }); type : 'onEnter' or 'onLeave' source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon Custom source : { contains : function ( x , y ) { // ... return bool ; } } Zone source \u00b6 Get var source = emitter . deathZone . source ; Clear zone \u00b6 emitter . setDeathZone (); Control \u00b6 Start emitter . start (); // set `on` to true Stop emitter . stop (); // set `on` to false Pause emitter . pause (); // set `active` to false Resume emitter . resume (); // set `active` to true Explode emitter . explode ( count , x , y ); Emit emitter . emitParticleAt ( x , y , count ); or emitter . emitParticle ( count , x , y ); Kill all alive particles emitter . killAll () Properties \u00b6 emitter . fromJSON ( config ); Position \u00b6 Emitter Position emitter . setPosition ( x , y ); Follow Start emitter . startFollow ( target ); // emitter.startFollow(target, offsetX, offsetY, trackVisible); trackVisible : Whether the emitter's visible state will track the target's visible state. Stop emitter . stopFollow (); All emitters particles . setPosition ( x , y ); or particles . x = x ; particles . y = y ; Rotation \u00b6 Emitter emitter . setRadial ( bool ); // set true to emit particles in all directions between angle min and max emitter . setAngle ( value ); All emitters particles . setAngle ( angle ); // angle in degrees // particles.setRotation(angle); // angle in radians or particles . angle = angle ; // particles.rotation = angle; Scale \u00b6 Emitter emitter . setScale ( value ); or emitter . setScaleX ( value ); emitter . setScaleY ( value ); All emitters particles . setScale ( value ); // particles.setScale(x, y); or particles . scaleX = scaleX ; particles . scaleY = scaleY ; Render \u00b6 Frame emitter . setFrame ( frames ); // pickRandom = true, quantity = 1 emitter . setFrame ( frames , pickRandom , quantity ); frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } pickRandom : Whether frames should be assigned at random from frames . quantity : The number of consecutive particles that will receive each frame. Alpha emitter . setAlpha ( value ); // value: 0 ~ 1 Visible emitter . setVisible ( visible ); // visible: true/false Blend mode emitter . setBlendMode ( mode ); // Phaser.BlendModes Physics \u00b6 Speed emitter . setSpeed ( value ); or emitter . setSpeedX ( value ); emitter . setSpeedY ( value ); Gravity emitter . setGravity ( x , y ); or emitter . setGravityX ( value ); setGravityY ( value ); Bounds emitter . setBounds ( x , y , width , height ); or emitter . setBounds ( rect ); rect : Phaser.Geom.Rectangle, or { x, y, width, height } Time \u00b6 Lifespan emitter . setLifespan ( value ); // time in ms Frequency emitter . setFrequency ( frequency , quantity ); frequency : The time interval (>= 0) of each flow cycle, in ms; or -1 to put the emitter in explosion mode. quantity : The number of particles to release at each flow cycle or explosion. Quantity \u00b6 emitter . setQuantity ( quantity ); Particles \u00b6 Hard limit the amount of particle objects var count = emitter . maxParticles ; Whether this emitter is at its limit var atLimit = emitter . atLimit (); Alive (active) particles Amount of alive particles var count = emitter . getAliveParticleCount (); Add callback for newly emitted particle var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleEmit ( callback , context ); Clear callback emitter . onParticleEmit (); For each alive particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachAlive ( callback , context ); Dead (inactive) particles Amount of dead particles var count = emitter . getDeadParticleCount (); Add callback for each particle death var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleDeath ( callback , context ); Clear callback emitter . onParticleDeath (); For each dead particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachDead ( callback , context ); Add dead particles into pool emitter . reserve ( count ); Total (alive + dead) number of particles var count = emitter . getParticleCount (); Custom particle class class MyParticle extends Phaser . GameObjects . Particles . Particle { constructor ( emitter ) { super ( emitter ); /* ... */ } update ( delta , step , processors ) { super . update ( delta , step , processors ); /* ... */ } } Properties \u00b6 emitter frame x , y angle (degree), rotation (radians) alpha , tint , color velocityX , velocityY accelerationX , accelerationY maxVelocityX , maxVelocityY bounce scaleX , scaleY life , lifeCurrent , lifeT Gravity well \u00b6 Create a gravity well var well = particles . createGravityWell ( x , y ); //var well = particles.createGravityWell(x, y, power, epsilon, gravity); or var well = particles . createGravityWell ({ // x: 0, // y: 0, // power: 0, // epsilon: 100, // gravity: 50 }); Enable Active well . active = true ; Inactive well . active = false ; Position well . x = x ; well . y = y ; Gravity well . gravity = value ; Power well . power = value ; Custom gravity well var well = { active : true , update : function ( particle ) { // particle.velocityX = // particle.velocityY = } } particles . addGravityWell ( well ); Particles manager \u00b6 Fire all emitters \u00b6 particles . emitParticleAt ( x , y ); // particles.emitParticleAt(x, y, count); Z index of emitters \u00b6 Z index of emitters is the same as particles.emitters (an array). Bring an emitter to top particles . emitters . bringToTop ( emitter ); Send an emitter to bottom particles . emitters . sendToBack ( emitter ); Move an emitter up particles . emitters . moveUp ( emitter ); Move an emitter down particles . emitters . moveDown ( emitter ); Move an emitter to index particles . emitters . moveTo ( emitter , index ); Reverse order particles . emitters . reverse (); Shuffle order particles . emitters . shuffle (); Swap 2 emitters particles . emitters . swap ( emitter0 , emitter1 );","title":"Particles"},{"location":"particles/#introduction","text":"Particle uses its own lightweight physics system, and can interact only with its Emitter's bounds and zones. Built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"particles/#usage","text":"","title":"Usage"},{"location":"particles/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"particles/#add-particle","text":"Create a particle manager var particles = scene . add . particles ( key ); Create particle manager and emitters var particles = scene . add . particles ( key , [ emitterConfig0 , emitterConfig1 , // ... ]); or var particles = scene . make . particles ({ key : key , add : true , emitters : [ emitterConfig0 , emitterConfig1 , // ... ] }); Create a particle emitter var emitter = particles . createEmitter ({ // **basic properties of particles** // **initial position** // x: 0, // { min, max }, or { min, max, steps } // y: 0, // { min, max }, or { min, max, steps } // follow: null, // followOffset: { // x: 0, // y: 0 // }, // **emit zone** // emitZone: { // type: 'random', // 'random', or 'edge' // source: geom, // Geom like Circle, or a Path or Curve // **type = edge** // quantity: 1, // stepRate: 0, // yoyo: false, // seamless: true // }, // **target position** // moveToX: // { min, max }, or { min, max, steps } // moveToY: // { min, max }, or { min, max, steps } // **death zone** // deathZone: { // type: 'onEnter', // 'onEnter', or 'onLeave' // source: geom // Geom like Circle or Rect that supports a 'contains' function // } // **angle** // radial: true, // angle: { min: 0, max: 360 }, // { start, end, steps } // **scale** // scale: 1, // { start, end }, // scaleX: 1, // scaleY: 1, // **render** // frame: // one or more texture frames, or a configuration object. // alpha: 1, // { min, max } // visible: true, // tint: 0xffffffff, // a number 0xfffffff, or an array [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ] // blendMode: 'NORMAL', // Phaser.BlendModes // delay: 0, // lifespan: 1000, // { min, max }, or { min, max, steps } // **physics** // speed: // { min, max }, or { min, max, steps } // speedX: // { min, max }, or { min, max, steps } // speedY: // { min, max }, or { min, max, steps } // gravityX: // gravityY: // accelerationX: // accelerationY: // maxVelocityX: 10000, // maxVelocityY: 10000, // **bounce** // bounce: 0, // bounds: nul, // Phaser.Geom.Rectangle, or { x, y, width, height } // collideBottom: true, // collideTop: true, // collideLeft: true, // collideRight : true, // **callback** // emitCallback: null, // emitCallbackScope: null, // deathCallback: null, // deathCallbackScope: null, // **custom particle** // particleClass: Phaser.GameObjects.Particles.Particle // **emitter** // name: '', // on: true, // set false to stop emitter // active: true, // set false to pause emitter and particles // frequency: 0, // -1 for exploding emitter // quantity: 1, // { min, max } // maxParticles: 0, // rotate: 0, // { start, end }, or { start, end, ease }, // timeScale: 1, }); Format of value {min, max} : Pick a random value between min and max {start, end} : Pick values incremented continuously across a range. ( ease = 'Linear' ) {start, end, ease} {start, end, steps} : Pick values incremented by steps across a range. {start, end, random} random : true or false {min, max, steps} : Pick values between min to max, with steps. {onEmit: function(particle, key, t, value) {return value}} : Get return value from a function invoking. on : Controls if the emitter is currently emitting a particle flow (when frequency >= 0). Already alive particles will continue to update until they expire. active : Whether this emitter updates itself and its particles. frequency 0 : One particle flow cycle for each logic update (the maximum flow frequency). > 0 : The time interval between particle flow cycles in ms. -1 : Exploding emitter. maxParticles 0 : Unlimited. > 0 : Hard limit the amount of particle objects. frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } emitZone : Emit zone { type : 'random' , source : geom , } Emit edge { type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true } deathZone { type : 'onEnter' , source : geom } Immortal particle : Set lifespan to Infinity .","title":"Add particle"},{"location":"particles/#emit-zone","text":"emitter . setEmitZone ({ type : 'random' , source : geom , }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getRandomPoint(point) method Custom zone { getRandomPoint : function ( point ) { // point.x = ... // point.y = ... return point ; } }","title":"Emit zone"},{"location":"particles/#zone-source","text":"Get var source = emitter . emitZone . source ;","title":"Zone source"},{"location":"particles/#clear-zone","text":"emitter . setEmitZone ();","title":"Clear zone"},{"location":"particles/#emit-edge","text":"emitter . setEmitZone ({ type : 'edge' , source : curve , quantity : 1 , stepRate : 0 , yoyo : false , seamless : true }); source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon , or Path or Curve , which has getPoints(quantity, stepRate) method Custom edge { getPoints : function ( quantity , stepRate ) { // output = [point0, point1, ...]; // point: Phaser.Math.Vector2, or {x, y} return output ; } } quantity : The number of particles to place on the source edge. Set to 0 to use stepRate instead. stepRate : The distance between each particle. When set, quantity is implied and should be set to 0. yoyo : Whether particles are placed from start to end and then end to start. Default is false . seamless : Whether one endpoint will be removed if it's identical to the other. Default is true .","title":"Emit edge"},{"location":"particles/#curve-surce","text":"Get curve source var source = emitter . emitZone . source ; Update points of curve source emitter . emitZone . updateSource (); Set source to another curve, also update points emitter . emitZone . changeSource ( curve );","title":"Curve surce"},{"location":"particles/#clear-edge-zone","text":"emitter . setEmitZone ();","title":"Clear edge zone"},{"location":"particles/#death-zone","text":"emitter . setDeathZone ({ type : 'onEnter' , source : geom }); type : 'onEnter' or 'onLeave' source : Geom like Circle , Ellipse , Rectangle , Triangle , Polygon Custom source : { contains : function ( x , y ) { // ... return bool ; } }","title":"Death zone"},{"location":"particles/#zone-source_1","text":"Get var source = emitter . deathZone . source ;","title":"Zone source"},{"location":"particles/#clear-zone_1","text":"emitter . setDeathZone ();","title":"Clear zone"},{"location":"particles/#control","text":"Start emitter . start (); // set `on` to true Stop emitter . stop (); // set `on` to false Pause emitter . pause (); // set `active` to false Resume emitter . resume (); // set `active` to true Explode emitter . explode ( count , x , y ); Emit emitter . emitParticleAt ( x , y , count ); or emitter . emitParticle ( count , x , y ); Kill all alive particles emitter . killAll ()","title":"Control"},{"location":"particles/#properties","text":"emitter . fromJSON ( config );","title":"Properties"},{"location":"particles/#position","text":"Emitter Position emitter . setPosition ( x , y ); Follow Start emitter . startFollow ( target ); // emitter.startFollow(target, offsetX, offsetY, trackVisible); trackVisible : Whether the emitter's visible state will track the target's visible state. Stop emitter . stopFollow (); All emitters particles . setPosition ( x , y ); or particles . x = x ; particles . y = y ;","title":"Position"},{"location":"particles/#rotation","text":"Emitter emitter . setRadial ( bool ); // set true to emit particles in all directions between angle min and max emitter . setAngle ( value ); All emitters particles . setAngle ( angle ); // angle in degrees // particles.setRotation(angle); // angle in radians or particles . angle = angle ; // particles.rotation = angle;","title":"Rotation"},{"location":"particles/#scale","text":"Emitter emitter . setScale ( value ); or emitter . setScaleX ( value ); emitter . setScaleY ( value ); All emitters particles . setScale ( value ); // particles.setScale(x, y); or particles . scaleX = scaleX ; particles . scaleY = scaleY ;","title":"Scale"},{"location":"particles/#render","text":"Frame emitter . setFrame ( frames ); // pickRandom = true, quantity = 1 emitter . setFrame ( frames , pickRandom , quantity ); frames : One or more texture frames, or a configuration object. String or number value Array of string or number value Configuration object : { frames : [], cycle : false , quantity : 1 } pickRandom : Whether frames should be assigned at random from frames . quantity : The number of consecutive particles that will receive each frame. Alpha emitter . setAlpha ( value ); // value: 0 ~ 1 Visible emitter . setVisible ( visible ); // visible: true/false Blend mode emitter . setBlendMode ( mode ); // Phaser.BlendModes","title":"Render"},{"location":"particles/#physics","text":"Speed emitter . setSpeed ( value ); or emitter . setSpeedX ( value ); emitter . setSpeedY ( value ); Gravity emitter . setGravity ( x , y ); or emitter . setGravityX ( value ); setGravityY ( value ); Bounds emitter . setBounds ( x , y , width , height ); or emitter . setBounds ( rect ); rect : Phaser.Geom.Rectangle, or { x, y, width, height }","title":"Physics"},{"location":"particles/#time","text":"Lifespan emitter . setLifespan ( value ); // time in ms Frequency emitter . setFrequency ( frequency , quantity ); frequency : The time interval (>= 0) of each flow cycle, in ms; or -1 to put the emitter in explosion mode. quantity : The number of particles to release at each flow cycle or explosion.","title":"Time"},{"location":"particles/#quantity","text":"emitter . setQuantity ( quantity );","title":"Quantity"},{"location":"particles/#particles","text":"Hard limit the amount of particle objects var count = emitter . maxParticles ; Whether this emitter is at its limit var atLimit = emitter . atLimit (); Alive (active) particles Amount of alive particles var count = emitter . getAliveParticleCount (); Add callback for newly emitted particle var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleEmit ( callback , context ); Clear callback emitter . onParticleEmit (); For each alive particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachAlive ( callback , context ); Dead (inactive) particles Amount of dead particles var count = emitter . getDeadParticleCount (); Add callback for each particle death var callback = function ( particle , emitter ) { /* ... */ } emitter . onParticleDeath ( callback , context ); Clear callback emitter . onParticleDeath (); For each dead particle var callback = function ( particle , emitter ) { /* ... */ } emitter . forEachDead ( callback , context ); Add dead particles into pool emitter . reserve ( count ); Total (alive + dead) number of particles var count = emitter . getParticleCount (); Custom particle class class MyParticle extends Phaser . GameObjects . Particles . Particle { constructor ( emitter ) { super ( emitter ); /* ... */ } update ( delta , step , processors ) { super . update ( delta , step , processors ); /* ... */ } }","title":"Particles"},{"location":"particles/#properties_1","text":"emitter frame x , y angle (degree), rotation (radians) alpha , tint , color velocityX , velocityY accelerationX , accelerationY maxVelocityX , maxVelocityY bounce scaleX , scaleY life , lifeCurrent , lifeT","title":"Properties"},{"location":"particles/#gravity-well","text":"Create a gravity well var well = particles . createGravityWell ( x , y ); //var well = particles.createGravityWell(x, y, power, epsilon, gravity); or var well = particles . createGravityWell ({ // x: 0, // y: 0, // power: 0, // epsilon: 100, // gravity: 50 }); Enable Active well . active = true ; Inactive well . active = false ; Position well . x = x ; well . y = y ; Gravity well . gravity = value ; Power well . power = value ; Custom gravity well var well = { active : true , update : function ( particle ) { // particle.velocityX = // particle.velocityY = } } particles . addGravityWell ( well );","title":"Gravity well"},{"location":"particles/#particles-manager","text":"","title":"Particles manager"},{"location":"particles/#fire-all-emitters","text":"particles . emitParticleAt ( x , y ); // particles.emitParticleAt(x, y, count);","title":"Fire all emitters"},{"location":"particles/#z-index-of-emitters","text":"Z index of emitters is the same as particles.emitters (an array). Bring an emitter to top particles . emitters . bringToTop ( emitter ); Send an emitter to bottom particles . emitters . sendToBack ( emitter ); Move an emitter up particles . emitters . moveUp ( emitter ); Move an emitter down particles . emitters . moveDown ( emitter ); Move an emitter to index particles . emitters . moveTo ( emitter , index ); Reverse order particles . emitters . reverse (); Shuffle order particles . emitters . shuffle (); Swap 2 emitters particles . emitters . swap ( emitter0 , emitter1 );","title":"Z index of emitters"},{"location":"path/","text":"Introduction \u00b6 Path in curves, built-in object of phaser. Author: Richard Davey Usage \u00b6 Add path object \u00b6 var path = scene . add . path (); // var path = scene.add.path(x, y); // curve start from (x, y) or var path = new Phaser . Curves . Path (); // var path = new Phaser.Curves.Path(x, y); // curve start from (x, y) Add path object with curves \u00b6 Curves in JSON var path = scene . add . path ( json ); or var path = new Phaser . Curves . Path ( json ); Add curve \u00b6 Line \u00b6 Add line object Create line object var curve = new Phaser . Curves . Line ({ x : x0 , y : y0 }, { x : x1 , y : y1 }); or var curve = new Phaser . Curves . Line ([ x0 , y0 , x1 , y1 ]); Add to path path . add ( curve ); Add line started from previous end point to next point path . lineTo ( endX , endY ); or path . lineTo ( new Phaser . Math . Vector2 ({ x , y })); Properties: curve.p0 : The first endpoint. curve.p0.x , curve.p0.y curve.p1 : The second endpoint. curve.p1.x , curve.p1.y Circle/ellipse/arc \u00b6 Add circle/ellipse/arc object Create circle/ellipse/arc object Circle var curve = new Phaser . Curves . Ellipse ( x , y , radius ); Ellipse var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius ); Arc var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Add to path path . add ( curve ); Add circle/ellipse/arc started from previous end point to next point Circle path . circleTo ( radius ); Ellipse path . ellipseTo ( xRadius , yRadius ); Arc path . ellipseTo ( xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Properties: curve.p0 : Center point. curve.p0.x , curve.p0.y curve.xRadius , curve.yRadius : Horizontal/vertical radiuse. curve.startAngle , curve.endAngle : Start/end angle, in degrees. curve.clockwise : true if Clockwise, false if anti-clockwise. curve.angle : Rotation, in degrees. curve.rotation : Rotation, in radians. Spline \u00b6 Add spline object Create spline object var curve = new Phaser . Curves . Spline ([ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]); or var curve = new Phaser . Curves . Spline ([ x0 , y0 , x1 , y1 , // ... ]); Add to path path . add ( curve ); Add spline started from previous end point to next point var points = ; path . splineTo ([ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]); or path . splineTo ([ x0 , y0 , x1 , y1 , // ... ]); Append point \u00b6 var point = curve . addPoint ( x , y ); Quadratic bezier curve \u00b6 Create quadratic bezier curve object var curve = new Phaser . Curves . QuadraticBezier ( startPoint , controlPoint , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point x2 , y2 // end point ]; var curve = new Phaser . Curves . QuadraticBezier ( points ); Add to path path . add ( curve ); Add quadratic bezier curve started from previous end point to next point path . quadraticBezierTo ( endX , endY , controlX , controlY ); or path . quadraticBezierTo ( endPoint , controlPoint ); // point : Phaser.Math.Vector2 Cubic bezier curve \u00b6 Create quadratic bezier curve object var curve = new Phaser . Curves . CubicBezier ( startPoint , controlPoint1 , controlPoint2 , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point1 x2 , y2 , // control point2 x3 , y3 // end point ]; var curve = new Phaser . Curves . CubicBezier ( points ); Add to path path . add ( curve ); Add cubic bezier curve started from previous end point to next point path . cubicBezierTo ( endX , endY , control1X , control1Y , control2X , control2Y ); or path . cubicBezierTo ( endPoint , controlPoint1 , controlPoint2 ); // point : Phaser.Math.Vector2 Move to point \u00b6 path . moveTo ( x , y ); Add curves from JSON \u00b6 path . fromJSON ( json ); Get curves \u00b6 var curves = path . curves ; Draw on graphics \u00b6 path . draw ( graphics ); Point \u00b6 Get point var out = path . getPoint ( t ); // t: 0 ~ 1 // var out = path.getPoint(t, out); // modify out or var out = curve . getPoint ( t ); // t: 0 ~ 1 // var out = curve.getPoint(t, out); // modify out Distance of path from start point to target point (out) might not linear with t. Get random point var out = path . getRandomPoint (); // var out = path.getRandomPoint(out); // modify out or var out = curve . getRandomPoint (); // var out = curve.getRandomPoint(out); // modify out Get n points var points = path . getPoints ( n ); or var points = curve . getPoints ( n ); Get n points equally spaced out along the curve var points = path . getSpacedPoints ( n ); or var points = curve . getSpacedPoints ( n ); Get points spaced out n distance pixels apart var points = curve . getDistancePoints ( n ) The smaller the distance, the larger the array will be. Path object does NOT support this feature yet. Get start point var out = path . getStartPoint (); // var out = path.getStartPoint(out); // modify out or var out = curve . getStartPoint (); // var out = curve.getStartPoint(out); // modify out Get end point var out = path . getEndPoint (); // var out = path.getEndPoint(out); // modify out or var out = curve . getEndPoint (); // var out = curve.getEndPoint(out); // modify out Get t (0~1) from distance var t = curve . getTFromDistance ( d ); Path object does NOT support this feature yet. Get tangent var out = curve . getTangent ( t ); // t: 0~1 // var out = curve.getTangent(t, out); // modify out Path object does NOT support this feature yet. Length of path \u00b6 var l = path . getLength (); or var l = curve . getLength (); Length of path/curve will be cached. Update length \u00b6 path . updateArcLengths (); or curve . updateArcLengths (); Curves to JSON \u00b6 var json = path . toJSON (); or var json = curve . toJSON (); Bounds \u00b6 Get bounds var out = path . getBounds (); // accuracy = 16 // var out = path.getBounds(out); // var out = path.getBounds(out, accuracy); or var out = curve . getBounds (); // accuracy = 16 // var out = curve.getBounds(out); // var out = curve.getBounds(out, accuracy); out : A rectangle object Destroy \u00b6 path . destroy ();","title":"Path"},{"location":"path/#introduction","text":"Path in curves, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"path/#usage","text":"","title":"Usage"},{"location":"path/#add-path-object","text":"var path = scene . add . path (); // var path = scene.add.path(x, y); // curve start from (x, y) or var path = new Phaser . Curves . Path (); // var path = new Phaser.Curves.Path(x, y); // curve start from (x, y)","title":"Add path object"},{"location":"path/#add-path-object-with-curves","text":"Curves in JSON var path = scene . add . path ( json ); or var path = new Phaser . Curves . Path ( json );","title":"Add path object with curves"},{"location":"path/#add-curve","text":"","title":"Add curve"},{"location":"path/#line","text":"Add line object Create line object var curve = new Phaser . Curves . Line ({ x : x0 , y : y0 }, { x : x1 , y : y1 }); or var curve = new Phaser . Curves . Line ([ x0 , y0 , x1 , y1 ]); Add to path path . add ( curve ); Add line started from previous end point to next point path . lineTo ( endX , endY ); or path . lineTo ( new Phaser . Math . Vector2 ({ x , y })); Properties: curve.p0 : The first endpoint. curve.p0.x , curve.p0.y curve.p1 : The second endpoint. curve.p1.x , curve.p1.y","title":"Line"},{"location":"path/#circleellipsearc","text":"Add circle/ellipse/arc object Create circle/ellipse/arc object Circle var curve = new Phaser . Curves . Ellipse ( x , y , radius ); Ellipse var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius ); Arc var curve = new Phaser . Curves . Ellipse ( x , y , xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Add to path path . add ( curve ); Add circle/ellipse/arc started from previous end point to next point Circle path . circleTo ( radius ); Ellipse path . ellipseTo ( xRadius , yRadius ); Arc path . ellipseTo ( xRadius , yRadius , startAngle , endAngle , clockwise , rotation ); Properties: curve.p0 : Center point. curve.p0.x , curve.p0.y curve.xRadius , curve.yRadius : Horizontal/vertical radiuse. curve.startAngle , curve.endAngle : Start/end angle, in degrees. curve.clockwise : true if Clockwise, false if anti-clockwise. curve.angle : Rotation, in degrees. curve.rotation : Rotation, in radians.","title":"Circle/ellipse/arc"},{"location":"path/#spline","text":"Add spline object Create spline object var curve = new Phaser . Curves . Spline ([ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]); or var curve = new Phaser . Curves . Spline ([ x0 , y0 , x1 , y1 , // ... ]); Add to path path . add ( curve ); Add spline started from previous end point to next point var points = ; path . splineTo ([ p0 , // {x, y}, or [x, y] p1 , // {x, y}, or [x, y] // ... ]); or path . splineTo ([ x0 , y0 , x1 , y1 , // ... ]);","title":"Spline"},{"location":"path/#append-point","text":"var point = curve . addPoint ( x , y );","title":"Append point"},{"location":"path/#quadratic-bezier-curve","text":"Create quadratic bezier curve object var curve = new Phaser . Curves . QuadraticBezier ( startPoint , controlPoint , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point x2 , y2 // end point ]; var curve = new Phaser . Curves . QuadraticBezier ( points ); Add to path path . add ( curve ); Add quadratic bezier curve started from previous end point to next point path . quadraticBezierTo ( endX , endY , controlX , controlY ); or path . quadraticBezierTo ( endPoint , controlPoint ); // point : Phaser.Math.Vector2","title":"Quadratic bezier curve"},{"location":"path/#cubic-bezier-curve","text":"Create quadratic bezier curve object var curve = new Phaser . Curves . CubicBezier ( startPoint , controlPoint1 , controlPoint2 , endPoint ); // point: {x, y} or var points = [ x0 , y0 , // start point x1 , y1 , // control point1 x2 , y2 , // control point2 x3 , y3 // end point ]; var curve = new Phaser . Curves . CubicBezier ( points ); Add to path path . add ( curve ); Add cubic bezier curve started from previous end point to next point path . cubicBezierTo ( endX , endY , control1X , control1Y , control2X , control2Y ); or path . cubicBezierTo ( endPoint , controlPoint1 , controlPoint2 ); // point : Phaser.Math.Vector2","title":"Cubic bezier curve"},{"location":"path/#move-to-point","text":"path . moveTo ( x , y );","title":"Move to point"},{"location":"path/#add-curves-from-json","text":"path . fromJSON ( json );","title":"Add curves from JSON"},{"location":"path/#get-curves","text":"var curves = path . curves ;","title":"Get curves"},{"location":"path/#draw-on-graphics","text":"path . draw ( graphics );","title":"Draw on graphics"},{"location":"path/#point","text":"Get point var out = path . getPoint ( t ); // t: 0 ~ 1 // var out = path.getPoint(t, out); // modify out or var out = curve . getPoint ( t ); // t: 0 ~ 1 // var out = curve.getPoint(t, out); // modify out Distance of path from start point to target point (out) might not linear with t. Get random point var out = path . getRandomPoint (); // var out = path.getRandomPoint(out); // modify out or var out = curve . getRandomPoint (); // var out = curve.getRandomPoint(out); // modify out Get n points var points = path . getPoints ( n ); or var points = curve . getPoints ( n ); Get n points equally spaced out along the curve var points = path . getSpacedPoints ( n ); or var points = curve . getSpacedPoints ( n ); Get points spaced out n distance pixels apart var points = curve . getDistancePoints ( n ) The smaller the distance, the larger the array will be. Path object does NOT support this feature yet. Get start point var out = path . getStartPoint (); // var out = path.getStartPoint(out); // modify out or var out = curve . getStartPoint (); // var out = curve.getStartPoint(out); // modify out Get end point var out = path . getEndPoint (); // var out = path.getEndPoint(out); // modify out or var out = curve . getEndPoint (); // var out = curve.getEndPoint(out); // modify out Get t (0~1) from distance var t = curve . getTFromDistance ( d ); Path object does NOT support this feature yet. Get tangent var out = curve . getTangent ( t ); // t: 0~1 // var out = curve.getTangent(t, out); // modify out Path object does NOT support this feature yet.","title":"Point"},{"location":"path/#length-of-path","text":"var l = path . getLength (); or var l = curve . getLength (); Length of path/curve will be cached.","title":"Length of path"},{"location":"path/#update-length","text":"path . updateArcLengths (); or curve . updateArcLengths ();","title":"Update length"},{"location":"path/#curves-to-json","text":"var json = path . toJSON (); or var json = curve . toJSON ();","title":"Curves to JSON"},{"location":"path/#bounds","text":"Get bounds var out = path . getBounds (); // accuracy = 16 // var out = path.getBounds(out); // var out = path.getBounds(out, accuracy); or var out = curve . getBounds (); // accuracy = 16 // var out = curve.getBounds(out); // var out = curve.getBounds(out, accuracy); out : A rectangle object","title":"Bounds"},{"location":"path/#destroy","text":"path . destroy ();","title":"Destroy"},{"location":"pathfollower/","text":"Introduction \u00b6 Set position of game object on a path . Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPathFollower from './plugins/pathfollower.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PathFollowerPlugin from './plugins/pathfollower-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPathFollower' , plugin : PathFollowerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 // var path = scene.add.path(); var pathFollower = scene . plugins . get ( 'rexPathFollower' ). add ( gameObject , { // path: path, // path object // t: 0, // t: 0~1 // rotateToPath: false, // rotationOffset: 0, // angleOffset: 0 }); path : Path object t : Initial value of property t (0~1) rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian, or angleOffset in degrees Move along path \u00b6 Set pathFollower.t (0~1) to move along path pathFollower . t = t ; // t: 0~1 // pathFollower.setT(t); or tween pathFollower.t var tween = scene . tweens . add ({ targets : pathFollower , t : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , yoyo : false }); Set path \u00b6 pathFollower . setPath ( path ); Set rotate-to-path \u00b6 pathFollower . setRotateToPath ( rotateToPath , rotationOffset ); rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian","title":"Path follower"},{"location":"pathfollower/#introduction","text":"Set position of game object on a path . Author: Rex Behavior of game object","title":"Introduction"},{"location":"pathfollower/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"pathfollower/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"pathfollower/#import-class","text":"import rexPathFollower from './plugins/pathfollower.js' ;","title":"Import class"},{"location":"pathfollower/#install-global-plugin","text":"Install plugin in configuration of game import PathFollowerPlugin from './plugins/pathfollower-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPathFollower' , plugin : PathFollowerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"pathfollower/#create-instance","text":"// var path = scene.add.path(); var pathFollower = scene . plugins . get ( 'rexPathFollower' ). add ( gameObject , { // path: path, // path object // t: 0, // t: 0~1 // rotateToPath: false, // rotationOffset: 0, // angleOffset: 0 }); path : Path object t : Initial value of property t (0~1) rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian, or angleOffset in degrees","title":"Create instance"},{"location":"pathfollower/#move-along-path","text":"Set pathFollower.t (0~1) to move along path pathFollower . t = t ; // t: 0~1 // pathFollower.setT(t); or tween pathFollower.t var tween = scene . tweens . add ({ targets : pathFollower , t : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , yoyo : false });","title":"Move along path"},{"location":"pathfollower/#set-path","text":"pathFollower . setPath ( path );","title":"Set path"},{"location":"pathfollower/#set-rotate-to-path","text":"pathFollower . setRotateToPath ( rotateToPath , rotationOffset ); rotateToPath : Set true to change angle towards path rotationOffset : Rotation offset in radian","title":"Set rotate-to-path"},{"location":"percentage/","text":"Introduction \u00b6 Work out what percentage value is of the range between min and max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Percent ( value , min , max ); result : Percentage/t (0~1). value : The value to determine the percentage of.","title":"Percentage"},{"location":"percentage/#introduction","text":"Work out what percentage value is of the range between min and max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"percentage/#usage","text":"var result = Phaser . Math . Percent ( value , min , max ); result : Percentage/t (0~1). value : The value to determine the percentage of.","title":"Usage"},{"location":"perlin/","text":"Introduction \u00b6 Perlin2/Perlin3 noise and simplex2/simplex3 noise. ( Reference ) Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPerlin from './plugins/perlin.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PerlinPlugin from './plugins/perlin-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPerlin' , plugin : PerlinPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create noise instance \u00b6 var noise = cene . plugins . get ( 'rexPerlin' ). add ( seed ); seed : A seed for this noise, like Math.random() Perlin \u00b6 Perlin2 var value = noise . perlin2 ( x , y ); value : -1 ~ 1 Perlin3 var value = noise . perlin3 ( x , y , z ); value : -1 ~ 1 Simplex \u00b6 Simplex2 var value = noise . simplex2 ( x , y ); value : -1 ~ 1 Simplex3 var value = noise . simplex3 ( x , y , z ); value : -1 ~ 1 Set seed \u00b6 noise . setSeed ( seed );","title":"Perlin"},{"location":"perlin/#introduction","text":"Perlin2/Perlin3 noise and simplex2/simplex3 noise. ( Reference ) Author: Rex Method only","title":"Introduction"},{"location":"perlin/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"perlin/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"perlin/#import-class","text":"import rexPerlin from './plugins/perlin.js' ;","title":"Import class"},{"location":"perlin/#install-global-plugin","text":"Install plugin in configuration of game import PerlinPlugin from './plugins/perlin-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPerlin' , plugin : PerlinPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"perlin/#create-noise-instance","text":"var noise = cene . plugins . get ( 'rexPerlin' ). add ( seed ); seed : A seed for this noise, like Math.random()","title":"Create noise instance"},{"location":"perlin/#perlin","text":"Perlin2 var value = noise . perlin2 ( x , y ); value : -1 ~ 1 Perlin3 var value = noise . perlin3 ( x , y , z ); value : -1 ~ 1","title":"Perlin"},{"location":"perlin/#simplex","text":"Simplex2 var value = noise . simplex2 ( x , y ); value : -1 ~ 1 Simplex3 var value = noise . simplex3 ( x , y , z ); value : -1 ~ 1","title":"Simplex"},{"location":"perlin/#set-seed","text":"noise . setSeed ( seed );","title":"Set seed"},{"location":"pluginsystem/","text":"Introduction \u00b6 Plugin system, built-in system of phaser. Author: Richard Davey Usage \u00b6 Global plugin \u00b6 Load plugin \u00b6 Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { global : [ { key : key , plugin : pluginKlass , start : true // mapping: memberName // member name in each scene instance, optional }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . plugin ( key , url , true ); url : File url or class instance. Get instance \u00b6 var pluginInst = scene . plugins . get ( key ); Scene plugin \u00b6 Load plugin \u00b6 Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { scene : [ { key : key , plugin : pluginKlass , mapping : sceneKey // member name in each scene instance }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance. Get instance \u00b6 var pluginInst = scene [ sceneKey ]; Plugin cache \u00b6 Has custom plugin var hasPlugin = Phaser . Plugins . PluginCache . hasCustom ( key );","title":"Plugin system"},{"location":"pluginsystem/#introduction","text":"Plugin system, built-in system of phaser. Author: Richard Davey","title":"Introduction"},{"location":"pluginsystem/#usage","text":"","title":"Usage"},{"location":"pluginsystem/#global-plugin","text":"","title":"Global plugin"},{"location":"pluginsystem/#load-plugin","text":"Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { global : [ { key : key , plugin : pluginKlass , start : true // mapping: memberName // member name in each scene instance, optional }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . plugin ( key , url , true ); url : File url or class instance.","title":"Load plugin"},{"location":"pluginsystem/#get-instance","text":"var pluginInst = scene . plugins . get ( key );","title":"Get instance"},{"location":"pluginsystem/#scene-plugin","text":"","title":"Scene plugin"},{"location":"pluginsystem/#load-plugin_1","text":"Load plugin before any scene start In game configuration // import pluginKlass from '...'; var config = { // ... plugins : { scene : [ { key : key , plugin : pluginKlass , mapping : sceneKey // member name in each scene instance }, // ... ] } // ... }; var game = new Phaser . Game ( config ); pluginKlass : Class instance Load plugin in scene scene . load . scenePlugin ( key , url , systemKey , sceneKey ); url : File url or class instance.","title":"Load plugin"},{"location":"pluginsystem/#get-instance_1","text":"var pluginInst = scene [ sceneKey ];","title":"Get instance"},{"location":"pluginsystem/#plugin-cache","text":"Has custom plugin var hasPlugin = Phaser . Plugins . PluginCache . hasCustom ( key );","title":"Plugin cache"},{"location":"popup/","text":"Introduction \u00b6 Scale up (i.e. ease scaleX, scaleY from 0 to 1 ) game object. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Pop up width and height popUp ( gameObject , duration ); // popUp(gameObject, duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only popUp ( gameObject , duration , 'x' ); // popUp(gameObject, duration, 'x', ease); ease : Ease function , default is 'Cubic' . Pop up height only popUp ( gameObject , duration , 'y' ); // popUp(gameObject, duration, 'y', ease); ease : Ease function , default is 'Cubic' .","title":"Pop up"},{"location":"popup/#introduction","text":"Scale up (i.e. ease scaleX, scaleY from 0 to 1 ) game object. Author: Rex Method only","title":"Introduction"},{"location":"popup/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"popup/#usage","text":"Sample code Pop up width and height popUp ( gameObject , duration ); // popUp(gameObject, duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only popUp ( gameObject , duration , 'x' ); // popUp(gameObject, duration, 'x', ease); ease : Ease function , default is 'Cubic' . Pop up height only popUp ( gameObject , duration , 'y' ); // popUp(gameObject, duration, 'y', ease); ease : Ease function , default is 'Cubic' .","title":"Usage"},{"location":"quad/","text":"Introduction \u00b6 Manipulate the corner points of static images, built-in game object of phaser. Author: Richard Davey WebGL only It only works in WebGL render mode. Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add object \u00b6 var quad = scene . add . quad ( x , y , key ); Add quad from JSON var quad = scene . make . quad ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true }); Custom quad class \u00b6 Define class class MyQuad extends Phaser . GameObjects . Quad { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var quad = new MyQuad ( scene , x , y , key ); Properties of corner points \u00b6 Position \u00b6 Get var topLeftX = quad . topLeftX ; var topLeftY = quad . topLeftY ; var topRightX = quad . topRightX ; var topRightY = quad . topRightY ; var bottomLeftX = quad . bottomLeftX ; var bottomLeftY = quad . bottomLeftY ; var bottomRightX = quad . bottomRightX ; var bottomRightY = quad . bottomRightY ; Set quad . topLeftX = topLeftX ; quad . topLeftY = topLeftY ; quad . topRightX = topRightX ; quad . topRightY = topRightY ; quad . bottomLeftX = bottomLeftX ; quad . bottomLeftY = bottomLeftY ; quad . bottomRightX = bottomRightX ; quad . bottomRightY = bottomRightY ; quad . setTopLeft ( x , y ); quad . setTopRight ( x , y ); quad . setBottomLeft ( x , y ); quad . setBottomRight ( x , y ); quad . resetPosition (); Alpha \u00b6 Get var topLeftAlpha = quad . topLeftAlpha ; var topRightAlpha = quad . topRightAlpha ; var bottomLeftAlpha = quad . bottomLeftAlpha ; var bottomRightAlpha = quad . bottomRightAlpha ; Set quad . topLeftAlpha = topLeftAlpha ; quad . topRightAlpha = topRightAlpha ; quad . bottomLeftAlpha = bottomLeftAlpha ; quad . bottomRightAlpha = bottomRightAlpha ; quad . resetAlpha (); Color \u00b6 Get var topLeftColor = quad . topLeftColor ; var topRightColor = quad . topRightColor ; var bottomLeftColor = quad . bottomLeftColor ; var bottomRightColor = quad . bottomRightColor ; Set quad . topLeftColor = topLeftColor ; quad . topRightColor = topRightColor ; quad . bottomLeftColor = bottomLeftColor ; quad . bottomRightColor = bottomRightColor ; quad . resetColors (); Reset all \u00b6 quad . reset (); Set frame \u00b6 quad . setFrame ( frame );","title":"Quad"},{"location":"quad/#introduction","text":"Manipulate the corner points of static images, built-in game object of phaser. Author: Richard Davey WebGL only It only works in WebGL render mode.","title":"Introduction"},{"location":"quad/#usage","text":"","title":"Usage"},{"location":"quad/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"quad/#add-object","text":"var quad = scene . add . quad ( x , y , key ); Add quad from JSON var quad = scene . make . quad ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, add : true });","title":"Add object"},{"location":"quad/#custom-quad-class","text":"Define class class MyQuad extends Phaser . GameObjects . Quad { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var quad = new MyQuad ( scene , x , y , key );","title":"Custom quad class"},{"location":"quad/#properties-of-corner-points","text":"","title":"Properties of corner points"},{"location":"quad/#position","text":"Get var topLeftX = quad . topLeftX ; var topLeftY = quad . topLeftY ; var topRightX = quad . topRightX ; var topRightY = quad . topRightY ; var bottomLeftX = quad . bottomLeftX ; var bottomLeftY = quad . bottomLeftY ; var bottomRightX = quad . bottomRightX ; var bottomRightY = quad . bottomRightY ; Set quad . topLeftX = topLeftX ; quad . topLeftY = topLeftY ; quad . topRightX = topRightX ; quad . topRightY = topRightY ; quad . bottomLeftX = bottomLeftX ; quad . bottomLeftY = bottomLeftY ; quad . bottomRightX = bottomRightX ; quad . bottomRightY = bottomRightY ; quad . setTopLeft ( x , y ); quad . setTopRight ( x , y ); quad . setBottomLeft ( x , y ); quad . setBottomRight ( x , y ); quad . resetPosition ();","title":"Position"},{"location":"quad/#alpha","text":"Get var topLeftAlpha = quad . topLeftAlpha ; var topRightAlpha = quad . topRightAlpha ; var bottomLeftAlpha = quad . bottomLeftAlpha ; var bottomRightAlpha = quad . bottomRightAlpha ; Set quad . topLeftAlpha = topLeftAlpha ; quad . topRightAlpha = topRightAlpha ; quad . bottomLeftAlpha = bottomLeftAlpha ; quad . bottomRightAlpha = bottomRightAlpha ; quad . resetAlpha ();","title":"Alpha"},{"location":"quad/#color","text":"Get var topLeftColor = quad . topLeftColor ; var topRightColor = quad . topRightColor ; var bottomLeftColor = quad . bottomLeftColor ; var bottomRightColor = quad . bottomRightColor ; Set quad . topLeftColor = topLeftColor ; quad . topRightColor = topRightColor ; quad . bottomLeftColor = bottomLeftColor ; quad . bottomRightColor = bottomRightColor ; quad . resetColors ();","title":"Color"},{"location":"quad/#reset-all","text":"quad . reset ();","title":"Reset all"},{"location":"quad/#set-frame","text":"quad . setFrame ( frame );","title":"Set frame"},{"location":"quest/","text":"Introduction \u00b6 Question manager. Author: Rex Member of scene, or game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexQuest from './plugins/quest.js' ; Install global plugin \u00b6 Install plugin in configuration of game import QuestPlugin from './plugins/quest-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexQuest' , plugin : QuestPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Question manager \u00b6 Create question manager instance \u00b6 var questionManager = scene . plugins . get ( 'rexQuest' ). add ({ questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : undefined , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); questions : An array of question objects, or a csv string. An array : Question items array. [ { key : q0 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, { key : q1 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, ] Question object : {key, options, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. options : An array of option objects. Other key-value parameters. Option object : {key, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. Other key-value parameters. A csv string : type,key,param0,param1,... q,q0,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... q,q1,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... Fields in first row type : Type of this row. These values can be redefined via types in configuration object. q : A row of question object. Empty string : A row of option object belong a question object. key : Unique key string. Create a key string '_' + serialNumber if this field does not exist. Other fields. delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } quest : Create a private quest task object. undefined : Don't create a private quest task object. true : Create a private quest task object with default configuration. Configuration of quest task : quest.shuffleQuestions : Set true to shuffle questions. quest.shuffleOptions : Set true to shuffle options. Add questions \u00b6 questionManager . add ( questions , config ); questions : An array of question objects, or a csv string. See questions section in Create question manager instance section. config : delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } Remove question \u00b6 Remove a question object questionManager . remove ( key ); key : An unique key string. Remove all question objects questionManager . removeAll ( key ); Get question \u00b6 Get a question object var question = questionManager . get ( key ); Get all keys of question objects var questionKeys = questionManager . getKeys (); // var out = questionManager.getKeys(out); questionKeys : Array of question key string. Question is existed \u00b6 var isExisted = questionManager . has ( key ); Array of questions \u00b6 var questions = questionManager . questions ; Rearrange items of this questions array to reorder questions in quest task. Get option \u00b6 var option = questionManager . getOption ( question , optionKey ); question : A question object, or a question key string. optionKey : A option key string. Private quest task \u00b6 Create private quest task \u00b6 Each question manager can hava a private quest task object, created when creating question manager , or questionManager . startQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options. Get next question object \u00b6 Get next question object var question = questionManager . getNextQuestion (); Get next question object via question key var question = questionManager . getNextQuestion ( questionKey ); Event \u00b6 Fire 'quest' when calling questionManager.getNextQuestion() questionManager . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task. Is last question \u00b6 var isLast = questionManager . isLastQuestion (); Restart quest task \u00b6 questionManager . restartQuest (); Private data \u00b6 Get data var value = questionManager . getData ( key , defaultValue ); Get all data var data = questionManager . getData (); Set value questionManager . setData ( key , value ); Increase value questionManager . incData ( key , inc , defaultValue ); Multiple value questionManager . mulData ( key , inc , defaultValue ); Clear all data questionManager . clearData (); Quest task \u00b6 Create new quest task if user needs more then 1 quest task. Create quest task \u00b6 var quest = questionManager . newQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options. Get next question object \u00b6 Get next question object var question = quest . getNextQuestion (); Get next question object via question key var question = quest . getNextQuestion ( questionKey ); Event \u00b6 Fire 'quest' when calling questionManager.getNextQuestion() quest . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task. Is last question \u00b6 var isLast = quest . isLastQuestion (); Restart quest task \u00b6 quest . start (); Private data \u00b6 Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData (); Get option \u00b6 var option = quest . getOption ( question , optionKey ); question : A question object, or a question key string, or undefined to get current question object. optionKey : A option key string.","title":"Quest"},{"location":"quest/#introduction","text":"Question manager. Author: Rex Member of scene, or game object","title":"Introduction"},{"location":"quest/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"quest/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"quest/#import-class","text":"import rexQuest from './plugins/quest.js' ;","title":"Import class"},{"location":"quest/#install-global-plugin","text":"Install plugin in configuration of game import QuestPlugin from './plugins/quest-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexQuest' , plugin : QuestPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"quest/#question-manager","text":"","title":"Question manager"},{"location":"quest/#create-question-manager-instance","text":"var questionManager = scene . plugins . get ( 'rexQuest' ). add ({ questions : undefined , // delimiter: ',', // types: { // question: 'q', // option: '', // }, // convert: true, quest : undefined , // quest: { // shuffleQuestions: false, // shuffleOptions: false, // } }); questions : An array of question objects, or a csv string. An array : Question items array. [ { key : q0 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, { key : q1 , param0 : value0 , param1 : value1 , param2 : value2 , options : [ { key : o0 , param0 : value0 , param1 : value1 , // ... }, { key : o1 , param0 : value0 , param1 : value1 , // ... } ] }, ] Question object : {key, options, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. options : An array of option objects. Other key-value parameters. Option object : {key, param, ...} key : An unique key string. Create a key string '_' + serialNumber if not given. Other key-value parameters. A csv string : type,key,param0,param1,... q,q0,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... q,q1,value0,value1,... ,o0,value0,value1,... ,o1,value0,value1,... Fields in first row type : Type of this row. These values can be redefined via types in configuration object. q : A row of question object. Empty string : A row of option object belong a question object. key : Unique key string. Create a key string '_' + serialNumber if this field does not exist. Other fields. delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; } quest : Create a private quest task object. undefined : Don't create a private quest task object. true : Create a private quest task object with default configuration. Configuration of quest task : quest.shuffleQuestions : Set true to shuffle questions. quest.shuffleOptions : Set true to shuffle options.","title":"Create question manager instance"},{"location":"quest/#add-questions","text":"questionManager . add ( questions , config ); questions : An array of question objects, or a csv string. See questions section in Create question manager instance section. config : delimiter : Delimiter of csv string. Default value is ',' types : Define value of row type. types.question : Define value of question row. Default value is q . types.option : Define value of option row. Default value is '' (empty string). convert : Convert string values to other types. Default type converting : Convert string to number , boolean , null , or string '0' , '1' , ... (number string) -> number 'true' , or 'false' -> true or false '' (empty string) -> null Others : string. Set false to ignore types converting, i.e. all values are string. A custom type converting function : function ( stringValue , key ) { // return value; }","title":"Add questions"},{"location":"quest/#remove-question","text":"Remove a question object questionManager . remove ( key ); key : An unique key string. Remove all question objects questionManager . removeAll ( key );","title":"Remove question"},{"location":"quest/#get-question","text":"Get a question object var question = questionManager . get ( key ); Get all keys of question objects var questionKeys = questionManager . getKeys (); // var out = questionManager.getKeys(out); questionKeys : Array of question key string.","title":"Get question"},{"location":"quest/#question-is-existed","text":"var isExisted = questionManager . has ( key );","title":"Question is existed"},{"location":"quest/#array-of-questions","text":"var questions = questionManager . questions ; Rearrange items of this questions array to reorder questions in quest task.","title":"Array of questions"},{"location":"quest/#get-option","text":"var option = questionManager . getOption ( question , optionKey ); question : A question object, or a question key string. optionKey : A option key string.","title":"Get option"},{"location":"quest/#private-quest-task","text":"","title":"Private quest task"},{"location":"quest/#create-private-quest-task","text":"Each question manager can hava a private quest task object, created when creating question manager , or questionManager . startQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options.","title":"Create private quest task"},{"location":"quest/#get-next-question-object","text":"Get next question object var question = questionManager . getNextQuestion (); Get next question object via question key var question = questionManager . getNextQuestion ( questionKey );","title":"Get next question object"},{"location":"quest/#event","text":"Fire 'quest' when calling questionManager.getNextQuestion() questionManager . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task.","title":"Event"},{"location":"quest/#is-last-question","text":"var isLast = questionManager . isLastQuestion ();","title":"Is last question"},{"location":"quest/#restart-quest-task","text":"questionManager . restartQuest ();","title":"Restart quest task"},{"location":"quest/#private-data","text":"Get data var value = questionManager . getData ( key , defaultValue ); Get all data var data = questionManager . getData (); Set value questionManager . setData ( key , value ); Increase value questionManager . incData ( key , inc , defaultValue ); Multiple value questionManager . mulData ( key , inc , defaultValue ); Clear all data questionManager . clearData ();","title":"Private data"},{"location":"quest/#quest-task","text":"Create new quest task if user needs more then 1 quest task.","title":"Quest task"},{"location":"quest/#create-quest-task","text":"var quest = questionManager . newQuest ( config ); config : shuffleQuestions : Set true to shuffle questions. shuffleOptions : Set true to shuffle options.","title":"Create quest task"},{"location":"quest/#get-next-question-object_1","text":"Get next question object var question = quest . getNextQuestion (); Get next question object via question key var question = quest . getNextQuestion ( questionKey );","title":"Get next question object"},{"location":"quest/#event_1","text":"Fire 'quest' when calling questionManager.getNextQuestion() quest . on ( 'quest' , function ( question , questionManager , quest ){ // questionManager.getNextQuestion(); }) question : Question object. question.options : Option objects of this question. questionManager : Question manager. quest : Quest task.","title":"Event"},{"location":"quest/#is-last-question_1","text":"var isLast = quest . isLastQuestion ();","title":"Is last question"},{"location":"quest/#restart-quest-task_1","text":"quest . start ();","title":"Restart quest task"},{"location":"quest/#private-data_1","text":"Get data var value = quest . getData ( key , defaultValue ); Get all data var data = quest . getData (); Set value quest . setData ( key , value ); Increase value quest . incData ( key , inc , defaultValue ); Multiple value quest . mulData ( key , inc , defaultValue ); Clear all data quest . clearData ();","title":"Private data"},{"location":"quest/#get-option_1","text":"var option = quest . getOption ( question , optionKey ); question : A question object, or a question key string, or undefined to get current question object. optionKey : A option key string.","title":"Get option"},{"location":"random-data-generator/","text":"Introduction \u00b6 Get random value from a random generator, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Random data generator \u00b6 Pre-defined random data generator var rnd = Phaser . Math . RND ; New random generator var rnd = new Phaser . Math . RandomDataGenerator ( seed ); Set seed \u00b6 Set seed in game config for pre-defined random data generator var config = { // ... seed : seed , // ... } var game = new Phaser . Game ( config ); seed : An array of string, like [(Date.now() * Math.random()).toString()] Set seed rnd . init ( seed ); seed : A string or an array of string. Get random value \u00b6 Random real number between 0 and 1 . var value = rnd . frac (); Random integer between 0 and 2^32 . var value = rnd . integer (); Random real number between 0 and 2^32. var value = rnd . real (); Random integer between and including min and max. var value = rnd . between ( min , max ); // var value = rnd.integerInRange(min, max); Random real number between min and max. var value = rnd . realInRange ( min , max ); Random real number between -1 and 1. var value = rnd . normal (); Random angle between -180 and 180 . var angle = rnd . angle (); Random rotation in radians, between -3.141 and 3.141 . var angle = rnd . rotation (); Random timestamp between min and max. var timestamp = rnd . timestamp ( min , max ); min : Default value is the beginning of 2000. max : Default value is the end of 2020. UUID var uuid = rnd . uuid (); Random sign value var sign = rnd . sign (); sign : -1 or 1 Get random item \u00b6 Random element from within the given array. var item = rnd . pick ( arr ); Random element from within the given array, favoring the earlier entries. var item = rnd . weightedPick ( arr ); Shuffle array \u00b6 var arr = rnd . shuffle ( arr );","title":"Random data generator"},{"location":"random-data-generator/#introduction","text":"Get random value from a random generator, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"random-data-generator/#usage","text":"","title":"Usage"},{"location":"random-data-generator/#random-data-generator","text":"Pre-defined random data generator var rnd = Phaser . Math . RND ; New random generator var rnd = new Phaser . Math . RandomDataGenerator ( seed );","title":"Random data generator"},{"location":"random-data-generator/#set-seed","text":"Set seed in game config for pre-defined random data generator var config = { // ... seed : seed , // ... } var game = new Phaser . Game ( config ); seed : An array of string, like [(Date.now() * Math.random()).toString()] Set seed rnd . init ( seed ); seed : A string or an array of string.","title":"Set seed"},{"location":"random-data-generator/#get-random-value","text":"Random real number between 0 and 1 . var value = rnd . frac (); Random integer between 0 and 2^32 . var value = rnd . integer (); Random real number between 0 and 2^32. var value = rnd . real (); Random integer between and including min and max. var value = rnd . between ( min , max ); // var value = rnd.integerInRange(min, max); Random real number between min and max. var value = rnd . realInRange ( min , max ); Random real number between -1 and 1. var value = rnd . normal (); Random angle between -180 and 180 . var angle = rnd . angle (); Random rotation in radians, between -3.141 and 3.141 . var angle = rnd . rotation (); Random timestamp between min and max. var timestamp = rnd . timestamp ( min , max ); min : Default value is the beginning of 2000. max : Default value is the end of 2020. UUID var uuid = rnd . uuid (); Random sign value var sign = rnd . sign (); sign : -1 or 1","title":"Get random value"},{"location":"random-data-generator/#get-random-item","text":"Random element from within the given array. var item = rnd . pick ( arr ); Random element from within the given array, favoring the earlier entries. var item = rnd . weightedPick ( arr );","title":"Get random item"},{"location":"random-data-generator/#shuffle-array","text":"var arr = rnd . shuffle ( arr );","title":"Shuffle array"},{"location":"random/","text":"Introduction \u00b6 Get random value, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get random integer between (min, max) \u00b6 var value = Phaser . Math . Between ( min , max ); Get random vector \u00b6 var vec = Phaser . Math . RandomXY ( vec ); // return vec {x, y} // var vec = Phaser.Math.RandomXY(vec, scale);","title":"Random number"},{"location":"random/#introduction","text":"Get random value, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"random/#usage","text":"","title":"Usage"},{"location":"random/#get-random-integer-between-min-max","text":"var value = Phaser . Math . Between ( min , max );","title":"Get random integer between (min, max)"},{"location":"random/#get-random-vector","text":"var vec = Phaser . Math . RandomXY ( vec ); // return vec {x, y} // var vec = Phaser.Math.RandomXY(vec, scale);","title":"Get random vector"},{"location":"randomplace/","text":"Introduction \u00b6 Place objects randomly inside an area without overlapping. Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRandomPlace from './plugins/randomplace.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RandomPlacePlugin from './plugins/randomplace-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRandomPlace' , plugin : RandomPlacePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Random place \u00b6 scene . plugins . get ( 'rexRandomPlace' ). randomPlace ( items , { radius : radius , getPositionCallback : undefined , area : areaGeomObject , }); items : An array of items. Each item can be A game objects. A plain object contains { gameObject : gameObject , radius : radius , } radius : Collision radius of this game object. radius : Default collision radius of each game object. getPositionCallback : A callback to get a random position. undefined : Use area.getRandomPoint(out) as callback. A function object : function ( out ) { out . x = 0 ; out . y = 0 ; } area : A geom object, which has getRandomPoint method. A circle : new new Phaser.Geom.Circle(x, y, radius) A rectangle : new new Phaser.Geom.Rectangle(x, y, width, height) A triangle : new new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) An ellipse : new new Phaser.Geom.Ellipse(x, y, width, height) undefined : A rectangle (0, 0, gameWidth, gameHeight)","title":"Random place"},{"location":"randomplace/#introduction","text":"Place objects randomly inside an area without overlapping. Author: Rex Methods","title":"Introduction"},{"location":"randomplace/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"randomplace/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"randomplace/#import-class","text":"import rexRandomPlace from './plugins/randomplace.js' ;","title":"Import class"},{"location":"randomplace/#install-global-plugin","text":"Install plugin in configuration of game import RandomPlacePlugin from './plugins/randomplace-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRandomPlace' , plugin : RandomPlacePlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"randomplace/#random-place","text":"scene . plugins . get ( 'rexRandomPlace' ). randomPlace ( items , { radius : radius , getPositionCallback : undefined , area : areaGeomObject , }); items : An array of items. Each item can be A game objects. A plain object contains { gameObject : gameObject , radius : radius , } radius : Collision radius of this game object. radius : Default collision radius of each game object. getPositionCallback : A callback to get a random position. undefined : Use area.getRandomPoint(out) as callback. A function object : function ( out ) { out . x = 0 ; out . y = 0 ; } area : A geom object, which has getRandomPoint method. A circle : new new Phaser.Geom.Circle(x, y, radius) A rectangle : new new Phaser.Geom.Rectangle(x, y, width, height) A triangle : new new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) An ellipse : new new Phaser.Geom.Ellipse(x, y, width, height) undefined : A rectangle (0, 0, gameWidth, gameHeight)","title":"Random place"},{"location":"rendertexture/","text":"Introduction \u00b6 Paste textures, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add render texture object \u00b6 Create an empty render texture object. var rt = scene . add . renderTexture ( x , y , width , height ); Create render texture and load texture. var rt = scene . add . renderTexture ( x , y , undefined , undefined , key , frame ); key : The texture key to make the RenderTexture from. frame : The frame to make the RenderTexture from. Add render texture from JSON var rt = scene . make . renderTexture ({ x : 0 , y : 0 , width : 32 , height : 32 , // key: undefined, // frame: undefined, // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Origin position Origin position of this render texture is (0,0) (top-left) Custom class \u00b6 Define class class MyRenderTexture extends Phaser . GameObjects . RenderTexture { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rt = new MyRenderTexture ( scene , x , y , width , height ); Paste texture \u00b6 Paste game object rt . draw ( gameObject , x , y ); // rt.draw(gameObject, x, y, alpha, tint); gameObject : a game object, or an array of game objects Paste game objects in a group rt . draw ( group , x , y ); // rt.draw(group, x, y, alpha, tint); Paste game objects in a scene rt . draw ( scene . children , x , y ); // rt.draw(scene.children, x, y, alpha, tint); Paste texture rt . draw ( key , x , y ); // rt.draw(key, x, y, alpha, tint); or rt . drawFrame ( key , frame , x , y ); // rt.drawFrame(key, frame, x, y, alpha, tint); key : The key of the texture to be used, as stored in the Texture Manager. Global alpha \u00b6 rt . setGlobalAlpha ( alpha ); // rt.globalAlpha = alpha; Global tint \u00b6 rt . setGlobalTint ( tint ); // rt.globalTint = tint; Erase \u00b6 rt . erase ( gameObject , x , y ); gameObject : a game object, or an array of game objects Clear \u00b6 rt . clear (); Fill \u00b6 rt . fill ( rgb , alpha ); // rt.fill(rgb, alpha, x, y, width, height); Set size \u00b6 rt . setSize ( width , height ); // rt.resize(width, height); Save texture \u00b6 Stores a copy of this Render Texture in the Texture Manager using the given key. rt . saveTexture ( key ); Calling saveTexture again will not save another copy of the same texture, it will just rename the key of the existing copy. Internal camera \u00b6 Internal camera rt.camera Scroll (offset) rt . camera . setPosition ( x , y ); Zoom (scale) rt . camera . setZoom ( zoom ); Rotate rt . camera . setAngle ( angle ); // angle in degrees Snapshot \u00b6 Takes a snapshot of the whole of this Render Texture. rt . snapshot ( callback ); // rt.snapshot(callback, type, encoderOptions); Takes a snapshot of the given area of this Render Texture. rt . snapshotArea ( x , y , width , height , callback ); // rt.snapshotArea(x, y, width, height, callback, type, encoderOptions); Takes a snapshot of the given pixel from this Render Texture. rt . snapshotPixel ( x , y , callback ); Other properties \u00b6 See game object Create mask \u00b6 var mask = rt . createBitmapMask (); See mask","title":"Render texture"},{"location":"rendertexture/#introduction","text":"Paste textures, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"rendertexture/#usage","text":"","title":"Usage"},{"location":"rendertexture/#add-render-texture-object","text":"Create an empty render texture object. var rt = scene . add . renderTexture ( x , y , width , height ); Create render texture and load texture. var rt = scene . add . renderTexture ( x , y , undefined , undefined , key , frame ); key : The texture key to make the RenderTexture from. frame : The frame to make the RenderTexture from. Add render texture from JSON var rt = scene . make . renderTexture ({ x : 0 , y : 0 , width : 32 , height : 32 , // key: undefined, // frame: undefined, // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Origin position Origin position of this render texture is (0,0) (top-left)","title":"Add render texture object"},{"location":"rendertexture/#custom-class","text":"Define class class MyRenderTexture extends Phaser . GameObjects . RenderTexture { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rt = new MyRenderTexture ( scene , x , y , width , height );","title":"Custom class"},{"location":"rendertexture/#paste-texture","text":"Paste game object rt . draw ( gameObject , x , y ); // rt.draw(gameObject, x, y, alpha, tint); gameObject : a game object, or an array of game objects Paste game objects in a group rt . draw ( group , x , y ); // rt.draw(group, x, y, alpha, tint); Paste game objects in a scene rt . draw ( scene . children , x , y ); // rt.draw(scene.children, x, y, alpha, tint); Paste texture rt . draw ( key , x , y ); // rt.draw(key, x, y, alpha, tint); or rt . drawFrame ( key , frame , x , y ); // rt.drawFrame(key, frame, x, y, alpha, tint); key : The key of the texture to be used, as stored in the Texture Manager.","title":"Paste texture"},{"location":"rendertexture/#global-alpha","text":"rt . setGlobalAlpha ( alpha ); // rt.globalAlpha = alpha;","title":"Global alpha"},{"location":"rendertexture/#global-tint","text":"rt . setGlobalTint ( tint ); // rt.globalTint = tint;","title":"Global tint"},{"location":"rendertexture/#erase","text":"rt . erase ( gameObject , x , y ); gameObject : a game object, or an array of game objects","title":"Erase"},{"location":"rendertexture/#clear","text":"rt . clear ();","title":"Clear"},{"location":"rendertexture/#fill","text":"rt . fill ( rgb , alpha ); // rt.fill(rgb, alpha, x, y, width, height);","title":"Fill"},{"location":"rendertexture/#set-size","text":"rt . setSize ( width , height ); // rt.resize(width, height);","title":"Set size"},{"location":"rendertexture/#save-texture","text":"Stores a copy of this Render Texture in the Texture Manager using the given key. rt . saveTexture ( key ); Calling saveTexture again will not save another copy of the same texture, it will just rename the key of the existing copy.","title":"Save texture"},{"location":"rendertexture/#internal-camera","text":"Internal camera rt.camera Scroll (offset) rt . camera . setPosition ( x , y ); Zoom (scale) rt . camera . setZoom ( zoom ); Rotate rt . camera . setAngle ( angle ); // angle in degrees","title":"Internal camera"},{"location":"rendertexture/#snapshot","text":"Takes a snapshot of the whole of this Render Texture. rt . snapshot ( callback ); // rt.snapshot(callback, type, encoderOptions); Takes a snapshot of the given area of this Render Texture. rt . snapshotArea ( x , y , width , height , callback ); // rt.snapshotArea(x, y, width, height, callback, type, encoderOptions); Takes a snapshot of the given pixel from this Render Texture. rt . snapshotPixel ( x , y , callback );","title":"Snapshot"},{"location":"rendertexture/#other-properties","text":"See game object","title":"Other properties"},{"location":"rendertexture/#create-mask","text":"var mask = rt . createBitmapMask (); See mask","title":"Create mask"},{"location":"restorabledata/","text":"Introduction \u00b6 Restorable data manager, extends from built-in data manager . Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRData from './plugins/restorabledata.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RDataPlugin from './plugins/restorabledata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRData' , plugin : RDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var data = scene . plugins . get ( 'rexRData' ). add ( parent ); // var data = scene.plugins.get('rexRData').add(parent, eventEmitter); parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter . Get/set/remove value \u00b6 See built-in data manager . Commit \u00b6 Commit current data status into repository, and increase current version number. data . commit (); or data . commit ( alias ); alias : A version alias string. Restore \u00b6 Restore data status to a specific version. data . restore ( version ); or data . version = version ; version : Version number or version alias string. Rebuild data status from version 0 to a specific version. data . restore ( version , true ); version : Version number or version alias string. Reverse data status to last version. data . restore (); Version \u00b6 Get current version alias string var version = data . versionAlias ; Get all version alias strings var aliases = data . versionAliases ; Get current version number var version = data . version ; Get last version number var version = data . lastVersion ; Version starts from 0 which has no data. Each data.commit() will increase this version number. Save/load status \u00b6 Get current status via JSON string var s = JSON . stringify ( data ); Load status via JSON string data . resetFromJSON ( JSON . parse ( s ));","title":"Restorable data"},{"location":"restorabledata/#introduction","text":"Restorable data manager, extends from built-in data manager . Author: Rex Member of scene","title":"Introduction"},{"location":"restorabledata/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"restorabledata/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"restorabledata/#import-class","text":"import rexRData from './plugins/restorabledata.js' ;","title":"Import class"},{"location":"restorabledata/#install-global-plugin","text":"Install plugin in configuration of game import RDataPlugin from './plugins/restorabledata-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRData' , plugin : RDataPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"restorabledata/#create-instance","text":"var data = scene . plugins . get ( 'rexRData' ). add ( parent ); // var data = scene.plugins.get('rexRData').add(parent, eventEmitter); parent : The object (a scene, or a game object) that this DataManager belongs to. eventEmitter : The DataManager's event emitter .","title":"Create instance"},{"location":"restorabledata/#getsetremove-value","text":"See built-in data manager .","title":"Get/set/remove value"},{"location":"restorabledata/#commit","text":"Commit current data status into repository, and increase current version number. data . commit (); or data . commit ( alias ); alias : A version alias string.","title":"Commit"},{"location":"restorabledata/#restore","text":"Restore data status to a specific version. data . restore ( version ); or data . version = version ; version : Version number or version alias string. Rebuild data status from version 0 to a specific version. data . restore ( version , true ); version : Version number or version alias string. Reverse data status to last version. data . restore ();","title":"Restore"},{"location":"restorabledata/#version","text":"Get current version alias string var version = data . versionAlias ; Get all version alias strings var aliases = data . versionAliases ; Get current version number var version = data . version ; Get last version number var version = data . lastVersion ; Version starts from 0 which has no data. Each data.commit() will increase this version number.","title":"Version"},{"location":"restorabledata/#saveload-status","text":"Get current status via JSON string var s = JSON . stringify ( data ); Load status via JSON string data . resetFromJSON ( JSON . parse ( s ));","title":"Save/load status"},{"location":"reverse-string/","text":"Introduction \u00b6 Reverses string, built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Utils . String . ReverseString ( str );","title":"Reverse"},{"location":"reverse-string/#introduction","text":"Reverses string, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"reverse-string/#usage","text":"var result = Phaser . Utils . String . ReverseString ( str );","title":"Usage"},{"location":"rexvideo/","text":"Introduction \u00b6 Play video on DOM , or on canvas. Author: Rex DOM Game object , or Canvas Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexVideoPlugin' , plugin : VideoPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); To play video on DOM Set parent to divId Set dom.createContainer to true . Add video object \u00b6 Video on DOM var video = scene . add . rexVideo ( x , y , width , height , config ); // var video = scene.add.rexVideo(x, y, config); // var video = scene.add.rexVideo(config); Video on canvas var video = scene . add . rexVideoCanvas ( x , y , width , height , config ); // var video = scene.add.rexVideoCanvas(x, y, config); // var video = scene.add.rexVideoCanvas(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , // Element properties src : url , // src: { // webm: webmFileURL, // ogg: oggFileURL, // mp4: mp4FileURL, // h264: h264FileURL, // } id : undefined , autoPlay : true , controls : false , loop : false , muted : false , playsInline : true , crossOrigin : 'anonymous' , playbackTimeChangeEventEnable : true , } x , y : Position width , height : Size of element Element properties src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. id : id element property. autoPlay : autoplay element property. controls : controls element property. loop : loop element property. muted : muted element property. playsInline : playsInline element property. crossOrigin : crossOrigin element property. playbackTimeChangeEventEnable : Set false to disable playbacktimechange event. Different between rexVideo and rexVideoCanvas \u00b6 rexVideo plays video on DOM. DOM object always above game canvas. Won't be affected by webgl shader. Right clicks to pop up a menu. rexVideoCanvas plays video on canvas. Can be placed between game objects via depth setting. Can be affected by webgl shader. Custom class \u00b6 Define class class MyVideo extends Video { // or VideoCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta) // } // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var video = new MyVideo ( scene , x , y , width , height , config ); Load \u00b6 video . load ( src ); src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. Play \u00b6 video . play (); Pause \u00b6 video . pause (); Playback time \u00b6 Get var playbackTime = video . playbackTime ; // time in seconds var t = video . t ; // t: 0~1 Set video . setPlaybackTime ( time ); // time in seconds // video.playbackTime = time; video . setT ( t ); // t: 0~1 // video.t = t; Duration \u00b6 var duration = video . duration ; // time in seconds Volume \u00b6 Get var volume = video . volume ; // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 // video.volume = volume; Mute \u00b6 Get var muted = video . muted ; // muted: true/false Set video . setMute ( muted ); // muted: true/false // video.muted = muted; Loop \u00b6 Get var loop = video . loop ; // loop: true/false Set video . setLoop ( loop ); // loop: true/false // video.loop = loop; Resize \u00b6 video . resize ( width , height ); Status \u00b6 Is playing var isPlaying = video . isPlaying ; Is paused var isPaused = video . isPaused ; Has end var hasEnded = video . hasEnded ; Ready state var readyState = video . readyState ; 0 = HAVE_NOTHING - no information whether or not the audio/video is ready 1 = HAVE_METADATA - metadata for the audio/video is ready 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available 4 = HAVE_ENOUGH_DATA - enough data available to start playing Events \u00b6 Load start video . on ( 'loadstart' , function ( video ){ }, scope ); Can play video . on ( 'canplay' , function ( video ){ }, scope ); Can play through video . on ( 'canplaythrough' , function ( video ){ }, scope ); Playing video . on ( 'playing' , function ( video ){ }, scope ); Pause video . on ( 'pause' , function ( video ){ }, scope ); Stalled video . on ( 'stalled' , function ( video ){ }, scope ); Ended video . on ( 'ended' , function ( video ){ }, scope ); Error video . on ( 'error' , function ( video ){ }, scope ); Playback time changed video . on ( 'playbacktimechange' , function ( video ){ }, scope ); Set playbackTimeChangeEventEnable to true to enable this event.","title":"Rexvideo"},{"location":"rexvideo/#introduction","text":"Play video on DOM , or on canvas. Author: Rex DOM Game object , or Canvas Game object","title":"Introduction"},{"location":"rexvideo/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"rexvideo/#usage","text":"Sample code","title":"Usage"},{"location":"rexvideo/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexVideoPlugin' , plugin : VideoPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); To play video on DOM Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"rexvideo/#add-video-object","text":"Video on DOM var video = scene . add . rexVideo ( x , y , width , height , config ); // var video = scene.add.rexVideo(x, y, config); // var video = scene.add.rexVideo(config); Video on canvas var video = scene . add . rexVideoCanvas ( x , y , width , height , config ); // var video = scene.add.rexVideoCanvas(x, y, config); // var video = scene.add.rexVideoCanvas(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , // Element properties src : url , // src: { // webm: webmFileURL, // ogg: oggFileURL, // mp4: mp4FileURL, // h264: h264FileURL, // } id : undefined , autoPlay : true , controls : false , loop : false , muted : false , playsInline : true , crossOrigin : 'anonymous' , playbackTimeChangeEventEnable : true , } x , y : Position width , height : Size of element Element properties src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format. id : id element property. autoPlay : autoplay element property. controls : controls element property. loop : loop element property. muted : muted element property. playsInline : playsInline element property. crossOrigin : crossOrigin element property. playbackTimeChangeEventEnable : Set false to disable playbacktimechange event.","title":"Add video object"},{"location":"rexvideo/#different-between-rexvideo-and-rexvideocanvas","text":"rexVideo plays video on DOM. DOM object always above game canvas. Won't be affected by webgl shader. Right clicks to pop up a menu. rexVideoCanvas plays video on canvas. Can be placed between game objects via depth setting. Can be affected by webgl shader.","title":"Different between rexVideo and rexVideoCanvas"},{"location":"rexvideo/#custom-class","text":"Define class class MyVideo extends Video { // or VideoCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // if (super.preUpdate) { // super.preUpdate(time, delta) // } // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var video = new MyVideo ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"rexvideo/#load","text":"video . load ( src ); src : Specifies the URL of the video file. A string : url of the video file. A plain object : { videoType: fileURL } Get webmFileURL if browser supports webm video format. Get oggFileURL if browser supports ogg video format. Get mp4FileURL if browser supports mp4 video format. Get h264FileURL if browser supports h264 video format.","title":"Load"},{"location":"rexvideo/#play","text":"video . play ();","title":"Play"},{"location":"rexvideo/#pause","text":"video . pause ();","title":"Pause"},{"location":"rexvideo/#playback-time","text":"Get var playbackTime = video . playbackTime ; // time in seconds var t = video . t ; // t: 0~1 Set video . setPlaybackTime ( time ); // time in seconds // video.playbackTime = time; video . setT ( t ); // t: 0~1 // video.t = t;","title":"Playback time"},{"location":"rexvideo/#duration","text":"var duration = video . duration ; // time in seconds","title":"Duration"},{"location":"rexvideo/#volume","text":"Get var volume = video . volume ; // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 // video.volume = volume;","title":"Volume"},{"location":"rexvideo/#mute","text":"Get var muted = video . muted ; // muted: true/false Set video . setMute ( muted ); // muted: true/false // video.muted = muted;","title":"Mute"},{"location":"rexvideo/#loop","text":"Get var loop = video . loop ; // loop: true/false Set video . setLoop ( loop ); // loop: true/false // video.loop = loop;","title":"Loop"},{"location":"rexvideo/#resize","text":"video . resize ( width , height );","title":"Resize"},{"location":"rexvideo/#status","text":"Is playing var isPlaying = video . isPlaying ; Is paused var isPaused = video . isPaused ; Has end var hasEnded = video . hasEnded ; Ready state var readyState = video . readyState ; 0 = HAVE_NOTHING - no information whether or not the audio/video is ready 1 = HAVE_METADATA - metadata for the audio/video is ready 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available 4 = HAVE_ENOUGH_DATA - enough data available to start playing","title":"Status"},{"location":"rexvideo/#events","text":"Load start video . on ( 'loadstart' , function ( video ){ }, scope ); Can play video . on ( 'canplay' , function ( video ){ }, scope ); Can play through video . on ( 'canplaythrough' , function ( video ){ }, scope ); Playing video . on ( 'playing' , function ( video ){ }, scope ); Pause video . on ( 'pause' , function ( video ){ }, scope ); Stalled video . on ( 'stalled' , function ( video ){ }, scope ); Ended video . on ( 'ended' , function ( video ){ }, scope ); Error video . on ( 'error' , function ( video ){ }, scope ); Playback time changed video . on ( 'playbacktimechange' , function ( video ){ }, scope ); Set playbackTimeChangeEventEnable to true to enable this event.","title":"Events"},{"location":"rotateto/","text":"Introduction \u00b6 Rotate game object towards target position with a steady speed. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexRotateTo from './plugins/rotateto.js' ; Install global plugin \u00b6 Install plugin in configuration of game import RotateToPlugin from './plugins/rotateto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRotateTo' , plugin : RotateToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var rotateTo = scene . plugins . get ( 'rexRotateTo' ). add ( gameObject , { // speed: 180 }); speed : Turn speed, degrees in second Start moving \u00b6 Rotate game object towards position \u00b6 Shortest angle rotateTo . rotateTowardsPosition ( x , y ); x , y : Target position Clockwise/counter-clockwise rotateTo . rotateTowardsPosition ( x , y , dir ); dir : 0 : Shortest angle 1 , or 'cw' : Clockwise 2 , or 'ccw' : Counter-clockwise Rotate game object to angle \u00b6 Shortest angle rotateTo . rotateTo ( angle ); angle : Target angle in degrees Clockwise/counter-clockwise rotateTo . rotateTo ( angle , dir ); // rotateTo.rotateTo(angle, dir, speed); dir : 0 : Shortest angle 1 , or cw : Clockwise 2 , or ccw : Counter-clockwise Enable \u00b6 Enable (default) rotateTo . setEnable (); or rotateTo . enable = true ; Disable rotateTo . setEnable ( false ); or rotateTo . enable = false ; Pause, Resume, stop rotating \u00b6 rotateTo . pause (); rotateTo . resume (); rotateTo . stop (); Set speed \u00b6 rotateTo . setSpeed ( speed ); // rotateTo.speed = speed; speed : Turn speed, degrees in second Events \u00b6 On reached target rotateTo . on ( 'complete' , function ( gameObject , rotateTo ){}); Status \u00b6 Is moving var isRunning = rotateTo . isRunning ;","title":"Rotate to"},{"location":"rotateto/#introduction","text":"Rotate game object towards target position with a steady speed. Author: Rex Behavior of game object","title":"Introduction"},{"location":"rotateto/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"rotateto/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"rotateto/#import-class","text":"import rexRotateTo from './plugins/rotateto.js' ;","title":"Import class"},{"location":"rotateto/#install-global-plugin","text":"Install plugin in configuration of game import RotateToPlugin from './plugins/rotateto-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexRotateTo' , plugin : RotateToPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"rotateto/#create-instance","text":"var rotateTo = scene . plugins . get ( 'rexRotateTo' ). add ( gameObject , { // speed: 180 }); speed : Turn speed, degrees in second","title":"Create instance"},{"location":"rotateto/#start-moving","text":"","title":"Start moving"},{"location":"rotateto/#rotate-game-object-towards-position","text":"Shortest angle rotateTo . rotateTowardsPosition ( x , y ); x , y : Target position Clockwise/counter-clockwise rotateTo . rotateTowardsPosition ( x , y , dir ); dir : 0 : Shortest angle 1 , or 'cw' : Clockwise 2 , or 'ccw' : Counter-clockwise","title":"Rotate game object towards position"},{"location":"rotateto/#rotate-game-object-to-angle","text":"Shortest angle rotateTo . rotateTo ( angle ); angle : Target angle in degrees Clockwise/counter-clockwise rotateTo . rotateTo ( angle , dir ); // rotateTo.rotateTo(angle, dir, speed); dir : 0 : Shortest angle 1 , or cw : Clockwise 2 , or ccw : Counter-clockwise","title":"Rotate game object to angle"},{"location":"rotateto/#enable","text":"Enable (default) rotateTo . setEnable (); or rotateTo . enable = true ; Disable rotateTo . setEnable ( false ); or rotateTo . enable = false ;","title":"Enable"},{"location":"rotateto/#pause-resume-stop-rotating","text":"rotateTo . pause (); rotateTo . resume (); rotateTo . stop ();","title":"Pause, Resume, stop rotating"},{"location":"rotateto/#set-speed","text":"rotateTo . setSpeed ( speed ); // rotateTo.speed = speed; speed : Turn speed, degrees in second","title":"Set speed"},{"location":"rotateto/#events","text":"On reached target rotateTo . on ( 'complete' , function ( gameObject , rotateTo ){});","title":"Events"},{"location":"rotateto/#status","text":"Is moving var isRunning = rotateTo . isRunning ;","title":"Status"},{"location":"runcommands/","text":"Introduction \u00b6 Run commands in array. Author: Rex Method only Source code \u00b6 Link Usage \u00b6 Sample code Run commands \u00b6 runCommands ( commands , scope ); Format of command : [ fnName , param0 , param1 , ...] or [ callback , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] Run command : scope [ fnName ]. call ( scope , param0 , param1 ...) or callback . call ( scope , param0 , param1 ...)","title":"Run commands"},{"location":"runcommands/#introduction","text":"Run commands in array. Author: Rex Method only","title":"Introduction"},{"location":"runcommands/#source-code","text":"Link","title":"Source code"},{"location":"runcommands/#usage","text":"Sample code","title":"Usage"},{"location":"runcommands/#run-commands","text":"runCommands ( commands , scope ); Format of command : [ fnName , param0 , param1 , ...] or [ callback , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] Run command : scope [ fnName ]. call ( scope , param0 , param1 ...) or callback . call ( scope , param0 , param1 ...)","title":"Run commands"},{"location":"scaledowndestroy/","text":"Introduction \u00b6 Scale down (i.e. ease scaleX, scaleY to 0 ) game object then destroy it. Author: Rex Method only Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Scale down \u00b6 Scale down width and height var scale = scaleDownDestroy ( gameObject , duration ); // var scale = scaleDownDestroy(gameObject, duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only var scale = scaleDownDestroy ( gameObject , duration , 'x' ); // var scale = scaleDownDestroy(gameObject, duration, 'x', ease); Scale down height only var scale = scaleDownDestroy ( gameObject , duration , 'y' ); // var scale = scaleDownDestroy(gameObject, duration, 'y', ease); Events \u00b6 See Events of tween task Scale completes or is stopped. scale . on ( 'complete' , function ( scale , gameObject ){ }, scope );","title":"Scale down destroy"},{"location":"scaledowndestroy/#introduction","text":"Scale down (i.e. ease scaleX, scaleY to 0 ) game object then destroy it. Author: Rex Method only","title":"Introduction"},{"location":"scaledowndestroy/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"scaledowndestroy/#usage","text":"Sample code","title":"Usage"},{"location":"scaledowndestroy/#scale-down","text":"Scale down width and height var scale = scaleDownDestroy ( gameObject , duration ); // var scale = scaleDownDestroy(gameObject, duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only var scale = scaleDownDestroy ( gameObject , duration , 'x' ); // var scale = scaleDownDestroy(gameObject, duration, 'x', ease); Scale down height only var scale = scaleDownDestroy ( gameObject , duration , 'y' ); // var scale = scaleDownDestroy(gameObject, duration, 'y', ease);","title":"Scale down"},{"location":"scaledowndestroy/#events","text":"See Events of tween task Scale completes or is stopped. scale . on ( 'complete' , function ( scale , gameObject ){ }, scope );","title":"Events"},{"location":"scalemanager/","text":"Introduction \u00b6 Scale game window, built-in method of phaser. Author: Richard Davey Usage \u00b6 Setup \u00b6 Setup scale mode in game configuration . var config = { // ... parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, autoRound : false // ... }; var game = new Phaser . Game ( config ); scale.mode : Phaser.Scale.NONE : No scaling happens at all. Phaser.Scale.FIT : 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. Phaser.Scale.ENVELOP : 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. Phaser.Scale.WIDTH_CONTROLS_HEIGHT : The height is automatically adjusted based on the width. Phaser.Scale.HEIGHT_CONTROLS_WIDTH : The width is automatically adjusted based on the height. Phaser.Scale.RESIZE : The Canvas is resized to fit all available parent space, regardless of aspect ratio. scale.autoCenter : Phaser.Scale.NO_CENTER : The game canvas is not centered within the parent by Phaser. Phaser.Scale.CENTER_BOTH : The game canvas is centered both horizontally and vertically within the parent. Phaser.Scale.CENTER_HORIZONTALLY : The game canvas is centered horizontally within the parent. Phaser.Scale.CENTER_VERTICALLY : The game canvas is centered both vertically within the parent. Resize canvas element \u00b6 scene . scale . resize ( width , height ); Modify the size of the Phaser canvas element directly. You should only use this if you are using the NO_SCALE scale mode, Set game size \u00b6 scene . scale . setGameSize ( width , height ); 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. FIT . If you're using NO_SCALE and wish to change the game and canvas size directly, then please use the resize method instead. Events \u00b6 scene . scale . on ( 'resize' , function ( gameSize , baseSize , displaySize , resolution , previousWidth , previousHeight ) {}); gameSize gameSize.width , gameSize.height baseSize baseSize.width , baseSize.height displaySize displaySize.width , displaySize.height","title":"Scale manager"},{"location":"scalemanager/#introduction","text":"Scale game window, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"scalemanager/#usage","text":"","title":"Usage"},{"location":"scalemanager/#setup","text":"Setup scale mode in game configuration . var config = { // ... parent : null , width : 1024 , height : 768 , scale : { mode : Phaser . Scale . FIT , autoCenter : Phaser . Scale . CENTER_BOTH }, autoRound : false // ... }; var game = new Phaser . Game ( config ); scale.mode : Phaser.Scale.NONE : No scaling happens at all. Phaser.Scale.FIT : 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. Phaser.Scale.ENVELOP : 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. Phaser.Scale.WIDTH_CONTROLS_HEIGHT : The height is automatically adjusted based on the width. Phaser.Scale.HEIGHT_CONTROLS_WIDTH : The width is automatically adjusted based on the height. Phaser.Scale.RESIZE : The Canvas is resized to fit all available parent space, regardless of aspect ratio. scale.autoCenter : Phaser.Scale.NO_CENTER : The game canvas is not centered within the parent by Phaser. Phaser.Scale.CENTER_BOTH : The game canvas is centered both horizontally and vertically within the parent. Phaser.Scale.CENTER_HORIZONTALLY : The game canvas is centered horizontally within the parent. Phaser.Scale.CENTER_VERTICALLY : The game canvas is centered both vertically within the parent.","title":"Setup"},{"location":"scalemanager/#resize-canvas-element","text":"scene . scale . resize ( width , height ); Modify the size of the Phaser canvas element directly. You should only use this if you are using the NO_SCALE scale mode,","title":"Resize canvas element"},{"location":"scalemanager/#set-game-size","text":"scene . scale . setGameSize ( width , height ); 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. FIT . If you're using NO_SCALE and wish to change the game and canvas size directly, then please use the resize method instead.","title":"Set game size"},{"location":"scalemanager/#events","text":"scene . scale . on ( 'resize' , function ( gameSize , baseSize , displaySize , resolution , previousWidth , previousHeight ) {}); gameSize gameSize.width , gameSize.height baseSize baseSize.width , baseSize.height displaySize displaySize.width , displaySize.height","title":"Events"},{"location":"scene/","text":"Define a scene \u00b6 Configuration of scene \u00b6 var config = { key : '' , // active: false, // visible: true, // pack: false, // cameras: null, // map: {}, // physics: {}, // loader: {}, // plugins: false, // input: {} }; key : The unique key of this Scene. Must be unique within the entire Game instance. active : Does the Scene start as active or not? An active Scene updates each step. visible : Does the Scene start as visible or not? A visible Scene renders each step. pack : An optional Loader Packfile to be loaded before the Scene begins. cameras : An optional Camera configuration object . { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } map : Overwrites the default injection map for a scene. physics : The physics configuration object for the Scene. { default : 'arcade' , // 'impact', or 'matter' arcade : {...}, matter : {...} } arcade : Arcade Physics configuration . matter : Matter Physics configuration . loader : The loader configuration object for the Scene. { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 } plugins : The plugin configuration object for the Scene. { global : [ //{key, plugin, start} ], scene : [ // ... ] } input : The input configuration object for the Scene. { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , } ES6 class \u00b6 class MyScene extends Phaser . Scene { constructor ( config ) { super ( config ); } init ( data ) {} preload () {} create ( data ) {} update ( time , delta ) {} } data : Parameters passed from starting scene Class \u00b6 var MyScene = new Phaser . Class ({ Extends : Phaser . Scene , initialize : function MyScene ( config ) { Phaser . Scene . call ( this , config ) }, init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }); data : Parameters passed from starting scene var MyGame = {}; MyGame . Boot = function () { }; MyGame . Boot . prototype . constructor = MyGame . Boot ; MyGame . Boot . prototype = { init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }; data : Parameters passed from starting scene Override \u00b6 var demo = new Phaser . Scene ( 'Demo' ); demo . init = function ( data ){}; demo . preload = function (){}; demo . create = function ( data ){}; demo . update = function ( time , delta ){}; data : Parameters passed from starting scene Flow chart \u00b6 graph TB subgraph Stop SceneEventDestroy>\"scene.events: destroy\"] Stop[\"Shutdown<br>Free game objects\"] end subgraph Update SceneUpdate[\"Run: Every tick<br>scene.update()\"] SceneEventPauseSleep>\"scene.events: pause<br>scene.events: sleep\"] Pause[\"Pause: render but no update<br>Sleep: no update, no render\"] SceneEventResumeWake>\"scene.events: resume<br>scene.events: wake\"] end subgraph Create SceneEventStart>\"scene.events: start\"] SceneInit[\"scene.init()\"] ScenePreLoad[\"Load assets<br>scene.preload()\"] SceneCreate[\"Create game objects<br>scene.create()\"] end Start((Start)) --> SceneEventStart SceneEventStart --> SceneInit SceneInit --> ScenePreLoad ScenePreLoad --> SceneCreate SceneCreate --> SceneUpdate SceneUpdate --> SceneUpdate SceneUpdate --> |\"scene.scene.pause()<br>scene.scene.sleep()\"|SceneEventPauseSleep SceneEventPauseSleep --> Pause Pause --> |\"scene.scene.resume()<br>scene.scene.wake()\"|SceneEventResumeWake SceneEventResumeWake --> SceneUpdate SceneUpdate --> |\"scene.scene.stop()\"|Stop Pause --> |\"scene.scene.stop()\"|SceneEventDestroy SceneEventDestroy --> Stop Stop --> |\"scene.scene.start()<br>scene.scene.launch()<br>scene.scene.restart()\"|SceneEventStart Run : Update and render Pause : Render but no update Sleep : No update, no render Stop : Shutdown See also Pause/resume Stop Main loop Members \u00b6 plugins load : Loader events : Local events input : Touch , keyboard tweens : Tween tasks time : Timer cameras : Camera scene : scenePlugin anims physics : ArcadePhysics impact : ImpactPhysics matter :\u3000MatterPhysics registry : Global data manager data : Local data manager sys game cache sound textures add make children : displayList lights Preserve word in a scene. Events \u00b6 Start (Before scene.init() ) scene . events . on ( 'start' , function (){}); Every tick Preupdate scene . events . on ( 'preupdate' , function ( time , delta ){}); Update scene . events . on ( 'update' , function ( time , delta ){}); Postupdate scene . events . on ( 'postupdate' , function ( time , delta ){}); Render scene . events . on ( 'render' , function (){}); State changed Pause (from scene.scene.pause() ) scene . events . on ( 'pause' , function (){}); Resume (from scene.scene.resume() ) scene . events . on ( 'resume' , function (){}); Sleep (from scene.scene.sleep() ) scene . events . on ( 'sleep' , function (){}); Wake (from scene.scene.wake() ) scene . events . on ( 'wake' , function (){}); Stop/shutdown (from scene.scene.stop() ) scene . events . on ( 'shutdown' , function (){}); Free-up any resources that may be in use by this scene Destroy (from scene.scene.remove() ) scene . events . on ( 'destroy' , function (){}); Resize scene . events . on ( 'resize' , function (){}); Boot scene . events . on ( 'boot' , function (){});","title":"Scene"},{"location":"scene/#define-a-scene","text":"","title":"Define a scene"},{"location":"scene/#configuration-of-scene","text":"var config = { key : '' , // active: false, // visible: true, // pack: false, // cameras: null, // map: {}, // physics: {}, // loader: {}, // plugins: false, // input: {} }; key : The unique key of this Scene. Must be unique within the entire Game instance. active : Does the Scene start as active or not? An active Scene updates each step. visible : Does the Scene start as visible or not? A visible Scene renders each step. pack : An optional Loader Packfile to be loaded before the Scene begins. cameras : An optional Camera configuration object . { name : '' , x : 0 , y : 0 , width : scene . sys . scale . width , height : scene . sys . scale . height , zoom : 1 , rotation : 0 , scrollX : 0 , scrollY : 0 , roundPixels : false , visible : true , backgroundColor : false , bounds : null , // {x, y, width, height} } map : Overwrites the default injection map for a scene. physics : The physics configuration object for the Scene. { default : 'arcade' , // 'impact', or 'matter' arcade : {...}, matter : {...} } arcade : Arcade Physics configuration . matter : Matter Physics configuration . loader : The loader configuration object for the Scene. { baseURL : '' , path : '' , enableParallel : true , maxParallelDownloads : 4 , crossOrigin : undefined , responseType : '' , async : true , user : '' , password : '' , timeout : 0 } plugins : The plugin configuration object for the Scene. { global : [ //{key, plugin, start} ], scene : [ // ... ] } input : The input configuration object for the Scene. { keyboard : { target : window }, mouse : { target : null , capture : true }, activePointers : 1 , touch : { target : null , capture : true }, smoothFactor : 0 , gamepad : false , windowEvents : true , }","title":"Configuration of scene"},{"location":"scene/#es6-class","text":"class MyScene extends Phaser . Scene { constructor ( config ) { super ( config ); } init ( data ) {} preload () {} create ( data ) {} update ( time , delta ) {} } data : Parameters passed from starting scene","title":"ES6 class"},{"location":"scene/#class","text":"var MyScene = new Phaser . Class ({ Extends : Phaser . Scene , initialize : function MyScene ( config ) { Phaser . Scene . call ( this , config ) }, init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }); data : Parameters passed from starting scene var MyGame = {}; MyGame . Boot = function () { }; MyGame . Boot . prototype . constructor = MyGame . Boot ; MyGame . Boot . prototype = { init : function ( data ) {}, preload : function () {}, create : function ( data ) {}, update : function ( time , delta ) {} }; data : Parameters passed from starting scene","title":"Class"},{"location":"scene/#override","text":"var demo = new Phaser . Scene ( 'Demo' ); demo . init = function ( data ){}; demo . preload = function (){}; demo . create = function ( data ){}; demo . update = function ( time , delta ){}; data : Parameters passed from starting scene","title":"Override"},{"location":"scene/#flow-chart","text":"graph TB subgraph Stop SceneEventDestroy>\"scene.events: destroy\"] Stop[\"Shutdown<br>Free game objects\"] end subgraph Update SceneUpdate[\"Run: Every tick<br>scene.update()\"] SceneEventPauseSleep>\"scene.events: pause<br>scene.events: sleep\"] Pause[\"Pause: render but no update<br>Sleep: no update, no render\"] SceneEventResumeWake>\"scene.events: resume<br>scene.events: wake\"] end subgraph Create SceneEventStart>\"scene.events: start\"] SceneInit[\"scene.init()\"] ScenePreLoad[\"Load assets<br>scene.preload()\"] SceneCreate[\"Create game objects<br>scene.create()\"] end Start((Start)) --> SceneEventStart SceneEventStart --> SceneInit SceneInit --> ScenePreLoad ScenePreLoad --> SceneCreate SceneCreate --> SceneUpdate SceneUpdate --> SceneUpdate SceneUpdate --> |\"scene.scene.pause()<br>scene.scene.sleep()\"|SceneEventPauseSleep SceneEventPauseSleep --> Pause Pause --> |\"scene.scene.resume()<br>scene.scene.wake()\"|SceneEventResumeWake SceneEventResumeWake --> SceneUpdate SceneUpdate --> |\"scene.scene.stop()\"|Stop Pause --> |\"scene.scene.stop()\"|SceneEventDestroy SceneEventDestroy --> Stop Stop --> |\"scene.scene.start()<br>scene.scene.launch()<br>scene.scene.restart()\"|SceneEventStart Run : Update and render Pause : Render but no update Sleep : No update, no render Stop : Shutdown See also Pause/resume Stop Main loop","title":"Flow chart"},{"location":"scene/#members","text":"plugins load : Loader events : Local events input : Touch , keyboard tweens : Tween tasks time : Timer cameras : Camera scene : scenePlugin anims physics : ArcadePhysics impact : ImpactPhysics matter :\u3000MatterPhysics registry : Global data manager data : Local data manager sys game cache sound textures add make children : displayList lights Preserve word in a scene.","title":"Members"},{"location":"scene/#events","text":"Start (Before scene.init() ) scene . events . on ( 'start' , function (){}); Every tick Preupdate scene . events . on ( 'preupdate' , function ( time , delta ){}); Update scene . events . on ( 'update' , function ( time , delta ){}); Postupdate scene . events . on ( 'postupdate' , function ( time , delta ){}); Render scene . events . on ( 'render' , function (){}); State changed Pause (from scene.scene.pause() ) scene . events . on ( 'pause' , function (){}); Resume (from scene.scene.resume() ) scene . events . on ( 'resume' , function (){}); Sleep (from scene.scene.sleep() ) scene . events . on ( 'sleep' , function (){}); Wake (from scene.scene.wake() ) scene . events . on ( 'wake' , function (){}); Stop/shutdown (from scene.scene.stop() ) scene . events . on ( 'shutdown' , function (){}); Free-up any resources that may be in use by this scene Destroy (from scene.scene.remove() ) scene . events . on ( 'destroy' , function (){}); Resize scene . events . on ( 'resize' , function (){}); Boot scene . events . on ( 'boot' , function (){});","title":"Events"},{"location":"scenemanager/","text":"Scene manager plugin: In each scene instance: scene.scene Add new scene \u00b6 var newScene = scene . scene . add ( key , sceneConfig , autoStart , data ); // var newScene = game.scene.add(key, sceneConfig, autoStart, data); key : A unique key used to reference the Scene. sceneConfig : The config for the Scene , or a scene class. autoStart : Set true to start scene immediately after added. data : Optional data object. This will be set as Scene.settings.data and passed to Scene.init . Load scene from external files \u00b6 load script scene . load . script ( key , url ); add new scene scene . scene . add ( key , sceneConfig , autoStart ); // game.scene.add(key, sceneConfig, autoStart); Destroy scene \u00b6 scene . scene . remove ( key ); Fires scene.events destroy Start scene \u00b6 Launch the given Scene and run it in parallel with this one scene . scene . launch ( key , data ); Shutdown this Scene and run the given one scene . scene . start ( key , data ); Restarts this Scene scene . scene . restart ( data ); Pause/Resume scene \u00b6 Pause : stops the update step but still renders scene . scene . pause ( key ); // scene.scene.pause(); // pause myself Fires scene.events pause Resume : starts the update loop again scene . scene . resume ( key ); // scene.scene.resume(); // resume myself Fires scene.events resume Sleep : no update, no render but doesn't shutdown scene . scene . sleep ( key ); // scene.scene.sleep(); // sleep myself Fires scene.events sleep Wake-up: starts update and render scene . scene . wake ( key ); // scene.scene.wake(); // wake-up myself Fires scene.events wake Makes this Scene sleep then starts the Scene given scene . scene . switch ( key ); Run scene \u00b6 Runs the given Scene, but does not change the state of this Scene. 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. scene . scene . run ( key , data ); Stop scene \u00b6 Shutdown the Scene, clearing display list, timers, etc. scene . scene . stop ( key ); // scene.scene.stop(); // stop myself Set visible \u00b6 scene . scene . setVisible ( value , key ); // value: true/false // scene.scene.setVisible(value); // set visible to myself Read status \u00b6 var isSleep = scene . scene . isSleeping ( key ); // var isSleep = scene.scene.isSleeping(); var isPaused = scene . scene . isPaused ( key ); // var isPaused = scene.scene.isPaused(); var isActive = scene . scene . isActive ( key ); // var isActive = scene.scene.isActive(); var isVisible = scene . scene . isVisible ( key ); // var isVisible = scene.scene.isVisible(); Update/isActive Render/isVisible Run Pause Sleep Pause/Sleep/Stop Pause: Pause update stage. Sleep: Pause update stage, and set scene invisible. Stop: Shoutdown, clearing display list, timers, etc. Get scene \u00b6 var scene = scene . scene . get ( key ); Order of scenes \u00b6 Swaps the position of two scenes in the Scenes list. scene . scene . swapPosition ( keyA , keyB ); // scene.scene.stop(keyA); scene . scene . moveAbove ( keyA , keyB ); // scene.scene.moveAbove(keyA); Scene B is directly above Scene A. scene . scene . moveBelow ( keyA , keyB ); // scene.scene.moveBelow(keyA); Scene B is directly below Scene A. scene . scene . moveUp ( keyA ); // scene.scene.moveBelow(); scene . scene . moveDown ( keyA ); // scene.scene.moveDown(); scene . scene . bringToTop ( keyA ); // scene.scene.bringToTop(); scene . scene . sendToBack ( keyA ); // scene.scene.sendToBack(); Transition \u00b6 scene . scene . transition ({ target : key , // data: null, // moveAbove: false, // moveBelow: false, duration : 1000 , // remove: false, // sleep: false, // allowInput: false, // onUpdate: null, // onUpdateScope: scene }) target : The Scene key to transition to. data : An object containing any data you wish to be passed to the target scenes init / create methods. moveAbove . moveBelow : Move the target Scene to be above/below this current scene before the transition starts. duration : Transition duration, in ms. remove : Set true to remove this scene. sleep : Set true to sleep this scene, set false to stop this scene. allowInput : Set true to enable input system of current scene and target scene. onUpdate , onUpdateScope : Transition callback in each tick. var callback = function ( progress ) { } progress : 0 ~ 1 Execution flow \u00b6 Invoke scene.scene.transition method. Current scene : Fire 'transitionout' event. fromScene . events . on ( 'transitionout' , function ( targetScene , duration ){ }); Run transition's onUpdate callback every tick. Current scene's update method is still running every tick. Target scene : Start target scene immediately. Fire target scene's 'transitionstart' event. (Register this event in create stage) targetScene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); When transition completed. Current scene : Remove or sleep current scene after transition completed. Target scene : Fire target scene's transitioncomplete event. targetScene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); Events \u00b6 boot scene . events . on ( 'transitioninit' , function ( fromScene , duration )){ }); start scene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); transition-out scene . events . on ( 'transitionout' , function ( targetScene ){ }); complete scene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); wake : wake-up target scene if it was previously asleep scene . events . on ( 'transitionwake' , function ( fromScene , duration ){ });","title":"Scene manager"},{"location":"scenemanager/#add-new-scene","text":"var newScene = scene . scene . add ( key , sceneConfig , autoStart , data ); // var newScene = game.scene.add(key, sceneConfig, autoStart, data); key : A unique key used to reference the Scene. sceneConfig : The config for the Scene , or a scene class. autoStart : Set true to start scene immediately after added. data : Optional data object. This will be set as Scene.settings.data and passed to Scene.init .","title":"Add new scene"},{"location":"scenemanager/#load-scene-from-external-files","text":"load script scene . load . script ( key , url ); add new scene scene . scene . add ( key , sceneConfig , autoStart ); // game.scene.add(key, sceneConfig, autoStart);","title":"Load scene from external files"},{"location":"scenemanager/#destroy-scene","text":"scene . scene . remove ( key ); Fires scene.events destroy","title":"Destroy scene"},{"location":"scenemanager/#start-scene","text":"Launch the given Scene and run it in parallel with this one scene . scene . launch ( key , data ); Shutdown this Scene and run the given one scene . scene . start ( key , data ); Restarts this Scene scene . scene . restart ( data );","title":"Start scene"},{"location":"scenemanager/#pauseresume-scene","text":"Pause : stops the update step but still renders scene . scene . pause ( key ); // scene.scene.pause(); // pause myself Fires scene.events pause Resume : starts the update loop again scene . scene . resume ( key ); // scene.scene.resume(); // resume myself Fires scene.events resume Sleep : no update, no render but doesn't shutdown scene . scene . sleep ( key ); // scene.scene.sleep(); // sleep myself Fires scene.events sleep Wake-up: starts update and render scene . scene . wake ( key ); // scene.scene.wake(); // wake-up myself Fires scene.events wake Makes this Scene sleep then starts the Scene given scene . scene . switch ( key );","title":"Pause/Resume scene"},{"location":"scenemanager/#run-scene","text":"Runs the given Scene, but does not change the state of this Scene. 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. scene . scene . run ( key , data );","title":"Run scene"},{"location":"scenemanager/#stop-scene","text":"Shutdown the Scene, clearing display list, timers, etc. scene . scene . stop ( key ); // scene.scene.stop(); // stop myself","title":"Stop scene"},{"location":"scenemanager/#set-visible","text":"scene . scene . setVisible ( value , key ); // value: true/false // scene.scene.setVisible(value); // set visible to myself","title":"Set visible"},{"location":"scenemanager/#read-status","text":"var isSleep = scene . scene . isSleeping ( key ); // var isSleep = scene.scene.isSleeping(); var isPaused = scene . scene . isPaused ( key ); // var isPaused = scene.scene.isPaused(); var isActive = scene . scene . isActive ( key ); // var isActive = scene.scene.isActive(); var isVisible = scene . scene . isVisible ( key ); // var isVisible = scene.scene.isVisible(); Update/isActive Render/isVisible Run Pause Sleep Pause/Sleep/Stop Pause: Pause update stage. Sleep: Pause update stage, and set scene invisible. Stop: Shoutdown, clearing display list, timers, etc.","title":"Read status"},{"location":"scenemanager/#get-scene","text":"var scene = scene . scene . get ( key );","title":"Get scene"},{"location":"scenemanager/#order-of-scenes","text":"Swaps the position of two scenes in the Scenes list. scene . scene . swapPosition ( keyA , keyB ); // scene.scene.stop(keyA); scene . scene . moveAbove ( keyA , keyB ); // scene.scene.moveAbove(keyA); Scene B is directly above Scene A. scene . scene . moveBelow ( keyA , keyB ); // scene.scene.moveBelow(keyA); Scene B is directly below Scene A. scene . scene . moveUp ( keyA ); // scene.scene.moveBelow(); scene . scene . moveDown ( keyA ); // scene.scene.moveDown(); scene . scene . bringToTop ( keyA ); // scene.scene.bringToTop(); scene . scene . sendToBack ( keyA ); // scene.scene.sendToBack();","title":"Order of scenes"},{"location":"scenemanager/#transition","text":"scene . scene . transition ({ target : key , // data: null, // moveAbove: false, // moveBelow: false, duration : 1000 , // remove: false, // sleep: false, // allowInput: false, // onUpdate: null, // onUpdateScope: scene }) target : The Scene key to transition to. data : An object containing any data you wish to be passed to the target scenes init / create methods. moveAbove . moveBelow : Move the target Scene to be above/below this current scene before the transition starts. duration : Transition duration, in ms. remove : Set true to remove this scene. sleep : Set true to sleep this scene, set false to stop this scene. allowInput : Set true to enable input system of current scene and target scene. onUpdate , onUpdateScope : Transition callback in each tick. var callback = function ( progress ) { } progress : 0 ~ 1","title":"Transition"},{"location":"scenemanager/#execution-flow","text":"Invoke scene.scene.transition method. Current scene : Fire 'transitionout' event. fromScene . events . on ( 'transitionout' , function ( targetScene , duration ){ }); Run transition's onUpdate callback every tick. Current scene's update method is still running every tick. Target scene : Start target scene immediately. Fire target scene's 'transitionstart' event. (Register this event in create stage) targetScene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); When transition completed. Current scene : Remove or sleep current scene after transition completed. Target scene : Fire target scene's transitioncomplete event. targetScene . events . on ( 'transitioncomplete' , function ( fromScene ){ });","title":"Execution flow"},{"location":"scenemanager/#events","text":"boot scene . events . on ( 'transitioninit' , function ( fromScene , duration )){ }); start scene . events . on ( 'transitionstart' , function ( fromScene , duration ){ }); transition-out scene . events . on ( 'transitionout' , function ( targetScene ){ }); complete scene . events . on ( 'transitioncomplete' , function ( fromScene ){ }); wake : wake-up target scene if it was previously asleep scene . events . on ( 'transitionwake' , function ( fromScene , duration ){ });","title":"Events"},{"location":"scroller/","text":"Introduction \u00b6 Drag content. Slow down when dragging released, pull back when out of bounds. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexScroller from './plugins/scroller.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ScrollerPlugin from './plugins/scroller-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexScroller' , plugin : ScrollerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var scroller = scene . plugins . get ( 'rexScroller' ). add ( gameObject , { bounds : [ bottomBound , topBound ], value : topBound , // threshold: 10, // slidingDeceleration: 5000, // backDeceleration: 2000, // enable: true, // orientation: 'vertical', // valuechangeCallback: null, // valuechangeCallbackScope: null, // overmaxCallback: null, // overmaxCallbackScope: null, // overminCallback: null, // overminCallbackScope: null, }); bounds : An array of 2 values [bound0, bound1] value : Initial value between bound0 and bound1 Map this value to position of content under event 'valuechange' threshold : Minimal movement to scroll. Set 0 to scroll immediately. slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. enable : Set true to get dragging events. orientation : 'vertical' , 'v' , 'y' , or 0 : dragging on vertical/y axis. 'horizontal' , 'h' , 'x' , or 1 : dragging on horizontal/x axis. valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event overminCallback , overmaxCallbackScope : Bind this callback to overmax event overminCallback , overminCallbackScope : Bind this callback to overmin event Set bounds \u00b6 this . setBounds ( bounds ); // bounds: [bound0, bound1] // this.setBounds(bound0, bound1); Set deceleration \u00b6 Deceleration of slow down when dragging released scroller . setSlidingDeceleration ( dec ); Disable scroller . setSlidingDeceleration ( false ); Deceleration of pull back when out of bounds scroller . setBackDeceleration ( dec ); Disable scroller . setBackDeceleration ( false ); Get value \u00b6 var value = scroller . value ; Set value \u00b6 scroller . value = newValue ; // scroller.setValue(newValue); Fires valuechange event if new value is not equal to current value. Events \u00b6 Value changed scroller . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); Set position of content under this event Value out of max/min bound scroller . on ( 'overmax' , function ( newValue , prevValue ){ /* ... */ }); scroller . on ( 'overmin' , function ( newValue , prevValue ){ /* ... */ }); Drag \u00b6 Drag enable \u00b6 scroller . setEnable (); // scroller.setEnable(false); // disable Is dragging \u00b6 var isDragging = scroller . isDragging ; State machine \u00b6 graph TB IDLE[\"Idle\"] --> |Drag| DRAG[\"Dragging<br>event 'valuechange'\"] DRAG --> |Release| OnRelease{\"Under bounds?\"} OnRelease --> |Yes| SLIDE[\"Sliding<br>Sliding-deceleration\"] SLIDE --> |Stop| IDLE SLIDE --> |Drag| DRAG OnRelease --> |No| BACK[\"Pull back to bounds<br>Back-deceleration\"] BACK --> |Stop| IDLE BACK --> |Drag| DRAG Get state var state = scroller . state ; 'IDLE' : No dragging, no sliding 'DRAG' : Dragging 'SLIDE' : Sliding when dragging released 'BACK' : Sliding back to bound when out of bound","title":"Scroller"},{"location":"scroller/#introduction","text":"Drag content. Slow down when dragging released, pull back when out of bounds. Author: Rex Behavior of game object","title":"Introduction"},{"location":"scroller/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"scroller/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"scroller/#import-class","text":"import rexScroller from './plugins/scroller.js' ;","title":"Import class"},{"location":"scroller/#install-global-plugin","text":"Install plugin in configuration of game import ScrollerPlugin from './plugins/scroller-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexScroller' , plugin : ScrollerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"scroller/#create-instance","text":"var scroller = scene . plugins . get ( 'rexScroller' ). add ( gameObject , { bounds : [ bottomBound , topBound ], value : topBound , // threshold: 10, // slidingDeceleration: 5000, // backDeceleration: 2000, // enable: true, // orientation: 'vertical', // valuechangeCallback: null, // valuechangeCallbackScope: null, // overmaxCallback: null, // overmaxCallbackScope: null, // overminCallback: null, // overminCallbackScope: null, }); bounds : An array of 2 values [bound0, bound1] value : Initial value between bound0 and bound1 Map this value to position of content under event 'valuechange' threshold : Minimal movement to scroll. Set 0 to scroll immediately. slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. enable : Set true to get dragging events. orientation : 'vertical' , 'v' , 'y' , or 0 : dragging on vertical/y axis. 'horizontal' , 'h' , 'x' , or 1 : dragging on horizontal/x axis. valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event overminCallback , overmaxCallbackScope : Bind this callback to overmax event overminCallback , overminCallbackScope : Bind this callback to overmin event","title":"Create instance"},{"location":"scroller/#set-bounds","text":"this . setBounds ( bounds ); // bounds: [bound0, bound1] // this.setBounds(bound0, bound1);","title":"Set bounds"},{"location":"scroller/#set-deceleration","text":"Deceleration of slow down when dragging released scroller . setSlidingDeceleration ( dec ); Disable scroller . setSlidingDeceleration ( false ); Deceleration of pull back when out of bounds scroller . setBackDeceleration ( dec ); Disable scroller . setBackDeceleration ( false );","title":"Set deceleration"},{"location":"scroller/#get-value","text":"var value = scroller . value ;","title":"Get value"},{"location":"scroller/#set-value","text":"scroller . value = newValue ; // scroller.setValue(newValue); Fires valuechange event if new value is not equal to current value.","title":"Set value"},{"location":"scroller/#events","text":"Value changed scroller . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); Set position of content under this event Value out of max/min bound scroller . on ( 'overmax' , function ( newValue , prevValue ){ /* ... */ }); scroller . on ( 'overmin' , function ( newValue , prevValue ){ /* ... */ });","title":"Events"},{"location":"scroller/#drag","text":"","title":"Drag"},{"location":"scroller/#drag-enable","text":"scroller . setEnable (); // scroller.setEnable(false); // disable","title":"Drag enable"},{"location":"scroller/#is-dragging","text":"var isDragging = scroller . isDragging ;","title":"Is dragging"},{"location":"scroller/#state-machine","text":"graph TB IDLE[\"Idle\"] --> |Drag| DRAG[\"Dragging<br>event 'valuechange'\"] DRAG --> |Release| OnRelease{\"Under bounds?\"} OnRelease --> |Yes| SLIDE[\"Sliding<br>Sliding-deceleration\"] SLIDE --> |Stop| IDLE SLIDE --> |Drag| DRAG OnRelease --> |No| BACK[\"Pull back to bounds<br>Back-deceleration\"] BACK --> |Stop| IDLE BACK --> |Drag| DRAG Get state var state = scroller . state ; 'IDLE' : No dragging, no sliding 'DRAG' : Dragging 'SLIDE' : Sliding when dragging released 'BACK' : Sliding back to bound when out of bound","title":"State machine"},{"location":"sequence/","text":"Introduction \u00b6 Run sequence commands in array. Author: Rex Object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import Sequence from './plugins/sequence.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SequencePlugin from './plugins/sequence-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSequence' , plugin : SequencePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create sequence instance \u00b6 var seq = this . plugins . get ( 'rexSequence' ). add ({ // yoyo: false // reverse sequence when it reaches the end // repeat: 0, // repeat count // loop: false // repeat forever }); Load commands \u00b6 seq . load ( commands , actionScope ); Format of command : [ fnName , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] ActionScope Format of command is the same as run-command . Run commands \u00b6 seq . start (); Run command : var eventEmitter = actionScope [ fnName ]. call ( actionScope , param0 , param1 ...); - Return an event emitter to pause the sequence, otherwise run next command - Sequence will continue when that event emitter fires complete event Events \u00b6 On sequence completed : seq . on ( 'complete' , function ( seq ){}); Action of commands \u00b6 Action of commands, extended from Phaser.Events.EventEmitter . class ActionKlass extends Phaser . Events . EventEmitter { constructor ( scene ) { super (); this . scene = scene ; this . myConsole = scene . add . text ( 100 , 100 , '' ); this [ 'wait-click' ] = this . waitClick ; this [ 'wait-time' ] = this . waitTime ; } // callbacks print ( msg ) { this . myConsole . setText ( msg ); // return undefined to run next command } waitClick () { this . scene . input . once ( 'pointerup' , this . complete , this ); return this ; // return eventEmitter to pause the sequence } waitTime ( delay ) { this . scene . time . delayedCall ( delay * 1000 , this . complete , [], this ); return this ; // return eventEmitter to pause the sequence } complete () { this . emit ( 'complete' ); // resume sequence } } var actionScope = new ActionKlass ( scene ); Now this scope supports 3 commands print(msg): ['print', msg] waitClick(): ['wait-click'] waitTime(delay): ['wait-time', delay]","title":"Sequence"},{"location":"sequence/#introduction","text":"Run sequence commands in array. Author: Rex Object","title":"Introduction"},{"location":"sequence/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"sequence/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"sequence/#import-class","text":"import Sequence from './plugins/sequence.js' ;","title":"Import class"},{"location":"sequence/#install-global-plugin","text":"Install plugin in configuration of game import SequencePlugin from './plugins/sequence-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSequence' , plugin : SequencePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"sequence/#create-sequence-instance","text":"var seq = this . plugins . get ( 'rexSequence' ). add ({ // yoyo: false // reverse sequence when it reaches the end // repeat: 0, // repeat count // loop: false // repeat forever });","title":"Create sequence instance"},{"location":"sequence/#load-commands","text":"seq . load ( commands , actionScope ); Format of command : [ fnName , param0 , param1 , ...] Commands in nested array : [ command0 , command1 [ command2 , command3 ] ] ActionScope Format of command is the same as run-command .","title":"Load commands"},{"location":"sequence/#run-commands","text":"seq . start (); Run command : var eventEmitter = actionScope [ fnName ]. call ( actionScope , param0 , param1 ...); - Return an event emitter to pause the sequence, otherwise run next command - Sequence will continue when that event emitter fires complete event","title":"Run commands"},{"location":"sequence/#events","text":"On sequence completed : seq . on ( 'complete' , function ( seq ){});","title":"Events"},{"location":"sequence/#action-of-commands","text":"Action of commands, extended from Phaser.Events.EventEmitter . class ActionKlass extends Phaser . Events . EventEmitter { constructor ( scene ) { super (); this . scene = scene ; this . myConsole = scene . add . text ( 100 , 100 , '' ); this [ 'wait-click' ] = this . waitClick ; this [ 'wait-time' ] = this . waitTime ; } // callbacks print ( msg ) { this . myConsole . setText ( msg ); // return undefined to run next command } waitClick () { this . scene . input . once ( 'pointerup' , this . complete , this ); return this ; // return eventEmitter to pause the sequence } waitTime ( delay ) { this . scene . time . delayedCall ( delay * 1000 , this . complete , [], this ); return this ; // return eventEmitter to pause the sequence } complete () { this . emit ( 'complete' ); // resume sequence } } var actionScope = new ActionKlass ( scene ); Now this scope supports 3 commands print(msg): ['print', msg] waitClick(): ['wait-click'] waitTime(delay): ['wait-time', delay]","title":"Action of commands"},{"location":"shader-grayscale/","text":"Introduction \u00b6 Gray scale post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexGrayScalepipeline from './plugins/grayscalepipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import GrayScalePipelinePlugin from './plugins/grayscalepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGrayScalePipeline' , plugin : GrayScalePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexGrayScalePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Intensity \u00b6 Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(gray scale)","title":"Gray scale"},{"location":"shader-grayscale/#introduction","text":"Gray scale post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-grayscale/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-grayscale/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-grayscale/#import-class","text":"import rexGrayScalepipeline from './plugins/grayscalepipeline.js' ;","title":"Import class"},{"location":"shader-grayscale/#install-global-plugin","text":"Install plugin in configuration of game import GrayScalePipelinePlugin from './plugins/grayscalepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexGrayScalePipeline' , plugin : GrayScalePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-grayscale/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexGrayScalePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-grayscale/#intensity","text":"Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(gray scale)","title":"Intensity"},{"location":"shader-hsladjust/","text":"Introduction \u00b6 Adjust color in HSL domain, post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexHslAdjustPipeline from './plugins/hsladjustpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import HslAdjustPipelinePlugin from './plugins/hsladjustpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHslAdjustPipeline' , plugin : HslAdjustPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexHslAdjustPipeline' ). add ( scene , key , { // hueRotate: 0, // satAdjust: 1, // lumAdjust: 0.5, }); hueRotate : Hue rotation 0 : Rotate 0 degrees, original color (Default value) 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees satAdjust : Saturation adjustment 0 : Gray 1 : Original color (Default value) 1 : lumAdjust : Lumen adjustment 0 : Dark 0.5 : Original color (Default value) 1 : White Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Hue rotation \u00b6 Get var hueRotate = customPipeline . hueRotate ; Set customPipeline . hueRotate = hueRotate ; // customPipeline.hueRotate += value; or customPipeline . setHueRotate ( value ); 0 : Rotate 0 degrees, original color 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees Saturation adjustment \u00b6 Get var satAdjust = customPipeline . satAdjust ; Set customPipeline . satAdjust = satAdjust ; // customPipeline.satAdjust += value; or customPipeline . setSatAdjust ( value ); 0 : Gray 1 : Original color 1 : Lumen adjustment \u00b6 Get var lumAdjust = customPipeline . lumAdjust ; Set customPipeline . lumAdjust = lumAdjust ; // customPipeline.lumAdjust += value; or customPipeline . setLumAdjust ( value ); 0 : Dark 0.5 : Original color 1 : White","title":"HSL adjust"},{"location":"shader-hsladjust/#introduction","text":"Adjust color in HSL domain, post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-hsladjust/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-hsladjust/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-hsladjust/#import-class","text":"import rexHslAdjustPipeline from './plugins/hsladjustpipeline.js' ;","title":"Import class"},{"location":"shader-hsladjust/#install-global-plugin","text":"Install plugin in configuration of game import HslAdjustPipelinePlugin from './plugins/hsladjustpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexHslAdjustPipeline' , plugin : HslAdjustPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-hsladjust/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexHslAdjustPipeline' ). add ( scene , key , { // hueRotate: 0, // satAdjust: 1, // lumAdjust: 0.5, }); hueRotate : Hue rotation 0 : Rotate 0 degrees, original color (Default value) 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees satAdjust : Saturation adjustment 0 : Gray 1 : Original color (Default value) 1 : lumAdjust : Lumen adjustment 0 : Dark 0.5 : Original color (Default value) 1 : White Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-hsladjust/#hue-rotation","text":"Get var hueRotate = customPipeline . hueRotate ; Set customPipeline . hueRotate = hueRotate ; // customPipeline.hueRotate += value; or customPipeline . setHueRotate ( value ); 0 : Rotate 0 degrees, original color 0.5 : Rotate 180 degrees 1 : Rotate 360 degrees","title":"Hue rotation"},{"location":"shader-hsladjust/#saturation-adjustment","text":"Get var satAdjust = customPipeline . satAdjust ; Set customPipeline . satAdjust = satAdjust ; // customPipeline.satAdjust += value; or customPipeline . setSatAdjust ( value ); 0 : Gray 1 : Original color 1 :","title":"Saturation adjustment"},{"location":"shader-hsladjust/#lumen-adjustment","text":"Get var lumAdjust = customPipeline . lumAdjust ; Set customPipeline . lumAdjust = lumAdjust ; // customPipeline.lumAdjust += value; or customPipeline . setLumAdjust ( value ); 0 : Dark 0.5 : Original color 1 : White","title":"Lumen adjustment"},{"location":"shader-inverse/","text":"Introduction \u00b6 Inverse color post processing filter. Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexInversePipeline from './plugins/inversepipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import InversePipelinePlugin from './plugins/inversepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInversePipeline' , plugin : InversePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexInversePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Intensity \u00b6 Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(inverse color)","title":"Inverse"},{"location":"shader-inverse/#introduction","text":"Inverse color post processing filter. Author: Rex A camera filter","title":"Introduction"},{"location":"shader-inverse/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-inverse/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-inverse/#import-class","text":"import rexInversePipeline from './plugins/inversepipeline.js' ;","title":"Import class"},{"location":"shader-inverse/#install-global-plugin","text":"Install plugin in configuration of game import InversePipelinePlugin from './plugins/inversepipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexInversePipeline' , plugin : InversePipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-inverse/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexInversePipeline' ). add ( scene , key , { // intensity: 0 }); intensity : 0(original color) ~ 1(gray scale) Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-inverse/#intensity","text":"Get var intensity = customPipeline . intensity ; Set customPipeline . intensity = intensity ; // customPipeline.intensity += value; or customPipeline . setIntensity ( radius ); intensity : 0(original color) ~ 1(inverse color)","title":"Intensity"},{"location":"shader-pixelation/","text":"Introduction \u00b6 Pixelation post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexPixelationPipeline from './plugins/pixelationpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import PixelationPipelinePlugin from './plugins/pixelationpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPixelationPipeline' , plugin : PixelationPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexPixelationPipeline' ). add ( scene , key , { // pixelWidth: 0, // pixelHeight: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Pixel size \u00b6 Get var pixelWidth = customPipeline . pixelWidth ; var pixelHeight = customPipeline . pixelHeight ; Set customPipeline . pixelWidth = pixelWidth ; customPipeline . pixelHeight = pixelHeight ; // customPipeline.pixelWidth += value; // customPipeline.pixelHeight += value; or customPipeline . setPixelWidth ( pixelWidth ); customPipeline . setPixelHeight ( pixelHeight ); customPipeline . setPixelSize ( pixelWidth , pixelHeight );","title":"Pixelation"},{"location":"shader-pixelation/#introduction","text":"Pixelation post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-pixelation/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-pixelation/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-pixelation/#import-class","text":"import rexPixelationPipeline from './plugins/pixelationpipeline.js' ;","title":"Import class"},{"location":"shader-pixelation/#install-global-plugin","text":"Install plugin in configuration of game import PixelationPipelinePlugin from './plugins/pixelationpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexPixelationPipeline' , plugin : PixelationPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-pixelation/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexPixelationPipeline' ). add ( scene , key , { // pixelWidth: 0, // pixelHeight: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-pixelation/#pixel-size","text":"Get var pixelWidth = customPipeline . pixelWidth ; var pixelHeight = customPipeline . pixelHeight ; Set customPipeline . pixelWidth = pixelWidth ; customPipeline . pixelHeight = pixelHeight ; // customPipeline.pixelWidth += value; // customPipeline.pixelHeight += value; or customPipeline . setPixelWidth ( pixelWidth ); customPipeline . setPixelHeight ( pixelHeight ); customPipeline . setPixelSize ( pixelWidth , pixelHeight );","title":"Pixel size"},{"location":"shader-swirl/","text":"Introduction \u00b6 Swirl post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexSwirlpipeline from './plugins/swirlpipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SwirlPipelinePlugin from './plugins/swirlpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSwirlPipeline' , plugin : SwirlPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexSwirlPipeline' ). add ( scene , key , { // center: { // x: windowWidth / 2, // y: windowHeight / 2 //} // radius: 0, // rotation: 0, // or angle: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Radius \u00b6 Get var radius = customPipeline . radius ; Set customPipeline . radius = radius ; // customPipeline.radius += value; or customPipeline . setRadius ( radius ); Rotation \u00b6 Get var rotation = customPipeline . rotation ; // radians // var angle = customPipeline.angle; // degrees Set customPipeline . rotation = rotation ; customPipeline . rotation += value ; // customPipeline.angle = angle; // customPipeline.angle += value; or customPipeline . setRotation ( rotation ); // customPipeline.setAngle(angle); Center position \u00b6 Default value is center of window. Get var x = customPipeline . centerX ; var y = customPipeline . centerY ; Set customPipeline . centerX = x ; customPipeline . centerY = y ; or customPipeline . setCenter ( x , y ); // customPipeline.setCenter(); // set to center of window","title":"Swirl"},{"location":"shader-swirl/#introduction","text":"Swirl post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-swirl/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-swirl/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-swirl/#import-class","text":"import rexSwirlpipeline from './plugins/swirlpipeline.js' ;","title":"Import class"},{"location":"shader-swirl/#install-global-plugin","text":"Install plugin in configuration of game import SwirlPipelinePlugin from './plugins/swirlpipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSwirlPipeline' , plugin : SwirlPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-swirl/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexSwirlPipeline' ). add ( scene , key , { // center: { // x: windowWidth / 2, // y: windowHeight / 2 //} // radius: 0, // rotation: 0, // or angle: 0 }); Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-swirl/#radius","text":"Get var radius = customPipeline . radius ; Set customPipeline . radius = radius ; // customPipeline.radius += value; or customPipeline . setRadius ( radius );","title":"Radius"},{"location":"shader-swirl/#rotation","text":"Get var rotation = customPipeline . rotation ; // radians // var angle = customPipeline.angle; // degrees Set customPipeline . rotation = rotation ; customPipeline . rotation += value ; // customPipeline.angle = angle; // customPipeline.angle += value; or customPipeline . setRotation ( rotation ); // customPipeline.setAngle(angle);","title":"Rotation"},{"location":"shader-swirl/#center-position","text":"Default value is center of window. Get var x = customPipeline . centerX ; var y = customPipeline . centerY ; Set customPipeline . centerX = x ; customPipeline . centerY = y ; or customPipeline . setCenter ( x , y ); // customPipeline.setCenter(); // set to center of window","title":"Center position"},{"location":"shader-toonify/","text":"Introduction \u00b6 Draw outlines and quantize color in HSV domain, post processing filter. Reference Author: Rex A camera filter Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexToonifyPipeline from './plugins/toonifypipeline.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ToonifyPipelinePlugin from './plugins/toonifypipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexToonifyPipeline' , plugin : ToonifyPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Apply filter \u00b6 Create pipeline instance var customPipeline = scene . plugins . get ( 'rexToonifyPipeline' ). add ( scene , key , { // edgeThreshold: 0.2, // hueLevels: 0, // sLevels: 0, // vLevels: 0, // edgeColor: 0 }); edgeThreshold : Threshold of edge. Set 1.1 (or any number larger then 1 ) to disable this feature. hueLevels : Amount of hue levels. Set 0 to disable this feature. sLevels : Amount of saturation levels. Set 0 to disable this feature. vLevels : Amount of value levels. Set 0 to disable this feature. edgeColor : Color of edge, could be a number 0xRRGGBB , or a JSON object {r:255, g:255, b:255} Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline ); Edge threshold \u00b6 Get var edgeThreshold = customPipeline . edgeThreshold ; Set customPipeline . edgeThreshold = edgeThreshold ; or customPipeline . setEdgeThreshold ( value ); Set 1.1 (or any number larger then 1 ) to disable this feature. Hue levels \u00b6 Get var hueLevels = customPipeline . hueLevels ; Set customPipeline . hueLevels = hueLevels ; or customPipeline . setHueLevels ( value ); Set 0 to disable this feature. Saturation levels \u00b6 Get var satLevels = customPipeline . satLevels ; Set customPipeline . satLevels = satLevels ; or customPipeline . setSatLevels ( value ); Set 0 to disable this feature. Value levels \u00b6 Get var valLevels = customPipeline . valLevels ; Set customPipeline . valLevels = valLevels ; or customPipeline . setValLevels ( value ); Set 0 to disable this feature. Edge color \u00b6 Get var color = customPipeline . edgeColor ; color : Color object. Red: color.red , 0~255. Green: color.green , 0~255. Blue: color.blue , 0~255. Set customPipeline . edgeColor = value ; value : A number 0xRRGGBB , or a JSON object {r:255, g:255, b:255}","title":"Toonify"},{"location":"shader-toonify/#introduction","text":"Draw outlines and quantize color in HSV domain, post processing filter. Reference Author: Rex A camera filter","title":"Introduction"},{"location":"shader-toonify/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shader-toonify/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shader-toonify/#import-class","text":"import rexToonifyPipeline from './plugins/toonifypipeline.js' ;","title":"Import class"},{"location":"shader-toonify/#install-global-plugin","text":"Install plugin in configuration of game import ToonifyPipelinePlugin from './plugins/toonifypipeline-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexToonifyPipeline' , plugin : ToonifyPipelinePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shader-toonify/#apply-filter","text":"Create pipeline instance var customPipeline = scene . plugins . get ( 'rexToonifyPipeline' ). add ( scene , key , { // edgeThreshold: 0.2, // hueLevels: 0, // sLevels: 0, // vLevels: 0, // edgeColor: 0 }); edgeThreshold : Threshold of edge. Set 1.1 (or any number larger then 1 ) to disable this feature. hueLevels : Amount of hue levels. Set 0 to disable this feature. sLevels : Amount of saturation levels. Set 0 to disable this feature. vLevels : Amount of value levels. Set 0 to disable this feature. edgeColor : Color of edge, could be a number 0xRRGGBB , or a JSON object {r:255, g:255, b:255} Add pipeline to camera // var camera = scene.cameras.main; camera . setRenderToTexture ( customPipeline );","title":"Apply filter"},{"location":"shader-toonify/#edge-threshold","text":"Get var edgeThreshold = customPipeline . edgeThreshold ; Set customPipeline . edgeThreshold = edgeThreshold ; or customPipeline . setEdgeThreshold ( value ); Set 1.1 (or any number larger then 1 ) to disable this feature.","title":"Edge threshold"},{"location":"shader-toonify/#hue-levels","text":"Get var hueLevels = customPipeline . hueLevels ; Set customPipeline . hueLevels = hueLevels ; or customPipeline . setHueLevels ( value ); Set 0 to disable this feature.","title":"Hue levels"},{"location":"shader-toonify/#saturation-levels","text":"Get var satLevels = customPipeline . satLevels ; Set customPipeline . satLevels = satLevels ; or customPipeline . setSatLevels ( value ); Set 0 to disable this feature.","title":"Saturation levels"},{"location":"shader-toonify/#value-levels","text":"Get var valLevels = customPipeline . valLevels ; Set customPipeline . valLevels = valLevels ; or customPipeline . setValLevels ( value ); Set 0 to disable this feature.","title":"Value levels"},{"location":"shader-toonify/#edge-color","text":"Get var color = customPipeline . edgeColor ; color : Color object. Red: color.red , 0~255. Green: color.green , 0~255. Blue: color.blue , 0~255. Set customPipeline . edgeColor = value ; value : A number 0xRRGGBB , or a JSON object {r:255, g:255, b:255}","title":"Edge color"},{"location":"shader/","text":"Introduction \u00b6 A quad with its own shader, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load GLSL \u00b6 scene . load . glsl ( key , url ); Reference: load glsl Add shader object \u00b6 var shader = scene . add . shader ( key , x , y , width , height , textures ); key : The key of the shader to use from the shader cache , or a BaseShader instance. x , y : Position. width , height : Size. textures : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms. Lots of shaders expect textures to be power-of-two sized . Add shader object from JSON var shader = scene . make . shader ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : The key of the shader to use from the shader cache, or a BaseShader instance. A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MyShader extends Phaser . GameObjects . Shader { constructor ( scene , key , x , y , width , height , textures ) { super ( scene , key , x , y , width , height , textures ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var shader = new MyShader ( scene , key , x , y , width , height , textures ); Sampler2D uniform \u00b6 Get uniform object var uniform = shader . getUniform ( key ); Texture key var textureKey = uniform . textureKey ; Get texture key of iChannel0 , iChannel1 , iChannel2 , iChannel3 sampler2D uniform. var textureKey = shader . getUniform ( 'iChannel0' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel1' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel2' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel3' ). textureKey ; Sets a sampler2D uniform from texture manager. shader . setChannel0 ( textureKey ); shader . setChannel1 ( textureKey ); shader . setChannel2 ( textureKey ); shader . setChannel3 ( textureKey ); // shader.setChannel0(textureKey, textureData); // shader.setChannel1(textureKey, textureData); // shader.setChannel2(textureKey, textureData); // shader.setChannel3(textureKey, textureData); or shader . setSampler2D ( uniformKey , textureKey , textureIndex ); // shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. textureKey : 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 . Sets a sampler2D uniform from a webgl texture. shader . setSampler2DBuffer ( uniformKey , texture , width , height , textureIndex ); // shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . width , height : The width, height of the texture. textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. Other uniforms \u00b6 mouse , a pointer parameter. Get var pointer = shader . pointer ; Set shader . setPointer ( pointer ); pointer : {x, y} time , the elapsed game time, in seconds . Get var time = shader . getUniform ( 'time' ). value ; // var time = shader.uniforms.time.value Set shader . setUniform ( 'time.value' , time ); Output \u00b6 Render to Display list, by default. Redirect render result to internal webgl texture. shader . setRenderToTexture (); var texture = shader . glTexture ; Redirect render result to internal webgl texture, and sample2D from buffer. shader . setRenderToTexture ( undefined , true ); var texture = shader . glTexture ; Redirect render result to texture manager, for texture-based game object. shader . setRenderToTexture ( textureKey ); // var texture = shader.glTexture; Redirect render result to texture manager, and Sample2D from buffer. shader . setRenderToTexture ( textureKey , true ); // var texture = shader.glTexture; Texture routing \u00b6 graph TB TextureManagerIn[\"Texture manager\"] --> |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:<br>iChannel0<br>iChannel1<br>iChannel2<br>iChannel3\"] Sampler2D--> Shader[\"shader<br>Shader game object\"] Shader --> DisplayList[\"Display list\"] Shader --> |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"] InternalTexture -.-> |\"Texture key\"| TextureManagerOut[\"Texture manager\"] TextureManagerOut -.-> GameObject[\"Image game object\"] GameObject -.-> DisplayList WebGLTexture[\"WebGl texture<br>gameObject.glTexture\"] --> |\"shader.setSampler2DBuffer()\"| Sampler2D InternalTexture --> WebGLTexture subgraph Output DisplayList GameObject TextureManagerOut end subgraph Input TextureManagerIn WebGLTexture end Other properties \u00b6 See game object","title":"Shader"},{"location":"shader/#introduction","text":"A quad with its own shader, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shader/#usage","text":"","title":"Usage"},{"location":"shader/#load-glsl","text":"scene . load . glsl ( key , url ); Reference: load glsl","title":"Load GLSL"},{"location":"shader/#add-shader-object","text":"var shader = scene . add . shader ( key , x , y , width , height , textures ); key : The key of the shader to use from the shader cache , or a BaseShader instance. x , y : Position. width , height : Size. textures : Optional array of texture keys to bind to the iChannel0, iChannel1, iChannel2, iChannel3 uniforms. Lots of shaders expect textures to be power-of-two sized . Add shader object from JSON var shader = scene . make . shader ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); key : The key of the shader to use from the shader cache, or a BaseShader instance. A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add shader object"},{"location":"shader/#custom-class","text":"Define class class MyShader extends Phaser . GameObjects . Shader { constructor ( scene , key , x , y , width , height , textures ) { super ( scene , key , x , y , width , height , textures ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var shader = new MyShader ( scene , key , x , y , width , height , textures );","title":"Custom class"},{"location":"shader/#sampler2d-uniform","text":"Get uniform object var uniform = shader . getUniform ( key ); Texture key var textureKey = uniform . textureKey ; Get texture key of iChannel0 , iChannel1 , iChannel2 , iChannel3 sampler2D uniform. var textureKey = shader . getUniform ( 'iChannel0' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel1' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel2' ). textureKey ; var textureKey = shader . getUniform ( 'iChannel3' ). textureKey ; Sets a sampler2D uniform from texture manager. shader . setChannel0 ( textureKey ); shader . setChannel1 ( textureKey ); shader . setChannel2 ( textureKey ); shader . setChannel3 ( textureKey ); // shader.setChannel0(textureKey, textureData); // shader.setChannel1(textureKey, textureData); // shader.setChannel2(textureKey, textureData); // shader.setChannel3(textureKey, textureData); or shader . setSampler2D ( uniformKey , textureKey , textureIndex ); // shader.setSampler2D(uniformKey, textureKey, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data. textureKey : 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 . Sets a sampler2D uniform from a webgl texture. shader . setSampler2DBuffer ( uniformKey , texture , width , height , textureIndex ); // shader.setSampler2DBuffer(uniformKey, texture, width, height, textureIndex, textureData); uniformKey : 'iChannel0' , 'iChannel1' , 'iChannel2' , or 'iChannel3' . width , height : The width, height of the texture. textureIndex : 0 (for iChannel0), 1 (for iChannel1), 2 (for iChannel2), 3 (for iChannel3). textureData : Additional texture data.","title":"Sampler2D uniform"},{"location":"shader/#other-uniforms","text":"mouse , a pointer parameter. Get var pointer = shader . pointer ; Set shader . setPointer ( pointer ); pointer : {x, y} time , the elapsed game time, in seconds . Get var time = shader . getUniform ( 'time' ). value ; // var time = shader.uniforms.time.value Set shader . setUniform ( 'time.value' , time );","title":"Other uniforms"},{"location":"shader/#output","text":"Render to Display list, by default. Redirect render result to internal webgl texture. shader . setRenderToTexture (); var texture = shader . glTexture ; Redirect render result to internal webgl texture, and sample2D from buffer. shader . setRenderToTexture ( undefined , true ); var texture = shader . glTexture ; Redirect render result to texture manager, for texture-based game object. shader . setRenderToTexture ( textureKey ); // var texture = shader.glTexture; Redirect render result to texture manager, and Sample2D from buffer. shader . setRenderToTexture ( textureKey , true ); // var texture = shader.glTexture;","title":"Output"},{"location":"shader/#texture-routing","text":"graph TB TextureManagerIn[\"Texture manager\"] --> |\"shader.setSampler2D()\"| Sampler2D[\"Samplers:<br>iChannel0<br>iChannel1<br>iChannel2<br>iChannel3\"] Sampler2D--> Shader[\"shader<br>Shader game object\"] Shader --> DisplayList[\"Display list\"] Shader --> |\"shader.setRenderToTexture()\"| InternalTexture[\"shader.glTexture\"] InternalTexture -.-> |\"Texture key\"| TextureManagerOut[\"Texture manager\"] TextureManagerOut -.-> GameObject[\"Image game object\"] GameObject -.-> DisplayList WebGLTexture[\"WebGl texture<br>gameObject.glTexture\"] --> |\"shader.setSampler2DBuffer()\"| Sampler2D InternalTexture --> WebGLTexture subgraph Output DisplayList GameObject TextureManagerOut end subgraph Input TextureManagerIn WebGLTexture end","title":"Texture routing"},{"location":"shader/#other-properties","text":"See game object","title":"Other properties"},{"location":"shake-position/","text":"Introduction \u00b6 Shake position of game object. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexShake from './plugins/shakeposition.js' ; Install global plugin \u00b6 Install plugin in configuration of game import ShakePlugin from './plugins/shakeposition-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexShake' , plugin : ShakePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var shake = scene . plugins . get ( 'rexShake' ). add ( gameObject , { // mode: 1, // 0|'effect'|1|'behavior' // duration: 500, // magnitude: 10, // magnitudeMode: 1, // 0|'constant'|1|'decay' }); mode : 'effect' , or 0 : Shake position in 'poststep' game event, and restore in 'step' game event. 'behavior' , or 1 : Shake position in 'preupdate' scene event. duration : Duration of shaking, in millisecond. magnitude : The strength of the shake, in pixels. magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake. Start shaking \u00b6 shake . shake (); // shake.shake(duration, magnitude); or shake . shake ({ duration : 500 , magnitude : 10 }); Stop shakeing \u00b6 shake . stop (); Enable \u00b6 Enable/resume (default) shake . setEnable (); or shake . enable = true ; Disable/pause shake . setEnable ( false ); or shake . enable = false ; Set updating mode \u00b6 shake . setMode ( mode ); mode : 'effect' , or 0 : Shake position in post-update stage, and restore in pre-update stage. 'behavior' , or 1 : Shake position in pre-update stage. Set duration \u00b6 shake . setDuration ( duration ); // shake.duration = duration; Set magnitude \u00b6 shake . setMagnitude ( magnitude ); shake . magnitude = magnitude ; magnitude : The strength of the shake, in pixels. Set magnitude mode \u00b6 shake . setMagnitudeMode ( magnitudeMode ); // shake.magnitudeMode = magnitudeMode; magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake. Events \u00b6 On reached target shake . on ( 'complete' , function ( shake , gameObject ){}); Status \u00b6 Is shakeing var isRunning = shake . isRunning ;","title":"Shake position"},{"location":"shake-position/#introduction","text":"Shake position of game object. Author: Rex Behavior of game object","title":"Introduction"},{"location":"shake-position/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"shake-position/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"shake-position/#import-class","text":"import rexShake from './plugins/shakeposition.js' ;","title":"Import class"},{"location":"shake-position/#install-global-plugin","text":"Install plugin in configuration of game import ShakePlugin from './plugins/shakeposition-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexShake' , plugin : ShakePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"shake-position/#create-instance","text":"var shake = scene . plugins . get ( 'rexShake' ). add ( gameObject , { // mode: 1, // 0|'effect'|1|'behavior' // duration: 500, // magnitude: 10, // magnitudeMode: 1, // 0|'constant'|1|'decay' }); mode : 'effect' , or 0 : Shake position in 'poststep' game event, and restore in 'step' game event. 'behavior' , or 1 : Shake position in 'preupdate' scene event. duration : Duration of shaking, in millisecond. magnitude : The strength of the shake, in pixels. magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake.","title":"Create instance"},{"location":"shake-position/#start-shaking","text":"shake . shake (); // shake.shake(duration, magnitude); or shake . shake ({ duration : 500 , magnitude : 10 });","title":"Start shaking"},{"location":"shake-position/#stop-shakeing","text":"shake . stop ();","title":"Stop shakeing"},{"location":"shake-position/#enable","text":"Enable/resume (default) shake . setEnable (); or shake . enable = true ; Disable/pause shake . setEnable ( false ); or shake . enable = false ;","title":"Enable"},{"location":"shake-position/#set-updating-mode","text":"shake . setMode ( mode ); mode : 'effect' , or 0 : Shake position in post-update stage, and restore in pre-update stage. 'behavior' , or 1 : Shake position in pre-update stage.","title":"Set updating mode"},{"location":"shake-position/#set-duration","text":"shake . setDuration ( duration ); // shake.duration = duration;","title":"Set duration"},{"location":"shake-position/#set-magnitude","text":"shake . setMagnitude ( magnitude ); shake . magnitude = magnitude ; magnitude : The strength of the shake, in pixels.","title":"Set magnitude"},{"location":"shake-position/#set-magnitude-mode","text":"shake . setMagnitudeMode ( magnitudeMode ); // shake.magnitudeMode = magnitudeMode; magnitudeMode : 'constant' , or 0 : Constant strength of the shake. 'decay' , or 1 : Decay the strength of the shake.","title":"Set magnitude mode"},{"location":"shake-position/#events","text":"On reached target shake . on ( 'complete' , function ( shake , gameObject ){});","title":"Events"},{"location":"shake-position/#status","text":"Is shakeing var isRunning = shake . isRunning ;","title":"Status"},{"location":"shape-arc/","text":"Introduction \u00b6 Arc shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var arc = scene . add . arc ( x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha); Custom class \u00b6 Define class class MyArc extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ) { super ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var arc = new MyArc ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); Color \u00b6 Fill color Get var color = arc . fillColor ; Set arc . setFillStyle ( color , alpha ); Stroke color Get var color = arc . strokeColor ; Set arc . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses arc.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Radius Get var radius = arc . radius ; Set arc . setRadius ( radius ); or arc . radius = radius ; Start angle, in degrees. Get var startAngle = arc . startAngle ; Set arc . setStartAngle ( startAngle ); // arc.setStartAngle(startAngle, anticlockwise); or arc . startAngle = startAngle ; End angle, in degrees. Get var endAngle = arc . endAngle ; Set arc . seEndAngle ( endAngle ); or arc . endAngle = endAngle ; Anticlockwise ( true , or false ) Get var anticlockwise = arc . anticlockwise ; Set arc . anticlockwise = anticlockwise ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = arc . iterations ; Set arc . iterations = iterations ; Other properties \u00b6 See game object","title":"Arc"},{"location":"shape-arc/#introduction","text":"Arc shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-arc/#usage","text":"","title":"Usage"},{"location":"shape-arc/#create-shape","text":"","title":"Create shape"},{"location":"shape-arc/#add-shape-object","text":"var arc = scene . add . arc ( x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // var arc = scene.add.arc(x, y, radius, startAngle, endAngle, anticlockwise, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-arc/#custom-class","text":"Define class class MyArc extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ) { super ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var arc = new MyArc ( scene , x , y , radius , startAngle , endAngle , anticlockwise , fillColor );","title":"Custom class"},{"location":"shape-arc/#color","text":"Fill color Get var color = arc . fillColor ; Set arc . setFillStyle ( color , alpha ); Stroke color Get var color = arc . strokeColor ; Set arc . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses arc.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-arc/#propertirs","text":"Radius Get var radius = arc . radius ; Set arc . setRadius ( radius ); or arc . radius = radius ; Start angle, in degrees. Get var startAngle = arc . startAngle ; Set arc . setStartAngle ( startAngle ); // arc.setStartAngle(startAngle, anticlockwise); or arc . startAngle = startAngle ; End angle, in degrees. Get var endAngle = arc . endAngle ; Set arc . seEndAngle ( endAngle ); or arc . endAngle = endAngle ; Anticlockwise ( true , or false ) Get var anticlockwise = arc . anticlockwise ; Set arc . anticlockwise = anticlockwise ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = arc . iterations ; Set arc . iterations = iterations ;","title":"Propertirs"},{"location":"shape-arc/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-circle/","text":"Introduction \u00b6 Circle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var circle = scene . add . circle ( x , y , radius , fillColor ); // var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha); Custom class \u00b6 Define class class MyCircle extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , fillColor , fillAlpha ) { super ( scene , x , y , radius , 0 , 360 , false , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var circle = new MyCircle ( scene , x , y , radius , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = circle . fillColor ; Set circle . setFillStyle ( color , alpha ); Stroke color Get var color = circle . strokeColor ; Set circle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses circle.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Radius Get var radius = circle . radius ; Set circle . setRadius ( radius ); or circle . radius = radius ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = circle . iterations ; Set circle . iterations = iterations ; Other properties \u00b6 See game object","title":"Circle"},{"location":"shape-circle/#introduction","text":"Circle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-circle/#usage","text":"","title":"Usage"},{"location":"shape-circle/#create-shape","text":"","title":"Create shape"},{"location":"shape-circle/#add-shape-object","text":"var circle = scene . add . circle ( x , y , radius , fillColor ); // var circle = scene.add.circle(x, y, radius, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-circle/#custom-class","text":"Define class class MyCircle extends Phaser . GameObjects . Arc { constructor ( scene , x , y , radius , fillColor , fillAlpha ) { super ( scene , x , y , radius , 0 , 360 , false , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var circle = new MyCircle ( scene , x , y , radius , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-circle/#color","text":"Fill color Get var color = circle . fillColor ; Set circle . setFillStyle ( color , alpha ); Stroke color Get var color = circle . strokeColor ; Set circle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses circle.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-circle/#propertirs","text":"Radius Get var radius = circle . radius ; Set circle . setRadius ( radius ); or circle . radius = radius ; Iterations: Increase this value for smoother arcs, at the cost of more polygons being rendered. Default is 0.01 Get var iterations = circle . iterations ; Set circle . iterations = iterations ;","title":"Propertirs"},{"location":"shape-circle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-curve/","text":"Introduction \u00b6 Curve shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var curve = scene . add . curve ( x , y , path , fillColor ); // var curve = scene.add.curve(x, y, path, fillColor, fillAlpha); path : Path object . Custom class \u00b6 Define class class MyCurve extends Phaser . GameObjects . Curve { constructor ( scene , x , y , path , fillColor , fillAlpha ) { super ( scene , x , y , path , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var curve = new MyCurve ( scene , x , y , path , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = curve . fillColor ; Set curve . setFillStyle ( color , alpha ); Stroke color Get var color = curve . strokeColor ; Set curve . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses curve.setFillStyle(color, alpha) to change color. Smoothness \u00b6 The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. curve . setSmoothness ( smoothness ); or curve . smoothness = smoothness ; Other properties \u00b6 See game object","title":"Curve"},{"location":"shape-curve/#introduction","text":"Curve shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-curve/#usage","text":"","title":"Usage"},{"location":"shape-curve/#create-shape","text":"","title":"Create shape"},{"location":"shape-curve/#add-shape-object","text":"var curve = scene . add . curve ( x , y , path , fillColor ); // var curve = scene.add.curve(x, y, path, fillColor, fillAlpha); path : Path object .","title":"Add shape object"},{"location":"shape-curve/#custom-class","text":"Define class class MyCurve extends Phaser . GameObjects . Curve { constructor ( scene , x , y , path , fillColor , fillAlpha ) { super ( scene , x , y , path , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var curve = new MyCurve ( scene , x , y , path , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-curve/#color","text":"Fill color Get var color = curve . fillColor ; Set curve . setFillStyle ( color , alpha ); Stroke color Get var color = curve . strokeColor ; Set curve . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses curve.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-curve/#smoothness","text":"The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. curve . setSmoothness ( smoothness ); or curve . smoothness = smoothness ;","title":"Smoothness"},{"location":"shape-curve/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-ellipse/","text":"Introduction \u00b6 Ellipse shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var ellipse = scene . add . ellipse ( x , y , width , height , fillColor ); // var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha); Custom class \u00b6 Define class class MyEllipse extends Phaser . GameObjects . Ellipse { constructor ( scene , x , y , width , height , fillColor , fillAlpha ) { super ( scene , x , y , width , height , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ellipse = new MyEllipse ( scene , x , y , width , height , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = ellipse . fillColor ; Set ellipse . setFillStyle ( color , alpha ); Stroke color Get var color = ellipse . strokeColor ; Set ellipse . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses ellipse.setFillStyle(color, alpha) to change color. Propertirs \u00b6 Size Get var width = ellipse . width ; var height = ellipse . height ; Set ellipse . setSize ( width , height ); Smoothness \u00b6 The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. ellipse . setSmoothness ( smoothness ); or ellipse . smoothness = smoothness ; Other properties \u00b6 See game object","title":"Ellipse"},{"location":"shape-ellipse/#introduction","text":"Ellipse shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-ellipse/#usage","text":"","title":"Usage"},{"location":"shape-ellipse/#create-shape","text":"","title":"Create shape"},{"location":"shape-ellipse/#add-shape-object","text":"var ellipse = scene . add . ellipse ( x , y , width , height , fillColor ); // var ellipse = scene.add.ellipse(x, y, width, height, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-ellipse/#custom-class","text":"Define class class MyEllipse extends Phaser . GameObjects . Ellipse { constructor ( scene , x , y , width , height , fillColor , fillAlpha ) { super ( scene , x , y , width , height , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var ellipse = new MyEllipse ( scene , x , y , width , height , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-ellipse/#color","text":"Fill color Get var color = ellipse . fillColor ; Set ellipse . setFillStyle ( color , alpha ); Stroke color Get var color = ellipse . strokeColor ; Set ellipse . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses ellipse.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-ellipse/#propertirs","text":"Size Get var width = ellipse . width ; var height = ellipse . height ; Set ellipse . setSize ( width , height );","title":"Propertirs"},{"location":"shape-ellipse/#smoothness","text":"The number of points used when rendering it. Increase this value for smoother curves, at the cost of more polygons being rendered. ellipse . setSmoothness ( smoothness ); or ellipse . smoothness = smoothness ;","title":"Smoothness"},{"location":"shape-ellipse/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-grid/","text":"Introduction \u00b6 Grid shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var grid = scene . add . grid ( x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); Custom class \u00b6 Define class class MyGrid extends Phaser . GameObjects . Grid { constructor ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ) { super ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var grid = new MyGrid ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); Color \u00b6 Fill color Get var color = grid . fillColor ; Set grid . setFillStyle ( color , alpha ); Stroke color Get var color = grid . strokeColor ; Set grid . setStrokeStyle ( lineWidth , color , alpha ); Alternating color Get var color = grid . altFillColor ; Set grid . setAltFillStyle ( color , alpha ); Outline color Get var color = grid . outlineFillColor ; Set grid . setOutlineStyle ( color , alpha ; No tint methods Uses grid.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Grid"},{"location":"shape-grid/#introduction","text":"Grid shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-grid/#usage","text":"","title":"Usage"},{"location":"shape-grid/#create-shape","text":"","title":"Create shape"},{"location":"shape-grid/#add-shape-object","text":"var grid = scene . add . grid ( x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha );","title":"Add shape object"},{"location":"shape-grid/#custom-class","text":"Define class class MyGrid extends Phaser . GameObjects . Grid { constructor ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ) { super ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var grid = new MyGrid ( scene , x , y , width , height , cellWidth , cellHeight , fillColor , fillAlpha , outlineFillColor , outlineFillAlpha );","title":"Custom class"},{"location":"shape-grid/#color","text":"Fill color Get var color = grid . fillColor ; Set grid . setFillStyle ( color , alpha ); Stroke color Get var color = grid . strokeColor ; Set grid . setStrokeStyle ( lineWidth , color , alpha ); Alternating color Get var color = grid . altFillColor ; Set grid . setAltFillStyle ( color , alpha ); Outline color Get var color = grid . outlineFillColor ; Set grid . setOutlineStyle ( color , alpha ; No tint methods Uses grid.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-grid/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-isobox/","text":"Introduction \u00b6 Iso-box shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var isoBox = scene . add . isobox ( x , y , size , height , fillTop , fillLeft , fillRight ); Custom class \u00b6 Define class class MyIsoBox extends Phaser . GameObjects . IsoBox { constructor ( scene , x , y , size , height , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoBox = new MyIsoBox ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); Set color \u00b6 Fill color isoBox . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoBox . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoBox.setFillStyle(fillTop, fillLeft, fillRight) to change color. Projection \u00b6 Get var projection = isoBox . projection ; Set isoBox . setProjection ( value ) or isoBox . projection = value ; Other properties \u00b6 See game object","title":"Iso box"},{"location":"shape-isobox/#introduction","text":"Iso-box shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-isobox/#usage","text":"","title":"Usage"},{"location":"shape-isobox/#create-shape","text":"","title":"Create shape"},{"location":"shape-isobox/#add-shape-object","text":"var isoBox = scene . add . isobox ( x , y , size , height , fillTop , fillLeft , fillRight );","title":"Add shape object"},{"location":"shape-isobox/#custom-class","text":"Define class class MyIsoBox extends Phaser . GameObjects . IsoBox { constructor ( scene , x , y , size , height , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoBox = new MyIsoBox ( scene , x , y , size , height , fillTop , fillLeft , fillRight );","title":"Custom class"},{"location":"shape-isobox/#set-color","text":"Fill color isoBox . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoBox . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoBox.setFillStyle(fillTop, fillLeft, fillRight) to change color.","title":"Set color"},{"location":"shape-isobox/#projection","text":"Get var projection = isoBox . projection ; Set isoBox . setProjection ( value ) or isoBox . projection = value ;","title":"Projection"},{"location":"shape-isobox/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-isotriangle/","text":"Introduction \u00b6 Iso-triangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var isoTriangle = scene . add . isotriangle ( x , y , size , height , reversed , fillTop , fillLeft , fillRight ); Custom class \u00b6 Define class class MyIsoTriangle extends Phaser . GameObjects . IsoTriangle { constructor ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoTriangle = new MyIsoTriangle ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); Set color \u00b6 Fill color isoTriangle . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoTriangle . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoTriangle.setFillStyle(fillTop, fillLeft, fillRight) to change color. Projection \u00b6 Get var projection = isoTriangle . projection ; Set isoTriangle . setProjection ( value ) or isoTriangle . projection = value ; Reverse \u00b6 Get var isReversed = isoTriangle . isReversed ; Set isoTriangle . setReversed ( reversed ); or isotrianhle . reversed = reversed ; Set true to render upside down. Other properties \u00b6 See game object","title":"Iso triangle"},{"location":"shape-isotriangle/#introduction","text":"Iso-triangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-isotriangle/#usage","text":"","title":"Usage"},{"location":"shape-isotriangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-isotriangle/#add-shape-object","text":"var isoTriangle = scene . add . isotriangle ( x , y , size , height , reversed , fillTop , fillLeft , fillRight );","title":"Add shape object"},{"location":"shape-isotriangle/#custom-class","text":"Define class class MyIsoTriangle extends Phaser . GameObjects . IsoTriangle { constructor ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ) { super ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var isoTriangle = new MyIsoTriangle ( scene , x , y , size , height , reversed , fillTop , fillLeft , fillRight );","title":"Custom class"},{"location":"shape-isotriangle/#set-color","text":"Fill color isoTriangle . setFillStyle ( fillTop , fillLeft , fillRight ); Show face isoTriangle . setFaces ( showTop , showLeft , showRight ); showTop , showLeft , showRight : Set true to show that face No tint methods Uses isoTriangle.setFillStyle(fillTop, fillLeft, fillRight) to change color.","title":"Set color"},{"location":"shape-isotriangle/#projection","text":"Get var projection = isoTriangle . projection ; Set isoTriangle . setProjection ( value ) or isoTriangle . projection = value ;","title":"Projection"},{"location":"shape-isotriangle/#reverse","text":"Get var isReversed = isoTriangle . isReversed ; Set isoTriangle . setReversed ( reversed ); or isotrianhle . reversed = reversed ; Set true to render upside down.","title":"Reverse"},{"location":"shape-isotriangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-line/","text":"Introduction \u00b6 Line shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var line = scene . add . line ( x , y , x1 , y1 , x2 , y2 , strokeColor ); // var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha); Custom class \u00b6 Define class class MyCurve extends Phaser . GameObjects . Line { constructor ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); Set color \u00b6 Fill color Get var color = line . fillColor ; Set line . setFillStyle ( color , alpha ); Stroke color Get var color = line . strokeColor ; Set line . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses line.setFillStyle(color, alpha) to change color. Set end points \u00b6 line . setTo ( x1 , y1 , x2 , y2 ); Line width \u00b6 line . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the line. Only used in WebGL. Other properties \u00b6 See game object","title":"Line"},{"location":"shape-line/#introduction","text":"Line shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-line/#usage","text":"","title":"Usage"},{"location":"shape-line/#create-shape","text":"","title":"Create shape"},{"location":"shape-line/#add-shape-object","text":"var line = scene . add . line ( x , y , x1 , y1 , x2 , y2 , strokeColor ); // var line = scene.add.line(x, y, x1, y1, x2, y2, strokeColor, strokeAlpha);","title":"Add shape object"},{"location":"shape-line/#custom-class","text":"Define class class MyCurve extends Phaser . GameObjects . Line { constructor ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var line = new MyLine ( scene , x , y , x1 , y1 , x2 , y2 , strokeColor );","title":"Custom class"},{"location":"shape-line/#set-color","text":"Fill color Get var color = line . fillColor ; Set line . setFillStyle ( color , alpha ); Stroke color Get var color = line . strokeColor ; Set line . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses line.setFillStyle(color, alpha) to change color.","title":"Set color"},{"location":"shape-line/#set-end-points","text":"line . setTo ( x1 , y1 , x2 , y2 );","title":"Set end points"},{"location":"shape-line/#line-width","text":"line . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the line. Only used in WebGL.","title":"Line width"},{"location":"shape-line/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-polygon/","text":"Introduction \u00b6 Polygon shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var polygon = scene . add . polygon ( x , y , points , fillColor ); // var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Note Shift given points to align position (0, 0) Custom class \u00b6 Define class class MyPolygon extends Phaser . GameObjects . Polygon { constructor ( scene , x , y , points , fillColor ) { super ( scene , x , y , points , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var polygon = new MyPolygon ( scene , x , y , points , fillColor ); Color \u00b6 Fill color Get var color = polygon . fillColor ; Set polygon . setFillStyle ( color , alpha ); Stroke color Get var color = polygon . strokeColor ; Set polygon . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses polygon.setFillStyle(color, alpha) to change color. Smooth \u00b6 Smooths the polygon over the number of iterations specified. polygon . smooth ( iterations ); Other properties \u00b6 See game object","title":"Polygon"},{"location":"shape-polygon/#introduction","text":"Polygon shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-polygon/#usage","text":"","title":"Usage"},{"location":"shape-polygon/#create-shape","text":"","title":"Create shape"},{"location":"shape-polygon/#add-shape-object","text":"var polygon = scene . add . polygon ( x , y , points , fillColor ); // var polygon = scene.add.polygon(x, y, points, fillColor, fillAlpha); points : An array of number : [x0, y0, x1, y1, ...] An array of points : [{x:x0, y:y0}, {x:x1, y:y1}, ...] A string : 'x0 y0 x1 y1 ...' Note Shift given points to align position (0, 0)","title":"Add shape object"},{"location":"shape-polygon/#custom-class","text":"Define class class MyPolygon extends Phaser . GameObjects . Polygon { constructor ( scene , x , y , points , fillColor ) { super ( scene , x , y , points , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var polygon = new MyPolygon ( scene , x , y , points , fillColor );","title":"Custom class"},{"location":"shape-polygon/#color","text":"Fill color Get var color = polygon . fillColor ; Set polygon . setFillStyle ( color , alpha ); Stroke color Get var color = polygon . strokeColor ; Set polygon . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses polygon.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-polygon/#smooth","text":"Smooths the polygon over the number of iterations specified. polygon . smooth ( iterations );","title":"Smooth"},{"location":"shape-polygon/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-rectangle/","text":"Introduction \u00b6 Rectangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var rect = scene . add . rectangle ( x , y , width , height , fillColor ); // var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha); Custom class \u00b6 Define class class MyRectangle extends Phaser . GameObjects . Rectangle { constructor ( scene , x , y , width , height , fillColor ) { super ( scene , x , y , width , height , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRectangle ( scene , x , y , width , height , fillColor ); Color \u00b6 Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color. Other properties \u00b6 See game object","title":"Rectangle"},{"location":"shape-rectangle/#introduction","text":"Rectangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-rectangle/#usage","text":"","title":"Usage"},{"location":"shape-rectangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-rectangle/#add-shape-object","text":"var rect = scene . add . rectangle ( x , y , width , height , fillColor ); // var rect = scene.add.rectangle(x, y, width, height, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-rectangle/#custom-class","text":"Define class class MyRectangle extends Phaser . GameObjects . Rectangle { constructor ( scene , x , y , width , height , fillColor ) { super ( scene , x , y , width , height , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRectangle ( scene , x , y , width , height , fillColor );","title":"Custom class"},{"location":"shape-rectangle/#color","text":"Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-rectangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-roundrectangle/","text":"Introduction \u00b6 Round rectangle shape. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexRoundRectanglePlugin' , plugin : RoundRectanglePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create shape \u00b6 Add shape object \u00b6 var rect = scene . add . rexRoundRectangle ( x , y , width , height , radius , fillColor ); // var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha); width , height : Size of rectangle. undefined : Set ot undefined to draw a circle. radius : Radius of four corners. 0 , or undefined : Disable round corner. Number: 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Radius and iteration { radius : radius , iteration : 0 } or { radius : { x : radiusX , y : radiusY }, iteration : 0 } or { radius : { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }, iteration : 0 } iteration : Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc. Deform \u00b6 Rectangle, set radius of 4 corners to 0 . var rect = scene . add . rexRoundRectangle ( x , y , width , height , 0 , fillColor , fillAlpha ); Circle, set width and height to undefined . var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , radius , fillColor , fillAlpha ); Ellipse, set width and height to undefined , and radiusX/radiusY. var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { x : radiusX , y : radiusY }, fillColor , fillAlpha ); Rhombus, set width and height to undefined , and assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Octagon, assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , width , height , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Custom class \u00b6 Define class class MyRoundRectangle extends RexPlugins . GameObjects . RoundRectangle { constructor ( x , y , width , height , radius , fillColor , fillAlpha ) { super ( x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRoundRectangle ( x , y , width , height , radius , fillColor , fillAlpha ); Color \u00b6 Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color. Size \u00b6 Get var width = rect . width ; var height = rect . height ; Set rect . setSize ( width , height ); or rect . width = width ; rect . height = height ; Radius \u00b6 Get var radius = rect . radius ; or var cornerRadius = rect . cornerRadius ; radius : Number, maximum radius of 4 corners. cornerRadius : JSON object of 4 corners. { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Set rect . setRadius ( value ); or rect . radius = radius ; radius : Number : 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Iteration \u00b6 Get var iteration = rect . iteration ; Set rect . setIteration ( value ); or rect . iteration = value ; Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc. Other properties \u00b6 See game object","title":"Round Rectangle"},{"location":"shape-roundrectangle/#introduction","text":"Round rectangle shape. Author: Rex Game object","title":"Introduction"},{"location":"shape-roundrectangle/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"shape-roundrectangle/#usage","text":"Sample code","title":"Usage"},{"location":"shape-roundrectangle/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexRoundRectanglePlugin' , plugin : RoundRectanglePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"shape-roundrectangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-roundrectangle/#add-shape-object","text":"var rect = scene . add . rexRoundRectangle ( x , y , width , height , radius , fillColor ); // var rect = scene.add.rexRoundRectangle(x, y, width, height, radius, fillColor, fillAlpha); width , height : Size of rectangle. undefined : Set ot undefined to draw a circle. radius : Radius of four corners. 0 , or undefined : Disable round corner. Number: 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Radius and iteration { radius : radius , iteration : 0 } or { radius : { x : radiusX , y : radiusY }, iteration : 0 } or { radius : { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }, iteration : 0 } iteration : Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc.","title":"Add shape object"},{"location":"shape-roundrectangle/#deform","text":"Rectangle, set radius of 4 corners to 0 . var rect = scene . add . rexRoundRectangle ( x , y , width , height , 0 , fillColor , fillAlpha ); Circle, set width and height to undefined . var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , radius , fillColor , fillAlpha ); Ellipse, set width and height to undefined , and radiusX/radiusY. var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { x : radiusX , y : radiusY }, fillColor , fillAlpha ); Rhombus, set width and height to undefined , and assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , undefined , undefined , { radius : radius , iteration : 0 }, fillColor , fillAlpha ); Octagon, assign iteration to 0 var rect = scene . add . rexRoundRectangle ( x , y , width , height , { radius : radius , iteration : 0 }, fillColor , fillAlpha );","title":"Deform"},{"location":"shape-roundrectangle/#custom-class","text":"Define class class MyRoundRectangle extends RexPlugins . GameObjects . RoundRectangle { constructor ( x , y , width , height , radius , fillColor , fillAlpha ) { super ( x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var rect = new MyRoundRectangle ( x , y , width , height , radius , fillColor , fillAlpha );","title":"Custom class"},{"location":"shape-roundrectangle/#color","text":"Fill color Get var color = rect . fillColor ; Set rect . setFillStyle ( color , alpha ); Stroke color Get var color = rect . strokeColor ; Set rect . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses rect.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-roundrectangle/#size","text":"Get var width = rect . width ; var height = rect . height ; Set rect . setSize ( width , height ); or rect . width = width ; rect . height = height ;","title":"Size"},{"location":"shape-roundrectangle/#radius","text":"Get var radius = rect . radius ; or var cornerRadius = rect . cornerRadius ; radius : Number, maximum radius of 4 corners. cornerRadius : JSON object of 4 corners. { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, } Set rect . setRadius ( value ); or rect . radius = radius ; radius : Number : 4 corners with the same radius. JSON 4 corners with the same radius X/Y { x : radiusX , y : radiusY } Eeach radius of corner { tl : radius , tr : radius , bl : radius , br : radius } or { tl : { x : radiusX , y : radiusY }, tr : { x : radiusX , y : radiusY }, bl : { x : radiusX , y : radiusY }, br : { x : radiusX , y : radiusY }, }","title":"Radius"},{"location":"shape-roundrectangle/#iteration","text":"Get var iteration = rect . iteration ; Set rect . setIteration ( value ); or rect . iteration = value ; Number of interpolation points in each round corner. Default value is 4 . 0 : Draw a straight line instead of arc.","title":"Iteration"},{"location":"shape-roundrectangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-star/","text":"Introduction \u00b6 Star shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var star = scene . add . star ( x , y , points , innerRadius , outerRadius , fillColor ); // var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha); points : The number of points on the star. Default is 5. innerRadius : The inner radius of the star. Default is 32. outerRadius : The outer radius of the star. Default is 64. Custom class \u00b6 Define class class MyStar extends Phaser . GameObjects . Star { constructor ( scene , x , y , points , innerRadius , outerRadius , fillColor ) { super ( scene , x , y , points , innerRadius , outerRadius , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var star = new MyStar ( scene , x , y , points , innerRadius , outerRadius , fillColor ); Color \u00b6 Fill color Get var color = star . fillColor ; Set star . setFillStyle ( color , alpha ); Stroke color Get var color = star . strokeColor ; Set star . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses star.setFillStyle(color, alpha) to change color. Properties \u00b6 Inner radius Get var innerRadius = star . innerRadius ; Set star . setInnerRadius ( innerRadius ); or star . innerRadius = innerRadius ; Outer radius Get var outerRadius = star . outerRadius ; Set star . setOuterRadius ( outerRadius ); or star . outerRadius = outerRadius ; Points Get var points = star . points ; Set star . setPoints ( points ); or star . points = points ; Other properties \u00b6 See game object","title":"Star"},{"location":"shape-star/#introduction","text":"Star shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-star/#usage","text":"","title":"Usage"},{"location":"shape-star/#create-shape","text":"","title":"Create shape"},{"location":"shape-star/#add-shape-object","text":"var star = scene . add . star ( x , y , points , innerRadius , outerRadius , fillColor ); // var star = scene.add.star(x, y, points, innerRadius, outerRadius, fillColor, fillAlpha); points : The number of points on the star. Default is 5. innerRadius : The inner radius of the star. Default is 32. outerRadius : The outer radius of the star. Default is 64.","title":"Add shape object"},{"location":"shape-star/#custom-class","text":"Define class class MyStar extends Phaser . GameObjects . Star { constructor ( scene , x , y , points , innerRadius , outerRadius , fillColor ) { super ( scene , x , y , points , innerRadius , outerRadius , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var star = new MyStar ( scene , x , y , points , innerRadius , outerRadius , fillColor );","title":"Custom class"},{"location":"shape-star/#color","text":"Fill color Get var color = star . fillColor ; Set star . setFillStyle ( color , alpha ); Stroke color Get var color = star . strokeColor ; Set star . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses star.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-star/#properties","text":"Inner radius Get var innerRadius = star . innerRadius ; Set star . setInnerRadius ( innerRadius ); or star . innerRadius = innerRadius ; Outer radius Get var outerRadius = star . outerRadius ; Set star . setOuterRadius ( outerRadius ); or star . outerRadius = outerRadius ; Points Get var points = star . points ; Set star . setPoints ( points ); or star . points = points ;","title":"Properties"},{"location":"shape-star/#other-properties","text":"See game object","title":"Other properties"},{"location":"shape-triangle/","text":"Introduction \u00b6 Triangle shape, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Create shape \u00b6 Add shape object \u00b6 var triangle = scene . add . triangle ( x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha); Custom class \u00b6 Define class class MyTriangle extends Phaser . GameObjects . Triangle { constructor ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var triangle = new MyTriangle ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); Color \u00b6 Fill color Get var color = triangle . fillColor ; Set triangle . setFillStyle ( color , alpha ); Stroke color Get var color = triangle . strokeColor ; Set triangle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses triangle.setFillStyle(color, alpha) to change color. Set vertices \u00b6 triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 ); Triangle width \u00b6 triangle . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the triangle. Only used in WebGL. Other properties \u00b6 See game object","title":"Triangle"},{"location":"shape-triangle/#introduction","text":"Triangle shape, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"shape-triangle/#usage","text":"","title":"Usage"},{"location":"shape-triangle/#create-shape","text":"","title":"Create shape"},{"location":"shape-triangle/#add-shape-object","text":"var triangle = scene . add . triangle ( x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // var triangle = scene.add.triangle(x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha);","title":"Add shape object"},{"location":"shape-triangle/#custom-class","text":"Define class class MyTriangle extends Phaser . GameObjects . Triangle { constructor ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ) { super ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var triangle = new MyTriangle ( scene , x , y , x1 , y1 , x2 , y2 , x3 , y3 , fillColor );","title":"Custom class"},{"location":"shape-triangle/#color","text":"Fill color Get var color = triangle . fillColor ; Set triangle . setFillStyle ( color , alpha ); Stroke color Get var color = triangle . strokeColor ; Set triangle . setStrokeStyle ( lineWidth , color , alpha ); No tint methods Uses triangle.setFillStyle(color, alpha) to change color.","title":"Color"},{"location":"shape-triangle/#set-vertices","text":"triangle . setTo ( x1 , y1 , x2 , y2 , x3 , y3 );","title":"Set vertices"},{"location":"shape-triangle/#triangle-width","text":"triangle . setLineWidth ( startWidth , endWidth ); endWidth : The end width of the triangle. Only used in WebGL.","title":"Triangle width"},{"location":"shape-triangle/#other-properties","text":"See game object","title":"Other properties"},{"location":"ship/","text":"Introduction \u00b6 Move game object as a space ship by cursor keys. Author: Rex Arcade behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexShip from './plugins/ship.js' ; Install global plugin \u00b6 Enable arcade physics engine and install plugin in configuration of game import ShipPlugin from './plugins/ship-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexShip' , plugin : ShipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var ship = scene . plugins . get ( 'rexShip' ). add ( gameObject , { // maxSpeed: 200, // acceleration: 200, // drag: 0.99, // turnSpeed: 300, // wrap: true, // padding: 0, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); Movement maxSpeed acceleration drag Rotation turnSpeed : Angular velocity Wrap wrap : Set true to enable wrap mode. padding enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default. Set max speed \u00b6 ship . setMaxSpeed ( speed ); Set acceleration \u00b6 ship . setAcceleration ( acc ); Set drag \u00b6 ship . setDrag ( drag ); Set turn speed \u00b6 ship . setTurnSpeed ( angularVelocity ); Set wrap mode \u00b6 ship . setWrapMode ( wrap , padding ); wrap : Set true to enable wrap mode.","title":"Ship"},{"location":"ship/#introduction","text":"Move game object as a space ship by cursor keys. Author: Rex Arcade behavior of game object","title":"Introduction"},{"location":"ship/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"ship/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"ship/#import-class","text":"import rexShip from './plugins/ship.js' ;","title":"Import class"},{"location":"ship/#install-global-plugin","text":"Enable arcade physics engine and install plugin in configuration of game import ShipPlugin from './plugins/ship-plugin.js' ; var config = { // ... physics : { default : 'arcade' , arcade : { // debug: true } }, plugins : { global : [{ key : 'rexShip' , plugin : ShipPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"ship/#create-instance","text":"var ship = scene . plugins . get ( 'rexShip' ). add ( gameObject , { // maxSpeed: 200, // acceleration: 200, // drag: 0.99, // turnSpeed: 300, // wrap: true, // padding: 0, // enable: true, // cursorKeys: scene.input.keyboard.createCursorKeys() }); Movement maxSpeed acceleration drag Rotation turnSpeed : Angular velocity Wrap wrap : Set true to enable wrap mode. padding enable : set false to disable moving. cursorKeys : CursorKey object, using keyboard's cursorKeys by default.","title":"Create instance"},{"location":"ship/#set-max-speed","text":"ship . setMaxSpeed ( speed );","title":"Set max speed"},{"location":"ship/#set-acceleration","text":"ship . setAcceleration ( acc );","title":"Set acceleration"},{"location":"ship/#set-drag","text":"ship . setDrag ( drag );","title":"Set drag"},{"location":"ship/#set-turn-speed","text":"ship . setTurnSpeed ( angularVelocity );","title":"Set turn speed"},{"location":"ship/#set-wrap-mode","text":"ship . setWrapMode ( wrap , padding ); wrap : Set true to enable wrap mode.","title":"Set wrap mode"},{"location":"slider/","text":"Introduction \u00b6 Drag thumb on a slider bar. Author: Rex Behavior of game object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexSlider from './plugins/slider.js' ; Install global plugin \u00b6 Install plugin in configuration of game import SliderPlugin from './plugins/slider-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSlider' , plugin : SliderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var slider = scene . plugins . get ( 'rexSlider' ). add ( gameObject , { // endPoints: [ // {x:0, y:0}, // {x:0, y:0} // ], // value: 0, // enable: true, // valuechangeCallback: null, // valuechangeCallbackScope: null }); endPoints : An array of 2 end-points ( [{x,y}, {x,y}] ) value : Initial value between 0 to 1 enable : Set true to drag thumb valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event Set end-points \u00b6 slider . setEndPoints ( p0x , p0y , p1x , p1y ); // slider.setEndPoints(p0, p1); // p0, p1: {x, y} // slider.setEndPoints(points); // points: [p0, p1] Get value \u00b6 var value = slider . value ; // value: between 0 to 1 // var value = slider.getValue(); // value: between 0 to 1 // var value = slider.getValue(min, max); // value: between min to max Set value \u00b6 slider . value = newValue ; // newValue: between 0 to 1 // slider.setValue(newValue); // newValue: between 0 to 1 // slider.setValue(newValue, min, max); // newValue: between min to max slider . addValue ( inc ); // inc: between 0 to 1 // slider.addValue(inc, min, max); // inc: between min to max Fires valuechange event if new value is not equal to current value. Events \u00b6 Value changed slider . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); newValue: between 0 to 1 prevValue: between 0 to 1 Drag \u00b6 Drag enable \u00b6 slider . setEnable (); // slider.setEnable(false); // disable Is dragging \u00b6 var isDragging = slider . isDragging ;","title":"Slider"},{"location":"slider/#introduction","text":"Drag thumb on a slider bar. Author: Rex Behavior of game object","title":"Introduction"},{"location":"slider/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"slider/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"slider/#import-class","text":"import rexSlider from './plugins/slider.js' ;","title":"Import class"},{"location":"slider/#install-global-plugin","text":"Install plugin in configuration of game import SliderPlugin from './plugins/slider-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexSlider' , plugin : SliderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"slider/#create-instance","text":"var slider = scene . plugins . get ( 'rexSlider' ). add ( gameObject , { // endPoints: [ // {x:0, y:0}, // {x:0, y:0} // ], // value: 0, // enable: true, // valuechangeCallback: null, // valuechangeCallbackScope: null }); endPoints : An array of 2 end-points ( [{x,y}, {x,y}] ) value : Initial value between 0 to 1 enable : Set true to drag thumb valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event","title":"Create instance"},{"location":"slider/#set-end-points","text":"slider . setEndPoints ( p0x , p0y , p1x , p1y ); // slider.setEndPoints(p0, p1); // p0, p1: {x, y} // slider.setEndPoints(points); // points: [p0, p1]","title":"Set end-points"},{"location":"slider/#get-value","text":"var value = slider . value ; // value: between 0 to 1 // var value = slider.getValue(); // value: between 0 to 1 // var value = slider.getValue(min, max); // value: between min to max","title":"Get value"},{"location":"slider/#set-value","text":"slider . value = newValue ; // newValue: between 0 to 1 // slider.setValue(newValue); // newValue: between 0 to 1 // slider.setValue(newValue, min, max); // newValue: between min to max slider . addValue ( inc ); // inc: between 0 to 1 // slider.addValue(inc, min, max); // inc: between min to max Fires valuechange event if new value is not equal to current value.","title":"Set value"},{"location":"slider/#events","text":"Value changed slider . on ( 'valuechange' , function ( newValue , prevValue ){ /* ... */ }); newValue: between 0 to 1 prevValue: between 0 to 1","title":"Events"},{"location":"slider/#drag","text":"","title":"Drag"},{"location":"slider/#drag-enable","text":"slider . setEnable (); // slider.setEnable(false); // disable","title":"Drag enable"},{"location":"slider/#is-dragging","text":"var isDragging = slider . isDragging ;","title":"Is dragging"},{"location":"snap/","text":"Introduction \u00b6 Snap a value to nearest grid slice, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Round \u00b6 var out = Phaser . Math . Snap . To ( value , gap ); // var out = Phaser.Math.Snap.To(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 15 Ceil \u00b6 var out = Phaser . Math . Snap . Ceil ( value , gap ); // var out = Phaser.Math.Snap.Ceil(value, gap, start); Example: set gap to 5 Set value to 12 , return 15 Set value to 14 , return 15 Floor \u00b6 var out = Phaser . Math . Snap . Floor ( value , gap ); // var out = Phaser.Math.Snap.Floor(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 10","title":"Snap"},{"location":"snap/#introduction","text":"Snap a value to nearest grid slice, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"snap/#usage","text":"","title":"Usage"},{"location":"snap/#round","text":"var out = Phaser . Math . Snap . To ( value , gap ); // var out = Phaser.Math.Snap.To(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 15","title":"Round"},{"location":"snap/#ceil","text":"var out = Phaser . Math . Snap . Ceil ( value , gap ); // var out = Phaser.Math.Snap.Ceil(value, gap, start); Example: set gap to 5 Set value to 12 , return 15 Set value to 14 , return 15","title":"Ceil"},{"location":"snap/#floor","text":"var out = Phaser . Math . Snap . Floor ( value , gap ); // var out = Phaser.Math.Snap.Floor(value, gap, start); Example: set gap to 5 Set value to 12 , return 10 Set value to 14 , return 10","title":"Floor"},{"location":"snapshot/","text":"Introduction \u00b6 Get snapshot image, built-in methods of phaser. Author: Richard Davey Usage \u00b6 Get snapshot image \u00b6 Whole canvas game . renderer . snapshot ( callback ); // game.renderer.snapshot(callback, type, encoderOptions); A rectangle area game . renderer . snapshotArea ( x , y , width , height , callback ); // game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions); A pixel game . renderer . snapshotPixel ( x , y , callback ); Parameters: type : 'image/png' encoderOptions : 0.92 callback : function ( image ){ /* ... */ }; image : Image element","title":"Snapshot"},{"location":"snapshot/#introduction","text":"Get snapshot image, built-in methods of phaser. Author: Richard Davey","title":"Introduction"},{"location":"snapshot/#usage","text":"","title":"Usage"},{"location":"snapshot/#get-snapshot-image","text":"Whole canvas game . renderer . snapshot ( callback ); // game.renderer.snapshot(callback, type, encoderOptions); A rectangle area game . renderer . snapshotArea ( x , y , width , height , callback ); // game.renderer.snapshot(x, y, width, height, callback, type, encoderOptions); A pixel game . renderer . snapshotPixel ( x , y , callback ); Parameters: type : 'image/png' encoderOptions : 0.92 callback : function ( image ){ /* ... */ }; image : Image element","title":"Get snapshot image"},{"location":"sprite/","text":"Introduction \u00b6 Display of both static and animated images, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 Texture for static image scene . load . image ( key , url ); Reference: load image Load atlas \u00b6 Atlas for animation images scene . load . atlas ( key , textureURL , atlasURL ); Reference: load atlas Add sprite object \u00b6 var sprite = scene . add . sprite ( x , y , key ); Add sprite from JSON var sprite = scene . make . sprite ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, // anims: { // key: , // repeat: , // ... // }, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] } Custom class \u00b6 Define class class MySprite extends Phaser . GameObjects . Sprite { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var sprite = new MySprite ( scene , x , y , key ); Other properties \u00b6 See game object Animation \u00b6 Create animation \u00b6 See Add animation section . Load animation \u00b6 sprite . anims . load ( key ); // sprite.anims.load(key, startFrame); Play animation \u00b6 Play sprite . play ( key ); // sprite.play(key, ignoreIfPlaying, startFrame); or sprite . anims . play ( key ); // sprite.anims.play(key, ignoreIfPlaying, startFrame); Set current frame sprite . anims . setCurrentFrame ( frame ); Set playback progress sprite . anims . setProgress ( t ); // t: 0~1 Play in reverse sprite . anims . playReverse ( key ); // sprite.playReverse(key, ignoreIfPlaying, startFrame); Reverse the Animation that is already playing sprite . anims . reverse ( key ); Chain next animation sprite . anims . chain ( key ); Reset sprite . anims . chain (); Set to next frame sprite . anims . nextFrame (); Set to previous frame sprite . anims . previousFrame (); Time scale sprite . anims . setTimeScale ( value ); Pause \u00b6 sprite . anims . pause (); // sprite.anims.pause(atFrame); Resume \u00b6 sprite . anims . resume (); // sprite.anims.resume(fromFrame); Stop \u00b6 sprite . anims . stop (); or sprite . anims . stopAfterDelay ( delay ); or sprite . anims . stopOnFrame ( frame ); Restart \u00b6 sprite . anims . restart (); // sprite.anims.restart(includeDelay); Repeat \u00b6 Set repeat sprite . anims . setRepeat ( value ); Set yoyo sprite . anims . setYoyo ( value ); Stop repeat sprite . anims . stopOnRepeat (); Set repeat delay sprite . anims . setRepeatDelay (); Properties \u00b6 Is playing var isPlaying = sprite . anims . isPlaying ; Is paused var isPaused = sprite . anims . isPaused ; Total frames count var frameCount = sprite . anims . getTotalFrames (); Time scale var timescale = sprite . anims . getTimeScale (); Progress Progress ignoring repeats and yoyos var progress = sprite . anims . getProgress (); Repeat Repeat count var repeatCount = sprite . anims . getRepeat (); Yoyo var repeatDelay = sprite . anims . getYoyo (); Repeat delay var repeatDelay = sprite . anims . getRepeatDelay (); Current animation var currentAnim = sprite . anims . currentAnim ; Current frame var currentAnim = sprite . anims . currentFrame ; Events \u00b6 On start sprite . on ( 'animationstart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationstart-' + key , function ( currentAnim , currentFrame , sprite ){}); On restart sprite . on ( 'animationrestart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrestart-' + key , function ( currentAnim , currentFrame , sprite ){}); On complete sprite . on ( 'animationcomplete' , function ( currentAnim , currentFramee , sprite ){}); sprite . on ( 'animationcomplete-' + key , function ( currentAnim , currentFramee , sprite ){}); On update sprite . on ( 'animationupdate' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationupdate-' + key , function ( currentAnim , currentFrame , sprite ){}); On repeat sprite . on ( 'animationrepeat' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrepeat-' + key , function ( currentAnim , currentFrame , sprite ){});","title":"Sprite"},{"location":"sprite/#introduction","text":"Display of both static and animated images, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"sprite/#usage","text":"","title":"Usage"},{"location":"sprite/#load-texture","text":"Texture for static image scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"sprite/#load-atlas","text":"Atlas for animation images scene . load . atlas ( key , textureURL , atlasURL ); Reference: load atlas","title":"Load atlas"},{"location":"sprite/#add-sprite-object","text":"var sprite = scene . add . sprite ( x , y , key ); Add sprite from JSON var sprite = scene . make . sprite ({ x : 0 , y : 0 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, // anims: { // key: , // repeat: , // ... // }, add : true }); key : A string An array of string to pick one element at random x , y , scale.x , scale.y : A number A callback to get return value function () { return 0 ; } Random integer between min and max { randInt : [ min , max ] } Random float between min and max { randFloat : [ min , max ] }","title":"Add sprite object"},{"location":"sprite/#custom-class","text":"Define class class MySprite extends Phaser . GameObjects . Sprite { constructor ( scene , x , y , texture , frame ) { super ( scene , x , y , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta); // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var sprite = new MySprite ( scene , x , y , key );","title":"Custom class"},{"location":"sprite/#other-properties","text":"See game object","title":"Other properties"},{"location":"sprite/#animation","text":"","title":"Animation"},{"location":"sprite/#create-animation","text":"See Add animation section .","title":"Create animation"},{"location":"sprite/#load-animation","text":"sprite . anims . load ( key ); // sprite.anims.load(key, startFrame);","title":"Load animation"},{"location":"sprite/#play-animation","text":"Play sprite . play ( key ); // sprite.play(key, ignoreIfPlaying, startFrame); or sprite . anims . play ( key ); // sprite.anims.play(key, ignoreIfPlaying, startFrame); Set current frame sprite . anims . setCurrentFrame ( frame ); Set playback progress sprite . anims . setProgress ( t ); // t: 0~1 Play in reverse sprite . anims . playReverse ( key ); // sprite.playReverse(key, ignoreIfPlaying, startFrame); Reverse the Animation that is already playing sprite . anims . reverse ( key ); Chain next animation sprite . anims . chain ( key ); Reset sprite . anims . chain (); Set to next frame sprite . anims . nextFrame (); Set to previous frame sprite . anims . previousFrame (); Time scale sprite . anims . setTimeScale ( value );","title":"Play animation"},{"location":"sprite/#pause","text":"sprite . anims . pause (); // sprite.anims.pause(atFrame);","title":"Pause"},{"location":"sprite/#resume","text":"sprite . anims . resume (); // sprite.anims.resume(fromFrame);","title":"Resume"},{"location":"sprite/#stop","text":"sprite . anims . stop (); or sprite . anims . stopAfterDelay ( delay ); or sprite . anims . stopOnFrame ( frame );","title":"Stop"},{"location":"sprite/#restart","text":"sprite . anims . restart (); // sprite.anims.restart(includeDelay);","title":"Restart"},{"location":"sprite/#repeat","text":"Set repeat sprite . anims . setRepeat ( value ); Set yoyo sprite . anims . setYoyo ( value ); Stop repeat sprite . anims . stopOnRepeat (); Set repeat delay sprite . anims . setRepeatDelay ();","title":"Repeat"},{"location":"sprite/#properties","text":"Is playing var isPlaying = sprite . anims . isPlaying ; Is paused var isPaused = sprite . anims . isPaused ; Total frames count var frameCount = sprite . anims . getTotalFrames (); Time scale var timescale = sprite . anims . getTimeScale (); Progress Progress ignoring repeats and yoyos var progress = sprite . anims . getProgress (); Repeat Repeat count var repeatCount = sprite . anims . getRepeat (); Yoyo var repeatDelay = sprite . anims . getYoyo (); Repeat delay var repeatDelay = sprite . anims . getRepeatDelay (); Current animation var currentAnim = sprite . anims . currentAnim ; Current frame var currentAnim = sprite . anims . currentFrame ;","title":"Properties"},{"location":"sprite/#events","text":"On start sprite . on ( 'animationstart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationstart-' + key , function ( currentAnim , currentFrame , sprite ){}); On restart sprite . on ( 'animationrestart' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrestart-' + key , function ( currentAnim , currentFrame , sprite ){}); On complete sprite . on ( 'animationcomplete' , function ( currentAnim , currentFramee , sprite ){}); sprite . on ( 'animationcomplete-' + key , function ( currentAnim , currentFramee , sprite ){}); On update sprite . on ( 'animationupdate' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationupdate-' + key , function ( currentAnim , currentFrame , sprite ){}); On repeat sprite . on ( 'animationrepeat' , function ( currentAnim , currentFrame , sprite ){}); sprite . on ( 'animationrepeat-' + key , function ( currentAnim , currentFrame , sprite ){});","title":"Events"},{"location":"structs-set/","text":"Introduction \u00b6 A collection of unique elements, built-in data structure of phaser. Author: Richard Davey Usage \u00b6 Create instance \u00b6 var set = Phaser . Structs . Set (); or var set = Phaser . Structs . Set ( elements ); Add an element \u00b6 set . set ( element ); Remove an element \u00b6 set . delete ( element ); Remove all elements \u00b6 set . clear (); Has element \u00b6 set . contains ( element ); Get elements \u00b6 var elements = set . entries ; or get a shallow copy of elements var elements = set . getArray (); Element counts \u00b6 var size = set . size ; For each element \u00b6 For when you know this Set will be modified during the iteration. set . each ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) For when you absolutely know this Set won't be modified during the iteration. set . iterate ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) Set operations \u00b6 C = A | B var setC = setA . union ( setB ); C = A & B var setC = setA . intersect ( setB ); C = A - B var setC = setA . difference ( setB );","title":"Set"},{"location":"structs-set/#introduction","text":"A collection of unique elements, built-in data structure of phaser. Author: Richard Davey","title":"Introduction"},{"location":"structs-set/#usage","text":"","title":"Usage"},{"location":"structs-set/#create-instance","text":"var set = Phaser . Structs . Set (); or var set = Phaser . Structs . Set ( elements );","title":"Create instance"},{"location":"structs-set/#add-an-element","text":"set . set ( element );","title":"Add an element"},{"location":"structs-set/#remove-an-element","text":"set . delete ( element );","title":"Remove an element"},{"location":"structs-set/#remove-all-elements","text":"set . clear ();","title":"Remove all elements"},{"location":"structs-set/#has-element","text":"set . contains ( element );","title":"Has element"},{"location":"structs-set/#get-elements","text":"var elements = set . entries ; or get a shallow copy of elements var elements = set . getArray ();","title":"Get elements"},{"location":"structs-set/#element-counts","text":"var size = set . size ;","title":"Element counts"},{"location":"structs-set/#for-each-element","text":"For when you know this Set will be modified during the iteration. set . each ( function ( element , index ) { // return false; // return false to cancel iteration }, scope ) For when you absolutely know this Set won't be modified during the iteration. set . iterate ( function ( element , index ) { // return false; // return false to cancel iteration }, scope )","title":"For each element"},{"location":"structs-set/#set-operations","text":"C = A | B var setC = setA . union ( setB ); C = A & B var setC = setA . intersect ( setB ); C = A - B var setC = setA . difference ( setB );","title":"Set operations"},{"location":"tagtext/","text":"Introduction \u00b6 Displays text with multi-color, font face, or font size with tags. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexTagTextPlugin' , plugin : TagTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text object \u00b6 var tags = { tag0 : { color : 'red' }, tag1 : { color : 'blue' } }; var txt = scene . add . rexTagText ( x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); // var txt = scene.add.rexTagText(x, y, '<style=\"tag0\">h</style>ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags }); Properties of a tag { fontFamily : 'Courier' , // or 'family', 'font-family' fontSize : '16px' , // or 'size', 'font-size' fontStyle : 'bold italic' , // or 'style', 'font-style' color : 'red' , // or 'font-color' stroke : { color : 'blue' , thinkness : 1 }, shadow : { color : 'black' , offsetX : 2 , offsetY : 2 , blur : 2 }, underline : { // or 'u' color : 'blue' , thinkness : 3 , offset : - 1 }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // area: key, } Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null } tags : { //tag0: { // color: 'red' //}, //tag1: { // color: 'blue' //} }, // resolution: 1 } Add text from JSON var txt = scene . make . rexTagText ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' , tags : {} }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom Custom class \u00b6 Define class class MyText extends TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); Wrap \u00b6 Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width ); Content \u00b6 Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '<style=\"name1\">wor</style>ld' ); // txt.text = '<style=\"name1\">wor</style>ld'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Image \u00b6 Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config} Hit area of words \u00b6 Hitting events \u00b6 Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope ) Draw hit-areas \u00b6 txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height ); Inline style \u00b6 Define style inline text. <style='color:red'>Some text</style> <style='size:30px'>Some text</style> <style='stroke:blue 1px'>Some text</style> (color thinkness) <style='shadow:blue 2px 2px 2px'>Some text</style> (color offsetX offsetY blur) <style='underline:blue 3px -1px'>Some text</style> (color thinkness offset) Or mix them <style='color:red;size:30px'>Some text</style>","title":"Tag Text"},{"location":"tagtext/#introduction","text":"Displays text with multi-color, font face, or font size with tags. Author: Rex Game object","title":"Introduction"},{"location":"tagtext/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"tagtext/#usage","text":"Sample code","title":"Usage"},{"location":"tagtext/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'rexTagTextPlugin' , plugin : TagTextPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"tagtext/#add-text-object","text":"var tags = { tag0 : { color : 'red' }, tag1 : { color : 'blue' } }; var txt = scene . add . rexTagText ( x , y , '<style=\"tag0\">h</style>ello' , { tags : tags }); // var txt = scene.add.rexTagText(x, y, '<style=\"tag0\">h</style>ello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00', tags:tags }); Properties of a tag { fontFamily : 'Courier' , // or 'family', 'font-family' fontSize : '16px' , // or 'size', 'font-size' fontStyle : 'bold italic' , // or 'style', 'font-style' color : 'red' , // or 'font-color' stroke : { color : 'blue' , thinkness : 1 }, shadow : { color : 'black' , offsetX : 2 , offsetY : 2 , blur : 2 }, underline : { // or 'u' color : 'blue' , thinkness : 3 , offset : - 1 }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // area: key, } Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, underline : { color : '#000' , thinkness : 0 , offset : 0 }, // align: 'left', // Equal to halign halign : 'left' , // 'left'|'center'|'right' valign : 'top' , // 'top'|'center'|'bottom' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , lineSpacing : 0 , testString : '|M\u00c9qgy' , wrap : { mode : 'none' // 0|'none'|1|'word'|2|'char'|'character' width : null } tags : { //tag0: { // color: 'red' //}, //tag1: { // color: 'blue' //} }, // resolution: 1 } Add text from JSON var txt = scene . make . rexTagText ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , backgroundColor : '#ff00ff' , tags : {} }, add : true }); Alignment halign , or align : Horizontal alignment. left , center , right valign : Vertical alignment. top , center , bottom","title":"Add text object"},{"location":"tagtext/#custom-class","text":"Define class class MyText extends TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , '<style=\"tag0\">h</style>ello' , { tags : tags });","title":"Custom class"},{"location":"tagtext/#wrap","text":"Wrap by word or character. var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wrap : { mode : 'word' // 0|'none'|1|'word'|2|'char'|'character' width : 300 } } }); Wrap mode Get var mode = txt . style . wrapMode ; Set txt . setWrapMode ( mode ); 'none' , or 0 : No wrap 'word' , or 1 : Word wrap 'character' , or 2 : Character wrap Wrap width Get var width = txt . style . wrapWidth ; Set txt . setWrapWidth ( width );","title":"Wrap"},{"location":"tagtext/#content","text":"Get source text var curContent = txt . text ; Get plain text var plainText = txt . getPlainText (); Set txt . setText ( '<style=\"name1\">wor</style>ld' ); // txt.text = '<style=\"name1\">wor</style>ld';","title":"Content"},{"location":"tagtext/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); // font: {fontFamily, fontSize, fontStyle} txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"tagtext/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Underline color, thickness Get var color = txt . style . underlineColor ; var thickness = txt . style . underlineThickness ; var offset = txt . style . underlineOffset ; Set txt . setUnderline ( color , thinkness , ofset ); txt . setUnderlineColor ( color ); txt . setUnderlineThinkness ( thinkness ); txt . setUnderlineOffset ( ofset ); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"tagtext/#image","text":"Uses texture key as image key by default. Add image render information txt . addImage ( imgKey , { key : textureKey , frame : frameName , width : undefined , height : undefined , y : 0 , left : 0 , right : 0 }); imgKey : Image key used in text content, i.e. [img=imgKey] . key : Texture key. frame : Frame name. width : Render width, set undefined to use the cut width of frame. height : Render height, set undefined to use the cut height of frame. y : Extra offset y. left : Left padding space. Right : Right padding space. Add some image render informations txt . addImage ( data ); data : {imgKey, config}","title":"Image"},{"location":"tagtext/#hit-area-of-words","text":"","title":"Hit area of words"},{"location":"tagtext/#hitting-events","text":"Pointer down txt . on ( 'areadown' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areadown-' + key , function ( pointer , localX , localY ){ }, scope ) Pointer up txt . on ( 'areaup' , function ( key , pointer , localX , localY ){ }, scope ) or txt . on ( 'areaup-' + key , function ( pointer , localX , localY ){ }, scope )","title":"Hitting events"},{"location":"tagtext/#draw-hit-areas","text":"txt . drawAreaBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw hit-areas"},{"location":"tagtext/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"tagtext/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"tagtext/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"tagtext/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"tagtext/#inline-style","text":"Define style inline text. <style='color:red'>Some text</style> <style='size:30px'>Some text</style> <style='stroke:blue 1px'>Some text</style> (color thinkness) <style='shadow:blue 2px 2px 2px'>Some text</style> (color offsetX offsetY blur) <style='underline:blue 3px -1px'>Some text</style> (color thinkness offset) Or mix them <style='color:red;size:30px'>Some text</style>","title":"Inline style"},{"location":"tcrp-player/","text":"Introduction \u00b6 Player of T ime- C ommand- R ecorder- P layer, to run commands on time. Author: Rex Member of scene Source code \u00b6 Link Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTCRP from './plugins/tcrp.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var player = scene . plugins . get ( 'rexTextTyping' ). addPlayer ( scene , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0, // 'abs'|'absolute'|0|'inc'|'increment'|1 // commands: [], // [[dt, command], [dt, command], ...] // timeScale: 1, // 0~1 // scope: undefined }); timeUnit : see next section dtMode : see next section commands : see next section timeScale Load commands \u00b6 player . load ( commands , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0 // 'abs'|'absolute'|0|'inc'|'increment'|1 }); Commands : see also Run commands [ [ dt , command ], [ dt , command ], ... ] Format of each row : [ dt , fnName , param0 , param1 , ...] // [dt, callback, param0, param1, ...] [ dt , [ fnName , param0 , param1 , ...]] // [dt, [callback, param0, param1, ...]] [ dt , [ command0 , command1 , ...]] timeUnit: time-unit of dt 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second dtMode: mode of counting dt 'abs' , 'absolute' , or 0 : timeout = dt 'inc' , 'increment' , 1 : timeout = dt + previous-timeout Start playing \u00b6 player . start (); // player.start(startAt); // start-at time in ms Events \u00b6 Complete player . on ( 'complete' , function ( player ){}); Run command player . on ( 'runcommand' , function ( commands , scope ){}); Pause, Resume, stop playing \u00b6 player . pause (); player . resume (); player . stop (); Seek elapsed time \u00b6 player . seek ( time ); // elapsed time in ms State of player \u00b6 var isPlaying = player . isPlaying ; var completed = player . completed ; var now = player . now ; Time-scale \u00b6 Set player . setTimeScale ( value ); // 0~1 // player.timeScale = value; Get var timeScale = player . timeScale ;","title":"Player"},{"location":"tcrp-player/#introduction","text":"Player of T ime- C ommand- R ecorder- P layer, to run commands on time. Author: Rex Member of scene","title":"Introduction"},{"location":"tcrp-player/#source-code","text":"Link","title":"Source code"},{"location":"tcrp-player/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"tcrp-player/#import-class","text":"import rexTCRP from './plugins/tcrp.js' ;","title":"Import class"},{"location":"tcrp-player/#install-global-plugin","text":"Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"tcrp-player/#create-instance","text":"var player = scene . plugins . get ( 'rexTextTyping' ). addPlayer ( scene , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0, // 'abs'|'absolute'|0|'inc'|'increment'|1 // commands: [], // [[dt, command], [dt, command], ...] // timeScale: 1, // 0~1 // scope: undefined }); timeUnit : see next section dtMode : see next section commands : see next section timeScale","title":"Create instance"},{"location":"tcrp-player/#load-commands","text":"player . load ( commands , scope , { // timeUnit: 0, // 'ms'|0|'s'|'sec'|1 // dtMode: 0 // 'abs'|'absolute'|0|'inc'|'increment'|1 }); Commands : see also Run commands [ [ dt , command ], [ dt , command ], ... ] Format of each row : [ dt , fnName , param0 , param1 , ...] // [dt, callback, param0, param1, ...] [ dt , [ fnName , param0 , param1 , ...]] // [dt, [callback, param0, param1, ...]] [ dt , [ command0 , command1 , ...]] timeUnit: time-unit of dt 'ms' , or 0 : dt in millisecond 's' , 'sec' , or 1 : dt in second dtMode: mode of counting dt 'abs' , 'absolute' , or 0 : timeout = dt 'inc' , 'increment' , 1 : timeout = dt + previous-timeout","title":"Load commands"},{"location":"tcrp-player/#start-playing","text":"player . start (); // player.start(startAt); // start-at time in ms","title":"Start playing"},{"location":"tcrp-player/#events","text":"Complete player . on ( 'complete' , function ( player ){}); Run command player . on ( 'runcommand' , function ( commands , scope ){});","title":"Events"},{"location":"tcrp-player/#pause-resume-stop-playing","text":"player . pause (); player . resume (); player . stop ();","title":"Pause, Resume, stop playing"},{"location":"tcrp-player/#seek-elapsed-time","text":"player . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"tcrp-player/#state-of-player","text":"var isPlaying = player . isPlaying ; var completed = player . completed ; var now = player . now ;","title":"State of player"},{"location":"tcrp-player/#time-scale","text":"Set player . setTimeScale ( value ); // 0~1 // player.timeScale = value; Get var timeScale = player . timeScale ;","title":"Time-scale"},{"location":"tcrp-recoder/","text":"Introduction \u00b6 Recorder of T ime- C ommand- R ecorder- P layer, to store commands with time. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTCRP from './plugins/tcrp.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var recorder = scene . plugins . get ( 'rexTextTyping' ). addRecorder ( scene ); Start recording \u00b6 recorder . start (); // recorder.start(startAt); // start-at time in ms Push commands \u00b6 recorder . addCommand ([ fnName , param0 , param1 , ...]); // recorder.addCommand([command0, command1, ...]); // recorder.addCommand([fnName, param0, param1, ...], offset); // time-offset in ms See also Run commands Get commands \u00b6 var commands = recorder . getCommands (); // get a shallow copy of commands // var commands = recorder.getCommands(true); // get reference of commands Format of return commands: [ [ dt , [ command ]], [ dt , [ command0 , command1 ]], ... ] Pause, Resume, stop recording \u00b6 recorder . pause (); recorder . resume (); recorder . stop (); Seek elapsed time \u00b6 recorder . seek ( time ); // elapsed time in ms State of recorder \u00b6 var isRecording = recorder . isRecording ; var now = recorder . now ; Time-scale \u00b6 var timeScale = recorder . timeScale ; recorder . timeScale = 0.5 ;","title":"Recoder"},{"location":"tcrp-recoder/#introduction","text":"Recorder of T ime- C ommand- R ecorder- P layer, to store commands with time. Author: Rex Member of scene","title":"Introduction"},{"location":"tcrp-recoder/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"tcrp-recoder/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"tcrp-recoder/#import-class","text":"import rexTCRP from './plugins/tcrp.js' ;","title":"Import class"},{"location":"tcrp-recoder/#install-global-plugin","text":"Install plugin in configuration of game import TCRPPlugin from './plugins/tcrp-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTCRP' , plugin : TCRPPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"tcrp-recoder/#create-instance","text":"var recorder = scene . plugins . get ( 'rexTextTyping' ). addRecorder ( scene );","title":"Create instance"},{"location":"tcrp-recoder/#start-recording","text":"recorder . start (); // recorder.start(startAt); // start-at time in ms","title":"Start recording"},{"location":"tcrp-recoder/#push-commands","text":"recorder . addCommand ([ fnName , param0 , param1 , ...]); // recorder.addCommand([command0, command1, ...]); // recorder.addCommand([fnName, param0, param1, ...], offset); // time-offset in ms See also Run commands","title":"Push commands"},{"location":"tcrp-recoder/#get-commands","text":"var commands = recorder . getCommands (); // get a shallow copy of commands // var commands = recorder.getCommands(true); // get reference of commands Format of return commands: [ [ dt , [ command ]], [ dt , [ command0 , command1 ]], ... ]","title":"Get commands"},{"location":"tcrp-recoder/#pause-resume-stop-recording","text":"recorder . pause (); recorder . resume (); recorder . stop ();","title":"Pause, Resume, stop recording"},{"location":"tcrp-recoder/#seek-elapsed-time","text":"recorder . seek ( time ); // elapsed time in ms","title":"Seek elapsed time"},{"location":"tcrp-recoder/#state-of-recorder","text":"var isRecording = recorder . isRecording ; var now = recorder . now ;","title":"State of recorder"},{"location":"tcrp-recoder/#time-scale","text":"var timeScale = recorder . timeScale ; recorder . timeScale = 0.5 ;","title":"Time-scale"},{"location":"text/","text":"Introduction \u00b6 Drawing text on canvas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add text object \u00b6 var txt = scene . add . text ( x , y , 'hello' ); // var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, align : 'left' , // 'left'|'center'|'right'|'justify' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , rtl : false , testString : '|M\u00c9qgy' , wordWrap : { width : null , callback : null , callbackScope : null , useAdvancedWrap : false }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . text ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , // 'left'|'center'|'right'|'justify' backgroundColor : '#ff00ff' }, add : true }); Custom class \u00b6 Define class class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , 'hello' ); Word wrap \u00b6 Wrap by width var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wordWrap : { width : 300 } } }); Wrap by callback var txt = scene . make . text ({ x : 400 , y : 300 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : 0.5 , style : { font : 'bold 30px Arial' , fill : 'white' , wordWrap : { callback : wordWrap , scope : this } } }); function wordWrap ( text , textObject ) { // First parameter will be the string that needs to be wrapped // Second parameter will be the Text game object that is being wrapped currently // This wrap just puts each word on a separate line, but you could inject your own // language-specific logic here. var words = text . split ( ' ' ); // You can return either an array of individual lines or a string with line breaks (e.g. \\n) in // the correct place. return words ; } Wrap width Get var width = txt . style . wordWrapWidth ; var useAdvancedWrap = txt . style . wordWrapUseAdvanced ; Set txt . setWordWrapWidth ( width ); // txt.setWordWrapWidth(width, useAdvancedWrap); Wrap callback Get var callback = txt . style . wordWrapCallback ; var scope = txt . style . wordWrapCallbackScope ; Set txt . setWordWrapCallback ( callback , scope ); Content \u00b6 Get var content = txt . text ; Set txt . setText ( 'world' ); // txt.text = 'world'; Set style \u00b6 txt . setStyle ( style ); txt . setFont ( font ); txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style ); Set align \u00b6 txt . setAlign ( align ); align : 'left' , 'center' , 'right' , 'justify' Color \u00b6 Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled ); Line spacing \u00b6 This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value ); Padding \u00b6 Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom} Max lines \u00b6 Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max ); Fixed size \u00b6 Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Text"},{"location":"text/#introduction","text":"Drawing text on canvas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"text/#usage","text":"","title":"Usage"},{"location":"text/#add-text-object","text":"var txt = scene . add . text ( x , y , 'hello' ); // var txt = scene.add.text(x, y, 'hello', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }); Default style { fontFamily : 'Courier' , fontSize : '16px' , fontStyle : '' , backgroundColor : null , color : '#fff' , stroke : '#fff' , strokeThickness : 0 , shadow : { offsetX : 0 , offsetY : 0 , color : '#000' , blur : 0 , stroke : false , fill : false }, align : 'left' , // 'left'|'center'|'right'|'justify' padding : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, maxLines : 0 , lineSpacing : 0 , fixedWidth : 0 , fixedHeight : 0 , rtl : false , testString : '|M\u00c9qgy' , wordWrap : { width : null , callback : null , callbackScope : null , useAdvancedWrap : false }, metrics : false // metrics: { // ascent: 0, // descent: 0, // fontSize: 0 // } // resolution: 1 } Add text from JSON var txt = scene . make . text ({ x : 100 , y : 100 , padding : { left : 64 , right : 16 , top : 20 , bottom : 40 //x: 32, // 32px padding on the left/right //y: 16 // 16px padding on the top/bottom }, text : 'Text\\nGame Object\\nCreated from config' , style : { fontSize : '64px' , fontFamily : 'Arial' , color : '#ffffff' , align : 'center' , // 'left'|'center'|'right'|'justify' backgroundColor : '#ff00ff' }, add : true });","title":"Add text object"},{"location":"text/#custom-class","text":"Define class class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var txt = new MyText ( scene , x , y , 'hello' );","title":"Custom class"},{"location":"text/#word-wrap","text":"Wrap by width var txt = scene . make . text ({ x : 400 , y : 100 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : { x : 0.5 , y : 0.5 }, style : { font : 'bold 25px Arial' , fill : 'white' , wordWrap : { width : 300 } } }); Wrap by callback var txt = scene . make . text ({ x : 400 , y : 300 , text : 'The sky above the port was the color of television, tuned to a dead channel.' , origin : 0.5 , style : { font : 'bold 30px Arial' , fill : 'white' , wordWrap : { callback : wordWrap , scope : this } } }); function wordWrap ( text , textObject ) { // First parameter will be the string that needs to be wrapped // Second parameter will be the Text game object that is being wrapped currently // This wrap just puts each word on a separate line, but you could inject your own // language-specific logic here. var words = text . split ( ' ' ); // You can return either an array of individual lines or a string with line breaks (e.g. \\n) in // the correct place. return words ; } Wrap width Get var width = txt . style . wordWrapWidth ; var useAdvancedWrap = txt . style . wordWrapUseAdvanced ; Set txt . setWordWrapWidth ( width ); // txt.setWordWrapWidth(width, useAdvancedWrap); Wrap callback Get var callback = txt . style . wordWrapCallback ; var scope = txt . style . wordWrapCallbackScope ; Set txt . setWordWrapCallback ( callback , scope );","title":"Word wrap"},{"location":"text/#content","text":"Get var content = txt . text ; Set txt . setText ( 'world' ); // txt.text = 'world';","title":"Content"},{"location":"text/#set-style","text":"txt . setStyle ( style ); txt . setFont ( font ); txt . setFontFamily ( family ); txt . setFontSize ( size ); txt . setFontStyle ( style );","title":"Set style"},{"location":"text/#set-align","text":"txt . setAlign ( align ); align : 'left' , 'center' , 'right' , 'justify'","title":"Set align"},{"location":"text/#color","text":"Text color Get var color = txt . style . color ; Set txt . setColor ( color ); or txt . setFill ( color ); Stroke color, thickness Get var color = txt . style . stroke ; var thickness = txt . style . strokeThickness ; Set txt . setStroke ( color , thickness ); Clear txt . setStroke (); Background color Get var color = txt . style . backgroundColor ; Set txt . setBackgroundColor ( color ); Shadow Get var color = txt . style . shadowColor ; var offsetX = txt . style . shadowOffsetX ; var offsetY = txt . style . shadowOffsetY ; var blur = txt . style . shadowBlur ; var stroke = txt . style . shadowStroke ; var enabled = txt . style . shadowFill ; Set txt . setShadow ( x , y , color , blur , shadowStroke , shadowFill ); txt . setShadowOffset ( x , y ); txt . setShadowColor ( color ); txt . setShadowBlur ( blur ); txt . setShadowStroke ( enabled ); txt . setShadowFill ( enabled );","title":"Color"},{"location":"text/#line-spacing","text":"This value is added to the height of the font when calculating the overall line height. Get var lineSpacing = txt . style . lineSpacing ; Set txt . setLineSpacing ( value );","title":"Line spacing"},{"location":"text/#padding","text":"Get var left = txt . padding . left ; var top = txt . padding . top ; var right = txt . padding . right ; var bottom = txt . padding . bottom ; Set txt . setPadding ( left , top , right , bottom ); // txt.setPadding(padding); // padding: {left, top, right, bottom}","title":"Padding"},{"location":"text/#max-lines","text":"Get var maxLines = txt . style . maxLines ; Set txt . setMaxLines ( max );","title":"Max lines"},{"location":"text/#fixed-size","text":"Get var width = txt . style . fixedWidth ; var height = txt . style . fixedHeight ; Set txt . setFixedSize ( width , height );","title":"Fixed size"},{"location":"textedit/","text":"Introduction \u00b6 Create an input text object above a text object to edit string content. Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextEdit from './plugins/textedit.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextEditPlugin from './plugins/textedit-plugin.js' ; var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexTextEdit' , plugin : TextEditPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Open text editor \u00b6 An easy way to open a text editor. var editor = scene . plugins . get ( 'rexTextEdit' ). edit ( textObject , config ); // var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose); textObject : Text object, bbcode text object , or tag text boject . config : config.type : text (default), or password number config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Store reference of text editor at textObject._editor . Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close() Create instance \u00b6 var txt = scene . add . text ( x , y , 'abc' , { fixedWidth : 200 , fixedHeight : 30 , }); var editor = scene . plugins . get ( 'rexTextEdit' ). add ( txt ); Open editor \u00b6 editor . open ( config ); // editor.open(config, onClose); config config.type : text (default), or password config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Is opened \u00b6 var isOpened = editor . isOpened ; Close editor \u00b6 editor . close (); Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Edit"},{"location":"textedit/#introduction","text":"Create an input text object above a text object to edit string content. Author: Rex Behavior of text object","title":"Introduction"},{"location":"textedit/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"textedit/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"textedit/#import-class","text":"import rexTextEdit from './plugins/textedit.js' ;","title":"Import class"},{"location":"textedit/#install-global-plugin","text":"Install plugin in configuration of game import TextEditPlugin from './plugins/textedit-plugin.js' ; var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexTextEdit' , plugin : TextEditPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install global plugin"},{"location":"textedit/#open-text-editor","text":"An easy way to open a text editor. var editor = scene . plugins . get ( 'rexTextEdit' ). edit ( textObject , config ); // var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose); textObject : Text object, bbcode text object , or tag text boject . config : config.type : text (default), or password number config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened. Store reference of text editor at textObject._editor . Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Open text editor"},{"location":"textedit/#create-instance","text":"var txt = scene . add . text ( x , y , 'abc' , { fixedWidth : 200 , fixedHeight : 30 , }); var editor = scene . plugins . get ( 'rexTextEdit' ). add ( txt );","title":"Create instance"},{"location":"textedit/#open-editor","text":"editor . open ( config ); // editor.open(config, onClose); config config.type : text (default), or password config.text : Initial string content. config.onTextChanged : Callback invoked when input text changed. function ( textObject , text ) { textObject . text = text ; } More configuration parameters ... onClose : Callback invoked when text editor is closed. var callback = function ( textObject ) { } Create a text editor ( input element ) above text object. Size, font size, font family, font color, background color of text editor will be equal to text object. Text object will be invisible when text editor is opened.","title":"Open editor"},{"location":"textedit/#is-opened","text":"var isOpened = editor . isOpened ;","title":"Is opened"},{"location":"textedit/#close-editor","text":"editor . close (); Text editor will be closed when Press enter key, or Touch outside of editor, or Open another text editor, or Call editor.close()","title":"Close editor"},{"location":"textpage/","text":"Introduction \u00b6 Display text page by page on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextPage from './plugins/textpage.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextPagePlugin from './plugins/textpage-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextPage' , plugin : TextPagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var txt = scene . add . text ( x , y , '' , { wordWrap : { width : 500 }, maxLines : 7 }); var page = scene . plugins . get ( 'rexTextPage' ). add ( txt , { //text: '', // content in string or array }); text : content in string or array, optional Set content \u00b6 Set text page . setText ( text ); // content in string or array Append text page . appendText ( text ); // content in string or array Show page \u00b6 Display current page page . showPage (); Display next page page . showNextPage (); Display previous page page . showPreviousPage (); Note Initial page index is -1 , so user could call page.showNextPage() to display first page. Get lines of page \u00b6 Get lines of current page var lines = page . getPage (); Get lines of next page var lines = page . getNextPage (); Get lines of previous page var lines = page . getPreviousPage (); Other properties \u00b6 Is last page var isLastPage = page . isLastPage ; Is first page var isLastPage = page . isFirstPage ; Current page index var pageIndex = page . pageIndex ; Number of pages var pageIndex = page . pageCount ;","title":"Page"},{"location":"textpage/#introduction","text":"Display text page by page on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object","title":"Introduction"},{"location":"textpage/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"textpage/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"textpage/#import-class","text":"import rexTextPage from './plugins/textpage.js' ;","title":"Import class"},{"location":"textpage/#install-global-plugin","text":"Install plugin in configuration of game import TextPagePlugin from './plugins/textpage-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextPage' , plugin : TextPagePlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"textpage/#create-instance","text":"var txt = scene . add . text ( x , y , '' , { wordWrap : { width : 500 }, maxLines : 7 }); var page = scene . plugins . get ( 'rexTextPage' ). add ( txt , { //text: '', // content in string or array }); text : content in string or array, optional","title":"Create instance"},{"location":"textpage/#set-content","text":"Set text page . setText ( text ); // content in string or array Append text page . appendText ( text ); // content in string or array","title":"Set content"},{"location":"textpage/#show-page","text":"Display current page page . showPage (); Display next page page . showNextPage (); Display previous page page . showPreviousPage (); Note Initial page index is -1 , so user could call page.showNextPage() to display first page.","title":"Show page"},{"location":"textpage/#get-lines-of-page","text":"Get lines of current page var lines = page . getPage (); Get lines of next page var lines = page . getNextPage (); Get lines of previous page var lines = page . getPreviousPage ();","title":"Get lines of page"},{"location":"textpage/#other-properties","text":"Is last page var isLastPage = page . isLastPage ; Is first page var isLastPage = page . isFirstPage ; Current page index var pageIndex = page . pageIndex ; Number of pages var pageIndex = page . pageCount ;","title":"Other properties"},{"location":"texttyping/","text":"Introduction \u00b6 Typing text on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexTextTyping from './plugins/texttyping.js' ; Install global plugin \u00b6 Install plugin in configuration of game import TextTypingPlugin from './plugins/texttyping-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextTyping' , plugin : TextTypingPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var typing = scene . plugins . get ( 'rexTextTyping' ). add ( txt , { //speed: 333, // typing speed in ms //typeMode: 0, //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle' //setTextCallback: function(text, isLastChar, insertIdx){ return text; } // callback before set-text //setTextCallbackScope: null }); Configuration speed : Typing speed in ms. typeMode : 'left-to-right' , or 0 : Typing characters from left to right. 'right-to-left' , or 1 : Typing characters from right to left. 'middle-to-sides' , or 2 : Typing characters from middle to sides. 'sides-to-middle' , or 3 : Typing characters from sides to middle. setTextCallback : Callback befor set-text, to decorate display text. function ( text , isLastChar , insertIdx ) { return text ; } setTextCallbackScope : Scope of setTextCallback function. Start typing \u00b6 typing . start ( 'ABCDEFG' ); // typing.start('ABCDEFG', 333); // speed in ms Typing more text \u00b6 typing . appendText ( text ); Stop typing \u00b6 typing . stop (); // typing.stop(true);; // stop and show all text Pause/Resume typing \u00b6 Pause typing typing . pause (); Resume typing typing . resume (); Set typing speed \u00b6 typing . setTypeSpeed ( speed ); // speed in ms Set speed in typing event or setTextCallback to change typing speed of remaining text. Set typing mode \u00b6 typing . setTypeMode ( mode ); typeMode : 'left-to-right' , or 0 : typing characters from left to right. 'right-to-left' , or 1 : typing characters from right to left. 'middle-to-sides' , or 2 : typing characters from middle to sides, optional. 'sides-to-middle' , or 3 : typing characters from sides to middle. Events \u00b6 On typing : typing . on ( 'type' , function (){}); On typing completed : typing . on ( 'complete' , function ( typing , txt ){}); Status \u00b6 Is typing var isTyping = typing . isTyping ;","title":"Typing"},{"location":"texttyping/#introduction","text":"Typing text on text object , bbcode text object , or tag text boject . Author: Rex Behavior of text object","title":"Introduction"},{"location":"texttyping/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"texttyping/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"texttyping/#import-class","text":"import rexTextTyping from './plugins/texttyping.js' ;","title":"Import class"},{"location":"texttyping/#install-global-plugin","text":"Install plugin in configuration of game import TextTypingPlugin from './plugins/texttyping-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexTextTyping' , plugin : TextTypingPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"texttyping/#create-instance","text":"var typing = scene . plugins . get ( 'rexTextTyping' ). add ( txt , { //speed: 333, // typing speed in ms //typeMode: 0, //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle' //setTextCallback: function(text, isLastChar, insertIdx){ return text; } // callback before set-text //setTextCallbackScope: null }); Configuration speed : Typing speed in ms. typeMode : 'left-to-right' , or 0 : Typing characters from left to right. 'right-to-left' , or 1 : Typing characters from right to left. 'middle-to-sides' , or 2 : Typing characters from middle to sides. 'sides-to-middle' , or 3 : Typing characters from sides to middle. setTextCallback : Callback befor set-text, to decorate display text. function ( text , isLastChar , insertIdx ) { return text ; } setTextCallbackScope : Scope of setTextCallback function.","title":"Create instance"},{"location":"texttyping/#start-typing","text":"typing . start ( 'ABCDEFG' ); // typing.start('ABCDEFG', 333); // speed in ms","title":"Start typing"},{"location":"texttyping/#typing-more-text","text":"typing . appendText ( text );","title":"Typing more text"},{"location":"texttyping/#stop-typing","text":"typing . stop (); // typing.stop(true);; // stop and show all text","title":"Stop typing"},{"location":"texttyping/#pauseresume-typing","text":"Pause typing typing . pause (); Resume typing typing . resume ();","title":"Pause/Resume typing"},{"location":"texttyping/#set-typing-speed","text":"typing . setTypeSpeed ( speed ); // speed in ms Set speed in typing event or setTextCallback to change typing speed of remaining text.","title":"Set typing speed"},{"location":"texttyping/#set-typing-mode","text":"typing . setTypeMode ( mode ); typeMode : 'left-to-right' , or 0 : typing characters from left to right. 'right-to-left' , or 1 : typing characters from right to left. 'middle-to-sides' , or 2 : typing characters from middle to sides, optional. 'sides-to-middle' , or 3 : typing characters from sides to middle.","title":"Set typing mode"},{"location":"texttyping/#events","text":"On typing : typing . on ( 'type' , function (){}); On typing completed : typing . on ( 'complete' , function ( typing , txt ){});","title":"Events"},{"location":"texttyping/#status","text":"Is typing var isTyping = typing . isTyping ;","title":"Status"},{"location":"texture/","text":"Introduction \u00b6 Textures cache, built-in object of phaser. Author: Richard Davey Usage \u00b6 Image texture \u00b6 Load image texture scene . load . image ( key , url ); Reference: Loader Get image texture var texture = scene . textures . get ( key ); var image = texture . getSourceImage (); // var width = image.width; // var height = image.height; Get pixel \u00b6 var color = scene . textures . getPixel ( x , y , key ); // var color = scene.textures.getPixel(x, y, key, frame); Properties of color r : 0 ~ 255 g : 0 ~ 255 b : 0 ~ 255 a : 0 ~ 255 color : color integer var alpha = scene . textures . getPixelAlpha ( x , y , key ); // var alpha = scene.textures.getPixelAlpha(x, y, key, frame); alpha : 0 ~ 255 Return null if the coordinates were out of bounds. Generate texture from array \u00b6 var config = { data : data , // 3x3: // [ '...', // '...', // '...' ] pixelWidth : 1 , // pixel width of each data pixelHeight : 1 , // pixel height of each data preRender : null , // callback, function(canvas, ctx) {} postRender : null , // callback, function(canvas, ctx) {} canvas : null , // create a canvas if null resizeCanvas : true , clearCanvas : true }; var texture = scene . textures . generate ( key , config ); Has key \u00b6 var hasKey = scene . textures . exists ( key ); Remove texture \u00b6 Remove texture stored in texture cache. scene . textures . remove ( key ); Get base64 \u00b6 var s = scene . textures . getBase64 ( key ); // type= 'image/png', encoderOptions= 0.92 // var s = scene.textures.getBase64(key, frame, type, encoderOptions); Texture \u00b6 Get texture \u00b6 var texture = scene . textures . get ( key ); Has frame \u00b6 var hasFrame = texture . has ( frameName ); Add frame \u00b6 var frame = texture . add ( frameName , sourceIndex , x , y , width , height ); key : Texture key. frameName : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x , y : The x/y coordinate of the top-left of this Frame. width , height : The width/height of this Frame. Remove frame \u00b6 var removed = texture . remove ( frameName ); Frame object \u00b6 Get frame \u00b6 var frame = scene . textures . getFrame ( key , frame ); Properties \u00b6 frame.source.image : Image of texture source. frame.cutX : X position within the source image to cut from. frame.cutY : Y position within the source image to cut from. frame.cutWidth : The width of the area in the source image to cut. frame.cutHeight : The height of the area in the source image to cut.","title":"Texture"},{"location":"texture/#introduction","text":"Textures cache, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"texture/#usage","text":"","title":"Usage"},{"location":"texture/#image-texture","text":"Load image texture scene . load . image ( key , url ); Reference: Loader Get image texture var texture = scene . textures . get ( key ); var image = texture . getSourceImage (); // var width = image.width; // var height = image.height;","title":"Image texture"},{"location":"texture/#get-pixel","text":"var color = scene . textures . getPixel ( x , y , key ); // var color = scene.textures.getPixel(x, y, key, frame); Properties of color r : 0 ~ 255 g : 0 ~ 255 b : 0 ~ 255 a : 0 ~ 255 color : color integer var alpha = scene . textures . getPixelAlpha ( x , y , key ); // var alpha = scene.textures.getPixelAlpha(x, y, key, frame); alpha : 0 ~ 255 Return null if the coordinates were out of bounds.","title":"Get pixel"},{"location":"texture/#generate-texture-from-array","text":"var config = { data : data , // 3x3: // [ '...', // '...', // '...' ] pixelWidth : 1 , // pixel width of each data pixelHeight : 1 , // pixel height of each data preRender : null , // callback, function(canvas, ctx) {} postRender : null , // callback, function(canvas, ctx) {} canvas : null , // create a canvas if null resizeCanvas : true , clearCanvas : true }; var texture = scene . textures . generate ( key , config );","title":"Generate texture from array"},{"location":"texture/#has-key","text":"var hasKey = scene . textures . exists ( key );","title":"Has key"},{"location":"texture/#remove-texture","text":"Remove texture stored in texture cache. scene . textures . remove ( key );","title":"Remove texture"},{"location":"texture/#get-base64","text":"var s = scene . textures . getBase64 ( key ); // type= 'image/png', encoderOptions= 0.92 // var s = scene.textures.getBase64(key, frame, type, encoderOptions);","title":"Get base64"},{"location":"texture/#texture","text":"","title":"Texture"},{"location":"texture/#get-texture","text":"var texture = scene . textures . get ( key );","title":"Get texture"},{"location":"texture/#has-frame","text":"var hasFrame = texture . has ( frameName );","title":"Has frame"},{"location":"texture/#add-frame","text":"var frame = texture . add ( frameName , sourceIndex , x , y , width , height ); key : Texture key. frameName : The name of this Frame. The name is unique within the Texture. sourceIndex : The index of the TextureSource that this Frame is a part of. x , y : The x/y coordinate of the top-left of this Frame. width , height : The width/height of this Frame.","title":"Add frame"},{"location":"texture/#remove-frame","text":"var removed = texture . remove ( frameName );","title":"Remove frame"},{"location":"texture/#frame-object","text":"","title":"Frame object"},{"location":"texture/#get-frame","text":"var frame = scene . textures . getFrame ( key , frame );","title":"Get frame"},{"location":"texture/#properties","text":"frame.source.image : Image of texture source. frame.cutX : X position within the source image to cut from. frame.cutY : Y position within the source image to cut from. frame.cutWidth : The width of the area in the source image to cut. frame.cutHeight : The height of the area in the source image to cut.","title":"Properties"},{"location":"tilemap/","text":"Introduction \u00b6 Display of tiles map, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load tile map \u00b6 scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV Add tile map object \u00b6 Create tile map Create map from tiled var map = scene . add . tilemap ( key ); // var map = this.make.tilemap({ key: 'map' }); Create map from 2d array var config = { data : tileIdxArray , // [ [], [], ... ] tileWidth : 32 , tileHeight : 32 , width : 10 , height : 10 } var map = this . make . tilemap ( config ); Create map from csv var config = { key : 'map' , // csv file tileWidth : 32 , tileHeight : 32 } var map = this . make . tilemap ( config ); Add tile set image var tileset = map . addTilesetImage ( tilesetName , key ); // key: texture key // var tileset = map.addTilesetImage(tilesetName); // key = tilesetName // var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid); Create layer object to render tile image, a tile map object could have many layers. Layer object is a kind of game object. Static var layer = map . createStaticLayer ( layerID , tileset ); // var layer = map.createStaticLayer(layerID, tileset, x, y); // x, y : offset in pxiels Dynamic var layer = map . createDynamicLayer ( layerID , tileset ); // var layer = map.createDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Blank dynamic var layer = map . createBlankDynamicLayer ( layerID , tileset ); // var layer = map.createBlankDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Create sprite objects with tile ID (optional) var sprites = map . createFromObjects ( name , id , spriteConfig ); // var sprites = map.createFromObjects(name, id, spriteConfig, scene); name: name of the object layer id: gid (number), or id (number), or name (string) spriteConfig: The config object to pass into the Sprite creator (i.e. scene.make.sprite ). Extend spriteConfig with properties of object ( type , x , y , rotation , visible , width , height , ... etc) Map \u00b6 Select current layer \u00b6 map . setLayer ( layer ); // layer name, layer index // map.layer = layer; Set tile size \u00b6 map . setBaseTileSize ( tileWidth , tileHeight ); Draw on graphics \u00b6 var styleConfig = { tileColor : new Phaser . Display . Color ( 105 , 210 , 231 , 150 ), // null collidingTileColor : new Phaser . Display . Color ( 243 , 134 , 48 , 200 ), // null faceColor : new Phaser . Display . Color ( 40 , 39 , 37 , 150 ) // null } map . renderDebug ( graphics , styleConfig ); // map.renderDebug(graphics, styleConfig, layer); Layer \u00b6 Render order \u00b6 layer . setRenderOrder ( renderOrder ); renderOrder 0 , or 'right-down' 1 , or 'left-down' 2 , or 'right-up' 3 , or 'left-up' Tile \u00b6 Get tile \u00b6 var tile = map . getTileAt ( tileX , tileY ); // var tile = map.getTileAt(tileX, tileY, true); // return a Tile object with an index of -1 for empty tile Get tiles within \u00b6 var tiles = map . getTilesWithin ( tileX , tileY , width , height ); var filteringOptions = { // isNotEmpty: false, // isColliding: false, // hasInterestingFace: false }; var tiles = map . getTilesWithin ( tileX , tileY , width , height , filteringOptions ); Get tiles within world XY \u00b6 var tiles = map . getTilesWithinWorldXY ( worldX , worldY , width , height ); // var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height, filteringOptions, camera, layer); Get tiles within shape \u00b6 vat tiles = map . getTilesWithinShape ( shape ); // vat tiles = map.getTilesWithinShape(shape, filteringOptions, camera, layer); Shape: new Phaser.Geom.Rectangle(x0, y0, width, height) new Phaser.Geom.Line(x0, y0, x1, y1) new Phaser.Geom.Circle(x, y, radius) new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2) For each tile in layer \u00b6 var callback = function ( tile ) { /* ... */ }; map . forEachTile ( callback , context ); // map.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); var callback = function ( tile ) { /* ... */ }; layer . forEachTile ( callback , context ); // layer.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); Tiled index \u00b6 var index = tile . index ; tile . index = index ; Properties \u00b6 var properties = tile . properties ; // object or null var value = properties [ key ]; tile . properties [ key ] = value ; Tile at world XY \u00b6 World XY at map var hasTile = map . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer); XY at layer var hasTile = layer . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = layer.hasTileAtWorldXY(worldX, worldY, camera); Collision \u00b6 Enable collision \u00b6 map . setCollision ( index ); // index: tile index // map.setCollision(index, true, recalculateFaces, updateLayer); map . setCollision ( indexes ); // indexes: an array of tile index // map.setCollision(indexes, true, recalculateFaces, updateLayer); map . setCollisionBetween ( start , stop ); // indexes from `start` to `stop` map . setCollisionByExclusion ( indexes ); // indexes: an array of tile index map . setCollisionByProperty ({ key : value }); // enable collision if value of tile property 'key' is equal to 'value' map . setCollisionFromCollisionGroup (); // set by collision group data in tileset collision editor Collision editor Disable collision \u00b6 map . setCollision ( index , false ); map . setCollision ( indexes , false ); map . setCollisionBetween ( start , stop , false ); map . setCollisionByProperty ({ key : value }, false ); map . setCollisionFromCollisionGroup ( false ); Tile set \u00b6 Get collision group \u00b6 var collisionGroup = tileset . getTileCollisionGroup ( tile . index ); // array of collision shapes, or null Types of collision shape ( collisionGroup.objects ) object.rectangle (object.x, object.y, object.width, object.height) object.ellipse (object.x, object.y, object.width, object.height) object.polygon (object.x, object.y, [{x,y}, {x,y}, ...]) object.polyline (object.x, object.y, [{x,y}, {x,y}, ...]) Change texture of tileset \u00b6 var texture = scene . sys . textures . get ( key ); tileset . setImage ( texture ); Dynamic layer \u00b6 Fill tiles \u00b6 map . fill ( index ); // map.fill(index, tileX, tileY, width, height); layer . fill ( index ); // layer.fill(index, tileX, tileY, width, height); Randomize \u00b6 map . randomize ( tileX , tileY , width , height , indexes ); // indexes: array of tile index layer . randomize ( tileX , tileY , width , height , indexes ); var weightedIndexes = [ { index : 0 , weight : 4 }, { index : [ 0 , 1 ], weight : 4 } ] map . weightedRandomize ( tileX , tileY , width , height , weightedIndexes ); // weightedIndexes: [{index, weight}, ...] Copy tiles \u00b6 map . copy ( srcTileX , srcTileY , width , height , destTileX , destTileY ); // indexes: array of tile index Put tile at \u00b6 map . putTileAt ( tile , tileX , tileY ); // tile: Tile object or tile index map . putTilesAt ( tilesArray , tileX , tileY ); // tilesArray: 1d/2d array of Tile object or tile index Replace tiles \u00b6 map . replaceByIndex ( findIndex , newIndex ); // map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer); Swap tiles \u00b6 map . replaceByIndex ( indexA , indexB ); // map.replaceByIndex(indexA, indexB, tileX, tileY, width, height, layer); Shuffle tiles \u00b6 map . shuffle (); // map.shuffle(tileX, tileY, width, height, layer); Convert to static layer \u00b6 staticLayer = map . convertLayerToStatic ( dynamicLayer ); dynamicLayer will be destroyed.","title":"Tile map"},{"location":"tilemap/#introduction","text":"Display of tiles map, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tilemap/#usage","text":"","title":"Usage"},{"location":"tilemap/#load-tile-map","text":"scene . load . tilemapWeltmeister ( key , url ); // JSON scene . load . tilemapCSV ( key , url ); // CSV","title":"Load tile map"},{"location":"tilemap/#add-tile-map-object","text":"Create tile map Create map from tiled var map = scene . add . tilemap ( key ); // var map = this.make.tilemap({ key: 'map' }); Create map from 2d array var config = { data : tileIdxArray , // [ [], [], ... ] tileWidth : 32 , tileHeight : 32 , width : 10 , height : 10 } var map = this . make . tilemap ( config ); Create map from csv var config = { key : 'map' , // csv file tileWidth : 32 , tileHeight : 32 } var map = this . make . tilemap ( config ); Add tile set image var tileset = map . addTilesetImage ( tilesetName , key ); // key: texture key // var tileset = map.addTilesetImage(tilesetName); // key = tilesetName // var tileset = map.addTilesetImage(tilesetName, key, tileWidth, tileHeight, tileMargin, tileSpacing, gid); Create layer object to render tile image, a tile map object could have many layers. Layer object is a kind of game object. Static var layer = map . createStaticLayer ( layerID , tileset ); // var layer = map.createStaticLayer(layerID, tileset, x, y); // x, y : offset in pxiels Dynamic var layer = map . createDynamicLayer ( layerID , tileset ); // var layer = map.createDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Blank dynamic var layer = map . createBlankDynamicLayer ( layerID , tileset ); // var layer = map.createBlankDynamicLayer(layerID, tileset, x, y); // x, y : offset in pxiels Create sprite objects with tile ID (optional) var sprites = map . createFromObjects ( name , id , spriteConfig ); // var sprites = map.createFromObjects(name, id, spriteConfig, scene); name: name of the object layer id: gid (number), or id (number), or name (string) spriteConfig: The config object to pass into the Sprite creator (i.e. scene.make.sprite ). Extend spriteConfig with properties of object ( type , x , y , rotation , visible , width , height , ... etc)","title":"Add tile map object"},{"location":"tilemap/#map","text":"","title":"Map"},{"location":"tilemap/#select-current-layer","text":"map . setLayer ( layer ); // layer name, layer index // map.layer = layer;","title":"Select current layer"},{"location":"tilemap/#set-tile-size","text":"map . setBaseTileSize ( tileWidth , tileHeight );","title":"Set tile size"},{"location":"tilemap/#draw-on-graphics","text":"var styleConfig = { tileColor : new Phaser . Display . Color ( 105 , 210 , 231 , 150 ), // null collidingTileColor : new Phaser . Display . Color ( 243 , 134 , 48 , 200 ), // null faceColor : new Phaser . Display . Color ( 40 , 39 , 37 , 150 ) // null } map . renderDebug ( graphics , styleConfig ); // map.renderDebug(graphics, styleConfig, layer);","title":"Draw on graphics"},{"location":"tilemap/#layer","text":"","title":"Layer"},{"location":"tilemap/#render-order","text":"layer . setRenderOrder ( renderOrder ); renderOrder 0 , or 'right-down' 1 , or 'left-down' 2 , or 'right-up' 3 , or 'left-up'","title":"Render order"},{"location":"tilemap/#tile","text":"","title":"Tile"},{"location":"tilemap/#get-tile","text":"var tile = map . getTileAt ( tileX , tileY ); // var tile = map.getTileAt(tileX, tileY, true); // return a Tile object with an index of -1 for empty tile","title":"Get tile"},{"location":"tilemap/#get-tiles-within","text":"var tiles = map . getTilesWithin ( tileX , tileY , width , height ); var filteringOptions = { // isNotEmpty: false, // isColliding: false, // hasInterestingFace: false }; var tiles = map . getTilesWithin ( tileX , tileY , width , height , filteringOptions );","title":"Get tiles within"},{"location":"tilemap/#get-tiles-within-world-xy","text":"var tiles = map . getTilesWithinWorldXY ( worldX , worldY , width , height ); // var tiles = map.getTilesWithinWorldXY(worldX, worldY, width, height, filteringOptions, camera, layer);","title":"Get tiles within world XY"},{"location":"tilemap/#get-tiles-within-shape","text":"vat tiles = map . getTilesWithinShape ( shape ); // vat tiles = map.getTilesWithinShape(shape, filteringOptions, camera, layer); Shape: new Phaser.Geom.Rectangle(x0, y0, width, height) new Phaser.Geom.Line(x0, y0, x1, y1) new Phaser.Geom.Circle(x, y, radius) new Phaser.Geom.Triangle(x0, y0, x1, y1, x2, y2)","title":"Get tiles within shape"},{"location":"tilemap/#for-each-tile-in-layer","text":"var callback = function ( tile ) { /* ... */ }; map . forEachTile ( callback , context ); // map.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions); var callback = function ( tile ) { /* ... */ }; layer . forEachTile ( callback , context ); // layer.forEachTile(callback, context, tileX, tileY, width, height, filteringOptions);","title":"For each tile in layer"},{"location":"tilemap/#tiled-index","text":"var index = tile . index ; tile . index = index ;","title":"Tiled index"},{"location":"tilemap/#properties","text":"var properties = tile . properties ; // object or null var value = properties [ key ]; tile . properties [ key ] = value ;","title":"Properties"},{"location":"tilemap/#tile-at-world-xy","text":"World XY at map var hasTile = map . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = map.hasTileAtWorldXY(worldX, worldY, camera, layer); XY at layer var hasTile = layer . hasTileAtWorldXY ( worldX , worldY ); // true/false // hasTile = layer.hasTileAtWorldXY(worldX, worldY, camera);","title":"Tile at world XY"},{"location":"tilemap/#collision","text":"","title":"Collision"},{"location":"tilemap/#enable-collision","text":"map . setCollision ( index ); // index: tile index // map.setCollision(index, true, recalculateFaces, updateLayer); map . setCollision ( indexes ); // indexes: an array of tile index // map.setCollision(indexes, true, recalculateFaces, updateLayer); map . setCollisionBetween ( start , stop ); // indexes from `start` to `stop` map . setCollisionByExclusion ( indexes ); // indexes: an array of tile index map . setCollisionByProperty ({ key : value }); // enable collision if value of tile property 'key' is equal to 'value' map . setCollisionFromCollisionGroup (); // set by collision group data in tileset collision editor Collision editor","title":"Enable collision"},{"location":"tilemap/#disable-collision","text":"map . setCollision ( index , false ); map . setCollision ( indexes , false ); map . setCollisionBetween ( start , stop , false ); map . setCollisionByProperty ({ key : value }, false ); map . setCollisionFromCollisionGroup ( false );","title":"Disable collision"},{"location":"tilemap/#tile-set","text":"","title":"Tile set"},{"location":"tilemap/#get-collision-group","text":"var collisionGroup = tileset . getTileCollisionGroup ( tile . index ); // array of collision shapes, or null Types of collision shape ( collisionGroup.objects ) object.rectangle (object.x, object.y, object.width, object.height) object.ellipse (object.x, object.y, object.width, object.height) object.polygon (object.x, object.y, [{x,y}, {x,y}, ...]) object.polyline (object.x, object.y, [{x,y}, {x,y}, ...])","title":"Get collision group"},{"location":"tilemap/#change-texture-of-tileset","text":"var texture = scene . sys . textures . get ( key ); tileset . setImage ( texture );","title":"Change texture of tileset"},{"location":"tilemap/#dynamic-layer","text":"","title":"Dynamic layer"},{"location":"tilemap/#fill-tiles","text":"map . fill ( index ); // map.fill(index, tileX, tileY, width, height); layer . fill ( index ); // layer.fill(index, tileX, tileY, width, height);","title":"Fill tiles"},{"location":"tilemap/#randomize","text":"map . randomize ( tileX , tileY , width , height , indexes ); // indexes: array of tile index layer . randomize ( tileX , tileY , width , height , indexes ); var weightedIndexes = [ { index : 0 , weight : 4 }, { index : [ 0 , 1 ], weight : 4 } ] map . weightedRandomize ( tileX , tileY , width , height , weightedIndexes ); // weightedIndexes: [{index, weight}, ...]","title":"Randomize"},{"location":"tilemap/#copy-tiles","text":"map . copy ( srcTileX , srcTileY , width , height , destTileX , destTileY ); // indexes: array of tile index","title":"Copy tiles"},{"location":"tilemap/#put-tile-at","text":"map . putTileAt ( tile , tileX , tileY ); // tile: Tile object or tile index map . putTilesAt ( tilesArray , tileX , tileY ); // tilesArray: 1d/2d array of Tile object or tile index","title":"Put tile at"},{"location":"tilemap/#replace-tiles","text":"map . replaceByIndex ( findIndex , newIndex ); // map.replaceByIndex(findIndex, newIndex, tileX, tileY, width, height, layer);","title":"Replace tiles"},{"location":"tilemap/#swap-tiles","text":"map . replaceByIndex ( indexA , indexB ); // map.replaceByIndex(indexA, indexB, tileX, tileY, width, height, layer);","title":"Swap tiles"},{"location":"tilemap/#shuffle-tiles","text":"map . shuffle (); // map.shuffle(tileX, tileY, width, height, layer);","title":"Shuffle tiles"},{"location":"tilemap/#convert-to-static-layer","text":"staticLayer = map . convertLayerToStatic ( dynamicLayer ); dynamicLayer will be destroyed.","title":"Convert to static layer"},{"location":"tilesprite/","text":"Introduction \u00b6 Display of repeating texture, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Load texture \u00b6 scene . load . image ( key , url ); Reference: load image Add tile sprite object \u00b6 var image = scene . add . tileSprite ( x , y , width , height , textureKey ); Add tile sprite from JSON var image = scene . make . tileSprite ({ x : 0 , y : 0 , width : 512 , height : 512 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true }); Custom class \u00b6 Define class class MyTileSprite extends Phaser . GameObjects . TileSprite { constructor ( scene , x , y , width , height , texture , frame ) { super ( scene , x , y , width , height , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyTileSprite ( scene , x , y , key ); Properties of tiles \u00b6 Position image . setTilePosition ( x , y ); or image . tilePositionX = x ; image . tilePositionY = y ; Scale image . setTileScale ( scaleX , scaleY ); or image . tileScaleX = scaleX ; image . tileScaleY = scaleY ; Other properties \u00b6 See game object Create mask \u00b6 var mask = image . createBitmapMask (); See mask","title":"Tile sprite"},{"location":"tilesprite/#introduction","text":"Display of repeating texture, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tilesprite/#usage","text":"","title":"Usage"},{"location":"tilesprite/#load-texture","text":"scene . load . image ( key , url ); Reference: load image","title":"Load texture"},{"location":"tilesprite/#add-tile-sprite-object","text":"var image = scene . add . tileSprite ( x , y , width , height , textureKey ); Add tile sprite from JSON var image = scene . make . tileSprite ({ x : 0 , y : 0 , width : 512 , height : 512 , key : '' , // angle: 0, // alpha: 1 // flipX: true, // flipY: true, // scale : { // x: 1, // y: 1 //}, add : true });","title":"Add tile sprite object"},{"location":"tilesprite/#custom-class","text":"Define class class MyTileSprite extends Phaser . GameObjects . TileSprite { constructor ( scene , x , y , width , height , texture , frame ) { super ( scene , x , y , width , height , texture , frame ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var image = new MyTileSprite ( scene , x , y , key );","title":"Custom class"},{"location":"tilesprite/#properties-of-tiles","text":"Position image . setTilePosition ( x , y ); or image . tilePositionX = x ; image . tilePositionY = y ; Scale image . setTileScale ( scaleX , scaleY ); or image . tileScaleX = scaleX ; image . tileScaleY = scaleY ;","title":"Properties of tiles"},{"location":"tilesprite/#other-properties","text":"See game object","title":"Other properties"},{"location":"tilesprite/#create-mask","text":"var mask = image . createBitmapMask (); See mask","title":"Create mask"},{"location":"timeline/","text":"Introduction \u00b6 Update timers, built-in object of phaser. Each scene has a timeline ( scene.time ) already. Author: Richard Davey Usage \u00b6 Time-scale \u00b6 Get time-scale var timeScale = scene . time . timeScale ; Set time-scale scene . time . timeScale = 2 ; Pause or resume \u00b6 Pause scene . time . paused = true ; Resume scene . time . paused = false ; Get current game-time \u00b6 var time = scene . time . now ; Game-time is not system time. Create timeline object \u00b6 var timeline = new Phaser . Time . Clock ( scene );","title":"Timeline"},{"location":"timeline/#introduction","text":"Update timers, built-in object of phaser. Each scene has a timeline ( scene.time ) already. Author: Richard Davey","title":"Introduction"},{"location":"timeline/#usage","text":"","title":"Usage"},{"location":"timeline/#time-scale","text":"Get time-scale var timeScale = scene . time . timeScale ; Set time-scale scene . time . timeScale = 2 ;","title":"Time-scale"},{"location":"timeline/#pause-or-resume","text":"Pause scene . time . paused = true ; Resume scene . time . paused = false ;","title":"Pause or resume"},{"location":"timeline/#get-current-game-time","text":"var time = scene . time . now ; Game-time is not system time.","title":"Get current game-time"},{"location":"timeline/#create-timeline-object","text":"var timeline = new Phaser . Time . Clock ( scene );","title":"Create timeline object"},{"location":"timer/","text":"Introduction \u00b6 Execute callback when time-out, built-in object of phaser. Author: Richard Davey Usage \u00b6 Start timer \u00b6 Looped timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , loop : true }); Repeat timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , repeat : 4 }); Oneshot timer var timer = scene . time . delayedCall ( delay , callback , args , scope ); // delay in ms All properties of timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , args : [], callbackScope : thisArg , loop : fasle , repeat : 0 , startAt : 0 , timeScale : 1 , paused : false }); Status of timer \u00b6 Get elapsed time var elapsed = timer . getElapsed (); // ms var elapsed = timer . getElapsedSeconds (); // sec Get repeat count var repeat = timer . getRepeatCount (); Gets the progress of the current iteration var progress = timer . getProgress (); // elapsed / delay Gets the progress of the timer overall, factoring in repeats. var progress = timer . getOverallProgress (); // totalElapsed / totalDuration Get delay time var delay = timer . delay ; // ms Is paused var isPaused = timer . paused ; Get time-scale var timeScale = timer . timeScale ; Methods of timer \u00b6 Pause timer timer . paused = true ; Resume timer timer . paused = false ; Remove timer from timeline timer . remove (); Set time-scale timer . timeScale = 2 ;","title":"Timer"},{"location":"timer/#introduction","text":"Execute callback when time-out, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"timer/#usage","text":"","title":"Usage"},{"location":"timer/#start-timer","text":"Looped timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , loop : true }); Repeat timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , //args: [], callbackScope : thisArg , repeat : 4 }); Oneshot timer var timer = scene . time . delayedCall ( delay , callback , args , scope ); // delay in ms All properties of timer var timer = scene . time . addEvent ({ delay : 500 , // ms callback : callback , args : [], callbackScope : thisArg , loop : fasle , repeat : 0 , startAt : 0 , timeScale : 1 , paused : false });","title":"Start timer"},{"location":"timer/#status-of-timer","text":"Get elapsed time var elapsed = timer . getElapsed (); // ms var elapsed = timer . getElapsedSeconds (); // sec Get repeat count var repeat = timer . getRepeatCount (); Gets the progress of the current iteration var progress = timer . getProgress (); // elapsed / delay Gets the progress of the timer overall, factoring in repeats. var progress = timer . getOverallProgress (); // totalElapsed / totalDuration Get delay time var delay = timer . delay ; // ms Is paused var isPaused = timer . paused ; Get time-scale var timeScale = timer . timeScale ;","title":"Status of timer"},{"location":"timer/#methods-of-timer","text":"Pause timer timer . paused = true ; Resume timer timer . paused = false ; Remove timer from timeline timer . remove (); Set time-scale timer . timeScale = 2 ;","title":"Methods of timer"},{"location":"tools/","text":"Texture altas \u00b6 Texture-packer Leshy SpriteSheet Tool Export to JSON-TP-Hash","title":"Tools"},{"location":"tools/#texture-altas","text":"Texture-packer Leshy SpriteSheet Tool Export to JSON-TP-Hash","title":"Texture altas"},{"location":"touchevents/","text":"Introduction \u00b6 Built-in touch/mouse events of phaser. Author: Richard Davey Usage \u00b6 Quick start \u00b6 Is touching var pointer = scene . input . activePointer ; if ( pointer . isDown ) { var touchX = pointer . x ; var touchY = pointer . y ; // ... } On any touching start scene . input . on ( 'pointerdown' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On any touching end scene . input . on ( 'pointerup' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On touch game object start gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); On touch game object end gameObject . setInteractive (). on ( 'pointerup' , function ( pointer , localX , localY , event ){ // ... }) Reference : Properties of point Register interactive \u00b6 Call gameObject.setInteractive(...) to register touch input of Game Object before listening touching events. Set hit area from width & height (rectangle) of the texture gameObject . setInteractive (); Set hit area from game object gameObject . setInteractive ( shape , callback ); Circle shape : new Phaser.Geom.Circle(x, y, radius) callback : Phaser.Geom.Circle.Contains Ellipse shape : new Phaser.Geom.Ellipse(x, y, width, height) callback : Phaser.Geom.Ellipse.Contains Rectangle shape : new Phaser.Geom.Rectangle(x, y, width, height) callback : Phaser.Geom.Rectangle.Contains Triangle shape : new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) callback : Phaser.Geom.Triangle.Contains Polygon shape : new Phaser.Geom.Polygon(points) callback : Phaser.Geom.Polygon.Contains Hexagon shape : new Phaser.Geom.rexHexagon(x, y, size, type) callback : Phaser.Geom.Polygon.Contains Rhombus shape : new Phaser.Geom.rexRhombus(x, y, width, height) callback : Phaser.Geom.Polygon.Contains Note: x , y relate to the top-left of the gameObject. Set hit area from input plugin scene . input . setHitArea ( gameObjects , shape , callback ); Circle scene . input . setHitAreaCircle ( gameObjects , x , y , radius ); // scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains Ellipse scene . input . setHitAreaEllipse ( gameObjects , x , y , width , height ); // scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains Rectangle scene . input . setHitAreaRectangle ( gameObjects , x , y , width , height ); // scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains Triangle scene . input . setHitAreaTriangle ( gameObjects , x1 , y1 , x2 , y2 , x3 , y3 ); // scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains Note: x , y relate to the top-left of the gameObject. Set interactive configuration gameObject . setInteractive ({ hitArea : shape , hitAreaCallback : callback , draggable : false , dropZone : false , useHandCursor : false , cursor : CSSString , pixelPerfect : false , alphaTolerance : 1 }); Hit area shape Pixel alpha pixelPerfect : true alphaTolerance : 1 (0-255) Custom hit-testing function hitAreaCallback function ( shape , x , y , gameObject ) { return hit ; // true/false } shape : Hit area object x , y : Local position of texture. gameObject : Game object. Dragging draggable : true Drop zone dropZone : true Cursor cursor : CSS string useHandCursor : true Pixel perfect hit-testing This is an expensive process, should only be enabled on Game Objects that really need it. Disable interactive \u00b6 Disable temporary gameObject . disableInteractive (); Remove interaction gameObject . removeInteractive (); Top only \u00b6 When set to true this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to false it will emit events from all Game Objects below a Pointer, not just the top one. Get var topOnly = scene . input . topOnly ; Set scene . input . topOnly = topOnly ; scene . input . setTopOnly ( topOnly ); Touch events \u00b6 Trigger these events from top scene to bottom scene. Events on touched Game object gameObject . on ( 'pointerdown' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerup' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointermove' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerover' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerout' , function ( pointer , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , localX , localY , event ) { event . stopPropagation (); } Event on input plugin for each touched Game object scene . input . on ( 'gameobjectdown' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectup' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectmove' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectover' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectout' , function ( pointer , gameObject , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , gameObject , event ) { event . stopPropagation (); } Events to get all touched Game Objects scene . input . on ( 'pointerdown' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerdownoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointerup' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerupoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointermove' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerover' , function ( pointer , justOver ){ /* ... */ }); scene . input . on ( 'pointerout' , function ( pointer , justOut ){ /* ... */ }); scene . input . on ( 'gameout' , function ( timeStamp , domEvent ){ /* ... */ }); scene . input . on ( 'gameover' , function ( timeStamp , domEvent ){ /* ... */ }); Dragging \u00b6 Enable dragging \u00b6 Enable dragging when registering interactive gameObject . setInteractive ({ draggable : true }); Enable dragging and add it to dragging detecting list after registered interactive scene . input . setDraggable ( gameObject ); Enable dragging gameObject . input . draggable = true ; Disable dragging \u00b6 Remove Game Object from dragging detecting list scene . input . setDraggable ( gameObject , false ); Disable dragging but keep it in dragging detecting list gameObject . input . draggable = false ; Dragging events \u00b6 gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /* ... */ }); scene . input . on ( 'dragstart' , function ( pointer , gameObject ){ /* ... */ }); scene . input . on ( 'drag' , function ( pointer , gameObject , dragX , dragY ){ /* ... */ }); scene . input . on ( 'dragend' , function ( pointer , gameObject , dropped ){ /* ... */ }); Dragging properties \u00b6 scene . input . dragDistanceThreshold = 16 ; scene . input . dragTimeThreshold = 500 ; Drop zone \u00b6 Enable drop zone \u00b6 Enable dropping when registering interactive gameObject . setInteractive ({ dropZone : true }); Enable dropping after registered interactive gameObject . input . dropZone = true ; Disable drop zone \u00b6 gameObject . input . dropZone = false ; Dropping events \u00b6 gameObject . on ( 'drop' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragenter' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragover' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragleave' , function ( pointer , target ){ /* ... */ }); scene . input . on ( 'drop' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragenter' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragover' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragleave' , function ( pointer , gameObject , target ){ /* ... */ }); Single touch \u00b6 Pointer \u00b6 var pointer = scene . input . activePointer ; Multi-touch \u00b6 Amount of active pointers \u00b6 Set amount of active pointers in game configuration var config = { // ... input : { activePointers : 1 , // ... } }; var game = new Phaser . Game ( config ); Or add pointers in run-time. scene . input . addPointer ( num ); // total points = num + 1 Pointers \u00b6 pointer 1 ~ 10 var pointer = scene . input . pointer1 ; // ... var pointer = scene . input . pointer10 ; pointer n var pointer = scene . input . manager . pointers [ n ]; Amount of total pointers var amount = scene . input . manager . pointersTotal ; 1 in desktop 2 in touch device. ( 0 for mouse, 1 for 1 touch pointer) Pointer \u00b6 Position Current touching Position in screen : pointer.x , pointer.y Position in camera : pointer.worldX , pointer.worldY Get world position in a camera var out = camera . getWorldPoint ( pointer . x , pointer . y ); // var out = camera.getWorldPoint(pointer.x, pointer.y, out); Position of previous moving : pointer.prevPosition.x , pointer.prevPosition.y Updating when pointer-down, potiner-move, or pointer-up. Interpolated position : var points = pointer . getInterpolatedPosition ( step ); // var out = pointer.getInterpolatedPosition(step, out); Drag Touching start : pointer.downX , pointer.downY Touching end : pointer.upX , pointer.upY Drag distance between pointer-down to latest pointer : pointer.getDistance() Horizontal drag distance : pointer.getDistanceX() Vertical drag distance : pointer.getDistanceY() Drag angle : pointer.getAngle() Time Touching start : pointer.downTime Touching end : pointer.upTime Drag : pointer.getDuration() Touch state Is touching/any button down : pointer.isDown Is primary button down : pointer.primaryDown Button state : pointer.button On Touch devices the value is always 0 . Button down No button down : pointer.noButtonDown() Is primary (left) button down : pointer.leftButtonDown() Is secondary (right) button down : pointer.rightButtonDown() Is middle (mouse wheel) button down : pointer.middleButtonDown() Is back button down : pointer.backButtonDown() Is forward button down : pointer.forwardButtonDown() Button released Is primary (left) button released : pointer.leftButtonReleased() Is secondary (right) button released : pointer.rightButtonReleased() Is middle (mouse wheel) button released : pointer.middleButtonReleased() Is back button released : pointer.backButtonReleased() Is forward button released : pointer.forwardButtonReleased() Index in scene.input.manager.pointers : pointer.id Motion Angle: pointer.angle Disatance: pointer.distance Velocity: pointer.velocity pointer.velocity.x , `pointer.velocity.y Input object \u00b6 gameObject.input : Game object's input object. gameObject.input.localX , gameObject.input.localY : Pointer to local position of texture. Always receive input events, even if it's invisible or won't render : gameObject . input . alwaysEnabled = true ; Smooth \u00b6 Get touch position from interpolation of previous touch position and current touch position. Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor)) Set smooth factor. In game configuration var config = { // .... input : { smoothFactor : 0 } } Get touch position var x = pointer . x ; var y = pointer . y ; var worldX = pointer . worldX ; var worldY = pointer . worldY ; Debug \u00b6 Enable, draw shape of hit area. scene . input . enableDebug ( gameObject ); // scene.input.enableDebug(gameObject, color); Disable scene . input . removeDebug ( gameObject ); Poll rate \u00b6 Poll when touches moved, or updated. Default behavior. scene . input . setPollOnMove (); Poll every tick. scene . input . setPollAlways (); Set poll rate. scene . input . setPollRate ( rate );","title":"Touch events"},{"location":"touchevents/#introduction","text":"Built-in touch/mouse events of phaser. Author: Richard Davey","title":"Introduction"},{"location":"touchevents/#usage","text":"","title":"Usage"},{"location":"touchevents/#quick-start","text":"Is touching var pointer = scene . input . activePointer ; if ( pointer . isDown ) { var touchX = pointer . x ; var touchY = pointer . y ; // ... } On any touching start scene . input . on ( 'pointerdown' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On any touching end scene . input . on ( 'pointerup' , function ( pointer ){ var touchX = pointer . x ; var touchY = pointer . y ; // ... }); On touch game object start gameObject . setInteractive (). on ( 'pointerdown' , function ( pointer , localX , localY , event ){ // ... }); On touch game object end gameObject . setInteractive (). on ( 'pointerup' , function ( pointer , localX , localY , event ){ // ... }) Reference : Properties of point","title":"Quick start"},{"location":"touchevents/#register-interactive","text":"Call gameObject.setInteractive(...) to register touch input of Game Object before listening touching events. Set hit area from width & height (rectangle) of the texture gameObject . setInteractive (); Set hit area from game object gameObject . setInteractive ( shape , callback ); Circle shape : new Phaser.Geom.Circle(x, y, radius) callback : Phaser.Geom.Circle.Contains Ellipse shape : new Phaser.Geom.Ellipse(x, y, width, height) callback : Phaser.Geom.Ellipse.Contains Rectangle shape : new Phaser.Geom.Rectangle(x, y, width, height) callback : Phaser.Geom.Rectangle.Contains Triangle shape : new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3) callback : Phaser.Geom.Triangle.Contains Polygon shape : new Phaser.Geom.Polygon(points) callback : Phaser.Geom.Polygon.Contains Hexagon shape : new Phaser.Geom.rexHexagon(x, y, size, type) callback : Phaser.Geom.Polygon.Contains Rhombus shape : new Phaser.Geom.rexRhombus(x, y, width, height) callback : Phaser.Geom.Polygon.Contains Note: x , y relate to the top-left of the gameObject. Set hit area from input plugin scene . input . setHitArea ( gameObjects , shape , callback ); Circle scene . input . setHitAreaCircle ( gameObjects , x , y , radius ); // scene.input.setHitAreaCircle(gameObjects, x, y, radius, callback); // callback = Circle.Contains Ellipse scene . input . setHitAreaEllipse ( gameObjects , x , y , width , height ); // scene.input.setHitAreaEllipse(gameObjects, x, y, width, height, callback); // callback = Ellipse.Contains Rectangle scene . input . setHitAreaRectangle ( gameObjects , x , y , width , height ); // scene.input.setHitAreaRectangle(gameObjects, x, y, width, height, callback); // callback = Rectangle.Contains Triangle scene . input . setHitAreaTriangle ( gameObjects , x1 , y1 , x2 , y2 , x3 , y3 ); // scene.input.setHitAreaTriangle(gameObjects, x1, y1, x2, y2, x3, y3, callback); // callback = Triangle.Contains Note: x , y relate to the top-left of the gameObject. Set interactive configuration gameObject . setInteractive ({ hitArea : shape , hitAreaCallback : callback , draggable : false , dropZone : false , useHandCursor : false , cursor : CSSString , pixelPerfect : false , alphaTolerance : 1 }); Hit area shape Pixel alpha pixelPerfect : true alphaTolerance : 1 (0-255) Custom hit-testing function hitAreaCallback function ( shape , x , y , gameObject ) { return hit ; // true/false } shape : Hit area object x , y : Local position of texture. gameObject : Game object. Dragging draggable : true Drop zone dropZone : true Cursor cursor : CSS string useHandCursor : true Pixel perfect hit-testing This is an expensive process, should only be enabled on Game Objects that really need it.","title":"Register interactive"},{"location":"touchevents/#disable-interactive","text":"Disable temporary gameObject . disableInteractive (); Remove interaction gameObject . removeInteractive ();","title":"Disable interactive"},{"location":"touchevents/#top-only","text":"When set to true this Input Plugin will emulate DOM behavior by only emitting events from the top-most Game Objects in the Display List. If set to false it will emit events from all Game Objects below a Pointer, not just the top one. Get var topOnly = scene . input . topOnly ; Set scene . input . topOnly = topOnly ; scene . input . setTopOnly ( topOnly );","title":"Top only"},{"location":"touchevents/#touch-events","text":"Trigger these events from top scene to bottom scene. Events on touched Game object gameObject . on ( 'pointerdown' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerup' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointermove' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerover' , function ( pointer , localX , localY , event ){ /* ... */ }); gameObject . on ( 'pointerout' , function ( pointer , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , localX , localY , event ) { event . stopPropagation (); } Event on input plugin for each touched Game object scene . input . on ( 'gameobjectdown' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectup' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectmove' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectover' , function ( pointer , gameObject , event ){ /* ... */ }); scene . input . on ( 'gameobjectout' , function ( pointer , gameObject , event ){ /* ... */ }); Cancel remaining touched events function ( pointer , gameObject , event ) { event . stopPropagation (); } Events to get all touched Game Objects scene . input . on ( 'pointerdown' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerdownoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointerup' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerupoutside' , function ( pointer ){ /* ... */ }); scene . input . on ( 'pointermove' , function ( pointer , currentlyOver ){ /* ... */ }); scene . input . on ( 'pointerover' , function ( pointer , justOver ){ /* ... */ }); scene . input . on ( 'pointerout' , function ( pointer , justOut ){ /* ... */ }); scene . input . on ( 'gameout' , function ( timeStamp , domEvent ){ /* ... */ }); scene . input . on ( 'gameover' , function ( timeStamp , domEvent ){ /* ... */ });","title":"Touch events"},{"location":"touchevents/#dragging","text":"","title":"Dragging"},{"location":"touchevents/#enable-dragging","text":"Enable dragging when registering interactive gameObject . setInteractive ({ draggable : true }); Enable dragging and add it to dragging detecting list after registered interactive scene . input . setDraggable ( gameObject ); Enable dragging gameObject . input . draggable = true ;","title":"Enable dragging"},{"location":"touchevents/#disable-dragging","text":"Remove Game Object from dragging detecting list scene . input . setDraggable ( gameObject , false ); Disable dragging but keep it in dragging detecting list gameObject . input . draggable = false ;","title":"Disable dragging"},{"location":"touchevents/#dragging-events","text":"gameObject . on ( 'dragstart' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'drag' , function ( pointer , dragX , dragY ){ /* ... */ }); gameObject . on ( 'dragend' , function ( pointer , dragX , dragY , dropped ){ /* ... */ }); scene . input . on ( 'dragstart' , function ( pointer , gameObject ){ /* ... */ }); scene . input . on ( 'drag' , function ( pointer , gameObject , dragX , dragY ){ /* ... */ }); scene . input . on ( 'dragend' , function ( pointer , gameObject , dropped ){ /* ... */ });","title":"Dragging events"},{"location":"touchevents/#dragging-properties","text":"scene . input . dragDistanceThreshold = 16 ; scene . input . dragTimeThreshold = 500 ;","title":"Dragging properties"},{"location":"touchevents/#drop-zone","text":"","title":"Drop zone"},{"location":"touchevents/#enable-drop-zone","text":"Enable dropping when registering interactive gameObject . setInteractive ({ dropZone : true }); Enable dropping after registered interactive gameObject . input . dropZone = true ;","title":"Enable drop zone"},{"location":"touchevents/#disable-drop-zone","text":"gameObject . input . dropZone = false ;","title":"Disable drop zone"},{"location":"touchevents/#dropping-events","text":"gameObject . on ( 'drop' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragenter' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragover' , function ( pointer , target ){ /* ... */ }); gameObject . on ( 'dragleave' , function ( pointer , target ){ /* ... */ }); scene . input . on ( 'drop' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragenter' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragover' , function ( pointer , gameObject , target ){ /* ... */ }); scene . input . on ( 'dragleave' , function ( pointer , gameObject , target ){ /* ... */ });","title":"Dropping events"},{"location":"touchevents/#single-touch","text":"","title":"Single touch"},{"location":"touchevents/#pointer","text":"var pointer = scene . input . activePointer ;","title":"Pointer"},{"location":"touchevents/#multi-touch","text":"","title":"Multi-touch"},{"location":"touchevents/#amount-of-active-pointers","text":"Set amount of active pointers in game configuration var config = { // ... input : { activePointers : 1 , // ... } }; var game = new Phaser . Game ( config ); Or add pointers in run-time. scene . input . addPointer ( num ); // total points = num + 1","title":"Amount of active pointers"},{"location":"touchevents/#pointers","text":"pointer 1 ~ 10 var pointer = scene . input . pointer1 ; // ... var pointer = scene . input . pointer10 ; pointer n var pointer = scene . input . manager . pointers [ n ]; Amount of total pointers var amount = scene . input . manager . pointersTotal ; 1 in desktop 2 in touch device. ( 0 for mouse, 1 for 1 touch pointer)","title":"Pointers"},{"location":"touchevents/#pointer_1","text":"Position Current touching Position in screen : pointer.x , pointer.y Position in camera : pointer.worldX , pointer.worldY Get world position in a camera var out = camera . getWorldPoint ( pointer . x , pointer . y ); // var out = camera.getWorldPoint(pointer.x, pointer.y, out); Position of previous moving : pointer.prevPosition.x , pointer.prevPosition.y Updating when pointer-down, potiner-move, or pointer-up. Interpolated position : var points = pointer . getInterpolatedPosition ( step ); // var out = pointer.getInterpolatedPosition(step, out); Drag Touching start : pointer.downX , pointer.downY Touching end : pointer.upX , pointer.upY Drag distance between pointer-down to latest pointer : pointer.getDistance() Horizontal drag distance : pointer.getDistanceX() Vertical drag distance : pointer.getDistanceY() Drag angle : pointer.getAngle() Time Touching start : pointer.downTime Touching end : pointer.upTime Drag : pointer.getDuration() Touch state Is touching/any button down : pointer.isDown Is primary button down : pointer.primaryDown Button state : pointer.button On Touch devices the value is always 0 . Button down No button down : pointer.noButtonDown() Is primary (left) button down : pointer.leftButtonDown() Is secondary (right) button down : pointer.rightButtonDown() Is middle (mouse wheel) button down : pointer.middleButtonDown() Is back button down : pointer.backButtonDown() Is forward button down : pointer.forwardButtonDown() Button released Is primary (left) button released : pointer.leftButtonReleased() Is secondary (right) button released : pointer.rightButtonReleased() Is middle (mouse wheel) button released : pointer.middleButtonReleased() Is back button released : pointer.backButtonReleased() Is forward button released : pointer.forwardButtonReleased() Index in scene.input.manager.pointers : pointer.id Motion Angle: pointer.angle Disatance: pointer.distance Velocity: pointer.velocity pointer.velocity.x , `pointer.velocity.y","title":"Pointer"},{"location":"touchevents/#input-object","text":"gameObject.input : Game object's input object. gameObject.input.localX , gameObject.input.localY : Pointer to local position of texture. Always receive input events, even if it's invisible or won't render : gameObject . input . alwaysEnabled = true ;","title":"Input object"},{"location":"touchevents/#smooth","text":"Get touch position from interpolation of previous touch position and current touch position. Touch-position = (current-touch-position * smooth-factor) + (previous-touch-position * (1 - smooth-factor)) Set smooth factor. In game configuration var config = { // .... input : { smoothFactor : 0 } } Get touch position var x = pointer . x ; var y = pointer . y ; var worldX = pointer . worldX ; var worldY = pointer . worldY ;","title":"Smooth"},{"location":"touchevents/#debug","text":"Enable, draw shape of hit area. scene . input . enableDebug ( gameObject ); // scene.input.enableDebug(gameObject, color); Disable scene . input . removeDebug ( gameObject );","title":"Debug"},{"location":"touchevents/#poll-rate","text":"Poll when touches moved, or updated. Default behavior. scene . input . setPollOnMove (); Poll every tick. scene . input . setPollAlways (); Set poll rate. scene . input . setPollRate ( rate );","title":"Poll rate"},{"location":"tween-timeline/","text":"Introduction \u00b6 Chain a series of tween tasks , built-in object of phaser. Author: Richard Davey Usage \u00b6 Create timeline, then chain tween tasks \u00b6 Create timeline var timeline = scene . tweens . createTimeline (); Add tween task configuration timeline . add ({ targets : gameObject , x : 400 , // '+=100' ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , // offset: '-=500', // starts 500ms before previous tween ends }) offset : Start this tween task with a time offset. A number : Absolute offsets, start this tween task after timeline start. A string, '-=n' : Relative offsets, start this tween task before previous tween ends. Start tween tasks timeline . play (); Create timeline, included tween tasks \u00b6 var timeline = scene . tweens . timeline ({ targets : gameObject , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , loop : 0 , tweens : [ { targets : gameObject , x : 400 , // '+=100' // ease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back' // duration: 1000, // repeat: 0, // -1: infinity // yoyo: false, // offset: '-=500', // starts 500ms before previous tween ends }, // ... ] });","title":"Timeline"},{"location":"tween-timeline/#introduction","text":"Chain a series of tween tasks , built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tween-timeline/#usage","text":"","title":"Usage"},{"location":"tween-timeline/#create-timeline-then-chain-tween-tasks","text":"Create timeline var timeline = scene . tweens . createTimeline (); Add tween task configuration timeline . add ({ targets : gameObject , x : 400 , // '+=100' ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , // offset: '-=500', // starts 500ms before previous tween ends }) offset : Start this tween task with a time offset. A number : Absolute offsets, start this tween task after timeline start. A string, '-=n' : Relative offsets, start this tween task before previous tween ends. Start tween tasks timeline . play ();","title":"Create timeline, then chain tween tasks"},{"location":"tween-timeline/#create-timeline-included-tween-tasks","text":"var timeline = scene . tweens . timeline ({ targets : gameObject , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , loop : 0 , tweens : [ { targets : gameObject , x : 400 , // '+=100' // ease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back' // duration: 1000, // repeat: 0, // -1: infinity // yoyo: false, // offset: '-=500', // starts 500ms before previous tween ends }, // ... ] });","title":"Create timeline, included tween tasks"},{"location":"tween/","text":"Introduction \u00b6 Change properties by tween equations, built-in object of phaser. Author: Richard Davey Usage \u00b6 Create tween task \u00b6 var tween = scene . tweens . add ({ targets : gameObject , alpha : { from : 0 , to : 1 }, // alpha: { start: 0, to: 1 }, // alpha: 1, // alpha: '+=1', ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false }); key: { from: value1, to: value2 } : Set the property to 1 when tween started after delay, then tween to value2 . key: { start: value0, to: value2 } : Set the property to value0 immediately, then tween to value2 . key: { start: value0, from: value1, to: value2 } : Set the property to value0 immediately, then set to value1 when tween started after delay, then tween to value2 . key: value2 : Tween to value2 . key: '+=deltaValue' : Tween to current value + deltaValue or var tween = scene . tweens . add ({ targets : gameObject , paused : false , callbackScope : tween , // timming/callback of each state onStart : function () {}, onStartScope : callbackScope , onStartParams : [], // initial delay delay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // tween duration duration : 1000 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, ease : 'Linear' , easeParams : null , onActive : function () {}, onUpdate : function () {}, onUpdateScope : callbackScope , onUpdateParams : [], // delay between tween and yoyo hold : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, yoyo : false , // true to tween backward flipX : false , flipY : false , onYoyo : function () {}, onYoyoScope : callbackScope , onYoyoParams : [], // repeat count (-1: infinite) repeat : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, onRepeat : function () {}, onRepeatScope : callbackScope , onRepeatParams : [], // delay to next pass repeatDelay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // loop count (-1: infinite) loop : 0 , onLoop : function () {}, onLoopScope : callbackScope , onLoopParams : [], // delay to next loop loopDelay : 0 , // delay to onComplete callback completeDelay : 0 , onComplete : function () {}, onCompleteScope : callbackScope , onCompleteParams : [], // timming/callback of each state // properties: x : '+=600' , // start from current value y : 500 , rotation : ... angle : ... alpha : ... // ... // or props : { x : { value : '+=600' , duration : 3000 , ease : 'Power2' }, y : { value : '500' , duration : 1500 , ease : 'Bounce.easeOut' } }, // or props : { x : { duration : 400 , yoyo : true , repeat : 8 , ease : 'Sine.easeInOut' , value : { getActive : function ( target , key , value , targetIndex , totalTargets , tween ) { return value ; }, getStart : function ( target , key , value , targetIndex , totalTargets , tween ) { return value + 30 ; }, getEnd : function ( target , key , value , targetIndex , totalTargets , tween ) { destX -= 30 ; return destX ; } } }, .... }, offset : null , useFrames : false }); targets : The targets the tween is updating. delay : The time the tween will wait before it first starts A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder : From 0 to endValue : scene.tweens.stagger(endValue) From startValue to endValue : scene.tweens.stagger([startValue, endValue]) From 0 to endValue , with specific ease function : scene.tweens.stagger(endValue, {ease: 'cubic.inout'}) From startValue to endValue , with specific ease function : scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'}) From 0 to endValue , with specific start index : scene.tweens.stagger(endValue, {from: 'last'}) scene.tweens.stagger(endValue, {from: 'center'}) scene.tweens.stagger(endValue, {from: index}) From startValue to endValue , , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last'}) scene.tweens.stagger([startValue, endValue], {from: 'center'}) scene.tweens.stagger([startValue, endValue], {from: index}) From 0 to endValue , with specific ease function, with specific start index : scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'}) From startValue to endValue , with specific ease function , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'}) Grid mode. From 0 to endValue . scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], }) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) Grid mode. From startValue to endValue . scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], }) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) duration : The duration of the tween A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder ease : The ease function used by the tween easeParams : The parameters to go with the ease function (if any) hold : The time the tween will pause before running a yoyo A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeat : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once) A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeatDelay : The time the tween will pause for before starting a repeat. The tween holds in the start state. A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder yoyo : boolean - Does the tween reverse itself (yoyo) when it reaches the end? flipX : flip X the GameObject on tween end flipY : flip Y the GameObject on tween end offset : Used when the Tween is part of a Timeline completeDelay : The time the tween will wait before the onComplete event is dispatched once it has completed loop : -1 for an infinite loop loopDelay paused : Does the tween start in a paused state, or playing? useFrames : Use frames or milliseconds? props : The properties being tweened by the tween onActive : Tween becomes active within the Tween Manager. function ( tween , targets ) { } onStart : A tween starts. function ( tween , targets ) { } onUpdate : Callback which fired when tween task updated function ( tween , targets ) { } onComplete : Tween completes or is stopped. function ( tween , targets ) { } onYoyo : A tween property yoyos. function ( tween , key , targets ) { } onLoop : A tween loops, after any loop delay expires. function ( tween , targets ) { } onRepeat : A tween property repeats, after any repeat delay expires. function ( tween , targets ) { } Ease equations \u00b6 Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut Pause / Resume task \u00b6 tween . pause (); tween . resume (); Stop task \u00b6 tween . stop (); Play task \u00b6 tween . play (); Restart task \u00b6 tween . restart (); Remove task \u00b6 tween . remove (); Time-scale \u00b6 tween . setTimeScale ( v ); // tween.timeScale = timescale; var timeScale = tween . getTimeScale (); // var timeScale = tween.timeScale; Global time-scale \u00b6 var timeScale = scene . tweens . timeScale ; scene . tweens . timeScale = timescale ; Events \u00b6 Tween becomes active within the Tween Manager. tween . on ( 'active' , function ( tween , targets ){ }, scope ); Tween completes or is stopped. tween . on ( 'complete' , function ( tween , targets ){ }, scope ); A tween loops, after any loop delay expires. tween . on ( 'loop' , function ( tween , targets ){ }, scope ); A tween property repeats, after any repeat delay expires. tween . on ( 'repeat' , function ( tween , key , targets ){ }, scope ); A tween starts. tween . on ( 'start' , function ( tween , targets ){ }, scope ); A tween property updates. tween . on ( 'update' , function ( tween , key , targets ){ }, scope ); A tween property yoyos. tween . on ( 'yoyo' , function ( tween , key , targets ){ }, scope ); State \u00b6 Is playing var isPlaying = tween . isPlaying (); Is paused var isPaused = tween . isPaused (); Is actively and not just in a delayed state var hasStarted = tween . hasStarted ; Tween value \u00b6 Create tween task var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , }); or var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , // ... }); Get value var value = tween . getValue (); Custom ease function \u00b6 var tween = scene . tweens . add ({ targets : gameObject , // ... ease : function ( t ) { // t: 0~1 return value ; // value: 0~1 }, // ... }); Flow chart \u00b6 graph TB Start((Start)) --> CallbackOnStart CallbackOnStart>\"Callback: onStart\"] --> ActiveDelay[\"delay\"] ActiveDelay --> DurationForward[\"Tween forward<br>Callback: onUpdate<br>(duration)\"] subgraph A pass DurationForward --> Hold[\"hold\"] Hold --> IsYoyo{Is yoyo} IsYoyo --> |Yes| CallbackOnYoyo>\"Callback: onYoyo\"] CallbackOnYoyo --> DurationBackward[\"Tween backword<br>Callback: onUpdate<br>(duration)\"] DurationBackward --> IsRepeat{\"Repeat count > 0\"} IsYoyo --> |No| IsRepeat IsRepeat --> |Yes| CallbackOnRepeat>\"Callback: onRepeat\"] CallbackOnRepeat --> RepeatDelay[\"repeatDelay\"] RepeatDelay --> DurationForward end IsRepeat --> |No| IsLoop{\"Loop count > 0\"} IsLoop --> |Yes| CallbackOnLoop CallbackOnLoop>\"Callback: onLoop\"] --> LoopDelay[\"loopDelay\"] LoopDelay --> DurationForward IsLoop --> |No| CompleteDelay CompleteDelay[\"completeDelay\"] --> CallbackOnComplete>\"Callback: onComplete\"] CallbackOnComplete --> End((End)) Tween data \u00b6 tween.data : An array of TweenData objects, each containing a unique property and target being tweened. tween.data[i].key : The property of the target to tween. tween.data[i].start , tween.data[i].end , tween.data[i].current : Ease Value Data.","title":"Tween task"},{"location":"tween/#introduction","text":"Change properties by tween equations, built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"tween/#usage","text":"","title":"Usage"},{"location":"tween/#create-tween-task","text":"var tween = scene . tweens . add ({ targets : gameObject , alpha : { from : 0 , to : 1 }, // alpha: { start: 0, to: 1 }, // alpha: 1, // alpha: '+=1', ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false }); key: { from: value1, to: value2 } : Set the property to 1 when tween started after delay, then tween to value2 . key: { start: value0, to: value2 } : Set the property to value0 immediately, then tween to value2 . key: { start: value0, from: value1, to: value2 } : Set the property to value0 immediately, then set to value1 when tween started after delay, then tween to value2 . key: value2 : Tween to value2 . key: '+=deltaValue' : Tween to current value + deltaValue or var tween = scene . tweens . add ({ targets : gameObject , paused : false , callbackScope : tween , // timming/callback of each state onStart : function () {}, onStartScope : callbackScope , onStartParams : [], // initial delay delay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // tween duration duration : 1000 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, ease : 'Linear' , easeParams : null , onActive : function () {}, onUpdate : function () {}, onUpdateScope : callbackScope , onUpdateParams : [], // delay between tween and yoyo hold : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, yoyo : false , // true to tween backward flipX : false , flipY : false , onYoyo : function () {}, onYoyoScope : callbackScope , onYoyoParams : [], // repeat count (-1: infinite) repeat : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, onRepeat : function () {}, onRepeatScope : callbackScope , onRepeatParams : [], // delay to next pass repeatDelay : 0 , // function(target, targetKey, value, targetIndex, totalTargets, tween) { }, // loop count (-1: infinite) loop : 0 , onLoop : function () {}, onLoopScope : callbackScope , onLoopParams : [], // delay to next loop loopDelay : 0 , // delay to onComplete callback completeDelay : 0 , onComplete : function () {}, onCompleteScope : callbackScope , onCompleteParams : [], // timming/callback of each state // properties: x : '+=600' , // start from current value y : 500 , rotation : ... angle : ... alpha : ... // ... // or props : { x : { value : '+=600' , duration : 3000 , ease : 'Power2' }, y : { value : '500' , duration : 1500 , ease : 'Bounce.easeOut' } }, // or props : { x : { duration : 400 , yoyo : true , repeat : 8 , ease : 'Sine.easeInOut' , value : { getActive : function ( target , key , value , targetIndex , totalTargets , tween ) { return value ; }, getStart : function ( target , key , value , targetIndex , totalTargets , tween ) { return value + 30 ; }, getEnd : function ( target , key , value , targetIndex , totalTargets , tween ) { destX -= 30 ; return destX ; } } }, .... }, offset : null , useFrames : false }); targets : The targets the tween is updating. delay : The time the tween will wait before it first starts A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder : From 0 to endValue : scene.tweens.stagger(endValue) From startValue to endValue : scene.tweens.stagger([startValue, endValue]) From 0 to endValue , with specific ease function : scene.tweens.stagger(endValue, {ease: 'cubic.inout'}) From startValue to endValue , with specific ease function : scene.tweens.stagger([startValue, endValue], {ease: 'cubic.inout'}) From 0 to endValue , with specific start index : scene.tweens.stagger(endValue, {from: 'last'}) scene.tweens.stagger(endValue, {from: 'center'}) scene.tweens.stagger(endValue, {from: index}) From startValue to endValue , , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last'}) scene.tweens.stagger([startValue, endValue], {from: 'center'}) scene.tweens.stagger([startValue, endValue], {from: index}) From 0 to endValue , with specific ease function, with specific start index : scene.tweens.stagger(endValue, {from: 'last', ease: 'cubic.inout'}) From startValue to endValue , with specific ease function , with specific start index : scene.tweens.stagger([startValue, endValue], {from: 'last', ease: 'cubic.inout'}) Grid mode. From 0 to endValue . scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], }) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger(endValue, {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) Grid mode. From startValue to endValue . scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], }) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center'}) scene.tweens.stagger([startValue, endValue], {grid: [gridWidth, gridHeight], from: 'center', ease: 'cubic.inout'}) duration : The duration of the tween A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder ease : The ease function used by the tween easeParams : The parameters to go with the ease function (if any) hold : The time the tween will pause before running a yoyo A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeat : The number of times the tween will repeat itself (a value of 1 means the tween will play twice, as it repeated once) A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder repeatDelay : The time the tween will pause for before starting a repeat. The tween holds in the start state. A number, for all targets A callback function : function(target, targetKey, value, targetIndex, totalTargets, tween) { } A callback function, built via stagger builder yoyo : boolean - Does the tween reverse itself (yoyo) when it reaches the end? flipX : flip X the GameObject on tween end flipY : flip Y the GameObject on tween end offset : Used when the Tween is part of a Timeline completeDelay : The time the tween will wait before the onComplete event is dispatched once it has completed loop : -1 for an infinite loop loopDelay paused : Does the tween start in a paused state, or playing? useFrames : Use frames or milliseconds? props : The properties being tweened by the tween onActive : Tween becomes active within the Tween Manager. function ( tween , targets ) { } onStart : A tween starts. function ( tween , targets ) { } onUpdate : Callback which fired when tween task updated function ( tween , targets ) { } onComplete : Tween completes or is stopped. function ( tween , targets ) { } onYoyo : A tween property yoyos. function ( tween , key , targets ) { } onLoop : A tween loops, after any loop delay expires. function ( tween , targets ) { } onRepeat : A tween property repeats, after any repeat delay expires. function ( tween , targets ) { }","title":"Create tween task"},{"location":"tween/#ease-equations","text":"Power0 : Linear Power1 : Quadratic.Out Power2 : Cubic.Out Power3 : Quartic.Out Power4 : Quintic.Out Linear Quad : Quadratic.Out Cubic : Cubic.Out Quart : Quartic.Out Quint : Quintic.Out Sine : Sine.Out Expo : Expo.Out Circ : Circular.Out Elastic : Elastic.Out Back : Back.Out Bounce : Bounce.Out Stepped Quad.easeIn Cubic.easeIn Quart.easeIn Quint.easeIn Sine.easeIn Expo.easeIn Circ.easeIn Back.easeIn Bounce.easeIn Quad.easeOut Cubic.easeOut Quart.easeOut Quint.easeOut Sine.easeOut Expo.easeOut Circ.easeOut Back.easeOut Bounce.easeOut Quad.easeInOut Cubic.easeInOut Quart.easeInOut Quint.easeInOut Sine.easeInOut Expo.easeInOut Circ.easeInOut Back.easeInOut Bounce.easeInOut","title":"Ease equations"},{"location":"tween/#pause-resume-task","text":"tween . pause (); tween . resume ();","title":"Pause / Resume task"},{"location":"tween/#stop-task","text":"tween . stop ();","title":"Stop task"},{"location":"tween/#play-task","text":"tween . play ();","title":"Play task"},{"location":"tween/#restart-task","text":"tween . restart ();","title":"Restart task"},{"location":"tween/#remove-task","text":"tween . remove ();","title":"Remove task"},{"location":"tween/#time-scale","text":"tween . setTimeScale ( v ); // tween.timeScale = timescale; var timeScale = tween . getTimeScale (); // var timeScale = tween.timeScale;","title":"Time-scale"},{"location":"tween/#global-time-scale","text":"var timeScale = scene . tweens . timeScale ; scene . tweens . timeScale = timescale ;","title":"Global time-scale"},{"location":"tween/#events","text":"Tween becomes active within the Tween Manager. tween . on ( 'active' , function ( tween , targets ){ }, scope ); Tween completes or is stopped. tween . on ( 'complete' , function ( tween , targets ){ }, scope ); A tween loops, after any loop delay expires. tween . on ( 'loop' , function ( tween , targets ){ }, scope ); A tween property repeats, after any repeat delay expires. tween . on ( 'repeat' , function ( tween , key , targets ){ }, scope ); A tween starts. tween . on ( 'start' , function ( tween , targets ){ }, scope ); A tween property updates. tween . on ( 'update' , function ( tween , key , targets ){ }, scope ); A tween property yoyos. tween . on ( 'yoyo' , function ( tween , key , targets ){ }, scope );","title":"Events"},{"location":"tween/#state","text":"Is playing var isPlaying = tween . isPlaying (); Is paused var isPaused = tween . isPaused (); Is actively and not just in a delayed state var hasStarted = tween . hasStarted ;","title":"State"},{"location":"tween/#tween-value","text":"Create tween task var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , ease : 'Linear' , // 'Cubic', 'Elastic', 'Bounce', 'Back' duration : 1000 , repeat : 0 , // -1: infinity yoyo : false , }); or var tween = scene . tweens . addCounter ({ from : 0 , to : 1 , // ... }); Get value var value = tween . getValue ();","title":"Tween value"},{"location":"tween/#custom-ease-function","text":"var tween = scene . tweens . add ({ targets : gameObject , // ... ease : function ( t ) { // t: 0~1 return value ; // value: 0~1 }, // ... });","title":"Custom ease function"},{"location":"tween/#flow-chart","text":"graph TB Start((Start)) --> CallbackOnStart CallbackOnStart>\"Callback: onStart\"] --> ActiveDelay[\"delay\"] ActiveDelay --> DurationForward[\"Tween forward<br>Callback: onUpdate<br>(duration)\"] subgraph A pass DurationForward --> Hold[\"hold\"] Hold --> IsYoyo{Is yoyo} IsYoyo --> |Yes| CallbackOnYoyo>\"Callback: onYoyo\"] CallbackOnYoyo --> DurationBackward[\"Tween backword<br>Callback: onUpdate<br>(duration)\"] DurationBackward --> IsRepeat{\"Repeat count > 0\"} IsYoyo --> |No| IsRepeat IsRepeat --> |Yes| CallbackOnRepeat>\"Callback: onRepeat\"] CallbackOnRepeat --> RepeatDelay[\"repeatDelay\"] RepeatDelay --> DurationForward end IsRepeat --> |No| IsLoop{\"Loop count > 0\"} IsLoop --> |Yes| CallbackOnLoop CallbackOnLoop>\"Callback: onLoop\"] --> LoopDelay[\"loopDelay\"] LoopDelay --> DurationForward IsLoop --> |No| CompleteDelay CompleteDelay[\"completeDelay\"] --> CallbackOnComplete>\"Callback: onComplete\"] CallbackOnComplete --> End((End))","title":"Flow chart"},{"location":"tween/#tween-data","text":"tween.data : An array of TweenData objects, each containing a unique property and target being tweened. tween.data[i].key : The property of the target to tween. tween.data[i].start , tween.data[i].end , tween.data[i].current : Ease Value Data.","title":"Tween data"},{"location":"ui-basesizer/","text":"Introduction \u00b6 Base class of all ui plugins. Author: Rex Usage \u00b6 Minimum size \u00b6 sizer . setMinSize ( width , height ); or sizer . setMinWidth ( width ); sizer . setMinHeight ( height ); Bounds of sizer \u00b6 Get var leftBound = sizer . left ; var rightBound = sizer . right ; var topBound = sizer . top ; var bottomBound = sizer . bottom ; Set sizer . left = leftBound ; sizer . right = rightBound ; sizer . top = topBound ; sizer . bottom = bottomBound ; or sizer . alignLeft ( leftBound ); sizer . alignRight ( rightBound ); sizer . alignTop ( topBound ); sizer . alignBottom ( bottomBound ); Push into bounds \u00b6 Align sizer to bound if overlapping it. sizer . pushIntoBounds (); or sizer . pushIntoBounds ( bounds ); bounds : Bounds in rectangle object . Scale \u00b6 Pop up Pop up width and height sizer . popUp ( duration ); // sizer.popUp(duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only sizer . popUp ( duration , 'x' ); // sizer.popUp(duration, 'x', ease); Pop up height only sizer . popUp ( duration , 'y' ); // sizer.popUp(duration, 'y', ease); Pop up via config sizer . popUp ({ duration : undefined , orientation : undefined , ease : undefined , }) orientation : undefined , x , or y Scale down destroy Scale down width and height sizer . scaleDownDestroy ( duration ); // sizer.scaleDownDestroy(duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only sizer . scaleDownDestroy ( duration , 'x' ); // sizer.scaleDownDestroy(duration, 'x', ease); Scale down height only sizer . scaleDownDestroy ( duration , 'y' ); // sizer.scaleDownDestroy(duration, 'y', ease); Scale down without destroy Scale down width and height sizer . scaleDownDestroy ( duration , undefined , ease , false ); Scale down width only sizer . scaleDownDestroy ( duration , 'x' , ease , false ); Scale down height only sizer . scaleDownDestroy ( duration , 'y' , ease , false ); Fade \u00b6 Fade in sizer . fadeIn ( duration ); Fade out destroy sizer . fadeOutDestroy ( duration ); Fade out without destroy sizer . fadeOutDestroy ( duration , false ); Drag top-most sizer \u00b6 Draggable child Enable sizer . setDraggable ( child ); // sizer.setDraggable(child, true) or sizer . setDraggable ( elementName ); // sizer.setDraggable(elementName, true) Disable sizer . setDraggable ( child , false ); or sizer . setDraggable ( elementName , false ); Draggable sizer object Enable sizer . setDraggable (); // sizer.setDraggable(true); Disalbe sizer . setDraggable ( false ); Pin game object \u00b6 sizer . pin ( gameObject ); Note Method sizer.add is override in each sizer class usually. Draw bounds \u00b6 Draw all bounds of children. sizer . drawBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff Anchor \u00b6 sizer . setAnchor ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' } Get child \u00b6 Add child sizer . addChildrenMap ( key , child ); Get child var child = sizer . getElement ( key ); Get parent \u00b6 Get parent sizer var parentSizer = sizer . getParentSizer (); Get topmost sizer var topmostSizer = sizer . getTopmostSizer (); Is in touching \u00b6 var isTouching = sizer . isInTouching (); Other properties \u00b6 This game object inherits from ContainerLite .","title":"Base sizer"},{"location":"ui-basesizer/#introduction","text":"Base class of all ui plugins. Author: Rex","title":"Introduction"},{"location":"ui-basesizer/#usage","text":"","title":"Usage"},{"location":"ui-basesizer/#minimum-size","text":"sizer . setMinSize ( width , height ); or sizer . setMinWidth ( width ); sizer . setMinHeight ( height );","title":"Minimum size"},{"location":"ui-basesizer/#bounds-of-sizer","text":"Get var leftBound = sizer . left ; var rightBound = sizer . right ; var topBound = sizer . top ; var bottomBound = sizer . bottom ; Set sizer . left = leftBound ; sizer . right = rightBound ; sizer . top = topBound ; sizer . bottom = bottomBound ; or sizer . alignLeft ( leftBound ); sizer . alignRight ( rightBound ); sizer . alignTop ( topBound ); sizer . alignBottom ( bottomBound );","title":"Bounds of sizer"},{"location":"ui-basesizer/#push-into-bounds","text":"Align sizer to bound if overlapping it. sizer . pushIntoBounds (); or sizer . pushIntoBounds ( bounds ); bounds : Bounds in rectangle object .","title":"Push into bounds"},{"location":"ui-basesizer/#scale","text":"Pop up Pop up width and height sizer . popUp ( duration ); // sizer.popUp(duration, undefined, ease); ease : Ease function , default is 'Cubic' . Pop up width only sizer . popUp ( duration , 'x' ); // sizer.popUp(duration, 'x', ease); Pop up height only sizer . popUp ( duration , 'y' ); // sizer.popUp(duration, 'y', ease); Pop up via config sizer . popUp ({ duration : undefined , orientation : undefined , ease : undefined , }) orientation : undefined , x , or y Scale down destroy Scale down width and height sizer . scaleDownDestroy ( duration ); // sizer.scaleDownDestroy(duration, undefined, ease); ease : Ease function , default is 'Linear' . Scale down width only sizer . scaleDownDestroy ( duration , 'x' ); // sizer.scaleDownDestroy(duration, 'x', ease); Scale down height only sizer . scaleDownDestroy ( duration , 'y' ); // sizer.scaleDownDestroy(duration, 'y', ease); Scale down without destroy Scale down width and height sizer . scaleDownDestroy ( duration , undefined , ease , false ); Scale down width only sizer . scaleDownDestroy ( duration , 'x' , ease , false ); Scale down height only sizer . scaleDownDestroy ( duration , 'y' , ease , false );","title":"Scale"},{"location":"ui-basesizer/#fade","text":"Fade in sizer . fadeIn ( duration ); Fade out destroy sizer . fadeOutDestroy ( duration ); Fade out without destroy sizer . fadeOutDestroy ( duration , false );","title":"Fade"},{"location":"ui-basesizer/#drag-top-most-sizer","text":"Draggable child Enable sizer . setDraggable ( child ); // sizer.setDraggable(child, true) or sizer . setDraggable ( elementName ); // sizer.setDraggable(elementName, true) Disable sizer . setDraggable ( child , false ); or sizer . setDraggable ( elementName , false ); Draggable sizer object Enable sizer . setDraggable (); // sizer.setDraggable(true); Disalbe sizer . setDraggable ( false );","title":"Drag top-most sizer"},{"location":"ui-basesizer/#pin-game-object","text":"sizer . pin ( gameObject ); Note Method sizer.add is override in each sizer class usually.","title":"Pin game object"},{"location":"ui-basesizer/#draw-bounds","text":"Draw all bounds of children. sizer . drawBounds ( graphics , color ); graphics : Graphics game object color : Default value is 0xffffff","title":"Draw bounds"},{"location":"ui-basesizer/#anchor","text":"sizer . setAnchor ({ // left: '0%+0', // right: '0%+0', // centerX: '0%+0', // x: '0%+0', // top: '0%+0', // bottom: '0%+0', // centerY: '0%+0', // y: '0%+0' }) left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0~100 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' For example, anchor game object's left bound to viewport's left+10, and centerY to viewport's center : { left : 'left+10' , centerY : 'center' }","title":"Anchor"},{"location":"ui-basesizer/#get-child","text":"Add child sizer . addChildrenMap ( key , child ); Get child var child = sizer . getElement ( key );","title":"Get child"},{"location":"ui-basesizer/#get-parent","text":"Get parent sizer var parentSizer = sizer . getParentSizer (); Get topmost sizer var topmostSizer = sizer . getTopmostSizer ();","title":"Get parent"},{"location":"ui-basesizer/#is-in-touching","text":"var isTouching = sizer . isInTouching ();","title":"Is in touching"},{"location":"ui-basesizer/#other-properties","text":"This game object inherits from ContainerLite .","title":"Other properties"},{"location":"ui-buttons/","text":"Introduction \u00b6 A container with a group of buttons. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add Buttons object \u00b6 var buttons = scene . rexUI . add . buttons ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , // Elements background : backgroundGameObject , buttons : [ buttonGameObject , buttonGameObject , // ... ], align : undefined , click : { mode : 'pointerup' , clickInterval : 100 } space : 0 , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of button game objects. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange button game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange button game objects from top to bottom. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. buttons : Array of button game objects. align : Alignment of these button game objects. undefined , or 'left' , or 'top' : Align game object at left, or top. 'center' : Align game object at center. 'right' , or 'bottom' : Align game object at right, or bottom. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. space : Spaces between 2 button game objects. name : Set name of this button game objects. Custom class \u00b6 Define class class MyButtons extends RexPlugins . UI . Buttons { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var buttons = new MyButtons ( scene , config ); Layout children \u00b6 Arrange position of all elements. buttons . layout (); Other properties \u00b6 See sizer object Events \u00b6 Click button buttons . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button buttons . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button buttons . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Emit button click event \u00b6 buttons . emitButtonClick ( index ); index : Index of triggered button game object, or a button game object. Get element \u00b6 Get element Background game object var background = buttons . getElement ( 'background' ); Button game objects var bottons = buttons . getElement ( 'buttons' ); or var button = buttons . getButton ( index ); or var botton = buttons . getElement ( 'buttons[0]' ); // First button Get by name var gameObject = buttons . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call buttons.layout() , or topSizer.layout() after show/hide any button. Show button buttons . showButton ( index ); index : A number index, or a button game object. Hide button. buttons . hideButton ( index ); index : A number index, or a button game object. For each button \u00b6 buttons . forEachButtton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Buttons"},{"location":"ui-buttons/#introduction","text":"A container with a group of buttons. Author: Rex Game object","title":"Introduction"},{"location":"ui-buttons/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-buttons/#usage","text":"Sample code","title":"Usage"},{"location":"ui-buttons/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-buttons/#add-buttons-object","text":"var buttons = scene . rexUI . add . buttons ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , // Elements background : backgroundGameObject , buttons : [ buttonGameObject , buttonGameObject , // ... ], align : undefined , click : { mode : 'pointerup' , clickInterval : 100 } space : 0 , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of button game objects. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange button game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange button game objects from top to bottom. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. buttons : Array of button game objects. align : Alignment of these button game objects. undefined , or 'left' , or 'top' : Align game object at left, or top. 'center' : Align game object at center. 'right' , or 'bottom' : Align game object at right, or bottom. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. space : Spaces between 2 button game objects. name : Set name of this button game objects.","title":"Add Buttons object"},{"location":"ui-buttons/#custom-class","text":"Define class class MyButtons extends RexPlugins . UI . Buttons { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var buttons = new MyButtons ( scene , config );","title":"Custom class"},{"location":"ui-buttons/#layout-children","text":"Arrange position of all elements. buttons . layout ();","title":"Layout children"},{"location":"ui-buttons/#other-properties","text":"See sizer object","title":"Other properties"},{"location":"ui-buttons/#events","text":"Click button buttons . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button buttons . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button buttons . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-buttons/#emit-button-click-event","text":"buttons . emitButtonClick ( index ); index : Index of triggered button game object, or a button game object.","title":"Emit button click event"},{"location":"ui-buttons/#get-element","text":"Get element Background game object var background = buttons . getElement ( 'background' ); Button game objects var bottons = buttons . getElement ( 'buttons' ); or var button = buttons . getButton ( index ); or var botton = buttons . getElement ( 'buttons[0]' ); // First button Get by name var gameObject = buttons . getElement ( '#' + name );","title":"Get element"},{"location":"ui-buttons/#showhide-button","text":"Hidden elements won't be counted when layouting. Call buttons.layout() , or topSizer.layout() after show/hide any button. Show button buttons . showButton ( index ); index : A number index, or a button game object. Hide button. buttons . hideButton ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-buttons/#for-each-button","text":"buttons . forEachButtton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-chart/","text":"Introduction \u00b6 Draw chart on canvas . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Install chart.js \u00b6 Chart.js is not included in rexUI, installs it before creating any chart. scene . load . script ( 'chartjs' , 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js' ); Add chart object \u00b6 var chart = scene . rexUI . add . chart ( x , y , width , height , config ); x , y : Position of this object. width , height : Canvas size. config : Configuration for creating chart. Set undefined to not create chart at beginning. Custom class \u00b6 Define class class MyChart extends RexPlugins . UI . Chart { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... } // ... } Create instance var chart = new MyChart ( scene , x , y , width , height , config ); Create chart \u00b6 Create chart (if not creating at beginning). chart . setChart ( config ); config : Configuration for creating chart. Chart data \u00b6 Get dataset var dataset = chart . getChartDataset ( datasetIndex ); datasetIndex : Index number or label string. Get data var data = chart . getChartData ( datasetIndex , dataIndex ); datasetIndex : Index number or label string. dataIndex : Index number or label string. Set chart . setChartData ( datasetIndex , dataIndex , value ). updateChart (); datasetIndex : Index number or label string. dataIndex : Index number or label string. Manipulate chart object \u00b6 Get chart object var chart = chart . chart ; Set properties of chart Array of dataset var datasets = chart . data . datasets ; Label of dataset var label = chart . data . datasets [ i ]. label ; Labels var labels = chart . data . labels ; Set chart data chart . data . datasets [ datasetIndex ]. data [ dataIndex ] = value ; Update chart chart . update ();","title":"Chart"},{"location":"ui-chart/#introduction","text":"Draw chart on canvas . Author: Rex Game object","title":"Introduction"},{"location":"ui-chart/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-chart/#usage","text":"Sample code","title":"Usage"},{"location":"ui-chart/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-chart/#install-chartjs","text":"Chart.js is not included in rexUI, installs it before creating any chart. scene . load . script ( 'chartjs' , 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js' );","title":"Install chart.js"},{"location":"ui-chart/#add-chart-object","text":"var chart = scene . rexUI . add . chart ( x , y , width , height , config ); x , y : Position of this object. width , height : Canvas size. config : Configuration for creating chart. Set undefined to not create chart at beginning.","title":"Add chart object"},{"location":"ui-chart/#custom-class","text":"Define class class MyChart extends RexPlugins . UI . Chart { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... } // ... } Create instance var chart = new MyChart ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"ui-chart/#create-chart","text":"Create chart (if not creating at beginning). chart . setChart ( config ); config : Configuration for creating chart.","title":"Create chart"},{"location":"ui-chart/#chart-data","text":"Get dataset var dataset = chart . getChartDataset ( datasetIndex ); datasetIndex : Index number or label string. Get data var data = chart . getChartData ( datasetIndex , dataIndex ); datasetIndex : Index number or label string. dataIndex : Index number or label string. Set chart . setChartData ( datasetIndex , dataIndex , value ). updateChart (); datasetIndex : Index number or label string. dataIndex : Index number or label string.","title":"Chart data"},{"location":"ui-chart/#manipulate-chart-object","text":"Get chart object var chart = chart . chart ; Set properties of chart Array of dataset var datasets = chart . data . datasets ; Label of dataset var label = chart . data . datasets [ i ]. label ; Labels var labels = chart . data . labels ; Set chart data chart . data . datasets [ datasetIndex ]. data [ dataIndex ] = value ; Update chart chart . update ();","title":"Manipulate chart object"},{"location":"ui-dialog/","text":"Introduction \u00b6 A container with a title, content, buttons and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add dialog object \u00b6 var dialog = scene . rexUI . add . dialog ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , title : titleGameObject , toolbar : [ buttonGameObject , buttonGameObject , // ... ], content : contentGameObject , description : descriptionGameObject , choices : [ buttonGameObject , buttonGameObject , // ... ], actions : [ buttonGameObject , buttonGameObject , // ... ], // Space space : { left : 0 , right : 0 , top : 0 , bottom : 0 , title : 0 , titleLeft : 0 , titleRight : 0 , content : 0 , contentLeft : 0 , contentRight : 0 , description : 0 , descriptionLeft : 0 , descriptionRight : 0 choices : 0 , choicesLeft : 0 , choicesRight : 0 , actionsLeft : 0 , actionsRight : 0 , toolbarItem : 0 , choice : 0 , action : 0 , }, expand : { title : true , content : true , description : true , choices : true , actions : true , }, align : { title : 'center' , content : 'center' , description : 'center' , choices : 'center' , actions : 'center' , }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of dialog. title : Game object of title, optional. toolbar : Array of Game objects for toolbar-buttons group which arranged from left to right, optional. content : Game object of content, optional. description : Game object of description, optional. choices : Array of Game objects for choice-buttons group which arranged from top to bottom, optional. actions : Array of Game objects for action-buttons group which arranged from left to right, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.title : Space between title game object and below game object. space.titleLeft , space.titleRight : Extra left/right padding of title game object. space.content : Space between content game object and below game object. space.contentLeft , space.contentRight : Extra left/right padding of content game object. space.description : Space between description game object and below game object. space.descriptionLeft , space.descriptionRight : Extra left/right padding of description game object. space.choices : Space between last choice-button and below game object. space.choicesLeft , space.choicesRight : Extra left/right padding of choice buttons. space.actionsLeft , space.actionsRight : Extra left/right padding of actions buttons. space.toolbarItem : Space between each toolbar item game objects. space.choice : Space between each choice-button game objects. space.action : Space between each action-button game objects. expand : Expand width of element expand.title : Set true to expand width of title game object. expand.content expand.description expand.choices expand.actions align : Align element align.title 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.content align.description align.choices align.actions : Alignment of action-buttons. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this dialog. Custom class \u00b6 Define class class MyDialog extends RexPlugins . UI . Dialog { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var dialog = new MyDialog ( scene , config ); Layout children \u00b6 Arrange position of all elements. dialog . layout (); Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 Click button dialog . on ( 'button.click' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button dialog . on ( 'button.over' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button dialog . on ( 'button.out' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Emit button click event \u00b6 Emit action/choice button click event dialog . emitChoiceClick ( index ); dialog . emitActionClick ( index ); index : Index of triggered button game object, or a button game object. Get element \u00b6 Get element Background game object var background = dialog . getElement ( 'background' ); Title game object var title = dialog . getElement ( 'title' ); Content game object var content = dialog . getElement ( 'content' ); Choice button game object var buttons = dialog . getElement ( 'choices' ); or var button = dialog . getChoice ( index ); or var button = dialog . getElement ( 'choices[' + index + ']' ); Acrion button game object var buttons = dialog . getElement ( 'actions' ); or var button = dialog . getAction ( index ); or var button = dialog . getElement ( 'actions[' + index + ']' ); Get by name var gameObject = dialog . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call dialog.layout() , or topSizer.layout() after show/hide any button. Show choice/action button dialog . showChoice ( index ); dialog . showAction ( index ); index : A number index, or a button game object. Hide action/choice button. dialog . hideChoice ( index ); dialog . hideAction ( index ); index : A number index, or a button game object. For each button \u00b6 dialog . forEachChoice ( callback , scope ); dialog . forEachAction ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Dialog"},{"location":"ui-dialog/#introduction","text":"A container with a title, content, buttons and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-dialog/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-dialog/#usage","text":"Sample code","title":"Usage"},{"location":"ui-dialog/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-dialog/#add-dialog-object","text":"var dialog = scene . rexUI . add . dialog ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , title : titleGameObject , toolbar : [ buttonGameObject , buttonGameObject , // ... ], content : contentGameObject , description : descriptionGameObject , choices : [ buttonGameObject , buttonGameObject , // ... ], actions : [ buttonGameObject , buttonGameObject , // ... ], // Space space : { left : 0 , right : 0 , top : 0 , bottom : 0 , title : 0 , titleLeft : 0 , titleRight : 0 , content : 0 , contentLeft : 0 , contentRight : 0 , description : 0 , descriptionLeft : 0 , descriptionRight : 0 choices : 0 , choicesLeft : 0 , choicesRight : 0 , actionsLeft : 0 , actionsRight : 0 , toolbarItem : 0 , choice : 0 , action : 0 , }, expand : { title : true , content : true , description : true , choices : true , actions : true , }, align : { title : 'center' , content : 'center' , description : 'center' , choices : 'center' , actions : 'center' , }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of dialog. title : Game object of title, optional. toolbar : Array of Game objects for toolbar-buttons group which arranged from left to right, optional. content : Game object of content, optional. description : Game object of description, optional. choices : Array of Game objects for choice-buttons group which arranged from top to bottom, optional. actions : Array of Game objects for action-buttons group which arranged from left to right, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.title : Space between title game object and below game object. space.titleLeft , space.titleRight : Extra left/right padding of title game object. space.content : Space between content game object and below game object. space.contentLeft , space.contentRight : Extra left/right padding of content game object. space.description : Space between description game object and below game object. space.descriptionLeft , space.descriptionRight : Extra left/right padding of description game object. space.choices : Space between last choice-button and below game object. space.choicesLeft , space.choicesRight : Extra left/right padding of choice buttons. space.actionsLeft , space.actionsRight : Extra left/right padding of actions buttons. space.toolbarItem : Space between each toolbar item game objects. space.choice : Space between each choice-button game objects. space.action : Space between each action-button game objects. expand : Expand width of element expand.title : Set true to expand width of title game object. expand.content expand.description expand.choices expand.actions align : Align element align.title 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.content align.description align.choices align.actions : Alignment of action-buttons. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this dialog.","title":"Add dialog object"},{"location":"ui-dialog/#custom-class","text":"Define class class MyDialog extends RexPlugins . UI . Dialog { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var dialog = new MyDialog ( scene , config );","title":"Custom class"},{"location":"ui-dialog/#layout-children","text":"Arrange position of all elements. dialog . layout ();","title":"Layout children"},{"location":"ui-dialog/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-dialog/#events","text":"Click button dialog . on ( 'button.click' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button dialog . on ( 'button.over' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button dialog . on ( 'button.out' , function ( button , groupName , index , pointer , event ) { // ... }, scope ); button : Triggered button game object. groupName : 'choices' , 'actions' , or 'toolbar' . index : Index of triggered button game object. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-dialog/#emit-button-click-event","text":"Emit action/choice button click event dialog . emitChoiceClick ( index ); dialog . emitActionClick ( index ); index : Index of triggered button game object, or a button game object.","title":"Emit button click event"},{"location":"ui-dialog/#get-element","text":"Get element Background game object var background = dialog . getElement ( 'background' ); Title game object var title = dialog . getElement ( 'title' ); Content game object var content = dialog . getElement ( 'content' ); Choice button game object var buttons = dialog . getElement ( 'choices' ); or var button = dialog . getChoice ( index ); or var button = dialog . getElement ( 'choices[' + index + ']' ); Acrion button game object var buttons = dialog . getElement ( 'actions' ); or var button = dialog . getAction ( index ); or var button = dialog . getElement ( 'actions[' + index + ']' ); Get by name var gameObject = dialog . getElement ( '#' + name );","title":"Get element"},{"location":"ui-dialog/#showhide-button","text":"Hidden elements won't be counted when layouting. Call dialog.layout() , or topSizer.layout() after show/hide any button. Show choice/action button dialog . showChoice ( index ); dialog . showAction ( index ); index : A number index, or a button game object. Hide action/choice button. dialog . hideChoice ( index ); dialog . hideAction ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-dialog/#for-each-button","text":"dialog . forEachChoice ( callback , scope ); dialog . forEachAction ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-fixwidthsizer/","text":"Introduction \u00b6 Layout children game objects into lines. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add sizer object \u00b6 var sizer = scene . rexUI . add . fixWidthSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 }, // name: '', // draggable: false }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , { width : 2 , height : 2 orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , { orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , orientation , { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.item : Space betwen each child of a line. space.line : Space between each line. Custom class \u00b6 Define class class MySizer extends RexPlugins . UI . FixWidthSizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation ); Add background \u00b6 sizer . addBackground ( child ); Add child \u00b6 Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , paddingConfig , childKey ); child : A game object paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. items : Reserved key, for all children item. Add new line \u00b6 sizer . addNewLine (); or sizer . add ( '\\n' ); Layout children \u00b6 Arrange position of all children. sizer . layout (); Remove child \u00b6 Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild ); Get element \u00b6 Get element All children items var items = label . getElement ( 'items' ); Get by name var gameObject = label . getElement ( '#' + name ); Other properties \u00b6 See base-sizer object .","title":"Fix-width sizer"},{"location":"ui-fixwidthsizer/#introduction","text":"Layout children game objects into lines. Author: Rex Game object","title":"Introduction"},{"location":"ui-fixwidthsizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-fixwidthsizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-fixwidthsizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-fixwidthsizer/#add-sizer-object","text":"var sizer = scene . rexUI . add . fixWidthSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 }, // name: '', // draggable: false }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , { width : 2 , height : 2 orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , { orientation : 0 , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } }); or var sizer = scene . rexUI . add . fixWidthSizer ( x , y , width , height , orientation , { left : 0 , right : 0 , top : 0 , bottom : 0 , item : 0 , line : 0 } ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.item : Space betwen each child of a line. space.line : Space between each line.","title":"Add sizer object"},{"location":"ui-fixwidthsizer/#custom-class","text":"Define class class MySizer extends RexPlugins . UI . FixWidthSizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation );","title":"Custom class"},{"location":"ui-fixwidthsizer/#add-background","text":"sizer . addBackground ( child );","title":"Add background"},{"location":"ui-fixwidthsizer/#add-child","text":"Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , paddingConfig , childKey ); child : A game object paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. items : Reserved key, for all children item.","title":"Add child"},{"location":"ui-fixwidthsizer/#add-new-line","text":"sizer . addNewLine (); or sizer . add ( '\\n' );","title":"Add new line"},{"location":"ui-fixwidthsizer/#layout-children","text":"Arrange position of all children. sizer . layout ();","title":"Layout children"},{"location":"ui-fixwidthsizer/#remove-child","text":"Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild );","title":"Remove child"},{"location":"ui-fixwidthsizer/#get-element","text":"Get element All children items var items = label . getElement ( 'items' ); Get by name var gameObject = label . getElement ( '#' + name );","title":"Get element"},{"location":"ui-fixwidthsizer/#other-properties","text":"See base-sizer object .","title":"Other properties"},{"location":"ui-gridsizer/","text":"Introduction \u00b6 Layout children game objects in grids. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add grid sizer object \u00b6 var gridSizer = scene . rexUI . add . gridSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // name: '', // draggable: false }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // width: undefined, // height: undefined }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , column , row ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width : Minimum width. i.e. Width of this gridSizer will larger then this value. height : Minimum height. i.e. Hieght of this gridSizer will larger then this value. column : Amount of column grids. row : Amount of row grids. columnProportions , rowProportions : Proportion of each column/row. Number : Apply this number proportion to each column/row Number array : Apply proportion of column/row through elements of this number array. Custom class \u00b6 Define class class MyGridSizer extends RexPlugins . UI . GridSizer { constructor ( scene , x , y , minWidth , minHeight , column , row ) { super ( scene , x , y , minWidth , minHeight , column , ro ); // ... } // ... } Create instance var gridSizer = new MyGridSizer ( scene , x , y , minWidth , minHeight , column , row ); Add background \u00b6 gridSizer . addBackground ( child ); Add child \u00b6 Add a game obejct to grid sizer gridSizer . add ( child , columnIndex , rowIndex ); or gridSizer . add ( child , columnIndex , rowIndex , align , paddingConfig , expand , childKey ); child : A game object columnIndex , rowIndex : Index of grid to add. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to height and width. childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. Proportion \u00b6 Set proportion of each column or row via gridSizer . setColumnProportion ( columnIndex , proportion ); gridSizer . setRowProportion ( rowIndex , proportion ); Layout children \u00b6 Arrange position of all children. gridSizer . layout (); Other properties \u00b6 See base sizer object .","title":"Grid sizer"},{"location":"ui-gridsizer/#introduction","text":"Layout children game objects in grids. Author: Rex Game object","title":"Introduction"},{"location":"ui-gridsizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-gridsizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-gridsizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-gridsizer/#add-grid-sizer-object","text":"var gridSizer = scene . rexUI . add . gridSizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // name: '', // draggable: false }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, // width: undefined, // height: undefined }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , { column : 0 , row : 0 , // columnProportions: undefined, // rowProportions: undefined, }); or var gridSizer = scene . rexUI . add . gridSizer ( x , y , width , height , column , row ); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width : Minimum width. i.e. Width of this gridSizer will larger then this value. height : Minimum height. i.e. Hieght of this gridSizer will larger then this value. column : Amount of column grids. row : Amount of row grids. columnProportions , rowProportions : Proportion of each column/row. Number : Apply this number proportion to each column/row Number array : Apply proportion of column/row through elements of this number array.","title":"Add grid sizer object"},{"location":"ui-gridsizer/#custom-class","text":"Define class class MyGridSizer extends RexPlugins . UI . GridSizer { constructor ( scene , x , y , minWidth , minHeight , column , row ) { super ( scene , x , y , minWidth , minHeight , column , ro ); // ... } // ... } Create instance var gridSizer = new MyGridSizer ( scene , x , y , minWidth , minHeight , column , row );","title":"Custom class"},{"location":"ui-gridsizer/#add-background","text":"gridSizer . addBackground ( child );","title":"Add background"},{"location":"ui-gridsizer/#add-child","text":"Add a game obejct to grid sizer gridSizer . add ( child , columnIndex , rowIndex ); or gridSizer . add ( child , columnIndex , rowIndex , align , paddingConfig , expand , childKey ); child : A game object columnIndex , rowIndex : Index of grid to add. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds Or a plain object { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to height and width. childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value.","title":"Add child"},{"location":"ui-gridsizer/#proportion","text":"Set proportion of each column or row via gridSizer . setColumnProportion ( columnIndex , proportion ); gridSizer . setRowProportion ( rowIndex , proportion );","title":"Proportion"},{"location":"ui-gridsizer/#layout-children","text":"Arrange position of all children. gridSizer . layout ();","title":"Layout children"},{"location":"ui-gridsizer/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-gridtable/","text":"Introduction \u00b6 A container with a grid table , slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add grid table object \u00b6 var gridTable = scene . rexUI . add . gridTable ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , table : { width : undefined , height : undefined , cellWidth : undefined , cellHeight : undefined , columns : 2 , mask : { padding : 0 }, interactive : true , reuseCellContainer : false , }, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , table : 0 , // table: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, createCellContainerCallback : function ( cell , cellContainer ) { var scene = cell . scene , width = cell . width , height = cell . height , item = cell . item , index = cell . index ; if ( cellContainer === null ) { // No reusable cell container, create a new one // cellContainer = scene.add.container(); } // Set child properties of cell container ... return cellContainer ; }, items : [], // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. Set width to undefined , and table.width is not undefined , will count width via table + slider. Set height to undefined , and table.height is not undefined , will count height via table + slider. scrollMode : Scroll grid table vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll grid table vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll grid table horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. table : Configuration of grid table core. table.width : Width of table, in pixels. Set to undefined to expand table width to fit this grid table object. table.height : Height of table, in pixels. Set to undefined to expand table height to fit this grid table object. table.cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . table.cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . table.columns : Columns count of each row. table.mask : A rectangle mask of cells table.mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. table.interactive : Set true to install touch events (tap/press/over/out/click). table.reuseCellContainer : Set true to reuse cell container when creating new cell container. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. createCellContainerCallback : Callback to return a container object of each visible cell. Properties of cell parameter cell.scene : Scene of this grid table object. cell.width : Width of this cell, in pixels. cell.height : Height of this cell, in pixels. cell.item : Item of this cell to display. cell.index : Index of this cell. Origin of returned cell container will be set to (0, 0) cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.table : A number: Space between table object and slider object. An object: Padding of table object. If scrollMode is 0 (vertical) : space.table.top , space.table.bottom : Top, bottom padding space of table object. space.table.right : Space between table object and slider object. If scrollMode is 1 (horizontal) : space.table.left , space.table.right : Left, right padding space of table object. space.table.bottom : Space between table object and slider object. space.header : Space between header and table. space.footer : Space between footer and table. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer items : Array of item data for each cell. name : Set name of this gridTable. Custom class \u00b6 Define class class MyGridTable extends RexPlugins . UI . GridTable { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var gridTable = new MyGridTable ( scene , config ); Layout children \u00b6 Arrange position of all elements. gridTable . layout (); Items \u00b6 Set gridTable . setItems ( items ); items : Array of item data for each cell. This method will update each visible cell of grid table. Clear all items gridTable . setItems (); Get var items = gridTable . items ; Scroll content \u00b6 Set gridTable . setChildOY ( oy ); or gridTable . childOY = oy ; Get var childOY = gridTable . childOY ; Top OY var topOY = gridTable . topChildOY ; Bottom OY var bottomOY = gridTable . bottomChildOY ; Scroll by percentage \u00b6 Set gridTable . setT ( t ); // t: 0~1 or gridTable . t = t ; Get var t = gridTable . t ; Scroll to top/bottom \u00b6 Scroll to top gridTable . scrollToTop (); Equal to gridTable.t = 0; Scroll to bottom gridTable . scrollToBottom (); Equal to gridTable.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state gridTable . setSliderEnable ( enabled ); or gridTable . sliderEnable = enabled ; Get enable state var enable = gridTable . sliderEnable ; Scroller Set enable state gridTable . setScrollerEnable ( enabled ); or gridTable . scrollerEnable = enabled ; Get enable state var enable = gridTable . scrollerEnable ; Refresh table cells \u00b6 table . refresh (); Other properties \u00b6 See base sizer object . Events \u00b6 Tap cell gridTable . on ( tapEventName , function ( cellContainer , cellIndex ) { // ... }, scope ); tapEventName : 'cell.1tap' , 'cell.2tap' , 'cell.3tap' , etc ... cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Press cell gridTable . on ( `cell.pressstart` , function ( cellContainer , cellIndex ) { // ... }, scope ); gridTable . on ( `cell.pressend` , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-over cell gridTable . on ( 'cell.over' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-out cell gridTable . on ( 'cell.out' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Click cell gridTable . on ( 'cell.click' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Get element \u00b6 Get element Background game object var background = gridTable . getElement ( 'background' ); Grid table var table = gridTable . getElement ( 'table' ); Slider Track var track = gridTable . getElement ( 'slider.track' ); Thumb var thumb = gridTable . getElement ( 'slider.thumb' ); Scroller var scroller = gridTable . getElement ( 'scroller' ); Get by name var gameObject = gridTable . getElement ( '#' + name );","title":"Grid table"},{"location":"ui-gridtable/#introduction","text":"A container with a grid table , slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-gridtable/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-gridtable/#usage","text":"Sample code","title":"Usage"},{"location":"ui-gridtable/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-gridtable/#add-grid-table-object","text":"var gridTable = scene . rexUI . add . gridTable ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , table : { width : undefined , height : undefined , cellWidth : undefined , cellHeight : undefined , columns : 2 , mask : { padding : 0 }, interactive : true , reuseCellContainer : false , }, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , table : 0 , // table: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, createCellContainerCallback : function ( cell , cellContainer ) { var scene = cell . scene , width = cell . width , height = cell . height , item = cell . item , index = cell . index ; if ( cellContainer === null ) { // No reusable cell container, create a new one // cellContainer = scene.add.container(); } // Set child properties of cell container ... return cellContainer ; }, items : [], // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. Set width to undefined , and table.width is not undefined , will count width via table + slider. Set height to undefined , and table.height is not undefined , will count height via table + slider. scrollMode : Scroll grid table vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll grid table vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll grid table horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. table : Configuration of grid table core. table.width : Width of table, in pixels. Set to undefined to expand table width to fit this grid table object. table.height : Height of table, in pixels. Set to undefined to expand table height to fit this grid table object. table.cellHeight : Default height of each cell. Expand cell height to fit table height : set cellHeight to undefined , and scrollMode is 'horizontal' . table.cellWidth : Width of each cell. Expand cell width to fit table width : set cellWidth to undefined , and scrollMode is 'vertical' . table.columns : Columns count of each row. table.mask : A rectangle mask of cells table.mask.padding : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is 0 . false : No mask. table.interactive : Set true to install touch events (tap/press/over/out/click). table.reuseCellContainer : Set true to reuse cell container when creating new cell container. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. createCellContainerCallback : Callback to return a container object of each visible cell. Properties of cell parameter cell.scene : Scene of this grid table object. cell.width : Width of this cell, in pixels. cell.height : Height of this cell, in pixels. cell.item : Item of this cell to display. cell.index : Index of this cell. Origin of returned cell container will be set to (0, 0) cellContainer : Cell container picked from object pool for reusing. Set reuseCellContainer to true to enable this feature. null : No cell container available. Game object : Reusable cell container. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.table : A number: Space between table object and slider object. An object: Padding of table object. If scrollMode is 0 (vertical) : space.table.top , space.table.bottom : Top, bottom padding space of table object. space.table.right : Space between table object and slider object. If scrollMode is 1 (horizontal) : space.table.left , space.table.right : Left, right padding space of table object. space.table.bottom : Space between table object and slider object. space.header : Space between header and table. space.footer : Space between footer and table. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer items : Array of item data for each cell. name : Set name of this gridTable.","title":"Add grid table object"},{"location":"ui-gridtable/#custom-class","text":"Define class class MyGridTable extends RexPlugins . UI . GridTable { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var gridTable = new MyGridTable ( scene , config );","title":"Custom class"},{"location":"ui-gridtable/#layout-children","text":"Arrange position of all elements. gridTable . layout ();","title":"Layout children"},{"location":"ui-gridtable/#items","text":"Set gridTable . setItems ( items ); items : Array of item data for each cell. This method will update each visible cell of grid table. Clear all items gridTable . setItems (); Get var items = gridTable . items ;","title":"Items"},{"location":"ui-gridtable/#scroll-content","text":"Set gridTable . setChildOY ( oy ); or gridTable . childOY = oy ; Get var childOY = gridTable . childOY ; Top OY var topOY = gridTable . topChildOY ; Bottom OY var bottomOY = gridTable . bottomChildOY ;","title":"Scroll content"},{"location":"ui-gridtable/#scroll-by-percentage","text":"Set gridTable . setT ( t ); // t: 0~1 or gridTable . t = t ; Get var t = gridTable . t ;","title":"Scroll by percentage"},{"location":"ui-gridtable/#scroll-to-topbottom","text":"Scroll to top gridTable . scrollToTop (); Equal to gridTable.t = 0; Scroll to bottom gridTable . scrollToBottom (); Equal to gridTable.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-gridtable/#enabledisable-scrolling","text":"Slider Set enable state gridTable . setSliderEnable ( enabled ); or gridTable . sliderEnable = enabled ; Get enable state var enable = gridTable . sliderEnable ; Scroller Set enable state gridTable . setScrollerEnable ( enabled ); or gridTable . scrollerEnable = enabled ; Get enable state var enable = gridTable . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-gridtable/#refresh-table-cells","text":"table . refresh ();","title":"Refresh table cells"},{"location":"ui-gridtable/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-gridtable/#events","text":"Tap cell gridTable . on ( tapEventName , function ( cellContainer , cellIndex ) { // ... }, scope ); tapEventName : 'cell.1tap' , 'cell.2tap' , 'cell.3tap' , etc ... cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Press cell gridTable . on ( `cell.pressstart` , function ( cellContainer , cellIndex ) { // ... }, scope ); gridTable . on ( `cell.pressend` , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-over cell gridTable . on ( 'cell.over' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Pointer-out cell gridTable . on ( 'cell.out' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell. Click cell gridTable . on ( 'cell.click' , function ( cellContainer , cellIndex ) { // ... }, scope ); cellContainer : Container game object of triggered cell. cellIndex : Index of triggered cell.","title":"Events"},{"location":"ui-gridtable/#get-element","text":"Get element Background game object var background = gridTable . getElement ( 'background' ); Grid table var table = gridTable . getElement ( 'table' ); Slider Track var track = gridTable . getElement ( 'slider.track' ); Thumb var thumb = gridTable . getElement ( 'slider.thumb' ); Scroller var scroller = gridTable . getElement ( 'scroller' ); Get by name var gameObject = gridTable . getElement ( '#' + name );","title":"Get element"},{"location":"ui-label/","text":"Introduction \u00b6 A container with an icon, text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add label object \u00b6 var label = scene . rexUI . add . label ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , expandTextWidth : false , expandTextHeight : false , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of label. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. text : Game object of text, optional. expandTextWidth : Set true to expand width of text object. expandTextHeight : Set true to expand height of text object. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this label. draggable : Set true to drag to-most sizer. Expand size of text \u00b6 Expand width/height of text when expandTextWidth / expandTextHeight is true To resize text object, text object should have resize method. For example class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); scene . add . existing ( this ); } resize ( width , height ) { this . setFixedSize ( width , height ); return this ; } } Or uses bbcode text object , or tag text object Custom class \u00b6 Define class class MyLabel extends RexPlugins . UI . Label { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var label = new MyLabel ( scene , config ); Layout children \u00b6 Arrange position of all elements. label . layout (); Get element \u00b6 Get element Background game object var background = label . getElement ( 'background' ); Icon game object var icon = label . getElement ( 'icon' ); Text game object var textObject = label . getElement ( 'text' ); Action icon game object var action = label . getElement ( 'action' ); Get by name var gameObject = label . getElement ( '#' + name ); Text \u00b6 Get text string var s = label . text ; Set text string label . setText ( s ); or label . text = s ; Other properties \u00b6 See sizer object , base sizer object .","title":"Label"},{"location":"ui-label/#introduction","text":"A container with an icon, text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-label/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-label/#usage","text":"Sample code","title":"Usage"},{"location":"ui-label/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-label/#add-label-object","text":"var label = scene . rexUI . add . label ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , expandTextWidth : false , expandTextHeight : false , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of label. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. text : Game object of text, optional. expandTextWidth : Set true to expand width of text object. expandTextHeight : Set true to expand height of text object. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. Phaser 3 engine does not support nested mask , uses circle mask image instead. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this label. draggable : Set true to drag to-most sizer.","title":"Add label object"},{"location":"ui-label/#expand-size-of-text","text":"Expand width/height of text when expandTextWidth / expandTextHeight is true To resize text object, text object should have resize method. For example class MyText extends Phaser . GameObjects . Text { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); scene . add . existing ( this ); } resize ( width , height ) { this . setFixedSize ( width , height ); return this ; } } Or uses bbcode text object , or tag text object","title":"Expand size of text"},{"location":"ui-label/#custom-class","text":"Define class class MyLabel extends RexPlugins . UI . Label { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var label = new MyLabel ( scene , config );","title":"Custom class"},{"location":"ui-label/#layout-children","text":"Arrange position of all elements. label . layout ();","title":"Layout children"},{"location":"ui-label/#get-element","text":"Get element Background game object var background = label . getElement ( 'background' ); Icon game object var icon = label . getElement ( 'icon' ); Text game object var textObject = label . getElement ( 'text' ); Action icon game object var action = label . getElement ( 'action' ); Get by name var gameObject = label . getElement ( '#' + name );","title":"Get element"},{"location":"ui-label/#text","text":"Get text string var s = label . text ; Set text string label . setText ( s ); or label . text = s ;","title":"Text"},{"location":"ui-label/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-menu/","text":"Introduction \u00b6 A container with buttons and sub-menu. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add menu object \u00b6 var menu = scene . rexUI . add . menu ({ // x: 0, // y: 0, // anchor: undefined, // orientation: 1, items : [], createBackgroundCallback : function ( items ) { var scene = items . scene ; // container = ... return container ; }, createBackgroundCallbackScope : undefined , createButtonCallback : function ( item , index , items ) { var scene = item . scene ; // var isFirstButton = (index === 0); // var isLastButton = (index === (items.length - 1)); // container = ... return container ; }, createButtonCallbackScope : undefined , easeIn : 0 , // easeIn: { // duration: 500, // ease: 'Cubic' // }, easeOut : 0 , // easeOut: { // duration: 100, // ease: 'Linear' // }, // expandEvent: 'button.click' name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . orientation : Main orientation of the menu, default is 1 (top to bottom) 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange buttons from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange buttons from top to bottom. items : Array of item data for each button. Each item has children : An array of items for sub-menu, optional. Other custom properties createBackgroundCallback : Callback to return container object of menu's bckground. Properties of items parameter items.scene : Scene of this menu object. createButtonCallback : Callback to return container object of each item. Properties of item parameter item.scene : Scene of this menu object. Other custom properties easeIn : Scale up size when extend menu. A number : Duration of ease, in milliseconds. An object : easeIn.duration : Duration of ease, in milliseconds. easeIn.ease : Ease function, default is 'Cubic' easeOut : Scale down size when extend menu. A number : Duration of ease, in milliseconds. An object : easeOut.duration : Duration of ease, in milliseconds. easeOut.ease : Ease function, default is 'Linear' expandEvent : Event name of expanding sub-menu. 'button.click' : Default value 'button.over' name : Set name of this menu. Custom class \u00b6 Define class class MyMenu extends RexPlugins . UI . Menu { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var menu = new MyMenu ( scene , config ); Collapse \u00b6 Collapse menu menu . collapse (); Collapse sub-menu menu . collapseSubMenu (); Layout children \u00b6 Arrange position of all children. This will be called when menu object created, user does not need call it again generally. menu . layout (); Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 Click button menu . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button menu . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button menu . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Menu"},{"location":"ui-menu/#introduction","text":"A container with buttons and sub-menu. Author: Rex Game object","title":"Introduction"},{"location":"ui-menu/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-menu/#usage","text":"Sample code","title":"Usage"},{"location":"ui-menu/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-menu/#add-menu-object","text":"var menu = scene . rexUI . add . menu ({ // x: 0, // y: 0, // anchor: undefined, // orientation: 1, items : [], createBackgroundCallback : function ( items ) { var scene = items . scene ; // container = ... return container ; }, createBackgroundCallbackScope : undefined , createButtonCallback : function ( item , index , items ) { var scene = item . scene ; // var isFirstButton = (index === 0); // var isLastButton = (index === (items.length - 1)); // container = ... return container ; }, createButtonCallbackScope : undefined , easeIn : 0 , // easeIn: { // duration: 500, // ease: 'Cubic' // }, easeOut : 0 , // easeOut: { // duration: 100, // ease: 'Linear' // }, // expandEvent: 'button.click' name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . orientation : Main orientation of the menu, default is 1 (top to bottom) 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange buttons from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange buttons from top to bottom. items : Array of item data for each button. Each item has children : An array of items for sub-menu, optional. Other custom properties createBackgroundCallback : Callback to return container object of menu's bckground. Properties of items parameter items.scene : Scene of this menu object. createButtonCallback : Callback to return container object of each item. Properties of item parameter item.scene : Scene of this menu object. Other custom properties easeIn : Scale up size when extend menu. A number : Duration of ease, in milliseconds. An object : easeIn.duration : Duration of ease, in milliseconds. easeIn.ease : Ease function, default is 'Cubic' easeOut : Scale down size when extend menu. A number : Duration of ease, in milliseconds. An object : easeOut.duration : Duration of ease, in milliseconds. easeOut.ease : Ease function, default is 'Linear' expandEvent : Event name of expanding sub-menu. 'button.click' : Default value 'button.over' name : Set name of this menu.","title":"Add menu object"},{"location":"ui-menu/#custom-class","text":"Define class class MyMenu extends RexPlugins . UI . Menu { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var menu = new MyMenu ( scene , config );","title":"Custom class"},{"location":"ui-menu/#collapse","text":"Collapse menu menu . collapse (); Collapse sub-menu menu . collapseSubMenu ();","title":"Collapse"},{"location":"ui-menu/#layout-children","text":"Arrange position of all children. This will be called when menu object created, user does not need call it again generally. menu . layout ();","title":"Layout children"},{"location":"ui-menu/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-menu/#events","text":"Click button menu . on ( 'button.click' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-over button menu . on ( 'button.over' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation() Pointer-out button menu . on ( 'button.out' , function ( button , index , pointer , event ) { // ... }, scope ); button : Game object of triggered button. index : Index of triggered button. pointer : Pointer object. Cancel remaining touched events : event.stopPropagation()","title":"Events"},{"location":"ui-numberbar/","text":"Introduction \u00b6 A container with an icon, slider, text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add number bar object \u00b6 var numberBar = scene . rexUI . add . numberBar ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, background : backgroundGameObject , icon : iconGameObject , iconMask : false , slider : { background : sliderBackgroundGameObject , track : sliderTrackGameObject , indicator : sliderIndicatorGameObject , thumb : sliderThumbGameObject , input : 'none' , gap : undefined , } text : textGameObject , valuechangeCallback : function ( newValue , oldValue , numberBar ) { // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); } space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , slider : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of numberBar. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. slider : Slider game object which composed of slider.width : Fixed width of slider, optional. Width of slider will be extended if this value is not set. slider.background : Game object of slider background, optional. slider.track : Game object of slider track. slider.indicator : Game object of slider indicator, optional. slider.thumb : Game object of slider thumb, optional. slider.input : 'drag' : Control slider by dragging thumb game object. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Default setting. slider.gap : Snap a value to nearest grid slice, using rounding. undefined : Disable this feature. text : Game object of text, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.slider : Space between slider game object and text game object. valuechangeCallback : callback function when value changed. name : Set name of this numberBar. Custom class \u00b6 Define class class MyNumberBar extends RexPlugins . UI . NumberBar { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var numberBar = new MyNumberBar ( scene , config ); Layout children \u00b6 Arrange position of all elements. numberBar . layout (); Get element \u00b6 Get element Background game object var background = numberBar . getElement ( 'background' ); Icon game object var icon = numberBar . getElement ( 'icon' ); Slider game object Slider background var sliderBackground = numberBar . getElement ( 'slider.background' ); Slider track var sliderTrack = numberBar . getElement ( 'slider.track' ); Slider indicator var sliderIndicator = numberBar . getElement ( 'slider.indicator' ); Slider thumb var sliderThumb = numberBar . getElement ( 'slider.thumb' ); Text game object var icon = numberBar . getElement ( 'text' ); Get by name var gameObject = numberBar . getElement ( '#' + name ); Value \u00b6 Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1 Text \u00b6 Get text string var s = numberBar . text ; Set text string numberBar . setText ( s ); or numberBar . text = s ; Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 On value changed numberBar . on ( 'valuechange' , function ( newValue , oldValue , numberBar ){ // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); }, scope );","title":"Number bar"},{"location":"ui-numberbar/#introduction","text":"A container with an icon, slider, text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-numberbar/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-numberbar/#usage","text":"Sample code","title":"Usage"},{"location":"ui-numberbar/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-numberbar/#add-number-bar-object","text":"var numberBar = scene . rexUI . add . numberBar ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, background : backgroundGameObject , icon : iconGameObject , iconMask : false , slider : { background : sliderBackgroundGameObject , track : sliderTrackGameObject , indicator : sliderIndicatorGameObject , thumb : sliderThumbGameObject , input : 'none' , gap : undefined , } text : textGameObject , valuechangeCallback : function ( newValue , oldValue , numberBar ) { // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); } space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , slider : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of numberBar. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. slider : Slider game object which composed of slider.width : Fixed width of slider, optional. Width of slider will be extended if this value is not set. slider.background : Game object of slider background, optional. slider.track : Game object of slider track. slider.indicator : Game object of slider indicator, optional. slider.thumb : Game object of slider thumb, optional. slider.input : 'drag' : Control slider by dragging thumb game object. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Default setting. slider.gap : Snap a value to nearest grid slice, using rounding. undefined : Disable this feature. text : Game object of text, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.slider : Space between slider game object and text game object. valuechangeCallback : callback function when value changed. name : Set name of this numberBar.","title":"Add number bar object"},{"location":"ui-numberbar/#custom-class","text":"Define class class MyNumberBar extends RexPlugins . UI . NumberBar { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var numberBar = new MyNumberBar ( scene , config );","title":"Custom class"},{"location":"ui-numberbar/#layout-children","text":"Arrange position of all elements. numberBar . layout ();","title":"Layout children"},{"location":"ui-numberbar/#get-element","text":"Get element Background game object var background = numberBar . getElement ( 'background' ); Icon game object var icon = numberBar . getElement ( 'icon' ); Slider game object Slider background var sliderBackground = numberBar . getElement ( 'slider.background' ); Slider track var sliderTrack = numberBar . getElement ( 'slider.track' ); Slider indicator var sliderIndicator = numberBar . getElement ( 'slider.indicator' ); Slider thumb var sliderThumb = numberBar . getElement ( 'slider.thumb' ); Text game object var icon = numberBar . getElement ( 'text' ); Get by name var gameObject = numberBar . getElement ( '#' + name );","title":"Get element"},{"location":"ui-numberbar/#value","text":"Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1","title":"Value"},{"location":"ui-numberbar/#text","text":"Get text string var s = numberBar . text ; Set text string numberBar . setText ( s ); or numberBar . text = s ;","title":"Text"},{"location":"ui-numberbar/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-numberbar/#events","text":"On value changed numberBar . on ( 'valuechange' , function ( newValue , oldValue , numberBar ){ // numberBar.text = Math.round(Phaser.Math.Linear(0, 100, newValue)); }, scope );","title":"Events"},{"location":"ui-overview/","text":"List of ui plugins \u00b6 UI components \u00b6 Buttons : A container with a group of buttons. Dialog : A container with a title, content, buttons and background. Fix-width-sizer : Layout children game objects into lines. Grid-sizer : Layout children game objects in grids. Grid-table : A container with a grid table , slider, and scroller. Label : A container with an icon, text, and background. Menu : A container with buttons and sub-menu. Number-bar : A container with an icon, slider, text, and background. Pages : A container with pages, only current page is visible. Scroll-able panel : A container with a panel, slider, and scroller. Sizer : Layout children game objects. Slider : A container with a track, indicator, thumb and background. Tabs : A container with 4 groups of buttons around a center panel. TextArea : A container with a text, slider, and scroller. Textbox : A container with an icon, ( typing and paging ) text, and background. Toast : Show text message for a short while. Scroll-able table There are 2 kinds of scroll-able tables : Grid-table only creates visible objects. It is suitable for large table. Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table. Basic container \u00b6 ContainerLite : Control the position and angle of children game objects. var container = scene . rexUI . add . container ( x , y ); or class MyContainer extends RexPlugins . UI . Container { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... } Background objects \u00b6 Round-rectangle : Round rectangle shape. var shape = scene . rexUI . add . roundRectangle ( x , y , width , height , radius , fillColor ); or class MyRoundRectangle extends RexPlugins . UI . RoundRectangle { constructor ( scene , x , y , width , height , radius , fillColor , fillAlpha ) { super ( scene , x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... } Nine-patch : Stretchable imaage. var ninePatch = scene . rexUI . add . ninePatch ( x , y , width , height , key , columns , rows , config ); or class MyNinePatch extends RexPlugins . UI . NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... } Canvas objects \u00b6 Circle mask image : Load a texture, then apply a circle mask. var image = scene . rexUI . add . circleMaskImage ( x , y , key , frame ); // var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config); or class MyImage extends RexPlugins . UI . CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... } Chart : Draw chart on canvas . Colored text objects \u00b6 BBCode text : Drawing text with BBCode protocol. var txt = scene . rexUI . add . BBCodeText ( x , y , text , style ); or class MyText extends RexPlugins . UI . BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Tag text : Displays text with multi-color, font face, or font size with tags. var txt = scene . rexUI . add . tagText ( x , y , text , style ); or class MyText extends RexPlugins . UI . TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Behaviors of text \u00b6 Text editor : Create an input text object above a text object to edit string content. scene . rexUI . add . edit ( textObject , config ); // scene.rexUI.add.edit(textObject, config, onClose); Video objects \u00b6 Video DOM : Create a video dom to play video. var video = scene . rexUI . add . video ( x , y , width , height , config ); // var video = scene.rexUI.add.video(config); or class MyVideo extends RexPlugins . UI . Video { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Video canvas : Create a canvas to play video. var video = scene . rexUI . add . videoCanvas ( x , y , width , height , config ); // var video = scene.rexUI.add.videoCanvas(config); or class MyVideo extends RexPlugins . UI . VideoCanvas { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Youtube player : Play youtube video on iframe. var video = scene . rexUI . add . youtubePlayer ( x , y , width , height , config ); // var video = scene.rexUI.add.youtubePlayer(config); or class MyVideo extends RexPlugins . UI . YoutubePlayer { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Gestures \u00b6 Tap : Get tap/multi-taps events of a game object. var tap = scene . rexUI . add . tap ( gameObject , config ); or var tap = new RexPlugins . UI . Tap ( gameObject , config ); Press : Get press events of a game object. var press = scene . rexUI . add . press ( gameObject , config ); or var press = new RexPlugins . UI . Press ( gameObject , config ); Swipe : Get swipe events of a game object. var swipe = scene . rexUI . add . swipe ( gameObject , config ); or var swipe = new RexPlugins . UI . Swipe ( gameObject , config ); Pan : Get pan events of a game object. var pan = scene . rexUI . add . pan ( gameObject , config ); or var pan = new RexPlugins . UI . Pan ( gameObject , config ); Pinch : Get scale factor from 2 dragging touch pointers. var pinch = scene . rexUI . add . pinch ( config ); or var pinch = new RexPlugins . UI . Pinch ( config ); Rotste : Get spin angle from 2 dragging touch pointers. var rotate = scene . rexUI . add . rotate ( config ); or var rotate = new RexPlugins . UI . Rotate ( config ); Behaviors \u00b6 Flip : Flip game object to another face by scaling width/height. var flip = scene . rexUI . add . flip ( gameObject , config ); or var flip = new RexPlugins . UI . Flip ( gameObject , config ); Helper methods \u00b6 Get parent \u00b6 Get parent sizer var parentSizer = scene . rexUI . getParentSizer ( gameObject ); gameObject : Any game object added to sizer. Get topmost sizer var topmostSizer = scene . rexUI . getTopmostSizer ( gameObject ); gameObject : Any game object added to sizer. Show/hide \u00b6 Show scene . rexUI . show ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Hide scene . rexUI . hide ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Is shown var isShown = scene . rexUI . isShown ( gameObject ); Is pointer in bounds \u00b6 var isInBounds = scene . rexUI . isInTouching ( gameObject ); // var isInBounds = scene.rexUI.isInTouching(gameObject, pointer); Demos \u00b6 Dialog Yes/No Choice Pop-up Edit Menu Text-box Text-area Number bar Grid table Tabs Tabs-tables Scroll-able panel Pages Fix-width sizer Chart Video Anchor Round-rectangle","title":"Overview"},{"location":"ui-overview/#list-of-ui-plugins","text":"","title":"List of ui plugins"},{"location":"ui-overview/#ui-components","text":"Buttons : A container with a group of buttons. Dialog : A container with a title, content, buttons and background. Fix-width-sizer : Layout children game objects into lines. Grid-sizer : Layout children game objects in grids. Grid-table : A container with a grid table , slider, and scroller. Label : A container with an icon, text, and background. Menu : A container with buttons and sub-menu. Number-bar : A container with an icon, slider, text, and background. Pages : A container with pages, only current page is visible. Scroll-able panel : A container with a panel, slider, and scroller. Sizer : Layout children game objects. Slider : A container with a track, indicator, thumb and background. Tabs : A container with 4 groups of buttons around a center panel. TextArea : A container with a text, slider, and scroller. Textbox : A container with an icon, ( typing and paging ) text, and background. Toast : Show text message for a short while. Scroll-able table There are 2 kinds of scroll-able tables : Grid-table only creates visible objects. It is suitable for large table. Grid-sizer adds all objects. Put this grid-sizer into scroll-able panel to have a scroll-able table.","title":"UI components"},{"location":"ui-overview/#basic-container","text":"ContainerLite : Control the position and angle of children game objects. var container = scene . rexUI . add . container ( x , y ); or class MyContainer extends RexPlugins . UI . Container { constructor ( scene , x , y , width , height , children ) { super ( scene , x , y , width , height , children ); // ... scene . add . existing ( this ); } // ... }","title":"Basic container"},{"location":"ui-overview/#background-objects","text":"Round-rectangle : Round rectangle shape. var shape = scene . rexUI . add . roundRectangle ( x , y , width , height , radius , fillColor ); or class MyRoundRectangle extends RexPlugins . UI . RoundRectangle { constructor ( scene , x , y , width , height , radius , fillColor , fillAlpha ) { super ( scene , x , y , width , height , radius , fillColor , fillAlpha ); // ... scene . add . existing ( this ); } // ... } Nine-patch : Stretchable imaage. var ninePatch = scene . rexUI . add . ninePatch ( x , y , width , height , key , columns , rows , config ); or class MyNinePatch extends RexPlugins . UI . NinePatch { constructor ( scene , x , y , width , height , key , columns , rows , config ) { super ( scene , x , y , width , height , key , columns , rows , config ); // ... scene . add . existing ( this ); } // ... }","title":"Background objects"},{"location":"ui-overview/#canvas-objects","text":"Circle mask image : Load a texture, then apply a circle mask. var image = scene . rexUI . add . circleMaskImage ( x , y , key , frame ); // var image = scene.rexUI.add.circleMaskImage(x, y, key, frame, config); or class MyImage extends RexPlugins . UI . CircleMaskImage { constructor ( scene , x , y , key , frame , config ) { super ( scene , x , y , key , frame , config ); // ... scene . add . existing ( this ); } // ... } Chart : Draw chart on canvas .","title":"Canvas objects"},{"location":"ui-overview/#colored-text-objects","text":"BBCode text : Drawing text with BBCode protocol. var txt = scene . rexUI . add . BBCodeText ( x , y , text , style ); or class MyText extends RexPlugins . UI . BBCodeText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... } Tag text : Displays text with multi-color, font face, or font size with tags. var txt = scene . rexUI . add . tagText ( x , y , text , style ); or class MyText extends RexPlugins . UI . TagText { constructor ( scene , x , y , text , style ) { super ( scene , x , y , text , style ); // ... scene . add . existing ( this ); } // ... }","title":"Colored text objects"},{"location":"ui-overview/#behaviors-of-text","text":"Text editor : Create an input text object above a text object to edit string content. scene . rexUI . add . edit ( textObject , config ); // scene.rexUI.add.edit(textObject, config, onClose);","title":"Behaviors of text"},{"location":"ui-overview/#video-objects","text":"Video DOM : Create a video dom to play video. var video = scene . rexUI . add . video ( x , y , width , height , config ); // var video = scene.rexUI.add.video(config); or class MyVideo extends RexPlugins . UI . Video { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Video canvas : Create a canvas to play video. var video = scene . rexUI . add . videoCanvas ( x , y , width , height , config ); // var video = scene.rexUI.add.videoCanvas(config); or class MyVideo extends RexPlugins . UI . VideoCanvas { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... } Youtube player : Play youtube video on iframe. var video = scene . rexUI . add . youtubePlayer ( x , y , width , height , config ); // var video = scene.rexUI.add.youtubePlayer(config); or class MyVideo extends RexPlugins . UI . YoutubePlayer { constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ); // ... scene . add . existing ( this ); } // ... }","title":"Video objects"},{"location":"ui-overview/#gestures","text":"Tap : Get tap/multi-taps events of a game object. var tap = scene . rexUI . add . tap ( gameObject , config ); or var tap = new RexPlugins . UI . Tap ( gameObject , config ); Press : Get press events of a game object. var press = scene . rexUI . add . press ( gameObject , config ); or var press = new RexPlugins . UI . Press ( gameObject , config ); Swipe : Get swipe events of a game object. var swipe = scene . rexUI . add . swipe ( gameObject , config ); or var swipe = new RexPlugins . UI . Swipe ( gameObject , config ); Pan : Get pan events of a game object. var pan = scene . rexUI . add . pan ( gameObject , config ); or var pan = new RexPlugins . UI . Pan ( gameObject , config ); Pinch : Get scale factor from 2 dragging touch pointers. var pinch = scene . rexUI . add . pinch ( config ); or var pinch = new RexPlugins . UI . Pinch ( config ); Rotste : Get spin angle from 2 dragging touch pointers. var rotate = scene . rexUI . add . rotate ( config ); or var rotate = new RexPlugins . UI . Rotate ( config );","title":"Gestures"},{"location":"ui-overview/#behaviors","text":"Flip : Flip game object to another face by scaling width/height. var flip = scene . rexUI . add . flip ( gameObject , config ); or var flip = new RexPlugins . UI . Flip ( gameObject , config );","title":"Behaviors"},{"location":"ui-overview/#helper-methods","text":"","title":"Helper methods"},{"location":"ui-overview/#get-parent","text":"Get parent sizer var parentSizer = scene . rexUI . getParentSizer ( gameObject ); gameObject : Any game object added to sizer. Get topmost sizer var topmostSizer = scene . rexUI . getTopmostSizer ( gameObject ); gameObject : Any game object added to sizer.","title":"Get parent"},{"location":"ui-overview/#showhide","text":"Show scene . rexUI . show ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Hide scene . rexUI . hide ( gameObject ); scene . rexUI . getTopmostSizer ( gameObject ). layout (); Is shown var isShown = scene . rexUI . isShown ( gameObject );","title":"Show/hide"},{"location":"ui-overview/#is-pointer-in-bounds","text":"var isInBounds = scene . rexUI . isInTouching ( gameObject ); // var isInBounds = scene.rexUI.isInTouching(gameObject, pointer);","title":"Is pointer in bounds"},{"location":"ui-overview/#demos","text":"Dialog Yes/No Choice Pop-up Edit Menu Text-box Text-area Number bar Grid table Tabs Tabs-tables Scroll-able panel Pages Fix-width sizer Chart Video Anchor Round-rectangle","title":"Demos"},{"location":"ui-pages/","text":"Introduction \u00b6 A container with pages, only current page is visible. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add pages object \u00b6 var pages = scene . rexUI . add . pages ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. name : Set name of this pages. Custom class \u00b6 Define class class MyPages extends RexPlugins . UI . Pages { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var pages = new MyPages ( scene , config ); Add background \u00b6 gridSizer . addBackground ( child ); Add page \u00b6 pages . addPage ( child , key , align , paddingConfig , expand ); child : A game object. key : Unique name of this page. align : 'left-top' , or Phaser.Display.Align.TOP_LEFT : Align game object at left-top. Default value. 'left-center' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'left-bottom' , or Phaser.Display.Align.LEFT_BOTTOM : Align game object at left-bottom. 'center-top' , or Phaser.Display.Align.TOP_CENTER : Align game object at center-top. 'center-center' , or Phaser.Display.Align.CENTER : Align game object at center-center. 'center-bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at center-bottom. 'right-top' , or Phaser.Display.Align.TOP_RIGHT : Align game object at right-top. 'right-center' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'right-bottom' , or Phaser.Display.Align.RIGHT_BOTTOM : Align game object at right-bottom. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to expand width and height. Swap to page \u00b6 pages . swapPage ( key ); key : Unique name of this page. Note This method will run pages.layout() to arrange position of current page. Page name \u00b6 Current page name var pageName = pages . currentKey ; Previous page name var pageName = pages . previousKey ; Name of all pages var names = pages . keys ; Page object \u00b6 Get page object var pageObject = pages . getPage ( key ); pageObject : A game object or null . Current page object var pageObject = pages . currentPage ; Previous page object var pageObject = pages . previousPage ; Other properties \u00b6 See base sizer object . Events \u00b6 Set page invisible, triggered when page is swapped out. pages . on ( 'pageinvisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object Set page visible, triggered when page is shown. pages . on ( 'pagevisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object","title":"Pages"},{"location":"ui-pages/#introduction","text":"A container with pages, only current page is visible. Author: Rex Game object","title":"Introduction"},{"location":"ui-pages/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-pages/#usage","text":"Sample code","title":"Usage"},{"location":"ui-pages/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-pages/#add-pages-object","text":"var pages = scene . rexUI . add . pages ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. name : Set name of this pages.","title":"Add pages object"},{"location":"ui-pages/#custom-class","text":"Define class class MyPages extends RexPlugins . UI . Pages { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var pages = new MyPages ( scene , config );","title":"Custom class"},{"location":"ui-pages/#add-background","text":"gridSizer . addBackground ( child );","title":"Add background"},{"location":"ui-pages/#add-page","text":"pages . addPage ( child , key , align , paddingConfig , expand ); child : A game object. key : Unique name of this page. align : 'left-top' , or Phaser.Display.Align.TOP_LEFT : Align game object at left-top. Default value. 'left-center' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'left-bottom' , or Phaser.Display.Align.LEFT_BOTTOM : Align game object at left-bottom. 'center-top' , or Phaser.Display.Align.TOP_CENTER : Align game object at center-top. 'center-center' , or Phaser.Display.Align.CENTER : Align game object at center-center. 'center-bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at center-bottom. 'right-top' , or Phaser.Display.Align.TOP_RIGHT : Align game object at right-top. 'right-center' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'right-bottom' , or Phaser.Display.Align.RIGHT_BOTTOM : Align game object at right-bottom. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to expand width and height.","title":"Add page"},{"location":"ui-pages/#swap-to-page","text":"pages . swapPage ( key ); key : Unique name of this page. Note This method will run pages.layout() to arrange position of current page.","title":"Swap to page"},{"location":"ui-pages/#page-name","text":"Current page name var pageName = pages . currentKey ; Previous page name var pageName = pages . previousKey ; Name of all pages var names = pages . keys ;","title":"Page name"},{"location":"ui-pages/#page-object","text":"Get page object var pageObject = pages . getPage ( key ); pageObject : A game object or null . Current page object var pageObject = pages . currentPage ; Previous page object var pageObject = pages . previousPage ;","title":"Page object"},{"location":"ui-pages/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-pages/#events","text":"Set page invisible, triggered when page is swapped out. pages . on ( 'pageinvisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object Set page visible, triggered when page is shown. pages . on ( 'pagevisible' , function ( pageObject , key , pages ) { // ... }, scope ); pageObject : Game object of page. key : Page name. pages : Pages object","title":"Events"},{"location":"ui-scrollablepanel/","text":"Introduction \u00b6 A container with a panel, slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add scroll-able panel object \u00b6 var scrollablePanel = scene . rexUI . add . scrollablePanel ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , panel : { child : panelGameObject , mask : { padding : 0 } }. slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , panel : 0 , // panel: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. scrollMode : Scroll panel vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll panel vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll panel horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel. panel : Configuration of panel game object. panel.child : Panel game object. panel.mask : Configuration of panel's mask. Set panel.mask to false to disable masking. panel.mask.padding : Extend mask with padding. Default value is 0 . slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.panel : A number: Space between panel object and slider object. An object: Padding of panel object. If scrollMode is 0 (vertical) : space.panel.top , space.panel.bottom : Top, bottom padding space of panel object. space.panel.right : Space between panel object and slider object. If scrollMode is 1 (horizontal) : space.panel.left , space.panel.right : Left, right padding space of panel object. space.panel.bottom : Space between panel object and slider object. space.header : Space between header and panel. space.footer : Space between footer and panel. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer name : Set name of this panel. Custom class \u00b6 Define class class MyPanel extends RexPlugins . UI . ScrollablePanel { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var scrollablePanel = new MyPanel ( scene , config ); Layout children \u00b6 Arrange position of all elements. scrollablePanel . layout (); Scroll content \u00b6 Set scrollablePanel . setChildOY ( oy ); or scrollablePanel . childOY = oy ; Get var childOY = scrollablePanel . childOY ; Scroll by percentage \u00b6 Set scrollablePanel . setT ( t ); // t: 0~1 or scrollablePanel . t = t ; Get var t = scrollablePanel . t ; Top OY var topOY = scrollablePanel . topChildOY ; Bottom OY var bottomOY = scrollablePanel . bottomChildOY ; Scroll to top/bottom \u00b6 Scroll to top scrollablePanel . scrollToTop (); Equal to scrollablePanel.t = 0; Scroll to bottom scrollablePanel . scrollToBottom (); Equal to scrollablePanel.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state scrollablePanel . setSliderEnable ( enabled ); or scrollablePanel . sliderEnable = enabled ; Get enable state var enable = scrollablePanel . sliderEnable ; Scroller Set enable state scrollablePanel . setScrollerEnable ( enabled ); or scrollablePanel . scrollerEnable = enabled ; Get enable state var enable = scrollablePanel . scrollerEnable ; Other properties \u00b6 See sizer object , base sizer object . Get element \u00b6 Get element Background game object var background = scrollablePanel . getElement ( 'background' ); Panel game object var panel = scrollablePanel . getElement ( 'panel' ); Slider Track var track = scrollablePanel . getElement ( 'slider.track' ); Thumb var thumb = scrollablePanel . getElement ( 'slider.thumb' ); Scroller var scroller = scrollablePanel . getElement ( 'scroller' ); Get by name var gameObject = scrollablePanel . getElement ( '#' + name );","title":"Scroll-able panel"},{"location":"ui-scrollablepanel/#introduction","text":"A container with a panel, slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-scrollablepanel/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-scrollablepanel/#usage","text":"Sample code","title":"Usage"},{"location":"ui-scrollablepanel/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-scrollablepanel/#add-scroll-able-panel-object","text":"var scrollablePanel = scene . rexUI . add . scrollablePanel ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, scrollMode : 0 , // Elements background : backgroundGameObject , panel : { child : panelGameObject , mask : { padding : 0 } }. slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , panel : 0 , // panel: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. scrollMode : Scroll panel vertically, or horizontally. 0 , 'vertical' , or 'v' : Scroll panel vertically. Default value. 1 , 'horizontal' , or 'h' : Scroll panel horizontally. background : Game object of background, optional. This background game object will be resized to fit the size of scroll-able panel. panel : Configuration of panel game object. panel.child : Panel game object. panel.mask : Configuration of panel's mask. Set panel.mask to false to disable masking. panel.mask.padding : Extend mask with padding. Default value is 0 . slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.panel : A number: Space between panel object and slider object. An object: Padding of panel object. If scrollMode is 0 (vertical) : space.panel.top , space.panel.bottom : Top, bottom padding space of panel object. space.panel.right : Space between panel object and slider object. If scrollMode is 1 (horizontal) : space.panel.left , space.panel.right : Left, right padding space of panel object. space.panel.bottom : Space between panel object and slider object. space.header : Space between header and panel. space.footer : Space between footer and panel. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer name : Set name of this panel.","title":"Add scroll-able panel object"},{"location":"ui-scrollablepanel/#custom-class","text":"Define class class MyPanel extends RexPlugins . UI . ScrollablePanel { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var scrollablePanel = new MyPanel ( scene , config );","title":"Custom class"},{"location":"ui-scrollablepanel/#layout-children","text":"Arrange position of all elements. scrollablePanel . layout ();","title":"Layout children"},{"location":"ui-scrollablepanel/#scroll-content","text":"Set scrollablePanel . setChildOY ( oy ); or scrollablePanel . childOY = oy ; Get var childOY = scrollablePanel . childOY ;","title":"Scroll content"},{"location":"ui-scrollablepanel/#scroll-by-percentage","text":"Set scrollablePanel . setT ( t ); // t: 0~1 or scrollablePanel . t = t ; Get var t = scrollablePanel . t ; Top OY var topOY = scrollablePanel . topChildOY ; Bottom OY var bottomOY = scrollablePanel . bottomChildOY ;","title":"Scroll by percentage"},{"location":"ui-scrollablepanel/#scroll-to-topbottom","text":"Scroll to top scrollablePanel . scrollToTop (); Equal to scrollablePanel.t = 0; Scroll to bottom scrollablePanel . scrollToBottom (); Equal to scrollablePanel.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-scrollablepanel/#enabledisable-scrolling","text":"Slider Set enable state scrollablePanel . setSliderEnable ( enabled ); or scrollablePanel . sliderEnable = enabled ; Get enable state var enable = scrollablePanel . sliderEnable ; Scroller Set enable state scrollablePanel . setScrollerEnable ( enabled ); or scrollablePanel . scrollerEnable = enabled ; Get enable state var enable = scrollablePanel . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-scrollablepanel/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-scrollablepanel/#get-element","text":"Get element Background game object var background = scrollablePanel . getElement ( 'background' ); Panel game object var panel = scrollablePanel . getElement ( 'panel' ); Slider Track var track = scrollablePanel . getElement ( 'slider.track' ); Thumb var thumb = scrollablePanel . getElement ( 'slider.thumb' ); Scroller var scroller = scrollablePanel . getElement ( 'scroller' ); Get by name var gameObject = scrollablePanel . getElement ( '#' + name );","title":"Get element"},{"location":"ui-sizer/","text":"Introduction \u00b6 Layout children game objects. It is inspired from wxSizer . Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add sizer object \u00b6 var sizer = scene . rexUI . add . sizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , }); or var sizer = scene . rexUI . add . sizer ( x , y , { orientation : 0 , // width: undefined, // height: undefined, // anchor: undefined, }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , { orientation : 0 , // anchor: undefined }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , orientation , { // anchor: undefined }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom. Custom class \u00b6 Define class class MySizer extends RexPlugins . UI . Sizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation ); Add background \u00b6 sizer . addBackground ( child ); Add child \u00b6 Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , proportion , align , paddingConfig , expand , childKey ); child : A game object. proportion : 0 , or 'min' : Place next game object closely. Default value. > 0 : Stretch game object via proportion value. null : Don't arrange this child. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to Expand height when orientation is 0 ( left-to-right ), or Expand width when orientation is 1 ( top-to-bottom ) childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value. Add space \u00b6 Add a stretchable space. sizer . addSpace (); // sizer.addSpace(proportion); Layout children \u00b6 Arrange position of all children. sizer . layout (); Remove child \u00b6 Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild ); Other properties \u00b6 See base sizer object .","title":"Sizer"},{"location":"ui-sizer/#introduction","text":"Layout children game objects. It is inspired from wxSizer . Author: Rex Game object","title":"Introduction"},{"location":"ui-sizer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-sizer/#usage","text":"Sample code","title":"Usage"},{"location":"ui-sizer/#install-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install plugin"},{"location":"ui-sizer/#add-sizer-object","text":"var sizer = scene . rexUI . add . sizer ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , }); or var sizer = scene . rexUI . add . sizer ( x , y , { orientation : 0 , // width: undefined, // height: undefined, // anchor: undefined, }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , { orientation : 0 , // anchor: undefined }); or var sizer = scene . rexUI . add . sizer ( x , y , width , height , orientation , { // anchor: undefined }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : Main orientation of the sizer. 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Arrange game objects from left ot right. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Arrange game objects from top to bottom.","title":"Add sizer object"},{"location":"ui-sizer/#custom-class","text":"Define class class MySizer extends RexPlugins . UI . Sizer { constructor ( scene , x , y , minWidth , minHeight , orientation ) { super ( scene , x , y , minWidth , minHeight , orientation ); // ... } // ... } Create instance var sizer = new MySizer ( scene , x , y , minWidth , minHeight , orientation );","title":"Custom class"},{"location":"ui-sizer/#add-background","text":"sizer . addBackground ( child );","title":"Add background"},{"location":"ui-sizer/#add-child","text":"Add a game obejct to sizer sizer . add ( child ); or sizer . add ( child , proportion , align , paddingConfig , expand , childKey ); child : A game object. proportion : 0 , or 'min' : Place next game object closely. Default value. > 0 : Stretch game object via proportion value. null : Don't arrange this child. align : 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. 'top' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at top-center. 'bottom' , or Phaser.Display.Align.BOTTOM_CENTER : Align game object at bottom-center. paddingConfig : Add space between bounds. Default is 0. A number for left/right/top/bottom bounds, Or a plain object. { left : 0 , right : 0 , top : 0 , bottom : 0 } expand : Set true to Expand height when orientation is 0 ( left-to-right ), or Expand width when orientation is 1 ( top-to-bottom ) childKey : Add this child into childMap, which could be read back by sizer.getElement(key) . undefined : Don't add this child. Default value.","title":"Add child"},{"location":"ui-sizer/#add-space","text":"Add a stretchable space. sizer . addSpace (); // sizer.addSpace(proportion);","title":"Add space"},{"location":"ui-sizer/#layout-children","text":"Arrange position of all children. sizer . layout ();","title":"Layout children"},{"location":"ui-sizer/#remove-child","text":"Remove a child sizer . remove ( child ); Remove all children sizer . clear ( destroyChild );","title":"Remove child"},{"location":"ui-sizer/#other-properties","text":"See base sizer object .","title":"Other properties"},{"location":"ui-slider/","text":"Introduction \u00b6 A container with a track, indicator, thumb and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add slider object \u00b6 var slider = scene . rexUI . add . slider ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , track : trackGameObject , indicator : indicatorGameObject , thumb : thumbGameObject , input : 'drag' , value : 0 , gap : undefined , valuechangeCallback : function ( newValue , oldValue , slider ) { }, space : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, enable : true , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Horizontal slider. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Vertical slider. background : Game object of background, optional. This background game object will be resized to fit the size of slider. track : Game object of track, optional. indicator : Game object of indicator, optional. thumb : Game object of thumb, optional. input : 'drag' , or 0 : Control slider by dragging thumb game object. Default setting. 'click' , or 1 : Control slider by touching track game object. 'none' , or -1 : Disable sider controlling. value : Initial value (0 ~ 1). gap : Snap a value to nearest grid slice, using rounding. undefined : Disalbe this feature. valuechangeCallback : callback function when value changed. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. enable : Set false to disable controlling. name : Set name of this slider. Custom class \u00b6 Define class class MySlider extends RexPlugins . UI . Slider { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var slider = new MySlider ( scene , config ); Layout children \u00b6 Arrange position of all elements. slider . layout (); Get element \u00b6 Get element Background game object var background = slider . getElement ( 'background' ); Track game object var track = slider . getElement ( 'track' ); Indicator game object var track = slider . getElement ( 'indicator' ); Thumb track game object var action = slider . getElement ( 'thumb' ); Get by name var gameObject = slider . getElement ( '#' + name ); Value \u00b6 Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1 Other properties \u00b6 See sizer object , base sizer object . Events \u00b6 On value changed slider . on ( 'valuechange' , function ( newValue , oldValue , slider ){ // }, scope );","title":"Slider"},{"location":"ui-slider/#introduction","text":"A container with a track, indicator, thumb and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-slider/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-slider/#usage","text":"Sample code","title":"Usage"},{"location":"ui-slider/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-slider/#add-slider-object","text":"var slider = scene . rexUI . add . slider ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , track : trackGameObject , indicator : indicatorGameObject , thumb : thumbGameObject , input : 'drag' , value : 0 , gap : undefined , valuechangeCallback : function ( newValue , oldValue , slider ) { }, space : { left : 0 , right : 0 , top : 0 , bottom : 0 , }, enable : true , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Horizontal slider. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Vertical slider. background : Game object of background, optional. This background game object will be resized to fit the size of slider. track : Game object of track, optional. indicator : Game object of indicator, optional. thumb : Game object of thumb, optional. input : 'drag' , or 0 : Control slider by dragging thumb game object. Default setting. 'click' , or 1 : Control slider by touching track game object. 'none' , or -1 : Disable sider controlling. value : Initial value (0 ~ 1). gap : Snap a value to nearest grid slice, using rounding. undefined : Disalbe this feature. valuechangeCallback : callback function when value changed. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. enable : Set false to disable controlling. name : Set name of this slider.","title":"Add slider object"},{"location":"ui-slider/#custom-class","text":"Define class class MySlider extends RexPlugins . UI . Slider { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var slider = new MySlider ( scene , config );","title":"Custom class"},{"location":"ui-slider/#layout-children","text":"Arrange position of all elements. slider . layout ();","title":"Layout children"},{"location":"ui-slider/#get-element","text":"Get element Background game object var background = slider . getElement ( 'background' ); Track game object var track = slider . getElement ( 'track' ); Indicator game object var track = slider . getElement ( 'indicator' ); Thumb track game object var action = slider . getElement ( 'thumb' ); Get by name var gameObject = slider . getElement ( '#' + name );","title":"Get element"},{"location":"ui-slider/#value","text":"Change value will also change the position of slider thumb and width of slider indicator. Get value var value = numberBar . getValue ( min , max ); // value : min ~ max or var value = numberBar . getValue (); // value: 0 ~ 1 or var value = numberBar . value ; // value: 0 ~ 1 Set value numberBar . setValue ( value , min , max ); // value: min ~ max or numberBar . setValue ( value ); // value: 0 ~ 1 or numberBar . value = value ; // value: 0 ~ 1 Increase value numberBar . addValue ( inc , min , max ); // inc: min ~ max or numberBar . addValue ( inc ); // inc: 0 ~ 1 or numberBar . value += inc ; // inc: 0 ~ 1","title":"Value"},{"location":"ui-slider/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-slider/#events","text":"On value changed slider . on ( 'valuechange' , function ( newValue , oldValue , slider ){ // }, scope );","title":"Events"},{"location":"ui-tabs/","text":"Introduction \u00b6 A container with 4 groups of buttons around a center panel. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add Tabs object \u00b6 var tabs = scene . rexUI . add . tabs ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , panel : panelGameObject , leftButtons : [ buttonGameObject , buttonGameObject , // ... ], rightButtons : [ buttonGameObject , buttonGameObject , // ... ], topButtons : [ buttonGameObject , buttonGameObject , // ... ], bottomButtons : [ buttonGameObject , buttonGameObject , // ... ], space : { left : 0 , right : 0 , top : 0 , bottom : 0 , leftButtonsOffset : 0 , rightButtonsOffset : 0 , topButtonsOffset : 0 , bottomButtonsOffset : 0 , leftButton : 0 , rightButton : 0 , topButton : 0 , bottomButton : 0 }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. panel : Game object of center panel. leftButtons , rightButtons , topButtons , bottomButtons : Array of button game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.leftButtonsOffset , space.rightButtonsOffset : Top offset of buttons group. space.topButtonsOffset , space.bottomButtonsOffset : Left offset of buttons group. space.leftButton , space.rightButton , space.topButton , space.bottomButton : Space between 2 button game objects. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this tabs. Custom class \u00b6 Define class class MyTabs extends RexPlugins . UI . Tabs { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var tabs = new MyTabs ( scene , config ); Layout children \u00b6 Arrange position of all elements. tabs . layout (); Other properties \u00b6 See grid sizer object , base-sizer object . Events \u00b6 Click button tabs . on ( 'button.click' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-over button tabs . on ( 'button.over' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-out button tabs . on ( 'button.out' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Emit button click event \u00b6 Emit button click event in a given group tabs . emitButtonClick ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Emit left/right/top/bottom button click event tabs . emitLeftButtonClick ( index ); tabs . emitRightButtonClick ( index ); tabs . emitTopButtonClick ( index ); tabs . emitBottomButtonClick ( index ); index : A number index, or a button game object. Get element \u00b6 Get element Background game object var background = tabs . getElement ( 'background' ); Panel game object var panel = tabs . getElement ( 'panel' ); Buttons Left button game objects var bottons = tabs . getElement ( 'leftButtons' ); or var botton = tabs . getLeftButton ( index ); or var bottons = tabs . getElement ( 'leftButtons[0]' ); First button of left buttons. Right button game objects var bottons = tabs . getElement ( 'rightButtons' ); or var botton = tabs . getRightButton ( index ); or var bottons = tabs . getElement ( 'rightButtons[0]' ); First button of right buttons. Top button game objects var bottons = tabs . getElement ( 'topButtons' ); or var botton = tabs . getTopButton ( index ); or var bottons = tabs . getElement ( 'topButtons[0]' ); First button of top buttons. Bottom button game objects var bottons = tabs . getElement ( 'bottomButtons' ); or var botton = tabs . getBottomButton ( index ); or var bottons = tabs . getElement ( 'bottomButtons[0]' ); First button of bottom buttons. Get by name var gameObject = tabs . getElement ( '#' + name ); Show/hide button \u00b6 Hidden elements won't be counted when layouting. Call tabs.layout() , or topSizer.layout() after show/hide any button. Show button in a group tabs . showButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Show left/right/top/bottom button tabs . showLeftButton ( index ); tabs . showRightButton ( index ); tabs . showTopButton ( index ); tabs . showBottomButton ( index ); index : A number index, or a button game object. Hide button in a group tabs . hideButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Hide left/right/top/bottom button. tabs . hideLeftButton ( index ); tabs . hideRightButton ( index ); tabs . hideTopButton ( index ); tabs . hideBottomButton ( index ); index : A number index, or a button game object. For each button \u00b6 tabs . forEachLeftButton ( callback , scope ); tabs . forEachRightButton ( callback , scope ); tabs . forEachTopButton ( callback , scope ); tabs . forEachBottomButton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"Tabs"},{"location":"ui-tabs/#introduction","text":"A container with 4 groups of buttons around a center panel. Author: Rex Game object","title":"Introduction"},{"location":"ui-tabs/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-tabs/#usage","text":"Sample code","title":"Usage"},{"location":"ui-tabs/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-tabs/#add-tabs-object","text":"var tabs = scene . rexUI . add . tabs ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , panel : panelGameObject , leftButtons : [ buttonGameObject , buttonGameObject , // ... ], rightButtons : [ buttonGameObject , buttonGameObject , // ... ], topButtons : [ buttonGameObject , buttonGameObject , // ... ], bottomButtons : [ buttonGameObject , buttonGameObject , // ... ], space : { left : 0 , right : 0 , top : 0 , bottom : 0 , leftButtonsOffset : 0 , rightButtonsOffset : 0 , topButtonsOffset : 0 , bottomButtonsOffset : 0 , leftButton : 0 , rightButton : 0 , topButton : 0 , bottomButton : 0 }, click : { mode : 'pointerup' , clickInterval : 100 } // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of grid table. panel : Game object of center panel. leftButtons , rightButtons , topButtons , bottomButtons : Array of button game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.leftButtonsOffset , space.rightButtonsOffset : Top offset of buttons group. space.topButtonsOffset , space.bottomButtonsOffset : Left offset of buttons group. space.leftButton , space.rightButton , space.topButton , space.bottomButton : Space between 2 button game objects. click : Configuration of button clicking . click.mode : 'pointerdown' , 'press' , or 0 : Fire 'click' event when touch pressed. 'pointerup' , 'release' , or 1 : Fire 'click' event when touch released after pressed. click.clickInterval : Interval between 2 'click' events, in ms. name : Set name of this tabs.","title":"Add Tabs object"},{"location":"ui-tabs/#custom-class","text":"Define class class MyTabs extends RexPlugins . UI . Tabs { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var tabs = new MyTabs ( scene , config );","title":"Custom class"},{"location":"ui-tabs/#layout-children","text":"Arrange position of all elements. tabs . layout ();","title":"Layout children"},{"location":"ui-tabs/#other-properties","text":"See grid sizer object , base-sizer object .","title":"Other properties"},{"location":"ui-tabs/#events","text":"Click button tabs . on ( 'button.click' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-over button tabs . on ( 'button.over' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object. Pointer-out button tabs . on ( 'button.out' , function ( button , groupName , index , pointer ) { // ... }, scope ); button : Triggered button game object. groupName : 'left' , 'right' , 'top' , or 'bottom' . index : Index of triggered button game object. pointer : Pointer object.","title":"Events"},{"location":"ui-tabs/#emit-button-click-event","text":"Emit button click event in a given group tabs . emitButtonClick ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Emit left/right/top/bottom button click event tabs . emitLeftButtonClick ( index ); tabs . emitRightButtonClick ( index ); tabs . emitTopButtonClick ( index ); tabs . emitBottomButtonClick ( index ); index : A number index, or a button game object.","title":"Emit button click event"},{"location":"ui-tabs/#get-element","text":"Get element Background game object var background = tabs . getElement ( 'background' ); Panel game object var panel = tabs . getElement ( 'panel' ); Buttons Left button game objects var bottons = tabs . getElement ( 'leftButtons' ); or var botton = tabs . getLeftButton ( index ); or var bottons = tabs . getElement ( 'leftButtons[0]' ); First button of left buttons. Right button game objects var bottons = tabs . getElement ( 'rightButtons' ); or var botton = tabs . getRightButton ( index ); or var bottons = tabs . getElement ( 'rightButtons[0]' ); First button of right buttons. Top button game objects var bottons = tabs . getElement ( 'topButtons' ); or var botton = tabs . getTopButton ( index ); or var bottons = tabs . getElement ( 'topButtons[0]' ); First button of top buttons. Bottom button game objects var bottons = tabs . getElement ( 'bottomButtons' ); or var botton = tabs . getBottomButton ( index ); or var bottons = tabs . getElement ( 'bottomButtons[0]' ); First button of bottom buttons. Get by name var gameObject = tabs . getElement ( '#' + name );","title":"Get element"},{"location":"ui-tabs/#showhide-button","text":"Hidden elements won't be counted when layouting. Call tabs.layout() , or topSizer.layout() after show/hide any button. Show button in a group tabs . showButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Show left/right/top/bottom button tabs . showLeftButton ( index ); tabs . showRightButton ( index ); tabs . showTopButton ( index ); tabs . showBottomButton ( index ); index : A number index, or a button game object. Hide button in a group tabs . hideButton ( groupName , index ); groupName : 'left' , 'right' , 'top' , or 'bottom' . index : A number index, or a button game object. Hide left/right/top/bottom button. tabs . hideLeftButton ( index ); tabs . hideRightButton ( index ); tabs . hideTopButton ( index ); tabs . hideBottomButton ( index ); index : A number index, or a button game object.","title":"Show/hide button"},{"location":"ui-tabs/#for-each-button","text":"tabs . forEachLeftButton ( callback , scope ); tabs . forEachRightButton ( callback , scope ); tabs . forEachTopButton ( callback , scope ); tabs . forEachBottomButton ( callback , scope ); callback : function ( button , index , buttons ) { // ... }","title":"For each button"},{"location":"ui-textarea/","text":"Introduction \u00b6 A container with a text, slider, and scroller. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add text-area object \u00b6 var textArea = scene . rexUI . add . textArea ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , text : textGameObject , // textWidth: undefined, // textHeight: undefined, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , text : 0 , // text: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, content : '' , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of text area. text : Game object of text. textWidth : Fixed width of text game object. Set undefined to ignore this feature. textHeight : Fixed height of text game object. Set undefined to ignore this feature. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.text : A number: Space between text object and slider object. An object: Padding of text object. If scrollMode is 0 (vertical) : space.text.top , space.text.bottom : Top, bottom padding space of text object. space.text.right : Space between text object and slider object. If scrollMode is 1 (horizontal) : space.text.left , space.text.right : Left, right padding space of text object. space.text.bottom : Space between text object and slider object. space.header : Space between header and text object. space.footer : Space between footer and text object. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer content : Content of this text area. name : Set name of this textArea. Custom class \u00b6 Define class class MyTextArea extends RexPlugins . UI . TextArea { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textArea = new MyTextArea ( scene , config ); Layout children \u00b6 Arrange position of all elements. textArea . layout (); Content \u00b6 Set textArea . setText ( text ); Append textArea . appendText ( text ); Get var text = textArea . text ; Scroll content \u00b6 Set textArea . setChildOY ( oy ); or textArea . childOY = oy ; Get var childOY = textArea . childOY ; Top OY var topOY = textArea . topChildOY ; Bottom OY var bottomOY = textArea . bottomChildOY ; Scroll by percentage \u00b6 Set textArea . setT ( t ); // t: 0~1 or textArea . t = t ; Get var t = textArea . t ; Scroll to top/bottom \u00b6 Scroll to top textArea . scrollToTop (); Equal to textArea.t = 0; Scroll to bottom textArea . scrollToBottom (); Equal to textArea.t = 1; Enable/disable scrolling \u00b6 Slider Set enable state textArea . setSliderEnable ( enabled ); or textArea . sliderEnable = enabled ; Get enable state var enable = textArea . sliderEnable ; Scroller Set enable state textArea . setScrollerEnable ( enabled ); or textArea . scrollerEnable = enabled ; Get enable state var enable = textArea . scrollerEnable ; Lines count \u00b6 var linesCount = textArea . linesCount ; Other properties \u00b6 See sizer object , base sizer object . Get element \u00b6 Get element Background game object var background = textArea . getElement ( 'background' ); Text game object var text = textArea . getElement ( 'text' ); Slider Track var track = textArea . getElement ( 'slider.track' ); Thumb var thumb = textArea . getElement ( 'slider.thumb' ); Scroller var scroller = textArea . getElement ( 'scroller' ); Get by name var gameObject = textArea . getElement ( '#' + name );","title":"Text area"},{"location":"ui-textarea/#introduction","text":"A container with a text, slider, and scroller. Author: Rex Game object","title":"Introduction"},{"location":"ui-textarea/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-textarea/#usage","text":"Sample code","title":"Usage"},{"location":"ui-textarea/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-textarea/#add-text-area-object","text":"var textArea = scene . rexUI . add . textArea ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, // Elements background : backgroundGameObject , text : textGameObject , // textWidth: undefined, // textHeight: undefined, slider : { track : trackGameObject , thumb : thumbGameObject , }, scroller : { threshold : 10 , slidingDeceleration : 5000 , backDeceleration : 2000 , }, clamplChildOY : false , header : headerGameObject , footer : footerGameObject , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , text : 0 , // text: { // top: 0, // bottom: 0, // left: 0, // right: 0, //}, header : 0 , footer : 0 , }, expand : { header : true , footer : true , }, align : { header : 'center' , footer : 'center' , }, content : '' , // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. background : Game object of background, optional. This background game object will be resized to fit the size of text area. text : Game object of text. textWidth : Fixed width of text game object. Set undefined to ignore this feature. textHeight : Fixed height of text game object. Set undefined to ignore this feature. slider : Componments of slider, optional. slider.background : Game object of slider background, optional. slider.track : Game object of track. slider.thumb : Game object of thumb. slider.input : 'drag' : Control slider by dragging thumb game object. Default setting. 'click' : Control slider by touching track game object. 'none' : Disable sider controlling. Set to false to skip creating slider. scroller : Configuration of scroller behavior. scroller.threshold : Minimal movement to scroll. Set 0 to scroll immediately. scroller.slidingDeceleration : Deceleration of slow down when dragging released. Set false to disable it. scroller.backDeceleration : Deceleration of pull back when out of bounds. Set false to disable it. Set to false to skip creating scroller. clamplChildOY : Set true to clamp scrolling. header : Game object of header, optional. footer : Game object of footer, optional. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds. space.text : A number: Space between text object and slider object. An object: Padding of text object. If scrollMode is 0 (vertical) : space.text.top , space.text.bottom : Top, bottom padding space of text object. space.text.right : Space between text object and slider object. If scrollMode is 1 (horizontal) : space.text.left , space.text.right : Left, right padding space of text object. space.text.bottom : Space between text object and slider object. space.header : Space between header and text object. space.footer : Space between footer and text object. expand : Expand width or height of element expand.header : Set true to expand width or height of header game object. expand.footer align : Align element align.header 'center' , or Phaser.Display.Align.CENTER : Align game object at center. Default value. 'left' , or Phaser.Display.Align.LEFT_CENTER : Align game object at left-center. 'right' , or Phaser.Display.Align.RIGHT_CENTER : Align game object at right-center. align.footer content : Content of this text area. name : Set name of this textArea.","title":"Add text-area object"},{"location":"ui-textarea/#custom-class","text":"Define class class MyTextArea extends RexPlugins . UI . TextArea { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textArea = new MyTextArea ( scene , config );","title":"Custom class"},{"location":"ui-textarea/#layout-children","text":"Arrange position of all elements. textArea . layout ();","title":"Layout children"},{"location":"ui-textarea/#content","text":"Set textArea . setText ( text ); Append textArea . appendText ( text ); Get var text = textArea . text ;","title":"Content"},{"location":"ui-textarea/#scroll-content","text":"Set textArea . setChildOY ( oy ); or textArea . childOY = oy ; Get var childOY = textArea . childOY ; Top OY var topOY = textArea . topChildOY ; Bottom OY var bottomOY = textArea . bottomChildOY ;","title":"Scroll content"},{"location":"ui-textarea/#scroll-by-percentage","text":"Set textArea . setT ( t ); // t: 0~1 or textArea . t = t ; Get var t = textArea . t ;","title":"Scroll by percentage"},{"location":"ui-textarea/#scroll-to-topbottom","text":"Scroll to top textArea . scrollToTop (); Equal to textArea.t = 0; Scroll to bottom textArea . scrollToBottom (); Equal to textArea.t = 1;","title":"Scroll to top/bottom"},{"location":"ui-textarea/#enabledisable-scrolling","text":"Slider Set enable state textArea . setSliderEnable ( enabled ); or textArea . sliderEnable = enabled ; Get enable state var enable = textArea . sliderEnable ; Scroller Set enable state textArea . setScrollerEnable ( enabled ); or textArea . scrollerEnable = enabled ; Get enable state var enable = textArea . scrollerEnable ;","title":"Enable/disable scrolling"},{"location":"ui-textarea/#lines-count","text":"var linesCount = textArea . linesCount ;","title":"Lines count"},{"location":"ui-textarea/#other-properties","text":"See sizer object , base sizer object .","title":"Other properties"},{"location":"ui-textarea/#get-element","text":"Get element Background game object var background = textArea . getElement ( 'background' ); Text game object var text = textArea . getElement ( 'text' ); Slider Track var track = textArea . getElement ( 'slider.track' ); Thumb var thumb = textArea . getElement ( 'slider.thumb' ); Scroller var scroller = textArea . getElement ( 'scroller' ); Get by name var gameObject = textArea . getElement ( '#' + name );","title":"Get element"},{"location":"ui-textbox/","text":"Introduction \u00b6 A container with an icon, ( typing and paging ) text, and background. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add textbox object \u00b6 var textBox = scene . rexUI . add . textBox ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of textBox. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. Max lines and wrapped width Built-in text object : maxLines and wrap width ( wordWrap.width ). BBcode text object : maxLines and wrap width ( wrap.width ). Tag text object : maxLines and wrap width ( wrap.width ). Fixed width and fixed height Built-in text object : fixedWidth and fixedHeight , set to 0 to disable this feature. BBcode text object : fixedWidth and fixedHeight , set to 0 to disable this feature. Tag text object : fixedWidth and fixedHeight , set to 0 to disable this feature. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this textBox. draggable : Set true to drag to-most sizer. Custom class \u00b6 Define class class MyTextBox extends RexPlugins . UI . TextBox { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textBox = new MyTextBox ( scene , config ); Layout children \u00b6 Arrange position of all elements. textBox . layout (); This method will be invoked when size of text has been changed automatically. Typing \u00b6 Start textBox . start ( content , typingSpeed ); content : Content string. speed : Typing speed in ms. Stop textBox . stop (); Stop and show all text textBox . stop ( true ); Pause textBox . pause (); Resume textBox . resume (); Is typing var isTyping = textBox . isTyping ; Page \u00b6 Type next page textBox . typeNextPage (); Is last page var isLastPage = textBox . isLastPage ; Is first page var isLastPage = textBox . isFirstPage ; Current page index var pageIndex = textBox . pageIndex ; Number of pages var pageIndex = textBox . pageCount ; Events \u00b6 On typing a character dialog . on ( 'type' , function () { // ... }, scope ); On Typing the last character of current page. dialog . on ( 'pageend' , function () { // ... }, scope ); Other properties \u00b6 See label object , sizer object , base sizer object .","title":"Text box"},{"location":"ui-textbox/#introduction","text":"A container with an icon, ( typing and paging ) text, and background. Author: Rex Game object","title":"Introduction"},{"location":"ui-textbox/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-textbox/#usage","text":"Sample code","title":"Usage"},{"location":"ui-textbox/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-textbox/#add-textbox-object","text":"var textBox = scene . rexUI . add . textBox ({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, // name: '', // draggable: false }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of textBox. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. Max lines and wrapped width Built-in text object : maxLines and wrap width ( wordWrap.width ). BBcode text object : maxLines and wrap width ( wrap.width ). Tag text object : maxLines and wrap width ( wrap.width ). Fixed width and fixed height Built-in text object : fixedWidth and fixedHeight , set to 0 to disable this feature. BBcode text object : fixedWidth and fixedHeight , set to 0 to disable this feature. Tag text object : fixedWidth and fixedHeight , set to 0 to disable this feature. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this textBox. draggable : Set true to drag to-most sizer.","title":"Add textbox object"},{"location":"ui-textbox/#custom-class","text":"Define class class MyTextBox extends RexPlugins . UI . TextBox { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var textBox = new MyTextBox ( scene , config );","title":"Custom class"},{"location":"ui-textbox/#layout-children","text":"Arrange position of all elements. textBox . layout (); This method will be invoked when size of text has been changed automatically.","title":"Layout children"},{"location":"ui-textbox/#typing","text":"Start textBox . start ( content , typingSpeed ); content : Content string. speed : Typing speed in ms. Stop textBox . stop (); Stop and show all text textBox . stop ( true ); Pause textBox . pause (); Resume textBox . resume (); Is typing var isTyping = textBox . isTyping ;","title":"Typing"},{"location":"ui-textbox/#page","text":"Type next page textBox . typeNextPage (); Is last page var isLastPage = textBox . isLastPage ; Is first page var isLastPage = textBox . isFirstPage ; Current page index var pageIndex = textBox . pageIndex ; Number of pages var pageIndex = textBox . pageCount ;","title":"Page"},{"location":"ui-textbox/#events","text":"On typing a character dialog . on ( 'type' , function () { // ... }, scope ); On Typing the last character of current page. dialog . on ( 'pageend' , function () { // ... }, scope );","title":"Events"},{"location":"ui-textbox/#other-properties","text":"See label object , sizer object , base sizer object .","title":"Other properties"},{"location":"ui-toast/","text":"Introduction \u00b6 Show text message for a short while. Author: Rex Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install scene plugin \u00b6 Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Add toast object \u00b6 var toast = scene . rexUI . add . toast ({ x : 0 , y : 0 , // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, duration : { in : 200 , hold : 1200 , out : 200 , }, // transitIn: 0, // transitOut: 0, name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of toast. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this toast. duration : Duration of displaying message duration.in : Duration of transit-in stage. duration.hold : Duration of hold stage. duration.out : Duration of transit-out stage. transitIn : Callback of transit-in. 0 , or popUp : Pop-up. 1 , or fadeIn : Fade-in. A callback : Custom transit-in function function ( gameObject , duration ) { // ... } transitOut : Callback of transit-out. 0 , or scaleDown : Scale-down. 1 , or fadeOut : Fade-out. A callback : Custom transit-out function function ( gameObject , duration ) { // ... } Toast object will be invisible at beginning. Custom class \u00b6 Define class class MyToast extends RexPlugins . UI . Toast { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var toast = new MyToast ( scene , config ); Layout children \u00b6 Arrange position of all children. This will be called when showing new message, user does not need call it again generally. toast . layout (); Show message \u00b6 toast . show ( message ); message : A string, or a callback. A string. Apply this content to text game object. Callback. Invoke this callback to configurate toast object. function ( toast ) { // var icon = toast.getElement('icon'); // var text = toast.getElement('text'); // var action = toast.getElement('action'); } Toast displays message follows these steps : transit-in , hold , transit-out . New message will be pending until toast is back to idle. Other properties \u00b6 See label object , sizer object , base sizer object .","title":"Toast"},{"location":"ui-toast/#introduction","text":"Show text message for a short while. Author: Rex Game object","title":"Introduction"},{"location":"ui-toast/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"ui-toast/#usage","text":"Sample code","title":"Usage"},{"location":"ui-toast/#install-scene-plugin","text":"Install plugin in configuration of game import UIPlugin from 'rexTemplates/ui/ui-plugin.js' ; var config = { // ... plugins : { scene : [{ key : 'rexUI' , plugin : UIPlugin , mapping : 'rexUI' }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install scene plugin"},{"location":"ui-toast/#add-toast-object","text":"var toast = scene . rexUI . add . toast ({ x : 0 , y : 0 , // anchor: undefined, // width: undefined, // height: undefined, orientation : 0 , background : backgroundGameObject , icon : iconGameObject , iconMask : false , text : textGameObject , action : actionGameObject , actionMask : false , space : { left : 0 , right : 0 , top : 0 , bottom : 0 , icon : 0 , text : 0 , }, duration : { in : 200 , hold : 1200 , out : 200 , }, // transitIn: 0, // transitOut: 0, name : '' }); x , y : Position of this object, it is valid when this object is the top object. anchor : See anchor . left , right , centerX , x , top , bottom , centerY , y : Position based on visible window, which composed of Percentage of visible width/height : 'p%' , p: 0 ~ 100 . 'left' (=0%), 'center' (=50%), 'right' (=100%) 'top' (=0%), 'center' (=50%), 'bottom' (=100%) Offset : '+n' , or '-n' . width , height : Minimum width, minimum height. orientation : 'left-to-right' , 'horizontal' , 'h' , 'x' , or 0 : Put icon at left side, and text at right side. 'top-to-bottom' , 'vertical' , 'v' , 'y' , or 1 : Put icon at top side, and text at bottom side. background : Game object of background, optional. This background game object will be resized to fit the size of toast. icon : Game object of icon, optional. iconMask : Set true to add a circle mask on icon game object. text : Game object of text. action : Game object of action icon, optional. actionMask : Set true to add a circle mask on action icon game object. space : Pads spaces space.left , space.right , space.top , space.bottom : Space of bounds space.icon : Space between icon game object and text game object. space.text : Space between text game object and action icon game object. name : Set name of this toast. duration : Duration of displaying message duration.in : Duration of transit-in stage. duration.hold : Duration of hold stage. duration.out : Duration of transit-out stage. transitIn : Callback of transit-in. 0 , or popUp : Pop-up. 1 , or fadeIn : Fade-in. A callback : Custom transit-in function function ( gameObject , duration ) { // ... } transitOut : Callback of transit-out. 0 , or scaleDown : Scale-down. 1 , or fadeOut : Fade-out. A callback : Custom transit-out function function ( gameObject , duration ) { // ... } Toast object will be invisible at beginning.","title":"Add toast object"},{"location":"ui-toast/#custom-class","text":"Define class class MyToast extends RexPlugins . UI . Toast { constructor ( scene , config ) { super ( scene , config ); // ... } // ... } Create instance var toast = new MyToast ( scene , config );","title":"Custom class"},{"location":"ui-toast/#layout-children","text":"Arrange position of all children. This will be called when showing new message, user does not need call it again generally. toast . layout ();","title":"Layout children"},{"location":"ui-toast/#show-message","text":"toast . show ( message ); message : A string, or a callback. A string. Apply this content to text game object. Callback. Invoke this callback to configurate toast object. function ( toast ) { // var icon = toast.getElement('icon'); // var text = toast.getElement('text'); // var action = toast.getElement('action'); } Toast displays message follows these steps : transit-in , hold , transit-out . New message will be pending until toast is back to idle.","title":"Show message"},{"location":"ui-toast/#other-properties","text":"See label object , sizer object , base sizer object .","title":"Other properties"},{"location":"uuid/","text":"Introduction \u00b6 Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser. Author: Richard Davey Usage \u00b6 var uuid = Phaser . Utils . String . UUID ();","title":"UUID"},{"location":"uuid/#introduction","text":"Creates and returns an RFC4122 version 4 compliant UUID, built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"uuid/#usage","text":"var uuid = Phaser . Utils . String . UUID ();","title":"Usage"},{"location":"vector2/","text":"Introduction \u00b6 A representation of a vector in 2D space ( {x, y} ), built-in object of phaser. Author: Richard Davey Usage \u00b6 Create object \u00b6 var vector = new Phaser . Math . Vector2 (); // var vector = new Phaser.Math.Vector2(x, y); // var vector = new Phaser.Math.Vector2({x, y}); Clone \u00b6 var newVector = vector . clone (); Set components \u00b6 Set (x, y) vector . set ( x , y ); // vector.setTo(x, y); or vector . copy ({ x , y }); // vector.setFromObject({x, y}); Set from polar coordinate vector . setToPolar ( azimuth , radius ); azimuth : The angular coordinate, in radians. Reset to (0, 0) vector . reset (); Get componments \u00b6 X, Y var x = vector . x ; var y = vector . y ; Angle var angle = vector . angle (); // angle in radians Length var length = vector . length (); or var lengthSq = vector . lengthSq (); // squared Methods \u00b6 Scale vector . scale ( value ); Normalize vector . normalize (); Negate vector . negate (); Vector methods \u00b6 Add vector . add ( src ); // src: {x, y} Subtract vector . subtract ( src ); // src: {x, y} Multiply vector . multiply ( src ); // src: {x, y} Divide vector . divide ( src ); // src: {x, y} Dot var value = vector . dot ( src ); // src: {x, y} Cross var value = vector . cross ( src ); // src: {x, y} Points method \u00b6 Distance between 2 points. var distance = vector . distance ( src ); or var distanceSq = vector . distanceSq ( src ); // squared Linearly interpolate between 2 points. vector . lerp ( src , t ); // src: {x, y} t : The interpolation percentage, between 0 and 1. Constant \u00b6 Zero (0,0) var vector = Phaser . Math . Vector2 . ZERO ; One (1,1) var vector = Phaser . Math . Vector2 . ONE ; Right (1,0) var vector = Phaser . Math . Vector2 . RIGHT ; Left (-1,0) var vector = Phaser . Math . Vector2 . LEFT ; Up (0,-1) var vector = Phaser . Math . Vector2 . UP ; Down (0,1) var vector = Phaser . Math . Vector2 . DOWN ;","title":"Vector2"},{"location":"vector2/#introduction","text":"A representation of a vector in 2D space ( {x, y} ), built-in object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"vector2/#usage","text":"","title":"Usage"},{"location":"vector2/#create-object","text":"var vector = new Phaser . Math . Vector2 (); // var vector = new Phaser.Math.Vector2(x, y); // var vector = new Phaser.Math.Vector2({x, y});","title":"Create object"},{"location":"vector2/#clone","text":"var newVector = vector . clone ();","title":"Clone"},{"location":"vector2/#set-components","text":"Set (x, y) vector . set ( x , y ); // vector.setTo(x, y); or vector . copy ({ x , y }); // vector.setFromObject({x, y}); Set from polar coordinate vector . setToPolar ( azimuth , radius ); azimuth : The angular coordinate, in radians. Reset to (0, 0) vector . reset ();","title":"Set components"},{"location":"vector2/#get-componments","text":"X, Y var x = vector . x ; var y = vector . y ; Angle var angle = vector . angle (); // angle in radians Length var length = vector . length (); or var lengthSq = vector . lengthSq (); // squared","title":"Get componments"},{"location":"vector2/#methods","text":"Scale vector . scale ( value ); Normalize vector . normalize (); Negate vector . negate ();","title":"Methods"},{"location":"vector2/#vector-methods","text":"Add vector . add ( src ); // src: {x, y} Subtract vector . subtract ( src ); // src: {x, y} Multiply vector . multiply ( src ); // src: {x, y} Divide vector . divide ( src ); // src: {x, y} Dot var value = vector . dot ( src ); // src: {x, y} Cross var value = vector . cross ( src ); // src: {x, y}","title":"Vector methods"},{"location":"vector2/#points-method","text":"Distance between 2 points. var distance = vector . distance ( src ); or var distanceSq = vector . distanceSq ( src ); // squared Linearly interpolate between 2 points. vector . lerp ( src , t ); // src: {x, y} t : The interpolation percentage, between 0 and 1.","title":"Points method"},{"location":"vector2/#constant","text":"Zero (0,0) var vector = Phaser . Math . Vector2 . ZERO ; One (1,1) var vector = Phaser . Math . Vector2 . ONE ; Right (1,0) var vector = Phaser . Math . Vector2 . RIGHT ; Left (-1,0) var vector = Phaser . Math . Vector2 . LEFT ; Up (0,-1) var vector = Phaser . Math . Vector2 . UP ; Down (0,1) var vector = Phaser . Math . Vector2 . DOWN ;","title":"Constant"},{"location":"video/","text":"Introduction \u00b6 A Video Game Object. Author: Richard Davey Usage \u00b6 Load video \u00b6 scene . load . video ( key , url , loadEvent , asBlob , noAudio ); Reference: load video Add video object \u00b6 var video = scene . add . rexVideoCanvas ( x , y , key ); // var video = scene.add.rexVideoCanvas(x, y); key : Optional key of the Video this Game Object will play, as stored in the Video Cache. Play \u00b6 video . play (); // video.play(loop, markerIn, markerOut); loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video. Play from URL \u00b6 Add video object var video = scene . add . rexVideoCanvas ( x , y ); Play video from URL video . loadURL ( url ); // video.loadURL(url, loadEvent, noAudio); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false . Pause \u00b6 Pause video . setPaused (); // video.setPaused(true); Resume video . setPaused ( false ); Stop \u00b6 Stops the video playing and clears all internal event listeners. video . stop (); Is playing \u00b6 Is playing var isPlaying = video . isPlaying (); // (not PAUSE) and (not not ENDED) Is paused var isPaused = video . isPaused (); Playback time \u00b6 Get var playbackTime = video . getCurrentTime (); or var t = video . getProgress (); // t: 0~1 Set Set to video . setCurrentTime ( playbackTime ); // time in seconds or video . seekTo ( t ); // t: 0~1 Is seeking var isSeeking = video . isSeeking (); Forward video . setCurrentTime ( '+' + time ); // time in seconds // video.setCurrentTime('+2'); Backeard video . setCurrentTime ( '-' + time ); // time in seconds // video.setCurrentTime('-2'); Playback rate \u00b6 Get var rate = video . getPlaybackRate (); Set video . setPlaybackRate ( rate ); Duration \u00b6 var duration = video . getDuration (); // time in seconds Volume \u00b6 Get var volume = video . getVolume (); // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1 Mute \u00b6 Get var muted = video . isMuted (); // muted: true/false Set video . setMute ( muted ); // muted: true/false Loop \u00b6 Get var loop = video . getLoop (); // loop: true/false Set video . setLoop ( loop ); // loop: true/false Video key \u00b6 Get var key = video . getVideoKey (); Change video key (video source) video . changeSource ( key ); // video.changeSource(key, autoplay, loop, markerIn, markerOut); autoplay : Should the video start playing immediately, once the swap is complete? loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video. Marks \u00b6 Add mark video . addMarker ( key , markerIn , markerOut ); key : A unique name to give this marker. markerIn , markerOut : The time, in seconds, representing the start/end of this marker. Play mark video . playMarker ( key , loop ); Remove mark video . removeMarker ( key ); Snapshot \u00b6 var canvasTexture = video . saveSnapshotTexture ( key ); or var canvasTexture = video . snapshot (); // var canvasTexture = video.snapshot(width, height); or var canvasTexture = video . snapshotArea ( x , y , srcWidth , srcHeight ); // var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight); x , y : The horizontal/vertical location of the top-left of the area to grab from. srcWidth , srcHeight : The width/height of area to grab from the video. destWidth , destHeight : The destination width/height of the grab, allowing you to resize it. canvasTexture : Canvas texture object . Get key of texture var key = canvasTexture . key ; Save texture \u00b6 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. var texture = video . saveTexture ( key ); // var texture = video.saveTexture(key, flipY); flipY : Set to true if use it as the input for a Shader. Events \u00b6 A Video is unlocked by a user gesture. video . on ( 'unlocked' , function ( video , error ){ }, scope ); A Video tries to play a source that does not exist, or is the wrong file type. video . on ( 'error' , function ( video , error ){ }, scope ); A Video has exhausted its allocated time while trying to connect to a video source to start playback. video . on ( 'timeout' , function ( video ){ }, scope ); A Video begins playback. video . on ( 'play' , function ( video ){ }, scope ); A Video finishes playback by reaching the end of its duration, or markerOut . video . on ( 'complete' , function ( video ){ }, scope ); A Video that is currently playing has looped. video . on ( 'loop' , function ( video ){ }, scope ); A Video begins seeking to a new point in its timeline. video . on ( 'seeking' , function ( video ){ }, scope ); A Video completes seeking to a new point in its timeline. video . on ( 'seeked' , function ( video ){ }, scope ); Enough of the video source has been loaded, that the browser is able to render a frame from it. video . on ( 'created' , function ( video , width , height ){ }, scope ); A Video is stopped from playback via a call to the Video.stop method, video . on ( 'stop' , function ( video ){ }, scope );","title":"Video"},{"location":"video/#introduction","text":"A Video Game Object. Author: Richard Davey","title":"Introduction"},{"location":"video/#usage","text":"","title":"Usage"},{"location":"video/#load-video","text":"scene . load . video ( key , url , loadEvent , asBlob , noAudio ); Reference: load video","title":"Load video"},{"location":"video/#add-video-object","text":"var video = scene . add . rexVideoCanvas ( x , y , key ); // var video = scene.add.rexVideoCanvas(x, y); key : Optional key of the Video this Game Object will play, as stored in the Video Cache.","title":"Add video object"},{"location":"video/#play","text":"video . play (); // video.play(loop, markerIn, markerOut); loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video.","title":"Play"},{"location":"video/#play-from-url","text":"Add video object var video = scene . add . rexVideoCanvas ( x , y ); Play video from URL video . loadURL ( url ); // video.loadURL(url, loadEvent, noAudio); loadEvent : The load event to listen for when not loading as a blob. 'loadeddata' : Data for the current frame is available. Default value. 'canplay' : The video is ready to start playing. 'canplaythrough' : The video can be played all the way through, without stopping. noAudio : Does the video have an audio track? If not you can enable auto-playing on it. Default value is false .","title":"Play from URL"},{"location":"video/#pause","text":"Pause video . setPaused (); // video.setPaused(true); Resume video . setPaused ( false );","title":"Pause"},{"location":"video/#stop","text":"Stops the video playing and clears all internal event listeners. video . stop ();","title":"Stop"},{"location":"video/#is-playing","text":"Is playing var isPlaying = video . isPlaying (); // (not PAUSE) and (not not ENDED) Is paused var isPaused = video . isPaused ();","title":"Is playing"},{"location":"video/#playback-time","text":"Get var playbackTime = video . getCurrentTime (); or var t = video . getProgress (); // t: 0~1 Set Set to video . setCurrentTime ( playbackTime ); // time in seconds or video . seekTo ( t ); // t: 0~1 Is seeking var isSeeking = video . isSeeking (); Forward video . setCurrentTime ( '+' + time ); // time in seconds // video.setCurrentTime('+2'); Backeard video . setCurrentTime ( '-' + time ); // time in seconds // video.setCurrentTime('-2');","title":"Playback time"},{"location":"video/#playback-rate","text":"Get var rate = video . getPlaybackRate (); Set video . setPlaybackRate ( rate );","title":"Playback rate"},{"location":"video/#duration","text":"var duration = video . getDuration (); // time in seconds","title":"Duration"},{"location":"video/#volume","text":"Get var volume = video . getVolume (); // volume: 0~1 Set video . setVolume ( volume ); // volume: 0~1","title":"Volume"},{"location":"video/#mute","text":"Get var muted = video . isMuted (); // muted: true/false Set video . setMute ( muted ); // muted: true/false","title":"Mute"},{"location":"video/#loop","text":"Get var loop = video . getLoop (); // loop: true/false Set video . setLoop ( loop ); // loop: true/false","title":"Loop"},{"location":"video/#video-key","text":"Get var key = video . getVideoKey (); Change video key (video source) video . changeSource ( key ); // video.changeSource(key, autoplay, loop, markerIn, markerOut); autoplay : Should the video start playing immediately, once the swap is complete? loop : Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats . markerIn , markerOut : Optional in/out marker time, in seconds , for playback of a sequence of the video.","title":"Video key"},{"location":"video/#marks","text":"Add mark video . addMarker ( key , markerIn , markerOut ); key : A unique name to give this marker. markerIn , markerOut : The time, in seconds, representing the start/end of this marker. Play mark video . playMarker ( key , loop ); Remove mark video . removeMarker ( key );","title":"Marks"},{"location":"video/#snapshot","text":"var canvasTexture = video . saveSnapshotTexture ( key ); or var canvasTexture = video . snapshot (); // var canvasTexture = video.snapshot(width, height); or var canvasTexture = video . snapshotArea ( x , y , srcWidth , srcHeight ); // var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight); x , y : The horizontal/vertical location of the top-left of the area to grab from. srcWidth , srcHeight : The width/height of area to grab from the video. destWidth , destHeight : The destination width/height of the grab, allowing you to resize it. canvasTexture : Canvas texture object . Get key of texture var key = canvasTexture . key ;","title":"Snapshot"},{"location":"video/#save-texture","text":"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. var texture = video . saveTexture ( key ); // var texture = video.saveTexture(key, flipY); flipY : Set to true if use it as the input for a Shader.","title":"Save texture"},{"location":"video/#events","text":"A Video is unlocked by a user gesture. video . on ( 'unlocked' , function ( video , error ){ }, scope ); A Video tries to play a source that does not exist, or is the wrong file type. video . on ( 'error' , function ( video , error ){ }, scope ); A Video has exhausted its allocated time while trying to connect to a video source to start playback. video . on ( 'timeout' , function ( video ){ }, scope ); A Video begins playback. video . on ( 'play' , function ( video ){ }, scope ); A Video finishes playback by reaching the end of its duration, or markerOut . video . on ( 'complete' , function ( video ){ }, scope ); A Video that is currently playing has looped. video . on ( 'loop' , function ( video ){ }, scope ); A Video begins seeking to a new point in its timeline. video . on ( 'seeking' , function ( video ){ }, scope ); A Video completes seeking to a new point in its timeline. video . on ( 'seeked' , function ( video ){ }, scope ); Enough of the video source has been loaded, that the browser is able to render a frame from it. video . on ( 'created' , function ( video , width , height ){ }, scope ); A Video is stopped from playback via a call to the Video.stop method, video . on ( 'stop' , function ( video ){ }, scope );","title":"Events"},{"location":"virtualjoystick/","text":"Introduction \u00b6 Simulate curosr keys according touch events. Author: Rex Member of scene Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexVirtualJoyStick from './plugins/virtualjoystick.js' ; Install global plugin \u00b6 Install plugin in configuration of game import VirtualJoyStickPlugin from './plugins/virtualjoystick-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexVirtualJoyStick' , plugin : VirtualJoyStickPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var joystick = scene . plugins . get ( 'rexVirtualJoyStick' ). add ( scene , { x : x , y : y , radius : radius , base : baseGameObject , thumb : thumbGameObject , // dir: '8dir', // forceMin: 16, // fixed: true, // enable: true }); base : Base game object. Create a circle shape object if no base game object passed. thumb : Thumb game object. Create a circle shape object if no thumb game object passed. x , y : Position of base game object radius : Circle hit-area of base game object dir : 'up&down' , or 0 : Simulate up or down cursor keys only. 'left&right' , or 1 : Simulate left or right cursor keys only. '4dir' , or 2 : Simulate up, down, left or right cursor keys. '8dir' , or 3 : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. forceMin : Cursor keys will be pressed when force is larger then this value. force : Distance between position of base game object to touch pointer fixed : Set true to fix to camera, i.e set scrollFactor to 0 for base and thumb game object. enable : Set false to disable cursor keys simulation State of cursor keys \u00b6 var cursorKeys = joystick . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = joystick . left ; var rightKeyDown = joystick . right ; var upKeyDown = joystick . up ; var downKeyDown = joystick . down ; var noKeyDown = joystick . noKey ; Force & Angle \u00b6 Force : Distance between position of base game object to touch pointer. var force = joystick . force ; var forceX = joystick . forceX ; var forceY = joystick . forceY ; var angle = joystick . angle ; // degree between -180 to 180 var rotation = joystick . rotation ; // radians Visible \u00b6 Visible of base game object. Get : Return visible of base game object var visible = joystick . visible ; Set : Set visible to base game object and thumb game object joystick . visible = visible ; joystick . setVisible ( visible ); joystick . toggleVisible (); Joystick will be disabled when invisible. Enable \u00b6 Get var enable = joystick . enable ; Set joystick . enable = enable ; joystick . setEnable ( enable ); joystick . toggleEnable (); Position \u00b6 Position of base game object. Get var x = joystick . x ; var y = joystick . y ; Set joystick . x = x ; joystick . y = y ; joystick . setPosition ( x , y ); Scroll factor \u00b6 Fix to camera joystick . setScrollFactor ( 0 ); Touch pointer \u00b6 Position var x = joystick . pointerX ; var y = joystick . pointerY ; Pointer var pointer = joystick . pointer ; Destroy \u00b6 Destroy base & thumb game object. joystick . destroy (); Events \u00b6 On joystick updated : joystick . on ( 'update' , function (){});","title":"Virtual joystick"},{"location":"virtualjoystick/#introduction","text":"Simulate curosr keys according touch events. Author: Rex Member of scene","title":"Introduction"},{"location":"virtualjoystick/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"virtualjoystick/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"virtualjoystick/#import-class","text":"import rexVirtualJoyStick from './plugins/virtualjoystick.js' ;","title":"Import class"},{"location":"virtualjoystick/#install-global-plugin","text":"Install plugin in configuration of game import VirtualJoyStickPlugin from './plugins/virtualjoystick-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexVirtualJoyStick' , plugin : VirtualJoyStickPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"virtualjoystick/#create-instance","text":"var joystick = scene . plugins . get ( 'rexVirtualJoyStick' ). add ( scene , { x : x , y : y , radius : radius , base : baseGameObject , thumb : thumbGameObject , // dir: '8dir', // forceMin: 16, // fixed: true, // enable: true }); base : Base game object. Create a circle shape object if no base game object passed. thumb : Thumb game object. Create a circle shape object if no thumb game object passed. x , y : Position of base game object radius : Circle hit-area of base game object dir : 'up&down' , or 0 : Simulate up or down cursor keys only. 'left&right' , or 1 : Simulate left or right cursor keys only. '4dir' , or 2 : Simulate up, down, left or right cursor keys. '8dir' , or 3 : Simulate up, up-left, up-right, down, down-left, down-right, left, or right cursor keys. forceMin : Cursor keys will be pressed when force is larger then this value. force : Distance between position of base game object to touch pointer fixed : Set true to fix to camera, i.e set scrollFactor to 0 for base and thumb game object. enable : Set false to disable cursor keys simulation","title":"Create instance"},{"location":"virtualjoystick/#state-of-cursor-keys","text":"var cursorKeys = joystick . createCursorKeys (); var leftKeyDown = cursorKeys . left . isDown ; var rightKeyDown = cursorKeys . right . isDown ; var upKeyDown = cursorKeys . up . isDown ; var downKeyDown = cursorKeys . down . isDown ; Or var leftKeyDown = joystick . left ; var rightKeyDown = joystick . right ; var upKeyDown = joystick . up ; var downKeyDown = joystick . down ; var noKeyDown = joystick . noKey ;","title":"State of cursor keys"},{"location":"virtualjoystick/#force-angle","text":"Force : Distance between position of base game object to touch pointer. var force = joystick . force ; var forceX = joystick . forceX ; var forceY = joystick . forceY ; var angle = joystick . angle ; // degree between -180 to 180 var rotation = joystick . rotation ; // radians","title":"Force &amp; Angle"},{"location":"virtualjoystick/#visible","text":"Visible of base game object. Get : Return visible of base game object var visible = joystick . visible ; Set : Set visible to base game object and thumb game object joystick . visible = visible ; joystick . setVisible ( visible ); joystick . toggleVisible (); Joystick will be disabled when invisible.","title":"Visible"},{"location":"virtualjoystick/#enable","text":"Get var enable = joystick . enable ; Set joystick . enable = enable ; joystick . setEnable ( enable ); joystick . toggleEnable ();","title":"Enable"},{"location":"virtualjoystick/#position","text":"Position of base game object. Get var x = joystick . x ; var y = joystick . y ; Set joystick . x = x ; joystick . y = y ; joystick . setPosition ( x , y );","title":"Position"},{"location":"virtualjoystick/#scroll-factor","text":"Fix to camera joystick . setScrollFactor ( 0 );","title":"Scroll factor"},{"location":"virtualjoystick/#touch-pointer","text":"Position var x = joystick . pointerX ; var y = joystick . pointerY ; Pointer var pointer = joystick . pointer ;","title":"Touch pointer"},{"location":"virtualjoystick/#destroy","text":"Destroy base & thumb game object. joystick . destroy ();","title":"Destroy"},{"location":"virtualjoystick/#events","text":"On joystick updated : joystick . on ( 'update' , function (){});","title":"Events"},{"location":"waitevents/","text":"Introduction \u00b6 Wait fired events or callbacks. Author: Rex Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexWaitEvents from './plugins/waitevents.js' ; Install global plugin \u00b6 Install plugin in configuration of game import WaitEventsPlugin from './plugins/waitevents-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexWaitEvents' , plugin : WaitEventsPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config ); Create instance \u00b6 var waitevents = scene . plugins . get ( 'rexWaitEvents' ). add ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired. Set complete callback \u00b6 waitevents . setCompleteCallback ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired. Add waiting event \u00b6 Callback \u00b6 var callback = waitevents . waitCallback (); callback : A function object which invoked when waitting event finished. For example, invokes completeCallback when all timers are time-out. scene . time . delayedCall ( 500 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1000 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1500 , waitEvents . waitCallback ()); Callback from event emitter \u00b6 waitevents . waitEvent ( eventEmitter , eventName );","title":"Wait events"},{"location":"waitevents/#introduction","text":"Wait fired events or callbacks. Author: Rex","title":"Introduction"},{"location":"waitevents/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"waitevents/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"waitevents/#import-class","text":"import rexWaitEvents from './plugins/waitevents.js' ;","title":"Import class"},{"location":"waitevents/#install-global-plugin","text":"Install plugin in configuration of game import WaitEventsPlugin from './plugins/waitevents-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexWaitEvents' , plugin : WaitEventsPlugin , start : true } // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"waitevents/#create-instance","text":"var waitevents = scene . plugins . get ( 'rexWaitEvents' ). add ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired.","title":"Create instance"},{"location":"waitevents/#set-complete-callback","text":"waitevents . setCompleteCallback ( completeCallback , completeCallbackScope ); completeCallback , completeCallbackScope : Callback when all waitting events are fired.","title":"Set complete callback"},{"location":"waitevents/#add-waiting-event","text":"","title":"Add waiting event"},{"location":"waitevents/#callback","text":"var callback = waitevents . waitCallback (); callback : A function object which invoked when waitting event finished. For example, invokes completeCallback when all timers are time-out. scene . time . delayedCall ( 500 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1000 , waitEvents . waitCallback ()); scene . time . delayedCall ( 1500 , waitEvents . waitCallback ());","title":"Callback"},{"location":"waitevents/#callback-from-event-emitter","text":"waitevents . waitEvent ( eventEmitter , eventName );","title":"Callback from event emitter"},{"location":"webfontloader/","text":"Introduction \u00b6 Load web font by google webfont loader in payload or preload stage. Author: Rex Custom File of loader Source code \u00b6 Plugin , minify Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'WebFontLoader' , plugin : WebFontLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene) Load webfont \u00b6 In preload stage: this . load . rexWebFont ({ google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, }); testString : To test if the font is loaded completed or not. undefined : No testing. Default value. A string : A test string for all fonts An object, {fontFamily: testString} : Test string for a specific font family. testInterval : Retry interval. or load font in pack var sceneConfig = { key : '...' , pack : { files : [{ type : 'rexWebFont' , key : 'webfont' , config : { google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, } } ] } }; Configuration of loading fonts Google webfont WebFontConfig = { google : { families : [ 'Droid Sans' , 'Droid Serif:bold' ] } }; Custom font WebFontConfig = { custom : { families : [ 'My Font' , 'My Other Font:n4,i4,n7' ], urls : [ '/fonts.css' ] } }; and fonts.css @ font-face { font-family : 'My Font' ; src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : italic ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : bold ; /* or 700 */ src : ...; } Events \u00b6 fontactive event this . load . on ( 'webfontactive' , function ( fileObj , familyName ){}); fontinactive event this . load . on ( 'webfontinactive' , function ( fileObj , familyName ){}); Test string \u00b6 Add string parameter testString into config, to test if the font is loaded completed or not. Fill 0 within an internal canvas. Draw testString . Check if any pixel has non-zero value.","title":"Webfont loader"},{"location":"webfontloader/#introduction","text":"Load web font by google webfont loader in payload or preload stage. Author: Rex Custom File of loader","title":"Introduction"},{"location":"webfontloader/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"webfontloader/#usage","text":"Sample code","title":"Usage"},{"location":"webfontloader/#install-plugin","text":"Install plugin in configuration of game var config = { // ... plugins : { global : [{ key : 'WebFontLoader' , plugin : WebFontLoaderPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); or install it in previous scene (i.e. a preload scene). Warning The best way of installing this plugin is to load it in game config. This custom file loader won't be added into loader of current scene after loader is created (i.e. loading plugin using this.load.plugin(...) , or loading in payload of scene)","title":"Install plugin"},{"location":"webfontloader/#load-webfont","text":"In preload stage: this . load . rexWebFont ({ google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, }); testString : To test if the font is loaded completed or not. undefined : No testing. Default value. A string : A test string for all fonts An object, {fontFamily: testString} : Test string for a specific font family. testInterval : Retry interval. or load font in pack var sceneConfig = { key : '...' , pack : { files : [{ type : 'rexWebFont' , key : 'webfont' , config : { google : { families : [ 'Bangers' ] }, // testString: undefined, // testInterval: 20, } } ] } }; Configuration of loading fonts Google webfont WebFontConfig = { google : { families : [ 'Droid Sans' , 'Droid Serif:bold' ] } }; Custom font WebFontConfig = { custom : { families : [ 'My Font' , 'My Other Font:n4,i4,n7' ], urls : [ '/fonts.css' ] } }; and fonts.css @ font-face { font-family : 'My Font' ; src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : italic ; font-weight : normal ; /* or 400 */ src : ...; } @ font-face { font-family : 'My Other Font' ; font-style : normal ; font-weight : bold ; /* or 700 */ src : ...; }","title":"Load webfont"},{"location":"webfontloader/#events","text":"fontactive event this . load . on ( 'webfontactive' , function ( fileObj , familyName ){}); fontinactive event this . load . on ( 'webfontinactive' , function ( fileObj , familyName ){});","title":"Events"},{"location":"webfontloader/#test-string","text":"Add string parameter testString into config, to test if the font is loaded completed or not. Fill 0 within an internal canvas. Draw testString . Check if any pixel has non-zero value.","title":"Test string"},{"location":"wrap/","text":"Introduction \u00b6 Wrap the given value between min and max , built-in method of phaser. Author: Richard Davey Usage \u00b6 var result = Phaser . Math . Wrap ( value , min , max ); value : The value to wrap.","title":"Wrap"},{"location":"wrap/#introduction","text":"Wrap the given value between min and max , built-in method of phaser. Author: Richard Davey","title":"Introduction"},{"location":"wrap/#usage","text":"var result = Phaser . Math . Wrap ( value , min , max ); value : The value to wrap.","title":"Usage"},{"location":"xor/","text":"Introduction \u00b6 Encrypt or decrypt string by XOR algorithm. Author: Rex Methods Source code \u00b6 Plugin , minify Usage \u00b6 Sample code User could import class directly, or install it by global plugin. Import class \u00b6 import rexXOR from './plugins/xor.js' ; Install global plugin \u00b6 Install plugin in configuration of game import XORPlugin from './plugins/xor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexXOR' , plugin : XORPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Encrypt \u00b6 var encResult = scene . plugins . get ( 'rexXOR' ). Encrypt ( src , pwd ); Decrypt \u00b6 var decResult = scene . plugins . get ( 'rexXOR' ). Decrypt ( encResult , pwd );","title":"XOR"},{"location":"xor/#introduction","text":"Encrypt or decrypt string by XOR algorithm. Author: Rex Methods","title":"Introduction"},{"location":"xor/#source-code","text":"Plugin , minify","title":"Source code"},{"location":"xor/#usage","text":"Sample code User could import class directly, or install it by global plugin.","title":"Usage"},{"location":"xor/#import-class","text":"import rexXOR from './plugins/xor.js' ;","title":"Import class"},{"location":"xor/#install-global-plugin","text":"Install plugin in configuration of game import XORPlugin from './plugins/xor-plugin.js' ; var config = { // ... plugins : { global : [{ key : 'rexXOR' , plugin : XORPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config );","title":"Install global plugin"},{"location":"xor/#encrypt","text":"var encResult = scene . plugins . get ( 'rexXOR' ). Encrypt ( src , pwd );","title":"Encrypt"},{"location":"xor/#decrypt","text":"var decResult = scene . plugins . get ( 'rexXOR' ). Decrypt ( encResult , pwd );","title":"Decrypt"},{"location":"youtubeplayer/","text":"Introduction \u00b6 Play youtube video on iframe. Author: Rex DOM Game object Source code \u00b6 Plugin , minify Class Usage \u00b6 Sample code Install plugin \u00b6 Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexYoutubePlayerPlugin' , plugin : YoutubePlayerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true . Add youtube player object \u00b6 Youtube player on DOM var player = scene . add . rexYoutubePlayer ( x , y , width , height , config ); // var player = scene.add.rexYoutubePlayer(x, y, config); // var player = scene.add.rexYoutubePlayer(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , videoId : '' , autoPlay : true , controls : false , keyboardControl : true , modestBranding : false , loop : false , } x , y : Position width , height : Size of element videoId : The YouTube video ID that identifies the video that the player will load. autoPlay : Automatically start to play when the player loads. controls : Whether the video player controls are displayed. keyboardControl : Set false to disable keyboard controls. modestBranding : Set false to prevent the YouTube logo from displaying in the control bar. loop : Play video when ended. Custom class \u00b6 Define class class MyYoutubePlayer extends YoutubePlayer { // or YoutubePlayerCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta) // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var player = new MyYoutubePlayer ( scene , x , y , width , height , config ); Load \u00b6 player . load ( videoId ); // player.load(videoId, autoPlay); Play \u00b6 player . play (); Pause \u00b6 player . pause (); Playback time \u00b6 Get var playbackTime = player . playbackTime ; // time in seconds var t = player . t ; // t: 0~1 Set player . setPlaybackTime ( time ); // time in seconds // player.playbackTime = time; player . setT ( t ); // t: 0~1 // player.t = t; Duration \u00b6 var duration = player . duration ; // time in seconds Volume \u00b6 Get var volume = player . volume ; // volume: 0~1 Set player . setVolume ( volume ); // volume: 0~1 // player.volume = volume; Mute \u00b6 Get var muted = player . muted ; // muted: true/false Set player . setMute ( muted ); // muted: true/false // player.muted = muted; Loop \u00b6 Get var loop = player . loop ; // loop: true/false Set player . setLoop ( loop ); // loop: true/false // player.loop = loop; Resize \u00b6 player . resize ( width , height ); Status \u00b6 Is playing var isPlaying = player . isPlaying ; Is paused var isPaused = player . isPaused ; Has end var hasEnded = player . hasEnded ; Video state var videoState = player . videoState ; or var videoStateString = player . videoStateString ; -1 : unstarted 0 : ended 1 : playing 2 : paused 3 : buffering 5 : cued Events \u00b6 Youtube player api ready player . on ( 'ready' , function ( player ){ }, scope ); State change player . on ( 'statechange' , function ( player ){ }, scope ); State : player.videoState Unstarted player . on ( 'unstarted' , function ( player ){ }, scope ); Playing player . on ( 'playing' , function ( player ){ }, scope ); Pause player . on ( 'pause' , function ( player ){ }, scope ); Ended player . on ( 'ended' , function ( player ){ }, scope ); Buffering player . on ( 'buffering' , function ( player ){ }, scope ); Video cued player . on ( 'cued' , function ( player ){ }, scope ); Error player . on ( 'error' , function ( player , errorMessage ){ }, scope ); No Playback time changed event Get playback time every tick might cause playing video lagging.","title":"Youtube player"},{"location":"youtubeplayer/#introduction","text":"Play youtube video on iframe. Author: Rex DOM Game object","title":"Introduction"},{"location":"youtubeplayer/#source-code","text":"Plugin , minify Class","title":"Source code"},{"location":"youtubeplayer/#usage","text":"Sample code","title":"Usage"},{"location":"youtubeplayer/#install-plugin","text":"Install plugin in configuration of game var config = { // ... parent : divId , dom : { createContainer : true }, plugins : { global : [{ key : 'rexYoutubePlayerPlugin' , plugin : YoutubePlayerPlugin , start : true }, // ... ] } // ... }; var game = new Phaser . Game ( config ); Set parent to divId Set dom.createContainer to true .","title":"Install plugin"},{"location":"youtubeplayer/#add-youtube-player-object","text":"Youtube player on DOM var player = scene . add . rexYoutubePlayer ( x , y , width , height , config ); // var player = scene.add.rexYoutubePlayer(x, y, config); // var player = scene.add.rexYoutubePlayer(config); Default configuration { x : 0 , y : 0 , width : undefined , height : undefined , videoId : '' , autoPlay : true , controls : false , keyboardControl : true , modestBranding : false , loop : false , } x , y : Position width , height : Size of element videoId : The YouTube video ID that identifies the video that the player will load. autoPlay : Automatically start to play when the player loads. controls : Whether the video player controls are displayed. keyboardControl : Set false to disable keyboard controls. modestBranding : Set false to prevent the YouTube logo from displaying in the control bar. loop : Play video when ended.","title":"Add youtube player object"},{"location":"youtubeplayer/#custom-class","text":"Define class class MyYoutubePlayer extends YoutubePlayer { // or YoutubePlayerCanvas constructor ( scene , x , y , width , height , config ) { super ( scene , x , y , width , height , config ) { // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) { // super.preUpdate(time, delta) // } } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var player = new MyYoutubePlayer ( scene , x , y , width , height , config );","title":"Custom class"},{"location":"youtubeplayer/#load","text":"player . load ( videoId ); // player.load(videoId, autoPlay);","title":"Load"},{"location":"youtubeplayer/#play","text":"player . play ();","title":"Play"},{"location":"youtubeplayer/#pause","text":"player . pause ();","title":"Pause"},{"location":"youtubeplayer/#playback-time","text":"Get var playbackTime = player . playbackTime ; // time in seconds var t = player . t ; // t: 0~1 Set player . setPlaybackTime ( time ); // time in seconds // player.playbackTime = time; player . setT ( t ); // t: 0~1 // player.t = t;","title":"Playback time"},{"location":"youtubeplayer/#duration","text":"var duration = player . duration ; // time in seconds","title":"Duration"},{"location":"youtubeplayer/#volume","text":"Get var volume = player . volume ; // volume: 0~1 Set player . setVolume ( volume ); // volume: 0~1 // player.volume = volume;","title":"Volume"},{"location":"youtubeplayer/#mute","text":"Get var muted = player . muted ; // muted: true/false Set player . setMute ( muted ); // muted: true/false // player.muted = muted;","title":"Mute"},{"location":"youtubeplayer/#loop","text":"Get var loop = player . loop ; // loop: true/false Set player . setLoop ( loop ); // loop: true/false // player.loop = loop;","title":"Loop"},{"location":"youtubeplayer/#resize","text":"player . resize ( width , height );","title":"Resize"},{"location":"youtubeplayer/#status","text":"Is playing var isPlaying = player . isPlaying ; Is paused var isPaused = player . isPaused ; Has end var hasEnded = player . hasEnded ; Video state var videoState = player . videoState ; or var videoStateString = player . videoStateString ; -1 : unstarted 0 : ended 1 : playing 2 : paused 3 : buffering 5 : cued","title":"Status"},{"location":"youtubeplayer/#events","text":"Youtube player api ready player . on ( 'ready' , function ( player ){ }, scope ); State change player . on ( 'statechange' , function ( player ){ }, scope ); State : player.videoState Unstarted player . on ( 'unstarted' , function ( player ){ }, scope ); Playing player . on ( 'playing' , function ( player ){ }, scope ); Pause player . on ( 'pause' , function ( player ){ }, scope ); Ended player . on ( 'ended' , function ( player ){ }, scope ); Buffering player . on ( 'buffering' , function ( player ){ }, scope ); Video cued player . on ( 'cued' , function ( player ){ }, scope ); Error player . on ( 'error' , function ( player , errorMessage ){ }, scope ); No Playback time changed event Get playback time every tick might cause playing video lagging.","title":"Events"},{"location":"zone/","text":"Introduction \u00b6 Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser. Author: Richard Davey Usage \u00b6 Add zone object \u00b6 var zone = scene . add . zone ( x , y , width , height ); Add zone from JSON var zone = scene . make . zone ({ x : 0 , y : 0 , //width: 1, //height: 1 }); Custom class \u00b6 Define class class MyZone extends Phaser . GameObjects . Zone { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var zone = new MyZone ( x , y , width , height ); Other properties \u00b6 See game object Input hit zone \u00b6 zone . setInteractive (); See touch events Drop zones \u00b6 Rectangle drop zone zone . setRectangleDropZone ( width , height ); Circular drop zone zone . setCircleDropZone ( radius ); Custom drop zone zone . setInteractive ( shape , callback , true ); callback function ( shape , x , y , gameObject ) { return hit ; // true/false } See drop zone","title":"Zone"},{"location":"zone/#introduction","text":"Non-rendering rectangular game object for creating drop zones and input hit areas, built-in game object of phaser. Author: Richard Davey","title":"Introduction"},{"location":"zone/#usage","text":"","title":"Usage"},{"location":"zone/#add-zone-object","text":"var zone = scene . add . zone ( x , y , width , height ); Add zone from JSON var zone = scene . make . zone ({ x : 0 , y : 0 , //width: 1, //height: 1 });","title":"Add zone object"},{"location":"zone/#custom-class","text":"Define class class MyZone extends Phaser . GameObjects . Zone { constructor ( scene , x , y , width , height ) { super ( scene , x , y , width , height ); // ... scene . add . existing ( this ); } // ... // preUpdate(time, delta) {} } scene.add.existing(gameObject) : Adds an existing Game Object to this Scene. If the Game Object renders, it will be added to the Display List. If it has a preUpdate method, it will be added to the Update List. Create instance var zone = new MyZone ( x , y , width , height );","title":"Custom class"},{"location":"zone/#other-properties","text":"See game object","title":"Other properties"},{"location":"zone/#input-hit-zone","text":"zone . setInteractive (); See touch events","title":"Input hit zone"},{"location":"zone/#drop-zones","text":"Rectangle drop zone zone . setRectangleDropZone ( width , height ); Circular drop zone zone . setCircleDropZone ( radius ); Custom drop zone zone . setInteractive ( shape , callback , true ); callback function ( shape , x , y , gameObject ) { return hit ; // true/false } See drop zone","title":"Drop zones"}]}
\ No newline at end of file
diff --git a/docs/site/sitemap.xml.gz b/docs/site/sitemap.xml.gz
index 8727943457..9714f745e7 100644
Binary files a/docs/site/sitemap.xml.gz and b/docs/site/sitemap.xml.gz differ