Skip to content

Commit 165a5d0

Browse files
PhaserEditor2DPhaserEditor2D
committed
(v1) Update Quick Start guide.
1 parent 6579bc5 commit 165a5d0

File tree

1 file changed

+172
-14
lines changed

1 file changed

+172
-14
lines changed

‎source/phasereditor/phasereditor.help/html/quick-start/texture-packer.html

Lines changed: 172 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@
44
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
55
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
66
<head>
7+
8+
<!-- Global site tag (gtag.js) - Google Analytics -->
9+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-67206336-2"></script>
10+
<script>
11+
window.dataLayer = window.dataLayer || [];
12+
function gtag(){dataLayer.push(arguments);}
13+
gtag('js', new Date());
14+
15+
gtag('config', 'UA-67206336-2');
16+
</script>
17+
718
<meta charset="utf-8">
819

920
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,6 +33,12 @@
2233

2334

2435

36+
37+
38+
39+
40+
41+
2542
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
2643

2744

@@ -30,23 +47,143 @@
3047
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
3148

3249

33-
50+
51+
<link rel="index" title="Index"
52+
href="genindex.html"/>
53+
<link rel="search" title="Search" href="search.html"/>
54+
<link rel="top" title="Phaser Editor Help" href="index.html"/>
55+
<link rel="next" title="Optimize The PNG Image Files" href="optipng.html"/>
56+
<link rel="prev" title="The Preview Window" href="preview-window.html"/>
3457

3558

3659
<script src="_static/js/modernizr.min.js"></script>
3760

3861
</head>
3962

40-
<body role="document" style="background:white;font-family: serif;color:black;">
63+
<body class="wy-body-for-nav" role="document">
4164

4265

43-
44-
<section data-toggle="" class="">
66+
<div class="wy-grid-for-nav">
67+
68+
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
69+
<div class="wy-side-scroll">
70+
<div class="wy-side-nav-search">
71+
72+
73+
74+
<a href="index.html" class="icon icon-home"> Phaser Editor
75+
76+
77+
78+
<img src="_static/logo.png" class="logo" />
79+
80+
</a>
81+
82+
83+
84+
85+
<div class="version">
86+
1.5.1
87+
</div>
88+
89+
90+
91+
92+
<div role="search">
93+
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
94+
<input type="text" name="q" placeholder="Search docs" />
95+
<input type="hidden" name="check_keywords" value="yes" />
96+
<input type="hidden" name="area" value="default" />
97+
</form>
98+
</div>
99+
100+
101+
</div>
102+
103+
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
104+
105+
106+
107+
108+
109+
110+
<p class="caption"><span class="caption-text">Contents:</span></p>
111+
<ul class="current">
112+
<li class="toctree-l1"><a class="reference internal" href="first-steps.html">First Steps</a></li>
113+
<li class="toctree-l1"><a class="reference internal" href="assets-manager.html">Assets Management</a></li>
114+
<li class="toctree-l1"><a class="reference internal" href="canvas.html">Canvas, The Scene Editor</a></li>
115+
<li class="toctree-l1"><a class="reference internal" href="jseditor.html">Coding The Game: The JavaScript Editor</a></li>
116+
<li class="toctree-l1"><a class="reference internal" href="chains.html">Chains: Search on the Phaser Docs</a></li>
117+
<li class="toctree-l1"><a class="reference internal" href="preview-window.html">The Preview Window</a></li>
118+
<li class="toctree-l1 current"><a class="current reference internal" href="#">Texture Packing Editor</a><ul>
119+
<li class="toctree-l2"><a class="reference internal" href="#create-the-atlas">Create the atlas</a></li>
120+
<li class="toctree-l2"><a class="reference internal" href="#tuning-the-atlas-parameters">Tuning the atlas parameters</a></li>
121+
<li class="toctree-l2"><a class="reference internal" href="#multiple-pages">Multiple pages</a></li>
122+
<li class="toctree-l2"><a class="reference internal" href="#the-side-panel">The side panel</a></li>
123+
<li class="toctree-l2"><a class="reference internal" href="#update-the-atlas-with-external-changes">Update the atlas with external changes</a></li>
124+
</ul>
125+
</li>
126+
<li class="toctree-l1"><a class="reference internal" href="optipng.html">Optimize The PNG Image Files</a></li>
127+
<li class="toctree-l1"><a class="reference internal" href="audio-sprites.html">Audio Sprites Editor</a></li>
128+
<li class="toctree-l1"><a class="reference internal" href="update.html">Update and Upgrade</a></li>
129+
</ul>
130+
131+
132+
133+
</div>
134+
</div>
135+
</nav>
136+
137+
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
138+
139+
140+
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
141+
142+
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
143+
<a href="index.html">Phaser Editor</a>
144+
145+
</nav>
45146

46147

47148

48-
<div class="" style="padding:1em">
149+
<div class="wy-nav-content">
49150
<div class="rst-content">
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
166+
167+
<div role="navigation" aria-label="breadcrumbs navigation">
168+
169+
<ul class="wy-breadcrumbs">
170+
171+
<li><a href="index.html">Docs</a> &raquo;</li>
172+
173+
<li>Texture Packing Editor</li>
174+
175+
176+
<li class="wy-breadcrumbs-aside">
177+
178+
179+
180+
</li>
181+
182+
</ul>
183+
184+
185+
<hr/>
186+
</div>
50187
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
51188
<div itemprop="articleBody">
52189

@@ -75,13 +212,13 @@ <h2>Create the atlas<a class="headerlink" href="#create-the-atlas" title="Permal
75212
<div class="section" id="tuning-the-atlas-parameters">
76213
<h2>Tuning the atlas parameters<a class="headerlink" href="#tuning-the-atlas-parameters" title="Permalink to this headline"></a></h2>
77214
<p>Texture MAPS can be used in different objects of your game like sprites, tile sprites, sprite-sheets, etc.. Often you should adjust the parameters of the packer to get a texture applicable to the different functions.</p>
78-
<p>To change these parameters click the &#8220;settings icon&#8221; in the editor toolbar. It opens the Settings dialog:</p>
215+
<p>To change these parameters click the “settings icon” in the editor toolbar. It opens the Settings dialog:</p>
79216
<img alt="Atlas editor settings." src="_images/AtlasEditorSettings.png" />
80217
<p>The settings are:</p>
81218
<table border="1" class="docutils">
82219
<colgroup>
83-
<col width="8%" />
84-
<col width="92%" />
220+
<col width="7%" />
221+
<col width="93%" />
85222
</colgroup>
86223
<thead valign="bottom">
87224
<tr class="row-odd"><th class="head">Parameter</th>
@@ -110,26 +247,29 @@ <h2>Tuning the atlas parameters<a class="headerlink" href="#tuning-the-atlas-par
110247
<tr class="row-even"><td><code class="docutils literal"><span class="pre">Grid</span></code></td>
111248
<td>To pack the images in a uniform grid. You can use this together with the Indexes option to create spritesheets.</td>
112249
</tr>
250+
<tr class="row-odd"><td><code class="docutils literal"><span class="pre">Use</span> <span class="pre">folders</span> <span class="pre">name</span></code></td>
251+
<td>Prepend the parent folders name to the frames name. Many times developers group the source images in different folders with a special meaning, for example, the images are grouped in an <code class="docutils literal"><span class="pre">Attacking</span></code> and <code class="docutils literal"><span class="pre">Idle</span></code> folders, so, by enabling this parameter, the names of the folders are prepended to the name of the frames: <code class="docutils literal"><span class="pre">Attacking_001</span></code> .. <code class="docutils literal"><span class="pre">Attacking_010</span></code>, <code class="docutils literal"><span class="pre">Idle_001</span></code> .. <code class="docutils literal"><span class="pre">Idle_010</span></code>.</td>
252+
</tr>
113253
</tbody>
114254
</table>
115255
</div>
116256
<div class="section" id="multiple-pages">
117257
<h2>Multiple pages<a class="headerlink" href="#multiple-pages" title="Permalink to this headline"></a></h2>
118-
<p>As we mentioned before, it is possible that one texture has no enough space for all the sprites, then many &#8220;pages&#8221; or textures are generated to place the remaining sprites.</p>
258+
<p>As we mentioned before, it is possible that one texture has no enough space for all the sprites, then many “pages” or textures are generated to place the remaining sprites.</p>
119259
<p>When this happens the editor creates multiple tabs to show all the textures and generates the Phaser atlas files with a number suffix. For example, if the packer generates two textures we get the files <cite>myatlas1.json</cite>, <cite>myatlas1.png</cite>, <cite>myatlas2.json</cite> and <cite>myatlas2.png</cite>:</p>
120260
<img alt="The source images can be packed in more than one texture maps." src="_images/AtlasMultiPage.png" />
121261
</div>
122262
<div class="section" id="the-side-panel">
123263
<h2>The side panel<a class="headerlink" href="#the-side-panel" title="Permalink to this headline"></a></h2>
124-
<p>Close to the settings icon, there is the &#8220;side panel&#8221; icon. By default the side panel is hidden but you can show it selecting that icon.</p>
264+
<p>Close to the settings icon, there is the “side panel” icon. By default the side panel is hidden but you can show it selecting that icon.</p>
125265
<p>This panel shows the name of the sprites and a small window with the sprites and pages information.</p>
126266
<p>When you click on a sprite in the right panel (canvas), that sprite is selected in the side panel, and when you select a sprite in the side panel, it is highlighted in the texture canvas.</p>
127-
<p>You can delete some sprites by selecting it and pressing the <cite>DEL</cite> key or clicking on the delete icon that is placed in the editor&#8217;s toolbar. Remember each time you change the atlas you should save it to generate the Phaser files.</p>
267+
<p>You can delete some sprites by selecting it and pressing the <cite>DEL</cite> key or clicking on the delete icon that is placed in the editor’s toolbar. Remember each time you change the atlas you should save it to generate the Phaser files.</p>
128268
<img alt="Side panel." src="_images/AtlasSidePanel.png" />
129269
</div>
130270
<div class="section" id="update-the-atlas-with-external-changes">
131271
<h2>Update the atlas with external changes<a class="headerlink" href="#update-the-atlas-with-external-changes" title="Permalink to this headline"></a></h2>
132-
<p>In the editor&#8217;s toolbar, you can see a &#8220;gear&#8221; icon, click it to re-build the atlas. When you change the source image files then you should rebuild the atlas to regenerate the texture, do this by pressing that &#8220;gear&#8221; icon.</p>
272+
<p>In the editor’s toolbar, you can see a “gear” icon, click it to re-build the atlas. When you change the source image files then you should rebuild the atlas to regenerate the texture, do this by pressing that “gear” icon.</p>
133273
<p>When you rebuild the atlas, the editor shows a dialog to confirm that you want to save it, if you accept, then the atlas is saved and the Phaser atlas files are generated.</p>
134274
</div>
135275
</div>
@@ -141,6 +281,16 @@ <h2>Update the atlas with external changes<a class="headerlink" href="#update-th
141281
</div>
142282
</div>
143283
<footer>
284+
285+
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
286+
287+
<a href="optipng.html" class="btn btn-neutral float-right" title="Optimize The PNG Image Files" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
288+
289+
290+
<a href="preview-window.html" class="btn btn-neutral" title="The Preview Window" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
291+
292+
</div>
293+
144294

145295
<hr/>
146296

@@ -167,7 +317,7 @@ <h2>Update the atlas with external changes<a class="headerlink" href="#update-th
167317
<script type="text/javascript">
168318
var DOCUMENTATION_OPTIONS = {
169319
URL_ROOT:'./',
170-
VERSION:'1.5.0',
320+
VERSION:'1.5.1',
171321
COLLAPSE_INDEX:false,
172322
FILE_SUFFIX:'.html',
173323
HAS_SOURCE: true,
@@ -183,7 +333,15 @@ <h2>Update the atlas with external changes<a class="headerlink" href="#update-th
183333

184334

185335
<script type="text/javascript" src="_static/js/theme.js"></script>
186-
336+
187337

338+
339+
340+
<script type="text/javascript">
341+
jQuery(function () {
342+
SphinxRtdTheme.StickyNav.enable();
343+
});
344+
</script>
345+
188346
</body>
189347
</html>

0 commit comments

Comments
 (0)