Search Unity

  1. Unity 2019.1 is now released.
    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. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    949
    You say that 3GS is not priority number one, but I have had a number of 3G (non-S) customers on my game. I have had to release an update to fix rendering issues with OpenGL ES1 as a result of this.

    Perhaps this is not an issue for you, but I still think that it is important to target. My local phone shops are doing really good mobile contract deals with the 3GS at the moment as well.
     
  2. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    by going with an oversized background...and if you make a simple change to make the sprite size itself to the screen...and if you further make all your buttons/items percent relative to a corner...what you end up with is some minor shrinkage on old devices...in my book thats acceptable
     
  3. laserlars

    laserlars

    Joined:
    Nov 17, 2011
    Posts:
    255
    @numberkruncher: I see your point. Seems that scaling down the few GUI-elements I have in my game works pretty good on the 3GS.
    Would be interesting to see some kind of statistics on download-percentage per device on the AppStore.
     
  4. numberkruncher

    numberkruncher

    Joined:
    Feb 18, 2012
    Posts:
    949
    I too would be interested in such stats.
     
  5. coolpowers

    coolpowers

    Joined:
    Mar 23, 2010
    Posts:
    124
    Not sure whether to post this here or in Android..

    I'm using UI Toolkit on the Kindle Fire, and it's working fine, except that if I launch my auto-oriented-but-constrained-to-landscape game while the device is in portrait, it appears that the wrong screen dimensions are used and all the UI stuff is messed up accordingly. If I launch while holding the device in landscape, everything is fine.

    Is this a general Android issue? Unity issue? Kindle Fire issue? Or is it something that could be managed within UI Toolkit?

    (I'm also happily using UI Toolkit on iOS btw. Thanks so much for making this available)
     
  6. sdl

    sdl

    Joined:
    Mar 11, 2009
    Posts:
    1
    I have a question regarding UItoolkitText and accent : I cannot display latin accent letters.
    I add thanks BmGlyph all latin needed letters to my prototype font. The export and import to Unity is fine. But though the letter is there I still have the "?" instead "é"... Any idea?
    Thanks for your help
     
  7. saline13

    saline13

    Joined:
    Feb 26, 2012
    Posts:
    2
    Has anyone had any experience using a gameobject with the UIElements within the UICamera scope?

    I am trying to mix a particle effect into some UI Sprite animations.

    I have got a prefab I am spawning and I am setting its position to the same position as a UISprite and I am setting the gameObjects layer to UI.

    I cannot see it though:(

    Thank you for your help.
     
  8. unitynewb

    unitynewb

    Joined:
    Feb 22, 2009
    Posts:
    235
    Is there a way to load a resource into a sprite on this? Like a www texture?
     
  9. diegopettengill

    diegopettengill

    Joined:
    Apr 17, 2012
    Posts:
    2
    Hi, i have 2 Vertical container scrollers that use same material....when i hit play sprites are all gone ....and the second container seems like other camera with 200x zoom. What i want to know is...is there a way that this 2 vertical containers work together?

    I would appreciate any help =)
    Thx!
     
  10. T Sufferfield

    T Sufferfield

    Joined:
    Apr 18, 2012
    Posts:
    1
    I've been trying to figure out just how to rotate the progress bar, to make it a vertical bar, but I can't seem to figure out how.
    I've tried messing with the code some, and stuff like resizing and moving isn't a problem. I've looked through most of the thread, and it has been mentioned a few time, but I've found no definite solution.

    Any help would be greatly appreciated.

    Edit:
    That was way easier than I thought.
    Code (csharp):
    1. progressbar.eulerAnglesTo (0.1f, new Vector3 (0,0,90), Easing.Back.easeOut);
     
    Last edited: Apr 19, 2012
  11. raptoplob

    raptoplob

    Joined:
    May 24, 2011
    Posts:
    12
    I put UIToolkit into my app a few weeks ago for the main menu and it worked fine... Now I've come back to it to make some changes and I'm hitting a problem.

    In the editor the buttons display and work as expected. On the device (HTC Desire) the buttons show but they don't respond to being touched.

    I'm a bit baffled by this. I've not changed any of the related code and they work in the editor. I've uninstalled my app and reinstalled, but still no change.

    Any thoughts?
     
  12. raptoplob

    raptoplob

    Joined:
    May 24, 2011
    Posts:
    12
    After some testing it seems that the UI displays differently based on what orientation the phone is when you load the app.

    If I load with the phone in portrait, then rotate the phone to landscape to match the orientation I've set in the player settings, the buttons are smaller and don't work. Actually I found the 'touch' areas are further down and to the left...

    If I load with the phone in landscape, then the buttons are too big (probably how they are meant to look) and they work correctly.

    Locking the rotation to landscape left or right in the player settings solves the problem, though I would suggest that might be a bug?
     
  13. OmniverseProduct

    OmniverseProduct

    Joined:
    Feb 26, 2012
    Posts:
    1,569
    I'm curious on how much the UIToolkit can handle. I mean, how far can I go with this before it starts noticeably effecting in-game performance?

    I'm using this on a windows computer btw. I was told a while ago that this works quite well on windows.
     
  14. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    i know this has been covered but this post is insanely long now so it's hard to find info...i want some text on a button, and it's not working

    Code (csharp):
    1.                
    2. UIButton levelSelect1 = UIButton.create(bgs[(int)STATE.LEVEL_SELECT],"level_box_unlocked.png","level_box_unlocked.png",x,y);
    3.                 levelSelect1.onTouchUpInside += LevelSelect1;
    4.                 levelSelect1.zIndex=1;
    5.                 levelSelect1.localScale = mUIScale;
    6.                 var text = mText.addTextInstance("1", 100, 100, 1.0f,0,Color.black,UITextAlignMode.Center,UITextVerticalAlignMode.Middle);
    7.                 text.parentUIObject = levelSelect1;
    i thought setting the text.ParentUIObject would do what i want, yet the text is showing up at 100,100 on screen (code was originally 0,0, but i made it 100,100 to see that the text printed, just not on the button)
     
  15. Valicit

    Valicit

    Joined:
    Apr 22, 2012
    Posts:
    5
    Is there an alternative to TexturePacker around?
    I'm really loving this plugin, but it's a pain that TexturePacker seems to randomly watermark up my images to the point that you can't even make out what they were.
     
  16. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    texture packer only water marks when you use options that in the "pro" version...when you go to export it will tell you what options you're using that arent paid for...turn those off (like trim) and you'll have no watermark
     
  17. Valicit

    Valicit

    Joined:
    Apr 22, 2012
    Posts:
    5
    Ohhh!
    I feel dumb, I had realized it mentioned which features were pro when you go to export it.
    I did understand that only pro features caused the watermark, but couldn't find out which features were pro and which weren't!
    Thanks a lot! I missed something obvious haha.
     
  18. BeeF

    BeeF

    Joined:
    Apr 23, 2012
    Posts:
    3
    Hey prime31 and anybody else who might know what the issue is.
    Basically i have 9 buttons in a UIScrollableVerticalLayout and when i scroll some buttons position changes.

    I made a video here: http://youtu.be/6vxTu_t1ygg

    http://youtu.be/6vxTu_t1ygg

    Does anybody know what's happening here?

    Any help would be greatly appreciated!
     
  19. OmniverseProduct

    OmniverseProduct

    Joined:
    Feb 26, 2012
    Posts:
    1,569
    Do you have any code you can provide?
     
  20. hungweng

    hungweng

    Joined:
    Jun 3, 2010
    Posts:
    5
    Hi,

    I'm just wondering does this UIToolKit support device orientation change at runtime?

    Everything works fine for both portrait landscape orientation as long as I don't change it at runtime, but as soon as I enabled auto-rotation and the buttons' click detect locations are all wrong after device orientation change.


    Edit:
    Solution found, whenever there's a change of device orientation, the uiCamera settings in the UI script has to change as well:


    Code (csharp):
    1. _uiCamera.orthographicSize = Screen.height / 2;
    2.  
    3. // Set the camera position based on the screenResolution/orientation
    4. _uiCamera.transform.position = new Vector3( Screen.width / 2, -Screen.height / 2, -10.0f )
     
    Last edited: Apr 23, 2012
  21. BeeF

    BeeF

    Joined:
    Apr 23, 2012
    Posts:
    3
    The code is very simple:

    Code (csharp):
    1.  
    2. private UIScrollableVerticalLayout buttonsLayout;
    3. buttonsLayout = new UIScrollableVerticalLayout(20);
    4. for(int i = 1; i <= 9; i++){
    5.             string nameUp, nameDown;
    6.             UIButton button;
    7.             nameUp = buildButtonName(i, "Up");
    8.             nameDown = buildButtonName(i, "Down");
    9.             button = UIButton.create(buttonsToolkit, nameUp, nameDown, 0, 0, 0);
    10.             button.highlightedTouchOffsets = new UIEdgeOffsets(20);
    11.             button.onTouchUpInside += levelButtonPress;
    12.             buttonsLayout.addChild(button);
    13.         }
    14.  
    15.                 buttonsLayout.pixelsFromTopRight(40, 20);
    16.         buttonsLayout.setSize(Screen.width, Screen.height - 100);
    17.  
    I store the buttons in a List<UIButton> but i don't think that matters

    Thanks!
     
    Last edited: Apr 23, 2012
  22. coolpowers

    coolpowers

    Joined:
    Mar 23, 2010
    Posts:
    124
    So how do you detect the orientation change? Do you just poll Screen.orientation every frame to see if it's different?
     
  23. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    i've only seen that problem when mucking with scale, which your code doesn't appear to do...
     
  24. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,153
    You want this:
    Code (csharp):
    1.  
    2. text.parentUIObject = levelSelect1;
    3. text.pixelsFromTopLeft(topValue, leftValue);
    4.  
    Parenting anchors it to the button, so if you move the button the text will move, but because you set the initial text position to (100,100) it will be that "Relative" distance from wherever the button is. Using the positionFrom / pixelsFrom functions positions children based off their parents positions. Think of it like Local Parent and Children transforms.
     
  25. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    as i said...it was originally 0,0 ... i only moved it to 100,100 to prove the text was visible...parenting is not working for some reason
     
  26. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    and speaking of that...i want to scale a vertical scrollable container and it's buttons, yet applying scale causes the container and it's contents to get whacky, sort of like the youtube video posted above...is this a known problem?
     
  27. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    downloaded latest from github, code there works for scrollablecontainer, and even if i apply a scale it works, so my "working" copy of uitoolkit must have just been old i guess...i'll merge the new stuff to my project today and see what happens
     
  28. jacksmash

    jacksmash

    Joined:
    Mar 20, 2012
    Posts:
    5
    Will UIToolkit handle french characters?

    For instance, I have a font atlas that has french characters. In Mono-Develop I type a french character and it shows up properly. But when I play the scene in Unity, the french characters only show up as "??".

    Please help!
     
  29. BeeF

    BeeF

    Joined:
    Apr 23, 2012
    Posts:
    3
    So does anybody know why UIScrollableVerticalLayout is messing up?
     
  30. Default117

    Default117

    Joined:
    Mar 13, 2011
    Posts:
    131
    Does anyone know how to fill the screen with a stretched texture using UIToolkit? For instance, if i have a background image 1024x768, i want it to stretch across the device screen no matter what resolution i'm running at?
    Ideally i'd like to do this with a 1x1 pixel black texture to fill the whole screen black. Or is there a better way of doing it?
     
  31. Jalla

    Jalla

    Joined:
    Jan 17, 2012
    Posts:
    9
    I have a problem with larger textures in UIToolkit that I hope someone can shed a light on:

    When I create textures of size 1024x1024 with TexturePacker, it works well when I use them in Unity to render buttons. When I make a larger texture (2048x2048) in TexturePacker and use it to render buttons, I get display issues.

    What happens with 2048x2048 textures is that the selected sprite is not rendered, but instead a bigger area of the texture sheet. At first I thought this was related to my graphics but I also tested this on the kitchenSink demo example that comes with UIToolkit, and I get the same issue there.

    To illustrate my problem:

    I render a button based on the kitchenSink sample code (and the assets in that example) like this:

    UIButton optionsButton = UIButton.create( "optionsUp.png", "optionsDown.png", 0, 0 );

    When I use a texture exported from TexturePacker that is 1024x1024 the rendered result is correct as illustrated in this image: http://yfrog.com/5evm7p


    When I use a texture exported from TexturePacker that is 2048x2048 the rendered result is NOT correct as illustrated in this image: http://yfrog.com/n3n5o9p

    Does anyone have any idea if this is a bug in UIToolkit, or just a limitation? If anyone else has managed to use large textures, please let me know.

    Thanks
     
  32. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    it has a lot of problems i'm finding...

    if you set your height of the scroller to screen.height that would fix it, but it might not be what you want
    also the buttons inside the scroller will call the callback while you're scrolling causing all sorts of graphic anomalies

    i need it fixed too, so if i find the fix, i'll post it

    basically UIToolkit was pretty good when it got released but the latest drop, while seemingly better, also has a lot of issues IMO
     
  33. timshaya

    timshaya

    Joined:
    Apr 5, 2012
    Posts:
    8
    My guess is that UIToolkit (or Unity 3.5? ) has a problem handling texture maps larger than 2048 x 2048 or a problem handling the 4096 x 4096 size specifically.

    I just had an issue with a bunch of my UISprite images (UIToolkit) looking pixelated apparently for no reason - if I use the same image in a 2048x2048 texture atlas it looks crisp, the minute the same exact .png is dropped into a 4096 x 4096 atlas published into my Unity project's Resources folder, it starts looking like a sized-down-then-scaled-up-beyond-100% version of itself (a.k.a. pixelated). If I go back to using a 2048x2048 texture map, the issue is magically resolved.

    I've tripple checked - in the Inspector, "max size" for the texture map .png is set to 4096.

    The workaround for a UISprite-based sheet is to break it up into two. If this issue comes up with a Font... that sounds like a major problem.
     
    Last edited: Apr 26, 2012
  34. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,427
    @shayak, watch out when using textures that are 4096x4096. Many devices do not support textures that large.
     
  35. AtomicChimp

    AtomicChimp

    Joined:
    Aug 9, 2011
    Posts:
    47
    I have been able to do this with the setSize feature. You put in float values for the width and height. I have used a 1x1 pixel sprite and resized for a background. Sometimes there is a distortion along the edges so if that happens, make the size bigger.

    mySprite.setSize (mySprite.width, mySprite.height);

    I have found that the easiest way to place this as a background is as follows...

    mySprite.positionCenter();
     
  36. timshaya

    timshaya

    Joined:
    Apr 5, 2012
    Posts:
    8
    @Prime31, got it. Thanks for the swift response. Much appreciated.
     
  37. AtomicChimp

    AtomicChimp

    Joined:
    Aug 9, 2011
    Posts:
    47
    I am trying to use two different layers of UI in my current game (one in front of my 3D objects and one behind) and saw in previous posts that to do that, I should use two sets of UI/UIToolkit, one per layer. I have tried this and created layers as follows...

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

    Both UIs are showing up in front of the 3D objects. Has anyone successfully done this and can assist me?
     
  38. Jalla

    Jalla

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

    I have tested the toolkit further, and I still haven't managed to solve the issue with textures of size 2048x2048 (see my post a few postings back for that issue). Do you have any idea what the reason for this could be?

    Also, I have noticed that when I deploy to the iphone or iPad (it looks ok in unity editor), my images are not rendered as crisply as they are in the actual individual png's I use to render the texture in texturepacker. There are a lot of noise on the buttons and jagged edges. I do resize my buttons in code, but keep the same aspect ratio (could this affect it?). Do you have any idea why this is happening?

    Thanks
     
    Last edited: Apr 27, 2012
  39. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    i found a bug in the UIAbstractTouchableContainer...it automatically defaults to the defaultToolkit as manager, changing the Vertical and Horizontal containers to take a manager (the same as the buttons being added) in the constructor and passing that to base constructor fixes some clipping issues when container is not full width/height and also fixes the buttons responding to presses along with the container responding.

    @Prime31 ... I made some other changes too, so will have to double check them, but can do a pull? push? i always get git backwards

    there is also a problem in the decelerate coroutine...i havent found a fix yet, but it's easy to cause NAN and infinity values to be passed to refreshPosition which hoses the entire UI
     
    Last edited: Apr 28, 2012
  40. AtomicChimp

    AtomicChimp

    Joined:
    Aug 9, 2011
    Posts:
    47
    @Jalla, To fix this in my games, I have changed the settings for my texture atlases in Unity to the following: GUI, check the "Override for iPhone" box and set the "Max Size" to either 1024 or 2048, then change the "Format" to Truecolor. This does take up more memory space but it makes for very nice looking graphics.
     
  41. FPSimth

    FPSimth

    Joined:
    Apr 28, 2012
    Posts:
    10
    Best free thing ever!
     
  42. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,427
    For all the UIToolkit users in need of an open source tween library we just released GoKit yesterday. The forum thread with links and info can be found here.
     
  43. coolpowers

    coolpowers

    Joined:
    Mar 23, 2010
    Posts:
    124
    It sounds like your atlas is using texture compression. Set it to truecolor and it should be fine (I had to reimport my assets when I upgraded Unity, they were reset to use compression without my knowing)
     
  44. toto2003

    toto2003

    Joined:
    Sep 22, 2010
    Posts:
    501
    hello
    first of all thanks for this awesome plug in prime31, i m still a big noobs, and try to learn unity as much as my brain could, but i can say i m a very bad at this, so that s the reason i m here, after digging into the several scene, i manage to create my own font atlas and display it as a uitext, but i dont know how to update it, like a score on my update function.

    any help would be appreciate.

    titoine
     
  45. laserlars

    laserlars

    Joined:
    Nov 17, 2011
    Posts:
    255
    Hm, I´m using
    Code (csharp):
    1.  
    2. progressBar = UIProgressBar.create(atlasToolkit, "star_bar.png", "star_cont.png", 0, 0, 0, 0, false);
    3. progressBar.resizeTextureOnChange = true;
    4. progressBar.value = 0.5f;
    Both sprites are displayed, but the "star_bar.png" is behind the container by default. Any ideas on how to change the z-index of the star_bar.png ?

    Thanks you.
     
  46. toto2003

    toto2003

    Joined:
    Sep 22, 2010
    Posts:
    501
    nevermind, i just find the solution :) it was on the exemple textTestscene.
     
  47. pweeks

    pweeks

    Joined:
    Mar 29, 2011
    Posts:
    104
    all spirtes have a zIndex variable that you can set
     
  48. GTHaxor

    GTHaxor

    Joined:
    Dec 12, 2011
    Posts:
    60
    Is there a way to flip sprites horizontally/vertically?
     
  49. rextr09

    rextr09

    Joined:
    Dec 22, 2011
    Posts:
    416
    Hi, I have a strange issue with bitmap fonts. I'm using the latest form github + Unity 3.5.

    The problem is, ... floating (or flying) letters. I simply try to show some dynamic text with bitmap fonts. (Like fps, scores, etc.). The problem occurs when the size of text in the UITextInstance decreases, the last letter moves gradually towards to top of the screen.

    For example, let's say we display "frames per second" on the screen. When the frame rate text is "100" and then, in the next frame its "99" then the last letter of the text, i.e. "0" moves towards the top of the screen while we see "99" at the same time.

    The problem DOES NOT occur when I clear() the text before updating it. But I don't want to clear() the text in each frame before updating it:

    Thank you for your help...

    Edit: You can recreate the issue in /DemoScenes/ExtendedTextManager, by simple reversing the counter after it reaches 101. So that when it goes down from 100 to 99, the last letter flies towards up.
     
    Last edited: May 2, 2012
  50. laserlars

    laserlars

    Joined:
    Nov 17, 2011
    Posts:
    255
    Yes, but "progressBar" is the reference to both sprites in this case :)
    If I set progressBar.zIndex, then that will affect both star_bar.png and star_cont.png