Home › Page › Tutorial #1 – An Introduction to UghSprites

Tutorial #1 – An Introduction to UghSprites

Revision for “Tutorial #1 – An Introduction to UghSprites” created on 3 May, 2013 @ 21:08

Tutorial #1 - An Introduction to UghSprites
<strong>To get started using Ugh, make sure that the Editor and Plugin folders have been moved into the project's main Assets folder. </strong>Unity looks for them there, and if it doesn't find them there, many parts of Ugh won't work properly. <h2>#1: Welcome to UghSprites</h2> Welcome to Ugh! In these tutorials, we are going to learn how to work with UghSprites and other Ugh elements. By the end of them, we will hopefully have demonstrated how to structure your Ugh projects and shown off a few of the powerful things you can do with the Ugh system! To start, we are going to create a dialog box with some text on it. You can either follow along with the video, or step through the written tutorial below. http://www.youtube.com/watch?feature=player_detailpage&amp;v=XD7jjdJzR_M <h4>Part 1 - Creating an UghSprite</h4> Almost everything that you can see in the Ugh system inherits from or uses an UghSprite. UghSprites are very important, and we are going to start by creating one for the background of our dialog box. <ol> <li>Open up the scene "Tutorial #1" under the folders "Tutorials"-&gt;"Scenes."  It should appear empty in the scene view.  It is recommended you simultaneously have a <a title="Unity3d Game View" href="http://docs.unity3d.com/Documentation/Manual/GameView40.html">Game</a> and <a title="Unity Scene View" href="http://docs.unity3d.com/Documentation/Manual/SceneView40.html">Scene</a> view open.</li> <li>In order to create an UghSprite, we need to start with a <a title="UghSpriteDefinition" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughspritedefinition/">Sprite Definition</a> file. In <a title="Tutorials – The Sprite Atlas &amp; Nine-Slicing" href="http://ugh.graveck.com/wiki/mini-tutorials/tutorial-2-the-sprite-atlas/">another tutorial</a> you can learn how to create these for your own image files, but for right now we've included a bunch of stock Sprite Definitions as a part of buying Ugh.  Go to the folder "Included Ugh Assets-&gt;Graphics-&gt;Shiny Silver Chrome-&gt;SpriteAtlas-&gt;Sprite Definitions" in the project and highlight the file called "dialog background alt."</li> <li>With "dialog background alt" highlighted, look in the Inspector. Notice the button that says "Sprites from Definitions"? Click on it, and watch as it creates an UghSprite gameObject and automagically adds it to your scene!</li> <li>Drag or resize the new gameObject until you are happy with how it looks. Note: See how the menu bar at the top of this sprite image stays the same height, no matter how big you scale it? Notice how the edges stay nicely rounded? That is because of nine-slicing, which is an awesome part of Ugh, which you can read about in <a title="Tutorials – The Sprite Atlas &amp; Nine-Slicing" href="http://ugh.graveck.com/wiki/mini-tutorials/tutorial-2-the-sprite-atlas/">this tutorial</a>.</li> </ol> <span style="text-decoration: underline;">Notes on the UghCamera:</span> The UghCamera automatically creates itself in a scene if it is not there already, and renders Ugh elements to the screen. It is always positioned at (0, 0, -10) and is always facing the origin point (0, 0, 0) — if you try to move it, it will just reset itself to this location. UghCamera renders the Ugh elements, which Main Camera (or your own custom camera) will render everything else. <strong>Note: </strong>UghCamera will automatically disable rendering in the GUI layer of all other cameras in the scene.  This is intentional to prevent the UI from rendering twice. <h4>Part 2 - Adding an UghText</h4> The <a title="UghText" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughtext/">UghText</a> is pretty cool. It has some features that Unity's GUIText and TextMesh don't have which we think are pretty awesome, but we'll get into that later. For now, we're just going to make a simple UghText to go with our UghSprite. <ol> <li>All we need to create an UghText is a font file. Go to the folder "Default Assets-&gt;Fonts-&gt;Cabin" in the project and highlight one of the fonts there.</li> <li>Open the Ugh window. To do this, go to the "Ugh" menu bar item and click "Ugh Window." Once its open, look under the "Create" and "Text" sections in the window.</li> <li>Enter whatever you want your UghText to say into the text field. For this tutorial, I'll be entering "This dialog is so Awesome."</li> <li>Find the button that says "UghText from Fonts." With the font highlighted in the project view, click on that button. Watch in amazement as an UghText is created in your scene hierarchy!</li> <li>Drag the UghText around until its sitting over the dialog background UghSprite. Change the character size if you want to change the font size — do not scale the UghText object itself! Drag the borders of the light blue box in the scene view around to change where the UghText wraps its contents. If you'd rather not wrap the text, uncheck "Word Wrap" on your UghText.</li> <li>In order to ensure that it actually appears above the dialog background, set the UghText's z position to be lower than the UghSprite's. In Ugh, lower z values appear closer to the screen, i.e. on top.</li> </ol> Tada! You just made yourself a simple GUI using Ugh. Pretty simple, right? In the next tutorial, we're going to show you what really makes Ugh powerful — UghPublishers. <a title="Tutorial #2 – UghPublisher and UghButton" href="http://ugh.graveck.com/wiki/mini-tutorials/tutorial-1-ughpublisher-and-ughbutton">Next tutorial</a>

OldNewDate CreatedAuthorActions
3 May, 2013 @ 21:08 admin
25 April, 2013 @ 21:54 admin
24 April, 2013 @ 18:09 admin
24 April, 2013 @ 18:09 [Autosave] admin
17 April, 2013 @ 20:59 admin
17 April, 2013 @ 19:26 admin
16 April, 2013 @ 15:02 admin
16 April, 2013 @ 14:36 admin
15 April, 2013 @ 22:35 admin
15 April, 2013 @ 22:19 admin
12 April, 2013 @ 15:34 admin
12 April, 2013 @ 15:34 admin
9 April, 2013 @ 16:19 admin
9 April, 2013 @ 16:16 admin
9 April, 2013 @ 16:14 admin
9 April, 2013 @ 16:14 admin
9 April, 2013 @ 16:11 admin
8 April, 2013 @ 22:54 admin
8 April, 2013 @ 21:25 admin
8 April, 2013 @ 21:09 admin
8 April, 2013 @ 21:07 admin
8 April, 2013 @ 17:22 admin
8 April, 2013 @ 16:49 admin
8 April, 2013 @ 16:45 admin
5 April, 2013 @ 18:01 admin
5 April, 2013 @ 17:54 admin
5 April, 2013 @ 16:09 admin
5 April, 2013 @ 16:01 admin
5 April, 2013 @ 16:01 admin