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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!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>Layer &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="SpineGameObject" href="spine-game-object.html" />
    <link rel="prev" title="Container" href="container-object.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 current"><a class="reference internal" href="game-objects.html">Game Object types</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="common-object-properties.html">Common object properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="image-object.html">Image</a></li>
<li class="toctree-l3"><a class="reference internal" href="sprite-object.html">Sprite</a></li>
<li class="toctree-l3"><a class="reference internal" href="tile-sprite-object.html">TileSprite</a></li>
<li class="toctree-l3"><a class="reference internal" href="nine-slice-object.html">NineSlice</a></li>
<li class="toctree-l3"><a class="reference internal" href="text-object.html">Text</a></li>
<li class="toctree-l3"><a class="reference internal" href="bitmap-text-object.html">BitmapText</a></li>
<li class="toctree-l3"><a class="reference internal" href="tilemap-object.html">Tilemap</a></li>
<li class="toctree-l3"><a class="reference internal" href="tilemap-layer-object.html">TilemapLayer</a></li>
<li class="toctree-l3"><a class="reference internal" href="shape-object.html">Shape</a></li>
<li class="toctree-l3"><a class="reference internal" href="container-object.html">Container</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Layer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#grouping-objects-in-a-layer">Grouping objects in a Layer</a></li>
<li class="toctree-l4"><a class="reference internal" href="#layer-properties">Layer properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="spine-game-object.html">SpineGameObject</a></li>
<li class="toctree-l3"><a class="reference internal" href="replace-object-type.html">Replacing the type of an object</a></li>
</ul>
</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"><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="game-objects.html">Game Object types</a></li>
      <li class="breadcrumb-item active">Layer</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="layer">
<h1>Layer<a class="headerlink" href="#layer" title="Link to this heading"></a></h1>
<p>The <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Layer.html">Phaser.GameObjects.Layer</a> object type allows grouping objects. Unlike the <a class="reference external" href="./container-object.html">Container</a> objects, a layer cannot be transformed. It doesn’t have position, angle or scale. Its only purpose is to sort the objects for rendering, quickly.</p>
<p><a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Layer.html">Learn more about Layers in the Phaser docs</a>.</p>
<p><a class="reference external" href="./working-with-parent-objects.html">Learn more about working with parent objects in the Scene Editor</a>.</p>
<p>You can create a Layer by dropping a <a class="reference external" href="blocks-view-integration.html">Layer built-in block</a> on the scene,  or with the <a class="reference external" href="#grouping-objects-in-a-layer">Create Layer with Selection</a> command.</p>
<img alt="Creating an empty layer." src="../_images/scene-editor-layer-drop-into-scene-12172020.webp" />
<p>The code generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a>, to create a Layer, is like this:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="c1">// create the layer</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">layer_1</span><span class="w"> </span><span class="o">=</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">layer</span><span class="p">();</span>

<span class="c1">// create an object and add it to the layer</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">someObject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">;</span>
<span class="nx">layer_1</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">someObject</span><span class="p">);</span>
</pre></div>
</div>
<section id="grouping-objects-in-a-layer">
<h2>Grouping objects in a Layer<a class="headerlink" href="#grouping-objects-in-a-layer" title="Link to this heading"></a></h2>
<p>You can create a layer with a couple of objects. You can do this by selecting the objects and executing the  <a class="reference external" href="#grouping-objects-in-a-layer">Create Layer with Selection</a> command. The command is available in the <a class="reference external" href="./working-with-parent-objects.html#the-parent-context-menu">Parent context menu</a>.</p>
<p>When you execute the command, the selected objects are removed from the original parents and added to the new layer. All objects keep the same absolute position. If all objects are children of a common layer, then the new layer will be added to the original parent layer.</p>
</section>
<section id="layer-properties">
<h2>Layer properties<a class="headerlink" href="#layer-properties" title="Link to this heading"></a></h2>
<p>The Layer type contains some of the <a class="reference external" href="common-object-properties.html">common object properties</a>:</p>
<ul class="simple">
<li><p><a class="reference external" href="variable-properties.html">Variable properties</a></p></li>
<li><p><a class="reference external" href="lists-properties.html">Lists properties</a></p></li>
<li><p><a class="reference external" href="children-properties.html">Children properties</a></p></li>
<li><p><a class="reference external" href="visible-property.html">Visible property</a></p></li>
<li><p><a class="reference external" href="alpha-properties.html">Alpha property</a></p></li>
</ul>
</section>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="container-object.html" class="btn btn-neutral float-left" title="Container" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="spine-game-object.html" class="btn btn-neutral float-right" title="SpineGameObject" 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>