|
6 | 6 |
|
7 | 7 | <body> |
8 | 8 |
|
| 9 | + |
9 | 10 | <h2 class="title" itemprop="headline"><a href="http://phasereditor.boniatillo.com/blog/quick-start/050-texture-atlas">Texture Atlas editor</a></h2> |
10 | 11 | <div class="desc text-left" itemprop="articleBody"> |
11 | 12 | <p>Texture atlas is an important resource that developers have to improve the performance of their games.</p> |
12 | 13 |
|
13 | 14 | <p><a href="https://www.youtube.com/watch?v=3YQ-sFIUZxE&index=6&list=PLB8gI_5U0MvCJuhPv-LBdi_a9PQxYxFqK">Watch a demo video</a></p> |
14 | 15 |
|
15 | | -<p>In Phaser Editor we give full support to texture atlas, we provide |
16 | | -the Atlas Editor to do the job. There are other external tools that you |
17 | | -can use but we think that integrating a texture packer in Phaser Editor |
18 | | -is part of our philosophy of deliver a complete and integrated |
19 | | -development environment.</p> |
| 16 | +<p>In Phaser Editor we give full support to texture atlas, we provide the Atlas Editor to do the job. There are other external tools that you can use but we think that integrating a texture packer in Phaser Editor is part of our philosophy of deliver a complete and integrated development environment.</p> |
20 | 17 |
|
21 | 18 | <p>Our Atlas Editor uses the <a href="https://github.com/libgdx/libgdx/tree/master/extensions/gdx-tools">LibGDX Texture Packer</a>, it features the MaxRect algorithm and can be tuned to satisfy the requirements of the majority of the games.</p> |
22 | 19 |
|
23 | 20 | <h2>Create the atlas</h2> |
24 | 21 |
|
25 | 22 | <p>To create an atlas click on <code>File > New > Atlas Generator File</code>, it opens a dialog to set the name of the atlas and the container folder. This container folder should be a sub-folder of <code>assets</code> folder.</p> |
26 | 23 |
|
27 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151021181700-NewAtlasWizard.png" alt="enter image description here"></p> |
| 24 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151021181700-NewAtlasWizard.png" alt="enter image description here"></p> |
28 | 25 |
|
29 | | -<p>When you press <code>Finish</code>, a file <code>myatlas.atlas</code> |
30 | | - is created and the Atlas Editor is open to edit it. This file does not |
31 | | -contains any relation with Phaser, else it contains Phaser Editor |
32 | | -related stuff, like the atlas settings and the path of the source |
33 | | -images. So you should exclude it from a game build, but keep it on your |
34 | | - game development source.</p> |
| 26 | +<p>When you press <code>Finish</code>, a file <code>myatlas.atlas</code> is created and the Atlas Editor is open to edit it. This file does not contains any relation with Phaser, else it contains Phaser Editor related stuff, like the atlas settings and the path of the source images. So you should exclude it from a game build, but keep it on your game development source.</p> |
35 | 27 |
|
36 | 28 | <p>One time the atlas file is created and the Atlas Editor is open to edit it then you can start adding images to the atlas.</p> |
37 | 29 |
|
38 | 30 | <p>To add the image files to the atlas follow these steps:</p> |
39 | 31 |
|
40 | 32 | <ol> |
41 | 33 | <li>Select the image files in the Project Explorer.</li> |
42 | | -<li>Drag the files and drop them into the atlas editor. You can also |
43 | | -drop complete folders, in that case it adds the image files in depth.</li> |
| 34 | +<li>Drag the files and drop them into the atlas editor. You can also drop complete folders, in that case it adds the image files in depth.</li> |
44 | 35 | <li>Save the atlas file (<code>CTRL+S</code> or <code>File > Save</code>). It generates the Phaser atlas JSON file (with the JSON Hash format) and the texture image (PNG) file.</li> |
45 | 36 | </ol> |
46 | 37 |
|
47 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151022043135-AtlasEditor_AddFiles.png" alt="Atlas Editor: add files"></p> |
| 38 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151022043135-AtlasEditor_AddFiles.png" alt="Atlas Editor: add files"></p> |
48 | 39 |
|
49 | | -<p>The last step is very important, remember <code>myatlas.atlas</code> |
50 | | -file is a specific Phaser Editor file, it is a configuration file used |
51 | | -to generate the real JSON atlas and PNG texture file. So when you save |
52 | | -the editor's content a <code>myatlas.json</code> and <code>myatlas.png</code> files are generated. These are the files you should load in your game. Also note the source images are not placed under the <code>assets</code> folder else under the <code>Design</code> folder. Phaser Editor creates the <code>Design</code> |
53 | | - folder and encourages the developer to put there the files are not |
54 | | -included in the game but are used to generate the game assets, like is |
55 | | -the case of the atlas source images.</p> |
| 40 | +<p>The last step is very important, remember <code>myatlas.atlas</code> file is a specific Phaser Editor file, it is a configuration file used to generate the real JSON atlas and PNG texture file. So when you save the editor's content a <code>myatlas.json</code> and <code>myatlas.png</code> files are generated. These are the files you should load in your game. Also note the source images are not placed under the <code>assets</code> folder else under the <code>Design</code> folder. Phaser Editor creates the <code>Design</code> folder and encourages the developer to put there the files are not included in the game but are used to generate the game assets, like is the case of the atlas source images.</p> |
56 | 41 |
|
57 | 42 | <p>To load the atlas in your game you can use the <code>Phaser.Loader.atlasJSONHash()</code> method or load the <a href="http://phasereditor.boniatillo.com/blog/quick-start/020-asset-pack">Asset Pack</a> file.</p> |
58 | 43 |
|
59 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151022051745-AtlasEditor_GenerateFiles.png" alt="Atlas Editor: save and generate files."></p> |
| 44 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151022051745-AtlasEditor_GenerateFiles.png" alt="Atlas Editor: save and generate files."></p> |
60 | 45 |
|
61 | 46 | <h2>Tuning the atlas parameters</h2> |
62 | 47 |
|
63 | | -<p>Atlas textures can be used in different objects of your game like |
64 | | -sprites, tile sprites, sprite-sheets, etc.. Often you should adjust the |
65 | | -parameters of the packer to get a texture applicable to the different |
66 | | -functions.</p> |
| 48 | +<p>Atlas textures 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> |
67 | 49 |
|
68 | 50 | <p>To change these parameter click the "wrench icon" in the editor toolbar. It opens the Settings dialog:</p> |
69 | 51 |
|
70 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151022053313-AtlasEditor_Settings.png" alt="Atlas Editor: settings"></p> |
| 52 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151022053313-AtlasEditor_Settings.png" alt="Atlas Editor: settings"></p> |
71 | 53 |
|
72 | 54 | <p>The settings are:</p> |
73 | 55 |
|
74 | | -<ol> |
75 | | -<li><strong>Min/Max Size</strong>: to change the size of the texture |
76 | | -image. There are cases where the editor generates more than one Phaser |
77 | | -(JSON) atlas files. It is because the texture has no space for all |
78 | | -images so it creates another atlas to put there the remaining images. |
79 | | -However you can change the max size of the texture to make space for all |
80 | | - the sprites.</li> |
81 | | -<li><strong>Size constraints</strong>: you can select <code>Any Size</code> (default) or <code>POT (Power of 2)</code>. |
82 | | - In the second case the editor generates a texture with a size power of |
83 | | -2. In some platforms this kind of textures performs better.</li> |
84 | | -<li><strong>Padding</strong>: it controls the spacing between the |
85 | | -sprites. It is useful to remove artifacts from sprites animations, tile |
86 | | -sprites, in general when the source images has color pixels in the |
87 | | -borders. By default it puts 2.</li> |
88 | | -<li><strong>Strip white spaces</strong>: to remove the extra space of |
89 | | -sprites. If your source images have extra space (transparent areas) |
90 | | -around the picture, then activating these parameters the editor |
91 | | -generates a texture that removes that spaces and a JSON file that |
92 | | -specify to Phaser to render the sprites with the right spacing. By |
93 | | -default these parameters are on.</li> |
94 | | -</ol> |
| 56 | +<ul> |
| 57 | +<li><strong>Min/Max Size</strong>: to change the size of the texture image. There are cases where the editor generates more than one Phaser (JSON) atlas files. It is because the texture has no space for all images so it creates another atlas to put there the remaining images. However you can change the max size of the texture to make space for all the sprites.</li> |
| 58 | +<li><strong>Size constraints</strong>: you can select <code>Any Size</code> (default) or <code>POT (Power of 2)</code>. In the second case the editor generates a texture with a size power of 2. In some platforms this kind of textures performs better.</li> |
| 59 | +<li><strong>Padding</strong>: it controls the spacing between the sprites. It is useful to remove artifacts from sprites animations, tile sprites, in general when the source images has color pixels in the borders. By default it puts 2.</li> |
| 60 | +<li><strong>Strip white spaces</strong>: to remove the extra space of sprites. If your source images have extra space (transparent areas) around the picture, then activating these parameters the editor generates a texture that removes that spaces and a JSON file that specify to Phaser to render the sprites with the right spacing. By default these parameters are on.</li> |
| 61 | +<li><strong>Use indexes</strong>: to sort the sprites by using a <code>_01.png</code> sufix in the source files.</li> |
| 62 | +<li><strong>Alias</strong>: equal images are packed once.</li> |
| 63 | +<li><strong>Grid</strong>: to pack the images in a uniform grid. You can use this together with the Indexes option to create spritesheets.</li> |
| 64 | +</ul> |
95 | 65 |
|
96 | 66 | <h2>Multiple pages</h2> |
97 | 67 |
|
98 | | -<p>As we mentioned before, it is possible that one texture has no enough |
99 | | - space for all the sprites, then many "pages" or textures are generated |
100 | | -to place the remaining sprites.</p> |
| 68 | +<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> |
101 | 69 |
|
102 | | -<p>When this happens the editor creates multiple tabs to show all the |
103 | | -textures and generates the Phaser atlas files with a number suffix. For |
104 | | -example, if the packer generates two textures we get the files <code>myatlas1.json</code>, <code>myatlas1.png</code>, <code>myatlas2.json</code> and <code>myatlas2.png</code>:</p> |
| 70 | +<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 <code>myatlas1.json</code>, <code>myatlas1.png</code>, <code>myatlas2.json</code> and <code>myatlas2.png</code>:</p> |
105 | 71 |
|
106 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151022062952-AtlasEditor_MultiplePages.png" alt="Atlas Editor: multiple pages"></p> |
| 72 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151022062952-AtlasEditor_MultiplePages.png" alt="Atlas Editor: multiple pages"></p> |
107 | 73 |
|
108 | 74 | <h2>The side panel</h2> |
109 | 75 |
|
110 | | -<p>Close to the wrench tool icon there is the "side panel" icon. By |
111 | | -default the side panel is hidden but you can show it selecting that |
112 | | -icon.</p> |
| 76 | +<p>Close to the wrench tool icon there is the "side panel" icon. By default the side panel is hidden but you can show it selecting that icon.</p> |
113 | 77 |
|
114 | 78 | <p>This panel shows the name of the sprites and a small window with the sprites and pages information.</p> |
115 | 79 |
|
116 | | -<p>When you click on a sprite in the right panel (canvas), that sprite |
117 | | -is selected in the side panel, and when you select a sprite in the side |
118 | | -panel, it is highlighted in the texture canvas.</p> |
| 80 | +<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> |
119 | 81 |
|
120 | | -<p>You can delete some sprites by selecting it and pressing the <code>DEL</code> |
121 | | - key or clicking on the delete icon that is placed in the editor's |
122 | | -toolbar. Remember each time you change the atlas you should save it to |
123 | | -generate the Phaser files.</p> |
| 82 | +<p>You can delete some sprites by selecting it and pressing the <code>DEL</code> 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> |
124 | 83 |
|
125 | | -<p><img src="Texture%20Atlas%20editor%20-%20Phaser%20Editor%20Blog_files/20151022084036-AtlasEditor_SidePanel.png" alt="Atlas Editor: side panel"></p> |
| 84 | +<p><img src="./Texture Atlas editor - Phaser Editor Blog_files/20151022084036-AtlasEditor_SidePanel.png" alt="Atlas Editor: side panel"></p> |
126 | 85 |
|
127 | 86 | <h2>Update the atlas with external changes</h2> |
128 | 87 |
|
129 | | -<p>In the editor's toolbar you can see a "gear" icon, click it to |
130 | | -re-build the atlas. When you change the source image files then you |
131 | | -should rebuild the atlas to regenerate the texture, do this by pressing |
132 | | -that "gear" icon.</p> |
| 88 | +<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> |
133 | 89 |
|
134 | | -<p>When you rebuild the atlas the editor shows a dialog to confirm that |
135 | | -you want to save the atlas, if you accept, then the atlas is saved and |
136 | | -the Phaser atlas files are generated.</p> |
| 90 | +<p>When you rebuild the atlas the editor shows a dialog to confirm that you want to save the atlas, if you accept, then the atlas is saved and the Phaser atlas files are generated.</p> |
137 | 91 | </div><!--//desc--> |
138 | 92 |
|
139 | 93 | </body> |
|
0 commit comments