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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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>User code &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="Compiler settings" href="scene-compiler-general-settings.html" />
    <link rel="prev" title="Executing the compiler" href="scene-compiler-executing-compiler.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"><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 current"><a class="reference internal" href="scene-compiler.html">The scene compiler</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="scene-compiler-executing-compiler.html">Executing the compiler</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">User code</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#editing-the-generated-code">Editing the generated code</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scene-compiler-general-settings.html">Compiler settings</a></li>
<li class="toctree-l3"><a class="reference internal" href="scene-compiler-scene-settings.html">Scene settings</a></li>
</ul>
</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="scene-compiler.html">The scene compiler</a></li>
      <li class="breadcrumb-item active">User code</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="user-code">
<h1>User code<a class="headerlink" href="#user-code" title="Link to this heading"></a></h1>
<p>The <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> helps to build game levels, but it is far away to cover all aspects of a game. Especially, the game logic should be implemented by you, writing code.</p>
<p>In <a class="reference external" href="https://phaser.io">Phaser</a> programming, it is common to see, in the same file, code to create the objects of the level (what the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> is good for) and code to handle the interaction between the objects (the game logic, that is not targeted by the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a>).</p>
<p>We designed the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> to allow you to merge the generated code with your code, in the same file.</p>
<p>The concept is simple:</p>
<ul class="simple">
<li><p>The <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> creates the initial JavaScript file.</p></li>
<li><p>The initial file contains protected regions, where the user can insert its code. These regions are delimited by JavaScript comments like <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">START-USER-CODE</span> <span class="pre">*/</span></code> and <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">END-USER-CODE</span> <span class="pre">*/</span></code>.</p></li>
<li><p>You can insert your code inside the protected regions.</p></li>
<li><p>The next time the file is updated by the compiler, the user protected regions are preserved, it means, your code is not changed, only the code generated by the compiler is updated.</p></li>
</ul>
<p>The <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> uses different comments to delimit the user code:</p>
<ul class="simple">
<li><p>From the beginning of the file to the start of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">START</span> <span class="pre">OF</span> <span class="pre">COMPILED</span> <span class="pre">CODE</span> <span class="pre">*/</span></code> comment.</p></li>
<li><p>From the end of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">END</span> <span class="pre">OF</span> <span class="pre">COMPILED</span> <span class="pre">CODE</span> <span class="pre">*/</span></code> comment to the end of the file.</p></li>
<li><p>From the end of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">START-USER-IMPORT</span> <span class="pre">*/</span></code> comment to the start of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">END-USER-IMPORT-CODE</span> <span class="pre">*/</span></code> comment.</p></li>
<li><p>From the end of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">START-USER-CTR-CODE</span> <span class="pre">*/</span></code> comment to the start of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">END-USER-CTR-CODE</span> <span class="pre">*/</span></code> comment.</p></li>
<li><p>From the end of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">START-USER-CODE</span> <span class="pre">*/</span></code> comment to the start of the <code class="docutils literal notranslate"><span class="pre">/*</span> <span class="pre">END-USER-CODE</span> <span class="pre">*/</span></code> comment.</p></li>
</ul>
<p>The next image is an example. Look that you can import a <code class="docutils literal notranslate"><span class="pre">MyUtils</span></code> class and use it in the <code class="docutils literal notranslate"><span class="pre">create()</span></code> method:</p>
<img alt="User code." src="../_images/scene-compiler-user-code-27022022.webp" />
<section id="editing-the-generated-code">
<h2>Editing the generated code<a class="headerlink" href="#editing-the-generated-code" title="Link to this heading"></a></h2>
<p>The code generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a> can be edited in an external editor (like <a class="reference external" href="https://code.visualstudio.com">Visual Studio Code</a>) or using the <a class="reference external" href="https://microsoft.github.io/monaco-editor/">Monaco editor</a> that is built-in in <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a>.</p>
<p>We recommend you to read the <a class="reference external" href="../code-editor/index.html">Code Editor</a> chapter and the <a class="reference external" href="../code-editor/js-editor-advanced-features.html">Advanced JavaScript editing features</a> section.</p>
<p>The <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> provides two commands to quickly edit the code file generated by the <a class="reference external" href="../scene-editor/scene-compiler.html">scene compiler</a>:</p>
<img alt="Commands to edit the Scene Compiler output code." src="../_images/scene-compiler-edit-code-menu-02242021.webp" />
<p>The <strong>Open Output File</strong> command opens the generated file in a new <a class="reference external" href="../code-editor/index.html">Code Editor</a>, in the traditional way.</p>
<p>The <strong>Open Output File in VS Code</strong> (<code class="docutils literal notranslate"><span class="pre">Ctrl+Alt+E</span></code>) command launches a local <a class="reference external" href="https://code.visualstudio.com">Visual Studio Code</a> instance (or any other configured external editor) that opens the generated file.</p>
<p>The <strong>Quick Edit Output File</strong> command (bound to the <code class="docutils literal notranslate"><span class="pre">Q</span></code> key) opens the generated file in a <a class="reference external" href="../code-editor/index.html">Code Editor</a> that is embedded in a modal dialog. This way is perfect for quick modifications, however, intellisense and all the other <a class="reference external" href="https://microsoft.github.io/monaco-editor/">Monaco editor</a> features are enabled, so you have a similar experience in comparison with the traditional way of editing.</p>
<img alt="Quick editing of compiled code." src="../_images/scene-compiler-quick-edit-code-06092020.webp" />
</section>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="scene-compiler-executing-compiler.html" class="btn btn-neutral float-left" title="Executing the compiler" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="scene-compiler-general-settings.html" class="btn btn-neutral float-right" title="Compiler settings" 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>