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

@prim31 I am using the UIToolkit and trying to create a Scrollable Container and where a user can click an item within that scroll list and only update its text on the button. I have played around with the Demo Asset that came with the script
called (https://github.com/prime31/UIToolkit...inerManager.cs) the problem I run into is that the when I click say button 2 out of 10 and try to update the associated text for button 2 it keeps updating the last element in the scrollable list. My question is how do I associate the button.onTouchUpInside index back to the text instance so it knows to update the correct button text? Do I need to turn the text instance to an array then feed the button instance back to the text instance through the array so it knows what array element to update?

I have tried setting the text.parentObject back to the button but still no luck.

This is the section of code where that association should be handled,

// only add a touchUpInside handler for buttons
if( touchable is UIButton )
{
var button = touchable as UIButton;

// store i locally so we can put it in the closure scope of the touch handler
var j = i;
button.onTouchUpInside += ( sender ) => Debug.Log( "touched button: " + j );
}

Just looking for the right approach to handle user text input via a device keyboard.

Thanks

 

Try messing around with the values inside the shader, or material. See if that helps.

 

Hey Maelstroms, after looking over what you said, and thinking about what you said, I came up with the solution to your and my problem, and possibly anyone else who is using UIStateButton. Thanks for the write up and preliminary work, as this made it simple to solve. All you have to do is override the "bool highlighted" setter method in UIStateButton and that fixes the problem.

Here's the code:

Code (csharp):

1.  
2. //In UIStateButton.cs
3.  
4. public override bool highlighted
5. {
6.     set
7.     {
8.         // Only set if it is different than our current value
9.         if( _highlighted != value )
10.         {          
11.             _highlighted = value;
12.             if ( value )
13.             {
14.                 //Instead of using highlightedUVframe,
15.                 //we use _uvHighlightFrames[state], as this keeps
16.                 //the uvFrame set to the current highlighted state
17.                 base.uvFrame = _uvHighlightFrames[state];
18.             }
19.             else
20.             {
21.                 //Instead of using _tempUVframe,
22.                 //we use uvFrames[state], as this keeps
23.                 // the uvFrame set to the current state
24.                 base.uvFrame = _uvFrames[state];
25.             }
26.         }
27.     }
28. }
29.  
30.  

Hope that helps.

 

Hi,

First, thanks for the great free plugin.

I'm having and issue with animation on Android devices.

I am animating UIText with PositionTo, ScaleTo and ColorTo. In the Unity editor the animations are working but when I send the build to the Android device (HTC One X) the animations just don't do anything.

Does anyone have any ideas what I might have missed?

Thanks

 

Any future thoughts on making UIToolkit rely on GoKit instead of it's own animations?

 

I haven't had any trouble on Android with animating UISprites (alpha, position, size) or UITextInstances (mostly position). Do you have any errors in the the devices's log?

 

I am seeing some weirdness with UITextInstance picking up colors from the previous background. Like, I make a UITextInstance, put it in my scene, and the background of the UITextInstance is the camera background color. Then, I create a UISprite and put it under the UITextInstance and for some reason the original background color is still visible on the edges of the UITextInstance. Here is a screenshot:



When the UITextInstance text changes, usually the new characters will be free of the old background color but I can't seem to figure out exactly how it is behaving to describe it properly.

Any ideas?

edit: I found a workaround- if you initially set the text as blank, then yield until WaitForEndOfFrame() and set the text there, it seems to work like you would expect (no background color leakage).

 

I noticed that the Bounce and Elastic easing functions included here didn't work very well, so I changed the animation code (UIAnimation.cs + others) to use the same easing functions as GoKit.

Now my Bounce animation actually works!
I wanted a good Bounce because I think many UI special effects look good with a Bounce animation and the existing Bounce didn't look right.

Was there any reason why you used the simple version of easing that only takes the time variable and not the time, start, diff, and duration?

 

UITextInstance doesn't animate well with scaling if you are setting the .scale or .localScale (or passing a Vector3 into ScaleTo). You should only change the textScale property (or pass a Float into ScaleTo to make it use textScale).

 

Hi,

Is there a way to refresh the screen? I am deleting a UIText object but after deletion it is still on screen. Or is there a way to update an existing UITextInstance?

Thanks,
Ryann

 

Hello everyone!

I'm currently deciding which UI solution I should use for my Android game (bear with me here - it's my first mobile outing) and UIToolkit is very strongly in the lead. So much so, that I am considering re-designing my HUD to make it work. Tell me guys, is there a way to make my current HUD work? Everything is nested together perfectly but if stuff was at different resolutions I'd need to scale everything's width and/or height to make it fit perfectly. I looked over the docs and the only reference to scale I saw was an animation, but I don't think that's what I want.

If I have to redesign from the ground up, do you guys have any tips on what resolution to build at, how to lay stuff out, what threshold I should aim for to get the 2x textures, and so on? I'm not afraid of failing and starting over, but I want to keep the amount of "start-overs" to a minimum and there's very little support out there on stuff like this...

PS - I know I need to redo the colors on this HUD. It's just a little too much like Borderlands right now I think...

 

So after some more research and tutorials I've found that my current GUI is nigh unusable, unfortunately. I'm going to redesign with a simple bar along the bottom and top with all the info the player needs.

My new question: For Android, I assume that I want to design these two bars to fill as much of the width of the screen as possible on the smallest resolution for SD, correct? Then instead of actually scaling the assets, I would simply reposition these bars to the appropriate place (with the layout tools) and the bar would appear "smaller" on a larger screen, even though it's actually the same resolution? What resolution do build from as being the smallest screen for SD and HD?

I really appreciate everyone's efforts here!

 

Hello everyone, I am wondering if it's possible to scale an entire UIToolkit object / or the camera, so that you can have a clipped window of a UI.

The problem is basically I am trying to create a screen on a device using the UIToolkit as the interface. I have it scrollable with btns etc but I need it shorter than the height of the screen and currently the scrolled elements going offscreen are not clipped. So I thought maybe there was a way to change the UI camera's size etc and the interface would change size. It does, but the touch areas of the btns do not change size and that is the problem. I cannot find where the touch area of the btns get there sizing and location from and so cannot alter some code to make it possible.

Any info would be awesome!

Thanks!
Jason


OR.... maybe there's a way to clip all the buttons, text, sprites etc found in a script... similar to a container but I'm under the impression that containers need to be layed out specifically.... as in horizontal or vertical and not just an assembly of UI objects.

 

How do I do somthing really basic with the buttons , like call a function when one is pressed

 

Ok I figured that out , but now I can't get the UI to appear on anything but android( funny since I only really need it for android ...)

 

Hey ncst,

I know it's been a bit, but I'm working on a project and I've run across the same problem, but I'm having a bit of trouble figuring it out. Would you mind sharing your code, or pointing me in the right direction? I'd really appreciate it!

 

I'm having some trouble with the HD texture auto-detect on my buttons...


Basically it works like advertised in the Editor Preview, but when I build it to a iOS device, something breaks.

On my HD devices (iPhone4 and iPad2), it detects that it's supposed to be the HD texture("switching to 2x GUI texture"), but it still uses the SD texture. And on top of that, while it is positioned correctly, the touch offsets are completely off. I have the button positioned dead center of the screen, but the touch box is down and to the left of the actual button.

On SD devices, everything works perfect.

 

HI Prime I am using UIProgressBar to display both a health bar and a mana bar over some characters head.
Now the problem I am having is when i rotate my game camera (not the UICamera) the bars dont line up with my characters I was wondering if there was a easy way to relate world space to the UICamera like the function Camera.WorldToScreenPoint i have tried this but cant figure out how to do it.



Thanks :-|

 

Hey guys
my buttons do nothing when using the game on the web player
there's an issue report here but no way to fix it https://github.com/prime31/UIToolkit/issues/116#issuecomment-7667043

can someone please help with this issue?

thank you

 

This is a hobby project so had to step away for a few days to do paid work but now looking at this issue again. There is something in the log that may help

E/Unity ( 5184): (Filename: ./Runtime/ExportGenerated/AndroidManaged/UnityEngineDebug.cpp Line: 43)
E/Unity ( 5184):
I/Unity ( 5184): NullReferenceException: Object reference not set to an instance of an object
I/Unity ( 5184): at Player+<DisplayBonus>c__Iterator2.MoveNext () [0x00000] in <filename unknown>:0
I/Unity ( 5184):
I/Unity ( 5184): (Filename: Line: -1)
I/Unity ( 5184):
I/Unity ( 5184): NullReferenceException: Object reference not set to an instance of an object
I/Unity ( 5184): at Player+<DisplayBonus>c__Iterator2.MoveNext () [0x00000] in <filename unknown>:0
I/Unity ( 5184):
I/Unity ( 5184): (Filename: Line: -1)
I/Unity ( 5184):
I/Unity ( 5184): NullReferenceException: Object reference not set to an instance of an object

I don't understand why this Null Reference Exception would only show up in the device and not in the Unity Editor though.

Also, Tayl0r mentioned that I should pass a float into textScale but this causes a compiler error as textScale only accepts a vector3 as the target, please let me know if I've misunderstood.

Kalm

 

Hi -

I have 2 simple questions that I couldn't find the solution here (this thread is 100+ pages and I didn't find the "Search in topic textfield"):

- Why does the Y coordinate is negative? Am I doing something wrong? Because for me the center Y of a 600px height screen is -300.
- How can I change the pivot point of a specific sprite? I have this D-Pad that I need to do and it would be much easier if the pivot of the sprite is in the center.

Thanks so much!

 

try to change texture properties with GUI

 

Absolutely fantastic work on the plugin Prime31.

Been using it for the last couple of days and it trumps my own efforts to program a UI system.

One issue I'm having right now is that attempting to hide a scrollable layout while it's still scrolling results in the whole view not being hidden. I've been diving through the code and can't find out why at this point. Any suggestions? At this point in time I'm also open to checking whether the layout is still scrolling and not allow hiding the layout until it's finished.

Also, more of a design question, would you guys recommend creating/destroying different UI menus when needed (the memory conscious approach) , creating when needed then hiding/showing them (spread loading out and load only when needed), or create them at load-time then hide/show when needed (massive load/no further loading)?


Edit: So far I've implemented a solution that literally makes me want to cry at how bad it is. Went into UIAbstractTouchableContainer and added checks to the update functions for whether the object is hidden. There's surely a better way of doing this.

 

Hi, just wondering why the y axis is inverted in UIToolkit, is there a flag to swap this?

Very annoying trying to position objects based on world coordinates.

It's also very cumbersome to have methods which accept coordinates defined where 0,0 is top left, while under the hood it's the opposite. Also, methods in Unity for retrieving screen coordinates are supplied as top left 0,0 positions. So it doesn't seem right that UIToolkit has decided that the y axis is now inverted.

 

.pixelsFromBottomLeft will set (0,0) at .. bottom left :]
Makes it a little easier dealing with world coordinates.

I don't know if theres a flag to swap the x and y, but I guess you're free to edit the source yourself to fit your needs.

 

hi prime! its been a while, i would like to ask something with regard to uitoolkit swiping container, im having problem with swiping upward, swiping downward is ok able to see the buttons, but when swiping upward it bounce downward results to wont able to see all the button displayed at the bottom, do you mind to tell me where can i configure the calculations for swiping upward?

heres my code:

Code (csharp):

1.  
2. private void DisplayImage()
3.     {
4.         var scrollable = new UIScrollableVerticalLayout(0);
5.         scrollable.alignMode = UIAbstractContainer.UIContainerAlignMode.Center;
6.         scrollable.position = new Vector3( 0, -85, 0 );
7.         var width = UI.scaleFactor * 815;
8.         scrollable.setSize( width, Screen.height /1.35f );
9.        
10.         UITouchableSprite touchable;
11.  
12.         int runtimeID = 1;
13.         int i = 6;
14.         int j = 0;
15.         int h = 10;
16.         int w = 6;
17.        
18.         //background touchable
19.         touchable = UIButton.create(uit,"FriendsListBox.png", "FriendsListBox.png", 0, 0, 100);
20.        
21.        
22.         var text = new UIText( textManager, "prototype", "prototype.png" );
23.        
24.         foreach(FBFriendsEntityClass thisFriend in friendsList)
25.        
26.         {
27.            
28.             //friends name
29.             string name = thisFriend.friendName.ToString().Trim();
30.             var friendsName = text.addTextInstance(name, 105, h, 0.5f, -1, Color.white);
31.             friendsName.parentUIObject = touchable;
32.             h = h + 60;
33.            
34. //          //avatar box
35.             string runtimeGameObj = "avatar" + runtimeID;
36.             UIButton friends_avatar = UIButton.create ((UIToolkit)GameObject.Find (runtimeGameObj).GetComponent(typeof(UIToolkit)),  "FriendsAvatar.png", "FriendsAvatar.png" , 0, 0,-2);
37.             friends_avatar.parentUIObject = touchable;
38.             friends_avatar.pixelsFromTopLeft(i, 28);
39.             StartCoroutine(GetImage(friends_avatar,"http://graph.facebook.com/"+thisFriend.friendId+"/picture?type=large"));
40.             runtimeID = runtimeID + 1;
41.             i = i + 60;
42.  
43.             //list box
44.             UIButton avatar = UIButton.create (uit, "FriendsAvatar.png", "FriendsAvatar.png", 0, 0, -1);
45.             avatar.parentUIObject = touchable;
46.             avatar.pixelsFromTopLeft(w, 28);   
47.             w = w + 60;
48.            
49.             UIButton listbox = UIButton.create  (uit,"FriendsListBox.png","FriendsListBox.png",0,0);
50.             listbox.parentUIObject = touchable;
51.             listbox.pixelsFromTopLeft(j, 10);  
52.             j = j + 60;
53.                
54.         }
55.    
56.         scrollable.addChild( touchable );
57.     }
58.  
59.  

 

Really quite a large problem: I'm creating a UITextInstance and later altering the text within via .text and the scale set via .textScale just resets. I can't actually change the scale after altering the text. Any suggestions?

Edit: Any chances of a dedicated forum/wiki/something for Prime31 plugins somewhere on the net? It's REALLY annoying searching through 100 forum pages for issues people are having with this one plugin.

Now I'm at the point of flipping my desk. I absolutely cannot alter the damn scale of this text. Whatever resolution I set the editor to, it's exactly the same pixel width/height regardless of what I set the .textScale or .scale of the UITextInstance to.

I'm asking SOMEONE to help me out with properly scaling text for various resolutions. This project is deployed to both iOS and Android so resolutions can be anything from 480x800/480x854/640x960/640x1136/768x1024/etc/etc. I just cannot for the life of me get this stuff to work properly, even having dived into the back-end code myself. In this particular case I have a button in a vertical scroll view that I want to attach text to, and I want to be able to scale it correctly from the target resolution of 640x960 to the aforementioned resolutions.

Would you guys just recommend using a number of text sprite sheets for different resolutions and choose which ones to use at run-time when I have access to the screen size? This just seems incredibly wasteful of the fact I have scaling available (if it starts working).

I previously wrote my own GUI system that handled everything correctly using height/width multipliers, but this approach is clearly not working correctly.

 

Is there a way to move a UITextInstance that is inside a panel (UIAbstractPanel)?

 

Hi, I\'m using UIToolkit and I\'m wondering what is the best way to handle changing device orientation at runtime, and getting the buttons to reposition properly.

Based on some feedback earlier in this thread - I have accessed the UI Script from my custom script to call these two lines upon detecting a change:

uiScript._uiCamera.transform.position = new Vector3( Screen.width / 2, -Screen.height / 2, -10.0f );

uiScript._uiCamera.orthographicSize = Screen.height / 2;

However this still doesn\'t solve the problem. Do I need to redraw the buttons? What\'s the best way to accomplish this? Thanks!

 

Has there been any feedback on how UItoolkit does with Unity 4? I read in the Unity4 new features that the GUI buttons were optimized for Garbage collection, but other than that I don't see any features that place stuff for multiple screen resolutions as easily as UITooolkit. Anyone? Thanks in advance!

 

Hi I've been playing around with UIToolkit, and it's awesome. Though my clicks pass through the buttons, so when clicking the UI my raycast also starts. Is there a way to check if a position is on the GUI?

Thanks!

Fixed it myself:

foreach (var touchable in _gui.touchableSprites) {
if ( !touchable.hidden touchable.hitTest(new Vector2(clickPos.x, Screen.height - clickPos.y)) ) return;
}

Note: _gui is the GUIToolkit script.

 

Hi,

Can anyone please help me. I am using UNITY3D and compile the project to IOS but when I run it on my iPhone 4S it is not showing as full screen rather the height and width of the screen is larger than the camera UItoolkit is using but when I run the oriject in UNITY and set the aspect ratio as 960x640 it looks perfect. Please help needed badly.



This is landscape mode and see how the sprites are positioned far from left.

Thanks,
Ryann

 

You're sure the app is running at 960x640 and not 480*320 ? (check the buildsettings)

 

If you are referring to UNITY yes I am sure it's 960x640 in IOS I am not sure where to check but it should be the same as unity settings.

 

First of all, UItoolkit is awesome!

I just have a small issue with the scrollable vertical container. In Unity itself it works perfect, but as soon as i put it on my Android device the scrolling feels really slow and laggy. There's just the container in the scene nothing else that could slow down the scrolling...
Does anyone else having the same problem?

And is there a way to speed up the scrolling of the Container?

 

Downloaded the latest version of Etcetera and it complains in EtceteraBinding.cs ln 139 about not finding Prime31.Json ...

Fixed it by changing the method call to:

Prime31.MiniJSON.jsonEncode(...

Ben

 

Hey trop,

I was having the same issue. Did you happen to find a solution to this issue?

 

Hey Can Anyone Help me I download the UIToolkit and build a certain scene in my android tablet the problem was the UIToolkits are notshowing like buttons etc. Kindly help

 

I have a problem changing zIndex or position.z.
I searched for the thread but not found the solution.

I have severals UIToggleButtons and when one is fired

i change the position.z

Code (csharp):

1.  
2. botFired.position.z =7;
3. bot2.position.z = 8;
4. bot3.position.z = 8;
5.  

I triyed this code too with the same result of the screen

Code (csharp):

1.  
2. botFired.zIndex =7;
3. botFired.updateTransform();
4. bot2.zIndex = 8;
5. bot2.updateTransform();
6. bot3.zIndex  = 8;
7. bot3.updateTransform();
8.  

Any idea?
Thanks guys.

 

HI All, Ive tired searching through this thread for the issue I'm having but I cant seem to find a solution. No matter what I do I cant get the UIToolkit to load my texturepacker config file. I compared the file to the example ones and made sure I changed its extension to .txt but everytime I run it says "cant find texturepackerconfigfile name: mygui

everything is setup identical as far as I can tell and when I swap in the kitchen sink one and try using one of its buttons. So i'm wondering if its a texture packer problem. it would seem not as the json file exported (using the unity setting) matches the look of the others.

 

Are your files in /Resources folder ?

 

That Did it. Thanks laserlars. I don't remember it saying anywhere that was a requirement but since you don't drag and drop the file in I guess that makes sense.

 

I have the same issue on Android 4.0.4 using Unity3D 4.0.0f7 PRO Windows and latest UIToolkit package ...
Also it looks like some DemoScenes don't work correctly in Unity 4....

 

I just built my game in Unity 4 (free), and see a similar problem. In landscape mode, sprites/images are being drawn too far to the right (blank space is left on the left hand side of my screen, touches have to be made to the left of where buttons are drawn to register). Everything looks fine in the editor.

[Edit] I think this is a problem with Unity 4: It looks like in the Awake function for UIToolkit, the incorrect screen size is returned. On my device, Screen.width is returned as 640 when UI.cs is initialized, but is returned as 800 later. So, the UI camera is positioned incorrectly. I was able to hack around this by adding a function to UI.cs that I could call when my title screen loaded, and re-position the camera (the second line is more important, but I went ahead and reset the orthographic size too, in case the height had been incorrectly provided):

Code (csharp):

1. _uiCamera.orthographicSize = Screen.height / 2;
2. // Set the camera position based on the screenResolution/orientation
3. _uiCamera.transform.position = new Vector3( Screen.width / 2, -Screen.height / 2, -10.0f );

 

You're a life saver ncst.

 

full ack !

 

Quick question...
How to create a multiple UIToolkit instance at runtime?

 

Hey all,

I'm working on an iOS/Android game, and I need to create a text field to input a user name for a highscore, but I can't find any info on this...also the wiki seems to be down at the moment..

Is there a way to make a text input box using UItoolKit?

or is this something that I will just have to rely on onGui for?

Thanks in advance for any help!

 

There may be another way, but I use onGUI. I set a sprite in the location that I want the textbox to be placed, then make it hidden. I use the coordinates from the sprite's location to create a Rect to position the GUI text field in the right location.

 

Is there any solution to make UIButton work in webplayer?