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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
							<!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>Creating a SpineGameObject &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 properties" href="spine-animations-game-object-properties.html" />
    <link rel="prev" title="Spine assets preview" href="spine-animations-assets-preview.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 current"><a class="reference internal" href="spine-animations.html">Spine animations</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="spine-animations-install.html">Installing the Spine plugin in your game</a></li>
<li class="toctree-l3"><a class="reference internal" href="spine-animations-loading.html">Loading the Spine assets</a></li>
<li class="toctree-l3"><a class="reference internal" href="spine-animations-assets-preview.html">Spine assets preview</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Creating a SpineGameObject</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#create-a-spine-object-with-a-spinegameobject-built-in-block">Create a Spine object with a SpineGameObject built-in block</a></li>
<li class="toctree-l4"><a class="reference internal" href="#create-a-spine-object-with-a-skeleton-data-block">Create a Spine object with a skeleton data block</a></li>
<li class="toctree-l4"><a class="reference internal" href="#create-a-spine-object-with-a-skeleton-s-skin-block">Create a Spine object with a skeleton’s skin block</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="spine-animations-game-object-properties.html">SpineGameObject properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="spine-animations-game-object-user-properties.html">SpineGameObject user properties</a></li>
</ul>
</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="spine-animations.html">Spine animations</a></li>
      <li class="breadcrumb-item active">Creating a SpineGameObject</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="creating-a-spinegameobject">
<h1>Creating a SpineGameObject<a class="headerlink" href="#creating-a-spinegameobject" title="Link to this heading"></a></h1>
<p>The <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a> is the <a class="reference external" href="https://phaser.io">Phaser</a> game object implementation to display, control, and customize <a class="reference external" href="https://esotericsoftware.com">Spine</a> animations.</p>
<p>The <a class="reference external" href="https://esotericsoftware.com/spine-phaser">Spine Phaser runtime</a> provides the <code class="docutils literal notranslate"><span class="pre">spine()</span></code> factory for creating a <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a>. This is an example:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">spineObject</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">spine</span><span class="p">(</span><span class="mf">400</span><span class="p">,</span><span class="w"> </span><span class="mf">500</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;spineboy&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;spineboy-atlas&quot;</span><span class="p">);</span>
</pre></div>
</div>
<p>But you don’t need to write that code. The <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> can generate that code for you. You only need to drag a <a class="reference external" href="https://esotericsoftware.com">Spine</a> block from the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> and drop it on the scene.</p>
<p>Let’s see the different ways of doing this.</p>
<section id="create-a-spine-object-with-a-spinegameobject-built-in-block">
<h2>Create a Spine object with a SpineGameObject built-in block<a class="headerlink" href="#create-a-spine-object-with-a-spinegameobject-built-in-block" title="Link to this heading"></a></h2>
<p>The main way of adding a <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a> to the scene is by dropping the <strong>SpineGameObject</strong> block on the scene. This block is located in the <strong>Built-in</strong> section of the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a>, under the <strong>Spine</strong> folder. Drag it and drop it on the scene:</p>
<img alt="Add spine game object to the scene." src="../_images/spine-animations-add-game-object-1-20230924.webp" />
<p>It opens a configuration dialog for selecting the skeleton data key and the atlas key to be used by the <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a>. Every <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a> requires a reference to the skeleton data and the atlas. This means, you first have to <a class="reference external" href="spine-animations-loading.html">add the skeleton data and atlas files to an Asset Pack file</a>. In addition, the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> requires that you select the skin of the animation.</p>
<p>This is the workflow:</p>
<ul class="simple">
<li><p>Select the skeleton data and press <strong>Next</strong>:</p></li>
</ul>
<blockquote>
<div><img alt="Select skeleton data." src="../_images/spine-animations-add-object-data-20230924.webp" />
</div></blockquote>
<ul class="simple">
<li><p>Select the atlas and press <strong>Next</strong>:</p></li>
</ul>
<blockquote>
<div><img alt="Select the atlas" src="../_images/spine-animations-add-object-atlas-20230924.webp" />
</div></blockquote>
<ul class="simple">
<li><p>Select the skin and press <strong>Finish</strong>:</p></li>
</ul>
<blockquote>
<div><img alt="Select the skin." src="../_images/spine-animations-add-object-skin-20230924.webp" />
</div></blockquote>
<ul class="simple">
<li><p>Finally, it adds the <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a> to the scene:</p></li>
</ul>
<blockquote>
<div><img alt="Spine game object in the scene." src="../_images/spine-animations-add-obejct-done-20230924.webp" />
</div></blockquote>
</section>
<section id="create-a-spine-object-with-a-skeleton-data-block">
<h2>Create a Spine object with a skeleton data block<a class="headerlink" href="#create-a-spine-object-with-a-skeleton-data-block" title="Link to this heading"></a></h2>
<p>The <strong>Spine JSON</strong> and <strong>Spine Binary</strong> sections of the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> show all the skeleton data you <a class="reference external" href="spine-animations-loading.html">defined in the Asset Pack file</a>. You can drag a skeleton data block and drop it on the scene. It shows the configuration dialog to select the atlas and the skin, just like in the previous section. The next image shows the <code class="docutils literal notranslate"><span class="pre">spineboy</span></code> skeleton block:</p>
<img alt="Add a skeleton block." src="../_images/spine-animations-add-skeleton-block-20230924.webp" />
</section>
<section id="create-a-spine-object-with-a-skeleton-s-skin-block">
<h2>Create a Spine object with a skeleton’s skin block<a class="headerlink" href="#create-a-spine-object-with-a-skeleton-s-skin-block" title="Link to this heading"></a></h2>
<p>If you imported the skeleton data and the atlas assets in the Asset Pack following the <a class="reference external" href="spine-animations-loading.html#spine-assets-default-naming-rules">default naming rules</a>, then the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> shows a special <strong>skin</strong> block inside the skeleton data block.</p>
<p>Drag this skin block and drop it on the scene. It creates the <a class="reference external" href="https://esotericsoftware.com/spine-phaser#SpineGameObject">SpineGameObject</a> right away, without showing the configuration dialog:</p>
<img alt="Add the skin block." src="../_images/spine-animations-add-object-skin-block-20230924.webp" />
</section>
</section>


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