GUIKit001 - Plug and Play Interface for iPhone, iPad, PC/MAC

GUIKit001 is a complete plug and play interface. See it in action here on GameAssets.net

* Stunning design (200+ hours of work by a professional GUI artist + designer)
* Fully customizable (all PSD source files are included - slices are set up for easy export)
* Works in all orientations (or just the ones you want)
* Retina-ready (automatically switches to double resolution on iPhone4)
* Works with touch or mouse input, on iPhone, iPad, PC, Mac and Web! (No double-coding needed to get it to work on all those platforms. This is possible through platform dependent compilation, a new feature in Unity3!)

In addition GUIKit001 includes the full SwipeControl and GUISkin001 components!

Good interfaces are a lot of work and indie-developers have limited resources. So we set out to make this a fully functional, yet easily affordable solution that is easy to integrate and easy to customize, so that everyone who uses it can focus on making their game.
And we're not just coding things we think will sell, we made this because we need it ourselves. - GUIKit001 is going to be used in our next game and all improvements we develop further down the road will be put back into the kit and made available as free updates!

Get it on GameAssets.net

PS: GUIKit001 uses (and extends) UnityGUI. A complete GUISkin for UnityGUI is included in both normal and retina resolution. An extension script adds new functionality like iOS-style sliders and binary toggles, so you can do everything that UnityGUI can do and more! (Examples included)

 

@col000r - Just a couple of questions before I hit the buy button.

First, how is the performance? Is each element a separate drawcall? Can your system be used in conjunction with something like EZGUI?

How about layout? Can you give us an example of a small GUI layout so we can see what the code looks like?

 

This looks pretty cool, interested in your answers to the above post.

Will you be doing an introductory price like Brady did for his Offerings? A bit of an early subscriber discount for the first folks to pull the trigger is a mighty nice gesture...


B.

 

Hey, thanks for your interest!

GUIKit001 uses and expands on UnityGUI, so it's not all one drawcall, but it runs well on anything from iPhone3G and up. (our universal demo app is about ready to be submitted to the AppStore, so soon everyone can try it on any device)

Let me try to outline the main differences to EZ GUI: EZ GUI is a toolkit that let's you build your own GUI - GUIKit001 is already a fully functional and well-designed GUI that is easy to customize. Level selection, settings, online news, credits - it's all working, looking good at every angle on every retina- or non-retina-device and ready to be shipped with your game. So if you want something similar to what you can see in the video and don't want to spend 200+ hours building your own implementation from scratch, take GUIKit. You just need to replace some graphics and adjust some settings and your game is good to go without you ever having to dig into the GUI code. If you want to build something completely different from scratch however, you're probably better off with EZ GUI or our GUISkin001/SwipeControl components (if you prefer to work with UnityGUI).

And just so it's not all text: here's a screen of the debug menu that let's you play with angles, background transparency and switch between retina and non-retina resolution images: iPad Screenshot

@brendang: alright, wouldn't want to appear heartless - 25% off for the nice devs on this forum using coupon code IWANTGUI (valid for one week)

 

Any plans for this to work with Android?

 

It should work on Android already, but we didn't have an Android device to test on, so we didn't mention it on the website. If you run into anything we'll try and fix it of course!

 

Bought it. Compiled and tested it for iPhone3GS, iPhone4 high res, iPad, Android (Google Nexus One) and Mac - worked flawlessly on all devices - even rotation worked as expected on Android
Great work!

With regards to draw calls - the current layout max out at around 28-29 draw calls. However, for regular menus - that is no problem for any of the devices I tested it on.

However, a more serious issue is that UnityGUI don't really work on iDevices - missing some button presses and highlights that is acting strange.
But this is not really related to this package - but rather UnityGUI not really working 100% on iDevices. Put some pressure on Unity to get this fixed!

 

Thanks a lot - very glad you like it!

We've reported bugs about all the issues we found along the way - the most critical ones have been fixed already and I'm pretty positive that they're working on the rest! But I'll keep nagging until it's fixed!

Unfortunately the iOS4/C++ thing has caused UT to delay the promised upgrade to the GUI-system, so we might have to live without GUI-atlases (and thus: with more drawcalls) for a bit longer. But as you mentioned, that's not really an issue for the menu and it still runs well on all devices. Just go easy on the background transparency for the in-game-menu until 4.1 (or so) if you have drawcall-heavy scenes. (For Age of Curling and Battle Bears we reposition the camera to look into nothingness when the menu comes up, since they're both pretty draw call-heavy games)

 

You might get more exposure if you post this in the "Collaboration" forum. I don't develop on iPhone so I missed this until today. Nice skin design, any others in the wings?

 

Good idea, I'll make a post on the Collaboration forum as well!

We've got quite a few design-ideas lying around, so I'm sure we'll finish another skin sooner or later.

 

I'm really surprised there aren't more 3rd party skins available. Not that it's particularly hard to design a skin, but it does take time and designing a good one definitely takes some skill.

 

I'm surprised as well, but we'll gladly try and fill that void over time... :]

 

The webplayer demo is available now! (using the Unity 3)

Check it out here

 

I'm really interested in this but a little concerned over the level of customization on offer.

How do those buttons function in terms of the action code attached to them? Is it simply a matter of attaching a Unity JS/C# script to the button to define what happens when it's pressed for example?

Looking at the main menu in the web player demo, say I wanted to change the background image, replace the "Start Game" button with a "New Game" button and "Settings" with "Continue Game" (for example), is all of that easily done?

 

The background image, the names of the buttons and all images can be changed through the inspector, so no need to go into the code. (An overview image that explains all the inspector settings and splits them into sections is included, so everything should be quite easy to find.)

If you want to change what happens when you click a button you have go into the script. (It's all JS at the moment, but if there's enough demand it would be simple enough for us to port it to C#) It's commented all the way through, so it should be straightforward to find the right place for your changes, but the difficulty will of course depend on the kind of modification you want to make.

Examples:
If you want to change the animation in between screens, you just need to change some values.
If you want to change the level selection to something completely different, you need to replace that code in OnGUI() - I'd advise that you go through the whole script once to understand how we deal with retina displays before you add your code. (basically you just need to add your rects and images in the right place and the same GUI-code will work everywhere)

We even included a document that explains our suggested workflow for modifications as well as a PSD with the full default design to make it as easy as possible to plan modifications and extensions.

So GUIKit001 is a fully functional GUI that you can set up and style without ever having to dig into the code, but it can just as well be used as a very solid starting-point for your own UnityGUI-based interface.

 

I have a project completed less the menu system. Can I use GUIKit001 with 1.7 Pro or do I have to have 3.0 Unity.

I am waiting for 3.0 Pro (have it pre-ordered) to become stable, but I have to get this project out by the end of the month and it is in 1.7 Unity Pro.

Thank You......

 

The short answer is no, GUIKit001 was made for Unity 3 only.

The long answer is that it could probably work on 1.7 as well, but would require some rewriting. The SwipeControl component is available (and included) for 1.7, so replacing that will be the easy part. The GUISkin is only included for 2.6 and 3.0, because there's a bug in 1.7 that breaks the iOS-style sliders and binary toggles. I didn't check if GUISkins from 2.6 open in 1.7, but if they do the rest of it should work. In the StandardGUI script you'd have to remove all the platform dependent compilation stuff and rename everything that changed between 1.7 and 3.0 (like iPhoneInput.touches > Input.touches, etc.), you'd have to replace the sliders in the settings with something else as they won't work on the device (due to the aforementioned bug in 1.7).

Since you can't start working from the demo, you'd have to set up all the images and stuff. Oh, and change the line

Code (csharp):

1. var guiMatrix : Matrix4x4;

to

Code (csharp):

1. var guiMatrix : Matrix4x4 = Matrix4x4.identity;

- so the matrix doesn't start from 0 (which wouldn't work) - I set this manually in the demo project, but this change will be included in the next update as there's less potential for error this way.

All in all I'd say it's about a day of work, maybe a bit more if you're not familiar with the code. No promises though with 1.7... If you want to try it and can't get it to work, I'll put you up for a refund of course.

 

No bad...

 

I purchased the SwipeControl and have it implemented in a number of different ways so far.

Thank you for the detailed answer about 1.7 and 3.0. I will probably purchase the 3.0 version, rip out what I need for this project, then use it for my next project since I will be using 3.0.

Look forward to using your components, they save time and work as advertised.

Thank you...

 

Glad to hear. No problem. Thanks a lot! :]

 

I gave it a try, too, i´ve already got a quite indepth menu system myself but the auto rotating gui and game view teased me =)
Overall this gets a positive rating from me, it still has some issues here and there but besides these quirks is already in nice shape, lots of nice functionality and hence potential for even more.

To give a more in depth feedback:
What i like a lot:
-Its a very nice starting point for an OnGUI based Menu System, it has a lot of the menu functionalities one would probably use regularly and what i personally like best is the auto rotation handling of both the gui and game view and the overall nice support for different screen dimensions.


What i think could use some improvements:
-there´s a bug with the pause button which when pressed in wrong moment makes the game get stopped but the pause menu not show up so the game is essentially frozen then (while actually just being paused without menu).

This can happen in a few cases, it can be easily triggered when pressing the pause button right while the scene is just fading in or pressing pause button, quiting out of pause menu, pressing pause button again right away and repeating that quickly.
So its happening because the fade out close menu call of previous menu stuff is triggering closing the pause menu after a time delay and the user had pressed pause again in between so then the pause action is triggered but then showing the pause menu is disabled.
I fixed that for my needs now, just thought i should let you know right away about that one, small but nasty bug =).
(fixed it by removing the "pauseMenuOn= false" in CloseMenu () fn, adding it to close pause menu button handlers instead and adding "if(!pauseButtonBusy !pauseMenuOn) {" to the ShowPauseMenu fn.
So that was a quick fix but i think overall its dangerous when you set the state of such things after a timeout since in between the user could trigger some action that then gets messed with that timeout going on.


-Next up i don`t know it that´s a bug or wanted behaviour but when one goes back to the titlescreen from ingame the old scene content is there instead of the content of the titlescreen scene, changed that, too for my needs.

-I like it more when the setup is more layered with 2-3 cams for background and fg gui so one can have bg gui layer, scene content, fg gui layer etc

-I´m not sure i like it that all gui stuff is for the most stuff in a single script, i kinda find it more resuable and easier to expand when each menuscreen content would be in its own gameobject with a script of a guiMenuScreen class instance or similar. And then different menuScreens could have some additional props like own custom bg etc.

Well, i´ve got many more thoughts on this but my reply is already long enough as it is =)

For those wondering: My suggestions and "complaints" might sound all too negative but i actually only take the time to post them cause besides those this is quite useful and hence i thought it might be worth suggesting things to maybe further improve the thing which is already quite nice in functionality =)

 

So that level selection screen - is that not just static images being used on the level "icons".

Ugur refers to it as a "Game view" - it's not actually reading the level's scene files and doing a render to texture or something is it? Cause that would be cool...

 

The guikit has a few menu screens: titlescreen, credits screen, options screen, level selection menu, pause menu.
The level selection menu is a swipe paging menu like the iPhone paging menus, so one can swipe left and right to choose different level images and then press the play button to start that level.
The level images are just images, no textures of scenes drawn there via render to texture etc.
What i was refering to when talking about the game view was that when one actually chooses one of the levels and starts it it switches over to that scene and then when one rotates the device around, the game view (so the 2D aswell as 3D content in the game scene and view) gets rotated around fitting to device orientation in a smooth transition.

Most (including me) had usually for unity games a device orientation handler code snippet which would just make the view hard switch over to another orientation when the device was fully turned around, so no smooth rotating transtion to it, so yeah, that´s why i most liked that part =)

 

Thanks for clarifying that. I get what you're saying - that does sound like a neat "bonus" feature of using this system.

 

Actually - I have one additional question about this system. Sorry

How easy or difficult is it to add additional "screens" to the menu system.

For example, say we have the first screen with a "New Game" button, in my game I need to then present an additional screen with some GUI controls that enable the player to name the game characters, and generate some stats for them. Is that something that I can do without too much drama?

 

It depends on the workflow you prefer =)

If you´re fine with just adding it into the same script in which the other menu screens code is , then yes, that can be done quickly and i guess depending on how fast you´re with getting into it it shouldn´t take a lot of time at all.

If you´re anal like me about it and want each menu screen content to be in its own script, have that extend a menuscreen base class for the shared functionality, add various custom functionality on top like scrolling list menus, mix 2D and 3D content in gui etc, well, that takes some refactoring =)
I started yesterday and i should be done with it in the evening today, so yeah, not bad either.

 

Thanks again. I really appreciate it. I think I'll pick this up and see what I can do with it.

 

cool.

 

Purchased. Not entirely sure on how to easily add it to an existing project though?

There's the Unity package that seems to only contain the demo project ("GUIFeatures" scene), and there's the working menu system that's used for the web player demonstration, but that's a project in itself - not easily added to another project from what I know - which admittedly isn't much

 

Yeah, it would be nice if the features project was added as project, too, not just as package and also if the standard gui project was also added in package form, not just as project folders. Its just a convenience thing though as it is very quick and easy to get one from them other. You can just open the standard gui project, select all the assets in the assets pane, right click, choose export package, do that, then go to your own project and import that package.

 

I created a Menu Lab Project, took all of the art from my completed project and have been working on it in there.

When I have it the way I want it, I will integrated the pieces into the place holders I have in my completed project.

This GUI will be a real time saver on my next project.

 

Thanks a lot for all the feedback!

@ugur: Thanks for reporting the pause-button issue! I'll fix that.
And you're right, it should probably load back to scene 1 when you quit, just in case you want the menu to be see-through.
We thought about splitting it into multiple scripts, but in the end decided to have everything in one script so the it will be out of the way for people who just want to add this and not worry about it much.

@geppetto: That does sound pretty cool! but I guess most people will want to choose the level-images manually instead of just getting the first thing the main camera sees in each level. Still thinking about doing an Editor-script for something like this though, just because it would be really cool... I guess it could be done by doing a render to texture, multiplying an image with border and shadow, adding another one with glow and shine and then applying the correct alpha from a third image.

@adding new screens: Adding your code right into the script would be the easiest solution. We wanted to keep this at a level where you don't need too much coding experience to go in and change some things here and there if you need to. A class-system with inheritance would be a lot harder to get into, but it would be more flexible of course. We have been talking about writing a C# version of StandardGUI, so since C# is somewhat more advanced than JS, maybe we could make that one class-based instead of simply translating it from JS? (Well, only if there's demand for that... so please speak up if you're interested!)

 

Alternative way of fixing the pause button issue:

Replace Line 1459

Code (csharp):

1. if(GUI.color.a < 1.0 ) {

with this:

Code (csharp):

1. if(GUI.color.a < 1.0 || mainMenuOn || pauseMenuOn) {

 

Ahh... I've never tried making a package for anything. Didn't realise it was so easy! Thanks once again

 

@col000r: cool on the pause button fix
Regarding the C# version and going for seperated menu screens and class based:
Me personally i´d like the class based seperate menu screens side, i´m doing that for myself now, i agree with you though that for less experienced ones it could be more approachable with single script setup.
Regarding C# side: dunno, can be cleaner and leaner on some ends, then again i felt like most here use JS, so dunno how many want that, you´ll probably get feedback on that end if someone wants it =)

@geppetto: no problem, and haha, yeah, its like that with many things in unity with most of us =)

 

First update was sent out to everyone who bought GUIKit001.

• Fixes the Pause Button issue
• Adds support for 4th generation ipod touch (and attempts to make the retina device detection somewhat future-proof by checking for screen resolution instead of device generation)
• Changes the way all the images are loaded and gets rid of any double-loading on retina-devices. (should load a tiny bit faster and use a bit less memory there)

If you haven't changed the code you can simply replace the StandardGUI script, but you'll have to fill the infoImgName and levelImgName arrays manually - Just add in CreditsPage01-03 and Level001-004 - sorry I missed adding in the default values there and big thanks @ugur for reporting this so quickly! - This will only happen when you update, not if you're a new customer.

Also: For the next update we'll figure out a better way of distribution, so you can re-download the entire updated zip if you want to!

 

Hi there,

First, I have to say GUIKit is really a timesaver. It works with no pain and I got main menu setup in few hours and my game working with screen rotations. Fine.

Now, I got a problem related with the loadlevelAdditive.
I have followed the procedure and parent all my gameobjects to an empty Object tagged with "Level"...it works fine, the level is destroyed and reloaded when I re-enter the level.

The problem is for ALL objects that I have instantiated during the game. They are not parented with the game object tagged "Level" and so they are not destroyed and I get them when I go back.....

**** EDIT **** Solved

You just have to parent the new instantiate gameobject
newGameObj.transform.parent = transform

Everything works fine now.

 

glad to hear! sorry I didn't see this, somehow the new forum seems to have eaten my topic subscriptions...

 

I've sent you a PM .

 

In the demo (http://GameAssets.net/demo/guiSkin001.html) you have the actual demo objects setup in a button operated slideshow type thing. Is that slideshow element part of this package, and is it "touch swipe-able" on the ios devices?

 

The "slideshow element" is handled by SwipeControl, which is available as a separate component or as a part of GUIKit001. (GUIKit001 includes all our other components)

SwipeControl is not included in GUISkin001 though. (The example page you linked to is included with GUISkin001, but without the sliding.)

 

Here's the link to the demo-page of SwipeControl: LINK

Swiping works with touch or mouse input, but can also be controlled with prev/next buttons (or whatever way you come up with if you write your own script to use on top of SwipeControl - just set the target value and it will slide to the desired position...)

 

Thanks! One more question: Do you have anything in the kit that can work as a listview selector (kind of like a UIPicker view) where you can add a arbitrary number of items (buttons, basically) which can be scrolled. Being that I'm looking at this for iOS, I'm also looking for something that has the proper listview "feel" (scrolling inertia, bounce back, etc.)

- Corey

 

Hi,
I’ve just bought your GUIKit001 and been having a quick look at it.
Now I’m fairly new to Unity and totally new to the GUI side of things in it, but is there any tutorials, documentation or beginners guide for this?
Just that I’ve looked at the GUI scene(the same one as is on the web) in Unity and I wouldn’t class the script as been that well commented and looking in the Inspector panel I’m not much wiser to be honest(for example what do all the Matrix elements represent).
Like I said, maybe it’s because I’m totally new to the GUI side of things (only done the very basic GUI stuff for on screen debugging during the game), but at the same time I would of expected a bit more in the way of documentation for something as big as this.
Don’t get me wrong to anyone that may be reading this, it looks really good and I’m sure it is once you get your head around it or you’ve already had experience doing your own front end, but as a newbie, there seems to be an expected predefined knowledge already about GUI with Unity which seems to go slightly against why a lot of people would buy this.
A couple of pages explaining what each script did and ideally a walkthrough on setting up a new simple menu would be really good for this.

Cheers,
Mike

 

I just bought Guikit and I agree with Mike, I think Guikit is going to be be very useful

But I also think it would be good to have a guide showing how to get Guikit integrated into an existing project. If I didn't already have a years worth of Unity development under my belt I would be completely lost with Guikit.

 

@redd: I imagine something like this could be built using SwipeControl - it's not trivial though. But since a lot of people seem to be looking for a list control I might try to build someone generic eventually. My basic idea would be to put an array of images into a scrollable area, use SwipeControl to determine the scroll position inside the scrollable area and add sone code for selecting/highlighting...

@Mike and gopster: Thanks a lot for the feedback! I'll start working on some more documentation. Where would you like me to start? I've been thinking about a short video-tutorial that shows how to reskin and integrate the StandardGUI into a project. Anything more important you'd like to see first?

About the Matrix elements: You saw the Instruction-images in the StandardGUI folder, right? There's one image in there explaining all the inspector values and groups them into sections. I see how this could be too little information at first though. I'll try to expand on that as well in some form.

In the meantime:
First there's a value for global position, scale and rotation of the matrix - this is applied to everything (all GUI-screens, Cameras)
Then there's rotation offset - this is only applied to the GUI, making it possible to have the entire interface at a slight angle while keeping all the cameras level. All of the above can be changed in the inspector, but the default should be fine for most games...
And finally there's a position, scale and rotation for each of the menu screens (the comments in the code tell you which entry bin the arrays corresponds to which screen) - these are animated through the code to make the individual screens move in and out (for example when you transitions from the main menu to the settings screen) - only position is used at the moment, but you could change the code to use rotation and make your menus rotate in and out for example. - I guess we did leave a few things exposed that only advanced useres will need. But we'll work on more and better documentation until it's easy enough to use for everyone!

If someone has a specific problem or question, just mail us and we'll try to help as best we can!

 

I have Guikit integrated into my project and have just started on customizing the graphics. I've spent about 6 hours with it so far and I really like it. It gives me a nice structure for my gui.

The way the Photoshop templates are layed out is awesome too. Who knew you could export layers to separate files? Probably everyone but me , but I still learned something that will be useful now and for all my future projects. For me that adds more value to a product like this than just about anything else.

I think a video showing how to integrate and reskin StandardGUI would be great!

 

Quick question... Is there doc file with the Orientation thingie? There's an example file, but was curious if you had a doc file.

tanks,
B.

 

col000r, i just bought the whole package, this thing rocks!, quick question tho, is it possible to give a quick run down on how i could possibly use this to recreate gameplay control, I.E. a joystick and a couple buttons, im currently using my old scripts from my project were we used guitextures for buttons etc, but I come back to the idea that I specifically bought this package for its all in one deal with scaling the gui for all devices,

using my old scripts for the controls wont scale like your gui does, maybe provide a hint on which code i could take a look at and dissect to create scaling controls for all devices, thanks!

 

Here's a 10 min video tutorial about how to re-skin and set up GUIKit001's StandardGUI. I also go over the most important variables of the StandardGUI script. Please excuse the cold and the accent...

You might want to watch this in HD on facebook or youtube