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

@Void77 Figured something out that might explain why something outside of any menu might not rotate, while the pauseButton still will... The guiMatrix isn't actually being updated when no menu is up. To change this, simply add the following line to the PAUSE BUTTON section in OnGUI() - add it below GUI.matrix = ...

Code (csharp):

1. guiMatrix = GUI.matrix;

Not sure if this is related to your issue, but I'll add it to the next update as a bugfix as it might potentially cause some confusion.

 

[Edit] Figured it out

To those that might be interested, put the following code into Update() in StandardGUI. There might be a cleaner way of doing this, but this works.

Code (csharp):

1.     // code to figure out tapping on BlackishGUI.Dots for level select
2.     if(guiOpacity[3] > 0.0  Rect(-1, -1, 2, 2).Contains(matPos[3])) {
3.         if(Input.GetMouseButtonUp(0)) {
4.             // if the left mouse button was pressed...
5.            
6.             // get the position of the mouse
7.             var mousePos : Vector2 = Input.mousePosition;
8.             // convert it's coordinate system into gui coordinates
9.             mousePos.y = Screen.height - mousePos.y;
10.  
11.             var centerPos : Vector2 = Vector2(0, 86 * scaleFactor);
12.             //BlackishGUI.Dots(new Vector2(0, 86 * scaleFactor), levelStatus, selectedLevel, scaleFactor);
13.             for(var i = 0; i < levelStatus.Length; i++) {
14.                 var dotRect : Rect = new Rect((centerPos.x - (levelStatus.Length * 13 * scaleFactor * 0.5) + (i * 13 * scaleFactor)),
15.                                               (centerPos.y - (13 * scaleFactor * 0.5)),
16.                                                13 * scaleFactor,
17.                                                13 * scaleFactor);
18.                 dotRect.x += Screen.width/2;
19.                 dotRect.y += Screen.height/2;
20.                 // figure out if the black gui dot rect contains the mouse position
21.                 if(dotRect.Contains(mousePos)) {
22.                     // if it does, set the swipe controls current value to that dots index!
23.                     levelSelectionSwipeControl.currentValue = i;   
24.                 }
25.             }  
26.         }
27.     }

Hello again,

We've been working with GUI Kit for awhile now and one of the things on our wish list is that the dots for swipe controls actually behave like the iOS dots. That is, when someone clicks on a dot, it'll take you to that page.

This would be very helpful in the level select screen where there might be many levels in the swipe control and a player wants to skip to a particular one without swiping all the way to it.

Is there an easy solution to this? I took a very brief look at BlackishGUI.js and didn't really want to mess around in there (comments are non-existent).

Thanks a million,
~Andrew

 

I was going to suggest putting the code for BlackishGUI.Dots into the OnGUI of StandardGUI and replacing the Toggle with an array of GUI.Buttons, but your way looks like it's quicker!

 

...

edit:

Sorry how to delete?

 

Any chance of a Christmas Sale for GUIKIT001?

 

stay tuned

 

this looks awesome!
and thats a good price in my opinion!

Is there any way of seeing how other guis have been implemented using this?
I just want to make sure they dont all have the same "look" and feel.. is it easy to create something unique looking that uses the tools in the package?
thats what she said.

thanks!

 

@masterpoop here's a short tutorial on how to integrate and re-skin the gui: http://www.youtube.com/watch?v=eorZ5otVc6Y&hd=1

The idea behind the StandardGUI was to provide a working GUI that is easy to reskin and add to a project. You can of course use it as a base for completely different designs, but it will require some reworking. (It's all built on UnityGUI, so if you know how to work with that it shouldn't be too hard to change the looks and add new features...)

If you want to start from scratch and just want the rotating/retina part, check out OrientationControl - it's the bare bones of StandardGUI without all the actual menu-stuff.

 

We're having a holiday sale!.

-25% on everything till the end of the year 2010! - Only on GameAssets.net

Dedicated thread here

 

Hey, just got the script and everything is working great and I love all of the features so far. It was easy to get a lot of my existing stuff integrated.

I am having a problem understanding how to load the next level after something like a collision happens though.

Is there a certain function that automatically destroys the existing level and loads the next? Or do I have to manually destroy the existing level and load the next.

I have the levels parented under a game object like it says to do in the youtube video, and can manually destroy that one and load the next like this with a collision or trigger:

Code (csharp):

1.         firstlevel = GameObject.Find("Level1");
2.             Destroy(firstlevel);
3.             Application.LoadLevelAdditiveAsync("level2");

But I am thinking this isn't the right way and there must be another way instead of having to manually do all of that for each level.

Awesome script though. I just need help with this part.

Brandon Smith

 

There's LoadLevelAndCloseMenu which you should only use from inside the menu as it loads and then makes the menu fade out.
And LoadLevelInBackground, which is probably the best option to do out-of-GUI level-loading. I added this one to load a level while the GUI was up, but without closing the GUI. - I think I added this before the last update, but if it was afterwards: next update will be out early in the new year.

I also experimented a different solution: in the beginning the GUI remembers all its objects and when loading a new level it destroys everything but those objects. It works, but it has one huge drawback: unity doesn't return inactive gameobjects, so everything that's inactive will remain in the scene. So I guess the current way of parenting to one GO should remain the default...

 

LoadLevelAndCloseMenu() exists, but the function LoadLevelInBackground(); does not.

Please advise.

 

THANK YOU! Just bought my copy a few moments ago and I'm loving it so far! Would love to see some more PC Geared features like changing the resolution and rendering quality, but I'm sure that should be pretty easy for me to figure out on my own!

 

I just purchased the package.
What is up with the performance? You are not even utilizing GUILayout but I can't get more than around 30 FPS.

 

@azeitler: What device are you testing on? I'm running it at upwards of 1000fps on my old iMac and at 40-60 fps on 4G devices, and 20-30 fps on the iPad, so I assume that's what you're talking about.

It's true that UnityGUI is a bit of a performance hog (we're still waiting for the improvements that were promised for Unity 3.0 and delayed before release), but in this case the problem is probably the low fillrate on the GPU.

What causes problems on the iPad is too much transparency, so there's 2 elements we can focus:
• The background-image: Set backgroundMaxOpacity to 1.0 to make sure it's fully opaque when the menu is up.
• The background bars: Nice effect, but they're transparent and cover 75% of the screen. So if 20-30fps on the iPad while inside the menu system aren't enough for you, comment out the 2 lines below //BG BARS in OnGUI and you should be able to get well above 30fps. It will cost you some of the visual appeal though...

Other than that: Turns out we forgot to put useGUILayout = false; back into the beginning of the Awake() function of StandardGUI after we split out the Debug-window - according to the docs this should double GUI rendering performance. (Will be in the next update and should give everyone a slight performance boost.)

Also: Please note that on iOS you're never going to see more than 30fps (less than around 33ms frametime) in the internal profiler unless you change #define kFPS to something higher (like 60.0).

 

If you set useGUILayout to false, please be aware that using GUI.depth will no longer work. So if you have other interface scripts, it will no longer be possible to set their order. This can be a problem when you have some GUI elements on screen when the pause menu comes up.

You can still use it though if you put the following into all your GUI scripts (also a good idea if you have a somewhat transparent background-image in the menus):

GUI.color.a = 1.0 - StandardGUI.instance.currentBGOpacity;

(with the new update this will work correctly even if you set backgroundMaxOpacity to something lower than 1.0, because the opacity of the background-image = currentBGOpacity * backgroundMaxOpacity!)

 

Update #4 has just gone out to everyone who bought GUIKit001 on GameAssets.net - check your inboxes!
(AssetStore Update will follow eventually, I'm currently getting a server error when trying to submit it...)

Huge list of improvements/additions:

StandardGUI:

* NEW There's now a separate scene called MainMenuBG - it will be loaded once StandardGUI is done initializing and also when you quit out of another level. If you use a background-image for the GUI, leave it empty except for the Camera (it's needed to render the GUI), if you want to use a 3D background instead of an image, put it into this scene!
• New function: LoadLevelInBackground - and this new function is being called once at the beginning of Start and added the following behaviour to the function QuitToMainMenu: fade to black - load the MainMenuBG scene - fade from black
• New function: LoadLevel - use this to change to a new level from outside the menu (but make sure the GameObject calling the function survives the level-change or the fade-from-black will never happen. You can do this by parenting it to transform.root - then destroy it manually after the new level was loaded... - check out the new button in Level1!)
• New script added: LevelStatus.cs (it's in the Plugins folder, so you can access it from JS as well) You can now simply do LevelStatus.Lock(levelID), LevelStatus.Unlock(levelID) or LevelStatus.Complete(levelID) to lock, unlock and complete levels. Easier than dealing with PlayerPrefs manually... LevelStatus.Get(levelID) returns the status of the given level.
• Fix: LevelStatuses are now being updated whenever you quit back to the menu, so that if you change a level's status from inside a level, you see the change when you quit and enter the level selection.
• guiMatrix is now being updated even if only the pauseButton is shown. This will let you use the same matrix for positioning ingame-GUI elements.
• Made StandardGUI a singleton, so it's easier to interact with. - use StandardGUI.instance to access it from anywhere.
• Level selection images are now only being loaded once you enter the level selection and unloaded when you exit it
• Added a new set of functions that makes it easier to position GUI-elements in the corners while adjusting their size to the current scaleFactor (Works in any resolution!) : ScaleRectTopLeft(Rect), ScaleRectTopRight(Rect), ScaleRectBottomLeft(Rect), ScaleRectBottomRight(Rect)
• Added a second set of functions that only helps with positioning and does no scaling: PositionRectTopLeft(Rect), PositionRectTopRight(Rect), PositionRectBottomLeft(Rect), PositionRectBottomRight(Rect)
• New example script added to Level1 - it uses ScaleRectBottomRight to display a button in the lower right corner. if you click it, it uses the new LevelStatus script to Complete the current level, unlock the next one and then load into it.


SwipeControl

• Wrote some documentation
• New Example: 3DObjects


OrientationControl

* Added a new set of functions that makes it easier to position GUI-elements in the corners while adjusting their size to the current scaleFactor (Works in any resolution!) : ScaleRectTopLeft(Rect), ScaleRectTopRight(Rect), ScaleRectBottomLeft(Rect), ScaleRectBottomRight(Rect)
* Added a second set of functions that only helps with positioning and does no scaling: PositionRectTopLeft(Rect), PositionRectTopRight(Rect), PositionRectBottomLeft(Rect), PositionRectBottomRight(Rect)
* New Function: AlignInput(Vector2) - feed it touch or mouse coordinates and you'll get the GUI coordinates in the current orientation
* New Function: LoadTexture2D(string) - loads and returns a texture from the current resource path.


GUISkin001

• Added vertical slider - skin is now truly complete

 

Hi there! Thanks for the comprehensive feedback. I only gave the example scenes a quick spin on the Mac. I will try and find out why I only get around 30 fps on my machine (Mac Pro 2008). I'll let you know, should it be no fault of my setup or project.

 

that's very weird. can you have a look at the profiler and see what's causing it? As I mentioned before, according to the profiler I'm getting upwards of 1000 fps on an older-than-that iMac...

 

I have multiple cameras with my main game camera running with a smaller view rect than the entire screen. How do I constrain GUIKit to display only in that smaller viewport rect? (not just the controls, but also the background bars and color/image)

I tried setting screenWidth/screenHeight but that doesn't do it (and at runtime I can see those values getting set back to whole screen size). I took a half-hearted pass at replacing all the Screen.width/Screen.height references with the viewport coordinates - seemed like that should have worked but I probably missed something (I left the GUI.matrix references alone, assuming that's only referenceing the screen dimensions for centering)

 

hm, tricky...

I'd say you'd have to replace Screen.width and Screen.height with custom values, like you tried.
Check out GUI.BeginGroup(Rect()) - If you wrap that around everything in OnGUI and have custom screenWidth and screenHeight, you should be a whole step closer...

 

Thanks, I'll look into that. One thing I did do is put an #if UNITY_IPHONE around everything in DetermineScreenDimensions except the last line to avoid screenWidth and screenHeight getting reset to the screen dimensions - after that, the GUI controls (but not the background texture and bars) locate themselves correctly within the desired camera viewport rect.

Another thing, in the Initialize function of the AudioController, I moved the audio.volume adjustment to before the vol>0 check, otherwise saved zero volumes were not getting set when restarting the game. There's probably the same issue in MusicController but I'm not using that (actually in AudioController I set AudioListener.volume instead of audio.volume since I just have the one master volume control)

 

I just upgraded to Unity 3.2 and I've been getting these errors:

Assets/Scripts/StandardGUI.js(693,35): BCW0012: WARNING: 'UnityEngine.iPhoneSettings.screenOrientation' is obsolete. screenOrientation property is deprecated. Please use Screen.orientation instead.

 

The iPhoneSettings warnings shouldn't break anything (I've been seeing them in other scripts since Unity 3.0, I think, with the advent of Android support), but it would be nice to get that cleaned up. Another cleanup issue - I noticed the tempRect variables in StandardGUI.js don't have local or class variable declarations.

 

Now that Unity 3.2 is out, when do you think the latest update for GUIKit001 will be available on the Unity Asset Store? Thanks.

 

Ah, I see the ScreenOrientation enum is listed in the new API - http://unity3d.com/support/documentation/ScriptReference/40_history.html

Not so obvious, that it's used in Screen, though. Nevertheless, it's easy to remove the warning by replacing iPhoneSettings.screenOrientation with Screen.orientation and iPhoneScreenOrientation with ScreenOrientation. After that, I just have a couple of warnings about unused variables.

 

The update is finally out on the Asset Store! Sorry it took forever. I updated it for 3.2 so there should be no more warnings about deprecated properties. Asset Store Link

 

A stupid question perhaps, but i'm going to ask it anyway ;-)
Does the GUIkit001 als contains the std search inputfield like used in iOS? And is there also the default iOS-list (for example to display the search results in).

Thank you,
David

 

There's an input-field with an x-button on the inside if that's what you mean, but there's no list. - The "inputfield with x" is a part of GUISkin001 which is also available separately. Please also note that there's no code related to handling keyboard input on iOS...

hope this helps!

 

Thanks col000r for the swift reply, I've just bought GUIKit001 from your site. I'm starting to wade through it.
Just a quick question to get me oriented. Is there somewhere an example or script that handles rotating a camera by using touch input (iOS).

I've quickly checked the SwipeControl examples (3D, 3DMoving and 3DObjects) but they only rotate objects by swiping.

I'm looking to rotate (with swiping) a 3D model and zooming (with pinching). Any info on that topic? Or isn't that possible with this product? No worries I just thought I inquire about it, since I'm still a newbie in Unity so I may overlook things.

Also activating debug (in the Inspector) on the SwipeControl results in an error (and no debug):
Ignoring invalid matrix assinged to GUI.matrix - the matrix needs to be invertible. Did you scale by 0 on Z-axis?
UnityEngine.GUI:set_matrix(Matrix4x4)
SwipeControl:OnGUI() (at Assets/SwipeControl/Scripts/SwipeControl.js:241)

Any quick solution I can apply?

 

@Raycat: There's no code for handling pinch-zooming, but rotating a camera with swiping is actually done in the OrientationControl example scene!

The Matrix error shows up if you start with a matrix that is zero (the error might show up before the matrix is set up in Setup()).

Please make sure the matrix is initialized like this:

Code (csharp):

1. public Matrix4x4 matrix = Matrix4x4.identity; //C#
2. var matrix : Matrix4x4 = Matrix4x4.identity; //JS

You might need to remove and re-add the script for this change to take effect (it also works to make it private, save, change to unity, and then make it public again)

 

OK thanks, I'll try that solution for the matrix-error.

 

How can I make a button, but grey it out and disable it until I need it?

 

@bansheeboyb: you can set GUI.enabled to false before any control - check out the docs here

 

Let me start off by saying....Great stuff here....big time saver for me and worth the $$$.

I extended the (var levelSelectionSwipeControl : SwipeControl functionality to add a skill level (by creating a var skillSelectionSwipeControl : SwipeControl, minus the Level Load stuff. Moved the Level Select index to 4 instead of 3 (which is now the skill level).

The problem I am having is that it seems to be using level selection instance instead of the new skill one.
The new skill one displays on menu, but doesn't do anything....no swipe action.
When I update the Level Swipe, and then go back to the Skill Swipe, the Skill one then looks like it updated.

So I am not sure if it is creating a new instance of SwipeControl, or reusing the other one....????

FYI, I now have two calls to Setup in the Awake(). One for levelSelectionSwipeControl(), and one for skillSelectionSwipeControl.

Does anything come to mind as to what I am doing wrong?
Thank You...

 

I did notice that levelSelectionSwipeControl.enabled is set to false, but never to true in StandardGUI?
It seems like my skillSelectionSwipeControl is just not enabled??? It is displayed, but doesn't do anything.

 

I don't think this is my problem, but there are some inconsistencies when setting up levelSelectionSwipeControl properties.
In Awake() the properties are setup different than in LoadResourcesAndScaleRects().
(1) partWidth setup different
(2) maxValue not setup in LoadResourcesAndScaleRects, but set for infoSwipeControl.
(3) In Awake(), maxValue is only set if ==0.

Besides the skillSelectionSwipeControl not acting like it is enabled (doesn't do anything), the dots for skill get updated when the level select is updated.

 

I had to make these additions in StandardGUI.js to check for iPad screen. Otherwise, the GUI shows small on iPad (I have only iPad 2, so could not check iPad 1):

Code (csharp):

1. if(iPhoneSettings.generation == iPhoneGeneration.iPhone4 || Screen.width == 960 || Screen.width == 640 || Screen.width == 1024 || Screen.width == 768 || Screen.width == 2048 || Screen.width == 1536) retinaDevice = true; //checking for screen-dimensions here, because they forgot about 4th Gen iPod Touch for Unity 3.0 it seems...
2.     #endif

 

col000r, I was hoping you could answer this one....please

 

Sorry, just a ping...I haven't figured this out.
To reproduce, just add another instance, like levelSelectionSwipeControl.
Thanks...

 

sorry for the late reply. something is up with my topic subscriptions... :/

@RolfBertram.com: Showing the GUI small on the iPad was actually was done by choice, but if anyone prefers it bigger, then this is the way to do it!

@collider: I'm not sure I understood what's going wrong, but let's see... If you have several of the same components on one GameObject it's a bit hard to know which one is which. You could try putting the 3rd SwipeControl (the one you added) onto a separate GameObject and then drag that onto the skillSelectionSwipeControl you added, to make sure you have the correct one there.

You did add another SwipeControl script, right? (Just declaring a new var isn't enough, you also have to fill the empty var with an actual SwipeControl component) And you're setting it up in Awake() of StandardGUI just like the other two are set up, right? The two SwipeControl components that are being used by the credits and level selection are both set to skipAutoSetup, because they're set up in the Awake() of StandardGUI.

The only other place where something could go wrong is in OnGUI when you go to your skill selection screen and switch on the SwipeControl script via skillSelectionSwipeControl.controlEnabled = true;

Does that help you? If not, please explain further And sorry again for the late reply!

 

That's it!!!! Thanks for your help.
I didn't realize that there needed to be 3 instances of the "Swipe Control (Script)". At some point, I actually wondered why there was 2...I thought it was a mistake.

So I added another, attached it to my swipe control, and now it works!!!! Man...soooo many hours wasted trying to debug this....
Your awesome!

 

The reason I'm asking is, I want all GameObjects of the current level destroyed when loading the next level, including camera and light. But I want to use the pause button, which seems to require "Load Levels Additively". It seems to work so far. I just want to get feedback from the developer to make sure I did the right thing, and I'm not having 2 lights and 2 cameras active in level 2, clogging up system resources without me even knowing about it.

 

Hi,

Thank you for the awesome kit !

Do you have somewhere a version with a script for every screen (Main menu, Options, Credits etc...) that you could share ?
Or can you just tell me how that would be done ? I suppose we would need a GameObject for every screen ?

Thanks !

 

@collider: glad it works!

@RolfBertram.com: If you use LoadLevelAdditively, the old level will be destroyed when the new level is loaded in. BUT: only if everyting in the level is parented to the one GameObject tagged with "Level"! - everything outside of that will survive. Check out the included project to see how this works! (At first you only have a dummy level object in there, when you press play it gets destroyed and the Background-scene is loaded in - you should now see a new Level gameobject in the scene. if you load into a level that one is being destroyed and the selected level is being loaded)

I have a different solution as well, where it makes a list of everything that's in the scene at launch, and destroys everything that's not on the list when you load into new level, but I haven't included this yet because of one big caveat: there's currently no way to get inactive gameObjects, so if you make something inactive - with this approach it would stay in the scene forever. I could post the necessary modifications if you or anyone else wants to use it nonetheless...

@nah0y: It would be quite a bit of work to split everything into separate pieces... May I ask why you would prefer it that way?

 

Yes of course

I don't want to use the package as it's provided, I want to create "my own" screens for each games I'm going to create, so every screen will have a main menu (that I can quickly modify based on the game, add buttons etc...), an option menu (that I can also modify based on the game).

In fact, I want to be able to create another empty screen for example with just the back button, so I can access it via the menu, and go back to the menu with the back button, but I'll be able to put anything I want on this screen (like a leaderboard for example), and have all the amazing orientation etc...

Also I'd like to have a 3D background behind each screens (maybe a different one behind each ones...)

Do you know what I mean ?

 

succeeded

I still have a few issues but it's working! And also, I didn't understand what freeze time is used for, with or without it, it seems to do the same...

 

@nah0y: makes sense, and is a good idea!

Freeze time determines if game-time will be stopped while your in the menu or if the game will continue to run. Basically it determines if Time.timeScale will be set to zero or not. You can even choose to have ot morph the value towards zero over a certain amount of time, so game-time doesn't freeze instantly, but that the action slows down and stops (I think the default setting in the example is 1 second) - you'll notice this more if you have some fast animation in the game and have a transparent menu-background. Not the most useful feature ever, but I thought it was a nice touch! I think it looks pretty cool in my next game when spaceships and asteroids grind to a halt when you press the pause button...

(shameless plug ahead) you can beta-test it here (the menu is not in the beta yet though, sorry, but the final game uses StandardGUI, OrientationControl and SwipeControl extensively): http://beta.blackish.at

 

Thx for the explanation, in fact I was never using the pause menu so...
And your game is pretty cool !

I have another question, I use SwypeControl to do things like in the Credits menu, but how can I do something like (http://www.anbsoft.com/middleware/ezgui/EZGUI_Demo_Simple.html), to have a list with various items inside ?

 

Hi nah0y,
I just picked up Guikit and was thinking about the advantages of doing this.
Do you have any tips/advice on what you did to implement your solution?

ty!