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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!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 variants &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="Nested prefabs" href="prefab-nested.html" />
    <link rel="prev" title="Changing a property of a prefab instance" href="prefab-set-properties.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"><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 current"><a class="current reference internal" href="#">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 variants</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-variants">
<h1>Prefab variants<a class="headerlink" href="#prefab-variants" title="Link to this heading"></a></h1>
<p>A <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a> is a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> that extends other <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>. This is a concept similar to the <a class="reference external" href="https://unity.com">Unity Engine</a> <strong>prefab variants</strong> so we use the same name. However, like everything else in the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a>, the best way to understand the <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a> is looking into the generated code. Then you realize that a variant of a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> is a sub-class of the <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> class.</p>
<p>A <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a> inherits the properties and values of the base <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>, however, you can unlock the properties and modify them.</p>
<p><a class="reference external" href="prefab-set-properties.html">Learn more about unlock a prefab property</a>.</p>
<p>You can create a <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a> very easy, the only thing you need is to use a <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> as the <a class="reference external" href="prefab-object.html">prefab object</a> of the <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> file.</p>
<p>Let’s say we want to create a purple-skinned <a class="reference external" href="../scene-editor/prefab-variant.html">prefab variant</a> of the <strong>Dragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>. These are the steps:</p>
<ol class="arabic">
<li><p>Create a new <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> file, name it <strong>PurpleDragon</strong>. Learn <a class="reference external" href="prefab-new-file.html">how to create a prefab file</a>.</p></li>
<li><p>Drop the <strong>Dragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> on the scene. This creates a <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instance</a> that is the <a class="reference external" href="prefab-object.html">prefab object</a> of the file.</p>
<blockquote>
<div><img alt="Create prefab object with Dragon prefab." src="../_images/scene-editor-prefab-variant-1-04222020.webp" />
</div></blockquote>
</li>
<li><p>Unlock the <a class="reference external" href="texture-property.html">texture property</a> of the object and change it to the purple dragon texture. Save the file.</p>
<blockquote>
<div><img alt="Change the prefab object texture." src="../_images/scene-editor-prefab-variant-2-04222020.webp" />
</div></blockquote>
</li>
<li><p>Open the <strong>Level</strong> scene file, and look in the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> there are the <strong>Dragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> and the <strong>PurpleDragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>. Drop the <strong>PurpleDragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a> on the scene. It will create a new, purple, <a class="reference external" href="../scene-editor/prefab-create-instance.html">prefab instance</a>.</p>
<blockquote>
<div><img alt="Create a green and purple dragons." src="../_images/scene-editor-prefab-variant-3-04222020.webp" />
</div></blockquote>
</li>
<li><p>But you want to reduce the size of both dragons. To do this, you change the scale of the X-axis of the <strong>Dragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>. It will affect both instances, the <strong>Dragon</strong> and <strong>PurpleDragon</strong> instances, because the <strong>PurpleDragon</strong> is a variant of the now scaled <strong>Dragon</strong> <a class="reference external" href="../scene-editor/prefabs.html">prefab</a>.</p>
<blockquote>
<div><img alt="The new scale is applied to both instances." src="../_images/scene-editor-prefab-variant-4-04222020.webp" />
</div></blockquote>
</li>
</ol>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>A common error when making a prefab variant is to load the script files in the <a class="reference external" href="../asset-pack-editor/index.html">Asset Pack Editor</a>, using the <strong>Script</strong> file type. It can cause a “missing class” error at the execution of the game. The problem is that the scripts files are loaded and executed in any order. The solution is to add the scripts using the <strong>Scripts</strong> file type of the <a class="reference external" href="../asset-pack-editor/index.html">Asset Pack Editor</a>. It allows to set the execution order of the scripts: the prefab script should be executed before the prefab variant script. However, what we recommend for large projects is using building tools lie TypeScript or <a class="reference external" href="https://webpack.js.org">WebpackJS</a>.</p>
<p><a class="reference external" href="../asset-pack-editor/import-scripts.html#execution-order-of-the-scripts">Learn more about the execution order of the scripts</a></p>
</div>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="prefab-set-properties.html" class="btn btn-neutral float-left" title="Changing a property of a prefab instance" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="prefab-nested.html" class="btn btn-neutral float-right" title="Nested prefabs" 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>