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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!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 properties in a prefab instance &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="Creating a prefab instance" href="prefab-create-instance.html" />
    <link rel="prev" title="Initializing other properties" href="prefab-user-properties-initializing.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 current"><a class="reference internal" href="prefabs.html">Prefabs</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="prefab-new-file.html">Creating a prefab file</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-object.html">The prefab object</a></li>
<li class="toctree-l3 current"><a class="reference internal" href="prefab-user-properties.html">Prefab user properties</a><ul class="current">
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-create.html">Creating a prefab user property</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-simple-type.html">Simple property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-options-type.html">Option property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-color-type.html">Color property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-expression-type.html">Expression property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-object-variable-type.html">Object Variable property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-object-constructor-type.html">Object Constructor property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-event-type.html">Event property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-keycode-type.html">Key Code property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-texture-type.html">Texture Config property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-asset-key-type.html">Asset Key property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-animation-key-type.html">Animation Key property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-audio-key-type.html">Audio Key property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-scene-key-type.html">Scene Key property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-spine-skin-name.html">Spine Skin Name property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-spine-animation-name.html">Spine Animation Name property type</a></li>
<li class="toctree-l4"><a class="reference internal" href="prefab-user-properties-initializing.html">Initializing other properties</a></li>
<li class="toctree-l4 current"><a class="current reference internal" href="#">User properties in a prefab instance</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="prefab-create-instance.html">Creating a prefab instance</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-display-properties.html">Prefab instance display properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-code.html">Prefab code generation</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-set-properties.html">Changing a property of a prefab instance</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-variant.html">Prefab variants</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-nested.html">Nested prefabs</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-instance-children.html">Adding children to a prefab instance</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-black-box.html">Using a prefab as a black box</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="script-node.html">Script Nodes</a></li>
<li class="toctree-l2"><a class="reference internal" href="user-components.html">User Components</a></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="prefabs.html">Prefabs</a></li>
          <li class="breadcrumb-item"><a href="prefab-user-properties.html">Prefab user properties</a></li>
      <li class="breadcrumb-item active">User properties in a prefab instance</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-properties-in-a-prefab-instance">
<h1>User properties in a prefab instance<a class="headerlink" href="#user-properties-in-a-prefab-instance" title="Link to this heading"></a></h1>
<p>This is how the properties you defined in a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> are presented in the <strong>Prefab Instance</strong> section of a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> instance:</p>
<img alt="User properties in a prefab instance." src="../_images/prefab-user-props-prefab-instance-20230627.webp" />
<p>The <a class="reference external" href="../workbench/inspector-view.html">Inspector view</a> shows a section for every <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> (and <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a>) of the object. The user properties are shown just like any other property of a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> instance.</p>
<p>Each section contains a menu with the options:</p>
<ul class="simple">
<li><p><strong>Open Prefab</strong>: opens the prefab file.</p></li>
<li><p><strong>Select All &lt;Prefab&gt;</strong>: select all objects in the scene instancing the same prefab.</p></li>
</ul>
<img alt="Prefab instance section and menu." src="../_images/prefab-user-props-prefab-instance-menu-20230627.webp" />
<p>The code, generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a>, that creates the <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> instance and initialize the properties will look like following. Note the <strong>dragon</strong> instance is created first, and the user properties are initialized later, at the end of the method. By setting the user properties at the end, it allows you to set references to another objects created in the scene:</p>
<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>
<span class="p">...</span>
<span class="w">    </span><span class="nx">create</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="p">...</span>

<span class="w">        </span><span class="c1">// dragon</span>
<span class="w">        </span><span class="kd">const</span><span class="w"> </span><span class="nx">dragon</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">Dragon</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="mf">370</span><span class="p">,</span><span class="w"> </span><span class="mf">218</span><span class="p">);</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">existing</span><span class="p">(</span><span class="nx">dragon</span><span class="p">);</span>

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

<span class="w">        </span><span class="c1">// dragon (prefab fields)</span>
<span class="w">        </span><span class="nx">dragon</span><span class="p">.</span><span class="nx">maxSpeed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">300</span><span class="p">;</span>
<span class="w">        </span><span class="nx">dragon</span><span class="p">.</span><span class="nx">flameType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;smoke&quot;</span><span class="p">;</span>
<span class="w">        </span><span class="nx">dragon</span><span class="p">.</span><span class="nx">onClickHandler</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">selectDragon</span><span class="p">();</span>
<span class="w">        </span><span class="nx">dragon</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;prefab-awake&quot;</span><span class="p">);</span>
<span class="w">        </span><span class="p">...</span>
<span class="w">    </span><span class="p">}</span>
<span class="p">...</span>
<span class="p">}</span>
</pre></div>
</div>
<p>In the next sections are covered the topics to create <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> instances and to change the properties.</p>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="prefab-user-properties-initializing.html" class="btn btn-neutral float-left" title="Initializing other properties" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="prefab-create-instance.html" class="btn btn-neutral float-right" title="Creating a prefab instance" 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>