Home › Page › Tutorial #2 – UghPublishers and UghButtons

Tutorial #2 – UghPublishers and UghButtons

Revision for “Tutorial #2 – UghPublishers and UghButtons” created on 26 April, 2013 @ 20:44 [Autosave]

Title
Tutorial #2 - UghPublishers and UghButtons
Content
<h2>#2: Hello, UghPublisher</h2> The UghPublisher is a powerful way to organize and reference all of your Ugh elements, most of all the UghButton. In this tutorial, we are going to create an UghPublisher and add an UghButton to our scene. We're going to continue with the scene we had at the end of the last tutorial. If you skipped tutorial #1, open the included scene "Tutorial #2" under the Tutorials-&gt;Scenes folder. You can either follow along with the video, or step through the written tutorial below. https://www.youtube.com/watch?v=H2zbdEKqnio <h4>Part 1 - The UghPublisher</h4> <a title="UghSprite" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughsprite/">UghPublishers</a> can be used to reference Ugh elements and take input easily from UghButtons. UghPublishers should be used to represent a group of Ugh elements, for example, End of Level Screen or Main Menu UI. We're going to put everything we've created so far under one UghPublisher. The first thing we need to make an UghPublisher is a new C# script. <ol> <li>Create a new C# script somewhere in your project. Name it "AwesomePublisher." It's helpful to use the convention of ending the class names of your UghPublishers with the word "Publisher" — MainMenuPublisher.cs, for example — but you needn't follow that convention. For this tutorial, however, we will.</li> <li>Open up AwesomePublisher.cs in your script editor. Go to line 4 and replace the word "MonoBehaviour" with "UghPublisher". Our custom class now inherits from UghPublisher!</li> <li>Back in the Unity view, create a blank GameObject and drag the AwesomePublisher script onto it.</li> <li>Congratulations! You have created your first UghPublisher.</li> </ol> The UghPublisher class is designed to be inherited so that you can put your custom functionality into every Ugh element on the screen. If you aren't a programmer, don't worry, you don't need any code to visually set up an Ugh screen., only to make UghButtons execute commands. In these tutorials, we'll provide you with code to copy and paste into your project whenever you need it. <h4>Part 2 - The UghButton</h4> <a title="UghButton" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughbutton/">UghButtons</a> represent <a title="UghSprite" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughsprite/">UghSprites</a> that can be clicked (or tapped on mobile devices.) <ol> <li>Find and select a <a title="UghSpriteDefinition" href="http://ugh.graveck.com/wiki/ugh-scripting-reference/ughspritedefinition/">Sprite Definition</a> in the project window. You can find several of them under Included Ugh Assets-&gt;Graphics-&gt;Shiny Silver Chrome-&gt;SpriteAtlas-&gt;Sprite Definitions. In this tutorial, we'll use the one called "generic button up."</li> <li>With the Sprite Definition highlighted, click on "Buttons from Definitions" in the Inspector window. Watch as an UghButton is created in the hierarchy view!</li> <li><span style="line-height: 13px;"><span style="line-height: 13px;">Drag your new UghButton object under the UghPublisher object, so that the UghPublisher is now the parent of the UghButton. This is a very important step — if the UghButton is not a child of an UghPublisher, it won't execute your custom commands when you click on it. (Note that the UghButton doesn't need to be a direct child of the UghPublisher, it just needs to be somewhere "under" the publisher in the hierarchy.)</span></span></li> <li>Reposition your button so that it's over the dialog box. You can make the UghButton render over (rather than under) the UghSprite for the dialog background by changing the z-position of the UghButton, like we did in the last tutorial. While we're at it, let's move the UghText over the UghButton as well, so that our button has a nice label on it. Also, drag the "generic button down" Sprite Definition into the "Pressed Definition" field on your UghButton.</li> </ol> <h4>Part 3 - Connecting them</h4> We have an UghButton, so now we are going wire it up to our UghPublisher object. Every UghPublisher has a list of connected UghButtons in it, and you can change the size of this list to fit however many UghButtons you need. <ol> <li><span style="line-height: 13px;"> Click on the UghPublisher. Find the Ugh Button References array and expand it. Set its size to 1.</span></li> <li><span style="line-height: 13px;"> Drag your UghButton into the available slot you just created in the Ugh Button References list, under Reference.</span></li> <li>Enter a Name for the button. This can be anything — it needn't be the same as the GameObject name.</li> <li>Enter a Function Name for the UghButton. This can be anything that can also be the name of a function: no spaces, cannot start with a number, etc. For this tutorial, we'll call it "OnAwesomeButtonPressed".</li> <li>Open up the OurAwesomePublisher script. Paste (or transcribe) the following function into the class:</li> </ol> [sourcecode language="csharp"] public void OnAwesomeButtonPressed() { Debug.Log(&quot;Hello Awesome World!&quot;); } [/sourcecode] <ol start="6"> <li>Save the script and go back to the Unity editor.</li> <li>Click Play.</li> </ol> All our button does right now is print a Debug Log into the <a title="Unity Console" href="http://docs.unity3d.com/Documentation/Manual/Console.html">Console</a>. If you don't have the Console window open, you can open it up under Window (in the menu bar) and then Console (at the bottom). If you'd rather not open the Console just to see a single line of text printed, just continue on to the next tutorial, where we do something more visual with our UghButton. Before we move on, I'd like to point out our Best Practices page. These include practices that are a good for the organization of your hierarchy and project structures and workflows that we've tried with Ugh and decided we like. Everyone who works with Ugh should give it at least a quick read. One of the Best Practices I'll use here it to parent all of the things within this dialog to the UghPublisher Transform — the button, the background sprite, the text, everything. This creates a nice, packaged object in the hierarchy view, with the governing UghPublisher at the top, which can be turned into a prefab and animated or moved by just moving the parent, UghPublisher object. But enough on that. <a title="Next Tutorial" href="http://ugh.graveck.com/wiki/mini-tutorials/tutorial-2-the-sprite-atlas/">Next Tutorial</a>
Excerpt


OldNewDate CreatedAuthorActions
26 April, 2013 @ 20:44 [Autosave] admin
25 April, 2013 @ 21:56 admin
25 April, 2013 @ 21:54 admin
17 April, 2013 @ 19:26 admin
17 April, 2013 @ 14:55 admin
17 April, 2013 @ 14:55 admin
16 April, 2013 @ 15:41 admin
16 April, 2013 @ 15:16 admin
16 April, 2013 @ 15:13 admin
9 April, 2013 @ 16:33 admin
9 April, 2013 @ 16:31 admin
9 April, 2013 @ 16:31 admin
9 April, 2013 @ 16:27 admin
8 April, 2013 @ 17:36 admin
8 April, 2013 @ 17:25 admin
5 April, 2013 @ 18:16 admin
5 April, 2013 @ 17:43 admin
5 April, 2013 @ 17:24 admin
5 April, 2013 @ 17:23 admin
5 April, 2013 @ 15:02 admin
4 April, 2013 @ 19:22 admin
29 March, 2013 @ 16:09 admin
29 March, 2013 @ 15:57 admin
29 March, 2013 @ 15:55 admin
29 March, 2013 @ 15:45 admin
29 March, 2013 @ 15:37 admin
29 March, 2013 @ 15:36 admin
29 March, 2013 @ 15:05 admin
29 March, 2013 @ 15:05 admin
29 March, 2013 @ 15:04 admin