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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
							<!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>The ScriptNode class &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="The Core scripts project" href="script-node-basic-scripts-project.html" />
    <link rel="prev" title="Creating a Script Node" href="script-node-create.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"><a class="reference internal" href="prefabs.html">Prefabs</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="script-node.html">Script Nodes</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="script-node-vs-user-component.html">Script Nodes vs User Components</a></li>
<li class="toctree-l3"><a class="reference internal" href="script-node-libraries.html">Script Nodes libraries</a></li>
<li class="toctree-l3"><a class="reference internal" href="script-node-create.html">Creating a Script Node</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">The ScriptNode class</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#the-parent">The parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="#the-children">The children</a></li>
<li class="toctree-l4"><a class="reference internal" href="#the-events">The events</a></li>
<li class="toctree-l4"><a class="reference internal" href="#the-action-methods">The action methods</a></li>
<li class="toctree-l4"><a class="reference internal" href="#the-action-s-target">The action’s target</a></li>
<li class="toctree-l4"><a class="reference internal" href="#custom-action-script-node">Custom action script node</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="script-node-basic-scripts-project.html">The Core scripts project</a></li>
<li class="toctree-l3"><a class="reference internal" href="script-node-prefab.html">Making a ScriptNode prefab</a></li>
<li class="toctree-l3"><a class="reference internal" href="script-node-properties.html">ScriptNode’s properties</a></li>
</ul>
</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="script-node.html">Script Nodes</a></li>
      <li class="breadcrumb-item active">The ScriptNode class</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="the-scriptnode-class">
<h1>The ScriptNode class<a class="headerlink" href="#the-scriptnode-class" title="Link to this heading"></a></h1>
<p>When you create an instance of a <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a>, the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> generates a code like this:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="ow">new</span><span class="w"> </span><span class="nx">ScriptNode</span><span class="p">(</span><span class="nx">parent</span><span class="p">);</span>
</pre></div>
</div>
<p>It means it creates an instance of the <code class="docutils literal notranslate"><span class="pre">ScriptNode</span></code> class. But this class is not part of the <a class="reference external" href="https://phaser.io">Phaser</a> API, it is a class you should code yourself.</p>
<p>The protocol of this class is simple, it needs a constructor that receives a parent argument. Something like this:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nx">ScriptNode</span><span class="w"> </span><span class="p">{</span>

<span class="w">   </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">parent</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>It is simple, but if you need to, you can create a prefab with more features, like handling children, events, etc…</p>
<p>The good news is that this class is included in the <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> project templates. If your project is not based on a template, you can install it from the <code class="docutils literal notranslate"><span class="pre">&#64;phasereditor2d/scripts-core</span></code> script library. <a class="reference external" href="script-node-libraries.html">Learn more about the script libraries</a>.</p>
<p>Also, <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> can generate the default implementation of this class for you, with the basic features:</p>
<ol class="arabic simple">
<li><p>In the <a class="reference external" href="../workbench/files-view.html">Files view</a>, select the folder when you want to add the class file.</p></li>
<li><p>Open the <a class="reference external" href="../workbench/command-palette.html">Command Palette</a> (<code class="docutils literal notranslate"><span class="pre">Ctrl+K</span></code>) and search for <code class="docutils literal notranslate"><span class="pre">script</span></code>.</p></li>
<li><p>Select the command with the desired format (TypeScript, JavaScript, ES modules,…).</p></li>
<li><p><strong>Execute</strong> the command and it generates the class file in the selected folder.</p></li>
</ol>
<img alt="Create ScriptNode class commands." src="../_images/script-node-create-script-node-class-1-20230323.webp" />
<p>This built-in class the editor provides contains a couple of features:</p>
<ul class="simple">
<li><p>Keeps a reference to the scene, the game object, and the parent.</p></li>
<li><p>Manages an array of the children nodes.</p></li>
<li><p>Registers listeners to the scene and game object for implementing the <strong>awake</strong>, <strong>start</strong>, <strong>update</strong>, and <strong>destroy</strong> events. It follows the same logic as the <a class="reference external" href="./user-components-super-class.html">User Components events</a>.</p></li>
<li><p>Provides an interface for “action nodes”.</p></li>
</ul>
<section id="the-parent">
<h2>The parent<a class="headerlink" href="#the-parent" title="Link to this heading"></a></h2>
<p>When a new instance of the <code class="docutils literal notranslate"><span class="pre">ScriptNode</span></code> class is created, it receives a parent node as an argument. This parent could be a scene, a game object, or another script node.</p>
<p>The script node instance keeps a reference to the parent, but also keeps a reference to the game object and the scene. Sure, if the node is added to a scene, the game object reference is not updated, it keeps <code class="docutils literal notranslate"><span class="pre">undefined</span></code>.</p>
<p>Related to the parent, the class provides the following properties:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">parent()</span></code>: it’s type is <code class="docutils literal notranslate"><span class="pre">Phaser.Scene</span> <span class="pre">|</span> <span class="pre">Phaser.GameObjects.GameObject</span> <span class="pre">|</span> <span class="pre">ScriptNode</span></code>.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">gameObject()</span></code>: it’s type is <code class="docutils literal notranslate"><span class="pre">Phaser.GameObjects.GameObject</span> <span class="pre">|</span> <span class="pre">undefined</span></code>.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">scene()</span></code>: it’s type is <code class="docutils literal notranslate"><span class="pre">Phaser.Scene</span></code>.</p></li>
</ul>
</section>
<section id="the-children">
<h2>The children<a class="headerlink" href="#the-children" title="Link to this heading"></a></h2>
<p>The <code class="docutils literal notranslate"><span class="pre">ScriptNode</span></code> class has an array of nodes for keeping the children. This array is updated when a new node is created. It also provides some related methods:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">children</span> <span class="pre">()</span></code>: A property for iterating the children.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">add()</span></code>: A method for adding new children. This method is called automatically when a new child is created.</p></li>
</ul>
</section>
<section id="the-events">
<h2>The events<a class="headerlink" href="#the-events" title="Link to this heading"></a></h2>
<p>The <code class="docutils literal notranslate"><span class="pre">ScriptNode</span></code> class provides a couple of methods for handling special events that may help you implement the behaviors. It works just like the <a class="reference external" href="./user-components-super-class.html">User Components events</a>. The methods are:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">awake()</span></code>: It is called when all the objects of the scene are created. The values of the user properties (prefab) will be available at this time, so you can override this method for making computations that require the value of the properties. It works like the <a class="reference external" href="user-components-awake-event.html">UserComponent “awake” method</a>.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">start()</span></code>: It is called the first time the scene updates.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">update()</span></code>: It is called each time the scene updates.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">destroy()</span></code>: It is called when the game object is destroyed or the scene is shut down.</p></li>
</ul>
</section>
<section id="the-action-methods">
<h2>The action methods<a class="headerlink" href="#the-action-methods" title="Link to this heading"></a></h2>
<p>We find it convenient to establish a protocol for action script nodes. An action script is a script node that will execute a certain task. For that purpose, the class provides the following methods:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">execute()</span></code>: Contains the code of the action.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">executeChildren()</span></code>: Executes the children.</p></li>
</ul>
<p>In the next chapter, we mention a project with basic node implementations that you can include in your game. These scripts provide a protocol or style you can adopt for your game.</p>
</section>
<section id="the-action-s-target">
<h2>The action’s target<a class="headerlink" href="#the-action-s-target" title="Link to this heading"></a></h2>
<p>Most of the action nodes modify or read the game object of the node. This is fine for a lot of cases, but a bit limited. Let’s see an example.</p>
<p>You want to make a collider between a player object and a list of coin objects and destroy the coin when the player touches it:</p>
<img alt="The scene for collecting coins" src="../_images/scene-editor-script-node-target-action-game-20240109.webp" />
<p>We have a <strong>Make Collider Action</strong> node that you can add to the player. This node has a parameter to select the other object you want to collide with. In this case, it is a container with the coins:</p>
<img alt="Make collider node." src="../_images/scene-editor-script-node-demo-collider-node-20240109.webp" />
<img alt="Make collider node properties" src="../_images/scene-editor-script-node-demo-collider-node-props-20240109.webp" />
<p>When the collision happens, the collider node executes the children and passes the two objects as arguments. In the first argument goes the player, and in the second argument goes the coin.</p>
<p>So, we add <strong>Destroy Object Action</strong> to the collider node. This node is an action to destroy an object. By default, it destroys the game object associated with it: the player. But we want to destroy the coin, not the player. So we need to change the target of the destroy action from the game object to the second argument.</p>
<p>To do this, we add the <strong>Action Target Config</strong> user component to the destroy object action, and set the <strong>Target</strong> to <strong>ARG_2</strong>. The destroy action then will get the second argument and destroy it.</p>
<img alt="The destroy action node" src="../_images/scene-editor-script-node-collider-demo-destroy-action-20240109.webp" />
<img alt="The properties of the destroy action" src="../_images/scene-editor-script-node-collider-demo-destroy-action-properties-20240109.webp" />
<p>The <strong>Target</strong> parameter shows an array of options, <strong>GAME_OBJECT</strong> (default), <strong>ARG_1</strong>, …, <strong>ARG_8</strong>.</p>
<p>In addition to the <strong>Target</strong>, you can set the <strong>Target Name</strong> of the action. This name is only about syntax sugar and makes the node more readable in the Outline view. Look in the previous screenshot, the node starts with the value of <strong>Target</strong> plus the <strong>Target Name</strong>.</p>
</section>
<section id="custom-action-script-node">
<h2>Custom action script node<a class="headerlink" href="#custom-action-script-node" title="Link to this heading"></a></h2>
<p>Making a new action node is very simple. Just create a prefab of a <strong>Script Node</strong>, and implement the <code class="docutils literal notranslate"><span class="pre">execute()</span></code> method. If you want to support the <strong>Action Target Config</strong> component, you can use the <code class="docutils literal notranslate"><span class="pre">ScriptNode.getActionTargetObject()</span></code> utility method:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="nx">execute</span><span class="p">(...</span><span class="nx">args</span><span class="o">:</span><span class="w"> </span><span class="nx">any</span><span class="p">[])</span><span class="w"> </span><span class="p">{</span>

<span class="w">   </span><span class="kd">const</span><span class="w"> </span><span class="nx">obj</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">getActionTargetObject</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>

<span class="w">   </span><span class="nx">obj</span><span class="p">.</span><span class="nx">doSomething</span><span class="p">();</span>
<span class="p">}</span>
</pre></div>
</div>
<p>That utility method does the following:</p>
<ul class="simple">
<li><p>Check if the <strong>Action Target Config</strong> user component is present in the node. If it is present and has a target configured to return an argument, then returns the right argument.</p></li>
<li><p>Else, it returns the node’s game object.</p></li>
</ul>
</section>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="script-node-create.html" class="btn btn-neutral float-left" title="Creating a Script Node" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="script-node-basic-scripts-project.html" class="btn btn-neutral float-right" title="The Core scripts project" 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>