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

@De-Panther, hmmm. If it is just the touch areas you may be able to shortcut it and just invalidate them. Have a look at the touch frame code on the UITouchableSprite class and it may be as simple as nulling out the touch rect to force recalculation.

 

I'm still not able to get text working with this procedure. Is there a step missing in there? My text comes out all messed up.

The only thing I've noticed (which I assume is where the issue is) is that Hiero exports the font kinda upside down, but when the atlas is created, this top "white space" (transparency) seems to get dumped and the font data "moves up" to the top of the image.

A bit hard to see in the screenshot because of the transparency, but hopefully it makes sense.

 

I think it was said or shown somewhere that you need to flip that image vertically and it will just work like a charm.
Maybe it was in that video tutorial posted in here. Or just some text tutorial on the web. Can't remember precisely.

edit:

It's a question on here:

http://www.learn-cocos2d.com/knowle...tent/manual/1964/17064-troubleshooting-hiero/

 

@Acumen - sweet, thanks. I'll play around with it again. I figured it would be something to do with that image being all upside-downy.

 

If i want to make a vertical slider from the bottom of the screen all the way to the top, do i need to make a custom extension for slider that uses three bitmaps? (of course i have variable resolutions)

Also, if i want to support the touchdown and touchmove event for the UIButton do i need to extend the class (or modify the source of course..)? Or is there some method exposed somehow to make my life easier?

 

Vertical sliders ate part of the base elements available. If you need more detailed information on events just subclass and override the appropriate methods that you are interested in.

 

Why does the UIProgressBar require a border?

 

@geppeto, because I didnt see a pull request from you for UISimpleProgressBar you could simply make a new constructor and create method that doesn't have a background also. The background isn't touched outside the constructor. I'll keep my eyes peeled for the pull request

 

Actually - finding some weirdness in general with the UIProgressbar. Is this me doing something wrong, or is that component still a bit buggy?

With this code:

Code (csharp):

1.  
2. prgFemaleHealth = UIProgressBar.create("bar_health.png", "bar_border.png", 5, 100, 0, 0);
3.  

I get the expected result:



But when I move the border into it's proper location with this code:

Code (csharp):

1.  
2. prgFemaleHealth = UIProgressBar.create("bar_health.png", "bar_border.png", 5, 100, 4, 99);
3.  

I get this result:




Not sure what's going on, but nothing that I do places the border "around" the progress bar.


EDIT: Got it. The bar placement is relative to the border. So the following code puts things in the right spot:

Code (csharp):

1.  
2. prgFemaleHealth = UIProgressBar.create("bar_health.png", "bar_border.png", 1, 1, 4, 99);
3.  

 

Not a worry - I will add a constructor. It was more a general curiosity question. I thought there might be some deeper reason why a border is required

 

@geppeto, nothing deeper. UIToolkit was born from a decent UI framework so all the current components (besides the UIKnob which was added for no good reason) were created in an as-needed basis.

 

I found the "public Rect touchFrame"
but it seems C# is still too much for me.

I'll try the re construct of the UI like you suggested first

thanks

 

@Geppeto, @Prime31
I was meant to submit some changes to the progress bar but i failed at github and i didn't have a lot of time at the point to submit some of my tweaks for reviewal. I'll get around to it somewhere this week.

On a different note. I setup a basic UI like i normally do with UIToolkit except that now the UI isn't being shown across the camera. The GO is physically present and i see my progress bar animate and all the textures. But they are not being drawn ontop i suspect.

Layers are set to UI and depth to 100. The appropriate culling mask has been disabled on the main camera.

 

Is your UI GameObject at position 0,0,0? What does it look like from your main camera (game view)?

 

it's at 0,0,0 and the main camera sees no UI, just the game world., which is a close up of the hemisphere you see in the screenshot

 

Hi, first of all, i like to say thank you for this great package, works like a charm!
I have a quite simple question, how do i make a TextInstance overlay a ProgressBar or Buttons? played around with depth and zIndex but didnt work by now.

Thanks in advance

EDIT: Solved

 

@Raziel, that sounds like a culling mask issue. double check your cameras and make sure they are enabled with proper culling masks and layers setup.

 

I am so enjoying this toolkit, dude it makes life so much better than using the original unity gui.
todays problem I'm having is 'layering' a sprite beneath a uiknob (yes I'm using a UIKnob cos it fits the UI we're recreating)
I don't seem to be able to get it to be the right depth.

 

@jon_unity, glad you are liking UIToolkit! You can set the zIndex of any UISprite subclass by just doing: theItem.zIndex = 3 You can also set the zIndex in the "create" method of the UIElement in almost all cases like the following for UIKnob:

public static UIKnob create( UIToolkit manager, string filename, string highlightedFilename, int xPos, int yPos, int depth )

 

Thanks I though I had tried that but just tried it again and it works I must've slipped up doh
thanks.

 

The ui layer flag is unchecked on all camera's.

 

That means it won't render. It should be checked for the UIToolkit camera.

 

The camera's i added i mean. I didn't touch the one added by UIToolkit. Just to make sure i cleared out the remaining bits of EZGUI, made a new scene.

made a manager GO, called pdogs and assigned a c# script previously tested and working in another project
made a UI GO, with the UI.cs setting layer to "UI".
made a Toolkit GO, set the correct name and material

so far if i run, everything shows up in the editor.

Main Camera has the UI flag unchecked.

Nothing shows up ;( Selecting the UI Camera that spawns if i pause the game doesn't show a preview of the ui either.

Checking my testbed project, the spawned ui camera does show a good preview as opposed to the camera spawned in my main project

[Edit] Closely going over ALL the settings, it turns out the UI layer wasn't being applied to some of the children thus not rendering them on screen as you suspect.

I bow my head to you.

 

Hi Prime31, just sent in a pull request on github with some basic text wrapping and and bugfixes for UIText character rendering. I think a lot of the horizontal alignment problems that people have been having should be resolved, so please check it out!

https://github.com/prime31/UIToolkit/pull/9

 

@getluky, awesome! I'll merge in the changes either today or tomorrow and get them pushed out to everyone. Many thanks!

 

I think i found another bug in the UIProgressbar. Having set it up properly for HD/Retina. When switched to SD for older iphones, the bar's offset is screwed up.

Not sure how to fix this one.

 

@Raziel, due to it having to be positioned relatively its a bit of a tricky one. Technically, it *could* just check for HD and double the offsets but I'm not sure if that's the best solution. I'll have to think about it and see if there is a cleaner way.

 

little addendum to illustrate the issue



It's perfectly fine on HD

 

the following doesn't get adjusted for lower resolutions automatically does it?

Code (csharp):

1. cannonRight.normalTouchOffsets      = new UIEdgeOffsets( 30 );
2. cannonRight.highlightedTouchOffsets = new UIEdgeOffsets( 30 );

 

@Raziel, it looks like I had teh change in my local branch for auto doubling that wasn't checked in. Pull the latest version to get the update.

 

Awesome, much love

 

Hello,
I'm looking for a container without any layout types. I've tried adding UIVerticalLayout into a UIHorizontalLayout object but it didn't work. I've tried to read this post as fast as I can, if I missed the thing please forgive me. By the way, it is very generous of you to give this great library for free. Thanks.

 

@zehr, you can make a layoutless container by just subclassing the UIAbstractContainer and leaving the class empty.

 

I'm getting some odd positional behavior between the different resolutions. Everything get's an odd offset. I positioned everything properly for ipad resolution but when i switch to iphone 4, it's all slightly offset. worse still if i switch to pre-iphone 4. I'm using the following to position my elements:

Code (csharp):

1. .positionFromBottomLeft( .065f, .03f );

 

@Raziel, that method does percentage based positioning so it will differ slightly by design. Use the pixel positioning method if you need it to be exact.

 

Hi Guys,

First of thanks Prime contributors for developing UIToolkit ! Got a couple of questions :

Radio Button
What the best way for creating a radio button type ? Looking at the current code on gitHub, it seems to be missing a radio button type. I was wondering if I could do it as a set of Toggle buttons (on/off/ pressed states) + a logical container that enforces mutually exclusivity of the "on" state. The visual stacking of the buttons may, i guess, be controlled by a UIHorizontal / Vertical container . Could this be handled better ?


Labeled Button
A UIButton with a UIText on top ( Z sorted by depth value, so Text is Button.depth -1 ). I think it'll make sense to add color(s) for font rendering of the Label for the "over" and "active" states of the button.

Thoughts anyone ? I must mention I'm working with a lot of dynamic content , hence can't bake in the Text on top of the texture.

 

@Prime31 : Looking at the code for UIButton UIToggleButton they seem to independently derive from UITouchableSprite. Would it not serve better if UIToogleButton actually derived from UIButton. Or is there something I'm overlooking ? Toggle button just has that additional "_selected" state.

 

@Dev, a few UIToggleButtons would work just fine as a radio button group with minimal work. For a labelled button, you can just subclass UIButton and add a UIText instance in there for the text.

As for UIToggleButton deriving from UIButton I don't recall if there is any good reason for that. If you can clean it up by swapping the superclass please shoot over a pull request!

 

@Prime31: cheers! I'll see about the hierarchy cleanup and get my head around git lingo . About time anyways

 

@Dev, to make things even easier the wonderful guys at Github released this fabulous piece of software for free!

 

Hi all,

Any way to use this system by putting a texture on a plane ?
I mean, can i have the sprite animation system but put on a solid plane so i can use things like collision and stuffs ?

 

I don't think there is a proper solution for this yet, but I could be wrong. I wrote a custom ITexture for this purpose last week; it has no functionality, it just displays a texture on a plane and inherits UISprite.
I haven't submitted a pull request to the repository yet; I can, if you like.

 

Reissgrant: i would like for sure !
In fact, so far, i still dont know how to manage my sprite thing so if it permits me to use the UItoolkit on a plane it will be great.
Btw dont forget then to explain how it work !

thx

 

Here is the file, it should work for now, but Prime31 may want to make some changes to it to be officially included:

Code (csharp):

1.  
2. using UnityEngine;
3.  
4.  
5. public class UITexture : UISprite
6. {
7.     private UIUVRect _normalUVframe;
8.  
9.     #region Constructors/Destructor
10.    
11.     public static UITexture create( string filename,  int xPos, int yPos )
12.     {
13.         return UITexture.create( UI.firstToolkit, filename, xPos, yPos );
14.     }
15.        
16.     public static UITexture create( UIToolkit manager, string filename, int xPos, int yPos )
17.     {
18.         return UITexture.create( manager, filename, xPos, yPos, 1 );
19.     }
20.    
21.     public static UITexture create( UIToolkit manager, string filename, int xPos, int yPos, int depth )
22.     {
23.         var normalTI = manager.textureInfoForFilename( filename );
24.         var frame = new Rect( xPos, yPos, normalTI.frame.width, normalTI.frame.height );
25.        
26.         return new UITexture( manager, frame, depth, normalTI.uvRect);
27.     }
28.  
29.     public UITexture( UIToolkit manager, Rect frame, int depth, UIUVRect uvFrame):base( frame, depth, uvFrame )
30.     {
31.         // Save a copy of our uvFrame here so that when highlighting turns off we have the original UVs
32.         _normalUVframe = uvFrame;
33.        
34.         manager.addSprite( this );
35.     }
36.  
37.     #endregion;
38.  
39. }
40.  

Name this file: UITexture.cs
Place this file in this directory: "UIToolkit\UIElements\"
Use like this:

Code (csharp):

1.  
2.  
3.         public UITexture myTexture = UITexture.create("myTexture.png", 0 , 0 );
4.         myTexture .positionCenter();
5.         myTexture .scaleFromTo( 2f, new Vector3 (.25f ,.25f , .25f) , new Vector3(1f, 1f, 1f) , Easing.Elastic.easeOut );
6.  
7.  

 

Can I add more than one texture packer config? The reason why I ask is because I want to have the text font and also buttons, but looking at prototype.txt it has all the mapping in there for the font. How would I add the buttons without another config.

 

@unitynewb, you can use as many UIToolkit instances as you want. There is a demo scene that uses two to illustrate. If you want to add buttons and text in the same atlas just add the font image to your normal Texture Packer atlas.

Prototype.txt is not a Texture Packer config file. That is a .fnt file output from the bitmap font program of your choosing.

 

Yeah sorry I just realized that.

 

Brady,

EZGui and your toolkit are using the same class names (UIButton, etc...) any workaround that would allow me to use both ?

thank's a lot.

hervé

 

@ciarovoh, there is no easy fix for that. You could use MonoDevelop to do a refactoring of one of them then once done import the other.

 

Damned !!! and re-do the job for each new version....

Let me ask a different question. I would like to display a texture with some control on it : width and height should reflect the PNG size, I would be able to place it on the screen and manage different resolution. is there a way to do this with your plugin ?

thank's a lot.

hervé