user-components-create-file.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!DOCTYPE html>
  2. <html class="writer-html5" lang="en" >
  3. <head>
  4. <meta charset="utf-8" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Create a new User Components file &mdash; Phaser Editor 2D Help</title>
  7. <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  8. <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  9. <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  10. <link rel="shortcut icon" href="../_static/icon.png"/>
  11. <!--[if lt IE 9]>
  12. <script src="../_static/js/html5shiv.min.js"></script>
  13. <![endif]-->
  14. <script src="../_static/jquery.js?v=5d32c60e"></script>
  15. <script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script>
  16. <script src="../_static/documentation_options.js?v=a1f35292"></script>
  17. <script src="../_static/doctools.js?v=888ff710"></script>
  18. <script src="../_static/sphinx_highlight.js?v=dc90522c"></script>
  19. <script src="../_static/js/theme.js"></script>
  20. <link rel="index" title="Index" href="../genindex.html" />
  21. <link rel="search" title="Search" href="../search.html" />
  22. <link rel="next" title="User Components Editor" href="user-components-editor.html" />
  23. <link rel="prev" title="User Components" href="user-components.html" />
  24. </head>
  25. <body class="wy-body-for-nav">
  26. <div class="wy-grid-for-nav">
  27. <nav data-toggle="wy-nav-shift" class="wy-nav-side">
  28. <div class="wy-side-scroll">
  29. <div class="wy-side-nav-search" style="background: #343131" >
  30. <a href="../index.html" class="icon icon-home">
  31. Phaser Editor 2D
  32. <img src="../_static/logo.png" class="logo" alt="Logo"/>
  33. </a>
  34. <div class="version">
  35. v3.67.0
  36. </div>
  37. <div role="search">
  38. <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
  39. <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" />
  40. <input type="hidden" name="check_keywords" value="yes" />
  41. <input type="hidden" name="area" value="default" />
  42. </form>
  43. </div>
  44. </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
  45. <ul class="current">
  46. <li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a></li>
  47. <li class="toctree-l1"><a class="reference internal" href="../first-steps/index.html">First steps</a></li>
  48. <li class="toctree-l1"><a class="reference internal" href="../workbench/index.html">Workbench</a></li>
  49. <li class="toctree-l1"><a class="reference internal" href="../asset-pack-editor/index.html">Asset Pack Editor</a></li>
  50. <li class="toctree-l1 current"><a class="reference internal" href="index.html">Scene Editor</a><ul class="current">
  51. <li class="toctree-l2"><a class="reference internal" href="create-new-scene-file.html">Create a new Scene file</a></li>
  52. <li class="toctree-l2"><a class="reference internal" href="add-object.html">Adding an object to the scene</a></li>
  53. <li class="toctree-l2"><a class="reference internal" href="inspector-view.html">Inspector view</a></li>
  54. <li class="toctree-l2"><a class="reference internal" href="game-objects.html">Game Object types</a></li>
  55. <li class="toctree-l2"><a class="reference internal" href="scene-properties.html">Scene properties</a></li>
  56. <li class="toctree-l2"><a class="reference internal" href="arcade-physics.html">Arcade Physics</a></li>
  57. <li class="toctree-l2"><a class="reference internal" href="sprite-animations.html">Sprite animations</a></li>
  58. <li class="toctree-l2"><a class="reference internal" href="spine-animations.html">Spine animations</a></li>
  59. <li class="toctree-l2"><a class="reference internal" href="shader-effects.html">Shader Effects</a></li>
  60. <li class="toctree-l2"><a class="reference internal" href="working-with-parent-objects.html">Working with parent objects</a></li>
  61. <li class="toctree-l2"><a class="reference internal" href="object-list.html">Object List</a></li>
  62. <li class="toctree-l2"><a class="reference internal" href="input.html">Input</a></li>
  63. <li class="toctree-l2"><a class="reference internal" href="prefabs.html">Prefabs</a></li>
  64. <li class="toctree-l2"><a class="reference internal" href="script-node.html">Script Nodes</a></li>
  65. <li class="toctree-l2 current"><a class="reference internal" href="user-components.html">User Components</a><ul class="current">
  66. <li class="toctree-l3 current"><a class="current reference internal" href="#">Create a new User Components file</a></li>
  67. <li class="toctree-l3"><a class="reference internal" href="user-components-editor.html">User Components Editor</a></li>
  68. <li class="toctree-l3"><a class="reference internal" href="user-components-compiler.html">The User Components compiler</a></li>
  69. <li class="toctree-l3"><a class="reference internal" href="user-components-start-update-methods.html">Implementing behaviors with the Phaser events</a></li>
  70. <li class="toctree-l3"><a class="reference internal" href="user-components-super-class.html">A base class for your components</a></li>
  71. <li class="toctree-l3"><a class="reference internal" href="user-components-awake-event.html">The awake event</a></li>
  72. <li class="toctree-l3"><a class="reference internal" href="user-components-instancing.html">Adding User Components to a Game Object</a></li>
  73. <li class="toctree-l3"><a class="reference internal" href="user-components-in-prefab-object.html">Adding User Components to a Prefab</a></li>
  74. </ul>
  75. </li>
  76. <li class="toctree-l2"><a class="reference internal" href="manipulation-tools.html">Manipulation tools</a></li>
  77. <li class="toctree-l2"><a class="reference internal" href="layout-tools.html">Layout tools</a></li>
  78. <li class="toctree-l2"><a class="reference internal" href="scene-compiler.html">The scene compiler</a></li>
  79. <li class="toctree-l2"><a class="reference internal" href="misc.html">Miscellaneous</a></li>
  80. <li class="toctree-l2"><a class="reference internal" href="troubleshooting.html">Troubleshooting</a></li>
  81. </ul>
  82. </li>
  83. <li class="toctree-l1"><a class="reference internal" href="../code-editor/index.html">Code Editor</a></li>
  84. <li class="toctree-l1"><a class="reference internal" href="../animations-editor/index.html">Animations Editor</a></li>
  85. <li class="toctree-l1"><a class="reference internal" href="../atlas-editor/index.html">Atlas Editor</a></li>
  86. <li class="toctree-l1"><a class="reference internal" href="../misc/index.html">Miscellaneous</a></li>
  87. <li class="toctree-l1"><a class="reference internal" href="../pricing/index.html">License and pricing</a></li>
  88. </ul>
  89. </div>
  90. </div>
  91. </nav>
  92. <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" style="background: #343131" >
  93. <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
  94. <a href="../index.html">Phaser Editor 2D</a>
  95. </nav>
  96. <div class="wy-nav-content">
  97. <div class="rst-content">
  98. <div role="navigation" aria-label="Page navigation">
  99. <ul class="wy-breadcrumbs">
  100. <li><a href="../index.html" class="icon icon-home" aria-label="Home"></a></li>
  101. <li class="breadcrumb-item"><a href="index.html">Scene Editor</a></li>
  102. <li class="breadcrumb-item"><a href="user-components.html">User Components</a></li>
  103. <li class="breadcrumb-item active">Create a new User Components file</li>
  104. <li class="wy-breadcrumbs-aside">
  105. </li>
  106. </ul>
  107. <hr/>
  108. </div>
  109. <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
  110. <div itemprop="articleBody">
  111. <section id="create-a-new-user-components-file">
  112. <h1>Create a new User Components file<a class="headerlink" href="#create-a-new-user-components-file" title="Link to this heading"></a></h1>
  113. <p>These are the steps to create a new <a class="reference external" href="../scene-editor/user-components.html">user components</a> file:</p>
  114. <ol class="arabic simple">
  115. <li><p>Open the <a class="reference external" href="../workbench/new-file-dialog.html">New File dialog</a>.</p></li>
  116. <li><p>Select the <strong>User Components File</strong> option. This opens the <strong>New User Components File</strong> dialog.</p></li>
  117. <li><p>In the new dialog, select the location of the new file.</p></li>
  118. <li><p>Write the name of the new file. The <code class="docutils literal notranslate"><span class="pre">.components</span></code> extension is added automatically, if not set.</p></li>
  119. <li><p>Press the <strong>Create</strong> button. The file will be created and opened in the <a class="reference external" href="../scene-editor/user-components-editor.html">User Components Editor</a>.</p></li>
  120. </ol>
  121. <img alt="New User Components file." src="../_images/scene-editor-user-components-new-file-20221101.webp" />
  122. <div class="admonition warning">
  123. <p class="admonition-title">Warning</p>
  124. <p>The <code class="docutils literal notranslate"><span class="pre">*.components</span></code> files are only used by the editor. It is recommended to exclude them from the final release of the game. Only the generated JavaScript files are relevant to the game files.</p>
  125. </div>
  126. </section>
  127. </div>
  128. </div>
  129. <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
  130. <a href="user-components.html" class="btn btn-neutral float-left" title="User Components" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
  131. <a href="user-components-editor.html" class="btn btn-neutral float-right" title="User Components Editor" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
  132. </div>
  133. <hr/>
  134. <div role="contentinfo">
  135. <p>&#169; Copyright 2016-2024, Arian Fornaris.</p>
  136. </div>
  137. Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
  138. <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
  139. provided by <a href="https://readthedocs.org">Read the Docs</a>.
  140. </footer>
  141. </div>
  142. </div>
  143. </section>
  144. </div>
  145. <script>
  146. jQuery(function () {
  147. SphinxRtdTheme.Navigation.enable(true);
  148. });
  149. </script>
  150. <!-- Theme Analytics -->
  151. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-67206336-2"></script>
  152. <script>
  153. window.dataLayer = window.dataLayer || [];
  154. function gtag(){dataLayer.push(arguments);}
  155. gtag('js', new Date());
  156. gtag('config', 'UA-67206336-2', {
  157. 'anonymize_ip': false,
  158. });
  159. </script>
  160. </body>
  161. </html>