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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!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>Add an image to the scene &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="Unlock the IDE" href="unlock-ide.html" />
    <link rel="prev" title="Create your first project" href="create-first-project.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 current"><a class="reference internal" href="index.html">First steps</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="download-and-install.html">Download and install</a></li>
<li class="toctree-l2"><a class="reference internal" href="create-first-project.html">Create your first project</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Add an image to the scene</a></li>
<li class="toctree-l2"><a class="reference internal" href="unlock-ide.html">Unlock the IDE</a></li>
<li class="toctree-l2"><a class="reference internal" href="learn-phaser-with-phaser-editor.html">Learn Phaser with Phaser Editor 2D</a></li>
</ul>
</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"><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">First steps</a></li>
      <li class="breadcrumb-item active">Add an image to the scene</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="add-an-image-to-the-scene">
<h1>Add an image to the scene<a class="headerlink" href="#add-an-image-to-the-scene" title="Link to this heading"></a></h1>
<p>Let’s add an image to the <code class="docutils literal notranslate"><span class="pre">Level.scene</span></code> file created by the <strong>Basic JavaScript</strong> project template.</p>
<ol class="arabic simple">
<li><p>To upload an image to the project. Rich-click on the <code class="docutils literal notranslate"><span class="pre">assets</span></code> folder and press the <strong>Upload Files</strong> option of the context menu.</p></li>
</ol>
<blockquote>
<div><img alt="Upload image." src="../_images/first-steps-upload-file-1-04042020.jpg" />
</div></blockquote>
<ol class="arabic simple" start="2">
<li><p>It opens the <strong>Upload Files</strong> dialog. Click on the <strong>Browse</strong> button and select the image file in your computer.</p></li>
</ol>
<blockquote>
<div><img alt="Upload image." src="../_images/first-steps-upload-file-2-04042020.jpg" />
</div></blockquote>
<ol class="arabic simple" start="3">
<li><p>Press the <strong>Upload</strong> button. The image is uploaded to the <code class="docutils literal notranslate"><span class="pre">assets</span></code> folder and shown in the <a class="reference external" href="../workbench/files-view.html">Files view</a>.</p></li>
</ol>
<blockquote>
<div><img alt="Upload image." src="../_images/first-steps-upload-file-3-04042020.jpg" />
</div></blockquote>
<ol class="arabic simple" start="4">
<li><p>Check the new image is selected in the <a class="reference external" href="../workbench/files-view.html">Files view</a>. Look in the <a class="reference external" href="../workbench/inspector-view.html">Inspector view</a>, there are the properties of the image file. In the section <strong>Asset Pack File</strong>, there two buttons to import the image into an <a class="reference external" href="../asset-pack-editor/asset-pack-file.html">Asset Pack file</a>. Click on the <strong>Import image</strong> button and select <strong>Add To /assets/asset-pack.json</strong>.</p></li>
</ol>
<blockquote>
<div><blockquote>
<div><img alt="Add image." src="../_images/first-steps-add-image-1-04042020.jpg" />
</div></blockquote>
<p>The <code class="docutils literal notranslate"><span class="pre">assets/asset-pack.json</span></code> is a <a class="reference external" href="https://phaser.io">Phaser</a> file with the configuration of all the files you can load in a game. The <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> uses it to get the images or any other file information.</p>
<p>You can add the image files to the <a class="reference external" href="../asset-pack-editor/asset-pack-file.html">Asset Pack file</a> using the previous method or opening the <code class="docutils literal notranslate"><span class="pre">assets-pack.json</span></code>  file in the <a class="reference external" href="../asset-pack-editor/index.html">Asset Pack Editor</a>.</p>
</div></blockquote>
<ol class="arabic simple" start="5">
<li><p>Click on the <a class="reference external" href="../scene-editor/index.html">Scene Editor</a> that is open, it will refresh the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> and the new image will be shown in the view.</p></li>
</ol>
<blockquote>
<div><img alt="Add image." src="../_images/first-steps-add-image-2-04042020.jpg" />
</div></blockquote>
<ol class="arabic simple" start="6">
<li><p>Drag the image from the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> and drop it in the middle of the scene. Press the <code class="docutils literal notranslate"><span class="pre">End</span></code> key to move the image to the bottom of the scene. Or right click in the image and select the <strong>Edit</strong> → <strong>Move Bottom</strong> option.</p></li>
</ol>
<blockquote>
<div><p>Save the editor and play the project (<code class="docutils literal notranslate"><span class="pre">F12</span></code>).</p>
<img alt="Add image." src="../_images/first-steps-add-image-3-04042020.jpg" />
</div></blockquote>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>There are a couple of initial steps you have to follow to add an image to the scene. 1) Upload. 2) Add the image to the Asset Pack file. 3) Drag the image from the <a class="reference external" href="../workbench/blocks-view.html">Blocks view</a> and drop it into the scene.</p>
<p>This workflow may be simplified in the future, but for us it is important to make that process transparent, with no custom API or file formats, and make it full compatible with any other third-party tool you can use.</p>
</div>
</section>


           </div>
          </div>
          <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
        <a href="create-first-project.html" class="btn btn-neutral float-left" title="Create your first project" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
        <a href="unlock-ide.html" class="btn btn-neutral float-right" title="Unlock the IDE" 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>