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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!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>Prefabs &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 file" href="prefab-new-file.html" />
    <link rel="prev" title="Pixel Perfect Hit Area" href="input-hit-area-pixel-perfect.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="current reference internal" href="#">Prefabs</a><ul>
<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"><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 active">Prefabs</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="id1">
<h1>Prefabs<a class="headerlink" href="#id1" title="Link to this heading"></a></h1>
<div class="toctree-wrapper compound">
<ul>
<li class="toctree-l1"><a class="reference internal" href="prefab-new-file.html">Creating a prefab file</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-object.html">The prefab object</a><ul>
<li class="toctree-l2"><a class="reference internal" href="prefab-object.html#automatic-container-creation">Automatic Container creation</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="prefab-user-properties.html">Prefab user properties</a><ul>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-create.html">Creating a prefab user property</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-simple-type.html">Simple property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-options-type.html">Option property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-color-type.html">Color property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-expression-type.html">Expression property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-object-variable-type.html">Object Variable property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-object-constructor-type.html">Object Constructor property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-event-type.html">Event property type</a><ul>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-event-type.html#dynamic-keyboard-events">Dynamic keyboard events</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-event-type.html#dynamic-animation-events">Dynamic animation events</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-event-type.html#dynamic-spine-events">Dynamic Spine events</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-event-type.html#custom-events">Custom events</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-event-type.html#event-code-generation">Event code generation</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-keycode-type.html">Key Code property type</a><ul>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-keycode-type.html#property-code-generation">Property code generation</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-texture-type.html">Texture Config property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-asset-key-type.html">Asset Key property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-animation-key-type.html">Animation Key property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-audio-key-type.html">Audio Key property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-scene-key-type.html">Scene Key property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-spine-skin-name.html">Spine Skin Name property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-spine-animation-name.html">Spine Animation Name property type</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-initializing.html">Initializing other properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-initializing.html#the-scene-awake-event">The <code class="docutils literal notranslate"><span class="pre">scene-awake</span></code> event</a></li>
<li class="toctree-l3"><a class="reference internal" href="prefab-user-properties-initializing.html#using-properties-with-custom-definition">Using properties with custom definition</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="prefab-user-properties-prefab-instance.html">User properties in a prefab instance</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="prefab-create-instance.html">Creating a prefab instance</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-display-properties.html">Prefab instance display properties</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-code.html">Prefab code generation</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-set-properties.html">Changing a property of a prefab instance</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-variant.html">Prefab variants</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-nested.html">Nested prefabs</a><ul>
<li class="toctree-l2"><a class="reference internal" href="prefab-nested.html#nested-prefab-instances">Nested prefab instances</a></li>
<li class="toctree-l2"><a class="reference internal" href="prefab-nested.html#things-you-cannot-do-with-nested-prefab-instances">Things you cannot do with nested prefab instances</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="prefab-instance-children.html">Adding children to a prefab instance</a></li>
<li class="toctree-l1"><a class="reference internal" href="prefab-black-box.html">Using a prefab as a black box</a></li>
</ul>
</div>
<p>A <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> is a key concept in the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a>. It allows for creating reusable, customized objects. It borrows some concepts from the <a class="reference external" href="https://unity.com">Unity Engine</a> prefabs.</p>
<p>In a game level, there are many objects with a common behavior and appearance. For example, several enemies look the same and act the same. Or there are the “coins” that have the same animation and play the same sound when are taken. Or the player object is the same in all the levels. All these objects are perfect candidates to be created as <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instances</a>.</p>
<p>You can see a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> as the template of multiple objects. Or you can see a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> as a class, so you can create multiple instances of that class and place them in a scene.</p>
<p>In the end, a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> is just a class. If you look into the code generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a>, a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> scene is compiled into a class that extends a <a class="reference external" href="https://phaser.io">Phaser</a> built-in type, a <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a>, or another <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> class. And the <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instances</a> are just instances of the generated class.</p>
<p>At the same time, you can customize <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instances</a> by changing the value of its properties. If a property of the <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> (the class) is modified, this modification is applied to all the <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instances</a>, if it is not overriding in the <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instance</a>.</p>
<p>A very precise way to know how <a class="reference external" href="../scene-editor/prefabs.html">prefabs</a> work, is to look into the code generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a>. You will realize that it is just about Object Oriented Programming concepts like class, inheritance, properties, composition, and instances.</p>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="input-hit-area-pixel-perfect.html" class="btn btn-neutral float-left" title="Pixel Perfect Hit Area" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="prefab-new-file.html" class="btn btn-neutral float-right" title="Creating a prefab file" 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>