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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
							<!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 libraries &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="Creating a Script Node" href="script-node-create.html" />
    <link rel="prev" title="Script Nodes vs User Components" href="script-node-vs-user-component.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 current"><a class="current reference internal" href="#">Script Nodes libraries</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#installing-a-script-library">Installing a script library</a></li>
</ul>
</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"><a href="script-node.html">Script Nodes</a></li>
      <li class="breadcrumb-item active">Script Nodes libraries</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-libraries">
<h1>Script Nodes libraries<a class="headerlink" href="#script-nodes-libraries" title="Link to this heading"></a></h1>
<p>In v3.65 of <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> we introduced the scripts libraries. A script library is a Node module you can install in your project. It works just like any other Node library. You can create common behaviors for your games and distribute them as a Node library.</p>
<p>In <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> we created a few libraries with basic behaviors. We should keep working on these libraries adding more behaviors:</p>
<ul class="simple">
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-core">&#64;phasereditor2d/scripts-core</a>: Contains the basic scripts and user components for every game or any other script libraries. It is included by default in all the Webpack-based project templates.</p></li>
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-simple-animations">&#64;phasereditor2d/scripts-simple-animations</a>: Contains a few scripts and user components for performing simple animations, like pushing a button, or fade-in an object.</p></li>
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-audio">&#64;phasereditor2d/scripts-simple-animations</a>: Contains a few scripts and user components for audio playback.</p></li>
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-arcade">&#64;phasereditor2d/scripts-arcade</a>: Contains a few scripts for changing the physics of objects.</p></li>
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-camera">&#64;phasereditor2d/scripts-camera</a>: Contains scripts for handling the Camera, like applying camera effects or starting following an object.</p></li>
<li><p><a class="reference external" href="https://github.com/PhaserEditor2D/phasereditor2d-scripts-timer">&#64;phasereditor2d/scripts-timer</a>: Contains scripts for performing delayed actions.</p></li>
</ul>
<p>Please, check every repository for detailed information.</p>
<section id="installing-a-script-library">
<h2>Installing a script library<a class="headerlink" href="#installing-a-script-library" title="Link to this heading"></a></h2>
<p>As we mentioned before, the script libraries are just Node modules, and you install them as any other node module:</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>npm<span class="w"> </span>install<span class="w"> </span>@phasereditor2d/scripts-camera
</pre></div>
</div>
<p>The next step is to add the library to the <code class="docutils literal notranslate"><span class="pre">scripts</span></code> section of the <code class="docutils literal notranslate"><span class="pre">phasereditor2d.config.json</span></code> file:</p>
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="p">{</span>
<span class="w">    </span><span class="s2">&quot;plugins&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w">    </span><span class="s2">&quot;scripts&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-core&quot;</span><span class="p">,</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-simple-animations&quot;</span><span class="p">,</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-audio&quot;</span><span class="p">,</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-arcade&quot;</span><span class="p">,</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-camera&quot;</span><span class="p">,</span>
<span class="w">        </span><span class="s2">&quot;@phasereditor2d/scripts-timer&quot;</span>
<span class="w">    </span><span class="p">],</span>
<span class="w">    </span><span class="s2">&quot;skip&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">        </span><span class="s2">&quot;dist&quot;</span>
<span class="w">    </span><span class="p">],</span>
<span class="w">    </span><span class="s2">&quot;playUrl&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;http://localhost:8080&quot;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>You can check the libraries are installed in the <a class="reference external" href="../workbench/files-view.html">Files view</a>:</p>
<img alt="Script libraries." src="../_images/scene-editor-script-nodes-lirabries-files-view-20231205.webp" />
<p>If you look inside the libraries, it contains scene and user component files just like in any project. You can browse, open, and use them as any other script node in your project. Just try not to modify them.</p>
<p>Also, you will notice the script nodes do an extensive usage of the <a class="reference external" href="display-properties.html">scene display name</a> and the <a class="reference external" href="prefab-display-properties.html">prefab instance display name</a>.</p>
<p>By default, the <code class="docutils literal notranslate"><span class="pre">node_modules</span></code> folder is excluded from the <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> project. However, when you install a script library, it will include in the project only the files related to the libraries. It means, please, <a class="reference external" href="../misc/resources-filtering.html">keep excluding the Node modules</a> from your game project.</p>
<section id="script-node-libraries-for-vanilla-javascript">
<h3>Script Node libraries for vanilla JavaScript<a class="headerlink" href="#script-node-libraries-for-vanilla-javascript" title="Link to this heading"></a></h3>
<p>Many of you like to code or prototype your games with vanilla JavaScript, with no bundler or compiler. You are covered. In the <code class="docutils literal notranslate"><span class="pre">browser</span></code> folder of every script library, there are the files you can include in your project. Please, read the README file of the library for detailed instructions.</p>
<p>When you “copy” a library into your project, there is a <code class="docutils literal notranslate"><span class="pre">library.txt</span></code> file that contains the version of the library. Also, the editor uses that file to present the library files with a lighter color.</p>
</section>
</section>
</section>


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