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

not sure...been crunching on ios build, i'll try Android today

 

this is the most stable version I have found https://github.com/prime31/UIToolkit/downloads

 

Thank you Prime31 for this solution, high quality 2D GUI's are a must and it seems that you thought it out pretty well !

 

sorry for late reply...computer crashed...hard...reformat, reinstall a lot of stuff...just now getting to Android...will let you know as soon as i'm functional

 

that is the latest and has bugs and odd ways of working with it, but it is probably the best, once you make some changes

 

Hello.
i really tired to go over most of the posting here and found bits and pieces but didn't find a complete answer.
can anyone help with a basic swippable menu screen.
i want to have five UIButtons on a screen, then when i swipe it goes on to the next 5 buttons on a different page and so on.
any help will be greatly appreciated.

thank you

 

Code (csharp):

1.  
2. //bgs[] is array of uitoolkits
3.                 mSceneScrollable = new UIScrollableVerticalLayout(bgs[(int)STATE.LEVEL_SELECT],20); //this is spacing, not num scenes   // NUM_SCENES );
4.                 x = (int)UIRelative.xPercentFrom(UIxAnchor.Left,Screen.width,0.525f);
5.                 mSceneScrollable.positionFromTopLeft(0.0f,0.525f);
6.                 var width = UI.instance.isHD ? 884 : 442;
7.                 mSceneScrollable.setSize( width, Screen.height);
8.                 //mSceneScrollable.localScale = mAspectScale;
9.                
10.                 for(int sceneIndex = 0; sceneIndex < NUM_SCENES; ++sceneIndex)
11.                 {
12.                     mSceneSelect[sceneIndex] = UIButton.create(bgs[(int)STATE.LEVEL_SELECT],"theme_img_L"+(sceneIndex+1)+".png","theme_img_L"+(sceneIndex+1)+".png",0,0);   //"theme_frameY.png",0,0);
13.                     mSceneSelect[sceneIndex].onTouchUpInside += SceneSelect;
14.                     mSceneSelect[sceneIndex].userData=sceneIndex+1;
15.                     mSceneSelect[sceneIndex].scale=mUIScale;
16.                     //mSceneSelect[sceneIndex].scale=mAspectScale;
17.                     mSceneScrollable.addChild(mSceneSelect[sceneIndex]);
18.                 }
19.  
20.  

that will put buttons in a scroller...if you wanted 5 to a scroller, you could make more scrollable containers and just realize when to hide/show them

 

i'm crashing on Android, presumably in uitoolkit or uitoolkit related...null reference in my show splash routine

 

actually crash had to do with new load/save code, so actually we're running...I can zip up the version we have and send it along

 

hi pweeks, first of all thank for quick answer, however i am having a few problems with it, i added

var bgs = new Arry ();

at the top before the Start, and also tried within, then it gives me like 20 errors.
any chane you can post a full script in which i will change the values after and learn this way?
or maybe a bit more direction as of how to get this script to work?

 

your definition is wrong if you have more than one toolkit

Code (csharp):

1.  
2.     //array of background toolkits
3.     public UIToolkit[] bgs;
4.  

with it being public, you can now create toolkits in the editor and assign them to the "bgs" array

you'll need to declare the variable for the scroller:

Code (csharp):

1.  
2.     private UIScrollableVerticalLayout mSceneScrollable;
3.  

if you only have one uitoolkit, change the constructor call to be

Code (csharp):

1.  
2.     mSceneScrollable = new UIScrollableVerticalLayout(20);  //this is spacing
3.  

this will then use the default toolkit, and come to think of it, the change to specify the toolkit (as in my example) is a change we have locally that has not been pushed to GIT yet

 

Hi man, again first of all thanks, however i am still running into problems

first of all
x = (int)UIRelative.xPercentFrom(UIxAnchor.Left,Screen.width,0.525f);

x is not used anywhere after wards... so what am i missing?

then i tried to add
private UIButton[] mSceneSelect;

cause it gave me an error that mSceneSelect does not exist in the current context.
but i didnt really get it to do much.

so again any help will be great!

 

hello prime
any chance there is an explanation how to work with the
UIAbstractTouchableContainer

this is a hugh thread and even though i looked i couldn't get an answer.

as i wrote before i am having a problem where i managed to create containers with buttons and move them with another touch of button, but i want to be able to move them with a swipe. when i add a swipe detector, i can do it as long as i dont touch the buttons themselves as on the buttons it will not swipe.

i tried to figure out how to do this using a horizontalscrolllayout but i didn't find how to jump between pages and constrain the swipe to keep the buttons of each container in frame.

thank you. your product is wonderful and amazing. thank you for it.

 

@werneroi, there is no documentation available on how to use the abstract classes. Your best bet is to look at the source of one of the concrete subclasses and see what it is doing. That will provide you with a fully working example implementation. For swipe detection, if you are trying to detect a swipe on an object that receives touches all your swipe detection code must be in that object.


READ THIS IF YOU ARE USING UITOOLKIT FOR A STANDALONE OR WEB PLAYER BUILD
A big change just got pushed that completely removes the UIFakeTouch. It has been tested thoroughly but it is quite possible there might be some sleeper bugs in there so be sure to give your UI's a quick run-through after importing the new version.

 

OK, i will do my best. hope to post a script here soon
thank you!

 

Hi man thank you! it is amazing how a few words set me off the right direction.
what i am trying now to figure out is how to add a pad at the begining of the scrollable, so my first child is position not on the top left but some place differant and the count starts from there.

var scrollable = new UIScrollableHorizontalLayout( 0 );

// we wrap the addition of all the sprites with a begin updates so it only lays out once when complete
scrollable.beginUpdates();

var widthAndHeight = UI.instance.isHD ? 640 : 960;

scrollable.setSize( widthAndHeight, widthAndHeight );
scrollable.pagingEnabled = true;

// paging will snap to the nearest page when scrolling
scrollable.position = new Vector3( ( Screen.width - widthAndHeight ) / 2, 0, 0 );

for( var i = 0; i < 65; i++ )
{
var button = UIButton.create( "ButtonArrow.png", "ButtonArrowDown.png",0, 500 );
button.positionFromLeft(i*2+5,0);
scrollable.addChild( button );


}
scrollable.endUpdates();
scrollable.endUpdates(); // this is a bug. it shouldnt need to be called twice
}

that doesnt work, but i dont know what will.?!
thank you

 

@werneroi, containers use UIEdgeInsets to define the left/top/right/bottom padding. Just set the scrollable.edgeInsets to get the padding.

 

i have a bug in the UIScrollableHorizontalLayout
even when i take the demo scene of ScrollableHorizonalContainerTest
and just change the mario sprite to a smaller button, and add more buttons in the Layout, there will be one that will snap and shift while scrolling.

you can run the code and swipe left 7 times and you will see it.

any fixes?


here is the code:
using UnityEngine;
using System.Collections;



public class ScrollableHorizontalContainerManager : MonoBehaviour
{
private bool _movedContainer;
public UIToolkit textManager;


void Start()
{
// add two scrollables: one with pageing enabled
var scrollable = new UIScrollableHorizontalLayout( 10 );

// we wrap the addition of all the sprites with a begin updates so it only lays out once when complete
scrollable.beginUpdates();

var height = UI.isHD ? 150 : 300;
var width = Screen.width / 1.4f;
scrollable.setSize( width, height );
scrollable.position = new Vector3( ( Screen.width - width ) / 2, -Screen.height + height, 0 );
scrollable.zIndex = 3;

for( var i = 0; i < 20; i++ )
{
UITouchableSprite touchable;
if( i == 4 ) // text sprite
{
touchable = UIButton.create( "emptyUp.png", "emptyDown.png", 0, 0 );
}
else if( i % 3 == 0 )
{
touchable = UIToggleButton.create( "cbUnchecked.png", "cbChecked.png", "cbDown.png", 0, 0 );
}
else if( i % 2 == 0 )
{
touchable = UIButton.create( "playUp.png", "playDown.png", 0, 0 );
}
else
{
touchable = UIButton.create( "optionsUp.png", "optionsDown.png", 0, 0 );
}


if( i == 1 )
{
var ch = UIToggleButton.create( "cbUnchecked.png", "cbChecked.png", "cbDown.png", 0, 0 );
ch.parentUIObject = touchable;
ch.pixelsFromRight( 0 );
ch.client.name = "TEST THINGY";
ch.scale = new Vector3( 0.5f, 0.5f, 1 );
}
else if( i == 4 )
{
var text = new UIText( textManager, "prototype", "prototype.png" );

var helloText = text.addTextInstance( "Child Text", 0, 0,0.5f,-1,Color.blue,UITextAlignMode.Center,UITextVerticalAlignMode.Middle );
helloText.parentUIObject = touchable;
helloText.positionCenter();

var ch = UIToggleButton.create( "cbUnchecked.png", "cbChecked.png", "cbDown.png", 0, 0 );
ch.parentUIObject = helloText;
ch.pixelsFromRight( -16 );
ch.client.name = "subsub";
ch.scale = new Vector3( 0.25f, 0.25f, -2 );
}


// 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 );
}


scrollable.addChild( touchable );
}
scrollable.endUpdates();
scrollable.endUpdates(); // this is a bug. it shouldnt need to be called twice



// add another scrollable
scrollable = new UIScrollableHorizontalLayout( 50 );

// we wrap the addition of all the sprites with a begin updates so it only lays out once when complete
scrollable.beginUpdates();

var widthAndHeight = UI.isHD ? 500 : 250;
scrollable.setSize( widthAndHeight, widthAndHeight );
scrollable.pagingEnabled = true;

// paging will snap to the nearest page when scrolling
scrollable.position = new Vector3( ( Screen.width - widthAndHeight ) / 2, 0, 0 );

for( var i = 0; i < 50; i++ )
{
var button = UIButton.create( "cbUnchecked.png", "cbUnchecked.png", 0, 0 );
scrollable.addChild( button );
}
scrollable.endUpdates();
scrollable.endUpdates(); // this is a bug. it shouldnt need to be called twice
}
}

 

@werneroi, paging enabled horizontal scroll views require that all children are of the same size and that the container itself is appropriately sized for the content.

 

ok, so i guess i am missing something.
1. in the script all the children are the same size. i dont know what you mean by
"that the container itself is appropriately sized for the content. "

what is the math for that?

i tried to add horizontalLayout as a child so i can scroll between containers but it didnt work out for me.
any ideas?

tried to added a picture but didnt work so here is a link which might explain abit
https://docs.google.com/file/d/0B7vqGFtIbPvQTncyWFlpVUNuZDQ/edit

 

@werneroi, have a look at the demo. It is using a 500px width image (250 for SD) and it sizes the container to fit that image. If you dont need paging then you can use a non-paging enabled container. Spacing can probably be easiest achieved by making a UISpacer object with no texture or verts. I'll add that on the todo list for the next update but it should be pretty trivial to make.

 

thanks , i will do my best

 

@werneroi, here is a mostly untested implementation that was just pushed to the repo and added to the demo scene: https://github.com/prime31/UIToolkit/commit/f76951f60d8972524c995d86d1b15b2456ea3bcc

 

Hey, i'd just like to comment again on supporting for a range of resolutions through the apple devices. So from iPhone3GS to the iPad3. Since we essentially have SD, HD and pretty much 2x HD for iPad3, whats the best way to handle this?
I recall someone saying have another atlas specifically for iPad3, and use SD for the lower res devices, HD for iPhone4 and iPad2, and then the third atlas purely for iPad3.

If this is the case do all the atlasas need to be twice the size of the previous atlas? i.e.
SD would be 512 x 512
HD would be 1024 x 1024
2x HD would be 2048 x 2048

Would this apply for each of the sprites as well? So a 16 x 16 sprite on SD would be 32 x 32 on HD and then 64 x 64 on 2xHD?

Cheers!

 

@default, I just pushed changes today including a new scaleFactor that are the groundwork to be able to support any multiplier (2x, 3x, 4x, etc). There is no automagic texture chooser for anything other than 2x yet but once everything is changed to use scaleFactor it becomes easy to add the support.

 

Ah that's excellent! Thanks. I'll check it out. I assume theres quite a few lines that need to be changed to take the scaleFactor in affect?

 

@default, I'm not quite sure yet. I got a bunch of them already but I'm sure there are more to find.

 

@Prime:

Do you know if anyone successfully supported the trimming feature from the TexturePacker exporter? I feel like this would be really beneficial for those who are trying to keep their texture memory size down. Thanks.

 

That would also be amazing. As well as supporting auto rotation.

 

First of all, I'd like to say thanks for releasing such an awesome product.

I'd like to contribute if I can, on the open source project, but right now I'm facing a big challenge.
I want to make horizontal layouts compatible with the scrollable vertical layout.

I'm trying to make a shop for IAP, with multiple horizontal elements to scroll in the same window together like this:

---SHOP---
[scrollable area]
[picture] text [buyBtn]
[picture] text [buyBtn]
[picture] text [buyBtn]
[scrollable area]

I really have no idea of how I'm supposed to make this work. I'd appreciate any help, maybe others are interested in a similar thing

 

I am having some difficulty again and have run out of things to check. I have a giant 4096 x 4096 texture atlas from texture packer. Yes I know this won't play on my android. So I want to, in unity, scale the texture to 2048 x 2048. When I do this the positions of the graphics in the texture packer file get misaligned and what should be a play button is now part of the BG or another button etc.

I checked the demo scenes and tried rescaling them and they work fine so I am left wondering why then does my project not work correctly. Any ideas or solutions would be awesome! I would do 2 texture packs but I'd rather have 1 and even if I had 2 and wanted to scale them down in a similar fashion it still would not work so.

I had also asked a question awhile ago about continuous buttons I'd like to say I found the solution. The problem was that I was declaring my variable incorrectly. UIButton instead of UIContinuous, or something to that effect.

Thanks for all the help and info anyone can give me! I appreciate it greatly!

Cheers,
Jason

 

An Additional point is that the demo scene KitchenSink scales appropriately but the demo scene color picker does not, same as my scene.

Anyone have any ideas? Do the variables have to be created in Start() ? as in var whatever = blah blah ? or can it be created ahead of time - var whatever:UIButton; and then in start be used as whatever = UIButton.Create etc etc ?

Jason

Ok, so after inspecting the demo scenes a bit closer, it seems that the texture sheets can be resized up but not down, is this correct?

thanks!

 

Round and round we go... ok so I have scaled my texture sheet down 1/2 size but now I need to upscale all my UI items 2X is there an easy way of doing this to all my UI elements? instead of each one one at a time by doing playBtn.setSize( playBtn.width*2f, playBtn.height*2f);
??

thanks!
Jason

 

Hello,
I'm moving my first steps with this very useful plugin but I already stumbled unto something I need some help with

I'm trying to have a set of progress bars in my game and the provided kitchen sink scene works perfectly. I stripped down all the script/scene to have only the progress bar displayed and that still works as expected.
Then I did my own texture map with TexturePacker, published it according to the video tutorial in json and png formats and imported them into my scene. The texture type is set to GUI and used for the UIToolkitMaterial instead of the kitchenSink one.
Now, when I update my script to reference any of my sprites in the map (and, of course, I also update the UIToolkit TexturePacker Config Name accordingly) all I get is a "NullReferenceException: Object reference not set to an instance of an object" error.
If I revert back to the original kitchenSink map and names, it works again.

Any idea where I could have gone wrong? What am I missing?
Thanks for any insight!
Rob

 

Looks like it can't find the sprites you're reffering to. I bet it's something with your texturemap configfiles.

 

Most likely, but my json file looks as good as the original kitchen sink one (i tried also by renaming it as .txt). Is there any other config file I'm missing?

 

I'm not at home right now, will get back to you if you can't figure it out. I think i have a total of 3 files in one "set". Two txt and the imagefile.

 

Following from issues with Android compilation, please see: https://github.com/prime31/UIToolkit/issues/98#issuecomment-5732477

This seemed to solve the build problem for me.

 

Hi,
Just wanted to say I re-did everything from scratch, step by step, and now it works... unless I'm just dreaming of it as it's almost midnight over here!
I'll keep working on this tomorrow.
Anyway, thanks!!

 

Bug with the new UItoolkit release?!

I guess i am having a bug and since no one complains about it i wonder what it might be.
but as i am utilizing the new (Awesome addition!!!!) of the Uispacer, i have a wierd aftereffect on the first button in the UIHorizontal.
i am using the same gfx for all my buttons and they all look great except for the first one. this is even when i load the demo scene in a new clean project.
any ideas? should i upload a picture.
thanks!

 

I found a way of aligning things horizontally in a vertical scrollable layout, like I mentioned in my previous post.
It was actually in the example scene, I just made the horizontal objects nested and used pixelsFromRight().

I do however have another issue with the vertical scrollable layout, that I just posted on Git Hub.
https://github.com/prime31/UIToolkit/issues/108

 

is there a way to find out what "page" number i am on when i have
"pagingenable = true " on a horizontalscroll bar?

 

Is there a way to have a uibutton that has a highlighted sprite a different size than the normal sprite, yet still remains the same size when it is clicked on? Currently, I have two sprites that are different sizes, because one has more pixels cropped from it than the other, but the sprites themselves are essentially the same except for a color change.

 

Am I correct to assume this form of GUI runs smoothly on mobile devices? Not like Unity's standard GUI right?

 

@icewater Yes that is right, because all GUI elements are combined into a single draw call which seems far more efficient. I noticed a pretty good performance improvement when I switched over!

 

@AbsurdHart

how about trying to change the value in the atals.txt, it is kind of cheating but can work quickly.

 

I'm not the only one experiencing major layout issues with UIToolkit on iOS and Unity 3.5.2, right? Majorly messed up.

 

@mathiassoeholm, the push from yesterday fixes the scrollable bug


@WiW, it works fine for me. 3.5.2 didnt change much if anything with regard to the rendering pipeline that UIToolkit uses.

 

Prime, it's related to the orientation bug introduced in 3.5.2: http://forum.unity3d.com/threads/136088-How-to-Fix-the-3.5.2-Rotation-Problem

 

Thank you!! This worked great!

If anyone else out there is looking to have multiple UI layers with a game layer in between, please note the following:

* The UI script creates a new camera for each UI layer that you create. With my example, I have 2 UI scripts, each with associated UI Toolkit children.
* You will need to create new user defined layers for this. I created 3 user defined layers: UI Layer #1 (assigned to User Layer 10), Game Layer (assigned to User Layer 9), and UI Layer #2 (assigned to User Layer 8).
* Apply these layers to your UI scripts (and associated UI Toolkit children) and to the Main Camera in your scene.
* The UI script takes care of the necessary settings, but you do need to set the draw depth in your inspector for the 2 UIs. In my example, I set UI Layer #1 to 40 and UI Layer #2 to 30. Note that the larger draw depth number will be in the front.
* For your Main Camera, set your draw depth to a number in between the 2 UI draw depth numbers. For my example, I set Depth to 35.
* Be sure to remove both UI layers from your culling mask on your Main Camera.
* On your Main Camera, change the Clear Flags setting from the default Skybox setting to Depth Only.

Now, I have a nice moving UI layer back behind my game objects and my UI buttons on top of everything. Fabulous!