The programmers here at XDStudios have started to build up a useful library of custom script components. These components help speed up the development of our games by a considerable amount (something that is of vital importance to us in our ManicMonday game jams).
For example, we got fed up of re-writing simple buttons that do very little (bring up a website/play button etc.). So instead, we wrote a simple button component called “XDButton” (I would advise you to prefix a unique identifier in front of all your components) that you provide a callback function (ButtonDown or ButtonUp callback) and that function gets called when whatever action you selected is executed. Simple right…? But this has saved us from having to create a new script for every button we want to use and writing (even if it is a small amount) some code to make it work. This of course is only a small simple example – we have components that handle monster tasks such as Facebook integration, object pooling and UI utilities etc.
Example of our XDbutton and XDFacebookWrap components working together
As a quick tutorial on writing a useful component (and personally, one of my favourite components we have created) I will show you how you can make an on screen debugger for unity – this is very useful for android and iOS development!
1. Start by creating your on screen debugger script. In this example I have called it “XDOnscreenDebugger”.
2. Next we need to create a class within XDOnscreenDebugger that will hold the debug string and the time to keep it on screen. For this example I have called it “DebugMSG”. Also, create a list of DebugMSGs (don’t forget to add “using System.Collections.Generic” at the top of your C# script!!) to the on screen debug class.
3. Next we need some way of updating the time alive of the message and also a function which easily tells us if the message should be removed or not. Go ahead and add two functions “public void UpdateTimeAlive(float delta_time)” and “public bool HasTimeExpired()” to the DebugMSG class.
4. It is always handy to set the text colour for the output so create two member variables for the ‘XDOnscreenDebug’ class. Also, in the Awake function set the GUIStyle text colour to the colour chosen in the editor. For this example I have defaulted it to green
5. At this step it will be handy to create our Scene GameObject to check the colour selection is working. Go ahead and create a new empty GameObject and attach your
onscreen debug component to it. Your inspector (with the empty GameObject selected) should look as follows
6. Now that you have your text colour chosen, we need to be able to update the lifetime of the on screen messages so that they will be removed from the list when they expire. We do this in three steps:
- Loop through the objects on the list
- Update message current time alive by passing in Time.deltaTime
- Check if they have expired – if they have remove them from the list
Go ahead and add this to the on screen debuggers update method.
7. Now that we have our list updating, we need to display it! To do this we will use the OnGUI function in the onscreen debugger class. To draw the strings we simply loop through the message list and use the GUILayout.Label method passing in the string to render and the style used. The GUILayout will handle the display of the messages and will put them one after another in a list style.
8. Now that we have all the functions in place to update the messages lifetime and remove them if their time has expired and also to draw the debug messages we need a way to add them to the list. To do this add a public static method to the on screen debugger such as:
public static void Log(string log_message, float lifetime = 10.0f)
This will give every message a default life time of 10 seconds and is an optional input to the function. Here is the code for this method:
Note that we have checked to only debug on screen if development build has been chosen! (to make development build active go to File -> Build Settings -> and tick ‘development build’).
Your on screen debugger is now complete! To test, simply attach a script to your camera (or any object) that will call your on screen debuggers static function “Log”. For us this would be called as following:
XDOnscreenDebugger.Log(“This is a debug message”);
This will result in the following message being displayed in the top left hand corner like so (I have called the function 5 times to demonstrate the automatic multi line):
Now you have a very useful on screen debugger that can be used in any Unity project! This is especially useful for android and iOS development where you can just simply log to the screen and see debug messages on the tablet/phone instead of having to sieve through many many lines of useless debug information output via command lines etc.
Hope this helps!
Nick Cullen
XD Studios.