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

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

  1. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @mehware, you can but it will require a minor change. There is mouse support for the editor but it is disabled for non-editor (when running on a device). I'll redefine the defines in the next update so that mouse support stays active on web, osx and windows builds.
  2. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    Just for you mehware I pushed a new build with support for web and standalone.
  3. gamma.psh

    gamma.psh

    New Member

    Joined:
    Jan 25, 2011
    Messages:
    44
    Hello Mike

    Thanks for the work here, I was very happy about some of your plugins for our last app and it's nice to see you coming up with new helpfull stuff.
    In the App we created we have quite a lot of complex Guistuff. check out the Video on the other Post. here

    As you can see, we have some dragable lists, and quite a lot of text-stuff. A problem I had was standard buttons are completely useless the most time, because when you drag them they need to get deactivated.
    Dragable text needs textlength calculations, to know how far you can drag them.
    A dragable List also needs something like a Masked Area, where the list is in.

    So do you have solutions for this kind of needs?
    - Accessing buttonstates, so I can activate/ deactivate on touch Down touch Up touch Move and so on.
    - Calculations of text width/height with a cerain font.
    - A Kind of Mask thing, like GUI.BeginGroup(Rect); GUI.EndGroup() to crop stuff.
    - Some adaption of the GUI.Color maybe?
    - Scaling a button with round corners, some adaption of the guistyle.style.border thing?

    What I enjoy to see is the highlightedTouchOffsets, had some similar problems with a small back and home button to solve ;)
    The second thing that it's nice is to be free of the OnGui function, it just kills your bwain because you can not really use classes to create complex Guistuff. productlist was just *grrr i want to shoot someone*
  4. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @gamma, for the kind of stuff you had in that app I would have used UIKit and gone native for sure. So much of that is already built into iOS. UIToolkit doesn't aim to solve that problem. It is more for menus and in-game HUDs. The text support is still basic (you can get the height/width for the string and scale) but it doesn't yet have alignment. Color support is in. You can tint any object or string. There is no 9-slice component yet nor is there masking. The great joy of UIToolkit is that it is open source so you can make whatever you need then give back to the community the source code you made!
  5. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    Just uploaded an intro video tutorial to YouTube on how to setup UIToolkit and make a relatively laid out UI

    http://youtu.be/WeV1zbMpm5k
  6. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Hi Prime,

    I took a little look at this and noticed some glaring issues.

    1. the sprite borders aren't smooth, they have white halos and jaggy bits. Is this just a result of the texture packer as it looks quite bad.

    2. the shader used for the ui contains alpha test. Alpha test is one of the slowest things you can do on iOS, and I was wondering if you would consider removing it for a simpler shader?
  7. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    1. The textures were hacked together from Google image searches so they have some cruft. Feel free to provide some nice images for the demo scene!

    2. Feel free to comment out the alpha test if you don't need it or provide a stripped down shader (there is already a second without vertex alphas). It's open source so you can make it whatever you want and pass your changes back to the rest of the users so they can all benefit!
  8. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Yes brilliant, I just wanted to run those by you in case people miss those little details. I think you have found someone willing to save up and purchase -all- your plugins. It beats me why there isn't a bulk purchase option!
  9. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Ugh problems.

    1. I made a GameObject called UILayer, and a layer called UILayer, as in the video.
    2. I added the script called UI, to UILayer.
    3. I made a new material called UIMaterial, and assigned it to the UI script slot for Material.
    4. I gave the material your UIToolkit/Alpha Enabled (Default) material.

    Without any extra changes or anything, I hit run and get these errors:
    and...
    NullReferenceException
    I am only copying the process of the demo scene for text. I just want to display a simple FPS counter. Any ideas? (using javascript and have not yet got past above problems).

    I have a prepared .txt hiero font file and png, all ready to load in, but I can't get that far yet since it will not run without crashing even if I do have code waiting to be used for text. I must be missing something obvious, or perhaps it will not work without a dummy empty json + texture (even though I only want text?)...
    Last edited: May 7, 2011
  10. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @hippo, I didn't get a chance to make the font video yet but it's pretty simple. You always need to make a TexturePacker atlas. That is what you are missing. Stick the exported png from Hiero (sometimes it exports flipped so flip it back of it did) into a TexturePacker atlas just like the button images were added in the video. Then you can export the .json file (renaming to .txt) and your actual texture atlas. Be sure to stick it's name in the inspector slot like in the video.


    The idea behind it is that you put all you UI images including your font bitmaps in the same atlas so they all get shared in the same draw call. If that doesn't make sense let me know. I am hoping to get the font video up tomorrow but I've got a big item on the UIToolkit todo list to finish first.
  11. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Oh brilliant stuff :) that makes sense, I had been dithering with the idea of packing font and joystick images / misc ui stuff for the actual game screen in one tight file and this makes it so much easier. I will have a play with what you suggested :) thanks
  12. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    I followed the video tutorial exactly including setting my png font texture as text but no joy just yet. I did use an atlas from texturepacker (called font.txt) and put that name without the .txt into my UI script. I also have it's material set as UIToolkitMaterial.

    I am just trying to get it to compile and run without any code at the moment but it crashes on run each time. I'm sure I'm stupid, and I must be missing something. I've triple checked everything and it throws exceptions about texture width. The texture is in a folder called Font, would that be a problem, is it looking for a folder called Resources?

    Double-checked everything. Time to go to bed and dream of Prime31 letters and pink hippos.
    Last edited: May 7, 2011
  13. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    You almost got it. All the files (your exported fnt file, the exported json file and the exported png atlas) all need to be in a folder called Resources. Just in case it isn't clear, the fnt file and the json file both need to have their file extension replaced with .txt so they can be loaded into a TextAsset.
  14. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    For all the people who prefer to not mess with names I've made a little fix to avoid the renaming of the .fnt file and the .json file.
    What this means? you only need to create a folder called "StreamingAssets" in the root of your unity project (within the editor) and simply place the ".fnt" file and the ".json" file there. There's no need anymore to rename it to .txt
    Of course the texture should remain in the "Resources" folder as usual

    [​IMG]

    Attached Files:

  15. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,036
    Just watched the video tutorials - boy this looks good :eek:

    1) I was wondering, what about the actual menu background graphics.
    Can these be implemented and animated with the help of this toolset, too ? Or is this another kind of task it was not designed for yet ?

    I'm reeeeally curious about the font video :D
    This is something that has constantly bugged me and I never quite got my head around things, yet I feel we're thhhhhhis close to getting a breakthrough !

    Thank you so much for this wonderful piece of toolkit that it is :)
  16. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Eskema, I purposely removed SreamingAssets due to Android not supporting it. There is no way to get at files in StreamingAssets without a plugin on Android believe it or not.

    @Acumen, backgrounds will work fine though they will eat a huge amount of your texture atlas so sticking then on a quad might be a good idea unless you have ro in your atlas of course.
  17. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,036
    Yeh that would be perfect method for the example I'm thinking of anyways.
    Also I was wondering. What we did for our current gui to save texture space is to make the graphics "overlapping" so we could reuse the underlaying buttons and render the font/symbols on top and squeeze most of the texture space.
    Is this what were talking about in the video ? Just some 2-3 variable changes and that would work like a charme, too ?
  18. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Acumen, you get zIndex support so you could definitely do that.
  19. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    I know that android doesn't support (at least for now) that folder, but as I'm only working with IOS it's not a problem for me and I prefer to continue using the streamingassets folder ;)
    Probably there are other people in my situation using only unity for IOS and it's much easier to not rename things
  20. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Still not working.

    1. go to hiero, make a font, export as font
    2. rename the exported .fnt file to txt and optionally vertically flip the png.I now have font.png and ariel.txt
    3. open texturepacker. drag the font in and export as .json. Rename the .json as font.txt
    4. I have 3 files: font.txt (json), font.png, and ariel.txt in Assets/Resources/
    5. open unity. set the png to be of type GUI.
    6. Add a layer called UILayer.
    7. add a gameobject called UILayer with a script on it called UI.
    8. Set the texture packer name as "font" without quotes or extension.
    9. Set the layer to UILayer, and ensure UILayer mask isn't on my main camera.
    10. optionally set a decent material which will have no texture, for shader purposes.

    Hit run to test its all ok and get:

    "NullReferenceException
    UnityEngine.Texture.get_width () (at C:/BuildAgent/work/6bc5f79e0a4296d6/Runtime/ExportGenerated/Editor/Graphics.cs:900)
    UISpriteManager.Awake () (at Assets/Plugins/UIToolkit/BaseElements/UISpriteManager.cs:116)
    UI.Awake () (at Assets/Plugins/UIToolkit/UI.cs:37)"

    I did this on a fresh scene to be sure.

    Any ideas?
    Last edited: May 7, 2011
  21. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    The font name .fnt and the texture MUST be the same name, so you should have bitmapfont.fnt and bitmapfont.png
  22. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Eskema, I like the StreamingAssets method much better too. Damn Android always has to be a pain...

    @hippo, sounds like you are still missing the JSON config file from TexturePacker. Stick font.png into a TexturePacker atlas then export. You will get a png atlas and a JSON config file that need to have the same name. This name needs to be input in the UI class' inspector so that it can get the texture coordinates. Checkout the text demo scene to see a working example.
  23. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    Your solution is better because you have a global product so the only way is to use a global solution for all devices, in my case I don't care about android and I can proceed with a more crappier solution
  24. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    The .png file and json -are- the same name :S

    font.png
    font.txt (the json)
    ariel.txt (the .fnt file)

    You are both saying different things... because I have to rename to .txt, the .fnt file was renamed to ariel.txt, as mike does in his own project. Still does not work. I still can only use .txt extensions, right?

    I tried this naming scheme:

    font.png
    font.txt (from hiero)
    fontjson.txt (from packer)

    and also tried the alternative:

    font.png
    fonthiero.txt (from hiero)
    font.txt (from packer)

    All in Resources folder.

    Obviously updating Texture Packer Config Name to always point at the packer file without an extension. Can't get it to work. I think I'm cursed.
    Last edited: May 7, 2011
  25. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    contents of my exported json.
  26. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @hippo, here are the exact steps to follow:

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

    Bamm! Success!
  27. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,036
    Got another question.
    Actual menu animation, e.g. meaning that everything slides out/in can that be done with the plugin too ?
    For example, you click a button and the entire thing slides out to the left side and another menu slides in from the right side, with all buttons set up.
    Like some easy way to link all buttons to a background plane or something, that makes up an entire menu scene ?
    Can the toolkit be used for such actions, too, or would these have to be linked together and animated externally ?
  28. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Acumen, there is a branch on Github with support for grouping items and animating them. It also has support for multiple atlases in a single scene (almost). That branch will become the mainline as soon as all the bugs are worked out.
  29. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,036
    Splendid !
    Needless to say we just threw away everything we had so far and are moving over to your toolkit :)

    Next Question:
    What I'm wondering is, say we're tackling the main menu and the gfx just doesn't need a full 512x512 but a 256x512 instead. Will this have any drawbacks ? I mean it's power of 2, but anywhere you turn to it is advised to stay away from nonsquare textures.

    Should I rather add some other menu items from one of the next screens on top of these ?
    Last edited: May 7, 2011
  30. mmuller

    mmuller

    Member

    Joined:
    Nov 23, 2010
    Messages:
    87
    Mike,

    Thanks for sorting out the android issues so quickly, I'll be grabbing the branch tonight to have a play with the panels too. Expect emails !!!

    :D

    All the best...
  31. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Acumen, give it a try and see if it works. I believe (but don't quote me on this) that Unity does squarify non-square textures (definitely so for PVR as they only support square). If the image is squarified all your UV's will be wrecked and you will know right away.
  32. mehware

    mehware

    New Member

    Joined:
    Nov 19, 2007
    Messages:
    742
    Thanks prime you rock!

    - Matt
  33. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    For anyone interested, the PanelBasedRoot branch on Github was just updated and will most definitely become the mainline branch real soon. It has support for grouping elements into a parent (for easy animations of multiple items) and most importantly it supports an unlimited number of texture atlases. The API will remain identical for a single texture atlas but there are a few changes to it when using multiple (each sprite needs to know where its mama is). There is a demo scene included showing 2 atlases in one scene.
  34. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Good lord o larkie, its working! Thanks Prime!



    ITS ALIVE
  35. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    Awesome! Once you do it once it's simple every time thereafter. And regenerating with new sprites is quick also.
  36. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,036
    Did i understand this correctly that you managed to put the font on the same atlas as the other game relevant gui items ? That'd be great :eek:
    We could fit all the highscore and timer fonts on one atlas :)

    Can you confirm this, hippocoder ?
  37. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    You can put your font and all the rest of your UI on one atlas. That is correct.
  38. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    That's the purpose of this library, group all your GUI images including the font in only 1 atlas and draw everything with just one draw call, saving you drawing calls for other important things
    Last edited: May 7, 2011
  39. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    It's great stuff. In my own iphone game I actually just used LoadImage(filename, optionalAtlas=null);
    then Pack();

    And it would basically load images and pack them all onto an atlas in realtime but we can't do that in unity without making this library pro only. It is a much more funky choice if you are interested in super small distributables since you don't duplicate anything. But these days with Infinity Blade on appstore taking up a gig, who's counting?
  40. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    294
    The important here for me it's not the space but the performance. Having all your GUI and font images in one single atlas and draw all of them with a single draw call should be a standard for any engine out there
  41. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Having trouble getting a font up and running on the screen in javascript. I have got this far so far:

    private var text1:UITextInstance;

    Code (csharp):
    1. function Start()
    2. {
    3.     //load the font
    4.     var text = new UIText( "myfont", "myfont.png" );
    5.  
    6.     // spawn new text instances showing off the relative positioning features by placing one text instance in each corner
    7.     var x:float = UIRelative.xPercentFrom( UIxAnchor.Left, 0, 0);
    8.     var y:float = UIRelative.yPercentFrom( UIyAnchor.Top, 0, 0 );
    9.     text1 = text.addTextInstance( "hello man.  I have a line\nbreak", x, y );
    10.  
    11.  
    xPercentFrom needed two parameters in javascript, I dont know why. I gave it an extra 0 and the error went away.

    But text1 = text.add throws an error (Assets/scripts/Game.js(17,37): BCE0023: No appropriate version of 'UIText.addTextInstance' for the argument list '(String, float, float)' was found.)...

    is this library c# only?
  42. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Ah I see! js does not allow optional parameters :)
  43. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @hippocoder, the next push will have all the optional params removed temporarily until MonoDevelops bug is fixed.

    I guess now is a good time for me to push my hidden agenda: NEVER USE JAVASCRIPT! C# has more features, millions more resources to learn, MUCH better editor integration (full code complete, refactoring and tons of other code generation tools) and many other goodies. On top of that, learning C# is a skill that you can actually put on a resume.
  44. Matkins

    Matkins

    New Member

    Joined:
    Aug 24, 2009
    Messages:
    141
    Yet another excellent tool from you prime.

    Regarding positioning of gui elements, is there an easy way to center an object on the screen, horizontally, vertically, or both? I couldn't see an easy way to do this, but perhaps i'm blind.
  45. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Matkins, there is a positionCenter method along with the other relative positioning methods. They are all in a class of extension methods for easy perusing. The same goes for the animation methods. The filename will give it away because it will end with "Extensions" to indicate that it is extension methods.
  46. defjr

    defjr

    Member

    Joined:
    Apr 27, 2009
    Messages:
    436
    Dangit, you're going to force me to learn/use C#
  47. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @Earl, no forcing. Just a firm suggestion. It will make your life easier in the long run :)
  48. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    Prime: I started with C++ and really fell in love with just a simple life of js :p I will probably get nagged by mike_mac or Neil Carter on IRC to go C# at some point. But I think optional parameters lead to messy code anyway :)
  49. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @hippo, the thing is I fail to see how JS is simpler. It lacks features available to C#, doesn't have anywhere near functioning code complete and it doesn't exist outside of the Unity world. That alone is reason enough to go C# let alone the myriad other reasons.
  50. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Messages:
    10,604
    I'm old and stubborn. When you get to my age, young prime, you'll see. Hee hee. Having said that I'll port to c later tonight I guess.

    Question: how do get the actual on-screen width of a string displayed? The reason for this is because I want to generate buttons under the text, which can be tapped :)

    I'd rather prioritise text size than button size for this particular way of working as it will be several lines of text which need to be a set size. Do you have methods exposed to return the rendered bounds of a particular piece of rendered text.