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-awake-event.html

user-components-awake-event.html 20 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 
  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>The awake event &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="Adding User Components to a Game Object" href="user-components-instancing.html" />
    25. 

  25.     <link rel="prev" title="A base class for your components" href="user-components-super-class.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"><a class="reference internal" href="user-components-super-class.html">A base class for your components</a></li>
    77. 

  77. <li class="toctree-l3 current"><a class="current reference internal" href="#">The awake event</a></li>
    78. 

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

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

  80. </ul>
    81. 

  81. </li>
    82. 

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

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

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

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

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

  87. </ul>
    88. 

  88. </li>
    89. 

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

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

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

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

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

  94. </ul>
    95. 

  95. 

  96.         </div>
    97. 

  97.       </div>
    98. 

  98.     </nav>
    99. 

  99. 

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

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

  102.           <a href="../index.html">Phaser Editor 2D</a>
    103. 

  103.       </nav>
    104. 

  104. 

  105.       <div class="wy-nav-content">
    106. 

  106.         <div class="rst-content">
    107. 

  107.           <div role="navigation" aria-label="Page navigation">
    108. 

  108.   <ul class="wy-breadcrumbs">
    109. 

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

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

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

  112.       <li class="breadcrumb-item active">The awake event</li>
    113. 

  113.       <li class="wy-breadcrumbs-aside">
    114. 

  114.       </li>
    115. 

  115.   </ul>
    116. 

  116.   <hr/>
    117. 

  117. </div>
    118. 

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

  119.            <div itemprop="articleBody">
    120. 

  120.              
    121. 

  121.   <section id="the-awake-event">
    122. 

  122. <h1>The awake event<a class="headerlink" href="#the-awake-event" title="Link to this heading"></a></h1>
    123. 

  123. <p>We propose using <a class="reference external" href="https://phaser.io">Phaser</a> events for implementing the User Components behaviors. However, the events provided in <a class="reference external" href="https://phaser.io">Phaser</a> are not enough. When you create a component, all properties are set with the default values. Then, you set the value of each property. However, maybe you want to perform a custom initialization routine after all properties are set.</p>
    124. 

  124. <p>Looking into the <a class="reference external" href="https://phaser.io">Phaser</a> events, you can do it in the first scene’s update. It means you can listen once for the <strong>UPDATE</strong> event and run the initialization routine. It may work in many cases. But maybe, you want to run this routine just after all properties are set, and before the game starts the update loop.</p>
    125. 

  125. <p>For this reason, the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> generates code for emitting a custom event, the <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event, just after it generates the code that creates the objects in the scene, and all their properties are set:
    126. 

  126. .. code:</p>
    127. 

  127. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="c1">// code generated by the compiler:</span>
    128. 

  128. 

  129. <span class="nx">editorCreate</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    130. 

  130. 

  131. <span class="w">    </span><span class="c1">// creates the game object</span>
    132. 

  132. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">dino</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">image</span><span class="p">(</span><span class="mf">400</span><span class="p">,</span><span class="w"> </span><span class="mf">240</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;FufuSuperDino&quot;</span><span class="p">);</span>
    133. 

  133. 

  134. <span class="w">    </span><span class="c1">// creates the PushOnClick component</span>
    135. 

  135. <span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">dinoPushOnClick</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">PushOnClick</span><span class="p">(</span><span class="nx">dino</span><span class="p">);</span>
    136. 

  136. 

  137. <span class="w">    </span><span class="c1">// sets the component&#39;s properties</span>
    138. 

  138. <span class="w">    </span><span class="nx">dinoPushOnClick</span><span class="p">.</span><span class="nx">pushDelay</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">500</span><span class="p">;</span>
    139. 

  139. 

  140. <span class="w">    </span><span class="c1">// emit the scene-awake event, after all objects are created</span>
    141. 

  141. <span class="w">    </span><span class="c1">// and all properties are set</span>
    142. 

  142. <span class="w">    </span><span class="nx">dino</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;scene-awake&quot;</span><span class="p">);</span>
    143. 

  143. <span class="p">}</span>
    144. 

  144. </pre></div>
    145. 

  145. </div>
    146. 

  146. <p>When you implement a component, you can register a listener on the <strong>scene-awake</strong> event:</p>
    147. 

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

  148. 

  149. <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>
    150. 

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

  151. 

  152. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">gameObject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">gameObject</span><span class="p">;</span>
    153. 

  153. 

  154. <span class="w">        </span><span class="nx">gameObject</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="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
    155. 

  155. 

  156. <span class="w">            </span><span class="c1">// I register a &quot;pointerdown&quot;</span>
    157. 

  157. <span class="w">            </span><span class="c1">// event for &quot;animating&quot; the game object</span>
    158. 

  158. <span class="w">            </span><span class="c1">// with a push effect</span>
    159. 

  159. 

  160. <span class="w">            </span><span class="c1">// I set a pixel perfect handler</span>
    161. 

  161. <span class="w">            </span><span class="c1">// with certain alpha-tolerance</span>
    162. 

  162. <span class="w">            </span><span class="kd">const</span><span class="w"> </span><span class="nx">handler</span><span class="w"> </span><span class="o">=</span><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">input</span>
    163. 

  163. <span class="w">                </span><span class="p">.</span><span class="nx">makePixelPerfect</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">alphaTolerance</span><span class="p">);</span>
    164. 

  164. 

  165. 

  166. <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">setInteractive</span><span class="p">(</span><span class="nx">handler</span><span class="p">)</span>
    167. 

  167. <span class="w">                </span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;pointerdown&quot;</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>
    168. 

  168. <span class="w">                    </span><span class="c1">// animate the object with the push effect</span>
    169. 

  169. <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">scene</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">tween</span><span class="p">(...);</span>
    170. 

  170. <span class="w">                </span><span class="p">});</span>
    171. 

  171. <span class="w">        </span><span class="p">});</span>
    172. 

  172. <span class="w">    </span><span class="p">}</span>
    173. 

  173. 

  174. <span class="w">    </span><span class="cm">/** @type {number} **/</span>
    175. 

  175. <span class="w">    </span><span class="nx">alphaTolerance</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">100</span><span class="p">;</span>
    176. 

  176. <span class="p">}</span>
    177. 

  177. </pre></div>
    178. 

  178. </div>
    179. 

  179. <p>In the section <a class="reference external" href="./user-components-super-class.html">A base class for your components</a>), we explain how you can use a common super-class for all the components. It simplifies the listening of <a class="reference external" href="https://phaser.io">Phaser</a> events, and it also includes the <strong>scene-awake</strong> event. So you can rewrite the previous <strong>PushOnClick</strong> component in this way:</p>
    180. 

  180. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">PushOnClick</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>
    181. 

  181. 

  182. <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>
    183. 

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

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

  185. 

  186. <span class="w">    </span><span class="nx">awake</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    187. 

  187. 

  188. <span class="w">        </span><span class="c1">// Instead of registering a scene-awake event listener</span>
    189. 

  189. <span class="w">        </span><span class="c1">// you can override this method.</span>
    190. 

  190. 

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

  192. 

  193. <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">setInteractive</span><span class="p">(...)</span>
    194. 

  194. <span class="w">                </span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;pointerdown&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">...);</span>
    195. 

  195. <span class="w">        </span><span class="p">...</span>
    196. 

  196. <span class="w">    </span><span class="p">}</span>
    197. 

  197. <span class="w">    </span><span class="p">...</span>
    198. 

  198. <span class="p">}</span>
    199. 

  199. </pre></div>
    200. 

  200. </div>
    201. 

  201. <p>The <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event is emitted in the <code class="docutils literal notranslate"><span class="pre">editorCreate()</span></code> method of a scene. So, if you create a new component and this component listens to the <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event, then you should emit that event manually:</p>
    202. 

  202. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">comp</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">PushOnClick</span><span class="p">(</span><span class="nx">someSprite</span><span class="p">);</span>
    203. 

  203. <span class="nx">comp</span><span class="p">.</span><span class="nx">alphaTolerance</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">50</span><span class="p">;</span>
    204. 

  204. <span class="c1">// emit the awake event so the component can be notified</span>
    205. 

  205. <span class="k">this</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;scene-awake&quot;</span><span class="p">);</span>
    206. 

  206. </pre></div>
    207. 

  207. </div>
    208. 

  208. <p>Emitting the <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event later in the game is safe because components and <a class="reference external" href="../scene-editor/prefabs.html">prefabs</a> handle this event only once in their lifetime.</p>
    209. 

  209. <p>The <a class="reference external" href="../scene-editor/prefabs.html">prefabs</a> also listens to the <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event. <a class="reference external" href="./prefab-user-properties-initializing.html#the-scene-awake-event">Learn more about it</a>.</p>
    210. 

  210. </section>
    211. 

  211. 

  212. 

  213.            </div>
    214. 

  214.           </div>
    215. 

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

  216.         <a href="user-components-super-class.html" class="btn btn-neutral float-left" title="A base class for your components" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    217. 

  217.         <a href="user-components-instancing.html" class="btn btn-neutral float-right" title="Adding User Components to a Game Object" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
    218. 

  218.     </div>
    219. 

  219. 

  220.   <hr/>
    221. 

  221. 

  222.   <div role="contentinfo">
    223. 

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

  224.   </div>
    225. 

  225. 

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

  227.     <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    228. 

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

  229.    
    230. 

  230. 

  231. </footer>
    232. 

  232.         </div>
    233. 

  233.       </div>
    234. 

  234.     </section>
    235. 

  235.   </div>
    236. 

  236.   <script>
    237. 

  237.       jQuery(function () {
    238. 

  238.           SphinxRtdTheme.Navigation.enable(true);
    239. 

  239.       });
    240. 

  240.   </script>
    241. 

  241.     <!-- Theme Analytics -->
    242. 

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

  243.     <script>
    244. 

  244.       window.dataLayer = window.dataLayer || [];
    245. 

  245.       function gtag(){dataLayer.push(arguments);}
    246. 

  246.       gtag('js', new Date());
    247. 

  247. 

  248.       gtag('config', 'UA-67206336-2', {
    249. 

  249.           'anonymize_ip': false,
    250. 

  250.       });
    251. 

  251.     </script> 
    252. 

  252. 

  253. </body>
    254. 

  254. </html>
    255.