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,421
    @hippo, but of course there is text size support. It's a requirement for the text alignment feature coming in the future I believe the method is sizeForText if I'm not mistaken.
  2. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,333
    Wow, you must be some kind of mad genius thinking of that too. I only posted half hoping it would be in there. What I must really bother you for is a list of commands and their parameters. That would really speed things up this end :) Pretty please that you might throw a quick page up? :)
  3. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @hippo, nothing genius about this one unfortunately. I needed to right align some text and that required the width so the method was born!


    A very basic (and not complete) API reference is available here: http://prime31.com/unity/docs/#uiToolkitDoc

    If you use C# and MonoDevelop you can use code complete to get a full list of available methods. Over time we will fill in the method summaries which MonoDevelop displays in the code complete window. Some stuff is in there but a lot ins't yet.
  4. leonardoaraujo

    leonardoaraujo

    Member

    Joined:
    Jun 3, 2010
    Messages:
    87
    Hi Prime31 Now I really don't have any excuses for using your GUI system it works perfect on my nexus one (The only scene that did not worked was the joystick)

    Thanks again for the great tool!
  5. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    The joystick demo scene hasn't been given the proper relative positioning support to work on all platforms. It is currently iOS non-retina only but it shows all the tools you need to make it for any platform.
  6. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,333
    I found some oddities in text alignment on mac unity editor and pc unity editor - but that might just be me. I will investigate further... namely the mac version was whole newline too high. What might cause that do you think?

    Thanks for the api docs! I am happy as a pig in muck. It is still quite baffling you did not charge for this :)
  7. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @hippo, I can't imagine there would be a difference between the Mac and Win newline. It comes from the exported fnt config.

    There is no charge for UIToolkit so that Unity devs have no excuse why their menus and HUDs are not as polished as their games. Not to mention with the advent of the Asset Store there isn't much sharing going on anymore. Everyone dumps their wares in the AS instead of sharing. Sometimes a freebie is good to get the new users pumped and motivated about using Unity.
  8. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,333
    You have succeeded on my end at least. It has also got me thinking "what could I contribute" as well.
  9. duke

    duke

    Member

    Joined:
    Jan 10, 2007
    Messages:
    718
    Just to be picky - why the lower case method names?
  10. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @duke, just to be different than the Microsoft code guidelines mainly :) Not to get into a discussion about the benefits of different code guidelines or any of that off topicness over the years programming many, many different languages camel case method names and instance variables with capital lettered class names was always more clear but YMMV.
  11. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    Just updated from the first version to the latest. The process for making buttons relative to the edges is awesome now.

    Just one thought though - all the position methods have parameters which are ( y-axis , x-axis ) for their adjustment. It's a bit confusing. Might be better to be x-axis, y-axis ordering like Vector2's. Though you would have to reorder the methods to be positionFromRightTop rather than positionFromTopRight which doesn't sound so natural I guess...
  12. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tainted, it was a tough call but sounded more natural to have top/bottom first due to the way we speak (English at least).
  13. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    Yeah fair enough, just one of those situations where you gotta make a call I guess.

    Just noticed the UIToggleButton isn't showing it's highlighted state. It's missing the

    Code (csharp):
    1. this.highlightedUVframe = highlightedUVframe;
    from the constructor and the

    OnTouchBegan method with
    Code (csharp):
    1. highlighted = true
    .


    I also started hacking together a discrete slider (one that goes from min to max in increments of 1). As I was doing that I noticed that the UISlider goes from 0 to 1, but the knob doesn't move for small values close to 0 and 1. You've got the position going from:

    Code (csharp):
    1. float xPos = position.x + normalizedKnobValue * width;
    while if you do this:

    Code (csharp):
    1. float xPos = position.x + (_sliderKnob.height/2) + (normalizedKnobValue * (width - _sliderKnob.height));
    basically interpolating between the knob min max rather than the slider's min max, the knob will move for every value. It's not a big issue, just trying to make the awesome code even better :D
  14. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    Good finds. I'll be looking forward to your patch or pull request :)
  15. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    haha will do once I come out from under my TortoiseSVN shell and learn how to do a GIT pull :)
  16. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    There is a tortoiseGit if I'm not mistaken. Works just like the SVN one.
  17. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    Downloaded Git + Gitti (I'm on a mac atm). Made the changes for the toggle button but now I can't push them as a patch. Argh, I think either Gitti doesn't support patches or I've cloned the repo instead of pulled it. Since the repo is read-only I should be creating a patch which is committed and then accepted on your end right?
  18. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tainted, so far, you get an A for effort! Well done! Here are the steps to take to pull it off:

    - Click the fork button to get your own fork of the repo:
    [​IMG]
    - Make the changes in your local repo and check them in (unlike SVN, checking in with Git doesn't push the changes to the server)
    - Push the changes to the Github server
    - Make a pull request on the UIToolkit Github page

    Once you get used to Git SVN becomes a painful chore to use. Might I recommend the wonderful Gitbox (has a free version) or the number one Git app Tower (paid app)


    Edit: I just pushed the fix for the UIToggleButton. I'm not so sure the slider positioning is accurate though. You are taking into account the sliderKnobs height which shouldn't have anything to do with the x-position of the slider knob. The knob is basically just a fraud (just a on the slider. Touching the track is what really matters. Like this: http://markup.io/v/9kpgvd65sz76
    Last edited: May 10, 2011
  19. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    @Prime31 Ahhhhhh. Enlightenment! Ok I've set it all up. I see you've already made the changes to the toggle. I'll be sure to check in any more bugs I find. Cheers :D
  20. RolfBertram.com

    RolfBertram.com

    Member

    Joined:
    Mar 1, 2011
    Messages:
    110
    I converted the sample code to JS, and get a nice "SCORE 123" display. :confused:But I don't know how to update the display during gameplay with the ever increasing score. I got only a few months of coding experience, and only JS.


    Code (csharp):
    1. class RolfScoreDisplay extends MonoBehaviour {
    2. private  var text1 : UITextInstance;
    3. function Start () : void {
    4. var text = UIText( "prototype", "prototype.png" );
    5. var score = 123;
    6. var x = UIRelative.xPercentFrom( UIxAnchor.Left, 0.07,0 );
    7. var y = UIRelative.yPercentFrom( UIyAnchor.Top, 0.08,0 );
    8. text1 = text.addTextInstance( "SCORE "+score, x, y , 1f,1,Color.yellow );
    9. }
    10. }
    11.  
  21. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Rolf, the following should work:

    Code (csharp):
    1. text1.text = "your new text";
  22. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
    I' m trying this out now but when I load the game it shows the button like this:
    [​IMG]
    I used this code:
    Code (csharp):
    1. var playButton = UIButton.create("Play.png","Play.png",0 ,0);
    I don't have a up and down button that's why there both Play.png
  23. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    Without seeing your texture atlas and scene view it's hard to say what the issue could be. Is your UI and UIToolkit GameObject at 0,0,0 position?
  24. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
  25. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @falin, it looks like everything is setup perfectly. In the screenshot you show your SD json file. Is you HD one setup properly? Can you try unchecking "auto texture selection for HD" and restart your scene to confirm?
  26. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
    Last edited: May 11, 2011
  27. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @falin, double check your UIToolkit object to make sure it is at 0,0,0. I bet that is the issue. If so, I'll make it set itself to 0,0,0 in awake to avoid this in the future.
  28. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
    @Prime31 ok i will look and wait for the update.

    But thanks for your help and patience.
  29. .Tom.

    .Tom.

    Member

    Joined:
    Nov 30, 2007
    Messages:
    918
    Latest version of the kit looks really good, I had tried an earlier version, and it had a bunch of problems, but now it looks really nice.

    What I'd like to have is buttons like Unity GUI does - a background image with text supplied as a string. I really don't want to create a new image for every button. :)

    From what I've gathered in the YouTube videos, that's pretty easy with a button and a text overlayed with the proper z layering. So I'll probably code it myself and contribute - unless (and that's why I'm posting) - someone else is already working on something similar?
  30. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tom, I haven't heard of anyone making it but feel free to dive on in. The UIText class would need a couple additions (which it needed anyway) like drawInRect or something like that to automatically add linebreaks where necessary and text alignment. The sizeForText method is already there which is the required base for all the rest of the goodies.
  31. .Tom.

    .Tom.

    Member

    Joined:
    Nov 30, 2007
    Messages:
    918
    I think restricting it to one line, etc. would do for the moment - really just simple buttons would be great. You know, if you have "Continue", "New Game", "Options" and "Credits" it would be nice to have only 2 (on and off) images in the texture set and not 8. So yeah, getting the dimensions of the button, of the text and then aligning it properly would be the main part.

    One thing I noticed playing around is just how much damage compression does to the textures. For some reason I don't yet understand, Unity GUI textures are much closer to the source. Does the spritemanager you use do anything to the textures in addition to the import compression?
  32. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tom, I would suggest not using compression for you GUI atlas. Compression destroys fidelity especially when going pixel perfect like UIToolkit is. Gradients get slammed the worst.
  33. .Tom.

    .Tom.

    Member

    Joined:
    Nov 30, 2007
    Messages:
    918
    True. But even at 16 bit (and a crushing 0.5 MB per 512x512 atlas) there is still visible artifacts compared to the source PNG.

    Here's a comparison. The top image is a screenshot inside the editor, the bottom is pasted in from the source file. Now I do realize that 16 bit is not identical to 24 bit and that I should expect some loss - but this much? Using 24 bit means going to 1 MB per 512x512 which means 4 MB for 1024 and hoping that 1024 is enough because you can't seriously put 16 MB into your iPhone game just for the GUI atlas.

    Attached Files:

  34. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tom, something looks fishy there with that banding. Double check your texture import settings. The UI elements are all displayed on screen pixel perfect so whatever your texture looks like compressed should be exactly what is output.
  35. TaintedLemon

    TaintedLemon

    New Member

    Joined:
    May 4, 2011
    Messages:
    16
    @Prime31

    I've added a simple UIColorPicker class. Committed the changes and sent a pull request and everything!
  36. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Tainted, wow! Welcome to the world of Git! I'll pull it into mainline later today.
  37. Matkins

    Matkins

    New Member

    Joined:
    Aug 24, 2009
    Messages:
    141
    @Prime I'm trying to use two "UIToolkit" children so i can use a separate Atlas. Can't get the extra one to work, i keep getting the "Exception: can't find texture details for texture packer sprite"

    The new UIToolkit child has the correct name for the new atlas .txt and i've given it it's own material. In the code do i still use "UI.firstToolkit.addSprite" to create the sprite from the new atlas?
  38. .Tom.

    .Tom.

    Member

    Joined:
    Nov 30, 2007
    Messages:
    918
    @Matkins: I found out the hard way that the textures must be in a directory that is named "Resources". Maybe that is your problem, too?
  39. Matkins

    Matkins

    New Member

    Joined:
    Aug 24, 2009
    Messages:
    141
    @Tom: Thanks for the effort, but that's not my problem.
  40. Matkins

    Matkins

    New Member

    Joined:
    Aug 24, 2009
    Messages:
    141
    @Prime: Apologies, I didn't notice the MultipleAtlasManager demo. I see now that I have to get the reference to the new UIToolkit and parse it to the create function. Cheers.
  41. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @Matkins, you've got it. The sprite needs to know it's proper manager so all the create methods have an alternate that takes in a specific manager.
  42. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
    Ok I got another problem here.
    I want to show some buttons when the game pauses so i thought of this code(just for testing out):
    Code (csharp):
    1. if(pauseGame){
    2. var ResumeButton = UIButton.create("Resume.png","`Resume.png", Screen.width/2-90 ,Screen.height/2+2);
    3. }else{
    4. ResumeButton = null;
    5. }
    but that doesn't work.
  43. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @falin, there are a bunch of things wrong with that code:

    - first off, ResumeButton is being scoped to the "if" portion of the block and it does not exist anywhere else
    - ResumeButton in the "else" portion doesnt exist. I don't even know how that could get by the compiler. Toss that up as yet another reason so use C#.

    You need to make ResumeButton an instance variable. Setting it to null will not remove the button. All that is doing is setting the instance variable to null. You can use the removeElement method to remove the button.
  44. Falin

    Falin

    Member

    Joined:
    Sep 29, 2009
    Messages:
    242
    thanks for the answer
  45. ssmchan

    ssmchan

    New Member

    Joined:
    Nov 6, 2010
    Messages:
    72
    Dear Prime,

    Is it possible to make the "Picker" selection rollers for Unity3D? Thanks..

    [​IMG]

    Regards,
    Simon.
  46. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    Sure is. UIToolkit isn't your best bet for something like that though. Making it in 3D is way easier.
  47. ssmchan

    ssmchan

    New Member

    Joined:
    Nov 6, 2010
    Messages:
    72
    Dear Prime,

    Thanks!!

    On the other hand, I am now going to buy the AdWhirl plugin.. I have a question, when I buy AdWhirl but I still need to use or buy iAd, Admob plugin?

    Thanks.
  48. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,421
    @ssmchan, AdWhirl lets you pipe through quite a few other networks so you don't need to purchase anything else.
  49. ssmchan

    ssmchan

    New Member

    Joined:
    Nov 6, 2010
    Messages:
    72
    So AdWhirl is a service and how can I get the Ad money?? Need other extra cost?? ( services )...

    Thanks.
  50. ssmchan

    ssmchan

    New Member

    Joined:
    Nov 6, 2010
    Messages:
    72
    Dear Prime,

    I have just bought your AdWhirl and Etcetera Plugin, Thanks.

    Regards
    Simon