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

Finally figured it out - I am using the Scale parameter in TexturePacker. It works for images because the TexturePacker meta file has the dimension data stored in it. It doesn't work for fonts because the the font meta file hasn't realized the font has been scaled.

It could be supported by reading the scale parameter in the "meta" section of the atlas jason file and then use that to scale the UVs for the font. I'm not going to bother with it though and am going to update my source assets so that I don't need to use scale in TexturePacker.

Thanks for the help.

 

I am a bit confused on the workflow for making new fonts. What exactly do you do there?

Also in your code you are using this line:
var text = new UIText( textToolkit, "prototype", "prototype.png" );

But in the resources folder there is only a prototype.txt, there is no prototype.png but it still works?

Conversely, I change that line to this:
var text = new UIText( textToolkit, "textDemoSheet", "textDemoSheet.png" );

Assuming that because in the resources folder there actually is a textDemoSheet.png but that line gives me an error.

How does this UIText class work exactly?

 

@eem, there are a couple videos on YouTube from me and other members of the community. Do a search for UIToolkit and you should find them. They should clear things up for you.

 

A quick question, I'm using UIVerticalLayout and am adding UIContinuousButton 's to it, I then want to delete all the buttons and replace with other buttons, it's almost working from what I can tell....
I'm using the following

where CategoryList is a list of my buttons which I maintain so I can go and delete them out from the layout (vBox2)

the problem is that I end up after replacing the buttons once or twice getting this error

I've tried various placements of begin end update, but they've not seemed to have had any effect on it so I'm not sure whats happening.
I'm not triggering any animations on these buttons at all or anything, just clearing them out and replacing them.
Am I going about this the wrong way?

 

I'm facing problems with trimmed sprites and animations, the way animations work is that they use the original sprite size but I want to use the original size before the trimming in TexturePacker. Right now if I use trimmed images the animation frames resize to the original sprite size.
Is there a simple way to fix this?

Thanks!

 

@_ex_, you could just write a new animation extension very similar to the current one that does the resizing on each frame change.

 

I don't know if I'm missing something here, but on youtube searching for UIToolkit only brings up your two UIToolkit videos which don't seem to explain the process of turning a TTF into an atlas for use in the system. Is there a video that covers UIText and making your own font atlas specifically?

Also I still don't see or understand why you use this line:
var text = new UIText( textToolkit, "prototype", "prototype.png" );

when there is no prototype.png in the resources folder

 

I have some problem with the depth or zIndex value

I try to set the layer of the UISprite as the document said that 1 was the front and the more the under layer
But it seem doesn't work for me
then I going to debug the zIndex and observe the value of z in transform of the uisprite under uitoolkit in the scene
the value was correct but the layer still the same (position in world space are collect but the draw sprite was still the same)

All I can do for now is make an order in the adding sprite state like if I want something lower, I add first.

I also play with the KitchenSink example and I see that the layer will not update(to a correct zIndex) if It was not animation position or have some click event?

Can you explain how to work with zIndex value again?

Thank you

 

I'm struggling with how to show a button in its inactive state. Right now, I know it is inactive from the behavior in game, but it's not showing the referenced UV frame, which I have initialized as follows:

flurryButton.disabledUVframe.Equals("IconFlurryI.png");

Any thoughts on how to do this or why it's not working?

Obviously there's no space in the png above, it's this forum doing some strange editing.

 

eem: prototype.png is "included" in the textDemoSheet.png that was output by the texture packer program. Look in the corresponding txt file (textDemoSheet.txt) and you will see it points to prototype.png as one of the (in this case the only) original files that make up the texture atlas.

prototype.png was output by the bitmap font creator program (such as Glyph Designer or Hiero), along with the prototype.txt file that is needed by UIToolkit as the first filename in the line:
var text = new UIText( textToolkit, "prototype", "prototype.png" );

However, I have a question for Prime31 - in both textDemoSheet.txt and textDemoSheet2x.txt they both point to prototype.png, when I thought that textDemoSheet2x.txt would point to prototype2x.png. Especially as the prototype2x.txt file refers to prototype2x.png.

I create a normal and a 2x font in Glyph, then create a normal and 2x texture atlas in Texture Packer, but obviously the 2x .json (renamed to .txt) file refers to the 2x font - and this doesn't work in UI Toolkit. A workaround is to edit the .txt file and remove the 2x so it points to the normal one - much like the way textDemoSheet2x.txt works in your demo.

I assume that UI Toolkit does something behind the scenes to make this work, but I like to understand what's going on, so would really appreciate some insight into this please Prime31! And thanks again for a wonderful library (I did already express my thanks ages ago in this thread!).

 

@Mousey and eem, the name you reference your sprites/UIText with is the original filename. You always want your original filenames to be the same and not have the 2x suffix. If you look at the kitchen sinks Texture Packer source folders you will see all the filenames match for the SD and HD atlases. The reason for this is so that you can always access a particular image with the exact same line of code. This let's you not have to think about if you are at SD or HD at runtime at all.

 

Thanks Prime31, I now understand the advantage of being able to access both the SD and HD versions of the sprites/UIText with the original filename.

I assume the meta data at the end of Texture Packer files (for example in the kitchenSinkSheet2x.txt file) is ignored by UI Toolkit?

 

@Mousey, that is correct. The other metadata isn't used by anything at this time.

 

nevermind. figured out my problem

But am curious to know, how is the UITookit text renderer superior to unity's own builtin 3D text component?

Also I find using the 'Mobile/Particles/Alpha Blended' shader produces better results than your "Alpha Enabled UI Toolkit shader". If two layers of text overlap using the UIToolkit shader than around the edges of the text where the alpha is not pure black or white, it will not render any of the UI layers behind it, so there is a fringe around the text elements. I imagine this is because the UITookit shader does not 'alpha blend' as of course the 'Mobile Alpha Blended' one does, and I also imagine alpha blending takes a bigger performance hit. But am wondering, do you know how much of a performance hit? Is avoidance of alpha blending the UI elements something ideal, or that you did purposely for performance reasons?

 

The advantages to using UIToolkit for text are that you only have one draw call and one texture for your entire UI. The perf hit for alpha blend varies drastically based on the device and size of the area that is being overdrawn.

 

Oh I see.

To get your font alias on the same image as your buttons do you export your font alias to take up like 256x256 of texture space, then have texture packer pack that 256x256 font alias in with all your buttons and things? Or is there some way to have have texture packer know where the font symbols are on an image and have it pack your other button images around those?

 

@eem, your sprite atlas is nothing more than a standard sprite to UIToolkit. You just stick it in a Texture Packer atlas like any other sprite.

 

Prime31,

do you have push-notification plugin for Android ?

 

@eem: I have edited my previous post to make it slightly clearer, but you need 4 files to use UIText in UIToolkit:

1. myFont.png = your bitmap font, created by (for example) Glyph Designer.
2. myFont.txt = information about your font, created by the same program.
The above two files are referenced by the UI Tookit line:
var text = new UIText( textToolkit, "myFont", "myFont.png" );
3. myTexture.png = your texture, created by importing myFont.png and all other UI elements (buttons etc) into Texture Packer.
4. myTexture.json = information about your packed texture, created by Texture Packer - but rename this to myTexture.txt.
You would then put "myTexture" into the texturePackerConfigName in the inspector, and import the two .txt files and the Texture Packer .png into your Resources folder.

 

Hi Prime31,
Any ideas on the problem I'm having with Uivertical layout (details a page or so ago)

 

@jon, no idea. there isnt enough information to say. i would start by ensuring no animations are running when you remove the objects then make sure you don't destroy any of them which you are definitely doing at some point to get the Transform killed.

 

Whats the appropriate way to get rid of the buttons added to a layout and add in new buttons?

 

remove and add

 

Sorry if this has been answered before, but this thread is huge! Is there a preferred method to contribute new controls? There's no "contrib" in the repository currently, and I'm guessing you don't want a pull request of new controls right in to the main code base.

Thanks!

 

@squidbot, if you include a demo scene then a pull request should be fine.

 

OK so a little more info....

This is fun,
With the bool in remove child set to false it would seem that all the buttons kinda stay children.
With the bool set to true I get errors
I added .GetTextures to dump out a list from the uitoolkit of all the images held in the json file so i can walk through them easily.

 

Hi, I'm trying to use positionFromBottomLeft on UIText and it says that doesn't work.

Am I doing it wrong?

Code (csharp):

1.  
2. void Start () {
3.         text = new UIText("arialZigzag", "arialZigzag.png" );
4.         text.addTextInstance(gameObject.name, startingPos.x, startingPos.y, (float)1, 0 );
5.         text.positionFromBottomLeft(percentagePos.y, percentagePos.x);
6.     }
7.  

error CS1929: Extension method instance type `UIText' cannot be converted to `IPositionable'

 

Hi guys,
I am using UIToolkit.
It's very nice but i have one problem.
I used UISwipeDetector for moving panel and panel contain 30 buttons.panel moving (left and right) is alright but some buttons touch event not detected.
Please Help me.

 

Mousey,

Just to avoid extra textures in Unity folders, you could keep the file "myFont.png" outside. It is not a requisite to have it in resources folders as it appears in the myTexture.png atlas. I personally keep all the original pgn in a separate folder.

 

@ciaravoh - you are quite right, and in fact I don't import the original .png's into Unity (as you say, they are in the Texture Packer .png)! Thanks for pointing that out; I will edit my post to correct the error.

 

I stopped using swipe detectror for this very reason, and wrote a very simple workaround,
I had to modify UIButton (I generally use continous buttons but thats subclassed to uibutton works)
so that it had an additional event OnTouchOutside by adding

modifying the onTouchEnded method at the end of UIbutton script to include the following....

then in my manager code I basically logged the mouse/touch X&Y on the touch down of the button
and then on the new OnTouchOutside handler I Check the delta and if its greater than a set figure I regard it as a swipe execute my code, otherwise I just have the button loose focus as it would do normally

The only drawback is that if you have gaps between your buttons then it won't execute, although I guess you could have a large transparent button under them all and have the same thing happen for that.

 

ChrisE - you're close. The position**** methods shouldn't be used with UIText. Check out the TextManager.cs script in the demo and you'll see that you use the UIRelative static class to get your x and y values. You then use these when you call addTextInstance

Code (csharp):

1.  
2.         var x = UIRelative.xPercentFrom( UIxAnchor.Left, 0f );
3.         var y = UIRelative.yPercentFrom( UIyAnchor.Top, 0f );
4.         text1 = text.addTextInstance( "hello man.  I have a line\nbreak", x, y );
5.  

 

WiseRat,
Are

Code (csharp):

1. flurryButton.disabled = true;

or

Code (csharp):

1. if (flurryButton.disabled) ...

what you're looking for?

 

Hi jon_unity_jumping,

I am using UISwipeDetector with some value change and it's work properly.

var swipeDetector = UISwipeDetector.create( new Rect( 0, 0, Screen.width, Screen.height ), 4);

I am only replace last argument by 4 and work properly.

 

Mike awesome work!

Just a little question.

I am trying to add a UIActivityIndicator Element to the Project but i am having some trouble with the rotation.
I thought i would just copy the Knob Element and change that some but my Element rotates around the top left corner all the time.
How do i get the sprite to rotate around its center?

Thx a lot in advance!

 

@Rozik, when you create a sprite there is an extra, optional Boolean param that let's you set the anchor in the center instead of the top left. See the UIKnob code or the button that scales in the KitchenSink demo for examples.

 

I've also noticed that if I populate my UIVerticalLayout with buttons which extend off the bottom of the screen (to be able to have a 'scrollable menu' type of thing. and then move it up so the 'menu' is at it's mid point ie say we have s * screen height worth of buttons in the layout, and we position the layout -1 * screen height so we see the middle portion of the menu.
then when I click the currently visible top button it reports that the very top button in the menu if clicked!!
and only after I reposition it again does it work properly.

Help!!
UIvertical layout is causing me a bit of grief!

 

I noticed a few pages back that culling to anything but the edge of the screen wasn't built in functionality, but it was easy to resize and change the texture coordinates. I'm just checking(I won't be implementing this today) that _uvFrame in UISprite is what I'm going to be changing. Assumedly adding to the x/y position if I'm cutting off the top/left sides and lowering height and width if I'm cutting off the bottom/right sides.

edit: err actually looking at the UIUVRect the x/y are bottom left not top left, so reverse the vertical changes.

 

@agreen, you are on the right track. The uvFrame would need to be adjusted and then the actual sprite size reduced to match the changes.

 

I tryed to use and modify the containers, I gave up,

 

Alrighty, is there a convenient way to restor a changed size/UV sprite to it's original state or will I need to add something that keeps track of that as well?

 

if I recall, there is an originalFrame field in there.

 

Hmm I don't see one off hand, I'll look more indepth/make my own when I'm actually implementing it.

 

It could be a figment of my imagination or on the UISprite or UIObject classes. I'm away from my computer or else I would know for sure.

 

I can't seen to get the UI to show up. I'm using your sheet from the demo, and everything is at 0,0,0 like I've seen some people have problems with, but when I run it, there's just a purple line from the origin leading up. I checked around, and the material UIToolkitMaterial didn't have a shader on it, so I put the UIToolkit one on there, and now the line is green. I get the distinct feeling that I'm looking at the UI from like the top down or something. I tried moving the UICamera during playback, but nothing happened.

EDIT: So after an hour of screwing with this, apparently RIGHT after I post, I found that the UITookit was not on the UILayer, only the UI parent object. They both need to be. Gonna leave this here in case anyone is as forgetful as me.

 

I fixed the hover bug and I would like to share my findings with the community. It's an under 20 line solution that works by allowing hover if the platform supports. Or behave like the mobile code if the code does not support it.
Prime31, how do I share this code with the community. Will I be given credit for my contribution in the credit txt file?

 

@namoricoo, you can send a pull request and if the code fits in with the rest of the UIToolkit we will incorporate the pull request and add you to the contributors.

 

can you post a link to where I get this pool request.

 

It's a part of Github.con

 

I seem to be running into a problem where a font at certain sizes becomes super blurry and unreadable. More specifically it's when I'm using the non 2x form and scaling it down a bit more. If I go into the editor I can actually get to a zoom position where one pixel closer to teh text it becomes completely legible, and one pixel back it's super blurry. If it helps, it's a bolded text with an outline. Has anyone ran into this before?