Home Explore Help
Sign In
Phaser.js
/
PhaserEditor2D-v3-docs-html
mirror of https://github.com/PhaserEditor2D/PhaserEditor2D-v3-docs-html.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: develop
Branches Tags
PhaserEditor2D-...
/
docs
/
scene-editor
/
user-components-super-class.html

user-components-super-class.html 29 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 
  1. <!DOCTYPE html>
    2. 

  2. <html class="writer-html5" lang="en" >
    3. 

  3. <head>
    4. 

  4.   <meta charset="utf-8" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />
    5. 

  5. 

  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.   <title>A base class for your components &mdash; Phaser Editor 2D Help</title>
    8. 

  8.       <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    9. 

  9.       <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
    10. 

  10.       <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
    11. 

  11.     <link rel="shortcut icon" href="../_static/icon.png"/>
    12. 

  12.   <!--[if lt IE 9]>
    13. 

  13.     <script src="../_static/js/html5shiv.min.js"></script>
    14. 

  14.   <![endif]-->
    15. 

  15.   
    16. 

  16.         <script src="../_static/jquery.js?v=5d32c60e"></script>
    17. 

  17.         <script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script>
    18. 

  18.         <script src="../_static/documentation_options.js?v=a1f35292"></script>
    19. 

  19.         <script src="../_static/doctools.js?v=888ff710"></script>
    20. 

  20.         <script src="../_static/sphinx_highlight.js?v=dc90522c"></script>
    21. 

  21.     <script src="../_static/js/theme.js"></script>
    22. 

  22.     <link rel="index" title="Index" href="../genindex.html" />
    23. 

  23.     <link rel="search" title="Search" href="../search.html" />
    24. 

  24.     <link rel="next" title="The awake event" href="user-components-awake-event.html" />
    25. 

  25.     <link rel="prev" title="Implementing behaviors with the Phaser events" href="user-components-start-update-methods.html" /> 
    26. 

  26. </head>
    27. 

  27. 

  28. <body class="wy-body-for-nav"> 
    29. 

  29.   <div class="wy-grid-for-nav">
    30. 

  30.     <nav data-toggle="wy-nav-shift" class="wy-nav-side">
    31. 

  31.       <div class="wy-side-scroll">
    32. 

  32.         <div class="wy-side-nav-search"  style="background: #343131" >
    33. 

  33. 

  34.           
    35. 

  35.           
    36. 

  36.           <a href="../index.html" class="icon icon-home">
    37. 

  37.             Phaser Editor 2D
    38. 

  38.               <img src="../_static/logo.png" class="logo" alt="Logo"/>
    39. 

  39.           </a>
    40. 

  40.               <div class="version">
    41. 

  41.                 v3.67.0
    42. 

  42.               </div>
    43. 

  43. <div role="search">
    44. 

  44.   <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    45. 

  45.     <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" />
    46. 

  46.     <input type="hidden" name="check_keywords" value="yes" />
    47. 

  47.     <input type="hidden" name="area" value="default" />
    48. 

  48.   </form>
    49. 

  49. </div>
    50. 

  50.         </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
    51. 

  51.               <ul class="current">
    52. 

  52. <li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a></li>
    53. 

  53. <li class="toctree-l1"><a class="reference internal" href="../first-steps/index.html">First steps</a></li>
    54. 

  54. <li class="toctree-l1"><a class="reference internal" href="../workbench/index.html">Workbench</a></li>
    55. 

  55. <li class="toctree-l1"><a class="reference internal" href="../asset-pack-editor/index.html">Asset Pack Editor</a></li>
    56. 

  56. <li class="toctree-l1 current"><a class="reference internal" href="index.html">Scene Editor</a><ul class="current">
    57. 

  57. <li class="toctree-l2"><a class="reference internal" href="create-new-scene-file.html">Create a new Scene file</a></li>
    58. 

  58. <li class="toctree-l2"><a class="reference internal" href="add-object.html">Adding an object to the scene</a></li>
    59. 

  59. <li class="toctree-l2"><a class="reference internal" href="inspector-view.html">Inspector view</a></li>
    60. 

  60. <li class="toctree-l2"><a class="reference internal" href="game-objects.html">Game Object types</a></li>
    61. 

  61. <li class="toctree-l2"><a class="reference internal" href="scene-properties.html">Scene properties</a></li>
    62. 

  62. <li class="toctree-l2"><a class="reference internal" href="arcade-physics.html">Arcade Physics</a></li>
    63. 

  63. <li class="toctree-l2"><a class="reference internal" href="sprite-animations.html">Sprite animations</a></li>
    64. 

  64. <li class="toctree-l2"><a class="reference internal" href="spine-animations.html">Spine animations</a></li>
    65. 

  65. <li class="toctree-l2"><a class="reference internal" href="shader-effects.html">Shader Effects</a></li>
    66. 

  66. <li class="toctree-l2"><a class="reference internal" href="working-with-parent-objects.html">Working with parent objects</a></li>
    67. 

  67. <li class="toctree-l2"><a class="reference internal" href="object-list.html">Object List</a></li>
    68. 

  68. <li class="toctree-l2"><a class="reference internal" href="input.html">Input</a></li>
    69. 

  69. <li class="toctree-l2"><a class="reference internal" href="prefabs.html">Prefabs</a></li>
    70. 

  70. <li class="toctree-l2"><a class="reference internal" href="script-node.html">Script Nodes</a></li>
    71. 

  71. <li class="toctree-l2 current"><a class="reference internal" href="user-components.html">User Components</a><ul class="current">
    72. 

  72. <li class="toctree-l3"><a class="reference internal" href="user-components-create-file.html">Create a new User Components file</a></li>
    73. 

  73. <li class="toctree-l3"><a class="reference internal" href="user-components-editor.html">User Components Editor</a></li>
    74. 

  74. <li class="toctree-l3"><a class="reference internal" href="user-components-compiler.html">The User Components compiler</a></li>
    75. 

  75. <li class="toctree-l3"><a class="reference internal" href="user-components-start-update-methods.html">Implementing behaviors with the Phaser events</a></li>
    76. 

  76. <li class="toctree-l3 current"><a class="current reference internal" href="#">A base class for your components</a><ul>
    77. 

  77. <li class="toctree-l4"><a class="reference internal" href="#inside-the-usercomponent-class">Inside the UserComponent class</a></li>
    78. 

  78. </ul>
    79. 

  79. </li>
    80. 

  80. <li class="toctree-l3"><a class="reference internal" href="user-components-awake-event.html">The awake event</a></li>
    81. 

  81. <li class="toctree-l3"><a class="reference internal" href="user-components-instancing.html">Adding User Components to a Game Object</a></li>
    82. 

  82. <li class="toctree-l3"><a class="reference internal" href="user-components-in-prefab-object.html">Adding User Components to a Prefab</a></li>
    83. 

  83. </ul>
    84. 

  84. </li>
    85. 

  85. <li class="toctree-l2"><a class="reference internal" href="manipulation-tools.html">Manipulation tools</a></li>
    86. 

  86. <li class="toctree-l2"><a class="reference internal" href="layout-tools.html">Layout tools</a></li>
    87. 

  87. <li class="toctree-l2"><a class="reference internal" href="scene-compiler.html">The scene compiler</a></li>
    88. 

  88. <li class="toctree-l2"><a class="reference internal" href="misc.html">Miscellaneous</a></li>
    89. 

  89. <li class="toctree-l2"><a class="reference internal" href="troubleshooting.html">Troubleshooting</a></li>
    90. 

  90. </ul>
    91. 

  91. </li>
    92. 

  92. <li class="toctree-l1"><a class="reference internal" href="../code-editor/index.html">Code Editor</a></li>
    93. 

  93. <li class="toctree-l1"><a class="reference internal" href="../animations-editor/index.html">Animations Editor</a></li>
    94. 

  94. <li class="toctree-l1"><a class="reference internal" href="../atlas-editor/index.html">Atlas Editor</a></li>
    95. 

  95. <li class="toctree-l1"><a class="reference internal" href="../misc/index.html">Miscellaneous</a></li>
    96. 

  96. <li class="toctree-l1"><a class="reference internal" href="../pricing/index.html">License and pricing</a></li>
    97. 

  97. </ul>
    98. 

  98. 

  99.         </div>
    100. 

  100.       </div>
    101. 

  101.     </nav>
    102. 

  102. 

  103.     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu"  style="background: #343131" >
    104. 

  104.           <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
    105. 

  105.           <a href="../index.html">Phaser Editor 2D</a>
    106. 

  106.       </nav>
    107. 

  107. 

  108.       <div class="wy-nav-content">
    109. 

  109.         <div class="rst-content">
    110. 

  110.           <div role="navigation" aria-label="Page navigation">
    111. 

  111.   <ul class="wy-breadcrumbs">
    112. 

  112.       <li><a href="../index.html" class="icon icon-home" aria-label="Home"></a></li>
    113. 

  113.           <li class="breadcrumb-item"><a href="index.html">Scene Editor</a></li>
    114. 

  114.           <li class="breadcrumb-item"><a href="user-components.html">User Components</a></li>
    115. 

  115.       <li class="breadcrumb-item active">A base class for your components</li>
    116. 

  116.       <li class="wy-breadcrumbs-aside">
    117. 

  117.       </li>
    118. 

  118.   </ul>
    119. 

  119.   <hr/>
    120. 

  120. </div>
    121. 

  121.           <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
    122. 

  122.            <div itemprop="articleBody">
    123. 

  123.              
    124. 

  124.   <section id="a-base-class-for-your-components">
    125. 

  125. <h1>A base class for your components<a class="headerlink" href="#a-base-class-for-your-components" title="Link to this heading"></a></h1>
    126. 

  126. <p>In the previous section, we explored how you can implement behaviors by listening to Phaser events. There, we implemented an <code class="docutils literal notranslate"><span class="pre">EventComponent</span></code> base class for all the components.</p>
    127. 

  127. <p>The components concept provided by <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> is flexible. However, we think it is a good idea to propose a way of implementing the components.</p>
    128. 

  128. <p>For this reason, we created a <strong>UserComponent</strong> class that you can use as the base class for all your components. This class is included in the <a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-core">phasereditor2d-scripts-core</a> library and should be included in your project if you created it with a <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> project template.</p>
    129. 

  129. <p><a class="reference external" href="./script-node-libraries.html">Learn more about script libraries</a></p>
    130. 

  130. <p>If you are not using script libraries, you have the option of telling the editor to generate the <strong>UserComponent</strong> class and it will create a file and “write the code for you”.</p>
    131. 

  131. <p>The procedure is simple, just open the context menu of the User Components Editor. In the <strong>Resources</strong> menu, there are options for creating the <code class="docutils literal notranslate"><span class="pre">UserComponent.js</span></code> files in different formats:</p>
    132. 

  132. <img alt="Context menu for creating the UserComponent.js file." src="../_images/scene-editor-user-components-create-base-class-file-04012021.webp" />
    133. 

  133. <p>The options are:</p>
    134. 

  134. <ul class="simple">
    135. 

  135. <li><p><strong>Create UserComponent.js</strong>: creates a <code class="docutils literal notranslate"><span class="pre">UserComponent.js</span></code> file with JavaScript code.</p></li>
    136. 

  136. <li><p><strong>Create UserComponent.ts</strong>: creates a <code class="docutils literal notranslate"><span class="pre">UserComponent.ts</span></code> file with TypeScript code.</p></li>
    137. 

  137. <li><p><strong>Create UserComponent.js (ES Modules)</strong>: creates a <code class="docutils literal notranslate"><span class="pre">UserComponent.js</span></code> file with a JavaScript file, using the ES module exporting rules.</p></li>
    138. 

  138. <li><p><strong>Create UserComponent.ts (ES Module)</strong>: creates a <code class="docutils literal notranslate"><span class="pre">UserComponent.ts</span></code> file with TypeScript code, using the ES module exporting rules.</p></li>
    139. 

  139. </ul>
    140. 

  140. <p>If the file exists, the editor asks if you confirm replacing it.</p>
    141. 

  141. <p>You can do this operation just once unless you mess up the file content and want to reset it.</p>
    142. 

  142. <p>Once the file is created, you can use the <strong>UserComponent</strong> class as the super-class of your components.</p>
    143. 

  143. <section id="inside-the-usercomponent-class">
    144. 

  144. <h2>Inside the UserComponent class<a class="headerlink" href="#inside-the-usercomponent-class" title="Link to this heading"></a></h2>
    145. 

  145. <p>In the <a class="reference external" href="./user-components-start-update-methods.html">Implementing behaviors with the Phaser events</a> section, we explain how a component can register listeners to the Phaser events, for implementing a particular behavior. The <strong>UserComponent</strong> class does the same. It listens for Phaser events and calls special methods that could be overridden in derived classes. These are the methods present by the <strong>UserComponent</strong> class:</p>
    146. 

  146. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">UserComponent</span><span class="w"> </span><span class="p">{</span>
    147. 

  147. 

  148. <span class="w">    </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">gameObject</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    149. 

  149. <span class="w">        </span><span class="c1">// registers the event listeners and call the methods</span>
    150. 

  150. <span class="w">    </span><span class="p">}</span>
    151. 

  151. 

  152. <span class="w">    </span><span class="nx">awake</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
    153. 

  153. 

  154. <span class="w">    </span><span class="nx">start</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
    155. 

  155. 

  156. <span class="w">    </span><span class="nx">update</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
    157. 

  157. 

  158. <span class="w">    </span><span class="nx">destroy</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
    159. 

  159. <span class="p">}</span>
    160. 

  160. </pre></div>
    161. 

  161. </div>
    162. 

  162. <p>It registers the event listeners in the constructor:</p>
    163. 

  163. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kr">constructor</span><span class="p">(</span><span class="nx">gameObject</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    164. 

  164. 

  165. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">gameObject</span><span class="p">.</span><span class="nx">scene</span><span class="p">;</span>
    166. 

  166. 

  167. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">listenAwake</span><span class="w"> </span><span class="o">=</span>
    168. 

  168. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">awake</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">awake</span><span class="p">;</span>
    169. 

  169. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">listenStart</span><span class="w"> </span><span class="o">=</span>
    170. 

  170. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">start</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">start</span><span class="p">;</span>
    171. 

  171. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">listenUpdate</span><span class="w"> </span><span class="o">=</span>
    172. 

  172. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="p">;</span>
    173. 

  173. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">listenDestroy</span><span class="w"> </span><span class="o">=</span>
    174. 

  174. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">destroy</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">destroy</span><span class="p">;</span>
    175. 

  175. 

  176. <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenAwake</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    177. 

  177. 

  178. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">once</span><span class="p">(</span><span class="s2">&quot;scene-awake&quot;</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">awake</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    179. 

  179. <span class="w">    </span><span class="p">}</span>
    180. 

  180. 

  181. <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenStart</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    182. 

  182. 

  183. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">once</span><span class="p">(</span>
    184. 

  184. <span class="w">            </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    185. 

  185. <span class="w">    </span><span class="p">}</span>
    186. 

  186. 

  187. <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenUpdate</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    188. 

  188. 

  189. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span>
    190. 

  190. <span class="w">            </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    191. 

  191. <span class="w">    </span><span class="p">}</span>
    192. 

  192. 

  193. <span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenStart</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">listenUpdate</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">listenDestroy</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    194. 

  194. 

  195. <span class="w">        </span><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">GameObjects</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">DESTROY</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
    196. 

  196. 

  197. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">off</span><span class="p">(</span>
    198. 

  198. <span class="w">                </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    199. 

  199. <span class="w">            </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">off</span><span class="p">(</span>
    200. 

  200. <span class="w">                </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    201. 

  201. 

  202. <span class="w">            </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenDestroy</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    203. 

  203. 

  204. <span class="w">                </span><span class="k">this</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
    205. 

  205. <span class="w">            </span><span class="p">}</span>
    206. 

  206. <span class="w">        </span><span class="p">});</span>
    207. 

  207. <span class="w">    </span><span class="p">}</span>
    208. 

  208. <span class="p">}</span>
    209. 

  209. </pre></div>
    210. 

  210. </div>
    211. 

  211. <p>But let’s go step by step. First, it checks what events to listen to. Notice that the methods <strong>awake()</strong>, <strong>start()</strong>, etc…, are empty. So, if the component instance doesn’t provide a different implementation for one of these methods, then it means it can skip calling that method. Then the first thing is to know what methods to call:</p>
    212. 

  212. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">listenAwake</span><span class="w"> </span><span class="o">=</span>
    213. 

  213. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">awake</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">awake</span><span class="p">;</span>
    214. 

  214. 

  215. <span class="kd">const</span><span class="w"> </span><span class="nx">listenStart</span><span class="w"> </span><span class="o">=</span>
    216. 

  216. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">start</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">start</span><span class="p">;</span>
    217. 

  217. 

  218. <span class="kd">const</span><span class="w"> </span><span class="nx">listenUpdate</span><span class="w"> </span><span class="o">=</span>
    219. 

  219. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="p">;</span>
    220. 

  220. 

  221. <span class="kd">const</span><span class="w"> </span><span class="nx">listenDestroy</span><span class="w"> </span><span class="o">=</span>
    222. 

  222. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">destroy</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">UserComponent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">destroy</span><span class="p">;</span>
    223. 

  223. </pre></div>
    224. 

  224. </div>
    225. 

  225. <p>In the following lines, it adds the listeners to the Phaser events, but only if it is needed:</p>
    226. 

  226. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="p">...</span>
    227. 

  227. <span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenStart</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    228. 

  228. 

  229. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">once</span><span class="p">(</span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    230. 

  230. <span class="p">}</span>
    231. 

  231. 

  232. <span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">listenUpdate</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    233. 

  233. 

  234. <span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">scene</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scenes</span><span class="p">.</span><span class="nx">Events</span><span class="p">.</span><span class="nx">UPDATE</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">);</span>
    235. 

  235. <span class="p">}</span>
    236. 

  236. <span class="p">...</span>
    237. 

  237. </pre></div>
    238. 

  238. </div>
    239. 

  239. <p>At the end of the constructor, it registers a listener to the game object’s destroy event and removes all the listeners. It does it to avoid calling a method if the object is not active.</p>
    240. 

  240. <p>When you create a new component, you can update it by just implementing the <strong>update()</strong> method:</p>
    241. 

  241. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">RotateObject</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">UserComponent</span><span class="w"> </span><span class="p">{</span>
    242. 

  242. 

  243. <span class="w">    </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">gameObject</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    244. 

  244. <span class="w">        </span><span class="k">super</span><span class="p">(</span><span class="nx">gameObject</span><span class="p">);</span>
    245. 

  245. <span class="w">    </span><span class="p">}</span>
    246. 

  246. 

  247. <span class="w">    </span><span class="p">...</span>
    248. 

  248. 

  249. <span class="w">    </span><span class="nx">update</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    250. 

  250. 

  251. <span class="w">        </span><span class="c1">// this method is called when the scene</span>
    252. 

  252. <span class="w">        </span><span class="c1">// emits the UPDATE event</span>
    253. 

  253. 

  254. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">gameObject</span><span class="p">.</span><span class="nx">angle</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>
    255. 

  255. <span class="w">    </span><span class="p">}</span>
    256. 

  256. <span class="p">}</span>
    257. 

  257. </pre></div>
    258. 

  258. </div>
    259. 

  259. <p>The <strong>UserComponent</strong> class is “good enough” for many cases, but you can modify it or use a completely different one. Or use the Phaser events directly in your components.</p>
    260. 

  260. </section>
    261. 

  261. </section>
    262. 

  262. 

  263. 

  264.            </div>
    265. 

  265.           </div>
    266. 

  266.           <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
    267. 

  267.         <a href="user-components-start-update-methods.html" class="btn btn-neutral float-left" title="Implementing behaviors with the Phaser events" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    268. 

  268.         <a href="user-components-awake-event.html" class="btn btn-neutral float-right" title="The awake event" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
    269. 

  269.     </div>
    270. 

  270. 

  271.   <hr/>
    272. 

  272. 

  273.   <div role="contentinfo">
    274. 

  274.     <p>&#169; Copyright 2016-2024, Arian Fornaris.</p>
    275. 

  275.   </div>
    276. 

  276. 

  277.   Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    278. 

  278.     <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    279. 

  279.     provided by <a href="https://readthedocs.org">Read the Docs</a>.
    280. 

  280.    
    281. 

  281. 

  282. </footer>
    283. 

  283.         </div>
    284. 

  284.       </div>
    285. 

  285.     </section>
    286. 

  286.   </div>
    287. 

  287.   <script>
    288. 

  288.       jQuery(function () {
    289. 

  289.           SphinxRtdTheme.Navigation.enable(true);
    290. 

  290.       });
    291. 

  291.   </script>
    292. 

  292.     <!-- Theme Analytics -->
    293. 

  293.     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-67206336-2"></script>
    294. 

  294.     <script>
    295. 

  295.       window.dataLayer = window.dataLayer || [];
    296. 

  296.       function gtag(){dataLayer.push(arguments);}
    297. 

  297.       gtag('js', new Date());
    298. 

  298. 

  299.       gtag('config', 'UA-67206336-2', {
    300. 

  300.           'anonymize_ip': false,
    301. 

  301.       });
    302. 

  302.     </script> 
    303. 

  303. 

  304. </body>
    305. 

  305. </html>
    306.