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

@namoricoo, did you download the .unitypackage from the Download Packages section? it seems to work fine for me...

 

Here is a screen shot. I had no problem with the previous version. I downloaded the .zip file.

 

That looks like a possible permissions issue with your project folder. See if the Unity editor log has any useful information.

 

Ok, When I downloaded the Unity Package a couple seconds ago, I get no more errors. It's the .zip file that's the problem. UnityPackage is fine. No errors or warnings. However, the mouse over works. Mouse down picture is still not changing. Now, I have to get to work. I'm already running late.

 

Easier to organize, yes but not having to have the standalone code compiled or present in the mobile binaries is worth the extra effort

 

Thank you for contributing this code. My team is doing some early prototyping and UIToolkit has helped us get an efficient UI up and running quickly.

What I'd really like to see is the ability to setup the UI layout in the editor. It would make it even easier to quickly setup your layout. I've been thinking a bit about the ideal architecture for such a system but wanted to see if you had any thoughts on it first, Prime. I'm thinking about trying to add this functionality.

 

@Shiny, a while back I visited the idea of doing exactly that but ended up abandoning it for a variety of reasons:

- event handlers would have to be strings and called with SendMessage
- dealing with multiple screen sizes and densities along with the relative positioning proved to be difficult to say the least
- handling multiple texture sizes is also quite challenging

If it were a single texture atlas and a single screen density it becomes much easier but unfortunately we have many combinations to consider. All that is not meant to say it can't be done bit for me personally the time investment would probably never equal the time savings. If you can pull it off I would love to get my hands on it though

 

Yeah, that doesn't sound fantastic. Though you could set it up such that the user must register events in code still and the editor is only used for instantiation and layout.

I'm imaging this would be handled the same way it is currently. Instead of using an absolute position you'd have to set your relative position - to either a containing object or to the top/side/etc. of the camera frustum. How that is visualized correctly in the editor is something I'd have to research but I think it could work.

Can you elaborate on that? Is it not possible to render elements from the same atlas used at runtime? I'm not super familiar with Editor extensions and would have to research that too. Ideally I'd want it to render using the same material/texture path as the runtime.

 

@Shiny, you can render using the same textures. There are 2 with UIToolkit if multiple dimensions are supported so I guess you could just pick one or the other based on screen size.

 

Hi, Thnx for sharing the procedures on how to add a UIText, I finally got it up and running.. New problem here.
At first It's all running smoothly, but after I instantiate and destroy the same object which doesn't have any connections with the gameObject where UI script is attached, or even the script that I wrote to display buttons and sprites, I receive this weird error. I tried to comment the line on the script that I wrote -> coinLabel.text = "0000" then everything works fine, no error at all.

 

@angel, somewhere you have destroyed the UI object and then tried to access it. Find that place and you will find the bug.

 

You didn't say anything about the mouse down Not working when the mouse over script is present. I'm looking to encapsulate the mouse over in order to standardize it like the other functions. So that we can have something like.

UIButton create( string filename,string mouseOver,string highlightedFilename, int xPos, int yPos )

 

@namoricoo, it works fine for me. Try the KitchenSink demo scene. There is one button with an over state hacked in (the playButton). I will say that it is possible there are some interaction bugs present with the hover state. My original quote was (emphasis added):

I generally live in the mobile world most of the time so all the features I personally add to UIToolkit for my own projects will almost always be mobile related. Those folks out there who publish to web/standalones can crush any bugs with the current hover implementation and send over pull requests.

 

I've implement 90% of the code, I was just stuck in the last 10%. I won't bother you anymore. I was just looking for a simple if statement... if(IsMousedouwn==true) , I think you call is _highlighted. If protected, I was looking for a static functions

 

Hi Prime31!

Thanks so much for providing this great system! It's made the project I'm working on come along really well in the UI department but I've run into a bit of an issue. I have a sprite with a transparent area that I want to layer on top of another sprite and have the bottom sprite animate. However the bottom sprite never shows through the transparent area of the top sprite. I've also noticed that changing the alpha of a sprite will allow the Unity scene to be seen underneath, but not other UI elements from the toolkit. Any ideas on what might be causing this? Thanks!

 

@Kevin, try the alternate shader (or modify the current one). One does alpha testing and the other blending. You will want blending for your case.

 

Thanks, Prime!

I'm using the default, alpha enabled shader. I took a look at the shader and while I'm not overly familiar with how shaders work, I believe it uses alpha blending. It has the line: Blend SrcAlpha OneMinusSrcAlpha which the Unity docs define as alpha blending. I've found that if I define the sprite that should be on top after I define the one underneath the transparency works correctly so I'll just keep that in mind going forward.

 

OK, now I've run into another issue. I had this working at one point, but for some reason it's broken now. I'm trying to create a vertical list of buttons that the player can scroll through. I'm creating the buttons in a for loop but for some reason they aren't responding to touches (or clicks when played in the editor). Here's the code:

Code (csharp):

1.  
2. for (int i = 0; i < numberOfButtons; i++)
3. {
4.     buttonName = "s"+ i.ToString("D2")+".png";
5.     pageButtons[i] = UIButton.create(buttonName, buttonName, 0, 0);
6.     pageButtons[i].positionFromTopLeft(i*0.338f, 0.05f);
7.     if (i == 0)
8.     {
9.          pageButtons[i].levelNameString = "mainMenu";
10.     }
11.     else
12.     {
13.          pageButtons[i].levelNameString = "scene" + i.ToString();
14.     }
15.     pageButtons[i].highlightedTouchOffsets = new UIEdgeOffsets(10);
16.     pageButtons[i].onTouchUpInside += delegate(UIButton sender) {
17.          Debug.Log("pressed: " + sender.levelNameString);
18.     };
19. }
20.  

levelNameString is a variable I added to the UIButton class to help define the level the button should load. All the buttons load the correct image and when I look at the edge offsets in the Editor I see them properly displayed around each button. However, the first 3 buttons don't respond to input and then only every other one does. Is there a different way I should go about creating these buttons? Thanks!

 

@Kevin, that looks OK to me. Have you tried using the displayTouchDebugAreas in the UIToolkit inspector?

 

Hi, yeah I deleted an Object with UI script attached but that is different with the first gameObject. Could it be that we cant create 2 gameObejcts with UI script attached? *_* or we can, but deleting the other one will mess up everything.

I have an idea that, maybe I could just combine the 2 UI on one script showed in one camera.. I was thinking of using the UIVerticalLayout or the horizontal one, to separate the two group of gui. But it seems to be that the UILayout and UIPanels only follow a list like positioning? The objects that I added to the Layout/Panel as its child, when displayed on the screen, ignores the separate position for each.

Code (csharp):

1.  
2. inGameGUI1 = new UIVerticalLayout( 20 );
3. inGameGUI1.addChild( button1, button2, button3);
4. inGameGUI1.pixelsFromBottomRight( 10, 10 );
5.  

Code (csharp):

1.  
2. inGameGUI2 = new UIVerticalLayout( 20 );
3. inGameGUI2.addChild( button4, button5, button6);
4. inGameGUI2.pixelsFromBottomRight( 10, 10 );
5.  

Code (csharp):

1.  
2. button1.positionFromTopLeft( 0.28f, -0.04f );
3. button2.positionFromTopLeft( 0.39f, -0.02f );
4. button3.positionFromTopLeft( .015f, .3f );
5. button4.positionFromTopRight( 0.15f, -0.04f );
6. button5.positionFromBottomRight( 0.15f, -0.04f );
7.  

Do I need to change or modify some property on the layout/panel?

 

@angelann, there can be only 1 UI object. It can have as many UIToolkit objects under it that you want. A couple new panels were donated earlier today so be sure to grab it.

 

Hi,

I turned on that option and I see the touch areas around all the buttons. The buttons that work also show updated touch offsets when clicked, but the ones that don't just show the standard touch area. The entire screen has a border around it and there are 2 rectangles in the lower right corner that take up about the entire quadrant. Is all that normal?

 

The border is normal while in the editor. With gizmos off you shouldn't see it in the game view though. I can't think of any reason your buttons wouldn't be touchable...

 

Hi guys. I'm a bit of a newbie, so please bear with me.

I've never worked in C Sharp before, and I'm a little lost with how to use the events from these buttons. I've got my UOToolkit all perfectly setup, and I've got my buttons all in place. What I can't figure out, is how I actually drive things with them. I'm an ex web developer and would usually just use script like onMouseOver(someObject.doSomething), but I'm kind of out of my depth here. I've watched primes youtube video on events and delegates, but my brain exploded. My girlfriend is still cleaning it off the wall.

Could I trouble anyone to walk me through how to, for example, move one button across a screen, when another button is pressed?

I'm building my buttons in a script of mine called UIManager, do I create events and delegates in there?

 

@danger, once your girlfriend gathers up enough of your brain have a look at the KitchenSink demo script. It has event handlers and animation examples.

 

Aha! Fantastic, thanks Prime. I saw animation examples and stuff in there, but I didn't realise there were events as well, completely my bad. Sorry about that.

I have some experience writing tutorials and technical documents, how would you feel about me creating something basic for UIToolKit and how to use it? (Once I've mastered it of course)

 

@danger, the more the merrier. We made a couple videos and there a couple from the community but everyone thinks differently so the more angles the info is delivered from the better.

 

Hi again.

I've almost got my whole interface built, and figured out how all of the components and events work, but there's one part that's tripping me up.

With the events, onTouchUpInside for example, you use =+ to assign a function to be run. Am I correct that it can only be a function, not a statement?

Whereas onComplete, following your examples, you have used = () => and then a statement.

Now, I'm pretty confused. I would like to just use a stement for on onTouchUpInside events, and would like to run 2 statements in the onComplete event. Is this possible without writing a small function for each case? If thats the case, then I'm willing to write the many many helper functions I would need, but I'd like to better understand what's going on here, if anyone is able to help me.

Thanks

 

@danger, you can do all of what you want to with Actions. If you don't have a good understanding of them I suggest you watch the video tutorials we made on http://p31.cc/docs

 

I notice there is a white outline on all my buttons and sprites. Am I missing some steps or because I am using a free version of the texture packer?

 

@activate, you need to set your textures as true color.

 

Thanks for the quick reply. Will give it a try. =)

 

Hi,

Yesterday I have tried our game on iPad2, unfortunately I got a black screen as the gui but our UITooolkit gui works just fine on retina and non-retina displays. I have also tried the in-game levels and they work without a problem. The compiling and installing take place without any problem, and after the Unity logo I just get a black screen and no error.

Edit: I have decided to make tests with a simpler scene. Unfortunately this didn't work. I can see the gui in Unity's Game window but on iPad, there is nothing.

Code (csharp):

1. public class test : MonoBehaviour
2. {
3.     public UIToolkit common;
4.    
5.     void Start ()
6.     {
7.         UISprite splashScreen = common.addSprite("ENR_2DA_GUI_MLS_MainLoadingScreen00.png", 0, 0);
8.         splashScreen.setSize(Screen.width, Screen.height);
9.     }
10. }

 

@zehr, UIToolkit never checks for the device it is running on so I would suggest checking your code for any iPad detection to see what might be happening or check the Xcode logs. Also, if you used a different sharer ensure it doesn't run into the iPad 2 rendering bug mentioned in another thread.

 

is this for iOS only?

 

I'm using it in Android but you'll need to add resizing support (if you want).
Also it works in Web and StandAlone I think the latest git release added hover support for buttons.

 

When I create a new UIVerticalLayout it needs a given spacing but how do I give it one that will double when the UI switches to 2x?

 

@frank, good find. Maybe make it a property and add a doubler for when in 2x mode and then shoot over a pull request so we all get the goodies!

 

How do I check for 2x mode?

 

@frank, there is a parameter in the UI class

 

Just want to take a moment to say UIToolkit rocks my world \m/ O \m/

My framerate is more stable, over twice as high, and all with a more complex gui.

Thanks so much prime for the toolkit, and all the help you provide here. You've got a loyal customer here, and i'll be looking into some of your other plugins in the next few weeks.

When my GUI is finished, in the spirit of community, I'll be writing some doc's for this, since my coding isn't good enough to add any value to the plugin itself.

Peace out

 

@danger, glad your liking it! Make sure to send a link over to questions@prime31.com when you get your game released.

 

I was using PositionFromTopLeft() to position a UIVerticalLayout but it seems to end up placing its child, a UISprite, out of alignment with the actual screen pixels due to the percentage nature of PositionFromTopLeft(). So I'm now trying to use PixelsFromTopLeft() and having the ints multiply by 2 when in HD mode but this for some reason isn't working right. When I, for instance, call PositionFromTopLeft with the values (20, 0), it looks right in non-HD but when it switches to HD and that 20 becomes 40 then the sprite ends up somewhere that looks like 50 instead. @_@ I can't seem to figure out where I'm going wrong. T^T Is it positioning it such that the space is between the top of the screen and the top of the UISprite or is the space between the top of the screen and the middle of the UISprite?

 

Oh my god... I'm nuts... it automatically changes the PixelsFromTopLeft() to 2x and I was doing that AGAIN... *eats gun*

 

What resolution should the various demo's be run at? When I run demos like the kitchen sink on windows, the textures look bad. I tried a variety of resolutions (1024/768, 4:3, 19:9, etc). All the controls look very jaggy, with weird edges (see below). It's possible the textures are bad, but this seems too bad to be passed off as an artist problem. And, since building nice looking GUI's was a major part of this whole thread, I was frankly kind of surprised.

Did I do something wrong? Wrong version maybe? I did not pull from git directly, I used the pre-bundled .zip file on the home page.

(Details - Win 7, Unity 3.4, Variety of resolutions, Kitchen Sink Demo, downloaded as the zip on the github front page).



Gigiwoo.

 

@frank, it can be sneaky at times

@gigiwoo, the kitchen sink sprites are junk quality. You can get rid of the artifacts though by just setting the textures to true color.

 

Does the GraphRequest assume you've already logged in?

Currently trying to figure out how to log in as a test user. From there I'll be trying to use the
Graph Request to access his data.

 

@prime31 - You're right. I went into the textures and they are in fact just junk. I edited the skull texture, as an example, and it got a lot better. I even checked out with git (using clone), though I'm embarrassed to admit that I don't know how to update or I would submit the change back (git is definitely NOT the same as SVN).

Question - how do you set the colors to 'true color'?

Gigiwoo.

 

Whoops, that last post was meant for Social Networking.

 

@Gigi, there is a setting in the texture for each platform that let's you override it to truecolor. Once you learn Git (and it doesn't take much to learn it) you will hate SVNs dumb way of doing things for the rest of your days. To make it dead simple get the Github app. Soooo easy to use.