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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							<!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>NineSlice &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="Text" href="text-object.html" />
    <link rel="prev" title="TileSprite" href="tile-sprite-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 current"><a class="current reference internal" href="#">NineSlice</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#nine-slice-properties">Nine Slice properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="#three-slice-mode">Three Slice mode</a></li>
</ul>
</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"><a class="reference internal" href="layer-object.html">Layer</a></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">NineSlice</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="nineslice">
<h1>NineSlice<a class="headerlink" href="#nineslice" title="Link to this heading"></a></h1>
<p>The <a class="reference external" href="nine-slice-object.html">Nine Slice</a> is a built-in <a class="reference external" href="https://phaser.io">Phaser</a> object type: <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.NineSlice.html">Phaser.GameObjects.NineSlice</a>. This type allows you to display a texture-based object that can be stretched both horizontally and vertically, but that retains fixed-sized corners.</p>
<p>A <a class="reference external" href="nine-slice-object.html">Nine Slice</a> is created in code using the <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#nineSlice__anchor">nineSlice factory</a>. This is how the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> generates the code of a <a class="reference external" href="nine-slice-object.html">Nine Slice</a>:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">nineslice</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">nineslice</span><span class="p">(</span>
<span class="w">                              </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">600</span><span class="p">,</span><span class="w"> </span><span class="c1">// x, y</span>
<span class="w">                              </span><span class="s2">&quot;ui&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;green-button&quot;</span><span class="p">,</span><span class="w"> </span><span class="c1">// texture, frame</span>
<span class="w">                              </span><span class="mf">300</span><span class="p">,</span><span class="w"> </span><span class="mf">200</span><span class="p">,</span><span class="w"> </span><span class="c1">// width, height</span>
<span class="w">                              </span><span class="mf">70</span><span class="p">,</span><span class="w"> </span><span class="mf">70</span><span class="p">,</span><span class="w"> </span><span class="c1">// leftWidth, rightWith</span>
<span class="w">                              </span><span class="mf">60</span><span class="p">,</span><span class="w"> </span><span class="mf">60</span><span class="p">);</span><span class="w"> </span><span class="c1">// topHeight, bottomHeight</span>
</pre></div>
</div>
<p>To create a <a class="reference external" href="nine-slice-object.html">Nine Slice</a> object in the scene, you should follow these steps:</p>
<ol class="arabic simple">
<li><p>Drop a <a class="reference external" href="blocks-view-integration.html">NineSlice built-in block</a> on the scene:</p></li>
</ol>
<blockquote>
<div><img alt="Drop a nine slice object to the scene" src="../_images/scene-editor-create-9slice-1-20230208.webp" />
</div></blockquote>
<ol class="arabic simple" start="2">
<li><p>Select a texture for the object by pressing <cite>X</cite> or opening the Texture Dialog in the Texture section:</p></li>
</ol>
<blockquote>
<div><img alt="Select texture" src="../_images/scene-editor-nineslice-create-2-20230208.webp" />
<img alt="The result of selecting the texture" src="../_images/scene-editor-nineslice-create-3-20230208.webp" />
</div></blockquote>
<ol class="arabic simple" start="3">
<li><p>Change the size of the object. In the <a class="reference external" href="size-properties.html">Size section</a>, you can set the width and height of the object. Also you can use the <a class="reference external" href="./manipulation-tools.html#resize-tool">Resize tool</a> (press the <code class="docutils literal notranslate"><span class="pre">Z</span></code> key):</p></li>
</ol>
<blockquote>
<div><img alt="Resize the object" src="../_images/scene-editor-nineslice-create-4-20230208.webp" />
</div></blockquote>
<ol class="arabic simple" start="4">
<li><p>In the <a class="reference internal" href="#nine-slice-properties">Nine Slice properties</a> section, change the size of the slices. Also you can activate the <a class="reference external" href="manipulation-tools.html#slice-tool">Nine Slice tool</a>, and change the sizes in the scene:</p></li>
</ol>
<blockquote>
<div><img alt="Edit the slice size." src="../_images/scene-editor-nineslice-create-5-20230208.webp" />
</div></blockquote>
<p>By the way, you can <a class="reference external" href="replace-object-type.html">convert an Image or Sprite or any other game object into a Nine Slice</a>.</p>
<section id="nine-slice-properties">
<h2>Nine Slice properties<a class="headerlink" href="#nine-slice-properties" title="Link to this heading"></a></h2>
<p>The <a class="reference external" href="nine-slice-object.html">Nine Slice</a> type shares properties with other object types:</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="transform-properties.html">Transform properties</a></p></li>
<li><p><a class="reference external" href="origin-properties.html">Origin properties</a></p></li>
<li><p><a class="reference external" href="size-properties.html">Size 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-single-property.html">Alpha single property</a></p></li>
<li><p><a class="reference external" href="tint-properties.html">Tint properties</a></p></li>
<li><p><a class="reference external" href="texture-property.html">Texture property</a></p></li>
</ul>
<p>But also it has particular properties:</p>
<img alt="Nine Slice properties." src="../_images/scene-editor-nine-slice-properties-20230208.webp" />
<ul class="simple">
<li><p>The <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.NineSlice.html#leftWidth__anchor">leftWidth</a> and <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.NineSlice.html#rightWidth__anchor">rightWidth</a> properties. It changes the size of the horizontal slices.</p></li>
<li><p>The <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.NineSlice.html#topHeight__anchor">topHeight</a> and <a class="reference external" href="https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.NineSlice.html#bottomHeight__anchor">bottomHeight</a> properties. It changes the size of the vertical slices.</p></li>
</ul>
</section>
<section id="three-slice-mode">
<h2>Three Slice mode<a class="headerlink" href="#three-slice-mode" title="Link to this heading"></a></h2>
<p>The NineSlice object can be created with only three horizontal slices. This is an optimization for objects you only need to stretch horizontally. This optimization is activated if you set the <strong>top</strong> and <strong>bottom height</strong> to <code class="docutils literal notranslate"><span class="pre">0</span></code>.</p>
<p>In Phaser Editor 2D, we provide a <strong>ThreeSlice</strong> blocks for creating this particular configuration of the Nine Slice object. You can drop this block into the scene for creating the object:</p>
<img alt="Create a 3 slice object." src="../_images/scene-editor-threeslice-create-1-20230208.webp" />
<p>When the Nine Slice object is in the 3-slices mode, you can change the size of the slices with the <a class="reference external" href="manipulation-tools.html#slice-tool">Slice Tool</a> and the <strong>Three Slice properties</strong> section. Note it only shows the width properties and manipulators:</p>
<img alt="Changes the width of the slices." src="../_images/scene-editor-three-slice-create-2-20230208.webp" />
</section>
</section>


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