Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

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

  1. reissgrant

    reissgrant

    Joined:
    Aug 20, 2009
    Posts:
    726
    I'm on windows and had gitGUI installed from a few months ago. I'm Almost there.


    *EDIT: OK, sent a pull request ;)
     
    Last edited: Jun 15, 2011
  2. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
    Hi guys one question when I use the Hiero and save (Save BMFontFiles) it creates the .fnt files and some other 9 png files (With characters fliped out) I need to concatenate all png files and then use it in texture packer (Also renaming the fnt file into txt)

    Ps: I'm using hiero 2.0 (I've got it here... http://slick.cokeandcode.com/demos/hiero.jnlp)


    Steps from last messages
    - create and export font bitmap and config file from Hiero
    - rename the .fnt file to "myfont.txt" and rename the .png file to "myfont.png"

    - create a new Texture Packer document and drag the exported png file from Hiero into it
    - set the data file name in Texture Packer to "myatlas"
    - export from Texture Packer then rename the exported myatlas.json file to "myatlas.txt"
    - drag the myfont.txt, myatlas.txt and myatlas.png files to a Resources folder
    - set the texturePackerConfigName in the inspector to myatlas
    - create a UIFont with: var text = new UIText( "myfont", "myfont.png" );
     
  3. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @reissgrant, many thanks. the pull request was received and merged in.

    @leonardoaraujo, if you are getting 9 images you are not setting the output file to a large enough size in Hiero.
     
  4. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
  5. raptoplob

    raptoplob

    Joined:
    May 24, 2011
    Posts:
    12
    I've created a vanilla container, was surprisingly easy actually! However I've noticed that you can't add UIText components to it... It's not a biggie as all the text is nicely contained within the single text component, but I was wondering if this was a bug?

    Also I'm still wondering about the drag and drop functionality. As I said the 'onTouchBegan' and 'onTouchEnded' functions give this error:

    "BCE0031: Language feature not implemented: InPlaceAddition."

    I've got a grid based inventory system, so being able to drag items around is quiet important.

    Cheers.
     
  6. Acumen

    Acumen

    Joined:
    Nov 20, 2010
    Posts:
    1,041
    Did I understand it correctly that Hiero can handle only export specified characters as a font file, while glyphdesigner is not capable of doing so ?

    And Prime31 is more in favor of glyphdesigner since it transfers data more flawlessy ?

    Cause I'd be mainly using one of the two programs for setting up score or timer fonts, which would basically only consists of numbers. And manually tweaking these by hand to only extract the required digits would be a waste of time :)
     
  7. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @rapto, UIText will need a fee enhancements before it will work with a container right now.I have no idea what the erroressage you are seeing is in relation to. It isn't coming from UIToolkit for sure.
     
  8. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
    Hi guys I've upload this video showing how to use UIToolkit + TexturePacker + Hiero in a small sample creating a simple button and text. You can also check in my playlist for other tutorials (but unfortunately those are in portuguese)
    http://www.youtube.com/watch?v=DynV1eVrqlk

    Sorry about my english and any errors on my video (It's 2:00AM now in brazil)
     
  9. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @leonardoaraujo, awesome job! Your english was just fine. Just a couple very minor points to add:

    - you can make your textures look even crisper if you use the override settings and set them to truecolor (useful if your textures look a bit muddy)
    - instead of using the ugly way of positioning (UIRelative.yPercentFrom) there is an extension method for that: positionFromTopLeft like you used on the first button. I always cringe when I see it written longhand :)
     
  10. reissgrant

    reissgrant

    Joined:
    Aug 20, 2009
    Posts:
    726
    I got a textInstance to animate using the sprite.positionTo() in a for loop using its _textSprites[], but am not sure if there is an easier way?
     
  11. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @reiss, for now, that is the easiest way. Another way that is also a bit hackish is to stick all the sprites into a container and position it.
     
  12. reissgrant

    reissgrant

    Joined:
    Aug 20, 2009
    Posts:
    726
    OK, I'll try that too. Thanks for the quick reply; and thanks again for this toolkit.
     
  13. raptoplob

    raptoplob

    Joined:
    May 24, 2011
    Posts:
    12
    @prime31 I'm still unable to fix the onTouchBegan bug... There really isn't any code to it, so I must not be using the function properly?

    Code (csharp):
    1.  
    2. InvItem.onTouchBegan += dragItem;
    3. function dragItem(){
    4.     Debug.Log("Drag Started");
    5. }
    6.  
    I also have another problem, I'm creating my first progress bar, but the bar is appearing underneath my background sprite, while the holder is on top. If I create both images as individual sprites, both appear on top of the background, so I think it has something to do with the ProgressBar's 'create' code which layers the components. Any thoughts?

    Thanks again
     
  14. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @rapes, you button handler has the wrong method signature. An event handler needs to march it's delegate which defines it's signature. zIndex let's you change sort order.
     
  15. helixx2dbl

    helixx2dbl

    Joined:
    Jan 19, 2009
    Posts:
    9
    Hey Prime,

    I love the UIToolkit, it works great. Very clean c-sharp'n as well. I especially appreciate the fact that it uses delegates and events, super quick to develop with. I was cruising along with it until I got to the UITextInstance and I am thinking it won't be powerful enough to do what I need.

    My question is - What is the best plan of attack to get left/right justification and UIObject.parentUiObject?

    And

    For time's sake - Would it be better to use Unity's built in 3dText and just extend a UI Baseclass then render it in the Ortho camera with the other sprites?

    Thank you in advance for an awesome tool. Oh - the SocialNetworking plugin is great too, saved me a few weeks :p
     
  16. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @helixx2dbl, the UIText class and it's friends are lacking many features right now. I will eventually get to adding them when my project needs them but in the mean time you can use the UIText sizeForText method to do some simple left/right/center alignment.

    Or even better you can do up a nice addition to the UIToolkit and send over a pull request :)
     
  17. helixx2dbl

    helixx2dbl

    Joined:
    Jan 19, 2009
    Posts:
    9
    @Prime31, Thanks for the quick reply. Yes, I saw the sizeForText but I gotta have the text update during a game :D, seems like a lot of updating when I change the text. I tried rendering a 3dText object in the Ortho camera and it works great, I'll see how that goes for now and send you any code I write (or send a pull request) since it has every text feature I need!

    Once this project is cooling off abit I'll try to find a few days to write a nice addition :)

    Thanks again.
     
  18. helixx2dbl

    helixx2dbl

    Joined:
    Jan 19, 2009
    Posts:
    9
    It worked really well to extend UIObject and write a class to accept a GameObject with a 3d Text Mesh on it and render it with all the other gui stuff (You could add any component you wanted to render into your hud). Then it parents and moves around perfectly. Its another draw call but whatevs. If anyone cares about this solution let me know and ill send over the class. I don't think its really the direction that prime31 would want the UIToolkit to head (mixing gameobjects with sprites)? Yay, Ney?
     
  19. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @helixx2dbl, it definitely doesn't really fit into the UIToolkit paradigm of 1 draw call and pixel perfect but I'm sure there are others around who might like it.
     
  20. Matkins

    Matkins

    Joined:
    Aug 24, 2009
    Posts:
    152
    @helixx, I'd be interested in seeing it. The text in UITookit is something that i've opted not to use for various reasons, so i'm very much interested in alternative options.
     
  21. helixx2dbl

    helixx2dbl

    Joined:
    Jan 19, 2009
    Posts:
    9
    Check your PM's amigo
     
  22. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
    Hi Prime31 I'm having a problem regarding the hidden property of the UIJoystick, here is the code that I'm using...
    Code (csharp):
    1.  
    2. private UIJoystick joyControle;
    3. joyControle = UIJoystick.create( "joy.png", new Rect( 0, Screen.height / 2, Screen.width / 2, 300 ), 120, -85 );
    4.         joyControle.deadZone = new Vector2( 0.6f, 0.6f );
    5.         joyControle.setJoystickHighlightedFilename( "joy_press.png" ); 
    6.  
    7. // Latter on I call
    8. joyControle.hidden = true;
    9.  
    The joystick control seems disabled, but it's still visible... Could you give me some light about it
    Thanks again
     
    Last edited: Jun 21, 2011
  23. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    Im pretty sure there isn't a hidden wrapper yet for the joystick. You can either add one or just set the individual spruces to hidden.
     
  24. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
    Any tips on how to create this wrapper (I've already changed the UISprite _joystickSprite to public and set it's property hidden to false and it worked until I've touch in the Joystick area...) Any tips on how to create this hidden wrapper (Maybe other component that did that?) I will be very proud of my self if I can help this great project!
     
  25. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    Well, as it turns out it looks like I already had it implemented in my local branch. I just pushed it live to Github so you can grab it and give it a look.
     
  26. leonardoaraujo

    leonardoaraujo

    Joined:
    Jun 3, 2010
    Posts:
    87
    heheh Thanks It worked!! thanks
     
  27. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Apologies if this has been discussed, but is there a single point where I can find the links to the tutorials? I watched the video from the first post. That led to a part two where there's mention of an "Events Tutorial"? That what I'm looking for - how to configure the events in Javascript.

    EDIT: Actually - just fumbled something together and got it working. Would be good to know though if there are other tutorials out there - and from the sounds of things, there are. This looks like an awesome tool. Thanks heaps for making it!!!
     
    Last edited: Jun 21, 2011
  28. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
  29. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Ah - awesome. Thanks. I had checked out your main Unity page (http://prime31.com/unity/) and couldn't see UIToolkit there, so I thought maybe you didn't have anything on your site for it yet.

    Another quick question - how would you recommend disabling a button? I had a look through the properties and there doesn't seem to be an "enabled" type deal.

    I'd like to be able to set up buttons that disable themselves after they have been pressed once.
     
  30. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    Just swap your texture to a disables one (or reduce opacity) and remove your touch handler.
     
  31. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Yep - sorry, that should have been obvious to me. Thanks heaps for the help! Really appreciate you putting out a product like this - it's brilliant.
     
  32. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Hey... me again :)

    Sorry, I'm following these steps exactly but I end up with text that's all messed up. Anyone know where I might be going wrong?

    $uitext.png
     
  33. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    Just one more thing worth noting (again, might have been mentioned), it's unfortunate that this can't be added to a project that already has EZGUI present. The classes use the same names.
     
  34. Lostlogic

    Lostlogic

    Joined:
    Sep 6, 2009
    Posts:
    693
    I'm trying it on the Android platform and have a question:

    The TextTest scene looks fine, but...when I try to recreate it, the text is not anchored where expected.

    It's is shifted down and to the right. Can you help me with what I am doing wrong? I tried setting everything as it is in the TextTest scene, but something is off.

    Thanks!
     
  35. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @geppetto, what does your atlas look like? Is it a square? If not make it one.
     
  36. Lostlogic

    Lostlogic

    Joined:
    Sep 6, 2009
    Posts:
    693
    I moved the camera around and now the text appears in the right place, after scooting it around.

    One question now, how do I get text to fit within the window regardless of resolution?

    I'm doing a trivia game where the question appears at the top, with 3 choices under it. Any suggestions on how to display the multi-line question up top, with three single line answers below it (and all fit within the screen regardless of res)?
     
  37. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @LostLogic, there is a method that will tell you the size of the text. You can use that to determine where to put line breaks.
     
  38. Lostlogic

    Lostlogic

    Joined:
    Sep 6, 2009
    Posts:
    693
    Gotcha, I thought there was a way to auto-line a block of text based on the screen size.

    I'll try out the text.sizeForText() function.
     
  39. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    Not yet. I have a lot of additions that I want to add to UIText but until I need them for my projects I can't spare the time to add them right now.
     
  40. Lostlogic

    Lostlogic

    Joined:
    Sep 6, 2009
    Posts:
    693
    I'm noticing that sizeForText() is returning values less than what is used in reality. For example, it is telling me the text is 445 wide when it is exceeding the Screen.width of 480.

    It appears as though my camera is too close. Is there a formula to use in order to ensure the camera is 1:1 distance away from the text?
     
  41. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Lost, the camera should be orthographic so distance doesn't matter.
     
  42. Jon-at-Kaio

    Jon-at-Kaio

    Joined:
    Oct 17, 2007
    Posts:
    185
    so is there any 'wrap text' to fit inside a given area? type function
     
  43. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jon_unity_jumping, you can certainly make a function pretty easily that accepts a width and automatically wraps the text. If you do, please send a pull request so the rest of the community can benefit from the addition.

    Edit: I believe I even have a really, really old file with the simple algorithm to use for wrapping (uses GUIText but the algorithm is the same: https://github.com/prime31/P31UnityAddOns/blob/master/Scripts/GUI/GUITypeWriter.cs)
     
    Last edited: Jun 21, 2011
  44. Lostlogic

    Lostlogic

    Joined:
    Sep 6, 2009
    Posts:
    693
    Oh, the TextTest scene is set to perspective. I was modeling after it.
     
  45. Jon-at-Kaio

    Jon-at-Kaio

    Joined:
    Oct 17, 2007
    Posts:
    185
    dude, you are a star.
    I've now dropped using guitext.
    Only problem I'm having is a glitch with 'spaces' they seem way too big.
    I've used Glyph designer to output the files havent done nething apart from running with the defaults
     
  46. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jon, you can open the file that Glyph designer spit out and just adjust the value manually as a quick fix.
     
  47. SteveJ

    SteveJ

    Joined:
    Mar 26, 2010
    Posts:
    3,085
    @Lostlogic - I think Prime31 is referring to the camera that's instantiated by UIToolkit. I had a similar issue to what you're describing and it was due to the fact that I hadn't set my UIToolkit gameobjects to the UI layer that I'd defined.
     
  48. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    I started expiramenting with UIToolkit.
    Looks like a great UI plugin.

    I need to change my screen size while playing(for example, from web to fullscreen).
    I tried the examples(PanelTest,KitchenSink,etc...):
    The visual of the gui change in the way I want and expects, but when I click on buttons after I changed the screen size, the touch is off.
    I click on the bottom of the screen, and a button at the top act like I clicked on it. I click on a button and it won't react.

    Can anyone give me hint where should I look in the code to fix this?

    thanks
     
  49. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @De-Panther, you will need to make a couple modifications to get live texture updating for screen resolution changes. It was designed to pick a texture atlas on start and then use it assuming the screen doesnt change (iPad/Android/iPhone). Probably the easiest way to handle it is to destroy and recreated the UI object and all it's children. Maybe just have a prefab for both resolutions and instantiate on resolution change.
     
  50. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    589
    Thanks, I toght it was doing this stuff on start.
    I'll try your Ideas.
    But the screen looks good when I change the screen size, it's just that it won't get the correct mouse location - to build the gui from start looks to me like overkill on runtime.