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

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    Simon, you can sign up for whichever ad vendors you want to use for free and they will each be responsible for getting you payment for your ad revenue.
     
  2. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    Does this plugin only support iphone/android? I tried to build for window and it had a bunch of error. But it works fine in Unity Editor.
     
  3. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jjobby, it should work fine on all platforms. I don't have Windows to test but WebPlayers and Mac standalones work fine.
     
  4. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    I got this error when I tried to build for window stand alone.

     
  5. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jjobby, looks to me like you have an older version. The iPhoneSettings calls are #defined out in the latest build.
     
  6. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    It's working now. Thank you!
     
  7. gregmax17

    gregmax17

    Joined:
    Jan 23, 2011
    Posts:
    186
    First off, great plugin prime31! It saves development time by huge amounts.

    I have a question about the UIButton. When I call the method 'destroy', I noticed it removed my delegate event listener. Does this remove it from memory, or should I remove the delegate event listener before I call the 'destroy' method?
     
  8. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    I can't debug my project using Monodevelop. When I choose Run With -> Unity Debugger, there are 15 errors. They are all same errors and all of them are in UIToolkit Class. It said "Default parameter specifiers are not permitted" But it works perfectly fine in Unity Editor or stand alone build. Is this Monodevelop bug? :confused:
     
  9. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @greg, Destroy will clean up any event listeners.

    @jjobby, MonoDevelop has a bug that doesn't allow it to work with default parameters. The latest build should have all or almost all of them removed. When I found out that the newest MonoDevelop still doesn't work I started removing the default params.
     
  10. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    It looks like the unitypackage file is not the latest version so I download the zip file instead. UIRelative class still has default parameter specifiers. And UI class has redundant texturePackerConfigName variable. It isn't used in any execution path. I think that It is only used in UIToolkit class.
     
  11. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jjobby, I just pushed an update with the default params removed and the redundant ivar removed.
     
  12. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    Thank you very much for your quick support! Now, I have a question about progress bar.

    This is the only method to set value of progress bar in UIProgressBar class. It only updates value in x axis. If I understand correctly, does this mean that the current UIProgressBar class only support horizontal progress bar, right? I just want to confirm this because I want to create vertical progress bar too.
     
  13. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jjobby, technically, you can just rotate the progress bar 90 degrees and it will then be vertical. It doesn't really require a second, vertical only component seeing as how it doesn't have to process touches.
     
  14. Acumen

    Acumen

    Joined:
    Nov 20, 2010
    Posts:
    1,041
    Hey, since you surely know a wise answer, I thought I'd approach you in here.

    We just worked along the 1024x texture atlas approach with png usage just to find out that can't be processed in it's natural way but has to be compressed/reprocessed in order to work on a device.
    So basically the png of 900kb is bloated up to a 4 MB texture.

    From your own experience, what is the best bet for GUI usage with a 1024 texture atlas for an iphone app ? What kind of compression/settings to use to not have a 4 mb instead of 900kb texture filesize ?

    Trying to come up with some forum search but the answers varied. Most said to go for compressions another one suggests to use the texture uncompressed since it will be zipped and compressed there.
    I'm lost :/

    Care to shine a light from your own experience ? Obviously we'd want to have best of both sides - best quality and filesize of the original png, at least close to that but not 4x the size :eek:
     
  15. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Acumen, as long as you are targeting the iPhone 4 a 1024 GUI texture is fine uncompressed. I personally never use compressed textures for GUIs. They often have gradients and text both of which get pretty mangled by PVR compression and that doesn't really work for a GUI that is front and center. The approach used by UIToolkit (which is the same one I use) would be to have a 1024 texture for retina and a 512 for non-retina.
     
  16. gregmax17

    gregmax17

    Joined:
    Jan 23, 2011
    Posts:
    186
    Hey Prime31, I 'think' there is bug when using rendering the sprite. Here is snippet of the json I have :

    Code (csharp):
    1.  
    2. "game_title.png":
    3. {
    4.     "frame": {"x":1,"y":121,"w":256,"h":63},
    5.     "rotated": false,
    6.     "trimmed": false,
    7.     "spriteSourceSize": {"x":0,"y":0,"w":256,"h":63},
    8.     "sourceSize": {"w":256,"h":256}
    9. }
    10.  
    When I call 'UI.firstToolkit.addSprite', it would render this as 256x256... where it should be rendered as a 256x63, correct?

    Another question: how do I scale sprites after adding them? I was just thinking of using the progress bar to do so... but is there a better way?

    Thanks in advance!
     
  17. Acumen

    Acumen

    Joined:
    Nov 20, 2010
    Posts:
    1,041
    Thanks, Prime31.
    Guess it's just one of the billion things we had to learn the hard way. Boy, the list of improvements for next app grows every day :)
     
  18. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @gregmax17, grab the latest build. I just refactored the sourceSize out due to it not being what is expected on occasion.
     
  19. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    UIToolkit just got an update to include UIHorizontalLayout and UIVerticalLayout containers. They pretty much do what you would expect:

    UIHorizontalLayout: any elements added to it are laid our horizontally with the spacing and padding being configureable
    UIVerticalLayout: any elements added to it are laid our vertically with the spacing and padding being configureable
     
    Last edited: May 16, 2011
  20. Gigiwoo

    Gigiwoo

    Joined:
    Mar 16, 2011
    Posts:
    2,981
    Great addition! I was waiting for containers to start with this.
     
  21. MattFS

    MattFS

    Joined:
    Jul 14, 2009
    Posts:
    219
    Great stuff! Is there a design time editor for it for example creating and placing elements in the editor ?
    If not I may have a look at this because I was about halfway creating a similar 1 draw call texture page GUI but I focused on making sure it could be done in the editor without a programmer! :p
     
  22. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @ugrund, there isn't a design editor though it is open source and if you wanted to make one we can certainly include it. As you can imagine, UIToolkit consists right now of only stuff that I have needed and I personally have no need for a designer. Integrating one is definitely possible but you will have to do a bit of trickery because UIToolkit has auto texture swapping and positioning aids for low vs high resolutions. I look forward to the pull request :)
     
  23. Matkins

    Matkins

    Joined:
    Aug 24, 2009
    Posts:
    152
    @Prime, I've created a sliding menu system of buttons, just like the home icon pages on iOS. It's not perfect, and ideally i would like to have a system like this built into the UItoolkit for ease of re-use. Perhaps i'll try, but I'm not that good at C# yet.

    Anyway, it's far from perfect and I'm having some really weird behaviour. I'm moving the buttons around by directly changing the .position value each frame. And it appears that sometimes buttons are appearing in places where they physically are not. And this is resulting in buttons that are even off screen getting pushed when i'm trying to push a totally different button.

    Would you advise against me directly changing the .position value in real time? What would you recommend.

    Edit: I'm not convinced that I've diagnosed it correctly. Perhaps it's something to do with my delegate functions. I'm trying to use one delegate function for multiple button events. I've added an index property to UIButton so that I can identify which button was pressed in the callback. Is this a bad idea? Could it be the cause of unpredictable behaviour mentioned above?
     
    Last edited: May 18, 2011
  24. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Matkins, changing position is fine and that is pretty much what the built in animation functions do (positionTo, positionFrom, positionFromTo). Every time position changes it triggers an event on itself and all it's children to update their verts and stuff. One delegate for multiple buttons it totally find as well. Oftentimes just keeping the button in an instance variable then comparing it to sender is used:

    Code (csharp):
    1. button1 = UIButton.create();
    2. button1.onTouchUpInside += eitherButtonClicked;
    3. button2 = UIButton.create();
    4. button2.onTouchUpInside += eitherButtonClicked;
    5.  
    6. void eitherButtonClicked( UIButton sender )
    7. {
    8.     if( button1 == sender )
    9.          Debug.Log( "clicked first button" );
    10.     else
    11.          Debug.Log( "clicked second button" );
    12. }
     
  25. aldafor

    aldafor

    Joined:
    May 19, 2011
    Posts:
    1
    Awesome stuff Prime31! Thanks for bring and share it with the community :).

    I've been testing the library quite a bit, but i've find kind of weird (or more complex) the way to handle the text, comparing to the rest of UIElements (in fact, i know, it's not considered like an UIElement), because i can't position it like a normal UISprite, or parent it like an UIObject.

    So, my plan is to use it with a button, or like a sprite parented to a button. But i don't find a way to extend the UIButton or the UISprite, to add the feature that i'm wanting to have (to update the text position as i update the button where it's contained/parented).

    What should i do? or wich method should i override? or should i use any event? I've found hard to know wich method should i use to do it. And think that would be better to ask, in case that somebody have the same issue, that to fullfill the lib with logs xDD.
     
  26. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @aldafor, I believe someone might be working on a control to add text to a button though I don't know status or ETA. It wouldn't be all that hard. Just subclass UIbutton, pass it a UIText and position the text based on the buttons position and the size of the text.
     
  27. hippocoder

    hippocoder

    Digital Ape

    Joined:
    Apr 11, 2010
    Posts:
    29,723
    I notice that on the kitchen sink test the sprite stretches in unusual fashion on one frame - when playing animations back, do the rects remain pixel perfect?
     
  28. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @hippo, which sprite? The only that should not be pixel perfect are scale animations (obviously) and the progress bar when in stretch mode.
     
  29. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    Prime31, I see that one of your demo also has animate sprite. Do you think that it's also suitable to use your tool to draw sprite other than GUI? Or is it still better to use spritemanager free version for that?
     
  30. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @jjobby, the UIAnimation class requires the animated elements to be UIObjects. If you wanted to use the same system for animating Transforms it would be dead simple to copy/paste that class and reuse 99% of it to do your animations. In fact, the code is based off of the animation library I use for other objects.
     
  31. ChrisE

    ChrisE

    Joined:
    Nov 19, 2010
    Posts:
    14
    I keep getting the message Assets/MemoryGame.js(203,19): BCE0019: 'positionFromTopLeft' is not a member of 'UIButton'.

    I have no idea what's going on with that. My only guess is that I'm using JavaScript and that's messing things up.

    Any ideas?
     
  32. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @ChrisE, yup. You are using Javascript which apparently doesn't work with Extension methods. Yet another reason to switch to C# :) So much you Javascript guys are missing over here: functioning code complete with built in documentation, extension methods, LINQ, thousands of online resources, etc, etc, etc. A whole world of goodies to help make developing a game easier.
     
  33. ChrisE

    ChrisE

    Joined:
    Nov 19, 2010
    Posts:
    14
    I was afraid of that!

    I'm looking forward to using C#, but had to get this finished by tomorrow.

    Can I ask how to delete a button after I've made it instead? (In JavaScript, please :p)
     
  34. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @ChrisE, JS and C# should be the same for removing buttons. Just call removeElement( theButton ) on the UIToolkit instance (in most cases UI.firstToolkit)
     
  35. ChrisE

    ChrisE

    Joined:
    Nov 19, 2010
    Posts:
    14
    Last question: Is there a way to set the position of a horizontal layout group? It shows up in the upper left. Ideally I'd like to have it auto center, but I'd take just being able to set it's position.
     
  36. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @ChrisE, all the normal positioning methods including the animation methods will work on layouts. There is a demo of animating one in the test scenes.
     
  37. duke

    duke

    Joined:
    Jan 10, 2007
    Posts:
    763
    How do I make a window/panel?
     
  38. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @duke, the sample seen shows how to use the layout containers.
     
  39. Vandash

    Vandash

    Joined:
    May 12, 2011
    Posts:
    11
    Really great GUI tool :) I had a few problems setting up a new font (error message were obscure), but other than that, it's quite easy to use. So thanks a lot ! :)

    Right now it's just not working on iPhone. The sample TextTest works on iPhone, but my scene only works on Windows Mac. Right now when I try my scene on iPhone, I can see the GUI, but the rest is F***ed up, the whole camera rendered scene is a huge visual artifact.

    My question : Do I have to create an "atlasx2" along with my "atlas", or should it work fine on iPhone 4 without the x2? (right now it works fine without the x2 atlas on both windows and mac with different resolutions) I didn't create the x2 atlas because last time I tried adding it, my font stopped working :p
     
  40. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @Vandash, as long as you uncheck autoTextureSelectionForHD on the UI instance you don't need both a retina and non-retina atlas.
     
  41. Vandash

    Vandash

    Joined:
    May 12, 2011
    Posts:
    11
    So the issue was my camera clear flag.

    With camera clear flag : don't clear : it was working fine on windows mac, all resolution. But a lot of visual artifacts on iPhone (especially at start)

    With camera clear flag : (anything else) : it's working fine on iPhone (as well as windows/mac)

    ps : performances are very good.

    Cheers :)
     
  42. bjohnson8704

    bjohnson8704

    Joined:
    Jan 30, 2011
    Posts:
    54
    First of all, a big thanks to Prime31 for releasing such an awesome plugin...it's really made my life easier. We actually trashed our whole menu system(that I had been trying to code for quite a while) and switched over to the UIToolkit and it has definitely paid off. It really does make creating smooth animations that will bring a menu system to life a total breeze. If anyone settles for having a plain old menu for now on in Unity, they must be mental! I know there are other products out there that do the same thing(or something similar at least), but what you've done is make the entry level available to anyone. Personally I didn't want to spend money on plugin to do menu animations and what not as I felt I could make a good enough menu system on my own...little did I know that it would turn out to be the biggest headache of the development process for me so far. Not that I was trying to be cheap...I just felt like I was/am spending money on so many other things to get started, I would try to knock off at least a little of my startup cost. Once Acumen(the artist behind our upcoming game Droppin' Bombs) brought the UIToolkit up(which I had already received an email about), I was sold on the idea of recreating our entire system using the system you built.

    I guess I said all of that to get this point across: If you're reading around and trying to decide whether or not to switch over to the UIToolkit...stop reading and start using it! You won't regret your decision.

    Well...now to my question! We're thinking of switching over some in game animated messages to use the UIToolkit as well, and the one problem that's keeping me from doing it is that I have no idea how/if you can pause an animation and resume it using the UIToolkit(or how hard it would be to add that functionality to the toolkit). Afaik, using timescale is out of the question as that will freeze the entire game scene and only need the actual game play elements to freeze while allowing the pause menu to animate when the game is paused. So, is there something already built in to accomplish such a thing that I'm just not seeing, or would something like that have to be added in? If it's something that would have to be added, do you(or anyone else) have some guidance on where to start? I hate asking, but I'm one of those poor guys that decided to learn and use JS instead of C#, so I'm really not too sure where/how to go about accomplishing something like that.

    Thanks
    Blake
     
  43. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @bjohnson, glad to hear you are liking UIToolkit! To answer your question, I haven't ever needed to pause a GUI animation so that isn't in there yet. It would be pretty trivial to add though. Any time you call one of the animation methods (positionTo, alphaFrom, etc) you get back a UIAnimation object that does the animating in a coroutine. The animation loop is very simple. To add pause you can just make a public bool on UIAnimation then in the loop check to see if it is true and if it is yield return null until it is false again. You will then just need to take note of the duration you were paused to ensure the actual animation duration is correct.
     
  44. bjohnson8704

    bjohnson8704

    Joined:
    Jan 30, 2011
    Posts:
    54
    @Prime31, thanks for the answer. It seems I was on the right track, and that should help me enough to get it working 100%. Now I believe I just need to take note of the duration like you said to finish it up. Once I have it working properly, I assume I can submit the code additions to you through github.com somehow and you can add it into the source if you see fit, correct? It may not be much of an addition, but I guess every little bit helps and maybe someone else will find it useful along the way. Thanks again!
     
  45. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @bjohnson, you can either send a patch or just shoot over a pull request on Github and I will merge it in. I'm sure others would find pausing handy.

    Now let me just go check Github to see if anyone sent a pull request with UIText alignment and wrapping... :) These will definitely be the next big changes that I will be needing so they will get done soon for sure. I also see a lot of room for optimizing text meshes that change often.
     
  46. ChrisE

    ChrisE

    Joined:
    Nov 19, 2010
    Posts:
    14
    I know you don't want me to encourage the JavaScript people, but the way I got around the movement was to create a simple C# script that just called the movement function, then used SendMessage to trigger it.

    I've been leaning towards learning C# for a while, and this will push me over the edge into learning it... but I had to be finished on a deadline, and came up with this solution. I thought others might find it useful too.
     
  47. bjohnson8704

    bjohnson8704

    Joined:
    Jan 30, 2011
    Posts:
    54
    @Prime31, so i tried to just note the duration that the game was paused on and then plugged the duration on pause in the easPos equation once the game is resumed and that resulted in the animation to go automatically to the end. My limited programming knowledge told me it's because of the following if statement:

    Code (csharp):
    1. if( ( startTime + duration ) <= Time.time )
    From what I could figure out, unless you also reset the startTime to the time when the game is resumed, that statement will return true and the animation will end instantly. "start" also had to be set for the current position, scale, etc when the game was paused or else the animation would start over from the original position.

    What I've ended up with was a workable solution for what I need to do(or at least pretty darn close as I've only slightly tested it out so far). But I'm just wondering at this point if I just misunderstood the meaning of "You will then just need to take note of the duration you were paused to ensure the actual animation duration is correct" as I don't want to just submit my crappy workaround code if I just misunderstood and it is actually something that's as simple as it sounded when I read that sentence. I guess I could also always just submit what I have to you after I've finished implementing it in my game(to make sure what I've added is functioning properly), and then let you decide whether or not it should be added to the source in its current state...if what i've done isn't too horrific then I guess it wouldn't hurt to put it in there and then someone could always improve it if they find a reason to.
     
  48. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @bjohnson8704, what you can do for that is take note of the duration of time that you were paused as soon as you unpause. You can then add that duration to the startTime which should let the animation complete.


    Example: 2 Second Animation

    startTime = 10
    duration = 2

    paused at 1.5 seconds into the animation (save the 11.5 total time value into pausedTime)
    unpaused 30 seconds later (41.5 total time, subtract from pausedTime to get 30)
    add total time paused (30) to startTime so startTime becomes 40 and right now it's 41.5 so we have 0.5 seconds of animation time left
     
  49. bjohnson8704

    bjohnson8704

    Joined:
    Jan 30, 2011
    Posts:
    54
    @Prime31, thanks for taking the time to walk me through that! I've got to say...that was a million times easier to implement than my workaround was. I'll hopefully do some more testing on it tomorrow to make sure it works like its supposed to and after I see that it works, I'll submit it to you.

    Thanks again. I know it would've been just as easy(more likely easier) to just add that code to the source yourself, but that really helped me get a good understanding of how that bit of code works. I think I'm way more likely to be able to dive into the code now to add small features even though that wasn't a "big lesson" so to speak, so hopefully I'll be able to make small contributions along the way.

    Anyways, that's all I've got for now. I might have a few more newbie questions soon as we're getting pretty close to start implementing a few of your plugins, but hopefully I won't have to bug you too much! :p
     
  50. prime31

    prime31

    Joined:
    Oct 9, 2008
    Posts:
    6,426
    @bj, well done! I look forward to the pull request! There is no need to be too scared of the source. It has a good number of comments, descriptive names and it is made to be extended with new components. So everyone can jump on in there and get their hands a bit dirty.