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

    adam718

    Joined:
    Mar 11, 2012
    Posts:
    58
    Hi!
    I want to that you for your reply.

    I have 3 problems now, and want you to help me.

    1. UIToolkit current version(2012-05-02) cann't be run on Android.
    I asked before and I think no update on that now.
    UIToolkit(2011-11-03) runs on Android very well.
    When are you suppose to update it?

    2. BMFont with UIText in UIToolkit.
    I use Angelcode's BMFont Tool (current version) for bmfont and printed some texts with it.
    But output text is not chopped on edge as following.

    $09.png

    What's wrong with me?
    When I try to use custom font with 1024 glyphs with Hiero, now way to select whole glyphs.
    So I like to use BMFont.
    Did I make BMFont in a wrong way?

    And could you tell me how to select HD SD in bmfont?

    3. When 2 text is overlapped with each other, text's appearance is like following.

    $09_1.png

    But When I use GUI / text shader, result is what I expected. ^-^

    I asked many questions, help me...

    Thank you,
    Best Regards,
    Adam.
     
  2. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    my version of UIToolkit does not have the same constructor as you, but having made some changes to the kit, i think it would be fairly easy to save the sprites in a public var in the UIProgressBar class and then be able to set them individually.
     
  3. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    for hd font i doubled the font size (i use hiero), saved it out and renamed the resulting fnt file as FontName2x.txt then it all happens automatically
     
  4. adam718

    adam718

    Joined:
    Mar 11, 2012
    Posts:
    58
    Hi!
    Thank you for your quick reply.

    - Where can I get hiero on Windows?

    $09_1.png

    This is I got but as you can see even if font includes cjk and other custom glyph but only ascii is loaded.
    How can I include whole glyph into fnt?

    - And about android version error?

    Thank you,
    Adam.
     
  5. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    i forget where i got hiero for windows...google for it, i'm sure you'll find it (sorry i could have googled and found the link but i'm in a hurry)...can you link the font you're having problems with? i've loaded a number of fonts with non-latin characters and they all work fine
     
  6. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
  7. reptilebeats

    reptilebeats

    Joined:
    Apr 28, 2012
    Posts:
    272
    hi i have only just seen this and would like to know more about the auto uv movement in this and how to do it.

    basically im making atlases for my project to reduce draw calls but i find moving the uvs to be a long process and i dont think im at a point where i could create a tool to do it for me yet, would i be able to use this to move and scale uvs to the right size of the texture in the atlas.

    if not ill keep it anyways and have a good look at it on my next project
     
  8. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    The UIToolkit scripts take care of the UV mapping for you. Simply drag and drop your sprites into "TexturePacker", tweak the settings as needed and then save the output image and data file into the "Resources" directory of your project. You can then reference your images by name without having to worry about setting coordinates manually.
     
  9. reptilebeats

    reptilebeats

    Joined:
    Apr 28, 2012
    Posts:
    272
    ahh cool thanks for the quick reply i dont suppose theres a tutorial for that is there
     
  10. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
  11. reptilebeats

    reptilebeats

    Joined:
    Apr 28, 2012
    Posts:
    272
    cheers i'll give it a look
     
  12. GTHaxor

    GTHaxor

    Joined:
    Dec 12, 2011
    Posts:
    60
    Still looking for a solution to flipping textures vertically. Is there a way to do this without having to create flipped sprites in the atlas?
     
  13. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    If you mean what I think you mean then yes. Just use an inverse scale. For example, set X to -1.0f
     
  14. GTHaxor

    GTHaxor

    Joined:
    Dec 12, 2011
    Posts:
    60
    Doesn't seem to work for me. The sprite just disappears completely instead of flipping around.
     
  15. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    That is strange, I have just tested this to verify that it works. Here is what I did:

    Code (csharp):
    1. UISprite mySprite = uiToolkit.addSprite("heart.png", 0, 0);
    2. mySprite.pixelsFromTopLeft(0, 48);
    3. mySprite.localScale = new Vector3(-1.0f, 1.0f, 1.0f);
    The heart image is 48 pixels wide. When the sprite is flipped its position on-screen is out (because it is backwards). So setting the left position to 48 means that the heart will be sitting on pixel 0 (if that makes sense)

    And the same for vertically:

    Code (csharp):
    1. UISprite mySprite = uiToolkit.addSprite("heart.png", 0, 0);
    2. mySprite.pixelsFromTopLeft(48, 0);
    3. mySprite.localScale = new Vector3(1.0f, -1.0f, 1.0f);
     
  16. GTHaxor

    GTHaxor

    Joined:
    Dec 12, 2011
    Posts:
    60
    Hmm..

    I seems to work when I use "pixelsFromTopLeft" but doesn't work when I declare it's position via the UIButton.create function.

    Code (csharp):
    1.  
    2. playButton = UIButton.create(UIManager, "playButtonUp.png", "playButtonDown.png", 318, 0, 11);
    3. playButton.pixelsFromTopLeft(0, 318); <<<<<
    4. playButton.localScale = Vector3(-1.0f, 1.0f, 1.0f);
    5.  
    Ideally, I'd like to use the positioning in the create() function.. Any idea?
     
  17. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    The only reason that I am using the `pixelsFromTopLeft` function is because internally the `create` versions do not appear to do certain things. I cannot remember what the problem was in my case, but there was something that didn't work unless I used that.

    Perhaps somebody could enlighten both of us with the cause for these differences.
     
  18. GTHaxor

    GTHaxor

    Joined:
    Dec 12, 2011
    Posts:
    60
    I played around with it, and it seems like setting the scale resets the position of the Sprite to (0, 0). Also, click functions seem to be stripped after you flip UIButtons using localScale.x = -1

    Very strange behavior.. I guess it wasn't meant to be used this way
     
  19. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Thank's a lot @AtomicChimp, your suggestion worked a treat!
     
  20. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Thanks for the help @SiW. This was my problem (@AtomicChimp also gave the same answer).

    Cheers
     
  21. adam718

    adam718

    Joined:
    Mar 11, 2012
    Posts:
    58
    Hi!
    Thank you very much for your kindness.

    I tried Hiero in MacOS but I cann't select non ascii glyph.
    I should select whole hangul(korean) glyphs which is about 12000 glyphs.
    But in Hiero, no way to select whole glyph.

    pweeks, would you see the font I send you and the result of text in UIToolkit?

    I deliverately set font size 64 and the smaller the font size is, I can see easily the shopped glyph in UIToolkit.

    $09_1.png

    And could you recommendl me which tool is the best for non-ascii(just unicode)?
    I am now using angelcode BMFont in windows and Hiero in MacOS and both are not working well now.
    Help me.

    Thank you very much,
    Adam.
     

    Attached Files:

    Last edited: May 3, 2012
  22. rextr09

    rextr09

    Joined:
    Dec 22, 2011
    Posts:
    416
    No one ever has this issue? It's too easy to reproduce :(
     
  23. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    it sounds like you have the latest version of UIToolkit and as you've found out, if you set scale "before" you use one of the positioning routines, it will blow out your position, resetting it to 0,0. I dont know who made the change to the kit, but to use scale, you have to use one of the positioning methods. The reason being that when you set scale, the code tries to use the anchor information, which is NOT set up until you use one of the positioning methods. I've been trying to think of a fix, but have had other things to work on.
     
  24. adam718

    adam718

    Joined:
    Mar 11, 2012
    Posts:
    58
    Hi pweaks!

    - I attached unity package that shows my problem.

    If you run TextTest_1.scene you could see the following image.
    And I pointed the error of chopped glyph.

    $09_1.png

    When I force to expand width to width + 1 and height to height + 1 in UIText.cs / loadConfigfile() when parsing .fnt, I can get satisfied result.
    I attached also gulim.ttf above post that I use for test.
    Gulim.ttf is the most widely used in Asia for cjk.

    - When I use small font size, the text in UIToolkit is not that beautiful.
    What should I do additionally for small font size glyph?

    Please help me.

    Thank you,
    Adam.
     

    Attached Files:

    Last edited: May 3, 2012
  25. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    I'm trying to use GUI.DrawTexture() in combination with UIToolkit but I can't get GUI.DrawTexture() to draw behind the UIToolKit items.

    I have tried changing GUI.depth, and also tweaked with draw depth and UIButton.zIndex on UIToolkit, but the GUI.DrawTexture() is still rendered in front of the UIToolkit buttons.

    Does anyone know how I can solve this problem?

    Please note that I NEED to use GUI.DrawTexture() since I have many textures in my project, and I don't want to go down the path of creating all of them as texture atlases with TexturePacker (I am loading textures dynamically).

    Thanks a lot!
     
  26. Doucettej

    Doucettej

    Joined:
    Jan 18, 2010
    Posts:
    85
    Hey everyone... I'm loving this GUI solution... awesome! I have a simple (I hope) question. How do you go about using the continuous button so that when you hold it down it continually fires? I've ran through the demos but non of the examples actually use it for that purpose.
    I have this
    fireButton.onTouchDown += onTouchDownFireButton;

    But I am assuming it is not onTouchDown, that it's something else but the "autofill/options" do not appear for me so I am not sure what is available.

    Any help would be greatly appreciated!

    Cheers,
    Jason
     
  27. taz030485

    taz030485

    Joined:
    Feb 2, 2012
    Posts:
    10
    Try .onTouchIsDown
     
  28. rextr09

    rextr09

    Joined:
    Dec 22, 2011
    Posts:
    416
    is it possible to destroy a UIToolkit completely at runtime, so that I can clear unused texture atlases from the memory?

    btw, if I say Destroy(uiToolkit.gameObect) the game lags so badly. (It freezes like 0.5s). And if I just set uiToolkit.gameObect.renderer = false, then the atlas is not removed from the memory.
     
    Last edited: May 5, 2012
  29. diegopettengill

    diegopettengill

    Joined:
    Apr 17, 2012
    Posts:
    2
    Hi, i have a Vertical Scrollable with multiple text instances...When i try to hide or destroy only one is deleted.
    Plzz help =)
     
  30. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Hi all,

    I posted a question about GUI.DrawTexture() in combination with UIToolkit 4 days ago but have not yet found a solution to it myself or had no replies (you can see it a few postings back).

    Has anybody else on this forum managed to achieve this before?

    Cheers,

    Jonas
     
  31. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    if i remember right, i had to make a change to UIAbstractContainer.cs to add a new List<UITextInstance> and corresponding hide/delete code to get the functionality you want. I have not done a pull (push?) to git as it seems the project has become a bit stale. I can look at my diffs and send them to you if you want
     
  32. n8

    n8

    Joined:
    Mar 4, 2010
    Posts:
    147
    Hey everyone,

    I was feeling a bit adventurous last night and attempted to upgrade my project from the default download version (11-03) to the latest from github. After fixing the 1 billion+ errors, i have been seeing weird issues. The image below shows my problem. I am using multiple texture Atlas and so I believe that this may have something to do with it. when setting the shader to "no-alpha" I get black boxes behind all Sprites, and now setting them to have alpha shader I am getting theproblem below. Any ideas?
     

    Attached Files:

  33. Ves

    Ves

    Joined:
    Apr 6, 2011
    Posts:
    23
    Hey everyone. I am really unused to using C#, and I'm having trouble understanding what certain code does (in this case, it's preventing me from translating it to my language of choice!) Could anyone just run through what this little snippet means? Thank you!

    Code (csharp):
    1. playButton.onTouchUpInside += ( sender ) => Debug.Log( "clicked the button: " + sender );
     
  34. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Hi @Ves,

    I'll try to give you a quick explanation of this (i'm about to go to bed so it'll be short but hopefully it will help you).

    The playButton exposes an event called onTouchUpInside. This will be raised every time you touch on the button and release while the finger is still inside the button.

    It is possible to handle (listen to) the onTouchUpInside event in several different ways. Your code example handles that event by something called a "Lambda Expression" (http://msdn.microsoft.com/en-us/library/bb397687.aspx).

    What this means is that when you touch up inside, the code on the right hand of '+=' (this is the lambda expression) will be executed. I quote from the MSDN link above: "The left side of the lambda operator specifies the input parameters (if any) and the right side holds the expression or statement block.".

    In your code example this means that your are passing in the button that was pressed as the input parameter (here referred to as "sender"), and that the Debug.Log statement that prints out the buttons name/description is the expression statement.

    Lambda expressions is a really neat feature of C# and you can do a lot of cool/powerful stuff with it. I can recommend you to read through the link I mention above, and also the MSDN documentation on events( http://msdn.microsoft.com/en-us/library/aa645739(v=vs.71).aspx). Once you understand these concepts it's pretty easy going.

    Hope this makes sense and helps.

    Cheers,

    Jonas
     
  35. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    Not sure if you solved this already or not, but that's because you need a separate Camera for each layer you want to render.

    So you need three cameras total.

    Camera 1 = UI#1 Layer -- UI and UIToolkit(s), set 1
    Camera 2 = Game Layer -- 3D objects
    Camera 3 = UI and UIToolkit(s), set 2

    Each UI Camera needs to have the UI object layers in their Culling Mask. Also, you need to set their Depth in the correct order.

    So if UI#1 Layer is the farthest back from the screen, you would set Camera 1 to Depth 20, set Camera 2 to Depth 21, then set Camera 3 to Depth 22. The UI Cameras should be Depth Only Clear Flags. Hope that helps.
     
  36. Valicit

    Valicit

    Joined:
    Apr 22, 2012
    Posts:
    5
    I feel like I am misunderstanding something fundamental when it comes to sprites and animations through UIToolkit, so I figure here is the best place to ask!
    I think I've finally gotten the hang of using this for a UI system, and it's working very well for me, but if I want to display a character sprite, or enemy sprites for use in a 2D situation, I'm having a bit of difficulty understanding something.
    I need to specify a png created with texturepacker for use in the UIToolkit script. I've been doing that and it's been working well. However, when it comes to sprites, does that mean I have to have all of my sprites for use in that scene in one file? All the characters, all the enemies, and all the animations? Is there some simple way of accessing multiple files through one script that I am missing?
    I feel like this is a very silly question, but I'm certain it's better to ask and learn than never figure it out! Thanks a lot in advance!
     
  37. Ves

    Ves

    Joined:
    Apr 6, 2011
    Posts:
    23
    Wow, absolutely wonderful overview; and clever scripting! Thank you very much for this.
     
  38. Lee Zhi Fei

    Lee Zhi Fei

    Joined:
    Apr 11, 2010
    Posts:
    100
    In my game, I wanna show the players the characters they can choose.

    The characters names (as in the texture sheet) are:
    - Character_Monk
    - Character_Birdman

    EDIT: added a new UISprite variable (image) and then change its sprite image to the next one in array by using UISprite.setSpriteImage(nextSpriteName);

    What I wanna do here is to show the next or previous images with the press of a (left or right) button.
    Above is the method I used, but it didn't change image when I press the buttons...

    Can someone suggest me another way to do it?
     
    Last edited: May 9, 2012
  39. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    For the New iPad, because everything is double resolution all the UI buttons are half the size if there's no check to load bigger UI Texture Atlases. I was wondering is there a way to rework the camera to make the UI assets seem the normal size rather than have to load bigger Texture Atlases. The reason I'm asking this is because right now I have one UI Texture Atlas that is 2048 x 2048 for all my UI assets, and if I want to support the New iPad I would have to either make a 4096 x 4096 texture atlas, which I've heard there are major issues with Unity and iOS working with textures of this size. My only other alternative would be splitting the Atlas up into a multitude of smaller Atlases, but that seems rather messy and I have z-order issues as well when working with multiple atlases, so I was looking for another workaround. Thank you.
     
  40. Valicit

    Valicit

    Joined:
    Apr 22, 2012
    Posts:
    5
    Well, I just did some measuring, and realized that if I use the biggest texture size texture packer can publish, you can fit a LOT in one image. Using a spritesheet from one of my favorite games, I could fit 216~ish of the character sprites they used. Even so, I imagine there is still a better way to do this. Or am I entirely off base?
     
  41. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    for our game we made a separate iphone build and ipad build...the iphone build has texture atlases of 1024x1024, we scale the bg to 960x640 and before adding buttons to the bg as child, we upscale based on the 2:3 vs 1:1 ratio, and everything looks fine. We set the "switch to HD" at 1024, made 1024x1024 and 2048x2048 atlases (SD/HD) for the ipad...so original ipads get the 1024x1024 and the same scaling code as iphone, and new ipad gets the 2048 with scaling...so far so good
     
  42. n8

    n8

    Joined:
    Mar 4, 2010
    Posts:
    147
    So is it just me or is the current version of UIToolkit on github almost completely busted? I am having an incredibly hard time getting stuff like centering and alpha to work. Anybody else experiencing this?
     
  43. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    @n8 It isn't just you I'm afraid. There are issues but you have to remember that UIToolkit is a relatively young project.

    I am currently having issues with getting this to work on Android. It works great on iOS but doesn't compile for Android.
     
  44. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    @n8 agree with numberkruncher...uitoolkit was pretty stable when released, then a lot of contributions that werent thoroughly tested...IMO...the version we're using is pretty stable, but also has changes from git that we've not contributed. I'll see about pushing them (pulling them?) to git and if prime31 takes em. Other than that I could zip our working version and send it along...one of the biggest things we found with the latest is you HAVE to use "positionFrom" or similar routines after creating a sprite...reason being that there is a lot of code depending on anchor information...if you dont use one of those calls, there is no anchor information setup. Currently we're happy enough that UIToolkit is not whats holding us back from shipping
     
  45. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    953
    @pweeks Are you able to build for Android? If so then your version would very much be appreciated :)
     
  46. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Hi,

    I am trying to use UILanguageManager from UIToolkit for managing my different languages. I have problems setting it up and the error I get is that it complains my language file is not correctly set up.

    This is a simple example of how I try to write the JSON langugage file, but it doesn't seem to work:

    Code (csharp):
    1. {
    2.     "menuitem1" : "Setings",
    3.     "menuitem2" : "About",
    4. }

    Does anyone have a working example of how to format a language file?

    Thanks,

    Jonas
     
  47. KeeZ

    KeeZ

    Joined:
    Feb 1, 2011
    Posts:
    20
    You're almost there. I used the same formatting as the original language manager creator, here's a sample:
    Code (csharp):
    1. {"TranslatedStrings": {
    2. "walk":
    3. {
    4.     "StringToRead": "Walk"
    5. },
    6. "jump":
    7. {
    8.     "StringToRead": "Jump"
    9. }
    10. }
    11. }
    There's also a link on how to use the UILanguageManager here: https://github.com/prime31/UIToolkit/pull/70
     
    Last edited: May 10, 2012
  48. n8

    n8

    Joined:
    Mar 4, 2010
    Posts:
    147
    @pweeks and @numberkruncher thanks for the reply. I do realize that UItoolKit is still young and in constant flex. It works great in the older version so I may stick with that one. @numberkruncher, if you don't mind sharing your work, I would love to check it out. Maybe it will solve some of the issues that I was working around.
     
  49. rextr09

    rextr09

    Joined:
    Dec 22, 2011
    Posts:
    416
    Where can I find an older (stable) version of UIToolkit? Thanks
     
  50. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    Thanks @Keez, that worked!