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

@LaughingGull: Yes my text and sprites are at different depth values. Texts are at -1, Sprites at 5. But somehow the text still "pokes holes" through my sprites.

 

From what I've read so far, UIToolkit does not support scaling of sprites; however, I was able to use .scale to resize sprites to a desired size. Using .scale resets the positioning of the sprite so after using it, I would use .position = Vector2(x, y).

For some reason, one sprite (and not others), which I set the scale and position for manually, causes some text to disappear from view.

Has anyone encountered this issue? Is there another way I can scale sprites that won't cause strange bugs like this?

 

@frozenoj

Have you tried using non-negative depth values?

 

I just did, but the problem still occurs. Thanks for the help though. Maybe there is a problem with the shader? Does this happen on your device?

 

Not really. cause it happens sometimes, and sometimes not. Font's are in front on the zindex. My guess is rendering issues. Like it starts rendering the texture before it completes loading what I sent.

@pweeks also, if I look in the scene, the letter is not rendered, thus my guess it's not added to the texture.

How do I delay the rendering of that particular texture so I make sure all UITexts are added?

 

Have you tried: sprite.setSize (float-width, float-height);

 

Is there a way to use alphaTo on a parent object and have it affect all it's children?

Or do I need to use GetComponentsInChildren to get it to work?

-Dave

 

I have set up several UIButtons that are child's of the UIToolkit and my questions is how do you access in scripting the Mesh filter of the UIToolkit so you can modify the mesh at runtime? I want to change the mesh filter to a mesh I am creating via script to take out all the transparency from the 2D sprite I'm using for my UIButtons, is this possible??

 

got it if anyone is looking for the answer

Code (csharp):

1. MeshFilter _meshUsed = (MeshFilter)gameObject.GetComponent("MeshFilter"));

 

How do you flip/mirror a UI element with this UI Toolkit?

 

Anyone else running into issues getting UIButtons to respond in the Web Player? When output to Android/iPhone my UI works flawlessly, but in the Web Player it just doesn't register when I click anything, using onTouchDown or onTouchUpInside. Can't understand why?!

Love the plugin other than this problem, it's given me a 15fps boost on mobile :-D

 

If you change the mesh of a UIButton to fit your needs, how do you modify the touch area box created to fit you new mesh, currently the touch area is not changing to the new mesh and I have deleted the old mesh with Clear(), is this possible? or is it just created when the button is created?

 

@aharrison, subclass UIButton and either override hitTest or set appropriate touchFrames

 

@Prime31 So I have made UIButton a subclass and override the size of the touchFrames changing the function to make it virtual so I can modify the values from the new class code below in the new class:

Code (csharp):

1. public override void setSize( float width, float height )
2.     {
3.         _width = width;
4.         _height = height;
5.        
6.         updateVertPositions();
7.         updateTransform();
8.     }

Is there anyway to make the touchable area non-rectangular?

 

Im having a problem with the latest version i downloaded from github (like 2 days ago) when i try to make a button on top of a background layout the shadows turn black. I have no idea why that would happen do you

 

I seem to be having the same problem. Works on iOS and standalone, but in web player it doesn't respond to clicks at all. Anyone have any ideas?

 

It might be related to this: https://github.com/prime31/UIToolkit/issues/116

It seems that the web player has recently started generating an error. But I'm not familiar enough with UIToolkit to follow the author's instructions for a fix. Can anyone else help out?

 

Okay, did a little digging, aided by the post I referenced earlier. The problem seems to be on line 53 of TouchMaker.cs, where it is attempting to set the value of the m_Phase field of the touch. But Touch::m_Phase is a private field, so this generates a FieldAccessException. I'm not quite confident in my ability to subclass Touch to solve this problem... Any chance UIToolkit will get an update to fix this?

 

Multitouch??

 

I'm really starting to like this toolkit but I have a problem, I am using UIBackgroundlayout and when a button is clicked i have it move left off screen. The weird thing is that i have a bit of the layout left on screen in the bottom right (takes about 15% of the screen), Can you anyone tell me why that happens??
Here are a screen shot of the before and after of this:

Never mind i found the error, I was using my buttons parameters when using positionFromTo.

Also I was wondering how you would Be able to use the back button. Is this something I would have to add like the swipe detectors, or use a regular update function around my touch script to do this, or is there already something pre-made that comes with the Toolkit.
If it is written somewhere on this thread then I'm sorry but I'm just up like page 30 so i still got a lot of the thread to read through.

 

Also I have been trying to create a Slider with a progress track, like a changed track so that you can see which direction is up and which is down. I cannot seem to get it. I added a funciton to UISlider.cs

Code (csharp):

1.  
2.     public void useSliderProgress(string trackProgressFileName, int posX, int posY, int depth = 1)
3.     {
4.         _useSliderProgress = true;
5.         _trackProgress = manager.addSprite(trackProgressFileName, posX, posY,depth );
6.         _trackProgress.parentUIObject = this;
7.        
8.         _originalTrackProgressHeight = _trackProgress.height;
9.         _originalTrackProgressWidth = _trackProgress.width;
10.        
11.     }
12.  

and another function:

Code (csharp):

1.  
2.     private void updateProgressBarWithNormalizedValue(float normalizedProgressValue )
3.     {
4.    
5.         if( layout == UISliderLayout.Horizontal )
6.         {
7.             UIUVRect newUVframe = _trackerProgressOriginalFrame;
8.             newUVframe.uvDimensions.x *= normalizedProgressValue;
9.             _trackProgress.uvFrame = newUVframe;
10.         }  
11.         else
12.         {
13.             Debug.Log("Layout is vertical");
14.             UIUVRect newUVframe = _trackerProgressOriginalFrame;
15.             newUVframe.uvDimensions.y *= normalizedProgressValue;
16.             Debug.Log("Original UV Frame: " + _trackerProgressOriginalFrame);
17.             Debug.Log("new Uv Frame     : " + newUVframe);
18.             _trackProgress.uvFrame = newUVframe;
19.         }
20.  
21.     }
22.  

which gets called here:

Code (csharp):

1.  
2.     public float value
3.     {
4.         get { return _value; }
5.         set
6.         {
7.             if( value != _value )
8.             {
9.                 // Set the value being sure to clamp it to our min/max values
10.                 _value = Mathf.Clamp( value, 0f, 1f );
11.                
12.                 // Update the slider position
13.                 this.updateSliderKnobWithNormalizedValue( _value );
14.                 if(_useSliderProgress)
15.                 this.updateProgressBarWithNormalizedValue( _value );
16.             }
17.         }
18.     }
19.  

Currently my problem is getting the progress track to move right. first since I am using vertical slider I want the bottom to be 0 and the top to be 1 which is is what it is, but when i add the track to it and Increase i the track goes from top to bottom (opposite of what i want) and the UVFrame acts kinda weird. I want it to work like it does in UIProgress bar like only a portion of the image is shown but it doesnt act like that .

Any help would be appreciated.

 

I have been using uiToolkit for a few projects at work and in my private time. Even though I started packing my sprites with Texture packer I got annoyed by the fact that for unity I had to rename assets to .txt instead of json or fnt or the fact that I manually had to pack 2 sizes and then rename them to ... and ..._2x. I think back then that's when I started writing the texture packer for ShoeBox.

ShoeBox is a free win/mac app that can but not only pack sprites and pack Bitmap fonts, more of an overview here
http://renderhjs.net/shoebox/

Some features it has adapted for UiToolkit esspecially

• packing: automatic 2x resizing and file name naming to _2x for the original size.
• file extention set to txt instead of json even though the syntax is the equivalent of what Texture Packer packs and everyone seems to adopt.
• bitmap fonts: saves it with a txt instead of fnt extention
• setting templates for UiToolkit or Unity

I made a video that shows how to create an animated Sprite (converted from an animated GIF), a 2 state button and a bitmap font. Before you use the Pack Sheet or Bitmap font tool for UiToolkit make sure you set up the settings from the templates to the Unity sets (right click on a tool to go to the settings). As can be seen here:


For the animations you can drop animated GIF files, AS1, AS2 or AS3 movies. The bitmap font is something that can designed in Photoshop or Gimp or whatever and packed in ShoeBox. A more in depth reference on how to create Bitmap fonts can be found here:
http://renderhjs.net/shoebox/bitmapFont.htm

Turn on annotations for the commentary

screenshot from the sprites and their id's that I used in the video


I have a thread here on the Unity forums as well, if you have specific questions you can ask them there
http://forum.unity3d.com/threads/113518-ShoeBox-2d-gamedev-tools

 

Shoebox looks cool, I'll have to check it out. Minor correction though: the current version of TexturePacker will export in Unity format (so you don't have to rename your json file).

 

Hello Dear Community,

I'm having a problem using the vertical scrollable container in iPhone.
On desktop (Pc and even MAC) everything work perfectly, but when i run the application in the iPhone the container appear normally, but as soon as i "scroll it" it disappear.
Sometime right away and sometime after some scrolls.
Any idea?
Any one meet the same problem before?

P.s. The Position.y "NaN" problem still persist also on the latest UIToolKit.

Looking forward to your reply.

 

I have some problems. Everything seems to work fine, but i cant see textures (buttons).

Code (csharp):

1.  
2. _startGameButton = UIButton.create("start.png","start2.png",0,0);
3. _startGameButton.positionFromTopLeft( 0.0f, 0f );
4. _startGameButton.highlightedTouchOffsets = new UIEdgeOffsets( 30 );
5.  

UIButton is added to the scene as a child of UIToolkit it is in front of camera, layers are set, but i still can't see button. There is no errors. I do not know what I am doing wrong.

 

I am currently i the process of creating a UIRelativeLayout (specifically for android based devices). The process is going well I just have 1 problem so far. When i put two sprites on top of each other in the same layout (a bacground type sprite and a button) the alpha gets all messed up. I get a crazy white outline in in around my top sprite. Can someone tell me what might be happening. Thanks in advance.

Edit: I have figured out what the problem is. For some reason its a depth problem (even though one depth is 5 and another is 1) I fixed this by making Two UIToolkits one is only for backgrounds and the other is for all the other UI elements. ( I had to do this anyway as the textures were too large or not sqaure when i put both backgrounds and ui elements on one sprite sheet).

 

Does this Toolkit change global coordinates or just the coordinates used in UIToolkit. I ask because I had 3dmodels showing up that i could click, rotate, spin etc. Now i have to touch way outside the SphereCollider and even then it doesn't always rayhit etc. Do you know what might be wrong with it?

 

Quick question about dynamically setting the texture packer config name - I have a scene setup which dynamically loads menu textures based on language.
This works fine in one scene but when I create another scene using exactly the same script it doesn't work and I can't for the life of me figure out why.

Script is as follows:

textPackerName = "levels/levelBtns_";
getLanguage();
var go = GameObject.Find("buttonsToolkit");
var goc = go.GetComponentInChildren(typeof(UIToolkit)) as UIToolkit;
goc.texturePackerConfigName = textPackerName;

"levels/" is the directory in the Resources folder. GetLanguage() just adds a two digit language code to the end of the path.

on the first scene every loads fine but on the second I get the error message:
"NullReferenceException:Object reference not set to an instance of an object" and the texture file does not show up in the Toolkit inspector.

Any ideas?

 

Hi there,
I'm trying to put some profile pictures from Facebook (using the Prime31 networking plusin) into some UISprite objects inside a scrollable list. My problem is that I don't know how to inject such pictures into the UISprite since this one only takes an image filename from a spreadsheet and not a Texture2D. Is there a workaround for this? Thanks.

 

I may have found a bug in UIToolkit. That said, I probably don't use the latest version of UIToolkit since I've done changes and never merged newer versions into it, so maybe the bug has already been solved, but I figured i'd post it anyway.

Context :
- You have a UIStateButton with 2 states (the bug is most likely here with more than 2 aswell).
- For each state, you have a normal texture and a highlighted texture.

Bug :
- You have your button in state 1. You "touch down" on it, so the texture changes to the highlighted for state 1.
- Then you "touch move" outside of the button area, so a touchEnded( false ) is called on the button.
- The texture then resets to the normal texture of state 0, instead of the normal texture of state 1.

I believe this is because the variable _tempUVframe, defined in UITouchableSprite, is only set when the button is first created. In the main UIStateButton constructor, you do the following call, which will call the base constructors (UIButton then UITouchableSprite) :

Code (csharp):

1. var button = new UIStateButton( manager, frame, depth, firstNormalTI.uvRect, firstHighlightedTI.uvRect );

In this code, firstNormalTI.uvRect represents the normal UVframe of the state 0, and this is what _tempUVframe is set to in the UITouchableSprite constructor. That value is never changed later.

Let's now have a look at the overrided property highlighted of UIButton :

Code (csharp):

1. public override bool highlighted
2. {
3.     set
4.     {
5.         // Only set if it is different than our current value
6.         if( _highlighted != value )
7.         {          
8.             _highlighted = value;
9.            
10.             if ( value )
11.                 base.uvFrame = highlightedUVframe;
12.             else
13.                 base.uvFrame = _tempUVframe;
14.         }
15.     }
16. }

Here, if the button is no longer highlighted, you set the uvFrame to _tempUVframe. That property isn't overriden in UIStateButton, so this is the code that's called for a UIStateButton, and the uvFrame is set to _tempUVframe (i.e the normal frame of state 0) regardless of which state the button is in.

I hope it makes sense and it helps, assuming you haven't fixed that bug already !

Let me know what you think and what solution would be best to fix this. I'm guessing it's not too complicated.

M.

 

just added a new version of UIToolkit to a new project.
As I can remember in my previous project with an older version of UIToolkit, I was able to align my text in any way.

I'm facing a problem with the text positioning and alignment.

When I create and set my textinstance too positionfromTopLeft() I can only align Left. center and right is not working anymore?
When I use positionfromTopRight() I can't align center or left?
What if I have a coin counter in my top left corner what needs to be right aligned?

also when I want to hard position a line on the screen via this method:
text1 = text.addTextInstance( "Test.", 500, 100 );
The text is beside my screen, even when my res is 1024 x 768, like with the old UIToolkit I was hoping to see my text located at coordinate (500,100). It looks like when my x coordinate is higher then 512 it's of-screen.
Do I have to divide my locations with 2 to work now?

 

@crazybeek
using position does not align your text it positions its start xpercent from right and ypercent from top
As far as I know there is nothing that right aligns your text itself in the UIToolkit but i might be wrong.

 

what i've found (and on this thread i thought i'd posted this once before) is a couple things...one if the blending problems are coming from within the same atlas you're kind of hosed. You'll have to break them out into separate atlases as they're both using the same shader. After you break them out into separate atlases, copy the default uitoolkit alpha blend shader to some other name and change the tag "queue = transparent" or something to that effect...that tag is what controls rendering order. as it ships ALL uitoolkit shaders are set to "transparent" so you have no idea which will render into the buffer first, mucking with alpha blending...so if you had a background and you wanted it first, you could have it in its own atlas, with default shader, then an atlas that had the transparent item, would have a new shader with "transparent+1", which would force it to render after the others. if it's nto an alpha issue, then the zindex will work

edit...unity docs say "Geometry render queue optimizes the drawing order of the objects for best performance. All other render queues sort objects by distance, starting rendering from the furthest ones and ending with the closest ones."

but that doesnt seem to apply to UIToolkit sprites in my experience...ymmv

 

What i've found that works for us is:
1. make a containing sprite/background/button/whatever
2. position it
3. add child (important)
4. position child (which will be relative to parent)
5. apply scale to top level container (scale NOT localScale...it's commented out in UIObject.cs)

voila! scaled sprites that respect positioning

edit: you do need to uncomment the application of clientTransform.localScale in UIObject.cs lines 254/261

 

@Raigex

I can remember that in my previous project, I was able to position my score text in the top left via positionfromTopLeft() using percentages and set my alignmode to right. so my score label grows to the left when the value increases. This is not working anymore because it seems to align to the left no mather what kind of alignmode is set.
now I have to use positionfromTopRight() to put my score label in the left top corner with right alignment to achieve the same effect?

 

I have a similar problem, but instead of using different sprites, I have a background sprite and text on top of it.
The background sprite is in a atlas/uitoolkit together with all other sprites while the text is in its own sprites, so I already got two different UItoolkits but still have the same problem, ie the transparency around the text (individual letters) are drawn instead of the background sprite.

 

I also had that originally. I set my background layer to 5 and my button/everything else to 1. This cleared up alot of my problems. Now i just have 1 problem of alpha transparency blending of things from the same sprite sheet (toolkit).

Edit: I fixed the transparency blending by changing AphaTest from Greater .01 to Greater.1

 

Hi all, having a problem trying to get rid of some btns I created through a for loop.

that is the code I use to create my btn each time. It works great and I can even figure out which button I am clicking. Although when I close that window I want the btns to get deleted or at least be able to be updated next time I open said window. Is there a way to target specific btns to be able to delete them?
I tried using the index variable but cannot get it to target a specific button based on the index, when I say delete invBtn it only deletes the latest created btn. Am I missing something here?

Any help would be amazing!

Jason

 

Your best bet is to have a list of buttons List<UIButton> and each time you create abutton add it to the inventory then when you want to delete the buttons
delete.button and remove it from the list
It is something I would do.

 

Hmm... maybe I am going about this all wrong... maybe I should try making the btns per object and so they are all pre-created in each objects script. then I'd just have to link them and hide/show based on what is in the inventories arrays... I'll try that.

thanks for the help

Jason

 

Ok, one more problem Is there an easy way to update the image a btn is using without having to destroy the btn? If you just recreate it will it just get replaced with the new info?

Jason

*** the answer is no.... it just creates a new button over top the old... Is there anyway to "update" the image or icon it uses?

 

If you take a look at UISprite.cs there is this which sets the normal image file.

Code (csharp):

1.     public virtual void setSpriteImage( string filename )
2.     {
3.         uvFrame = manager.uvRectForFilename( filename );
4.     }

If you override it in UIButton (or UITouchableSprite) to do this, it might work:

Code (csharp):

1.     public override void setSpriteImage( string filename, string highlighted )
2.     {
3.         uvFrame = manager.uvRectForFilename( filename );
4.         highlightedUVframe = manager.uvRectForFilename( highlighted );
5.     }

 

This must be a bug, when you instantiate a button with

UIButton.create(), you must actually enter the name of the sprite for the highlighted state, you just cannot leave it empty, like here

Code (csharp):

1. UIButton.create("directory.png","",0,0);

 

I am having an issues with the colors being washed out when using UIToolkit.

It looks like the gamma or brightness on the textures are pumped way up so they are much whiter than they should be.

The texturepacker atlas image is fine but when it is displayed in Unity, it's too bright. The directional light in the scene doesn't seem to be affecting it nor the render settings. I even played around with the import settings but to no avail.

Anyone have an idea of what the problem could be or what I can adjust?

 

Does this have to count as a bug? If for some reason you don't want the button to have a different state when pressed/clicked, you could just give the same sprite (e.g. ...("directory.png","directory.png",0,0);

 

Not a bug, surely, but it'd be nice to have a note in read.me about this. Because I was almost banging my head before I figured out the reason for error.

 

Is there an easy way to flip a sprite vertically? Using UV, not actually moving the position or scale.

 

Figured it out UISpriteManager:

Code (csharp):

1. public void updateUV(UISprite sprite)
2.     {
3.        
4.         if (sprite.orientation == UISpriteOrientation.Normal)
5.         {
6.                        
7.             UVs[sprite.vertexIndices.uv.one] = sprite.uvFrame.lowerLeftUV + Vector2.up * sprite.uvFrame.uvDimensions.y; // Upper-left
8.             UVs[sprite.vertexIndices.uv.two] = sprite.uvFrame.lowerLeftUV; // Lower-left
9.             UVs[sprite.vertexIndices.uv.three] = sprite.uvFrame.lowerLeftUV + Vector2.right * sprite.uvFrame.uvDimensions.x; // Lower-right
10.             UVs[sprite.vertexIndices.uv.four] = sprite.uvFrame.lowerLeftUV + sprite.uvFrame.uvDimensions; // Upper-right*/
11.            
12.         }
13.         else if (sprite.orientation == UISpriteOrientation.FlippedVertical)
14.         {
15.                        
16.             UVs[sprite.vertexIndices.uv.one] = sprite.uvFrame.lowerLeftUV; // Upper-left
17.             UVs[sprite.vertexIndices.uv.two] = sprite.uvFrame.lowerLeftUV + Vector2.up * sprite.uvFrame.uvDimensions.y; // Lower-left
18.             UVs[sprite.vertexIndices.uv.three] = sprite.uvFrame.lowerLeftUV + sprite.uvFrame.uvDimensions; // Lower-right
19.             UVs[sprite.vertexIndices.uv.four] = sprite.uvFrame.lowerLeftUV + Vector2.right * sprite.uvFrame.uvDimensions.x; // Upper-right
20.            
21.         }
22.        
23.         uvsChanged = true;
24.         meshIsDirty = true;
25.     }

 

Could UIToolkit be made to support localization easily? Like saying using the Resources folder and separate paths to localized Assets, e.g. Resources/en_US/images, Resources/en_US/strings etc. That way you could easily have a user use a button to select where they are from and it would update the relevant text or graphics for that region.

 

Hi everyone,

Is there a way I can load an image to a UIButton without using a sprite? Or load an image using my other images not included in a sprite?

Thanks!
Ryann