Prime31 UIToolkit Multi Resolution GUI Solution Ready for Use...and it's free

Discussion in 'iOS Development' started by prime31, May 3, 2011.

  1. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @LimeSplice, using something like UIToolkit you get a nice draw call reduction (one draw call for the entire UI), loads of controls (slider, buttons, knob, etc), fully extensible so you can make your own custom controls, proper iOS-like touch handling, multi resolution, single touch handler, built in animation system, etc, etc, etc. There are a pile of bullet points for using something like UIToolkit.

    For me, one of the biggest is not reinventing the wheel. UIToolkit was original an in-house project that was mainly released because we saw way too many people using the horrendous OnGUI controls/buttons. As we need new controls we just add them to UIToolkit and we get a fully reusable, clean setup for all UI's.
  2. LimeSplice

    LimeSplice

    New Member

    Joined:
    Jul 15, 2011
    Messages:
    111
    @prime, cheers I'll check out the toolkit then... :)
  3. capitalJmedia

    capitalJmedia

    Member

    Joined:
    Feb 10, 2011
    Messages:
    185
    Hi

    I'm am trying to add a way to disable and enable buttons and the toggleButton. So that they are only enabled (and change sprites) at certain times in the game. ie: they are always shown but are only enabled if the character/unit is selected.

    I've looked through the code and I'm thinking of adding code in the OnTouchDown methods that checks whether a public 'enabled' bool is true and then only allows the OnTouchDown code to be run if it is enabled. Anyone have any thoughts on this and if there might be a better way to go about this?

    -JJ
  4. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    @CapitalGames : My 2 cents - I've done something similar to what you suggest above. Please note that using this method although functionally there is a difference between the "enabled" and "disabled" state, there is visually no difference between a "enabled" button and a "disabled" button. It really depends on how you want to handle this disabled state visually really. For me I didn't need the visual difference as I enabled and disabled button only when they were animating. Check your usability scenario - would it make more sense to grey out disabled buttons.

    Ideally "disabled" ought to be a separate state - just like normal , highlighted focused/ active etc , with its own texture in the sprite sheet . That would be a lot cleaner.
  5. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    I'm with Dev.d as well. A separate disabled state would seem like a good way to do it.
  6. capitalJmedia

    capitalJmedia

    Member

    Joined:
    Feb 10, 2011
    Messages:
    185
    That might be a bit above my skill level :)

    If the buttons start grayed out and are disabled, then touching them wouldn't change the sprite if I put in a check for disabled, correct?
  7. franktinsley

    franktinsley

    Member

    Joined:
    Jul 1, 2010
    Messages:
    94
    UIToolkit looks awesome and I can't wait to start using it but I'm thinking it can pretty easily solve another problem of my game. In my game there is essentially UI, a 5 by 5 matrix of lights, that I need to turn on and off but the trick is it all needs to be on a plane in a scene so they appear on the surface of a game object. Does anyone have any ideas how I can use UIToolkit for this so I don't end up with tons of wasted draw calls?
  8. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    @ CapitalGames:
    In our above discussion, touching a disabled button ( or lets say a TouchableSprite) won't do anything. You will need to "enable" it somehow. As far as implementation goes, i'd love to help but am a bit swamped with work for a deadline. If you look at what prime31 does for the highlighted state for the UIButton class you'll see there not much to it.


    In your example :
    You could enable the button(s) whenever a character / unit is selected . If you find it useful, create a selection manager object in your scene . This is simply a gameobject with a script that does something whenever you have something selected/unselected in the game. From this function you enable/disable your buttons depending on if something is selected/ nothing is selected respectively. All you need are references to your buttons in this function .

    Hope this help! ;)
  9. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    To clear up all this enabled/disabled stuff I just added it to the mainline. Every UITouchableSprite now has a disabled property. If you set it to true, it will not receive touches. In addition, if you set the disabledUVframe property of the object, while disabled it will use the image specified by that UIUVRect so you can add a dimmed/darkened version of the normal image to use as the disabled. This will work with all the current controls that are subclasses of UITouchableSprite (which is most of them). It is not fully tested but should be good to go.
  10. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    There you go , thank you Prime31! :)
  11. Fidde

    Fidde

    New Member

    Joined:
    Dec 20, 2010
    Messages:
    109
    A quick question before i embark on code crusades: Is there any particular reason as to why TouchableSprite / UIButton doesn't trigger the touchStart and touchMoved callbacks when the touch is not initiated within the button? For instance, if you have two adjacent buttons and swipe over them without release, the second button won't react. Or if you initiated the swipe outside a button and drag into its bounds. Design decision?
    Last edited: Jul 22, 2011
  12. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Fidde, mainly because it drives me insane when people do that :) UIToolkot follows many of the iOS (and Android) patterns one of which is touch ownership.
  13. appleunited

    appleunited

    New Member

    Joined:
    Dec 25, 2010
    Messages:
    99
    One quick question. Can this toolkit be used as a game HUD for a 3D game environement? I tried setting a sample demo scene with a button on a 3D world but couldn't get it to appear.
  14. seon

    seon

    Member

    Joined:
    Jan 10, 2007
    Messages:
    1,403
    Anyone know why when exporting font data and bitmap from Glyph, the bottom pixels of my font in game are cut off ? I have tried exporting as cocos2d and ezgui formats and both do the same thing. bottom row of pixels of my font when used in game are missing :(

    Bitmap looks fine and am adding into my texture packer atlas and it all looks fine in there too.
  15. seon

    seon

    Member

    Joined:
    Jan 10, 2007
    Messages:
    1,403
    Also is there a way to have a sprite stay on the last frame of its animation? Example below...

    Lets say I have a lives left indicator that has 3 dots to show I have 3 lives left. I then lose a life so want to play the animation that flashes the first 2 dots on and off) to show the player a life is gone and only 2 are left.... but at the end of the sprite animation, it goes back to the 3 dots cause that was what it was set to before the animation played.
  16. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Seon, whatever the sprites uvFrame is when starting the animation is what it will be when finished. you can set the uvFrame to the desired frame right before beginning the animation to get the effect you are efter.
  17. iio

    iio

    New Member

    Joined:
    Nov 21, 2009
    Messages:
    22
    Ran through the tute on the weekend and just wanted to say a big thanks for this :thumbs up:. It all worked smoothly thanks to your tutes and the Github page but just one thing: in the videos the UIToolkit object is the root object and I think the UI.cs script is attahced to it whereas in the Github tute you have UIToolkit object as root, UI object as child and the UIToolkit.cs and UI.cs scripts attached to each obejct respectivley. I combined these two tutes to get my signle button working so if I'm not missing something perhaps make a mention of this?

    In any event, awesome plug-in and again, thanks.
  18. seon

    seon

    Member

    Joined:
    Jan 10, 2007
    Messages:
    1,403
    Ok, thats wat I figured i'd have to do. No chance of it being noticed though ? Guess I will need to try it and find out :)
  19. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    @Seon: Give this a shot - instead of using the "UIToolkit/ Alpha Enabled (Default)" shader for your Text material try Unity's default Text Shader ( GUI/ Text Shader) . In my tests I got a much smoother results. I must admit I've not used "Glyph".
  20. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    @Prime31: I had to make some changes to the UIToolkit shaders to make them work well in iOS. As you may know alpha testing is really bad on iOS ( atleast on iPhone iPad1 ) . If there are 2 overlapping sprites with transparency, i've noticed serious framerate drop. Totally depends on how many sprites and how much overlap is occuring. Alpha Blending works fine.

    I'm afraid I still can't get git to work properly at my end ( perhaps cause I'm a git myself 0_o). So I am elucidating the changes below.


    File : UIToolkit Alpha Enabled (Default).shader, Line: 13
    //AlphaTest Greater .05 // Dev : commenting this as it is prohibitively expensive on iOS, I don't see a need for alphatesting here. We ought to just use alphablending

    File : UIToolkit No Alpha.shader , Line :13
    //AlphaTest Greater .1 // Dev : this is prohibitively expensive on iOS, I don't see a need for alphatesting in a no alpha shader


    With the above changes in place I've got about 25 buttons / panels/ sprites with transparency with some overlapping elements drawing at nearly 30 fps on iPad1. Without the above changes it goes down to 12 fps. :)
    Last edited: Jul 26, 2011
  21. Matkins

    Matkins

    New Member

    Joined:
    Aug 24, 2009
    Messages:
    141
    I'm trying to use UIToolkit to fade in and out a screen sized black sprite for camera transitions. I know there are ways to do this without UIToolkit, but thought this'd be a simpler way for my project as i'm using UIToolkit anyway.

    Trouble i'm having is that when i stretch my single black pixel to be the size of the screen, its not quite solid black. I end up with a black-transparent gradient. As if surrounding pixels in the atlas have been used to interpolate colour information when its stretched. Is there a way i can stop this from happening. Or is there a way i can tile the pixel sprite rather than stretching it?
  22. Dev.D1

    Dev.D1

    Member

    Joined:
    Dec 29, 2010
    Messages:
    99
    @Matkins:
    I've done something similar for my project . Best is not to use a single black pixel . Rather use a power of 2 ( 2x2 , 4x4 , 8x8, 16 x 16 , 32 x32..) texture . These will not affect your sprite atlas size by much. On the positive side it'll get you past these kind of bleeding/ filtering issues, esp when the texture is being baked into an atlas ( which may have some bleed areas / offsets defined compounding issues for single pixel textures) .

    With a power of 2 texture you can then go and and use the sprites localScale Attribute to scale the sprite . localScale is a Vector3 so you may easily do a non uniform scale to fit to 4:3 / 16:9 aspect ratio.

    Hope this helps.
  23. spk

    spk

    New Member

    Joined:
    Jan 9, 2009
    Messages:
    527
    Just stopping by to give two thumbs up for this. I haven't tried it yet, but am planning on doing so this week. The API is much cleaner and leaner than what Im using right now. Thanks a lot for sharing this, and I hope to contribute to it in the near future.
  24. _ex_

    _ex_

    New Member

    Joined:
    May 23, 2011
    Messages:
    98
    Hi, first of all, many thanks for this tool!
    I was trying to use it but I'm getting lots of these errors in the console with git and downloaded version:

    Code (csharp):
    1.  
    2. ....
    3. Mono: successfully reloaded assembly
    4. Updating library/editorbuildsettings.asset - GUID: 0000000000000000b000000000000000...
    5. CreateDirectory 'D:/unity/ui/UIToolkit/library/cache/00' failed: El sistema no puede encontrar la ruta especificada.
    6.  
    7. Failed to create cache directory for asset Library/EditorBuildSettings.asset
    8.  
    9. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetDatabase.cpp Line: 902)
    10.  
    11.  done: hash - eb1624e0e7a303c50785491d22c8fdb8
    12. Updating library/networkmanager.asset - GUID: 0000000000000000a000000000000000...
    13. CreateDirectory 'D:/unity/ui/UIToolkit/library/cache/00' failed: El sistema no puede encontrar la ruta especificada.
    14.  
    15. Failed to create cache directory for asset Library/NetworkManager.asset
    16. ...
    17.  
    And later, lots of these:

    Code (csharp):
    1.  
    2. Failed to create cache directory for asset Assets/DemoScenes/JoystickTest.unity
    3.  
    4.  
    5. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetDatabase.cpp Line: 902)
    6.  
    7. Asset is dirty after import?
    8.  
    9. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetImporter.cpp Line: 683)
    10.  
    11. Asset is dirty after import?
    12.  
    13. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetImporter.cpp Line: 683)
    14.  
    15.  done: hash - 248e758224139df15c436f81a132ab82
    16. Updating assets/demoscenes/layoutcontainertest.unity - GUID: af81753304f6f480f83a6c64dbe62126...
    17. CreateDirectory 'D:/unity/ui/UIToolkit/library/cache/af' failed: El sistema no puede encontrar la ruta especificada.
    18.  
    19.  
    20. Failed to create cache directory for asset Assets/DemoScenes/LayoutContainerTest.unity
    21.  
    22.  
    23. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetDatabase.cpp Line: 902)
    24.  
    25. Asset is dirty after import?
    26.  
    27. (Filename: C:/BuildAgent/work/6bc5f79e0a4296d6/Editor/Src/AssetPipeline/AssetImporter.cpp Line: 683)
    28.  
    29. Asset is dirty after import?
    30.  
    31.  
    I can run the demo but if I try to save the modified files, Unity crashes, I'm using Unity 3.3.
    The KitchenSink demo works (looks the same in iPhone 3GS and 4) but looks different in Android
    I don't know if due to these errors.
    somebody has any advice?

    Thanks!
  25. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @_ex_, looks like it could be a permissions issue. Double check the file/folder permissions for your project.
  26. _ex_

    _ex_

    New Member

    Joined:
    May 23, 2011
    Messages:
    98
    [EDIT] I forgot to un-check the options "Auto Texture Selection for HD" and "Allow Pod 4Gen HD" in the UI object at the scene. Sorry about this dumb question.


    @Prime31: hey Prime31 many hanks for your time and support, very appreciated!
    I got rid of the error messages just after creating a empty project and importing the package in the downloads section. Very extrange.
    However the problems in Android remain, I attached a pic with how the ui looks in iPod 4G and a Milestone:

    I must say that the UI looks the same in 3G and 4G ipods, maybe I forgot to set something to let the UI expand in the 4G device but that is done by default in the Android device?

    Milestone
    [​IMG]

    iTouch 4G
    [​IMG]

    Any advice for android? Many thanks!
    Last edited: Jul 25, 2011
  27. _ex_

    _ex_

    New Member

    Joined:
    May 23, 2011
    Messages:
    98
    Bug? testing on my 4Gen and an 3Gen iPods I got the toggle button in a gray state, Is this a known issue? It happens more frequently in the 3Gen device.
    Attached screenshot:

    [​IMG]
    Last edited: Jul 25, 2011
  28. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    _ex_, the gray state is unchecked. It has checked, highlighted and unchecked states
  29. _ex_

    _ex_

    New Member

    Joined:
    May 23, 2011
    Messages:
    98
    Prime31, I'm a bit confused,
    for me when I press the checkbox it becomes gray, If I move the touch out of the control area it returns to its original state (red with or without check) so I was thinking it was the highlighted state of mouse-down or touch.
  30. iguana_02

    iguana_02

    Member

    Joined:
    Apr 22, 2011
    Messages:
    205
    Hi Prime, i'm just finishing my app and i notice something strange with the UItoolkit.

    I got 2 buttons on the bottom and 2 buttons on the top of the window.

    I notices that the 2 buttons on the top generated planes (with the ui graphics in it) in my 3d scene.

    I'm using an AR engine and when i move around the marker i can see this plane as a proper 3d object in my scene...

    Is there any way to hide those planes?

    Thank you.
  31. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @iguana_02, just turn off your UILayer in the non-UIToolkit camera.
  32. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    I'm trying to get my system UniDDatabase to keep track of my textures instead of Texture packer. UniDDatabase is already keeping track of my audio,position, rotation,Prefabs. I feel it could do a better job than Texture Packer because of the Native Support. How hard would that be to achieve.
  33. defjr

    defjr

    New Member

    Joined:
    Apr 27, 2009
    Messages:
    436
    Prime, I might just be dumb but how do you handle orientation changes?
  34. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    Prime 31, let me give you an idea what I'm looking for. I've figured most of it out.

    public Texture2D firstTexture;
    public Texture2D secondTexture;
    var playButton=UIButton.create(firstTexture,secondTexture,0,0);

    I want to be able to pass in the texture itself instead of passing in the name of the texture. The texture can be located anywhere in the directory. If I'm not mistaken. Based on the code. It looks like it has to be in the resources folder.
  35. iguana_02

    iguana_02

    Member

    Joined:
    Apr 22, 2011
    Messages:
    205
    Hi Prime, i just checked and i got only one camere (with the AR script) and the camera layer is set to default, the UI layers are used only in the UI object.
  36. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    Now Instead of trying to Bend UIToolkit to work the way I described before. Now, I'm able to achieve the fluidity that UniDDatabase is known for by: 1)Add the name of each texture to a UniDDatabase table, with x, and y position. Now I'm looking to expose some variables in the inspector and I should be good to go.

    2) only thing bugging me now is all the white around the image. I've been talking to customer service over at CodeNWeb, creator of TexturePacker. He explained to me that the background should be transparent and he does not understand where all that white area is coming from.
  37. sc3

    sc3

    Member

    Joined:
    Nov 2, 2010
    Messages:
    101
    Hi Prime31, firstly thanks for sharing this helpful tool for free.

    I've taken a look at your video tutorials and also the documentation on your website, and cannot seem to find any mention of hover states for things like buttons. Is it possible to have different sprites for these?
  38. seon

    seon

    Member

    Joined:
    Jan 10, 2007
    Messages:
    1,403
    Mike,

    This works when disabling a sprite, (disappears) but when you re-enable it, its still gone. It looses its first (up) frame during the process. Surely we don't have to re-set the buttons/sprites UV again after re-enabling item do we?

    Is this a bug?

    Cheers :)
  39. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    1)After changing the name from Json to TXT. I added the following line of code:"public TextAsset texturePackerConfigTxtFile; " above "texturePackerConfigName;" in the UISpriteManager script. I also added

    "//Set the name of texturePackerConfigName
    texturePackerConfigName=texturePackerConfigTxtFile.name;"
    Now the users are able to get the name of the file without having to type it in themselves. All they have to do is click open and search for the file in the inspector. They might also need to change the execution order of they script to make sure UI and UIToolkit get executed first.




    3)I'm looking to implement a mouseover function that I will share with the community. I think I got mouse of it down. I may be stuck.
  40. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    Now mouse over is working 75%. The position is just offset downwards. so I get the bottom 25% of a button reacting to mouse mouse over and 75% empty space bellow the button reacting to mouse over.
  41. zlabs

    zlabs

    New Member

    Joined:
    Mar 21, 2011
    Messages:
    8
    This is one of the most valuable contributions to the Unity Community!! Thanks!!
    I'm testing here and is working very well!
  42. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    UItoolkit is the king of data presentation, I wanted to share what I figured out with other people. I'm like to automate things. My handle should have been 'The Automator" However, UniDDatabase, is the king of data management. When I combined the two I get magic. Here is what I had before UIToolkit. All I'll have to do is scrape out the Unity GUI and plug in UIToolkit and I'm in business. The only thing missing is the mouse over effect. I'm a little disappointed Prime31 hasn't responded to any of my messages yet.






    Here is a link to my page for more info.
    http://forum.unity3d.com/threads/91826-UniDDatabase-2.0
  43. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @namoricoo, what messages are you referring to? I don't recall receiving any emails from you...
  44. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    prime you are too busy playing with your new mac and you didn't pay attention to namoricoo posts here in the forum xDD
  45. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    I sent you one PM, I try not to dwell too much on the past. At the moment I only have one problem. I'm just looking to implement a mouse over effect for PC and Mac games. Everything else is working great. I love UIToolkit. I understand you are busy. On Page 27 I posted how I've been stuck trying to get mouse over picture to work. We can share it with the community when it's done. I also shared the following progress with the community.

    1)After changing the name from Json to TXT. I added the following line of code:"public TextAsset texturePackerConfigTxtFile; " above "texturePackerConfigName;" in the UISpriteManager script. I also added

    "//Set the name of texturePackerConfigName
    texturePackerConfigName=texturePackerConfigTxtFile .name;"
    Now the users are able to get the name of the file without having to type it in themselves. All they have to do is click open and search for the file in the inspector. They might also need to change the execution order of they script to make sure UI and UIToolkit get executed first.
  46. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    Mouse over can be added just like highlight. The idea is nearly identical with the only difference being all the code would need to be wrapped in compiler directives to keep it from running in touch based devices.
  47. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    In "UIButton create", I added
    "
    if(frame.Contains(Input.mousePosition) )
    {
    mouseOverButton=true;
    }
    else mouseOverButton=false;
    "
    mouseOverButton is a bool at the top and I give access to it with a static function in order to see when a mouse over is present. if(frame.Contains(Input.mousePosition) ) is only thing needed for mouse over. I think I need some more code in other files. This is where I get stuck. You might be able to see what I'm missing from the other files because you have greater insight into UIToolkit.
  48. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @namoricoo, the mouse over code should be almost a copy/paste of the highlight code already present in UIToolkit. Check out the code the UISpriteManager uses for highlighting.
  49. namoricoo

    namoricoo

    Member

    Joined:
    Apr 14, 2011
    Messages:
    534
    Ok, you should add that feature to the next update cycle. It would not hurt to also add the two lines of code I talked earlier. Thank you for your dedication and have a nice day. I have to go to work now.
  50. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @namoricoo, the joy of an open source project is that the community can make modifications that then get commited back to the mainline so everyone can benefit. Github makes this really, really easy with it's pull requests. I just added the basis of hover states the but TextAsset change doesn't really make much sense because UIToolkit needs to know the name to get at the 2x version of the file if required. I also manages the loading of the file efficiently removing from memory the contents of the file as soon as it is parsed.