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

Hi Prime, i'm trying to use the UIJoystick on my new game but i have a problem.
I got a car fully working with the Joystick (mobile assets), but due to the increbile amount of graphics i will have to use, i decided to use your fantastic UIToolkit but i cannot find a way to connect the your joystick to my car.

In order to start this game i did a tutorial and all the scripts are in Javascript, its very easy to connect the joystick i found on the mobile assets (just drag and drop)...but the UIJoystick its not recognised as a joystick object.

Any idea of what is the problem?

Thank you.
Iguana

UPDATE: solved Thank you anyway for this fantastic plug in!

 

I spent over 2 hours trying to create a pull request. The process is too annoying for me. I have never used Guithub. I can PM you the update otherwise there is nothing I can do.

 

@nam, feel free to just email the changes to questions (@) prime31.com.

 

Just so that you can see that the solution works. I added a simple else statement in UIToolkit script as follow.

// no touches. so check the mouse input if we are in the editor
if( Input.GetMouseButton( 0 ) || Input.GetMouseButtonUp( 0 ) )
{
lookAtTouch( UIFakeTouch.fromInput( ref lastMousePosition ) );
}
else //Insert this If Statement to resolve the mouse over problem...
{
****
***
if( hoveredSprite != null )
{
if( !hoveredSprite.highlighted )
hoveredSprite.hoveredOver = true;
}
}

After you see that this works. I will email you the inline code for MouseOver. What I will e-mail to you is the Inline Code for the Mouse over. where a user will be able to just write

var playButton = UIButton.create( "playUp.png","playOver.png", "optionsDown.png", 0, 0 );

 

The Updated UIButton script should be in Your PM. I have to get back to working on my game at the moment. I hope the community can find this bug fix useful.

 

What would be the best way to position text on the top right? If I do this it goes past ofcourse:

Code (csharp):

1.  
2. x = (float)UIRelative.xPercentFrom( UIxAnchor.Right, 0f );
3. text2.xPos = x;
4.  

I think its because the text changes, but does anyone have any code that would get the size then position it correctly to the right of the screen?

 

@newb, use the sizeForText method then use that info to position the text.

 

Thank you I think thats what I was looking for.

 

Hello,
I have one problem in button.
i am using button with glow effects.This glow effect is perfect in my computer,but In Ipad this button's glow effect like a real burn effect

My Button image is :
http://postimage.org/image/jovm02h0/

 

Hi ImrozMansuri, i had the same problem and i solved it setting the files (PNG) in unity to "true color".
Just click on the png file and set up on the inspector, override for iphone, format, true color.

 

Thanks iguana_02.

 

@Prime31, Firstly thanks for this plugin, it's been good for quickly getting some UI elements into our iOS game, and as a learning tool.

Now a question/observation. I see that hiding a sprite only zeros out the vertex positions internally. If all the sprites in a toolkit are hidden Unity will still effectively render the mesh, and more importantly, will switch in the (large) texture. Is this correct? Would it be a solution to disable the mesh renderer component in the toolkit if all sprites are hidden?

EDIT:

I just tried what I suggested and at first glance disabling MeshRenderer components for any UISpriteManagers that either have no sprites or no visible sprites does reduce the Used Textures and Tris/Verts counts in the Statistics window. Thoughts?

 

@andym, you can either kill the MeshRenderer or disable the GameObjects. Either should work fine.

 

@ImrozMansuri

You're welcome!

 

Is anyone else using setSize for their buttons? What I've been doing is measuring the screen then shrinking the button down so that its not taking up more than it has to, but I noticed that when I setSize it does shrink it, but the pixel amount does not seem accurate.

Code (csharp):

1.  
2.         optionsButton = UIButton.create( buttonToolkit, "optionsUp.png", "optionsDown.png", 0, 0);
3.         screenwidth = Screen.width;
4.         bwidth = screenwidth/10;
5.         bheight = optionsButton.width-bwidth;
6.         bheight = 100 / optionsButton.width * bheight;
7.         bheight = 100 / bheight * 30;
8.         bheight = optionsButton.height*bheight;
9.         bheight = bheight/100;
10.         print(bheight);
11.         optionsButton.setSize( bwidth, bheight );//Set size
12.         optionsbuttonheight = (int)bheight + 02; //Added 02 for the hbox I create below
13.         print(optionsbuttonheight);
14.  
15.  
16.         hBox = new UIHorizontalLayout( 10 );
17.         hBox.addChild( optionsButton );
18.         hBox.pixelsFromBottomLeft( 02, 02 );
19.  
20.         Box3 = new UIVerticalLayout( 0 );
21.         Box3.addChild( uparrowButton, downarrowButton );
22.         Box3.pixelsFromBottomLeft( optionsbuttonheight , 02 );
23.  

You would think my downarrowButton would start right above the options button, but in HD it starts half the screen up and on SD it starts right above it, but not directly on top of it.

Should I just keep my buttons at the basic size instead of resizing them?

Edit: I think I figured out my problem..... I should be dividing bheight by 2 if its in HD

 

I'm implementing the clip to UI/Rect functionality, I'm essentially done, but it has a minor problem. If you click on a button it restores the original UV width, height, and position. I assume it's because when I click on something it loads the second texture and that act correctly sizes it. I think the easiest way to get around that is to just use UISprites, is there a convenient way to create them or do I have to pull up the frame data manually some how? I am also up to alternative solutions if anything jumps out at you(especially since a view of the culled objects are actually clickable buttons that need to stay that way, though they also close whatever window is open so it's not a huge deal).

 

@agreen, there is an add sprite method on the UIToolkit class. You may just want to override the touchFrame property though and provide the clipped rect as the frame.

 

Hello,
can anyone give me the solution of text and panel combination.
My problem is that i want to add text into the panel.
What should i do??
I am display a text with the help of basic code:

var x = UIRelative.xPercentFrom( UIxAnchor.Left,0.35f );
var y = UIRelative.yPercentFrom( UIyAnchor.Top, 0.35f );
text1 = text.addTextInstance("Hello", x, y ,0.59f);

i want to this text add in the panel.

Please help me.
Thanks

 

Did anyone ever create a Labelled Button?

 

Hello Prime,

I have a question regarding input. When a UIButton receives a touch event, and when I look at the Input.GetTouch(0).position, it seems like touch coordinate is based on UICamera, not the Main Camera. Is this correct? I think it is. If this is the case, how can I get the Touch location thats is based on the Main Camera?

Thanks! I love your plugins!

 

@Matkins, there was some talk about a labelled button but I haven't seen any pull requests for it.


@bambamyi, Input.GetTouch will return exactly what Unity sets which is the screen coords. UIToolkit cannot and does not modify it. If you need to convert it there are various methods available in the Camera class.

 

@jon_unity_jumping:

Try this - https://github.com/getluky/UIToolkit/commit/f8c223e3f4c99f34991a1682a24ad7175641f7ac

I sent it over to Prime this morning as a pull request, so I'm sure he'll see it soon. In the meantime, you might have been caught by a bug where the touch regions were getting pulled into the screen frame, and not clipped as one would expect.

 

I understand that. Input is in Screen coordinate, and I can convert it to viewport or world coordinate. I am trying to do simple thing where I keep my finger on UIButton, I get the touch coordinate and convert it to worldspace coordinate and instantiate gameobject at the touch coordinate but the gameobject spawn somewhere else close to the screen. I will investigate this issue bit further.

Thanks.

 

you probably want to cast a ray from the world position and the world camera. What I do is take the input 2d coordinate, and set the unset coordinate to 1. The run this vector3 through the screen to world transform. Then cast a ray from the camera to the world position. Somewhere along the ray is where you want to place the object, I have a ground plane and I check for intersection between the ray and the ground plane and place the game object there.

 

Is there a compelling reason why UITextInstance is a struct and not a class?

 

@Prime
I'm creating my labelled button by inheriting from UIContinuousButton (because thats the one i tend to use).
When the button's position is set i need to set the position of the UITextInstance that my labelled button class has. So i need to override the properties UISprite.position and UISprite.localPosition. But in the UITouchableSprite class you're stopping any further inheritance to these by using the "new" keyword instead of the "override" keyword. Why is this? Am i ok to change it from new to override?

 

@Matkins, that is there to end the inheritance train and keep performance up on a very often changed property. You can probably just use the transform changed event for what you are trying to pull off.

 

Realizing today that this kinda sounds like a jerky language comment! Sorry about that, totally not what I meant to ask.

I have a working experimental branch for adding text instances to UIAbstractContainers (i.e. layouts and panels), but in order to do so, I had to add some events to UITextInstance, and in order to get that working, I had to change it to a class and change the "ref" keywords back to implicit reference type passing. Is that OK, or is there a good reason not to do this that I don't know about? If not, I'll be happy to send this upstream.

 

@getluky, UITextInstance was a struct initially due to it being more of a dumb storage container. It has grown some functionality so it probably wouldnt be all that terrible to make it a class. That would then enable extension methods also which will be handy for moving the animation stuff to and adding more animation types.

 

@Prime31, OK, in that case, I'll wrap up the changes and send another pull request soon!

 

We were looking into using this today. The first thing we wanted to do is parent a UITextInstance to a UIObject so we could make a UI similar to the iPhone home screen, with the swiping and such. Is there any decent reason why UIText is basically off in its own universe and I can't parent it to a UIObject?

Perhaps UIText is in need of refactoring? I'd be willing but could use some help with deciding how to organize it better to fit into the rest of the otherwise really slick looking (so far at least!) UIToolkit.

Also, why is it camelCaseAllTheThings!?

Cheers,
-Jon

 

Yes, refactoring!
My fool attempt tried to set the parent of the text in the font sprite creation, it seemed to work but I got random weird crashes when screens were closed, I was in a hurry so I just set the text to an empty string to make it invisible and moved the text independently.
Having the option to add text to a container is necessary to create popups and other basic gui elements.
Also the camelCaseAllTheThings was useful for knowing what functions WereMyFunctions and what were originally from UIToolkit, but boy we need to use the Unity - C# standard here, an this coming from me that prefers the other way in my C++ code.

 

@Jonathan, the camelCaseMethodNames is a side effect of being a C# .NET developer for years and absolutely hating the API and frameworks MS publishes. Seeing Apple's frameworks and API's was such a breath of fresh air over the years that it became ingrained and associated with "clean" and "good". It also makes has some strengths and makes sense in many other ways but a philosophical discussion of why to use one formatting over another is a bit off topic

A refactoring would be nice. Without giving it much though the first thing I would do is start with UIObject as the base class which opens up access to all the animation extensions. From there things should just fall into place I would imagine. At least in theory.

 

Pull request submitted! It turns out that my local hacks only worked on BackgroundLayout, so I went in and rewrote it to maintain a placeholder sprite within the UIAbstractContainers that gets a corresponding text instance swapped in whenever it needs to layout or otherwise change. There are a lot of updates to the PanelTest scene now to demo the new usage.

edit: Had to pull it, found a bug. It's a pretty hacky patch, and I think it might be a good idea to just change UITextInstance to a UIObject, but that might take more time than I've got. I'll try to patch it up and get it submitted soon.

 

I think I did the pull request for the Mouse Over bug problem correctly today. Let me know if you don't get it.

 

Really enjoying using UIToolkit, has been very easy to create a nice GUI.

But I was wondering is their a way to Alpha animate text? I basically want a message to fade in and then out when triggered. I noticed I cant use alphaTo, like I have been for UIButtons. Is there a similar way to do this for text?

 

@damonk, there is no built in method for the animation but you can it with a simple coroutine. Just raise/lower the UITextInstance's color over the desired timespan using it's set color for all letters method.

 

Whats the best way to get a grid of buttons. Is it via nesting a vertical layout inside a horizontal layout? I know people were working on this, I tried looking for it, but looks like nothing is getting documented.

 

It it won't be moving around or anything I would person ally probably just use 2 for loops.

 

Does UIToolkit not support trimming in the atlas? Or is it just fonts that don't support it?

 

@matkins, what is your exact definitely of "trimming in the atlas"?

 

When using texture packer (or zwoptex), there is an option to trim a sprite image if there is empty space in it. The fonts I'm exporting from Hiero always have excess space at the bottom because hiero only wants to export with power-of-2 dimensions. So then the font image gets trimmed in the texture packer, and then its broke in UIToolkit.
I guess the easy option is to crop the font image myself before putting it into the texture packer. Just wanted to check that UIToolkit doesn't support trimming on fonts incase i was just being daft.

 

@matkins, you have to be careful when changing the font texture. Remember, there is a config file generated as well that has certain expectations with regard to the positioning of each glyph.

 

@prime Ive only cropped the bottom and right of the font image, top left corner remains the same so it all works fine. Cheers.

 

Has anyone notice the buttons stick? I'm using the following code and every once and a while the button will get stuck down and continue to output "Test 1"

Code (csharp):

1.  
2. using System;
3. using UnityEngine;
4. using System.Collections;
5. using System.Collections.Generic;
6.  
7. public class controlstouch : MonoBehaviour {
8.         public UIContinuousButton frontButton;
9.         public UIToolkit buttonToolkit;
10.  
11.         void Start () {
12.                 frontButton = UIContinuousButton.create( buttonToolkit, "frontUp.png", "frontDown.png", 0, 0);
13.                 screenwidth = Screen.width;
14.                 bwidth = screenwidth/10;
15.                 var deduct2 = frontButton.width-bwidth;
16.                 deduct2 = 100 / frontButton.width * deduct2;
17.                 deduct2 = 100 / deduct2 * 30;
18.                 bheight = frontButton.height*deduct2;
19.                 bheight = bheight/100;
20.                 frontButton.setSize( bwidth, bheight );//Set size
21.                 frontButton.onTouchIsDown += onTouchIsDownfrontButton;
22.                 frontButton.onTouchUpInside += onTouchUpInsidefrontButton;
23.         }
24.         public void onTouchIsDownfrontButton( UIButton sender ){
25.                 print("Test 1");
26.         }
27.         public void onTouchUpInsidefrontButton( UIButton sender ){
28.                 print("Test 2");
29.         }
30. }
31.  

 

@unitynewb, if you are testing in the editor with the Unity Remote that is normal. It misses touch events quite often due to touches being sent over the network. Deploy to your device directly and it should work for you.

 

No I meant on the device it happens, but yeah not as much as the editor. I only noticed it a few times, but not really enough for it to be a big deal I guess. I thought I may have been doing something wrong, maybe I should set the touch area for each button a little bigger. Do you think that would help?

 

@unitynewb, I ran into this problem earlier today and I was able to solve it by adding a few lines to the touch handling in UIToolkit.cs. In the Update function, if there are no touches go through the list of touchable sprites and change the highlighted state to false. I know this isn't the most efficient way to do things (it would be better to do the check only if there are no touches and the previous frame registered a touch) but it gets the job done.

 

Thats a good idea. Thanks I'll give that a try.

 

Hi UIToolKit Community.... This seems like an awesome plugins.

I'm having an issue though, and I'm hoping someone might be able to point me in the right direction.

For the game I'm working on, I have a health bar underneath my characters, and it follows my characters around. Originally I used the regular GUI script and I was able to get this done. I'm assuming I can get this done with UIToolKit as well, but I'm coding in JavaScript, and I may be having an issue. I can't use the: pixelsFromBottomLeft function with my UIProgressBar. When I try to call it, it says 'pixelsFromBottomLeft' is not a member of 'UIProgressBar'. Bellow is the code I wrote, and perhaps someone can help me out.

Code (csharp):

1.  
2. private var progressBar : UIProgressBar;
3.  
4. function Start()
5. {
6.     var screenPosition : Vector3 = mainCam.WorldToScreenPoint(unitTransform.position);// gets screen position.
7.     screenPosition.y = Screen.height - (screenPosition.y + 1);// inverts y
8.    
9.     progressBar = UIProgressBar.create("Health Bar.png", "Health Bar Shell.png", 2, 2, screenPosition.x - 30, screenPosition.y + 13 );
10.     progressBar.pixelsFromBottomLeft(screenPosition.x - 30, screenPosition.y + 13 );
11.     progressBar.resizeTextureOnChange = true;
12.     progressBar.value = 1.0;
13. }
14.  
15. function Update()
16. {
17.     if (!drawHealth) return;
18.     var screenPosition : Vector3 = mainCam.WorldToScreenPoint(unitTransform.position);// gets screen position.
19.     screenPosition.y = Screen.height - (screenPosition.y + 1);// inverts y
20.     var healthPercent : float = unitAI.health/unitAI.maxHealth;
21.     progressBar.pixelsFromBottomLeft(screenPosition.x - 30, screenPosition.y + 13 );// I was hoping to use this to force the health bar to follow my characters
22.     progressBar.value = healthPercent;
23. }
24.  

Any help would be appreciated. Thanks.