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

I downloaded the zip file from GitHub, but I don't know how to integrate this into my project. I was expecting to find a custom package to import, but can't seem to find it. Other posts have suggested that I find the package under the "Downloads" tab in GitHub, but alas, I see no download tab.

So, can someone give me the simple, step by step version of how I integrate UIToolkit into my existing project.

Thanks.

Robert

 

Hi there.
how do i delete a UIHorizontalScrollLayout?
i want to completely delete it and its children (button, spacers and texts) from the scene...
cant figure it out.
thanks

 

RE: Basic Install Question

Robert, Maybe someone can give you a better answer, but here's the short version:

1) Open one of the scenes (say PanelTest.unity).
Optional: RMB (anywhere in Project View) Create Folder.
2) Drag the GO (GameObject instance) called UI from the Hierarchy View into the Project View (optional the folder you created there).
3) RMB in Project View on UI prefab, and Export Package...

Now, create a new project and Import Package/Custom Package...

That should get you there!

-Mike Croswell
Colorado Game Coders LLC

 

Wish I could help with some folks issues, but, alas, I am having issues of my own. Getting some null reference errors. I am probably doing something completely stupid, but for the life of me I can't figure out what.

Here are the errors that I am getting.

http://screensnapr.com/v/VBfc8i.jpg

 

It seems that the sprite is missing, check your atlas a maybe rebuild it..

 

Hey mrKaizen! Thanks for the response! My atlas 'seemed' fine, all the references in the json/txt file matched up, so I am going to start over and follow the two videos.

Is it possible that I haven't properly brought in the Plugins folder from UIToolkit? To be honest I simply dragged it into my assets folder. No clue if that was proper or not.

Thanks again!

 

Woo! Got it working. Not quite sure what the issue was, perhaps some of my image naming conventions weren't playing nice, or perhaps the json file was messed.

A couple of things to note, of which I have no clue if it helped or not;

when publishing from TexturePacker I chose the json HASH format instead of the Array format.
I had originally had my ui images named as > restart_button_128x.png 128x denoting the resolution size for the image, I later renamed it to > restart_button.png

No clue if either makes a difference, but it works for me now.

Cheers!

 

hello, i play around with uitoolkit, so far i manage to make it work fo rmy need, i was wondering if it spossible to add more than one uitoolkit in a scene, i try to add an extra uitoolkit_button2 in the scene with different atlas, but i got an error.
are we allow only one uitoolkit and one uitext?

thanks for reading

 

I want to find and rename the UIButton game object after I create it in the heirarchy. Is there any way to do this?

 

Hi guys, I'm having some HUUUUGE graphical issues using UIToolkit right now.

It would seem that sprites and buttons are randomly being set to be different sprites and buttons with the same dimensions. For example I have a button that is created with the correct two sprite names. It then displays the wrong sprite for 'normal' state, then when pressed, will change to the right 'down' state. On releasing the button, it returns to the right sprite that it was initialised to be.

I have only observed this behaviour once in the editor, as 99% of the time everything works as normal, however once on mobile devices, all hell breaks loose and the wrong sprites are going in the wrong places. This happens on iPad2, Sony Xperia Arc S, Asus Nexus 7, and Kindle Fire HD, so it's not a device specific issue.

I really need help with this one, as I really don't know what's happening. Sprite names are definitely correct, as sprites are drawn correctly in the editor.

Update: It would seem that deleting my art, re-exporting it from Texture Packer corrects the issues. However upon building again, it just messes up again. Could there be something going wrong with assets?

FINAL UPDATE: Moved to NGUI instead of using Prime31's UIToolkit. My life is now infinitely better for it.

 

Does any sort of API reference exist for this plugin at present? Apologies if this has been covered elsewhere, but all of my extensive searching seems to land me back to this link/quote from 2011:

The link now just redirects to prime31's other plugin documentation (which doesn't appear to include UIToolkit) and I don't use MonoDevelop, so I'm finding it difficult to get into this. Naturally there are the demo scenes for referencing, but they aren't the most productive way to understand how it all works and build a new UI from scratch- especially when I could really use an overview of all available options.

 

Hi Phil-AV, i had this problem many times....maybe is the same issue.
Did you set the atlas as GUI instead of the default Texture?

Ale.

 

I set all my GUI sprite-sheets to 'texture type: GUI' and use 16 bit compression.

 

Phil-AV - I haven't had a similar problem (that I know of), but based on the devices you listed, I wonder if the problem happens when you switch to high-res textures (2x, if you have a low and high-res sprite sheet). You might try disabling the automatic switch, and see if that solves the problem.

 

Hi everybody,

I wish my game look fine in differents resolutions.
I have all my images in normal size and 2x size but*I don't know if i need to put all the images in one sprite or in two sprites. One with the normal sizes called for example "sprites" and other called "sprites2x". It is necessary?
What is the correct form to do this?*
When my game is executing in retina display i can't see any image

Thanks!!

SOLVED: My problem was that all the png's in the 2x sprite ended with "2x.png", and ONLY the sprite has to be named this way.

 

I don't actually use SD art, it's all designed for HD, therefore I only use one size of spritesheet. There's that little art in our spritesheets that we don't need to worry about the lower-end devices such as 3GS and iPod 4th Gen.

 

But I think that in the iPad2 I must use SD... because otherwise the images will be very large. I can't use the same images in both (ipad2 and iPad3) because the images of the iPad3 have to be 2x. You think?

 

Is there any functionality in UIToolkit currently to drag a button around the screen? - and upon releasing the button stays there? I was reading this, but looks like its from over a year ago: http://forum.unity3d.com/threads/93535-Drag-and-drop-in-Prime31-UIToolkit

 

Hmm... so, do you mean that if you re-export the assets, the next build on the device works fine, or that it works fine in the editor but breaks after the next build?

 

Possible to add two objects side by side using UIScrollableVerticalLayout ? Like this:

obj 1 - obj 2
obj 3 - obj 4

Whenever i use addchild toolkit puts one in each row:
obj1
obj2
obj3

Thanks!

 

@laserlars : have you tried parenting obj 2 to obj 1, then adding obj 1 (with addchild)? Usually, I'll set obj2.parentUIObject to obj1, then it seems to work fine.

 

Well that´s embarrassing :> Thanks ncst!

 

First off - first post here and just want to day I love UIToolkit, thanks Prime31. Using it for all my UI needs for a while now, with little or no problems.

However, and I know it's a subject that has been raised by a couple of others before I know, but I am really struggling to find a method for using UIButtons in a web player build. Really don't want to have to go back to UnityGUI just for web deployment.

I would be sooooo grateful if someone in the know could point me in the right direction to implementing a work-around.

 

I think that I've posted this before, but my solution was to create a file UITouch.cs to make UITouches from Touches. Then, I did a find/replace to change each reference to Touch to a UITouch (in the UIToolkit). And, I had to modify UIToolkit.cs to make UITouches from Touches (using UITouch.fromTouch( Input.GetTouch( i ) ), for instance, in each location that a Touch was referenced).

There is likely a better way to do it, but it has worked well for me so far.

UITouch.cs

Code (csharp):

1. using UnityEngine;
2. using System;
3. using System.Collections;
4. using System.Reflection;
5.  
6. //public enum UIMouseState { UpThisFrame, DownThisFrame, HeldDown };
7.  
8. public struct UITouch
9. {
10.     public int fingerId;
11.     public Vector2 position;
12.     public Vector2 deltaPosition;
13.     public float deltaTime;
14.     //public int tapCount;
15.     public TouchPhase phase;
16.    
17.    
18.     public static Touch createTouch( int finderId, int tapCount, Vector2 position, Vector2 deltaPos, float timeDelta, TouchPhase phase )
19.     {
20.         var self = new Touch();
21.         ValueType valueSelf = self;
22.         var type = typeof( Touch );
23.        
24.         type.GetField( "m_FingerId", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, finderId );
25.         type.GetField( "m_TapCount", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, tapCount );
26.         type.GetField( "m_Position", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, position );
27.         type.GetField( "m_PositionDelta", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, deltaPos );
28.         type.GetField( "m_TimeDelta", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, timeDelta );
29.         type.GetField( "m_Phase", BindingFlags.Instance | BindingFlags.NonPublic ).SetValue( valueSelf, phase );
30.        
31.         return (Touch)valueSelf;
32.     }
33.    
34.    
35.     public static UITouch fromTouch( Touch touch )
36.     {
37.         var fakeTouch = new UITouch();
38.         fakeTouch.fingerId = touch.fingerId;
39.         fakeTouch.position = touch.position;
40.         fakeTouch.deltaPosition = touch.deltaPosition;
41.         fakeTouch.deltaTime = touch.deltaTime;
42.         fakeTouch.phase = touch.phase;
43.         return fakeTouch;
44.     }
45.  
46.    
47. #if UNITY_EDITOR || UNITY_STANDALONE_OSX || UNITY_STANDALONE_WIN || UNITY_WEBPLAYER || UNITY_FLASH
48.     public static UITouch fromInput( UIMouseState mouseState, ref Vector2? lastMousePosition )
49.     {
50.         var fakeTouch = new UITouch();
51.         fakeTouch.fingerId = 2;
52.        
53.         // if we have a lastMousePosition use it to get a delta
54.         if( lastMousePosition.HasValue )
55.             fakeTouch.deltaPosition = Input.mousePosition - (Vector3)lastMousePosition;
56.        
57.         if( mouseState == UIMouseState.DownThisFrame ) // equivalent to touchBegan
58.         {
59.             fakeTouch.phase = TouchPhase.Began;
60.             lastMousePosition = Input.mousePosition;
61.         }
62.         else if( mouseState == UIMouseState.UpThisFrame ) // equivalent to touchEnded
63.         {
64.             fakeTouch.phase = TouchPhase.Ended;
65.             lastMousePosition = null;
66.         }
67.         else // UIMouseState.HeldDown - equivalent to touchMoved/Stationary
68.         {
69.             fakeTouch.phase = TouchPhase.Moved;
70.             lastMousePosition = Input.mousePosition;
71.         }
72.        
73.         fakeTouch.position = new Vector2( Input.mousePosition.x, Input.mousePosition.y );
74.        
75.         return fakeTouch;
76.     }
77. #endif
78. }

 

Thank you so much for the reply - and code. Hopefully I can implement yr fix ;-) - I will try it out tomorrow when am back in office.

 

It doesn't matter what I do now, over time it just ends up breaking.
I've re-downloaded the latest GIT repo and replaced all the files and it still ends up breaking.
It's also now developed the problem where some buttons are just not there, like invisible but still press-able.
This is just ridiculous.

I do a lot of hiding/showing of buttons/sprites, could this be causing it?

 

@Phil-AV: Got the same problem with a UIScrollableVerticalLayout (well, got two of them in a scene) containing levels. When container2 slides in (as container1 slides out) of camera view, container2 is invisible in the gameview, but I can see it's positioned correctly in the editor, and fully functional. It's just not visible.

If I leave out .positionFromTo and just go with .position = xxx, then it becomes visible.
Odd, and somewhat annoying.

 

hey i was hoping to get some help im trying to make 2 of my buttons change camera
i have my buttons showing up and working but wondering how i am supposed to write it so my camera will change.
thank you in advance for your time.

i found this video http://www.youtube.com/watch?v=iIgvKGQLMQA
which helps alot but how would i apply the same effect within the code for UIToolkit?

 

To anyone who is having an issue with parenting multiple UI to create a multiple UI hierarchy like I was trying, the solution is easy.

Add this code to UISprite.cs:

Code (csharp):

1.  
2. public override void transformChanged()
3. {
4.  
5.         base.transformChanged();
6.         updateTransform();
7.        
8.        
9.         //ALWAYS REFRESH ANCHOR POSITION BEFORE REFRESHING NORMAL POSITION
10.            //TO ALLOW FOR MULIT_PARENTING HIERARCHY
11.         this.refreshAnchorInformation();
12.         this.refreshPosition();
13. }
14.  

 

Slice-9 (Touchable) Implementation for UIToolkit

Code (csharp):

1.  
2. /// <summary>
3. /// Touchable Slice-9 Implementation for UIToolkit
4. /// Created by David O'Donoghue (ODD Games)
5. /// </summary>
6. using UnityEngine;
7.  
8. public class UISlice9 : UITouchableSprite
9. {
10.    
11.    
12.     public delegate void UISlice9TouchUpInside( UISlice9 sender );
13.     public event UISlice9TouchUpInside onTouchUpInside; // event for when we get a touchUpInside
14.    
15.     public delegate void UISlice9TouchDown( UISlice9 sender );
16.     public event UISlice9TouchDown onTouchDown; // event for when we get a touchUpInside
17.    
18.     public delegate void UISlice9TouchUp( UISlice9 sender );
19.     public event UISlice9TouchUp onTouchUp; // event for when we get a touchUpInside
20.    
21.     public UIUVRect highlightedUVframe;
22.     public AudioClip touchDownSound;
23.     public Vector2 initialTouchPosition;
24.    
25.     UISprite[] spriteSlices = new UISprite[9];
26.    
27.     #region Constructors/Destructor
28.     /// <summary>
29.     /// Create a Slice-9 touchable sprite
30.     /// </summary>
31.     /// <param name='filename'>
32.     /// Filename
33.     /// </param>
34.     /// <param name='highlightedFilename'>
35.     /// Highlighted filename
36.     /// </param>
37.     /// <param name='xPos'>
38.     /// X position
39.     /// </param>
40.     /// <param name='yPos'>
41.     /// Y position
42.     /// </param>
43.     /// <param name='width'>
44.     /// Width
45.     /// </param>
46.     /// <param name='height'>
47.     /// Height
48.     /// </param>
49.     /// <param name='sTP'>
50.     /// Top Margin
51.     /// </param>
52.     /// <param name='sRT'>
53.     /// Right Margin
54.     /// </param>
55.     /// <param name='sBT'>
56.     /// Bottom Margin
57.     /// </param>
58.     /// <param name='sLT'>
59.     /// Left Margin
60.     /// </param>
61.     public static UISlice9 create( string filename, string highlightedFilename, int xPos, int yPos, int width, int height, int sTP, int sRT, int sBT, int sLT )
62.     {
63.         return UISlice9.create( UI.firstToolkit, filename, highlightedFilename, xPos, yPos, width, height, sTP, sRT, sBT, sLT );
64.     }
65.    
66.     /// <summary>
67.     /// Create a Slice-9 touchable sprite
68.     /// </summary>
69.     /// <param name='manager'>
70.     /// Manager.
71.     /// </param>
72.     /// <param name='filename'>
73.     /// Filename.
74.     /// </param>
75.     /// <param name='highlightedFilename'>
76.     /// Highlighted filename.
77.     /// </param>
78.     /// <param name='xPos'>
79.     /// X position.
80.     /// </param>
81.     /// <param name='yPos'>
82.     /// Y position.
83.     /// </param>
84.     /// <param name='width'>
85.     /// Width.
86.     /// </param>
87.     /// <param name='height'>
88.     /// Height.
89.     /// </param>
90.     /// <param name='sTP'>
91.     /// Top Margin
92.     /// </param>
93.     /// <param name='sRT'>
94.     /// Right Margin
95.     /// </param>
96.     /// <param name='sBT'>
97.     /// Bottom Margin
98.     /// </param>
99.     /// <param name='sLT'>
100.     /// Left Margin
101.     /// </param>
102.     public static UISlice9 create( UIToolkit manager, string filename, string highlightedFilename, int xPos, int yPos, int width, int height, int sTP, int sRT, int sBT, int sLT )
103.     {
104.         return UISlice9.create( manager, filename, highlightedFilename, xPos, yPos, width, height, sTP, sRT, sBT, sLT, 1 );
105.     }
106.    
107.     /// <summary>
108.     /// Create a Slice-9 touchable sprite
109.     /// </summary>
110.     /// <param name='manager'>
111.     /// Manager.
112.     /// </param>
113.     /// <param name='filename'>
114.     /// Filename.
115.     /// </param>
116.     /// <param name='highlightedFilename'>
117.     /// Highlighted filename.
118.     /// </param>
119.     /// <param name='xPos'>
120.     /// X position.
121.     /// </param>
122.     /// <param name='yPos'>
123.     /// Y position.
124.     /// </param>
125.     /// <param name='width'>
126.     /// Width.
127.     /// </param>
128.     /// <param name='height'>
129.     /// Height.
130.     /// </param>
131.     /// <param name='sTP'>
132.     /// Top Margin
133.     /// </param>
134.     /// <param name='sRT'>
135.     /// Right Margin
136.     /// </param>
137.     /// <param name='sBT'>
138.     /// Bottom Margin
139.     /// </param>
140.     /// <param name='sLT'>
141.     /// Left Margin
142.     /// </param>
143.     public static UISlice9 create( UIToolkit manager, string filename, string highlightedFilename, int xPos, int yPos, int width, int height, int sTP, int sRT, int sBT, int sLT, int depth )
144.     {
145.         // grab the texture details for the normal state
146.         var normalTI = manager.textureInfoForFilename( filename );
147.        
148.         var frame = new Rect( xPos, yPos, normalTI.frame.width, normalTI.frame.height );
149.        
150.         // get the highlighted state
151.         var highlightedTI = manager.textureInfoForFilename( highlightedFilename );
152.        
153.         // create the button
154.         return new UISlice9( manager, frame, depth, normalTI.uvRect, highlightedTI.uvRect, width, height, sTP, sRT, sBT, sLT );
155.     }
156.    
157.     public override void updateTransform ()
158.     {
159.        
160.         foreach(UISprite sprite in spriteSlices)
161.         {
162.             //sprite.updateTransform();
163.         }
164.    
165.         manager.updatePositions();
166.    
167.     }
168.     /// <summary>
169.     /// Initializes a new instance of the <see cref="UISlice9"/> class.
170.     /// </summary>
171.     /// <param name='manager'>
172.     /// Manager.
173.     /// </param>
174.     /// <param name='frame'>
175.     /// Frame.
176.     /// </param>
177.     /// <param name='depth'>
178.     /// Depth.
179.     /// </param>
180.     /// <param name='uvFrame'>
181.     /// Uv frame.
182.     /// </param>
183.     /// <param name='highlightedUVframe'>
184.     /// Highlighted U vframe.
185.     /// </param>
186.     /// <param name='width'>
187.     /// Final width
188.     /// </param>
189.     /// <param name='height'>
190.     /// Final height
191.     /// </param>
192.     /// <param name='sTP'>
193.     /// Top Margin
194.     /// </param>
195.     /// <param name='sRT'>
196.     /// Right Margin
197.     /// </param>
198.     /// <param name='sBT'>
199.     /// Bottom Margin
200.     /// </param>
201.     /// <param name='sLT'>
202.     /// Left Margin
203.     /// </param>
204.     public UISlice9( UIToolkit manager, Rect frame, int depth, UIUVRect uvFrame, UIUVRect highlightedUVframe, int width, int height, int sTP, int sRT, int sBT, int sLT ):base( frame, depth, uvFrame )
205.     {
206.        
207.         // If a highlighted frame has not yet been set use the normalUVframe
208.         if( highlightedUVframe == UIUVRect.zero )
209.             highlightedUVframe = uvFrame;
210.        
211.         this.highlightedUVframe = highlightedUVframe;
212.        
213.         int stretchedWidth = width - (sLT+sRT);
214.         int stretchedHeight = height - (sTP+sBT);
215.         this.manager = manager;
216.        
217.         // Top Left
218.         spriteSlices[0] = new UISprite(new Rect(frame.x, frame.y, sLT, sTP), depth, new UIUVRect(uvFrame.frame.x, uvFrame.frame.y, sLT, sTP, uvFrame.textureSize));
219.         manager.addSprite(spriteSlices[0]);
220.        
221.         // Top Middle
222.         spriteSlices[1] = new UISprite(new Rect(frame.x+sLT, frame.y, stretchedWidth, sTP), depth, new UIUVRect(uvFrame.frame.x+sLT, uvFrame.frame.y, uvFrame.frame.width-(sRT+sLT), sTP, uvFrame.textureSize));
223.         manager.addSprite(spriteSlices[1]);
224.        
225.         // Top Right
226.         spriteSlices[2] = new UISprite(new Rect(frame.x+sLT+stretchedWidth, frame.y, sRT, sTP), depth, new UIUVRect(uvFrame.frame.x+sLT+(uvFrame.frame.width-(sRT+sLT)), uvFrame.frame.y, sRT, sTP, uvFrame.textureSize));
227.         manager.addSprite(spriteSlices[2]);
228.        
229.         // Middle Left
230.         spriteSlices[3] = new UISprite(new Rect(frame.x, frame.y+sTP, sLT, stretchedHeight), depth, new UIUVRect(uvFrame.frame.x, uvFrame.frame.y+sTP, sLT, uvFrame.frame.height-(sTP+sBT), uvFrame.textureSize));
231.         manager.addSprite(spriteSlices[3]);    
232.        
233.         // Middle Middle
234.         spriteSlices[4] = new UISprite(new Rect(frame.x+sLT, frame.y+sTP, stretchedWidth, stretchedHeight), depth, new UIUVRect(uvFrame.frame.x+sLT, uvFrame.frame.y+sTP, uvFrame.frame.height-(sTP+sBT), frame.width-(sLT+sRT), uvFrame.textureSize));
235.         manager.addSprite(spriteSlices[4]);    
236.        
237.         // Middle Right
238.         spriteSlices[5] = new UISprite(new Rect(frame.x+sLT+stretchedWidth, frame.y+sTP, sRT, stretchedHeight), depth, new UIUVRect(uvFrame.frame.x+(uvFrame.frame.width-sRT), uvFrame.frame.y+sTP, sRT, uvFrame.frame.height-(sBT+sTP), uvFrame.textureSize));
239.         manager.addSprite(spriteSlices[5]);    
240.        
241.         // Bottom Left
242.         spriteSlices[6] = new UISprite(new Rect(frame.x, frame.y+sTP+stretchedHeight, sLT, sBT), depth, new UIUVRect(uvFrame.frame.x, uvFrame.frame.y+(uvFrame.frame.height-sBT), sLT, sBT, uvFrame.textureSize));
243.         manager.addSprite(spriteSlices[6]);    
244.        
245.         // Bottom Middle
246.         spriteSlices[7] = new UISprite(new Rect(frame.x+sLT, frame.y+sTP+stretchedHeight, stretchedWidth, sBT), depth, new UIUVRect(uvFrame.frame.x+sLT, uvFrame.frame.y+(uvFrame.frame.height-sBT), uvFrame.frame.width-(sLT+sRT), sBT, uvFrame.textureSize));
247.         manager.addSprite(spriteSlices[7]);
248.        
249.         // Bottom Right
250.         spriteSlices[8] = new UISprite(new Rect(frame.x+sLT+stretchedWidth, frame.y+sTP+stretchedHeight, sRT, sBT), depth, new UIUVRect(uvFrame.frame.x+sLT+(uvFrame.frame.width-(sRT+sLT)), uvFrame.frame.y+(uvFrame.frame.height-sBT), sRT, sBT, uvFrame.textureSize));
251.         manager.addSprite(spriteSlices[8]);
252.        
253.         this.setSize(width,height);
254.        
255.         manager.addTouchableSprite(this);
256.        
257.     }
258.  
259.     #endregion;
260.  
261.  
262.     // Sets the uvFrame of the original UISprite and resets the _normalUVFrame for reference when highlighting
263.     public override UIUVRect uvFrame
264.     {
265.         get { return _clipped ? _uvFrameClipped : _uvFrame; }
266.         set
267.         {
268.             base.uvFrame = value;
269.            
270.             manager.updateUV( this );
271.            
272.         }
273.     }
274.  
275.    
276.     public override bool highlighted
277.     {
278.         set
279.         {
280.             // Only set if it is different than our current value
281.             if( _highlighted != value )
282.             {          
283.                 _highlighted = value;
284.                
285.                 if ( value )
286.                     base.uvFrame = highlightedUVframe;
287.                 else
288.                     base.uvFrame = _tempUVframe;
289.             }
290.         }
291.     }
292.  
293.  
294.     // Touch handlers
295.     public override void onTouchBegan( Touch touch, Vector2 touchPos )
296.     {
297.         highlighted = true;
298.        
299.         initialTouchPosition = touch.position;
300.        
301.         if( touchDownSound != null )
302.             UI.instance.playSound( touchDownSound );
303.        
304.         if( onTouchDown != null )
305.             onTouchDown( this );
306.     }
307.  
308.  
309.  
310.     public override void onTouchEnded( Touch touch, Vector2 touchPos, bool touchWasInsideTouchFrame )
311.     {
312.         // If someone has un-highlighted us through code we are deactivated
313.         // and should not fire the event
314.         if (!highlighted)
315.             return;
316.        
317.         highlighted = false;
318.  
319.         if (onTouchUp != null)
320.             onTouchUp(this);
321.        
322.         // If the touch was inside our touchFrame and we have an action, call it
323.         if( touchWasInsideTouchFrame  onTouchUpInside != null )
324.             onTouchUpInside( this );
325.     }
326.  
327.    
328.     public override void destroy()
329.     {
330.         base.destroy();
331.  
332.         highlighted = false;
333.     }
334.    
335.     public override void centerize ()
336.     {
337.        
338.         base.centerize();
339.        
340.         foreach(UISprite sprite in spriteSlices)
341.         {
342.             sprite.centerize();
343.         }
344.        
345.     }
346.    
347.     public override void Hide (bool hidden)
348.     {
349.         base.Hide (hidden);
350.  
351.         foreach(UISprite sprite in spriteSlices)
352.         {
353.             sprite.Hide(hidden);
354.         }
355.  
356.     }
357.    
358.     public override void setSpriteImage (string filename)
359.     {
360.         foreach(UISprite sprite in spriteSlices)
361.         {
362.             sprite.setSpriteImage(filename);
363.         }
364.     }
365.    
366.     public override void transformChanged ()
367.     {
368.         base.transformChanged();
369.        
370.         foreach(UISprite sprite in spriteSlices)
371.         {
372.             sprite.transformChanged();
373.         }
374.     }
375.    
376. }
377.  

 

@trooper:

Might I ask what this implementation is for, or does exactly? How does it differ from the standard UItoolkit's touch?

 

It's a slice-9 "sprite", where the corners of a sprite stay pixel perfect and the sides and middle stretch.

Example: http://www.youtube.com/watch?feature=player_embedded&v=imW_iuTErlE

 

hello all
is it possible to have more than one texture and text as texture? i try to add an extra texture as the first texture is too small for all the animation and button i need to integrate, but it give me an error.
some little help would be more than welcome.

thanks

 

Do you mean using more than one sprite sheet? (as separate toolkits)? If so, it is possible, but can you provide more detail on what you have done, and the error you have received?

 

HI NCST
yes i mean several spritesheets, i try to use the one already provided, wich is kitchenSinkSheet and joysticksheet, i just create an extra UI instance by duplicate the existing one, create a new uitoolkitmaterial and assign the joystick texture on it, rename the texture packer name to joysticksheet. and create a button using joystickUp.png, but unity just can t find it...
any hint would be appreciated.

 

Hello everyone,
I'm making my first game and i want to say a BIG thanks to Prime31 for having this amazing tool for free.

I'm building for Android and i have a problem with the VerticalPanel. The buttons inside the panel seems to be rendered without the panel Background. I looked at the depth and it seems correcte, i tried both alpha shader (default and premultiplied) nothing seems to work. this work for my lifebar with his border, but not on the panel.
The panel work find inside unity.
I'm a bad programmer learning while working on projects but it seems that the function of the panel for setting the depth isn't working, while it should take the panel depth -1, it take the UIsprite depth -1.

here is a screenshot of the problem : https://www.dropbox.com/s/wd3u7lrahf851py/Screenshot_2013-02-19-10-04-37.png

thank you for the help!

 

Thanks this free UIToolkit!

 

Usually, I would refer to each UI toolkit instance using a separate public variable, like:

Code (csharp):

1.  
2. public UIToolkit buttonToolkit;
3. public UIToolkit buttonToolkit2;
4. public UIToolkit textToolkit;
5.  
6. void SomeFunction() {
7.  
8. UIButton b1 =  UIToggleButton.create(buttonToolkit, "options_up.png", "options_down.png", "button_down.png", 0, 0, minDepth + 1 ); 
9. UIButton b2 = UIToggleButton.create(buttonToolkit2, "options_up.png", "options_down.png", "button_down.png", 0, 0, minDepth + 1 ); 
10. UISprite s2 = buttonToolkit2.addSprite("msgBox.png",0,0, 5);
11. }
12.  

And, I just set the UIToolkit references in the editor (drag and drop each toolkit to the appropriate slot for your script).

 

PSD to UIToolkit, might think about making the compilation part of the design an actual product in the future, obviously the modified UIToolkit code has to be free

http://youtu.be/j0k-SWE9w9I

 

dude you re just made my day! thanks ncst!

 

Hello Everyone, and thanks to prime for this UI solution.

I'm actually making an inventory system, using scrollable layouts, I've the whole system implemented but I have some issues I haven't been able to work out. If someone knows how to solve them or can point me in the right direction I'd greatly appreciate it

The first one is:
Because it is an inventory, I need the buttons to change according to the item it represents which is in a list.

if I use something like this: itemButtons.setSpriteImage("emptyDown.png");
It actually changes the image, but if I click the button again...the image returns to how it was before and that's not what I need, how can I reload an entire button? with atlas and all

The second one:
Drag and Drop, I have been working on this and haven't had success....
I've started to think that it could be easier if I use normal OnGUI for this, it'd be just an image and I don't think 2 draw calls could be a problem.
But I'd really love to implement this with UIToolkit. How can I do it?
I actually got a button to change its position according to the touch, but it doesn't work correctly.
here's what I changed:

private void moveButton( Vector2 localTouchPosition)
{
this.position = new Vector3(localTouchPosition.x, -localTouchPosition.y, 0);
//this.updateTransform();
}

public override void onTouchMoved( Touch touch, Vector2 touchPos )
{

moveButton(this.inverseTranformPoint(touchPos));

// dont fire this continously if we were asked to only fire start and end
if( !onlyFireStartAndEndEvents onTouchIsDown != null )
onTouchIsDown( this );
}

The third question:
How do I stop showing the UI? is it handled hiding every sprite individually? I guess this is a silly question, but I don't seem to find an option no where.
For my inventory for example, I need the user to choose when to use it by pressing a button.


Thanks.

 

I'm just getting started with UIToolkit - is there support for TextFields? I'm not seeing any in the examples.

 

Take a look at the ExtendedTextTest and TextTest demos, you'll find everything you need there

 

prime31,

have you thought about z-ordering the toolkit's so they can use non alpha test shaders? I got something sort of working with this in UISpriteManager

public void ZSort()
{

trianglesChanged = true;

int i = 0;
int x = 0;


List<UISprite> orderedSprites = new List<UISprite>();

foreach(UISprite sprite in _sprites)
{

if (sprite != null)
{
orderedSprites.Add(sprite);
}

}

foreach(UISprite sprite in orderedSprites.OrderByDescending(o=>o.zIndex))
{

x = sprite.index;

triIndices[i * 6 + 0] = x * 4 + 0; // 0_ 1 0 ___ 3
triIndices[i * 6 + 1] = x * 4 + 3; // | / Verts: | /|
triIndices[i * 6 + 2] = x * 4 + 1; // 2|/ 1|/__|2


triIndices[i * 6 + 3] = x * 4 + 3; // 3
triIndices[i * 6 + 4] = x * 4 + 2; // /|
triIndices[i * 6 + 5] = x * 4 + 1; // 5/_|4

i ++;

}

updateMeshProperties();

}

 

@JDUnity: Did you solve the issue with UIButton.setSpriteImage ? I'm having the same problem, when someone clicks the button after I've changed the button image the old sprite shows.

 

As far as I know, text fields are not supported. I typically use OnGUI just for text entry, and UIToolkit for everything else.

 

@laserlars: I haven't been able to work it out, I haven't had much time. I believe you can solve it by destroying the button and making a new one but must be a better solution, I can't do it that way because the problem I have is that the buttons are on a layout and make things harder.

If I work it out, I'll post it immediately but perhaps some UIToolkit user out there can enlight us, It would be greatly appreciated

 

Hi,

is there a way to make a continuous button follow the touch coordinates?

Something like this :

?

The class UIContinuousButton (https://github.com/prime31/UIToolki...ns/UIToolkit/UIElements/UIContinuousButton.cs) seems to give the Vector2 touch position, but how could I get them? It seems to work with "event" only :

Thanks a lot

 

For the brief reader:
Issue of sprite image wiping out other sprite images underneath them as they pass over them.

I think I have found an odd bug and I have bashed my head against the wall between hours of trying to resolve this anomaly. The issue is that when certain sprites move over other sprites the images are wiped out temporarily. The issue seems to only appear on IOS devices so far (ipad and iphone at all versions 5.0, 6.0, 6.1). The issue to me seems to be something with multiple overlapping sprites with transparency. On the surface I would think it is something with zIndex but I have confirmed that each are on their own distinct zIndex and not close (something like 1, 6, 10). Perhaps it is something with the object being somehow in the same spot but the zIndex is different - is this something that is possible or anyone has seen? Here are two sample images of the issue occurring. What you are looking at in the image is there are letters in an inventory bar and the other letters are moving down the screen and move over the bar and items in the bar. The images of the letters in the bar are affected when the sprites pass over them.

https://www.box.com/s/q2vockeod423mtd02v90

https://www.box.com/s/f83kqmiz8gcltjieoq9y

I have been using UIToolkit for over a year and this one is soooooo frustrating...

anyones help is GREATLY APPRECIATED.

PS: this does not occur on standalone MAC/PC executable.

 

My post above details how to get rid of this problem by ordering the triangles of the toolkit from back to front, the code supplied needs to go into UISpriteManager and you'll need to change "_sprites" to "sprites" (I've modified my version of UIToolkit).

Every time you either add a sprite or change the zIndex of a sprite you'll need to reorder the triangles.


Forgot to add that the reason it happens is because meshes are sorted via distance from camera but triangles within the mesh are just rendered as set by mesh.triangles. I don't understand fully what it's doing but I know that if you write the furthest away triangles first and work your way forward you'll get correct overlapping.