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. synapsemassage

    synapsemassage

    Joined:
    Jul 27, 2009
    Posts:
    334
    Hi,
    I'm struggling with UIText. I replaced the Font from the included TextTest scene with my font created with Angelcode BM Font Generator. Actually I get this error message when hitting playbutton:

    IndexOutOfRangeException: Array index is out of range.
    UIText.loadConfigfile (System.String filename) (at Assets/Plugins/UIToolkit/UIElements/UIText.cs:216)
    UIText..ctor (.UIToolkit manager, System.String fontFilename, System.String textureFilename) (at Assets/Plugins/UIToolkit/UIElements/UIText.cs:173)
    UIText..ctor (System.String fontFilename, System.String textureFilename)
    TextManager.Start () (at Assets/DemoSceneScripts/TextManager.cs:18)

    I tried Hiero also. Seems I include the Hiero files correctly as these files do work but the characters get blured in large areas and renders the Bitmap Font unusable (I'm not talking about the flipped Bitmap problem). It's also not possible to use characters other than from ASCII Space (? please correct me if I'm wrong).

    Any ideas what's going on here?
     
  2. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @synapse, I'm not sure what is going on with Angel bit I believe you can enter any characters you want in Hiero. There is a box where you can pick your charset (assuming the font has them).
     
  3. synapsemassage

    synapsemassage

    Joined:
    Jul 27, 2009
    Posts:
    334
    In theory you can do this;-), due tu buginess it's impossible to copy paste, thus a bit tedious to figure out which characters are missing and then typing it by hand into hiero, just after figuring out how to type the more exotic characters at all. I was suspecting that my pixelfont has too many characters in the charset. The cached charset of my font seems to include 350 characters (unicode). Too many maybe? After trying a bit, it seems the files generated by Angelcode work with my pixelfont and a decreased charset using ANSI.

    I really appreciate UIToolkit!!! I considered using UIText to squeeze a bit performance (draw calls) but also run into problems when building to iPad: while all files are at their place it's throwing a bad access when using UIText. That doesn't happen with my other devices.
     
  4. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @synapse, did you either (a) uncheck the use HD textures checkbox or (b) add 2x textures and font files for the higher resolution screen of the iPad? What are the details of the error message?
     
  5. helios

    helios

    Joined:
    Oct 5, 2009
    Posts:
    308
    What is the best way to to create a sprite with zero functionality? Purely vanity.
     
  6. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @helios, the addSprite method creates a plain old sprite.
     
  7. Zaikman

    Zaikman

    Joined:
    Aug 2, 2011
    Posts:
    17
    First off, I just wanted to say thanks for UIToolkit. It's been incredibly helpful already in simplifying the UI code for my app :)

    I'm new to iOS development, though quite accustomed to Unity development. I'm having trouble wrapping my head around how UIToolkit handles the differences in resolution between the iPhone models and the iPad.

    I understand how adding '2x' to the atlas allows UIToolkit to handle both SD and HD images, but what is the recommended approach for supporting the iPad's 1024x768 resolution? Is this a solved problem, or do I basically have to create a third atlas for iPad textures and then specify which toolkit to use (iPhone or iPad) when creating all of my UI controls based on the configuration of the device?

    Thanks!
     
  8. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @zaikman, I personally use the HD images for the iPad and retina devices. The hassle of making a third set of images that are only a tiny bit bigger than the HD images (1024x768 vs 960x640) doesn't seem worth it in most cases and that is coming from someone who is pretty anal ;) All the positioning methods will auto adjust for HD vs SD so you should only have to make your HUD once. The really anal types (like me) might end up with a few objects that have custom positioning for iPad vs HD but for the most part it should be pretty close.
     
  9. Zaikman

    Zaikman

    Joined:
    Aug 2, 2011
    Posts:
    17
    Hmmm...That's a good point. I guess the difference between the two high end specs is pretty negligible. Now that I think about it, none of the assets would really have to change, except for the background sprites for some of the UI pages to avoid the letterbox effect.
    Thanks for your response!
     
  10. franktinsley

    franktinsley

    Joined:
    Jul 1, 2010
    Posts:
    130
    So I've got UIButtons working and adding them to layouts working but I can't seem to figure out how to just create a sprite by itself as UISprite doesn't have a create() function and I can't find any examples of simply creating sprites. :T
     
  11. Zaikman

    Zaikman

    Joined:
    Aug 2, 2011
    Posts:
    17
    I got this! :)

    You can use a UIToolkit instance to add a plain sprite. Try...

    Code (csharp):
    1.  
    2. // Optional
    3. public UIToolkit toolkit;
    4.  
    5. void Start()
    6. {
    7.     // With a UIToolkit reference - (string spriteName, int xPos, int yPos);
    8.     toolkit.addSprite( "sprite_name.png", 0, 0 );
    9.  
    10.     // Without one
    11.     UI.firstToolkit.addSprite( "sprite_name.png", 0, 0 );
    12. }
     
  12. franktinsley

    franktinsley

    Joined:
    Jul 1, 2010
    Posts:
    130
    Sweet thanks!
     
  13. biopixel

    biopixel

    Joined:
    Oct 16, 2010
    Posts:
    5
    First my cheers to Prime31 - i use the UIToolkit for a platformergame with lots of gui-icons to save drawcalls. works great :) thanks a lot for this toolkit. Now i got a general problem with UIButton not leaving ON-State when dragged-out fast. In detail:

    I've put some buttons near the bottom corners for run and jump. Like this:

    but_inGame_jump.onTouchDown += ( sender ) => inGameJumpOn();
    but_inGame_jump.onTouchUpInside += ( sender ) => inGameJumpOff();

    When i press the button (putting it in it's ON-state and triggereing its function) and DRAG with my thumb quite fast out of the touchscreen, the button keeps hanging in it's ON-State. I could verify this behaviour with the kitchensink-demo. I deactivated the movement of the PLAY-Button and sent this to my 3GS. When i drag my thumb quite fast from the PLAY-button out of the touchscreen i can make the button hang in its ON-State - it wont get the onTouchEnded-event. This happens not always, just sometimes but i fear the user might loose the safe-feeling about userinterface.
     
  14. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @biopixel, I believe what you are seeing could be an artifact of Unity being game loop based and iOS being event based with regards to input. This would crop up on older devices more than newer if my assumption is correct. It is possible that neither the cancelled nor ended phases are reaching Unity. One way to ensure that it wont happen is to zero out any highlighted states if the touch count is 0. Pseudo code for UIToolkit.cs files Update method:

    Code (csharp):
    1. if( Input.touchCount > 0 )
    2.     // normal UIToolkit touch handling
    3. else
    4.     set all 12 _spriteSelected to null
    5.     loop through _touchableSprites
    6.         if touchable.highlighted set highlighted to false
     
  15. Pkman

    Pkman

    Joined:
    Jul 7, 2011
    Posts:
    5
    @Prime31 What amazing tool!

    Im very new to Unity and your tool, just found it today, but I do have some programming skills, my question is, What should I use to create a Timer or clock on the top of the screen? UIText? Sorry for being so noob but i need to know!

    Thanks!
     
  16. franktinsley

    franktinsley

    Joined:
    Jul 1, 2010
    Posts:
    130
    I found something somewhat strange about UIText. The json atlas file for both the standard AND 2x resolutions apparently have to both refer to a .png file of exactly the same name which means when you're creating the json files with texture packer you have to leave out the 2x on the original source font atlas png. If you include a 2x at the end of that particular file name, when UIToolkit switches everything to 2x, the reference to the in-atlast png file will not work and you'll get an error. Took me hours to figure this out.
     
  17. zehreken

    zehreken

    Joined:
    Jun 29, 2009
    Posts:
    112
    Hi,

    Yesterday I have tried our game on iPad2, unfortunately I got a black screen as the gui but our UITooolkit gui works just fine on retina and non-retina displays. I have also tried the in-game levels and they work without a problem. The compiling and installing take place without any problem, and after the Unity logo I just get a black screen and no error.

    Edit: I have decided to make tests with a simpler scene. Unfortunately this didn't work. I can see the gui in Unity's Game window but on iPad, there is nothing.

    Code (csharp):
    1. public class test : MonoBehaviour
    2. {
    3.     public UIToolkit common;
    4.    
    5.     void Start ()
    6.     {
    7.         UISprite splashScreen = common.addSprite("ENR_2DA_GUI_MLS_MainLoadingScreen00.png", 0, 0);
    8.         splashScreen.setSize(Screen.width, Screen.height);
    9.     }
    10. }
     
    Last edited: Aug 4, 2011
  18. _ex_

    _ex_

    Joined:
    May 23, 2011
    Posts:
    98
    hi, Prime31 your tool has saved my game!! :D

    I saw a past post from about how UIToolki doesn't scales down the buttons and sprites.
    (for Android) The positions using the percentages seem to be fine but because the buttons are big there is a bit of overlapping. I tried to scale the object myself, added this method to the UISprite.cs class:

    // Scales the sprite
    public void scale( float factor )
    {
    setSize( factor * _width, factor * _height );
    }

    Seems to work, but in android I think it always uses the small resolution images,
    Am I missing something obvius?.
    I would really love to hear your advice regarding the implementation of Android resolutions and scaling down the
    whole UILayer.

    Many thanks again for your time and your sharing!
     
  19. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Pkman, checkout the demo scenes and videos on YouTube for the basics of how to use UIToolkit and what it offers.

    @franktinsley, check out the TexturePackerSources folder for one way or organizing sprites.

    @_ex_, you can set the target width for when it will choose the 2x texture in the inspector on the UI object. Every UIObject has a localScale property you can set to reduce the size.
     
  20. agreen

    agreen

    Joined:
    Jul 13, 2011
    Posts:
    23
    is it possible to have a single ui sprite/button with multiple hit areas, or alternatively is it possible to have invisible buttons with an arbitrary sized hit area? I have a large screen with tabs and the tabs are built into the screen, I'd like to be able to handle switching around without having the artist recut the UI elements.
     
  21. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @agreen, you an create a class to do any of what you are looking to do.
     
  22. _ex_

    _ex_

    Joined:
    May 23, 2011
    Posts:
    98
    I really don't want to waste Prime31 time,
    (if some other developer could share his wisdom with me I would be very happy) :D
    I can't understand this line of code:

    Code (csharp):
    1. private Vector2? _lastMousePosition;
    Any pointer to this?, I was googling for C# references without luck.
    What does that ? at the end of the vector declaration?
    I'm learning C# programming this game in Unity, I know however C++ and some Java.

    Many thanks, and sorry for hijacking this thread again.
     
    Last edited: Aug 5, 2011
  23. goodhustle

    goodhustle

    Joined:
    Jun 4, 2009
    Posts:
    310
  24. _ex_

    _ex_

    Joined:
    May 23, 2011
    Posts:
    98
    hey @getluky many thanks!
     
  25. agreen

    agreen

    Joined:
    Jul 13, 2011
    Posts:
    23
    I am having a problem with drawing text onto UIButtons. The biggest thing is trying to figure out you the zIndex and depth values work, and how they interact(if at all). I have several UIButtons, one is a large main window and then several smaller buttons, and some text. the text unfortunately doesn't appear in the main window, but it does in the editor. After fiddling with zIndexes and depth values I've been able to get text to draw but usually at the expense of something else. If I just change the depth value of the textInstances it doesn't seem to make them draw at all, iv'e tried tons of values, positive and negative ranging from -20 to 20. If I mess with the zIndexes of the buttons though I can get the text to show, but it has it's own set of problems.

    If I set zIndex to say 10 for the main object the text will draw over the main UI but the other buttons disappear and I can't get them to come back, I've tried setting them to numbers greater than and less than 10, and less than 0 and greater than and less than -10.

    if I set zIndex of the main object to 1 and all the other buttons to 0 I get all the buttons but no text. if i set main to 1, and all the other buttons to 2 I get SOME of the buttons AND the text, but some buttons are missing(ti's the smaller sized buttons if it matters).
     
  26. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @agreen, the best way to check your zIndex values is to view the running scene in the editor from the side. You can see exactly what will be on top and by how much. The zIndex is literally the exact depth of the verts in the normal Unity 3d space so the further from your camera something is on the z-plane the further back it will be when displayed in 2d.

    For dealing with buttons with text you can just set the zIndex of the text to be one (or more) less than the text. Lower numbers mean closer to the camera because z increases as it moves deeper into your scene.
     
  27. agreen

    agreen

    Joined:
    Jul 13, 2011
    Posts:
    23
    ah thanks a lot, that tip helps tremendously, it seems like no matter what I set the z value of the main UI it's in the same place relative to the camera which make me think we are probably setting the cameras position based on something in the UIToolkit. This at least puts me on a good track to finding the problem!

    edit: though it does still seem like UITextInstance.depth does nothing
     
    Last edited: Aug 5, 2011
  28. goodhustle

    goodhustle

    Joined:
    Jun 4, 2009
    Posts:
    310
    It seems like a single UIToolkit will properly prevent touches on higher TouchableSprites from cascading downwards, but it seems like it would be useful to have this work across multiple UIToolkits in descending layer order as well. It might be nice to have a public flag on the UI class that could be checked each frame to see if some UIToolkit consumed the touch on that frame as well, so that an in-game touch target could check if a HUD claimed the touch before processing it.
     
  29. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @agreen, it's most definitely used. Check the source.

    @getluky, for multiple UIToolkits the easiest way to handle it right now is to either have all your touchables in one atlas or try to separate them into right/left side of the screen. The other alternative is to move touch handling into the UI class but that would add a level of complexity for sure.
     
  30. goodhustle

    goodhustle

    Joined:
    Jun 4, 2009
    Posts:
    310
    @prime31 Thanks for the response. I'm halfway through moving touch handling into the UI class, and I gotta agree about the complexity! I don't think this is going to be for everyone, but unfortunately I'm not going to be able to avoid it.
     
  31. goodhustle

    goodhustle

    Joined:
    Jun 4, 2009
    Posts:
    310
    @prime31, may have found a bug. When positioning sprites slightly offscreen, the addToRect method called by UITouchableSprite's touchFrame getter will clamp the x and y position of the rect to the screen area, but won't subtract any screen area that is cropped off of it. So any button sprites that are offscreen will have an inaccurate touch area that extends past its visible area to clamp to the screen bounds, even though the texture is placed correctly. I've been having problems arising from this for a while, as I have a character sprite that sits slightly offscreen which seems to register touches outside of its texture bounds. I've temporarily worked around it by just not clamping the touchFrame values, but it would be equally valid to just crop the touchFrame to the screen area.
     
  32. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @getlucky, I'll keep my eyes peeled for a pull request ;)
     
  33. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Will this work with Windows / Mac stand alones or is it strictly for iOS?
     
  34. angelann_182000

    angelann_182000

    Joined:
    Oct 5, 2010
    Posts:
    26
    hi, I cant seem to make the UIText work. Could you pls create a tutorial for this pls T_T
    another problem is I want a UISprite to be hide/unhide by another class.. I use the UISprite image1 = UI.firstToolKit... It shows on the screen but when I tried to access the image1 it returns null.
     
  35. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @kahuna, it will work on all platforms.

    @angelann, there are already tutorials on YouTube and a demo scene of nothing but UIText objects. Give them a look.
     
  36. _ex_

    _ex_

    Joined:
    May 23, 2011
    Posts:
    98
    Hello,

    What would be the simplest approach to programming dialog popups? ie for a "Game Paused" dialog
    that covers the game and hud. I was using OnGui so when the popup was not active it just returned and didn't draw anything or processed events.

    Thanks!
     
  37. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @ex, I personally would make a panel with a couple buttons (unpause, settings, menu, etc) and maybe a full screen mask behind it.
     
  38. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Outstanding! I don't normally visit this section of the forums so didn't notice this until today. Might want to add a post in the Showcase forums where it may get more visibility. :)

    Edit: Just watched the two intro videos, looks awesome! Does this have any Garbage Collector issues like Unity's built in GUI system? I've had to abandon the built in GUI system and am now using GUIText and GUITexture for anything that is performance sensitive. I'm hoping this will be a big improvement over that.

    Also, I saw that it includes various animations, including rotation. Can I also rotate a texture through code, such as in a speedometer or dial?
     
    Last edited: Aug 6, 2011
  39. seon

    seon

    Joined:
    Jan 10, 2007
    Posts:
    1,441
    Yes, the entire GUI Toolkit is controlled via code. With lots of options like rotating, positioning, scaling etc.

    This is a one draw call solution with no real GC requirements once GUI is setup, other than any stuff you generate due to animating your controls.

    I found this to be very easy to implement and understand, and performance is stellar! Mike and community have done an awesome job on this toolkit.

    The only thing I think it really needs still is a masking ability to create items like scroll lists that sit inside a Rect.
     
  40. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Seon, masking and scroll lists would be an awesome addition. I created a new branch a few days ago that aims to remove GameObject reliance. The hope is to speed things up one more notch and ditch the GO creation completely.
     
  41. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    @Seon prime[31] - Thanks. So this is like a GUITexture replacement on steroids, right? Excellent. So how do you handle dynamic text (such as numeric read outs), with GUIText?
     
  42. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @bigkahuna, UIText is kind of a factory for UITextInstance. Once you have a UITextInstance you can just change the text property.
     
  43. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    @Prime31 - Ok, so you're saying this also supports text and I can dynamically change it? That's great! Sorry for the stupid questions, I've not even had a moment to look at this yet but now have a very good reason to! :) Thanks!
     
  44. namoricoo

    namoricoo

    Joined:
    Apr 14, 2011
    Posts:
    534
    Prime31, I get a lot of errors when I downloaded the revised code. Example errors, Failed to create cache directory for asset Assets/DemoScenes/PanelTest.unity. 2)Asset is dirty after import?. I got 86 errors. Previous code still works fine.
     
  45. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @namoricoo, I just uploaded a fresh export to Github. Give that a shot.
     
  46. namoricoo

    namoricoo

    Joined:
    Apr 14, 2011
    Posts:
    534
    Are you using Unity 3.4??? I'll go check it out.

    if( (Application.platform == RuntimePlatform.IPhonePlayer ) ||
    (Application.platform == RuntimePlatform.Android) ||
    (Application.platform == RuntimePlatform.OSXPlayer) ||
    (Application.platform == RuntimePlatform.OSXDashboardPlayer) ||
    (Application.platform == RuntimePlatform.OSXEditor) ) Etc.

    It's easier to organize than...
    #if UNITY_EDITOR || UNITY_STANDALONE_OSX || UNITY_STANDALONE_WIN || UNITY_WEBPLAYER


    In the grand scheme of things it does not make a difference. Just easier to organize with brackets. Just trying to contribute.
     
    Last edited: Aug 7, 2011
  47. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @namoricoo, yup.
     
  48. namoricoo

    namoricoo

    Joined:
    Apr 14, 2011
    Posts:
    534
    Maybe it takes time to get updated. I'll try again tomorrow. I have to go to work now.
     
  49. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @namoricoo, its in the Downloads section:
     
  50. namoricoo

    namoricoo

    Joined:
    Apr 14, 2011
    Posts:
    534
    I downloaded that one; but, I'm still getting the same errors. The previous version does not give me any errors. When I tried the mouse over. The mouse over works. However, mouse down picture shows up as the exact same picture as the no mouse present picture. When I try to exit. I have to force quit because of errors. I don't know if anybody else is seing those errors.
     
    Last edited: Aug 7, 2011