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

user-components.html 23 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>User 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="Create a new User Components file" href="user-components-create-file.html" />
    25. 

  25.     <link rel="prev" title="ScriptNode’s properties" href="script-node-properties.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="current reference internal" href="#">User Components</a><ul>
    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"><a class="reference internal" href="user-components-awake-event.html">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 active">User Components</li>
    112. 

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

  113.       </li>
    114. 

  114.   </ul>
    115. 

  115.   <hr/>
    116. 

  116. </div>
    117. 

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

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

  119.              
    120. 

  120.   <section id="user-components">
    121. 

  121. <h1>User Components<a class="headerlink" href="#user-components" title="Link to this heading"></a></h1>
    122. 

  122. <div class="toctree-wrapper compound">
    123. 

  123. <ul>
    124. 

  124. <li class="toctree-l1"><a class="reference internal" href="user-components-create-file.html">Create a new User Components file</a></li>
    125. 

  125. <li class="toctree-l1"><a class="reference internal" href="user-components-editor.html">User Components Editor</a></li>
    126. 

  126. <li class="toctree-l1"><a class="reference internal" href="user-components-compiler.html">The User Components compiler</a></li>
    127. 

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

  128. <li class="toctree-l1"><a class="reference internal" href="user-components-super-class.html">A base class for your components</a></li>
    129. 

  129. <li class="toctree-l1"><a class="reference internal" href="user-components-awake-event.html">The awake event</a></li>
    130. 

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

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

  132. </ul>
    133. 

  133. </div>
    134. 

  134. <p>A Component is a <a class="reference external" href="https://gameprogrammingpatterns.com/component.html">design pattern</a> that you can use to create reusable code and extend the behavior and data of a game object, using <a class="reference external" href="https://en.wikipedia.org/wiki/Composition_over_inheritance">composition over inheritance</a>.</p>
    135. 

  135. <p>For example, an <strong>HorizontalMove</strong> component can be added to any kind of enemy object that moves horizontally from one position to another. This component class can be written more or less like this (see the <a class="reference external" href="../scene-editor/user-components-compiler.html">User Components compiler</a> section for a real example):</p>
    136. 

  136. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">HorizontalMove</span><span class="w"> </span><span class="p">{</span>
    137. 

  137. 

  138. <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>
    139. 

  139. 

  140. <span class="w">        </span><span class="c1">// in the component, keep a reference to the entity</span>
    141. 

  141. <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>
    142. 

  142. <span class="w">        </span><span class="c1">// in the entity, keep a reference (&#39;horizontalMove&#39;) to the component</span>
    143. 

  143. <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">horizontalMove</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">;</span>
    144. 

  144. <span class="w">        </span><span class="c1">// init properties with default values</span>
    145. 

  145. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">minX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
    146. 

  146. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">maxX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">800</span><span class="p">;</span>
    147. 

  147. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">horizVelocity</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">10</span><span class="p">;</span>
    148. 

  148. <span class="w">    </span><span class="p">}</span>
    149. 

  149. 

  150. <span class="w">    </span><span class="nx">start</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    151. 

  151. <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">body</span><span class="p">.</span><span class="nx">velocity</span><span class="p">.</span><span class="nx">x</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">horizVelocity</span><span class="p">;</span>
    152. 

  152. <span class="w">    </span><span class="p">}</span>
    153. 

  153. 

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

  155. 

  156. <span class="w">        </span><span class="c1">// the behavior of the component</span>
    157. 

  157. 

  158. <span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">velocity</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">gameObject</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">velocity</span><span class="p">;</span>
    159. 

  159. 

  160. <span class="w">        </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">gameObject</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">minX</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    161. 

  161. <span class="w">            </span><span class="nx">velocity</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">horizVelocity</span><span class="p">);</span>
    162. 

  162. <span class="w">        </span><span class="p">}</span>
    163. 

  163. 

  164. <span class="w">        </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">gameObject</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">maxX</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
    165. 

  165. <span class="w">            </span><span class="nx">velocity</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">horizVelocity</span><span class="p">);</span>
    166. 

  166. <span class="w">        </span><span class="p">}</span>
    167. 

  167. <span class="w">    </span><span class="p">}</span>
    168. 

  168. <span class="p">}</span>
    169. 

  169. </pre></div>
    170. 

  170. </div>
    171. 

  171. <p>In the scene, you can create objects and add the <strong>HorizontalMove</strong> component to them. Then, update the components at every game loop step:</p>
    172. 

  172. <div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">Level</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Scene</span><span class="w"> </span><span class="p">{</span>
    173. 

  173. 

  174. <span class="w">    </span><span class="nx">create</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    175. 

  175. 

  176. <span class="w">        </span><span class="c1">// create two objects, alien and spider, and add the HorizontalMove</span>
    177. 

  177. <span class="w">        </span><span class="c1">// component to both, but with different property values.</span>
    178. 

  178. 

  179. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">alien</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">sprite</span><span class="p">(</span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;enemies&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;alien&quot;</span><span class="p">);</span>
    180. 

  180. <span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">alienMove</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">HorizontalMove</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">alien</span><span class="p">);</span>
    181. 

  181. <span class="w">        </span><span class="nx">alienMove</span><span class="p">.</span><span class="nx">minX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">10</span><span class="p">;</span>
    182. 

  182. <span class="w">        </span><span class="nx">alienMove</span><span class="p">.</span><span class="nx">maxX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">100</span><span class="p">;</span>
    183. 

  183. <span class="w">        </span><span class="nx">alienMove</span><span class="p">.</span><span class="nx">horizVelocity</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">40</span><span class="p">;</span>
    184. 

  184. <span class="w">        </span><span class="nx">alienMove</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    185. 

  185. 

  186. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">spider</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">sprite</span><span class="p">(</span><span class="mf">80</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;enemies&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;spider&quot;</span><span class="p">);</span>
    187. 

  187. <span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">spiderMove</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">HorizontalMove</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">spider</span><span class="p">);</span>
    188. 

  188. <span class="w">        </span><span class="nx">spiderMove</span><span class="p">.</span><span class="nx">minX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">50</span><span class="p">;</span>
    189. 

  189. <span class="w">        </span><span class="nx">spiderMove</span><span class="p">.</span><span class="nx">maxX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">200</span><span class="p">;</span>
    190. 

  190. <span class="w">        </span><span class="nx">spiderMove</span><span class="p">.</span><span class="nx">horizVelocity</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">20</span><span class="p">;</span>
    191. 

  191. <span class="w">        </span><span class="nx">spiderMove</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    192. 

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

  193. 

  194. <span class="w">    </span><span class="nx">update</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
    195. 

  195. 

  196. <span class="w">        </span><span class="c1">// update the HorizontalMove component of each object</span>
    197. 

  197. 

  198. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">alien</span><span class="p">.</span><span class="nx">horizontalMove</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>
    199. 

  199. <span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">spider</span><span class="p">.</span><span class="nx">horizontalMove</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>
    200. 

  200. 

  201. <span class="w">         </span><span class="c1">// in a real case, the component can register</span>
    202. 

  202. <span class="w">         </span><span class="c1">// a listener to the UPDATE event of the scene.</span>
    203. 

  203. <span class="w">    </span><span class="p">}</span>
    204. 

  204. <span class="p">}</span>
    205. 

  205. </pre></div>
    206. 

  206. </div>
    207. 

  207. <p>In <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a>, we provide a way to create game object components (we name it <strong>User Components</strong>, to make a difference with the built-in Phaser components) and use them in the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a>. The <a class="reference external" href="../scene-editor/prefabs.html">prefabs</a> system is another way to create reusable behaviors and data but has the limitation that it uses inheritance.</p>
    208. 

  208. <p>Like the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a>, we provide a <a class="reference external" href="../scene-editor/user-components-editor.html">User Components Editor</a>.</p>
    209. 

  209. <p>The <a class="reference external" href="../scene-editor/user-components-editor.html">User Components Editor</a> allows you to create User Components configuration files. A User Components configuration file (<code class="docutils literal notranslate"><span class="pre">*.components</span></code>) contains a list of component configurations that are compiled into JavaScript (or TypeScript) code. It is pretty similar to the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</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="script-node-properties.html" class="btn btn-neutral float-left" title="ScriptNode’s properties" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    217. 

  217.         <a href="user-components-create-file.html" class="btn btn-neutral float-right" title="Create a new User Components file" 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.