SpriteUI Tutorial

From Unify Community Wiki
Revision as of 16:57, 7 December 2012 by TomoI (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
This article is a stub.

You can help UnifyWiki by expanding it.

I expect to be building it over the next few days.

Little Angel

I am finding that I just don't have time to complete this page properly, and SpriteUI in general is getting a little stale. If you need help, PM on the Unity3d Forums (Little Angel) and I'll either add more here or give you a hand.

Getting started with SpriteUI

SpriteUI is a simple UI system built on top of the SpriteManager by CedarParkDad.

The original thread can be found here.

Follow the link to the forum topic and download the most recent version of SpriteUI from the initial post in that thread by CedarParkDad.

This unity package has a working example using all of the C# scripts needed to run SpriteUI, including a working version of SpriteManager.

  • For safety's sake you can at this point create a new empty project and install this unity package and test the contents.
    • There are elements that are ultimately unnecessary for your project (including a texture atlas for testing), and once testing is done, can be safely discarded.

All the files (except one) needed to run SpriteUI for your project will be found in the Plugins folder. The only file not in the Plugins folder is the SampleUIManager script.

Test this package and look at how the scripts work in a safe environment.

SpriteUI for your project

At this point you can either move or copy these files in the finder to your current project, or reinstall them into your current project using the unity package you've downloaded. You may deselect all of the unnecessary files such as the texture atlas.

All the files (except for the SampleUIManager) needed to run SpriteUI for your project should go into the Plugins folder. For reasons related to compilation order, especially if you have a Unity.js project, you should not place them anywhere else.

The only file not in the Plugins folder is the SampleUIManager script, which can be renamed. I use MyUIManager as to prevent confusion with UIManager.cs - which needs to stay in the Plugins folder. This file (which I'll call MyUIManager from now on) can be placed in the the folder of your choice, e.g.: Scripts, or GUI.

Setting up SpriteUI

Once you have installed of the scripts, you need to set them up.

Create an empty object at 0,0,0. Name it something identifiable. I use UIManagerObject. Move this object to a new layer, which in the example is simply called "UI Layer". Now add the SpriteUI script from the Plugins folder to this object.

Setup the SpriteManager settings in the SpriteUI script according to its documentation*. The main thing to remember is to allocate enough space for all elements and buttons. Now set the following:

  • UILayer - The layer in which the UI will live
  • Zero Location - Where on the screen 0,0 will be
  • Vertical Orientation - The value to set iPhoneSettings.verticalOrientation

Next you will need to go to the main camera and remove the UILayer (in this example "UI Layer") from the Culling Mask.

The you need to use a MyUIManager script. (I'd suggest just copying/renaming the SampleUIManager and using that as it implements all of the UIManager interface.)

Here is the opening of my MyUIManager.js (note the class extension of the top - more to come on this). This is a place to get started. More to come! Including use in either C# or Unity.js. I'll include the Unity.js translation of "SampleUIManager". I'll show some examples of bar graphs and rotating indicators, and functions that pop up splash screens, etc.. You'll just have to bear with me. If you have any immediate questions or suggestions, you can put them in the SpriteUI thread. If you want to edit this page, feel free!

SpriteUI page 9 has one of the most complete Unity.js versions of MyUIManager... and see what I've posted below:

class MyUIManager extends UIManagerMonoAdapter { 
   var DefaultSpriteUI : SpriteUI = null; 
   //   basic variables 
   private var someTest : boolean ; 
   private var someTest2 : boolean; 
   //   cache variables 
   private var shipController : ShipController; 
   private var playerStatus : PlayerStatus; 
   //   Basic Buttons 
   private var playButton : Sprite; 
   private var stopButton : Sprite; 
   private var pauseButton : Sprite; 
   //   Paused Buttons 
   private var optionsButton : Sprite; 
   private var calibrateButton : Sprite; 
   private var resumeButton : Sprite; 
   //   Options Buttons 
   private var optionsScreen : Sprite;   //   for the splash screen element
   private var doneButton : Sprite; 
   //   Options Text Tags 
   private var BottomTag : Sprite; 
   private var LeftTag : Sprite; 
   private var RightTag : Sprite; 
   function Awake () {    
   function Start () { 
      //   Basic Variable Setup 
      someTest = true; 
      someTest2 = true; 
      //   Basic Cacheing 
      shipController = FindObjectOfType(ShipController); 
      if (!shipController) 
         Debug.Log("MyUIManager.Start(): No link to ShipController"); 
      playerStatus = FindObjectOfType(PlayerStatus); 
      if (!playerStatus) 
         Debug.Log("MyUIManager.Start(): No link to PlayerStatus"); 
      //   Basic Button Set 
      // screen loc upper-left, screen w, screen h, draw depth, left of texture, top of texture, w of texture to show, h of texture to show, UIManager 
      // Get return values of these if you want to maintain a specific button for comparison in the event functions 
      playButton       = DefaultSpriteUI.AddButton( new Vector2( 5, 5 ), 50, 50, 1, 350, 50, 50, 50, this ); 
      stopButton       = DefaultSpriteUI.AddButton( new Vector2( 135, 5 ), 50, 50, 1, 350, 150, 50, 50, this ); 
      pauseButton    = DefaultSpriteUI.AddButton( new Vector2( 265, 5 ), 50, 50, 1, 350, 250, 50, 50, this ); 

'*These are direct quotes from CedarParkDad, and I'll fill out what this means as I complete this page.

I'll update more here, including Unity.js solutions, rotating indicators, healthbars, etc.., but as I can only dedicate 2 days per week it will be a few days before it is complete.

At this point, you can pick through the original thread to get an idea on how to move forward, but as I said, I'll update this as I get time.

Personal tools