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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!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>Prefab instance display properties &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="Prefab code generation" href="prefab-code.html" />
    <link rel="prev" title="Creating a prefab instance" href="prefab-create-instance.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"><a class="reference internal" href="prefab-user-properties.html">Prefab user properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-create-instance.html">Creating a prefab instance</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">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 active">Prefab instance display properties</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="prefab-instance-display-properties">
<h1>Prefab instance display properties<a class="headerlink" href="#prefab-instance-display-properties" title="Link to this heading"></a></h1>
<p>When you create a prefab instance, the <a class="reference external" href="../workbench/outline-view.html">Outline view</a> shows the variable’s name as the display name of the object.</p>
<p>Let’s see this example.</p>
<p>The variable name of the button is <strong>buttonDown</strong>:</p>
<img alt="The variable name." src="../_images/scene-editor-prefabs-display-name-variable-name-1.webp" />
<p>… and the <a class="reference external" href="../workbench/outline-view.html">Outline view</a> uses the same name for labeling the object:</p>
<img alt="The label in the Outline view." src="../_images/scene-editor-prefabs-display-name-outline-1.webp" />
<p>However, you can change the labeling of the object with a more descriptive name. You can set the <strong>Object Display Name</strong> in the <strong>Prefab Display</strong> properties section of the prefab’s scene:</p>
<img alt="Object display name definition." src="../_images/scene-editor-prefabs-display-name-definition.webp" />
<p>The display name for the button instances will be <code class="docutils literal notranslate"><span class="pre">Button</span> <span class="pre">-</span> <span class="pre">${action}</span></code>. It is a name template with placeholders, and the <code class="docutils literal notranslate"><span class="pre">${action}</span></code> placeholder is filled with the value of the <strong>Action</strong> prefab property of the button.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">action</span></code> name is the variable name of the user property <code class="docutils literal notranslate"><span class="pre">Action</span></code>. You can hover the mouse in the property to get the property information:</p>
<img alt="The info of a prefab property." src="../_images/scene-editor-prefab-display-name-property-tooltip-20231205.webp" />
<p>Now, the buttons are shown in the <a class="reference external" href="../workbench/outline-view.html">Outline view</a> with the new display names. Note the <code class="docutils literal notranslate"><span class="pre">${action}</span></code> expression is replaced by <code class="docutils literal notranslate"><span class="pre">UP</span></code>, <code class="docutils literal notranslate"><span class="pre">DOWN</span></code>, or <code class="docutils literal notranslate"><span class="pre">FIRE</span></code> depending on the value of the <strong>Action</strong> property:</p>
<img alt="The new display name of the objects in the outline view." src="../_images/scene-editor-prefabs-display-name-outline-2.webp" />
<p>This technique is particularly useful when you add objects but their variable names are not relevant to the game implementation. Or when you want to provide more detailed information about the objects.</p>
<p>This is the case of many <a class="reference external" href="../scene-editor/script-node.html">script nodes</a>:</p>
<img alt="Using the prefab display name in the script nodes." src="../_images/scene-editor-prefabs-display-name-script-node-20231205.webp" />
<p>In addition to the <code class="docutils literal notranslate"><span class="pre">${propName}</span></code> syntax, you can use a <code class="docutils literal notranslate"><span class="pre">#{propName}</span></code> expression. It will be replaced by the name of the property (<code class="docutils literal notranslate"><span class="pre">propName</span></code>) if the value of the property is <code class="docutils literal notranslate"><span class="pre">true</span></code>, <code class="docutils literal notranslate"><span class="pre">undefined</span></code>, <code class="docutils literal notranslate"><span class="pre">&quot;&quot;</span></code>, or the equivalent in JavaScript.</p>
<p>This is an example. The display name is <code class="docutils literal notranslate"><span class="pre">Collide</span> <span class="pre">#{up}</span> <span class="pre">#{down}</span></code>. If the value of the <code class="docutils literal notranslate"><span class="pre">up</span></code> property is <code class="docutils literal notranslate"><span class="pre">true</span></code> and the <code class="docutils literal notranslate"><span class="pre">down</span></code> property is <code class="docutils literal notranslate"><span class="pre">false</span></code>, then the final display name will be <code class="docutils literal notranslate"><span class="pre">Collide</span> <span class="pre">#up</span></code>.</p>
<p>It means you can use this syntax for showing “tags”.</p>
</section>


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