Home › Page › Tutorials – The Sprite Atlas & Nine-Slicing

Tutorials – The Sprite Atlas & Nine-Slicing

Revision for “Tutorials – The Sprite Atlas & Nine-Slicing” created on 6 May, 2013 @ 21:43 [Autosave]

Tutorials - The Sprite Atlas & Nine-Slicing
<h2>The Sprite Atlas &amp; Definition</h2> In the last two tutorials, we used <a title="UghSpriteDefinition" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughspritedefinition/">Sprite Definitions</a> without really knowing what they were or how to make them. Well, now we are going to learn two ways to make them from any image file or files, so that you can use your own art assets as <a title="UghSprite" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughsprite/">UghSprites</a> in the Ugh system. You can download the project for this tutorial <span style="text-decoration: underline;">here</span>. <h4>Part 1 - Creating a Sprite Definition</h4> You can either follow along with the video, or step through the written tutorial below. <iframe src="http://www.youtube.com/embed/VoKo8ZsdGCk?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe> Here we will create a Sprite Definition for any arbitrary image file you want to use with your Ugh elements. <ol> <li>Import any image you would like to use for a button or sprite into the project. Highlight this image.</li> <li>Right-click on the image and select "Ugh-&gt;Generate Ugh Sprite Definition From Selected Textures"</li> <li>Watch as a sprite definition is created for you in the project view! It may take a few minutes, depending on how big the image is and how fast your computer is. Note: Sprite Definitions can never exist in the hierarchy view. They are only used by UghSprite type objects, never seen on their own as GameObjects.</li> </ol> <h4>Part 2 - Creating a Sprite Atlas</h4> If you have a lot of individually-created Sprite Definitions in your scene, you are going to have a lot of separate materials and, therefore, a lot of draw calls. To cut down on the number of draw calls and organize all your Sprite Definitions, you can combine multiple images into a single material. This is how you do it. <ol> <li><span style="font-size: 1em;">Create a folder in the Project view and put all the image files that you want Sprite Definitions for into it. All of the images in this folder will be put onto a single Sprite Atlas.  (Note that a Sprite Atlas generally only holds up to 1024 x 1024 pixels of information.  If you have more images than will fit in this space, separating the images into multiple Sprite Atlases.)</span></li> <li>Highlight the folder you wish to atlas and then right-click and select "Ugh-&gt;Generate Ugh Sprite Atlas From Folder"</li> <li>Watch as a Sprite Atlas is created.</li> </ol> Note that the file structure for the created Sprite Definitions and related files is the same whether you create a Sprite Definition from a single texture or from a folder. The SpriteAtlas folder contains one Sprite Atlas image file for each separate resolution you intend to support (and a material for each,) the Settings file for the Sprite Atlas, the folder for the Sprite Definitions, and the folder for the Sprite Prototypes that the Sprite Definitions make use of. For now, remember the Sprite Definitions folder, you will use this most often. <strong>Part 3 - Advanced: SpriteAtlas Settings files</strong> If Parts 1 and 2 left you with some Sprite Definitions and Atlases that you are happy with, you don't need this part. This part is for people who want to really try to get the most out of the customization and functionality that UGH Sprite Atlasing offers. When a SpriteAtlas is generated, so is a SpriteAtlas Settings file. If you are building a brand new Sprite Atlas, the SpriteAtlas Settings file will take its configuration from the DefaultSpriteAtlasSettings file included with Ugh, which should be placed in the main Assets folder. If you are rebuilding an already existing Sprite Atlas — by right-clicking a folder which you already generated a sprite atlas from and selecting "Generate Ugh Sprite Atlas from Folder" — the SpriteAtlas Settings will be preserved for the rebuilt Sprite Atlas. This is how you can use the advanced multi-resolution or custom resolution features of Ugh Sprite Atlases: you must first create (or copy) a SpriteAtlas Settings file under the SpriteAtlas folder and change it before building or rebuilding the SpriteAtlas from the textures. Now that you know where the SpriteAtlas Settings file is and generally how to work with it, let's look at the contents of the file. The file is edited by clicking on it and changing options in the Inspector view. Here's some of the things you can change and what they do: <ul> <li><span style="line-height: 13px;">Resolutions - Ugh Sprite Atlases support atlasing to multiple resolutions at once. That means that, on lower end devices, only the smaller resolution sprite atlases will be loaded, saving valuable real time memory. Note that all sprite atlases in all resolutions included in your game or project are packaged with the download, but only the appropriately sized sprite atlases are loaded into real time memory. In order to build a Sprite Atlas to multiple resolutions, change the size of the Resolutions array to more than one. For each element in the array, you can specify:</span> <ul> <li>Name: this is for your reference only</li> <li>Min X, Min Y: specify the minimum x and y values the sprite atlas will use</li> <li>Max Atlas Texture Size: This determines the max, and usually the actual, size of the Sprite Atlas. This must be a power of 2! (512, 1024, etc)</li> <li>Auto Sharpen: auto sharpens the Sprite Atlas image, if checked</li> </ul> </li> <li>Shader: the default is usually fine for this. If you understand shaders, feel free to change this string to match the name and directory of the shader you would like to use for that Sprite Atlas. We recommend Unlit shaders, but you can use any kind.</li> <li>Include Alpha Channel: If checked, includes the alpha channels for each texture that is atlased</li> <li>Padding: This is how many pixels are placed in between textures on the atlas, in order to reduce bleeding from one texture into another. We set this by default to 1, which has been fine for us, but you can set it higher than that if bleeding is an issue for your Sprite Atlas, or to 0 if the texture(s) you are atlasing fit very snugly into your desired atlas size. Be careful about setting Padding to 0, though, and watch out for texture bleeding.</li> </ul> <h2>Nine-Slicing Scaling</h2> A very powerful feature of Ugh is the ability to use nine-slice scaling. If you've never heard of nine-slice scaling or aren't sure what it is, there are plenty of good articles explaining the general concept.  (Try <a href="http://developer.particlecode.com/index.jsp?topic=/com.particlecode.infocenter/help/html/bo1035137.html">this one</a> or <a href="http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html">this one</a>.) <ol> <li><span style="line-height: 13px;">Find and highlight the Sprite Definition you'd like to apply a nine-slice to.</span></li> <li>In the Inspector view, open up the variable lists called "Pixel Crops" and "Pixel Insets." <ul> <li>"Pixel Crops" tells the Sprite Definition how much to cut off of the edges of the sprite. This is a standard cropping tool and not part of a "nine-slicing" operation.  It is useful for getting rid of any artifacts created by <a title="Reducing Unity File Size" href="http://docs.unity3d.com/Documentation/Manual/ReducingFilesize.html">PVRTC compression</a>.</li> <li>"Pixel Insets" defines the inset distance between each edge and the corresponding cut to be made when nine-slicing this sprite.</li> </ul> </li> <li>Once these numbers are set, click "Apply 9-Slice."</li> <li>If you have an UghSprite in the scene that uses the Sprite Definition you are editing, you will be able to see the changes immediately if it was previously skewed by a lack of nine-slice scaling. You can test values live like this, changing the numbers, applying your changes, and seeing the effect on your sprite live in the scene or game view.</li> </ol> Got it? Well done! You now know how to import your own graphics into the Ugh system.

OldNewDate CreatedAuthorActions
6 May, 2013 @ 21:43 [Autosave] admin
1 May, 2013 @ 16:04 admin
30 April, 2013 @ 20:01 admin
30 April, 2013 @ 20:00 admin
17 April, 2013 @ 19:26 admin
15 April, 2013 @ 22:17 admin
9 April, 2013 @ 16:51 admin
9 April, 2013 @ 16:48 admin
9 April, 2013 @ 16:42 admin
8 April, 2013 @ 22:11 admin
8 April, 2013 @ 21:36 admin
8 April, 2013 @ 18:42 admin
5 April, 2013 @ 18:35 admin
5 April, 2013 @ 18:33 admin
5 April, 2013 @ 18:17 admin
4 April, 2013 @ 20:33 admin
4 April, 2013 @ 20:33 admin