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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
							<!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>Script Nodes &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="Script Nodes vs User Components" href="script-node-vs-user-component.html" />
    <link rel="prev" title="Using a prefab as a black box" href="prefab-black-box.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="current reference internal" href="#">Script Nodes</a><ul>
<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"><a class="reference internal" href="script-node-class.html">The ScriptNode class</a></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 active">Script Nodes</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="script-nodes">
<h1>Script Nodes<a class="headerlink" href="#script-nodes" title="Link to this heading"></a></h1>
<div class="toctree-wrapper compound">
<ul>
<li class="toctree-l1"><a class="reference internal" href="script-node-vs-user-component.html">Script Nodes vs User Components</a></li>
<li class="toctree-l1"><a class="reference internal" href="script-node-libraries.html">Script Nodes libraries</a><ul>
<li class="toctree-l2"><a class="reference internal" href="script-node-libraries.html#installing-a-script-library">Installing a script library</a><ul>
<li class="toctree-l3"><a class="reference internal" href="script-node-libraries.html#script-node-libraries-for-vanilla-javascript">Script Node libraries for vanilla JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="script-node-create.html">Creating a Script Node</a><ul>
<li class="toctree-l2"><a class="reference internal" href="script-node-create.html#browsing-the-script-nodes">Browsing the Script Nodes</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-create.html#code-generation-of-the-creation-of-a-script">Code generation of the creation of a script</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="script-node-class.html">The ScriptNode class</a><ul>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#the-parent">The parent</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#the-children">The children</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#the-events">The events</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#the-action-methods">The action methods</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#the-action-s-target">The action’s target</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-class.html#custom-action-script-node">Custom action script node</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="script-node-basic-scripts-project.html">The Core scripts project</a><ul>
<li class="toctree-l2"><a class="reference internal" href="script-node-basic-scripts-project.html#base-scripts">Base scripts</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-basic-scripts-project.html#event-scripts">Event scripts</a></li>
<li class="toctree-l2"><a class="reference internal" href="script-node-basic-scripts-project.html#action-scripts">Action scripts</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="script-node-prefab.html">Making a ScriptNode prefab</a></li>
<li class="toctree-l1"><a class="reference internal" href="script-node-properties.html">ScriptNode’s properties</a></li>
</ul>
</div>
<p>A <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a> is a new type of object. It isn’t a display object, else a logical object you can use with different purposes, especially, for expressing simple and complex behaviors.</p>
<p>Until now, <a class="reference external" href="../scene-editor/user-components.html">user components</a> were the only way you had to add extra functionality to a game object. The <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a> is a more powerful and general tool, that you can use with the same purpose.</p>
<p>Basically, a <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a> is a logical object you can add to an scene, a game object, or another <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a>. But what is even more exciting, is that you can make reusable and extensible <a class="reference external" href="../scene-editor/script-node.html">script nodes</a> in the same way you make reusable and extensible game objects: using <a class="reference external" href="../scene-editor/prefabs.html">prefabs</a>.</p>
<p>This means, you can make a prefab of a <a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a>, add custom properties, create variants of the prefab, create nested prefabs, and append <a class="reference external" href="../scene-editor/script-node.html">script nodes</a> to prefab instances.</p>
<p>This allows expressing complex behaviors combining logical building blocks (<a class="reference external" href="../scene-editor/script-node.html">ScriptNode</a> prefabs) in a hierarchical structure.</p>
<p>This concept of <a class="reference external" href="../scene-editor/script-node.html">script nodes</a> is inspired by the <a class="reference external" href="https://en.wikipedia.org/wiki/Visual_programming_language">visual programming languages</a> and concepts like the <a class="reference external" href="https://en.wikipedia.org/wiki/Behavior_tree_(artificial_intelligence,_robotics_and_control)">behavior tree</a>. However, we don’t pretend to create a complete, full-featured, visual language. Our advice is using the <a class="reference external" href="../scene-editor/script-node.html">script nodes</a> for making the blocks of repeated behaviors in your game. You can use it for dealing with the UI interface, menu screens, intro screens. You can use it in your gameplay, but not by combining a lot of general-purpose blocks, else by combining blocks you did specifically for your gameplay.</p>
<p>An argument about the advantage of using a visual scripting language is that creators with no traditional programming experience can make a game. But our concept with the <a class="reference external" href="../scene-editor/script-node.html">script nodes</a>, is that you, the JavaScript programmer, can implement the script nodes “framework” for your game, and deliver it to the game level designer for connecting the scripts with the game objects and scenes. A good start could be the <a class="reference external" href="http://github.com/PhaserEditor2D/script-nodes-basic">script-nodes-basic</a> project.</p>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="prefab-black-box.html" class="btn btn-neutral float-left" title="Using a prefab as a black box" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="script-node-vs-user-component.html" class="btn btn-neutral float-right" title="Script Nodes vs User Components" 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>