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

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.

 

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

 

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

 

I too would be interested in such stats.

 

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)

 

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

 

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.

 

Is there a way to load a resource into a sprite on this? Like a www texture?

 

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!

 

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);

 

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?

 

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?

 

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.

 

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)

 

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.

 

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

 

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.

 

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!

 

Do you have any code you can provide?

 

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 )

 

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!

 

So how do you detect the orientation change? Do you just poll Screen.orientation every frame to see if it's different?

 

i've only seen that problem when mucking with scale, which your code doesn't appear to do...

 

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.

 

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

 

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?

 

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

 

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!

 

So does anybody know why UIScrollableVerticalLayout is messing up?

 

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?

 

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

 

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

 

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.

 

@shayak, watch out when using textures that are 4096x4096. Many devices do not support textures that large.

 

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();

 

@Prime31, got it. Thanks for the swift response. Much appreciated.

 

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?

 

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

 

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

 

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

 

Best free thing ever!

 

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.

 

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)

 

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

 

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.

 

nevermind, i just find the solution it was on the exemple textTestscene.

 

all spirtes have a zIndex variable that you can set

 

Is there a way to flip sprites horizontally/vertically?

 

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.

 

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