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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!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>Setting the root folder for the asset files &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="Organizing the Asset Pack files" href="organizing-the-assets.html" />
    <link rel="prev" title="Importing JavaScript files" href="import-scripts.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 current"><a class="reference internal" href="index.html">Asset Pack Editor</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="create-asset-pack-file.html">Create a new Asset Pack file</a></li>
<li class="toctree-l2"><a class="reference internal" href="asset-pack-file.html">Asset Pack File</a></li>
<li class="toctree-l2"><a class="reference internal" href="editor-content-layout.html">Editor content layout</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="add-file.html">Importing files</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="add-file-with-add-button.html">Importing using the Main toolbar</a></li>
<li class="toctree-l3"><a class="reference internal" href="import-from-blocks-view.html">Importing from the Blocks view</a></li>
<li class="toctree-l3"><a class="reference internal" href="import-from-files-view.html">Importing from the Files view</a></li>
<li class="toctree-l3"><a class="reference internal" href="import-scripts.html">Importing JavaScript files</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Setting the root folder for the asset files</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="organizing-the-assets.html">Organizing the Asset Pack files</a></li>
<li class="toctree-l2"><a class="reference internal" href="outline-view.html">Outline view integration</a></li>
<li class="toctree-l2"><a class="reference internal" href="inspector-view.html">Inspector view integration</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../scene-editor/index.html">Scene Editor</a></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">Asset Pack Editor</a></li>
          <li class="breadcrumb-item"><a href="add-file.html">Importing files</a></li>
      <li class="breadcrumb-item active">Setting the root folder for the asset files</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="setting-the-root-folder-for-the-asset-files">
<h1>Setting the root folder for the asset files<a class="headerlink" href="#setting-the-root-folder-for-the-asset-files" title="Link to this heading"></a></h1>
<p>When you add an entry for a new file to an Asset Pack, the editor uses, as the URL, the project’s relative path to the file. For example, if you add an image file with full path <code class="docutils literal notranslate"><span class="pre">&lt;project</span> <span class="pre">root&gt;/assets/background.png</span></code>, then the URL in the Asset Pack entry is set to <code class="docutils literal notranslate"><span class="pre">assets/background.png</span></code>.</p>
<p>That’s fine for a lot of cases. However, if you use web bundlers, like <a class="reference external" href="https://webpack.js.org">WebpackJS</a> or Parcel, it could be different. Maybe the relative path of the assets is not the same in the project and the website.</p>
<p>Let’s see an example. The <a class="reference external" href="https://webpack.js.org">WebpackJS</a> project template of <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> has this layout:</p>
<img alt="Project layout of the Webpack template." src="../_images/asset-pack-static-folder-webpack-03312021.webp" />
<p>Notice that if you add the <code class="docutils literal notranslate"><span class="pre">FufuSuperDino.png</span></code> file to an asset pack, it sets the URL of the image to <code class="docutils literal notranslate"><span class="pre">static/assets/FufuSuperDino.png</span></code>. However, the <code class="docutils literal notranslate"><span class="pre">static</span></code> folder is not present in the distribution build (in the website). It only copies its content to the distribution build folder. So, when you open the game in the browser, the path of the image file is <code class="docutils literal notranslate"><span class="pre">assets/FufuSuperDino.png</span></code> (without the <code class="docutils literal notranslate"><span class="pre">static</span></code> element).</p>
<p>Now, <a class="reference external" href="https://phasereditor2d.com">Phaser Editor 2D</a> allows changing the root folder for the assets. If you add an empty <code class="docutils literal notranslate"><span class="pre">publicroot</span></code> file, in the <code class="docutils literal notranslate"><span class="pre">static</span></code> folder, then the editor will build the file URL with the relative path to the <code class="docutils literal notranslate"><span class="pre">&lt;project</span> <span class="pre">root&gt;/static</span></code> folder:</p>
<img alt="the publicroot file." src="../_images/asset-pack-publicroot-file-03312021.webp" />
<p>The rule is simple. When you add an entry to an Asset Pack for a new file, it builds the file’s URL using the relative path to a root folder. To find the root folder, it checks each parent folder of the Asset Pack file until it finds one containing a <code class="docutils literal notranslate"><span class="pre">publicroot</span></code> file.  That folder is then taken as the root folder to build the URL. If no <code class="docutils literal notranslate"><span class="pre">publicroot</span></code> file is found, it defaults to the root folder for the project.</p>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="import-scripts.html" class="btn btn-neutral float-left" title="Importing JavaScript files" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="organizing-the-assets.html" class="btn btn-neutral float-right" title="Organizing the Asset Pack files" 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>