Button Sounds

For code example, skip to the middle.

The new user interface tools in unity 4.6 and 5 are good...but not for programmers, or when you want to have complex interfaces, with a lot of code generated buttons for example. In my project, I decided to go for a mix: I used the new user interface tools for simple things, like main menu buttons and affects, and used the legacy GUI system for more complex things like hidden or context generated menus.

Using the new ui tools, it is very easy to setup the sounds that play when you mouse over or click a button. Even better, with the prefab system, you can make a default button prefab that has all the sounds and affects already setup, and easily reuse it wherever you need to.

The legacy ui, however, is a little more difficult. Setting up the ui skin is quite tedious, but it is worth it in the long run, especially if you have a lot of code generated ui. I wrote a blog post a while back detailing how to do this with half decent results.

Adding sounds to the legacy GUI system:

There are two main sounds most ui's have: a sound to play when the mouse clicks on a button, and a sound for when the mouse hovers over something. The first is easy, Just call the code to play the sound when GUI.Button returns true. It feels a little inefficient though, having to add that code for every single button. And what if you want to change it? Now you have to go through all the buttons, and change the code inside each. While there are programming patterns that make doing this easier, there is a better way.

The second main sound that ui's have, is the sound that plays when the mouse hovers over a button. One problem: there is no built in way for you to detect if the mouse is hovering over a button! There are several workarounds though, using google turns up several solutions: here, here and here. One solution is to add rects everywhere and detect if the mouse position is inside the rect. The other solutions use the GUI.tooltip.

I like the GUI.tooltip solution, its way less messy then having to spawn a rect for each button. The GUI.tooltip is a litle tricky though, For one, you have to have it unly update during repaint events, like:

if(Event.current.type == EventType.Repaint){
} 

In addition, you have to make it only play the sound once when the mouse is over the gui 

element, and play again when the element changes. The code ends up getting a little messy, but in the end, it works very well.

This is my code:

Variables:

//the previous tooltip
var prev: String = "";

//is the mouse button being pressed?
var pressed: boolean = false;

//the tooltip
var hoverButton: String  = "";

Inside OnGUI:

//Play a sound if we mouseover something
hoverButton = GUI.tooltip;
if(Event.current.type == EventType.Repaint){
 if(hoverButton != ""){
  if(Input.GetMouseButton(0) || Input.GetMouseButton(1)){
   if(!pressed){
    PlayMyButtonPressedSound();
   }
   pressed = true;
  }
  else{
   pressed = false;
  }
  
  if(hoverButton != prev){
   PlayMyButtonHoverSound();
  }
 }

 prev = hoverButton;
}

Just make sure each ui element has a GUIContent with the correct parameters, and each tooltip for each button has to be different. So for example:

if (GUI.Button(SomeRect, GUIContent ("Text displayed on the button", "Unique Tooltip")){
 DoSomething();
}

Unity GUI - Graphics

There are two parts to making a GUI in unity; the graphics and the programming. These two parts mix a bit, but when I say graphics here, I mean the GUI skin. Unity's GUI system is a bit tricky to work with, and making your own customized skin can be a bit daunting. I realized that the default unity GUI wouldn't work, not even for testing, because all its controls are translucent and very dark. Most of the time in space, there are really dark colors. The default unity GUI tends to become nearly invisible against this kind of backdrop, and that's when I realized that I would need to make my own. If you want to see the results, skip to the bottom.

Note: before you go ahead and make a full blown GUI skin; make sure none of the ones on the asset store will do. There are a lot of decent skins for $5, and even some nice free ones. I neglected to do this, and as a result spent a lot of time making my own skin when it may not have been necessary, though it was an interesting experience.

Once you have come to the conclusion that the unity skin, the free skins, and the non-free skins are not options, then that's when you make your own. Before you even get started though, draw it out on paper, preferably graph paper. You do this so that when you finish making the skin, you don't go back and realize that 30+ images need to be redone. This also helps prevent redoing a simple image 20 times to get it just  right. Once you got a good idea of your skin down on paper, you can get started with the computer stuff.

One thing that needs to be taken into account, is how unity handles images. I spent 2 hours trying to figure out why my "crisp clean images" were all blurry before I realized the import setting : "texture type" of each image had to be set to GUI. The other settings can also be important depending on your image type. Its not usually to hard to figure out settings that work, the important part is making sure texture type is set to GUI.

The filter mode handles how the image is stretched. Point just scales the pixel, biliniar is good for textures with gradients, triliniar does something with mippixels. All this info is available in detail at the Unity Texture 2D documentation page found here.

After all the import settings are taken care of, the next step is to setup a test script that shows off all the GUI elements that you plan on using. I followed the tutorial here, which has a nice little script for this purpose, though it doesn't use all the elements (I made this; it has all the elements. The code is a bit messy but its only for visual testing). The tutorial also shows how unity handles stretching of textures at different places to make small textures seamlessly scaleable. The tutorial doesn't cover everything but its good for an introduction. After finishing it, its not that hard to just follow the same pattern of making images with the right borders, then changing the border setting in the skin to make it fit right.

Some elements do not follow the same pattern though and need a bit more work to get working. Notably is the toggle. When you make the toggle, make sure that you leave a section of pixels to the right for whatever you want stretched beneath the toggle text. Usually this is just blank alpha.

<-- That bit of white to the right is alpha used by the toggle text.

When making a skin, its also good to have the default textures available for reference, they can be downloaded from the asset store for free, and also on the unity forums here.

For scroll bar buttons, you need to make sure the fixed width and height are set above zero; otherwise they will not show up in your skin. Only do this if you actually want them to show up.


After finishing the last GUI texture, its a bit satisfying to see a nice GUI when you are done. I will not say its easy, but it can be rewarding to make your own custom skin. Below are some pics:

I ended up making two versions, a translucent version, and a solid version. The translucent skin looks like a better fit, so I will likely go with that one. Making the skin translucent isn't that hard, especially for flat styled skins. You simply take each solid texture, copy the solid color, adjust the alpha value to about half (I used 125 on 0-255 scale), use a paint bucket tool on replace mode where you took the color from, then save the image. If by any chance you don't want to make your own, and you really like this skin, its on the asset store here.

That about concludes making a unity GUI skin, next comes the programming. This was more of a list of common pitfalls, or at least ones I fell into, then a GUI tutorial. There are lots of tutorials on youtube and in many other places, so don't just go by this if you decide to make your own skin.

Planning a project and parsing texts

In my experience it is always best to work on the part of the project you are least confident in your ability to finish. The reason being that you do not want to finish everything else and find that you are, indeed, incapable of completing that particular part. While working on all my projects I have kept this in mind. There are other benefits as well; if you are capable of finishing that part, and you do finish it, then you got the hardest part done first. In addition, this helps keep you encouraged throughout the projects completion because every step brings you much closer. It could be argued that it makes it harder because starting with the hardest part is discouraging. But it will have to be faced at one point or another anyway.

This way of working on projects is best used when you already have experience, because otherwise your project is mostly a learning experience and may not be finished. Working on the toughest part of a project without at least some experience, can be much more daunting, and also much more discouraging.

The reason I bring this up, is because working on my project by using this strategy has lead to some interesting decisions. For instance, the next part of my project was going to involve the gui, so I planned it out by drawing what I wanted it to look like when it was done, and how I wanted it to function. Next I planned the lower level stuff, like how It was going to have that functionality in the first place. And finally, when all that planning was done, I looked at what was the most important and what was most difficult and worked on the next step that most balanced these two.

The gui that I planned was entirely for the ship editor aspect of the game. This aspect is what I consider the most important because it is what makes my game unique, and as a result is what I want the most polished. Since everything else is in place it is also the last step before there can be another release, so it makes sense to work on the ship editor part next.

The gui's layout has parts you can select to build with on the left, and on the right of the screen is the interface for configuring controls or activation keys. Now, because the editor is such an integral part of the game, it will be able to be accessed during flight, allowing real time editing of the ship. The user will be able to switch back and forth between the editor and the flight modes even during a battle, though during a battle would be dangerous.

At default the windows will pop out when the user hovers the mouse at that edge of the window. This makes it easy to access what you need and get the display out of the way quickly. In addition, there will be a toggle that when toggled, will keep the window out even when the mouse is not hovering over the window. Each icon represents a module that can be placed on the ship, or as I like to call it, assembly; because it may not necessarily be a ship that is being built. The list of modules also has a list of tabs at the top, to help categorize the modules.

This gui is nice and all, but I also needed as convenient a place as possible to store the available modules in the unity project. I also wanted something that was easily changeable and even moddable in the future. At the time I decided this, my unity project was in dire need of "housecleaning", it had many unorganized files and resources that were not even being used. I figured it best to start a new project and import what I needed as I went. After this was done, I got to the modding/module organization system.

The system works like this: in the project and build, there will be a folder with a list of .module files. The files can be in sub-folders and really in any order as long as they are in the modules folder. When the game is started, all these module files will be parsed for their contents. Each module file contains a list of all the aspects of the module, and in the future, references to texture and mesh files. In the meantime prefabs already in the built project will be referenced. Any of the .module files can be edited by a text editor, or new ones can be added. Parsing these files appeared the most difficult, as a result, that is what I worked on next.

First I planned out the syntax of each module, then I did a ton of research on the String class in the msdn libraries. For fellow unity developers; msdn is the place to go for all lower level code references. I also looked up how to parse a string in google; this provided a few handy results like: reading a text file line by line, and one method of text parsing. These weren't the only results, but they were the most useful. Anyway, how you parse a file mostly depends on the layout and syntax of it. So for my .module file I decided to read each line one at a time using the method described in the first link. Then I split each line along the = sign using String.Split. Properties on the left side were used to describe where to put the value described on the left. In some cases there were values that were compound. Take for example the custom Side type, it has a position, rotation, name, and variable for the number of sides(polygon sides, not Side type objects). (This is used to describe how to handle the connection sides in the game, ie what connects two objects together) For this type, I declared Side, followed by { and all the variables followed by a }. The text parser, when it read "side" would go into a corutine, reading all the lines until it got to the }. Then the parser would resume its normal operations.

The main task of the parser is to produce a list of modules that the gui can list as icons and the user can place as modules. In addition, only modules loaded this way are used to load a save game, or a saved assembly.

Now...time for that gui.