GUISpriteUI GUI Object Library with Controls (Updated)

[Prime31]

As a thank you to the folks of this forum I am sharing the first version of an iPhone GUI library. It is inspired by SpriteManager, SpriteUI and GUIManager and borrows some code from each. With all these sprite/GUI options why make another? None of the others did exactly what I wanted. I created the GUISpriteUI library to have an easy, highly efficient way to draw a game HUD and to provide menus between levels and on start up. GUISpriteUI uses no collections classes and uses standard arrays for all data. GUISpriteUI also makes it easy to get your HUD setup with code that makes sense from the start.

GUISpriteUI comes prepackaged with the following elements:

GUISprite: standard sprite object
GUISpriteButton: standard button with highlighted and normal images. Kicks off a delegate when touched
GUISpriteToggleButton: 3 state toggle button (checkbox). Sends a delegate function when changed as well
GUIKnob: volume control-like know with a highlighted and normal state. Can send events continuously (every touchesMoved) or only onTouchesEnded
GUISlider: horizontal or vertical slider that can send events continuously or only onTouchesEnded
GUIProgressBar:: progress bar or health meter. The 'bar' portion of the element can be either stretched or only a portion of the image used when it is less than full (see the demo. It toggles between stretched and normal)
GUIJoystick: fully customizable joystick and optional background image that hangs out behind the joystick
GUISwipeDetector: detects swipes in all 4 directions or any combination of them inside the given rectangle.


GUISpriteUI lets you create your own GUITouchableSprite subclasses so that you can make any UI object that you need and it will work seamlessly with the rest of the library.

Each touchable sprite can have it's touch area set to an area smaller or larger than it's size. You can also have the touch area be a different size when the element is highlighted. This is useful for sliders and knobs so that your finger doesn't have to be directly on them when sliding around.

The attached package has a fully working scene with all the GUISpriteUI UI elements so you can see how to set everything up. For new project setup just follow the included read me.

Here are a few samples of a few elements so you can see how easy it is to use GUISpriteUI:

Vector2 textureSize = GUISpriteUI.instance.textureSize;
 
// Create a button at the point 10, 10 from the top-left corner of the screen that is 108 px wid and 37 px high
// UVRect defines the pixel location on your texture map the graphic to use for this button
GUISpriteButton playButton = GUISpriteUI.instance.addSpriteButton( new Rect( 10, 10, 108, 37 ), 3, new UVRect( 0, 0, 108, 37, textureSize ) );
 
// Optional: Add a different graphic for the highlighted state
playButton.highlightedUVframe = new UVRect( 0, 37, 108, 37, textureSize );

GUISpriteButton scores = GUISpriteUI.instance.addSpriteButton( new Rect( 10, 57, 108, 37 ), 3, new UVRect( 0, 74, 108, 37, textureSize ) );
scores.highlightedUVframe = new UVRect( 0, 111, 108, 37, textureSize );
 
// Expand our highlighted touch area 30 pixels all around
scores.highlightedTouchOffsets = new GUIEdgeOffsets( 30, 30, 30, 30 );
 
// When the button is touched, this function will be called
scores.action = onTouchUpInsideScoresButton;
 
// Set the opacity to 0.5 for this button
scores.color = new Color( 1, 1, 1, 0.5f );

// Horizontal Slider.  Be sure to offset the sliderKnobs Y value to line it up properly
GUISprite hSliderKnob = GUISpriteUI.instance.addSprite( new Rect( 20, 245, 30, 50 ), new UVRect( 120, 130, 30, 50, textureSize ), 1 );
GUISlider hSlider = new GUISlider( new Rect( 20, 250, 200, 40 ), 2, new UVRect( 120, 80, 200, 40, textureSize ), hSliderKnob, onHSliderChanged );
GUISpriteUI.instance.addTouchableSprite( hSlider );
 
// Increase our hit area a bit while we are tracking along the slider
hSlider.highlightedTouchOffsets = new GUIEdgeOffsets( 20, 30, 20, 30 );
hSlider.value = 0.2f;

Example animation call:

Vector3 originalPosition = sprite.clientTransform.eulerAngles;
GUISpriteUI.instance.to( sprite, duration, GUIAnimationProperty.EulerAngles, to, Easing.Sinusoidal.factory(), Easing.EasingType.Out );

A more complicated animation that pulses the alpha of an element from 0.1 to 1.0 would be:

private IEnumerator pulseOptionButton( GUISpriteButton optionsButton )
    {
        GUIAnimation ani;
        
        while( true )
        {
            ani = GUISpriteUI.instance.to( optionsButton, 0.7f, GUIAnimationProperty.Alpha, 0.1f, Easing.Linear.factory(), Easing.EasingType.In );
            yield return ani.chain();
            
            ani = GUISpriteUI.instance.to( optionsButton, 0.7f, GUIAnimationProperty.Alpha, 1.0f, Easing.Linear.factory(), Easing.EasingType.Out );
            yield return ani.chain();
        }
    }
 
// Start pulsing a button
StartCoroutine( pulseOptionButton( optionsButton ) );

All animation routines allow you chain them by just yieding the chain() method. This will return a WaitForSeconds of the amount of time remaining in the animation.

[teddylife]

tried ur scripts.

Look promising good work man..

I manage to get one button work, but my limited C# skill stopped me to going forward, i wan to create a setting button where it located top of the screen, when i hit the button, a menu will be pops up.. izzit possible to do that based on the SpriteUI?

[Prime31]

It's very possible and pretty simple. I believe you can actually use the library just fine with Javascript as long as you put it in the Plugins or Standard Assets folders so that it gets compiled first.

Something like the following (untested) code should be all you need:

GUISpriteButton settingsButton = GUISpriteUI.instance.addSpriteButton( new Rect( 10, 10, 108, 37 ), 3, new UVRect( 0, 0, 108, 37, textureSize ) );
settingsButton.action = onTouchSettingsButton;
 
 
public void onTouchSettingsButton( GUISprite sender )
{
    // Add a background that covers the whole screen and is on a lower level (10)
    GUISprite somePopup = GUISpriteUI.instance.addSprite( new Rect( 0, 0, 480, 320 ), new UVRect( 0, 100, 480, 320, textureSize ), 10 );
    
    // Add any buttons you need for your menu here
}

I added an animation framework to GUISpriteUI (very, very lightweight using only Coroutines and no Update functions) so if there are some people actually using it I will keep this post updated with the latest version.

[teddylife]

Thanks for the speed bump, will try out and let you know tomorrow as in my location is GMT +8:00 so is middle of the night...

[patch]

Very nice uprise78. I'll see about integrating it into my game. Currently I'm using spriteUI. Your screen space and texture UV coord args looks alot easier to read/debug. Button size separately defined, sliders, health bars...all very nice.
thanks!

[Prime31]

@patch, readability was one major reason for creating it. I was getting annoyed with trying to figure out what parameter I was changing with SpriteUI. That was the big push for going to a Rect based design. It made a lot more sense. The other big thing was performance. There was a lot of room for improvement in that department in SpriteUI, SpriteManager and GUIManager.

[teddylife]

I follow along your code, but it gave me following error:

Assets/Scripts/GUIMenu.cs(27,129): error CS0103: The name `textureSize' does not exist in the current context

using UnityEngine;
using System.Collections;
 
public class GUIMenu : MonoBehaviour {
 
    // Use this for initialization
    void Start () {
        
        Vector2 textureSize = GUISpriteUI.instance.textureSize; //Save the texture size for future usage.
        
        //Create MenuButton 
        //**new Rect ( postion_x, postion_y, object_width/object_position_in_texture, object_height/object_position_in_texture)
        GUISpriteButton settingsButton = GUISpriteUI.instance.addSpriteButton( new Rect( 439, 0, 41, 43 ), 3, new UVRect( 11, 594, 41, 43, textureSize )); 
        settingsButton.highlightedUVframe = new UVRect( 53, 594, 41, 43, textureSize);
        settingsButton.action = onTouchSettingsButton; 
 
    
    }
    
    //Function to call void Start
    
    //MenuButton Action
    public void onTouchSettingsButton(GUISpriteButton sender)
    {
        
        Debug.Log ("Touched");
        GUISprite somePopup = GUISpriteUI.instance.addSprite( new Rect( 67, 41, 364, 239 ), new UVRect( 0, 0, 346, 239, textureSize ), 10 ); 
    }
}

I think is the texureSize is not define any help?

[Prime31]

Just change your action to look like this:

   //MenuButton Action 
   public void onTouchSettingsButton(GUISpriteButton sender) 
   { 
       
      Debug.Log ("Touched"); 
      GUISprite somePopup = GUISpriteUI.instance.addSprite( new Rect( 67, 41, 364, 239 ), new UVRect( 0, 0, 346, 239, GUISpriteUI.instance.textureSize ), 10 ); 
   }

You were trying to use the textureSize variable was scoped to your Start() method in your onTouchSettingsButton method.

[teddylife]

Thanks for the help, but there is another problem pops up..

Sorry i'm noob....

the error message shows :

IndexOutOfRangeException: Array index is out of range.
(wrapper stelemref) System.Object:stelemref (object,intptr,object)
GUISpriteManager.addSprite (.GUISprite sprite) (at Assets/Plugins/GUISpriteManager.cs:337)
GUISpriteManager.addSprite (Rect frame, UVRect uvFrame, Int32 depth) (at Assets/Plugins/GUISpriteManager.cs:317)
GUIMenu.onTouchSettingsButton (.GUISpriteButton sender) (at Assets/Scripts/GUIMenu.cs:27)
GUISpriteButton.onTouchEnded (Vector2 touchPos, Boolean touchWasInsideTouchFrame) (at Assets/Plugins/GUIElements/GUISpriteButton.cs:82)
GUISpriteUI.lookAtTouch (iPhoneTouch touch) (at Assets/Plugins/GUISpriteUI.cs:239)
GUISpriteUI.Update () (at Assets/Plugins/GUISpriteUI.cs:98)

[teddylife]

Done! fix dy, due to the UI Sprite Count i put 1 instead of two.. =.=

anyway I'm looking forward to explore more on the UISprite. Cool work!

[teddylife]

One question how do i remove the sprite after I addSprite?

I use the togglebutton as a foundation for my menu. i addSprite when the toggle selected= true; but i wanna kill the UISprite when my selected = false

        public void onToggleButtonChanged( GUISpriteToggleButton sender, bool selected )
    {
        Debug.Log( "onToggleButtonChanged to: " + selected );
        if(selected == true) {
            Debug.Log("Yes");
            GUISprite somePopup = GUISpriteUI.instance.addSprite( new Rect( 67, 41, 364, 239 ), new UVRect( 0, 0, 346, 239, GUISpriteUI.instance.textureSize ), 10 );
        GUISprite HelpButton = GUISpriteUI.instance.addSprite ( new Rect ( 134, 138, 209, 59), new UVRect(0, 239, 209, 59, GUISpriteUI.instance.textureSize ), 10 );
        }
        
        if(selected == false ) {
                Debug.Log("Remove this idiot");
        }
    }

[JohnDoe2]

This looks really interesting to me. Unfortunately I'm working mainly on a PC where I can't seem to get this to work.

For one there are compile errors where the scripts make use of iPhone specific input. To work around this I downloaded the iTouch.cs which is included in the GUIManager [1]. I had to add one more enum, but now I can get it to compile and actually display stuff on the PC. Find attached my slightly altered iTouch.cs file that works with this GUI system.

Now drawing the huds using this works fine on the PC. Unfortunately I still can't click on buttons. I'm wondering if there's any way for you to look for what's causing this. I know I'm asking quite a bit here. I already looked into this but I only have limited iPhone input handling knowledge so I couldn't find a solution.



[1] http://forum.unity3d.com//viewtopic....ght=guimanager

[Prime31]

@JohnDoe2, all the logic for triggering button/slider events is based on touches. It wouldn't be too difficult to change it though. You will just need to modify 2 functions in the GUISpriteUI.cs file. The Update() function grabs and analyzes the touches. Just delete the touch code and replace it with the equivalent mouse processing code. (I have no idea what it is because I have only worked with the iPhone version of Unity).

[JohnDoe2]

@JohnDoe2, all the logic for triggering button/slider events is based on touches. It wouldn't be too difficult to change it though. You will just need to modify 2 functions in the GUISpriteUI.cs file. The Update() function grabs and analyzes the touches. Just delete the touch code and replace it with the equivalent mouse processing code. (I have no idea what it is because I have only worked with the iPhone version of Unity).

Thanks a lot. Will give that a try. After the weekend that is

[bpatters]

I'm looking into using this tool for my HUD but I'm wondering how you handle this scenario:

I have lots of objects in game that you can touch and swipe on and interact with. However I don't want those interactions to occur if their behind the HUD control you touched.

Right now I handle all my "touch" dispatching in a single Update function and then process in the order necessary to ensure this occurs. With this tool I'd looks that ability to have a single touch consumer dispatcher and I'm not sure how to handle this. For example:

I have a movement pad which you touch and slide in order to move that direction. I also allow the player to touch swipe in the scene to rotate the camera but I don't want the rotation to occur when the user is touch swiping on the movement pad.

I also don't want scene objects to be touch activated if the user touches on the buttons. However I haven't figured out how to prioritize touch handling without having a single touch dispatcher.

Any Idea's how I'd do this and use this tool?

[Prime31]

GUISpriteUI can handle all that. You will want to make a new sublass of GUITouchablSprite. Use the GUIButton as a template but add one extra override function.you will be overriding the GUITouchablSprite touchMoved method. In touchMoved just reposition your joystick as the users finger moves around. This can be your joystick. You can also make it more user friendly by icreasing the hit area while it's being touched. Make one more sublass of GUITouchableSprite for your swipe detector. Create this one with a UVRect size of 0,0,0,0 so it is invisible. Make it fullscreen (or as big as you want it) and put it on a higher level than all your other touchables. You can then use the touchMoved method in there to listen for swipes and it will only register touches when the user isn't already touching something else on a lower level (all your other HUD controls). Hopefully that all makes sense.

[bpatters]

GUISpriteUI can handle all that. You will want to make a new sublass of GUITouchablSprite. Use the GUIButton as a template but add one extra override function.you will be overriding the GUITouchablSprite touchMoved method. In touchMoved just reposition your joystick as the users finger moves around. This can be your joystick. You can also make it more user friendly by icreasing the hit area while it's being touched. Make one more sublass of GUITouchableSprite for your swipe detector. Create this one with a UVRect size of 0,0,0,0 so it is invisible. Make it fullscreen (or as big as you want it) and put it on a higher level than all your other touchables. You can then use the touchMoved method in there to listen for swipes and it will only register touches when the user isn't already touching something else on a lower level (all your other HUD controls). Hopefully that all makes sense.

That make sense and will handle that scenario. How do I handle scenarios like door's which you touch and they open and other scene objects which respond to touches? I only want them to respond to touches if the HUD doesn't consume the touch.

I'm planning on having a lot of interactive objects in the scene that the player can touch and interact with and need a method to know if the HUD consumed a touch (IE user interacted with or is interacting with a HUD object for a specific touch id) so I can ignore the touch in that scenario for the objects.

What I was thinking of doing is modifying the GUISpriteUI and changing the Update() method to something like:
processUpdate(ref iPhoneTouch[] touchesConsumed);

and calling it from my own Update method and then skipping touch dispatching to other objects for finger id's that the GUISpriteUI consumed.

Right now I process all touches and allow UI First dibs and if it doesn't use the touch then I figure out the object that was touched and dispatch the touch to it for processing.

[Prime31]

That should work. You can also do it backwards and use the full screen touchable area From the previous post as a dispatcher. If the touch gets to it then it missed all buttons so you can then either detct the swipe or kick off a raycast to check for your non HUD touchables.

[bpatters]

That should work. You can also do it backwards and use the full screen touchable area From the previous post as a dispatcher. If the touch gets to it then it missed all buttons so you can then either detct the swipe or kick off a raycast to check for your non HUD touchables.

Good idea. One question, even though the UV set is 0 isn't having an invisible quad over the entire screen going to cause a massive FPS hit due to fill rate limitations of the iphone? I see some pretty significant FPS hits when I have alpha blended objects covering large portions of the screen and I start to hit fill rate limits.

[Prime31]

It shouldn't cause any issues at all because the quad will literally be of zero size. The touchable area is defined seperately and you can make that cover the full screen.