Phaser.js
/
PhaserEditor2D-v3-docs-html
mirror of https://github.com/PhaserEditor2D/PhaserEditor2D-v3-docs-html.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>User Components Editor &mdash; Phaser Editor 2D Help</title>
      <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
      <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
      <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
    <link rel="shortcut icon" href="../_static/icon.png"/>
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
        <script src="../_static/jquery.js?v=5d32c60e"></script>
        <script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script>
        <script src="../_static/documentation_options.js?v=a1f35292"></script>
        <script src="../_static/doctools.js?v=888ff710"></script>
        <script src="../_static/sphinx_highlight.js?v=dc90522c"></script>
    <script src="../_static/js/theme.js"></script>
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Add new component" href="user-components-editor-add-component.html" />
    <link rel="prev" title="Create a new User Components file" href="user-components-create-file.html" /> 
</head>

<body class="wy-body-for-nav"> 
  <div class="wy-grid-for-nav">
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search"  style="background: #343131" >

          
          <a href="../index.html" class="icon icon-home">
            Phaser Editor 2D
              <img src="../_static/logo.png" class="logo" alt="Logo"/>
          </a>
              <div class="version">
                v3.67.0
              </div>
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>
        </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a></li>
<li class="toctree-l1"><a class="reference internal" href="../first-steps/index.html">First steps</a></li>
<li class="toctree-l1"><a class="reference internal" href="../workbench/index.html">Workbench</a></li>
<li class="toctree-l1"><a class="reference internal" href="../asset-pack-editor/index.html">Asset Pack Editor</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Scene Editor</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="create-new-scene-file.html">Create a new Scene file</a></li>
<li class="toctree-l2"><a class="reference internal" href="add-object.html">Adding an object to the scene</a></li>
<li class="toctree-l2"><a class="reference internal" href="inspector-view.html">Inspector view</a></li>
<li class="toctree-l2"><a class="reference internal" href="game-objects.html">Game Object types</a></li>
<li class="toctree-l2"><a class="reference internal" href="scene-properties.html">Scene properties</a></li>
<li class="toctree-l2"><a class="reference internal" href="arcade-physics.html">Arcade Physics</a></li>
<li class="toctree-l2"><a class="reference internal" href="sprite-animations.html">Sprite animations</a></li>
<li class="toctree-l2"><a class="reference internal" href="spine-animations.html">Spine animations</a></li>
<li class="toctree-l2"><a class="reference internal" href="shader-effects.html">Shader Effects</a></li>
<li class="toctree-l2"><a class="reference internal" href="working-with-parent-objects.html">Working with parent objects</a></li>
<li class="toctree-l2"><a class="reference internal" href="object-list.html">Object List</a></li>
<li class="toctree-l2"><a class="reference internal" href="input.html">Input</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefabs.html">Prefabs</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node.html">Script Nodes</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="user-components.html">User Components</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="user-components-create-file.html">Create a new User Components file</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">User Components Editor</a><ul>
<li class="toctree-l4"><a class="reference internal" href="user-components-editor-add-component.html">Add new component</a></li>
<li class="toctree-l4"><a class="reference internal" href="user-components-editor-edit-component.html">Edit the component info</a></li>
<li class="toctree-l4"><a class="reference internal" href="user-components-editor-edit-code.html">Edit the component code</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="user-components-compiler.html">The User Components compiler</a></li>
<li class="toctree-l3"><a class="reference internal" href="user-components-start-update-methods.html">Implementing behaviors with the Phaser events</a></li>
<li class="toctree-l3"><a class="reference internal" href="user-components-super-class.html">A base class for your components</a></li>
<li class="toctree-l3"><a class="reference internal" href="user-components-awake-event.html">The awake event</a></li>
<li class="toctree-l3"><a class="reference internal" href="user-components-instancing.html">Adding User Components to a Game Object</a></li>
<li class="toctree-l3"><a class="reference internal" href="user-components-in-prefab-object.html">Adding User Components to a Prefab</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="manipulation-tools.html">Manipulation tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="layout-tools.html">Layout tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="scene-compiler.html">The scene compiler</a></li>
<li class="toctree-l2"><a class="reference internal" href="misc.html">Miscellaneous</a></li>
<li class="toctree-l2"><a class="reference internal" href="troubleshooting.html">Troubleshooting</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../code-editor/index.html">Code Editor</a></li>
<li class="toctree-l1"><a class="reference internal" href="../animations-editor/index.html">Animations Editor</a></li>
<li class="toctree-l1"><a class="reference internal" href="../atlas-editor/index.html">Atlas Editor</a></li>
<li class="toctree-l1"><a class="reference internal" href="../misc/index.html">Miscellaneous</a></li>
<li class="toctree-l1"><a class="reference internal" href="../pricing/index.html">License and pricing</a></li>
</ul>

        </div>
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu"  style="background: #343131" >
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">Phaser Editor 2D</a>
      </nav>

      <div class="wy-nav-content">
        <div class="rst-content">
          <div role="navigation" aria-label="Page navigation">
  <ul class="wy-breadcrumbs">
      <li><a href="../index.html" class="icon icon-home" aria-label="Home"></a></li>
          <li class="breadcrumb-item"><a href="index.html">Scene Editor</a></li>
          <li class="breadcrumb-item"><a href="user-components.html">User Components</a></li>
      <li class="breadcrumb-item active">User Components Editor</li>
      <li class="wy-breadcrumbs-aside">
      </li>
  </ul>
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
             
  <section id="user-components-editor">
<h1>User Components Editor<a class="headerlink" href="#user-components-editor" title="Link to this heading"></a></h1>
<div class="toctree-wrapper compound">
<ul>
<li class="toctree-l1"><a class="reference internal" href="user-components-editor-add-component.html">Add new component</a></li>
<li class="toctree-l1"><a class="reference internal" href="user-components-editor-edit-component.html">Edit the component info</a></li>
<li class="toctree-l1"><a class="reference internal" href="user-components-editor-edit-code.html">Edit the component code</a></li>
</ul>
</div>
<p>Components (or similar patterns) are widely used in popular game engines or editors. Many of these tools use custom scripting languages or certain elements of a language (like metadata or attributes) to provide the components information, like properties description, default values, UI rendering, etc… The code of the component has the metadata of the component as part of its implementation.</p>
<p>In <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a>, for now, it is different. We use configurations (JSON) files and a <a class="reference external" href="../scene-editor/user-components-compiler.html">User Components compiler</a> that parses these files and generates the JavaScript (or TypeScript) code of the components. Or better say, a part of the component’s code, because, just like the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> does with the scene files, you can insert your code inside the output of the <a class="reference external" href="../scene-editor/user-components-compiler.html">User Components compiler</a>.</p>
<p>The information available in the configuration (<code class="docutils literal notranslate"><span class="pre">*.components</span></code>) files are used by the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> for building the UI elements needed to add and edit the components of a game object. It is not required by the game at run-time. We strongly recommend to exclude it from the distribution build of your game.</p>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="user-components-create-file.html" class="btn btn-neutral float-left" title="Create a new User Components file" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="user-components-editor-add-component.html" class="btn btn-neutral float-right" title="Add new component" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>&#169; Copyright 2016-2024, Arian Fornaris.</p>
  </div>

  Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    provided by <a href="https://readthedocs.org">Read the Docs</a>.
   

</footer>
        </div>
      </div>
    </section>
  </div>
  <script>
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>
    <!-- Theme Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-67206336-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-67206336-2', {
          'anonymize_ip': false,
      });
    </script> 

</body>
</html>