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

If my project uses over 20 GUI elements it should still run smoothly on mobile devices?

 

@ice, 20 GUI elements with UIToolkit is only 80 verts. That will run just fine assuming that your gui isnt all transparent and covering the entire screen.

 

Wow thanks! Also, is texture packer the atlas generator you would most recommend?

 

@ice, TexturePacker is the only atlas generator currently support and in my opinion the best out there.

 

If each UI layer requires its own camera, does having multiple layers cause a severe performance impact (i.e. on mobile devices)?

My game makes use of 3 layers (there are only ever 2 shown at a time at most, but usually just 1). Is there a way to improve performance by somehow disabling an entire layer (instead of hiding each GUI object manually)?

 

Right now I'm working on implementing joysticks. Problem is whenever you drag out of a 200x200 area, the "connection" breaks. Im just messing around with the sample joystick script by the way. Which value can I change to make it at least half the screen, and hopefully the full screen?

 

Very nice!

I posted another issue on github. I'm not finished digging through the source code and seeing how everything works. But once I am, hopefully I'll be able to fix some of the problems myself and commit changes.

 

Hey everyone, I just DL'd this from GitHub. Got a really noob question. What the best way to import this into an existing project?

Thanks!

edit: NM I just dragged the folder into my project...

 

@fin, the easiest way to get it into an existing project is to right click the UIToolkit folder and export a unitypackage. You can then import that into an existing project.

 

Thanks! Will do!

 

HI Guys, just a quick question about the Joystick.
All fine but if i move up it goes back to the centre, this problem accurs only on the top any other direction its great...i tried to increase the deadzone and nothing changes...any clue?

Cheers,
Iguana

 

Hi everyone, im having trouble sprite transparency.

When creating two sprites and trying to put a Sprite A into front of Sprite B, using position.z i have alpha probleme:
All the pixel where the alpha is between 0.0f and 1.0f are hiding the sprite behind.
To show the probleme i made a new project with the last version UIToolKit and Unity 3.5.2f2

Here is how it looks:
http://i.imgur.com/9WnrY.png

I dont understand where it comes from, some people suggest me to play with the UIToolkit Alpha Enabled shader ) but i don't know anything about shaders.

Here is a shortcut to the default shader if you want to take a look: http://pastebin.com/GzmeQ7Zc

Any suggestion ?

 

Can anyone help me with my question about the joysticks that I posted earlier?

 

Hi!
I have a problem with UIToolkit

Whenever I try to set up UIToolkit I get an "InvalidCastException: Cannot cast from source type to destination type." error. I've just started using UIToolkit so I don't know much about it.

???

 

I just updated to the newest UIToolkit and all my positions for my Sprites, Buttons, Knobs, and anything touchable, seem to be off now by a quarter of a screen width and a quarter of a screen height. So, something that would normally be centered on the screen, now appears at the botton right of the screen. I was wondering if anyone else was having this problem? I normally use the PositionFromTopLeft function for positioning.



Edit:
It would seem the centerize() method in UISprite is not working correctly. Does anyone have any workarounds?

Edit 2:
When I comment out these lines in the UISprite Constructor:

Code (csharp):

1.  
2.     public UISprite( Rect frame, int depth, UIUVRect uvFrame, bool gameObjectOriginInCenter ) : base()
3.     {
4.         this.gameObjectOriginInCenter = gameObjectOriginInCenter;
5.  
6. /*COMMENTED OUT LINES*/
7.  
8. //        if( gameObjectOriginInCenter )
9. //        {
10. //            _anchorInfo.OriginUIxAnchor = UIxAnchor.Center;
11. //           _anchorInfo.OriginUIyAnchor = UIyAnchor.Center;
12. //        }
13.        
14.         // Setup our GO
15.         client.transform.position = new Vector3( frame.x, -frame.y, depth ); // Depth will affect z-index
16.        
17.         // Save these for later.  The manager will call initializeSize() when the UV's get setup
18.         _width = frame.width;
19.         _height = frame.height;
20.        
21.         _uvFrame = uvFrame;
22.     }
23.  

All the UISprites/ UIButtons / UIKnobs, etc, that are NOT parented/anchored are correctly centered, but then any UI that are anchored positions are wrong. If I comment back in those lines then all the parented/anchored UI are correctly positioned and anchored, but the unparented UI are now positioned st the topleft, instead of their center.

SO, I think the main issue is if a UIElement is not Anchored it isn't centered. I was wondering is there a new way to position UIElements that don't have a parent?

 

For those who may have the same issue as myself after updating to the newest UIToolkit, just put this code in to fix it.

In the file IPositionablePositioningExtensions.cs, put this if check in for the function refreshPosition:

Code (csharp):

1.  
2.     public static void refreshPosition( this IPositionable sprite )
3.     {
4.         // Get sprite depth
5.         var depth = sprite.position.z;
6.        
7.         // Get anchor info
8.         var anchorInfo = sprite.anchorInfo;
9.  
10.         // Get parent anchor position
11.         var position = parentAnchorPosition( anchorInfo.ParentUIObject, anchorInfo.ParentUIyAnchor, anchorInfo.ParentUIxAnchor );
12.  
13.         // Add position offset
14.         if( anchorInfo.UIPrecision == UIPrecision.Percentage )
15.         {
16.             position.x += UIRelative.xPercentFrom( anchorInfo.UIxAnchor, parentWidth( anchorInfo.ParentUIObject ), anchorInfo.OffsetX );
17.             position.y -= UIRelative.yPercentFrom( anchorInfo.UIyAnchor, parentHeight( anchorInfo.ParentUIObject ), anchorInfo.OffsetY );
18.         }
19.         else
20.         {
21.             position.x += UIRelative.xPixelsFrom( anchorInfo.UIxAnchor, anchorInfo.OffsetX );
22.             position.y -= UIRelative.yPixelsFrom( anchorInfo.UIyAnchor, anchorInfo.OffsetY );
23.         }
24.  
25.         // Adjust for anchor offset
26.  
27. //THIS IF CHECK NEEDS TO BE HERE
28. //To make sure not to adjust the anchor if ParentUIObject is null.
29.         if(anchorInfo.ParentUIObject != null)
30.         {
31.                 position.x -= UIRelative.xAnchorAdjustment( anchorInfo.UIxAnchor, sprite.width, anchorInfo.OriginUIxAnchor );
32.                 position.y += UIRelative.yAnchorAdjustment( anchorInfo.UIyAnchor, sprite.height, anchorInfo.OriginUIyAnchor );
33.         }
34.  
35.         // Set depth
36.         position.z = depth;
37.        
38.         // Set new position
39.         sprite.position = position;
40.     }
41.  

 

Hi!
I am new in unity and I use javascript.I want to convert from C# code to javascript.
C# code :
Void Start(){
var playButton = UIButton.create("playUp.png", "playDown.png",0,0);
playButton.onTouchUpInside += sender => Debug.Log("Touch is pressed");


var toggleButton = UIToggleButton.create("cbUnchecked.png","cbChecked.png","cbDown.png",0,0)
toggle.onToggle += (sender,newValue) => playButton.hidden = !newValue;
toggle.selected = true;
}

How to write it in javascript?

 

Hi !
When I use this code it show the error message "positionFromTopLeft is not member of UIButton".

This is my code:
newGameBtn = UIButton.create( buttonToolkit, "newgameUp2x.png", "newgameDown2x.png", 0, 0 );
newGameBtn.positionFromTopLeft(.55f, .215f);

please help me!

 

Have you declared newGameBtn as a UIButton?

 

Hi all,

I just started playing around with UIToolkit and it's great ! Finallay we can create and manage GUI easely !

Now I'm wondering how to do a simple button with text ? At first I though to create a custom component which would has a instance of UIButton and one of UITextInstance and then do some specific code to manage both and create the button with text above it. But now I'm not sure it is possible. First I need to atlases, one for text and one for button. But in this way I would have to UIToolkit so the UIButton and the UITextInstance would'nt be in the same one. So I won't be able to manage both like one component.

Not sure that I'm clear enough. But if somebody can give me advice about how to do a UIButton with UITextInstance above it and manage both like one unique component I would be very happy !

Thank you.

 

thank laserlars!
I have declared newGameBtn as UIButton, but It still show this message.
If I use in C#, It run well.

I have declared it as
var newGameBtn : UIButton;

 

Hi all,

I'm still trying to do what it looks something simple, a text button, but without no success. Can anyone help me ? I'd like to create text button with dynamic text and a background color or image. But I can't figure out how to do. At first I thought to do something more basic, just a UITextInstance clickable. But that type of component are not. So I wanted to add the UITextInstance into something else which it is. But didn't find any in which one I can simply add a UITextInstance. Most of them require a UISprite.

Someone to help me or give me a clue ?

Thank you guys.

 

@simjeanny: this is exactly why I stopped using javascript after one week in my Unity-affair. Life has been alot easier with C#, especially when using plugins like this. It may not be the answer you hoped for though :]

 

Hi all,

I have created UI by using EASYGUI. Can EasyGUI and UIToolkit work together?
If it ok. How to re-position it?

thank laserlars!

 

@bali, the scrollable containers demo scene has an example of buttons with text. Studying the example scenes will get you a ton of information about UIToolkits usage.

 

Code (csharp):

1.  
2.                 UIButton button = UIButton.create(FrontEndButtons,"options_button_OP.png","options_button_OP_press.png",x,y);
3.                 mResetGameText = mText.addTextInstance("ReSet GaMe",x,y,1.0f,1,Color.black,UITextAlignMode.Center,UITextVerticalAlignMode.Middle);
4.                 mResetGameText.parentUIObject=button;
5.                 mResetGameText.positionCenter();
6.                 button.addText(mResetGameText);
7.                 button.onTouchUpInside += PlayButtonSound;
8.                 button.onTouchUpInside += SetResetGameState;
9.  
10.  

 

anyone else have issues with sprites blending to the wrong background?

I've also got an odd issue where I click on an object that is inside a vertical scroll container, and just by touching the object it changes what my font is blending with (similar problem to the first question)..so first enter the screen, font is blending with the button it's overlayed on, touch the object in the container, and now the font blends with the background, making it appear like it has a border or a background.

 

Hi, is there any way to animate the color and alpha of UITextInstance? "colorTo" and "alphaTo" functions does not work with text

 

I'm loving this toolkit!

Big Question here though... been searching a bunch and can;t find the answer or if it's even possible. I'm trying to use the toolkit for the sprite feature but I need it to be passed to an objects Texture (material.mainTexture)

Is this possible at all and if so how to I go from UISprite to Texture2D ? Anyone?

Thanks!
Jason

 

Can someone maybe help me with this. I keep getting weird results when using the following:

Code (csharp):

1. UIButton newGameButton = UIButton.create("NewButton.png", "NewButton.png", 0, 0);

I end up with something shown in the picture. I have no clue what I am doing wrong and I'm just starting out with using UIToolkit. I also tried resizing and it changed nothing.

 

@BrumDogPro
can you give more details?
the code is right, but what is the rest of the code, and what is the graphic you are using?
is the sky the button or a bg and the lines are a render of the button?

when you look at your UIToolkit (the game object which is the child of the UI) during play, does the material looks correct?

 

@rextr09

here is an example of using alpha and color on text... if you need more say so...

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4.  
5. public class textTest : MonoBehaviour {
6.    
7.     private UITextInstance text1; //declare a var for text
8.    
9.    
10.     void Start () {
11.        
12.         // setup our UIText which will parse our .fnt file and allow us to create instances that use it
13.         var text = new UIText( "yourFont", "yourFont.png" );
14.        
15.        
16.         text1 = text.addTextInstance( "Put your text here", 0, 0 ); //set the text value
17.         text1.pixelsFromTop( 0, 0 ); // position the text how ever you want
18.         text1.alphaTo( 0.7f, 0.1f, Easing.Linear.easeIn ); //an example for alpha change (you can use coroutine to keep loop or whatever
19.         StartCoroutine( modifyTextInstances() ); //example for color change using coroutine
20.     }
21.    
22.     // Update is called once per frame
23.     void Update () {
24.    
25.     }
26.    
27.     IEnumerator modifyTextInstances()
28.     {
29.         yield return new WaitForSeconds( 1.0f );    // wait for... and then change
30.         text1.setColorForAllLetters( Color.green ); // changing letters colors
31.     }
32.  
33. }
34.  

 

how to use a lot of resource files in UIToolkit?

 

@prime31 More Details:

There isn't anymore more code than that. I just started working on it. And the sky is the background and the weird lines are supposed to be my button. Here is the output from TexturePacker, I was trying to load the 'New' Button.



Besides the watermark that texture packer put on there. I have been unable to get anything to work with it. I followed all steps in the youtube videos.

 

@BrumDogPro

hi man if there is no more code then it is hard to say. i guess you are working in C#? did you put it the right place (void Start() ), did you set the project correctly, the material is set up right? it is defined as a GUI material? there can be many things.
if you want to upload the package of you scene i can take a look and try to see what you missed on the way.

 

@werneroi Yes i am working in C# and I did put it in the Start() function. I'm pretty sure I did everything correct but I may be wrong. All the other built in stuff works alright. I'll post the package with the menu and resources here for some help...

View attachment $MainMenuTest.unitypackage

 

Thanks @werneroi, I tried your code but it doesn't work. AlphaTo does not change anything. Also I had to remove the line "text1.pixelsFromTop( 0, 0 );" because it gives a compiler error. Can you tell the UIToolkit version that you currently have? I'm using 11.03.. Thanks..

 

@BrumDogPro

hi man i am playing with your scene and i admit there is something wierd going on, though when i try to replace your atals (MainMenuUI) with another atlas everything works fine, which leads me to believe there something with the atlas, now i had a while ago an issue with an atlas that it never found the right cordinats to display the image correctly, i just created another one with a new name at it worked well then. maybe try this? i wish you the best of luck and let me know, i will try to test it more later but i got to finish my things first

 

hi, i dont know the number but i am using the last one. the code works well here...
if you open the demo scenes and look at the textManager there is code for color and alpha there, try to use that and change values to see if that works, unfortunately this is the best way to learn as it seems

 

@werneroi thanks. I will just try to work things out with it.

 

Having what is probably a very simply issue. I noticed this listed on the main page.

"Drag the UIToolkit.cs script onto it. (You can create multiple UIToolkit child objects that each have their own texture atlas for when one isn't enough). Your object hierarchy should look like this."

No matter what I do I cannot get the to work. The image linked is here:http://f.cl.ly/items/161Y2S401V1p163O0g19/Screen shot 2011-05-08 at 10.34.01 AM.png
which is accurate for one toolkit object, but I cannot quite figure out how to use multiples.

Each time I do, one of them doesn't work, and I get errors stating that the images used cannot be found. Even though each of these objects works without the other one in the scene.

What am I doing wrong?

 

@Valicit.
hi.
to use multipule atlas what you do is:
1. create the main UI (like you did)
2. add a UItoolkit as a child and set it to your atlas
3. add another UItoolkit as a child and set it to be another atlas.

so now you have 2 UItoolkits under the UI, right?

now in your script you have to decalre that you have two UItoolkits

you do that by entering these lines before void Start():

Code (csharp):

1.  
2. public UIToolkit Toolkit1; //these can be named however you want, and they are set to public so you can link them in the inspector
3. public UIToolkit Toolkit2;
4.  

now you have to tell each UI elements you make, which atlas you are taking its graphics from,
now lets say that you want to make a button, the graphics are in the first atals, so it is the first UItoolkit, it is now called Toolkit1 and you need to tell UI to use it, like this:

Code (csharp):

1.  
2. var mybutton = UIButton.create(Toolkit1, "button_graphics.png","button_graphics_Down.png",0,0);
3.  

now you want to make a text line and the font is part of the second atlas, so it is part of Toolkit2
and you go:

Code (csharp):

1.  
2. var myTextCreator  = new UIText (Toolkit2 , "font","font.png") // this sets the main text generator, so you can create as many texts as you want from it
3. var helloText = TextCreator.addTextInstance ("write you text here\neven in two lines!",0,0);
4.  

I hope this helps out. good luck.

 

@pweeks @Prime[31]
Thanks you for your answers.

One last question, what is the difference between

and

Thx !

 

Hi,

I wrote a small class name UIButtonLabel which extends UIButton. The only difference it's an extra argument which is a UITextInstance. The instance of the UIButtinLabel is set as parentUIObject of the UITextInstance. The class works fine, now I have a UIButton with a label.

But now I have some problem to interact with my custom button. For example, if call "alphaTo" on my UIButtonLabel class only the "UIButton" part of my custom button will be animate and fade. I didn't find how to override this behavior which is write in the UIObjectAnimationExtensions class. But I think even if I could it wouldn't be enough or at least right. I mean, "AlphaTo" Co should return a UIAnimation instance which can handles only one sprite. So how can I manage a custom component which is composed by one or more UIElement ?

I hope my explanation are clear enough. Thank you.

 

i would bet the issue lies in the atlas because you're using something not supported. when you go to save, texturepacker should tell you the options you're trying to use and the ones you can't use because you havent purchased it...turn off those options, get rid of the watermark, and lets us know the results

 

I think you would have to add code to the animation routines to work on a sprites children if it had any...just a quick guess

 

[EDIT] fixed my positioning question, turned out to be very obvious :|

However, exporting to a webplayer made my ui unresponsive to mouse input!

 

I thought I had this sorted using "zIndex" and each toolkit "layer" but now i've got a great situation...iphone/ipod build doesnt have sort issues, ipad build does...but only when running the ipa file. run from xcode it's fine, run the app that xcode copied straight from the ipad, and it's fine...build an ipa, install it on device, now have sorting issues...any clues?

 

Hi guys,

UIToolkit is amazing! Took a while to get the hang of it, but seems to be doing everything I need.

Just a quick question, how would I go about adding text to a UIVerticalPanel? I'm wanting to create a hi-score table. I tried the addChild() function but I got 2 errors.

The first saying: UIVerticalPanel.addChild(params UISprite[])' has some invalid arguments.
The second: cannot convert `UITextInstance' expression to type `UISprite[]'.

Has anyone tried something like this or have a better idea on how to implement this?


EDIT: I found a workaround to this problem, using parentUIObject.
example: text1.parentUIObject = vPanel;

For anyone having the same issue this seems to work fine, although I haven't done much testing with it. If you have a better way of doing this feel free to fill me in. Thanks

 

Is there an easy way to make an image button where you can have, say, a default transparent button style and simply swap out an image? I figured I might be able to just using transparent buttons and just adding sprites to the background and try matching their positions well, but was hoping there might be a better way I'm just not seeing.