[{"_id":"hide-gizmos-in-unity","title":"How to Hide Gizmos in the Unity Editor Scene View","description":"A short demonstration of how to quickly hide gizmos in the Scene View of the Unity Editor.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2020-05-21T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"body":"

A short demonstration of how to quickly hide gizmos in the Scene View of the Unity Editor.

\n\t\t\n

\n\n

","modified":"2021-05-29T04:21:05.778Z","subtitle":"","layoutName":"SidebarRight","path":["blog"]},{"_id":"unity-recipes-head-bob-or-breathe","title":"Unity Recipes - Head Bob or Breathe","description":"A C# script to give an object a repetitive, but smooth upward and downward movement.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2018-09-03T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"

Here’s a handy Unity script that, when applied to a game object, will give the object a repetitive, but\n smooth upward and downward movement. This effect is often used to make a “head bob” or to make a player\n object look like it’s breathing; especially when it’s in idle state. This kind of effect can be achieved by\n animating the object before importing it (in a program like Blender, for example), but it can also be\n achieved with a sine wave function as provided by this script. The same or a similar script can also be used\n to make a main menu camera bob or to make lights breathe. Here it is:

\n\n \n

\nusing System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class Breathe : MonoBehaviour {\n    \n    Vector3 startPos;\n    public float amplitude = 10f;\n    public float period = 5f;\n    \n    protected void Start() {\n        startPos = transform.position;\n    }\n    \n    protected void Update() {\n        float theta = Time.timeSinceLevelLoad / period;\n        float distance = amplitude * Mathf.Sin(theta);\n        transform.position = startPos + Vector3.up * distance;\n    }\n\n}\n

\n \n\n

After applying the script, you will need to adjust the float values for the amplitude and period to your\n liking.

References

How to\n Lerp like a pro by Robert Utter

","modified":"2021-10-10T02:01:33.170Z","path":["blog"],"layoutName":"SidebarRight","ogImage":"","subtitle":""},{"_id":"unity-recipes-look-toward-direction-of-movement","title":"Unity Recipes - Look Toward Direction of Movement","description":"A C# script for Unity can be used to make an object look (turn smoothly) toward the direction it is being moved.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2018-08-29T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"p>The following C# script for Unity can be used to make an object look (turn smoothly) toward the direction it is being moved.

\n\n\n

\nusing System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class MyController : MonoBehaviour\n{\n     private void Update()\n     {\n          smoothLookTowardDirectionOfMovement();\n     }\n\n     void smoothLookTowardDirectionOfMovement()\n     {\n          float moveHorizontal = moveHorizontal = Input.GetAxis("Horizontal");\n          float moveVertical = moveVertical = Input.GetAxis("Vertical");\n          Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);\n          if (moveHorizontal != 0 || moveVertical != 0)\n          {\n              transform.rotation = Quaternion.Slerp(transform.rotation, Quaternion.LookRotation(movement), 0.15F);\n          }\n     }\n}\n

\n\n\n

In line 19, Quaternion.Slerp takes three arguments: two quaternions and a float. It interpolates the rotation between the two quaternions with the speed of the given float value (0.0 is no movement while 1.0 is instant movement). The code interpolates the rotation between the current rotation (transform.rotation) and the movement rotation(Quaternion.LookRotation) with a speed of 0.15F. This gives the object a smooth turn instead of an instant turn. The if statement that wraps the code at line 17 keeps the object from instantly flipping or reverting direction when no inputs are being applied.

\n\n

For instant (non-smooth) rotation, line 19 can be replaced with the following:

\n\n

transform.rotation = Quaternion.LookRotation(movement);

","modified":"2021-05-07T16:11:35.555Z","path":["blog"]},{"_id":"unity-recipes-look-toward-direction-of-velocity","title":"Unity Recipes - Look Toward Direction of Velocity","description":"A C# script for Unity can be used to make an object look toward the direction of its current velocity.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2018-08-29T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"

The following C# script for Unity can be used to make an object look toward the direction of its current velocity.

\n\n

using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class MyController : MonoBehaviour {\n     \n    private void Update() {\n        lookTowardDirectionOfVelocity();\n    }\n    \n    void lookTowardDirectionOfVelocity() {\n        transform.rotation = Quaternion.LookRotation(player.GetComponent().velocity);\n    }\n}

","modified":"2021-05-07T16:10:18.358Z","path":["blog"]},{"_id":"unity-recipes-follow-object","title":"Unity Recipes - Follow Object","description":"A C# script for Unity to make an object follow another.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2018-08-29T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"

The following C# script for Unity can be used to make an object follow another. It can be used, for example, to make a camera follow the player.

\n\n

using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class CameraController : MonoBehaviour {\n\n    public GameObject player;\n    private Vector3 offset;\n\n    void Start () {\n        offset = transform.position - player.transform.position;\n    }\n\n    void LateUpdate () {\n        transform.position = player.transform.position + offset;\n    }\n\n}

\n\n\t\t

In the case of a camera follow, this script should be attached to the camera. A reference to the object to follow (player) should then be dragged into the Player slot in the Unity editor.

\n\n\t\t

LateUpdate is used because it is guaranteed to run after all items have been processed in Update and we know absolutely the player has moved for the given frame. The offset is used to maintain whatever distance is set between the objects.

","modified":"2021-06-01T04:48:23.617Z","path":["blog"],"layoutName":"SidebarRight","subtitle":""},{"_id":"unity-get-rigidbody-from-object","title":"Unity - How to Get Rigidbody From Object a Script Is Applied To","description":"C# scipt to get rigidbody from object the script is applied to in Unity.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2015-04-01T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":" \n

Here’s how to get the rigidbody from an object the script is applied to in Unity. The example shown is in C#.

\n\n

using UnityEngine;\nusing System.Collections;\npublic class PlayerController : MonoBehaviour {\n  private Rigidbody rb;\n  // Use this for initialization\n  void Start () {\n    rb = GetComponent ();\n  }\n  \n  // Update is called once per frame\n  void Update () {\n  }\n  // Called before any physics calculations.\n  // This is where you put your physics code.\n  // We apply forces to the rigid body, which is physics, so this is where it goes.\n  void FixedUpdate() {\n    // Pressing arrow keys on keyboard will apply force to rigidbody \n    float moveHorizontal = Input.GetAxis (\"Horizontal\");\n    float moveVertical = Input.GetAxis (\"Vertical\");\n    Vector3 movement = new Vector3 (moveHorizontal,0.0f,moveVertical);\n    rb.AddForce (movement);\n  }\n}

","modified":"2021-06-01T04:51:34.006Z","path":["blog"],"layoutName":"SidebarRight","subtitle":""},{"_id":"script-for-rotating-unity-game-object-90-degrees","title":"Script for Rotating a Unity Game Object 90 Degrees","description":"Unity behavior script that rotates object 90 degrees when the script’s rotate function is called.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2013-05-22T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"

This Unity behavior script rotates the object it’s attached to by 90 degrees when the script’s rotate function is called. Just copy and paste the contents into a new JavaScript in Unity.

\n\n

#pragma strict\npublic var seconds: float = .2;\nprivate var rotating = false;\nfunction rotateObject (thisTransform : Transform, degrees : Vector3) {\n    if (rotating) return;\n    rotating = true;\n    var startRotation : Quaternion = thisTransform.rotation;\n    var endRotation : Quaternion = thisTransform.rotation * Quaternion.Euler(degrees);\n    var t : float = 0.0;\n    var rate : float = 1.0/seconds;\n    while (t < 1.0) {\n      t += Time.deltaTime * rate;\n      thisTransform.rotation = Quaternion.Slerp(startRotation, endRotation, t);\n      yield;\n  }\n  rotating = false;\n}\nfunction rotate() {\n  rotateObject(transform, Vector3.forward*-90);\n}

\n\n

One way to call the rotate function from some other script is as follows:

\n\nvar cube : GameObject = GameObject.Find("Cube");\ncube.SendMessage("rotate");\n\n

Cheers!

","modified":"2021-05-08T00:25:21.273Z","path":["blog"]},{"_id":"unity-freebies-game-timer-cinematic-letterbox-and-fade-in-scripts","title":"Unity Freebies: Game Timer, Cinematic Letterbox, and Fade-in Scripts","description":"Two awesome Unity behavior scripts that you can download and use for free right now!","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2012-11-14T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"body":"

$\"GUI$

Two awesome Unity behavior scripts that you can download and use for free right now!

GUIGameTimerAndGUILetterbox.zip (3 KB ZIP)

The GUI Gamer Timer runs a timer during the life of your game. You can display the timer on the screen or\n simply have it running behind the scenes so that you can determine the elapsed minutes and seconds from\n other scripts in the game.

The GUI Letterbox script draws a cinematic letterbox on the screen which can open up to expose the full view\n of your game at the time you specify. Along with some good music, this can help you set a very interesting\n mood! The letterbox script also contains fade-in functionality which you can use alone or in combination\n with the letterbox.

$\"\"$

\n\n

Create a new GameObject and name it ‘GameController’. Drag both scripts onto a GameObject that’s in the\n scene. Select the GameObject that holds the script and then look in the Inspector panel.

Following is a definition of each attribute that you can change in the inspector:\n

GUI Game Timer

Position X – Specifies where to draw the timer from the left-hand side of the screen.\n
Position Y – Specifies where to start drawing the timer from the top-most side of the\n screen.
Gui Depth – Specifies the depth to render the timer on the GUI plane. A lower number,\n such as zero can help ensure the timer draws atop any other GUI you might be rendering.
Show Time – Specifies whether or not to show the timer on screen. If the behavior is\n active, the timer will still be running whether it’s shown on screen or not. This will allow you to\n access the timer from other scripts and call the script’s getMinutes() and getSeconds() methods to\n determine elapsed time.

GUI Letterbox

Use Letterbox – Specifies whether or not to use the letterbox feature.
Use Fade In – Specifies whether or not to use the fade-in feature.
Black Solid Texture – You need to drag and drop the included blackSolid.gif file on\n this property in the inspector!
Start Fade In Minutes – When, in minutes, to start fading in from black (can be zero to\n use seconds only)
Start Fade In Seconds – When, in seconds, to start fading in from black (combines with\n minutes if minutes is set greater than zero).
Start Open Letterbox Minutes – When, in minutes, to start opening the cinematic\n letterbox (can be zero to use seconds only)
Start Open Letterbox Seconds – When, in seconds, to start opening the cinematic\n letterbox (combines with minutes if minutes is set greater than zero).

If you like these free goodies, please give us a +1, Tweet and share with your friends!

","modified":"2021-06-23T15:52:13.729Z","path":["blog"],"layoutName":"SidebarRight","ogImage":"","subtitle":""},{"_id":"unity-preferences-your-built-in-keyboard-cheat-sheet","title":"Unity Preferences – Your Built-in Keyboard Cheat Sheet","description":"An easy way to find keyboard commands in the Unity game development tool.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2012-11-11T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"body":"\t

Learning keyboard commands in the Unity game development tool is essential to working fast and efficiently.\n\t\t\tTo find them, you don’t have to search the Web for a cheat sheet; you can simply open Unity’s Preferences.\n\t\t\tFrom the menu bar, select Unity > Preferences…

\n\t\t

$\"Keyboard$

\n\t\t

Once the Unity Preferences view appears, select Keys and then choose from the list of Actions. The keyboard\n\t\t\tcommands for the selected action are then shown.

\n\t\t

We recommend that you avoid changing the keyboard action settings if you’re new to Unity because the default\n\t\t\tsettings may be referenced in the documentation and tutorials that you’ll be learning from.

\n","modified":"2021-05-08T00:43:41.829Z","path":["blog"]},{"_id":"create-player-health-status-indicator-for-unity-gui-part-3","title":"Create a Player Health Status Indicator for the Unity GUI, part 3","description":"Third and last of a multi-part series teaching yhow to build a player health status indicator for the Unity GUI.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2012-11-08T00:00:00.000Z","topics":["game-dev"],"features":["syntax highlighter"],"path":["blog"],"body":"

This is the third of a multi-part series that will teach you how to build a player health status indicator for the Unity GUI. If you haven’t already, you should read Part 1 and Part 2. You might also wish to download download the starter assets, which you can then import into Unity.

\n\n

$\"\"$

\n\n

Introduction

\n\n

So, we’ve got our health status indicator on the screen and we can manually drag on the Health Width property in the inspector to shrink and expand the green health bar while the game is running. But, of course, we need to be able to change the health by accessing the healthWidth property from some other behavior script in the game.

\n\n

Let’s imagine a scenario in which an enemy is attacking your hero. Each time the enemy gets within the vicinity of the hero or touches the hero, a script attached to the enemy game object might recognize the collision and send a signal to the health status widget to change.

\n\n

In today’s post we’ll tell you how to do it and you’ll be learning a simple skill that you’ll use a lot in your Unity games – you will learn how to access global variables or properties in one behavior script from another.

\n\n

Access the Health Status from Any Behavior Script

\n\n

First, let’s just get this working and then we’ll break it down to understand what the script is doing. Complete the following steps to see the green health being reduced automatically at runtime:

\n\n

First, make sure that the GameObject that your HealthBarScript is attached to is named “GUI Health”.
Next, create a new GameObject and name it ‘Enemy’.
Create a new behavior script using Assets > Create > Javascript. Name it ‘EnemyBehaviorScript.’
Drag and drop the EnemyBehaviorScript on the Enemy GameObject and make sure that GameObject is in the scene.

\n\n

Finally paste the following code into the EnemyBehaviorScript, save the script and run the game to see the health shrink away to fatality! If it’s more convenient, you can also just download the EnemyBehaviorScript.js file and import it into Unity.

\n\n

#pragma strict\nprivate var guiHealth : GameObject;\nprivate var healthBarScript: HealthBarScript;\n/*\nStart is called only once in the lifetime of \nthe behavior. So, it's a good place to initialize \nthings only once.\n*/\nfunction Start() {\n    guiHealth = GameObject.Find(\"GUI Health\");\n    healthBarScript = guiHealth.GetComponent(\"HealthBarScript\");\n    // Set initial value of the health...\n    // Uncomment the line below and call reduceHealth() in the Update() method to watch health decrease\n    healthBarScript.healthWidth = 199;\n    // Uncomment the line below and call increaseHealth() in the Update() method to watch health increase\n    // healthBarScript.healthWidth = -8;\n}\nfunction Update() {\n     reduceHealth();\n     //increaseHealth();\n}\n/*\nOnly decrease the health bar if it's greater than the min width it should ever be;\nbecause we do not want it decreased beyond the left of its frame.\n*/\nfunction reduceHealth() {\n   if(healthBarScript.healthWidth > -8) {\n       healthBarScript.healthWidth = healthBarScript.healthWidth - 1;\n   }   \n}\n/*\nOnly increase the health bar if it's less than the max width it should ever be;\nbecause we do not want it stretched out beyond its frame.\n*/\nfunction increaseHealth() {\n   if(healthBarScript.healthWidth < 199) {\n       healthBarScript.healthWidth = healthBarScript.healthWidth + 1;\n   }\n}

\n\n

How it Works

\n\n

You may notice that we declared our global variables as private this time.

\n\nprivate var guiHealth : GameObject;\nprivate var healthBarScript: HealthBarScript;\n\n

By declaring them global (outside of any function in the script), they are available for use by any function in the script. By declaring them private, we ensure that they will not create properties in the Unity Inspector panel that might distract you or other developers on your team. For this script, they’re not mean to be used in the Inspector.

\n\n

Next, we have the Start() method.

\n\n

Oh, by the way…

\n\n

Did you notice that sometimes we use the word function and sometimes we use the word method? The two words mean essentially the same thing. In JavaScript lingo, they’re commonly referred to as functions. Unity documentation calls them methods. So, the words are interchangeable.

\n\n

Back to the Start() method…

\n\n

function Start() {\n    guiHealth = GameObject.Find(\"GUI Health\");\n    healthBarScript = guiHealth.GetComponent(\"HealthBarScript\");\n    ...\n}

\n\n

When you use a Start() method in a behavior script, it gets called only once in the lifetime of the behavior. So, it’s a good place to initialize objects. In this case, we’re making guiHealth represent the GameObject that can be found in the game by the name ‘GUI Health’. The we make healthBarScript represent the script named ‘HealthBarScript’ that we expect to be attached to the guiHealth GameObject that we just found. Since the HealthBarScript is attached to a GameObject, we need to access the GameObject in the scene first. The, once we have access to it, we can use .getComponent() to get components attached to that object.

\n\n

Now the next lines are just there to set the initial health. You can comment one out and uncomment the other and vise-versa.

\n\n

// Uncomment the line below and call reduceHealth() in the Update() method to watch health decrease\nhealthBarScript.healthWidth = 199;\n// Uncomment the line below and call increaseHealth() in the Update() method to watch health increase\n// healthBarScript.healthWidth = -8;

\n\n

You also want to toggle the comments on the reduceHealth() and increaseHealth() calls respectively.

\n\nfunction Update() {\n reduceHealth();\n //increaseHealth();\n}\n\n

By toggling those comments, you can watch the health shrink or grow; just a simple acid-test to prove that it works.

\n\n

The reduceHealth() and increaseHealth()code> methods simply add to or subtract from the width of the healthWidth property. They are surrounded by an if condition, which just ensures that the green status bar cannot shrink or grow beyond the decorative frame.

\n\n

Conclusion

\n\n

In this post, we taught you how to change the health in the status indicator through code. In particular, we should you how to access properties in one behavior script from another by first accessing the GameObject the script is attached to.

\n\n

In this three part series, we’ve given you the essential knowledge you need to indicate your player’s health. Of course, you’ll have to take it from here and integrate these principles into your working game. If you have any questions or suggestions for something else you’d like us to cover, please comment.

\n\n

Until next time, enjoy the craft!

\n\n

<< Previous: Part 2

\n","layoutName":"SidebarRight","modified":"2021-06-01T04:23:41.789Z","subtitle":""},{"_id":"create-player-health-status-indicator-for-unity-gui-part-2","title":"Create a Player Health Status Indicator for the Unity GUI, part 2","description":"Second of a multi-part series teaching how to build a player health status indicator for the Unity GUI.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2012-10-16T00:00:00.000Z","topics":["game-dev"],"features":["syntax highlighter"],"path":["blog"],"body":"

This is the second of a multi-part series that will teach you how to build a player health status indicator for the Unity GUI.

\n\n

$\"\"$

\n\n

Introduction

\n\n

In the first part of this series, we provided the assets and a few tips for getting results fast. If you haven’t already, you should read Part 1 and also download the starter assets.

\n\n

In today’s post, we’ll examine the Javascript that can be applied to any Unity GameObject to create the Health Status Indicator in your game’s GUI. The goal for today’s post is to learn how the script works and to hopefully learn a little bit about Javascript programming in Unity.

You’ve got an awesome game to make, so let’s get on with it…

\n\n

First, let’s review

\n\n

Our Javascript for the Health Status Indicator is very simple at this point, but it’s going to get a bit more complex. For that reason, it’s very important that you learn about this in phases. Let’s start by taking a look at the full script so that we have the whole thing in mind and then we’ll break it down line by line.

\n\n

#pragma strict\n// JavaScript\nvar backgroundTexture : Texture;\nvar foregroundTexture : Texture;\nvar frameTexture : Texture;\nvar healthWidth: int = 199;\nvar healthHeight: int = 30;\nvar healthMarginLeft: int = 41;\nvar healthMarginTop: int = 38;\nvar frameWidth : int = 266;\nvar frameHeight: int = 65;\nvar frameMarginLeft : int = 10;\nvar frameMarginTop: int = 10;\n\nfunction OnGUI () {\n    GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight), backgroundTexture, ScaleMode.ScaleToFit, true, 0 );\n    GUI.DrawTexture( Rect(healthMarginLeft,healthMarginTop,healthWidth + healthMarginLeft, healthHeight), foregroundTexture, ScaleMode.ScaleAndCrop, true, 0 );\n    GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth,frameMarginTop + frameHeight), frameTexture, ScaleMode.ScaleToFit, true, 0 );\n}

\n\n\n

UnityScript is very much, but not exactly like JavaScript

\n\n

Before we get too far into this, you should be aware that the script language in Unity is very often referred to as ‘JavaScript’. It is also called UnityScript and while it is very much like JavaScript, it does have some differences.

\n\n

If you are familiar with JavaScript for the Web, but not UnityScript, then you may want to read UnityScript versus JavaScript in the UnifyWiki. If you’re starting to learn programming by using Unity, then don’t worry about it. Programming concepts are similar across all languages and by learning any one language, you’ll be better prepared to learn another.

\n\n

Use #pragma strict

\n\n

The first line in our program, #pragma strict, is very important to understand because it relates to performance and performance is extremely important in games. As a general rule, you should put that line atop all of your Javascript files in Unity, even though it isn’t required. Here’s why:

\n\n

When you create a variable in most programming languages, you need to tell the compiler what kind of object or datatype the variable represents. Is it a string? A number? A texture? The compiler usually needs to know. But in JavaScript, you do not have to specify the type of a variable. When you must specify the type of a variable, it is known as strict typing. When you do not have to specify the type of variable it is known as dynamic typing because the type is figured out dynamically at runtime.

\n\n

Dynamically typed variable declaration

\n\n var healthWidth = 199;\n\n

Statically typed variable declaration

\n\n var healthWidth: int = 199;\n\n

See the difference there? In the dynamically typed example, the variable healthWidth is a number, but it could also be used for a string or a boolean or some other type because we didn’t specify the type. In the statically typed example, we declared the variable as an int (a.k.a. an integer, which is just simple kind of number).

\n\n

The problem with using dynamically typed variable declarations is that you’re forcing the compiler to make additional calculations while your game is running. The engine has to ask questions. Does this work as a string? Nope. Let’s try a boolean. Nope. An int? All this additional evaluation takes time, which can reduce the performance of your game.

\n\n

By using #pragma strict at the top of a script, we are telling Unity to disable dynamic typing in that script, which forces us to declare the type of each variable we create. If a type is not known, Unity will then report compile errors. This will not only improve the performance of your game, it will also make you a better programmer. So, as a rule of thumb, just do it.

\n\n

Comments in your code

\n\n

The second line of our script starts with two forward-slashes, which indicates that it’s just a comment.

\n\n // JavaScript\n\n

A comment is just a note inside of your program that helps you and other developers understand something. Humans can read comments in the code, but the engine will just ignore them. In this case, we’re just throwing in a note that the format of the script is JavaScript and not some other language that Unity also supports such as C#.

\n\n

Two forward slashes are for single-line comments. If you want to have multiple lines of commentary in a single block, you can use the following:

\n\n/* This is an example \nof a multi-line comment. \nAre we having fun yet? */\n\n

Global variables and the Unity Inspector

\n\n

The next three lines of the code define three global variables, each of the type Texture.

\n\nvar backgroundTexture : Texture;\nvar foregroundTexture : Texture;\nvar frameTexture : Texture;\n\n

Global variables are usually declared at the very top of a script and not inside of any function. This makes them available for access from anywhere in the script. Where a variable is available for access is known as the variable’s scope, so variables outside of any function are said to have global scope.

\n\n

You see, if a variable is declared first inside of a function you can’t get to it from any place outside of that function. Such a variable is said to be scoped to the function or private to the function.

\n\n

Globally scoped variables show up in the Inspector panel as values that can be populated or modified without changing the script’s code. In the image below, you can see that all of the global variables in our script at right are also exposed in the Unity Inspector panel at left.

\n\n

$\"\"$

\n\n

Our Health Status Indicator has already shown us two reasons why this is valuable. First, we are able to drag and drop our own textures into the Inspector slots created by the variables backgroundTexture, foregroundTexture, and frameTexture. That makes our script reusable and easy to customize. That is to say, you can reuse it for more than one game without changing any code. All you need to do is provide your own images to the widget by dragging and dropping them onto their respective slots in the inspector.

\n\n

Second, we are able to drag left and right on the healthWidth slot in the Inspector while the game is running and when we do this, we can see the green health status bar reducing or increasing in size. So, the Inspector allows us to manipulate the values of global variables at runtime. Very cool!

\n\n

Texture image size settings

\n\n

The next two lines in our script specify the default width and the height of the green health bar image.

\n\nvar healthWidth: int = 199;\nvar healthHeight: int = 30;\n\n

Later in the script, we use these numbers to establish a size for the rectangle that we render the texture on. We got those pixel dimensions from the drawing program we used when we saved the file. When a file is an image, you can usually get its dimensions just by inspecting the properties of the file. In Windows, you can right-click, select Properties from the context menu, and then select the Details tab of the resulting dialog. On a Mac, you can right-click and select Get Info.

\n\n

Remember, the reason why we made the image width and height into global variables is so that our script becomes more generic and reusable. You probably want to create your own graphics for the widget, for example. You may wish to have the widget be a different size also. What we’re trying to do, therefore, is to make these things easier to customize without enforcing any knowledge of the underlying code.

\n\n

Positioning textures on the screen

\n\n

The next two lines of code specify the distance from the left and top of the screen where the green health bar’s rectangular texture should begin.

\n\nvar healthMarginLeft: int = 41;\nvar healthMarginTop: int = 38;\n\n

We will use the healthMarginLeft variable to specify the horizontal position (from the left of the screen) where the texture’s rectangle will begin. And Similarly, we’ll use the healthMarginTop to specify the vertical position from the top of the screen.

\n \n

In computer graphics, we often refer to the horizontal axis as x and the vertical axis as y. The top-most and left-most position on the screen is expressed as position (0,0) in (x,y).

\n\n

$\"\"$

\n\n

So, if our variables define x and y coordinates, it could be expressed like this: (healthMarginLeft,healthMarginTop). The point (41,38) is where the top-most and left-most corner of our texture will be placed. So, it will have a left margin (a distance to the far-left hand side of the screen) of 41 pixels. And it will have a top-margin of 38 pixels.

\n\n

But keep in mind that we haven’t drawn anything yet. We are only setting up the variables that we will use to size and position our textures a little later.

\n\n

The next four lines are very similar to the last four we’ve looked at. They do the same thing, but they define a width, height, and margins for the background texture and top frame texture.

\n\nvar frameWidth : int = 266;\nvar frameHeight: int = 65;\nvar frameMarginLeft : int = 10;\nvar frameMarginTop: int = 10;\n\n

To keep things as simple as possible, we cropped the background layer and the top-most layer images exactly the same size. That way, we can use the same dimensions and margins to position and render those two layers. The green health bar was an exception, which we cropped uniquely because it has to shrink or stretch to represent losing or gaining health.

\n\n

The OnGui() function

\n\n

The next stanza in the code is where the GUI functionality is really pulled together. When a script contains the OnGUI() function and is enabled in the game, it gets called every frame just like the Update() function.

\n\nfunction OnGUI () {\n...\n}\n\n

It is within this function that we create the GUI controls that will be seen on the screen. Which brings us to the first line of code within the function – the creation of a GUI texture. Think of a GUI texture as a 2D image that is parallel to the screen facing the user.

\n\n

GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight), backgroundTexture, ScaleMode.ScaleToFit, true, 0 );

\n\n

This method can be understood by looking at the documentation in the Unity API. Take a moment now to review the API documentation for the GUI.DrawTexture function in the Unity API documentation.

\n\n

API is an acronym for Application Programmer’s Interface; it’s the official documentation for a software development system. Each development language or system usually has a standard set of documents that comprise the API. Learning how to read and understand the API documentation for your platform is critical to your success as a developer!

\n\n

For now, we’re going to try to explain very briefly how to understand this function’s documentation. Let’s break it down…

\n\n

GUI.DrawTexture

\n\n static function DrawTexture (position, image, scaleMode, alphaBlend, imageAspect) : void\n\n

Everything within the parenthesis represent values that you pass into the function when you call it. Below, we provide the type of each value and a description.

\n\n

position is of the type Rect. In API documentation, that’s usually stated as position : Rect (the variable, a colon, and then the type; it means ‘this function expects a position to be passed in when you call it and the position needs to be a Rect’). The position : Rect, in this case, is the rectangle within the screen to draw the texture in.
image is of the type Texture (image : Texture), which is the texture to display within the given Rect.
scaleMode is one of either of the following constants: ScaleMode.StretchToFill, ScaleMode.ScaleAndCrop, or ScaleMode.ScaleToFit. This defines how to scale the image when the aspect ratio of it doesn’t fit the aspect ratio to be drawn within. That is to say – when the proportional relationship between the image’s width and height does not match that of the rectangle that you’re drawing it within.
alphaBlend is of type boolean, which means either true or false. If the image has alpha blend information, then you can set this to true so that the image will blend with the background using the alpha information in the image. If the image has no alpha information, then we could set this to false.
imageAspect is of type float, which means a floating point number (basically, a decimal number). If you pass in 0 (the default), the aspect ratio from the image is used. Pass in w/h for the desired aspect ratio. This allows the aspect ratio of the source image to be adjusted without changing the pixel width and height.

\n\n

Drawing the first layer of the health status indicator

\n\n

So, now that we kind of understand how the GUI.DrawTexture() function works, let’s take another look at the line we use to draw the first layer (the red that shows through when the green health bar is shrunk).

\n\n

GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight), backgroundTexture, ScaleMode.ScaleToFit, true, 0 );

\n\n

Let’s break it down a little. Starting with the function call itself:

\n\n GUI.DrawTexture(\n\n

GUI is an object that Unity engine makes available to us. We know this because it’s documented in the API. The object has several functions that you could call from it using the dot notation. If you type the word GUI in the Unity editor and then a period character, the code completer should show a pop-up menu of the functions that are available on that object.

\n\n

TIP: You can jump quickly to the API from within the MonoDevelop editor by selecting the menu Help > Unity API Reference.

\n\n

The next thing that is passed into the function is the Rect which defines the position and size of the rectangle on the screen.

\n\n Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight)\n\n

To construct a Rect object we can use Rect(left, top, width, height). Instead of hard-coding values, we put variables in those spots. But notice that when we define the width and height, we add the margin. Since the rectangle will start after the margin, then we must increase the size of the rectangle by the amount of the margin.

\n\n

Anyway, the statement then continues with…

\n\n , backgroundTexture, ScaleMode.ScaleToFit, true, 0 );\n\n

The backgroundTexture is a reference to the image that you drag and drop into the variable’s slot in the Inspector when using the script. The meaning of the rest of the values has already been described above.

\n\n

The last two GUI.DrawTexture lines are for the middle layer and the foreground layer. The bottom layer and top layer are defined the same except for their texture. So, let’s just focus now on that middle layer – the green health status bar.

\n\n

There’s something special about it…

\n\n

Drawing the middle layer (the green bar)

\n\n

GUI.DrawTexture( Rect(healthMarginLeft,healthMarginTop,healthWidth + healthMarginLeft, healthHeight), foregroundTexture, ScaleMode.ScaleAndCrop, true, 0 );

\n\n

Notice that the ScaleMode used in the DrawTexture function is different than what’s defined for the bottom and top layers. That’s because the size of the green bar in the middle layer is going to change size as the game is played. If the ScaleMode is not set just so, the texture will do some strange things when sized.

\n\n

Conclusion

\n\n

You’ve finished the second in a multi-part series. This post was focused on teaching you how our script works as well as a little bit about programming.

\n\n

In Part 3, we’ll learn how to reduce or increase health through code while the game is running.

\n \n \t

<< Previous: Part 1 Next: Part 3 >>

\n ","layoutName":"SidebarRight","modified":"2021-06-01T04:24:20.886Z","subtitle":""},{"_id":"create-player-health-status-indicator-for-unity-gui-part-1","title":"Create a Player Health Status Indicator for the Unity GUI","description":"First of a multi-part series teaching how to build a player health status indicator for the Unity GUI.","thumbnail":"https://s3.us-east-2.amazonaws.com/codyburleson.com/images/logo-unity.svg","created":"2012-10-13T00:00:00.000Z","topics":["game-dev"],"menus":["blog"],"features":["syntax highlighter"],"body":"

This is the first of a multi-part series that will teach you how to build a player health status indicator for the Unity GUI.

\n\n

$\"\"$

\n\n

Introduction

\n\n

In this series, we’ll build a cartoon-styled health status indicator and you will learn how to create one with a style that suits your game. What we want to do in this part of the series is to simply give you a starting point that will get you results fast. We’ll focus on finer details in follow-on posts.

\n\n

If you download the Health Status Indicator assets, you can have the health status indicator that’s shown above in your game’s GUI very quickly. Though it will not yet be fully functional, it will give you a good base from which to start. So, let’s get on with it…

\n\n

Draw the health status bar on 3 layers

\n\n

Start by drawing your health status bar using any graphics tool that supports layers. We used Adobe Illustrator to get the cartoon style that we wanted. We then used Adobe Photoshop to crop and save each layer as a transparent GIF and PNG-24 files.

\n\n

$\"\"$

\n\n

The layers are going to be stacked and properly aligned in the Unity GUI. As the player loses health, the background and top frame layers remain static, but the middle layer will be reduced in size horizontally.

\n\n

When preparing the image assets from the layers, crop the background layer and the frame layer exactly the same size so they will align easily when placed in the GUI.

\n\n

The green layer, which represents health, must be cropped exactly around the dimensions of the green bar with no transparent space around it. This is because it will be resized horizontally to represent the player’s health being reduced or increased. If the image had transparency around it, you can get unexpected results in the GUI that are not easily fixed by the math in your code.

\n\n

Be sure to save the images with their transparency so that you’ll be able to see through the transparent parts to the game world behind the health status bar.

\n\n

We saved the foreground and background images as GIF files because that file format is good for images that don’t have a lot of photographic detail or gradients. With a GIF, we were able to get the file size as small as possible. For the frame, we used a transparent PNG-24, which was necessary for the semi-transparent effect that mimiks the reflection of light on glass.

\n\n

You can import your image assets by right-clicking in the Unity Project panel and choosing Import New Asset… from the context menu (shown below). In our case, we created a folder to help keep our assets organized.

\n\n

$\"\"$

\n\n

Create a simple script to start with

\n\n

Now, we’re going to need a Unity script to represent and control our health status widget. You can create a new script by right-clicking in the Project panel and choosing Create > Javascript. Name the script ‘HealthStatusBarScript’.

\n\n

Below you will find a simple starter script that will allow us to get something showing in the GUI quickly. We’ll explain this code line-by-line in the next article of this series and then later, we’ll improve it.

\n\n

#pragma strict\n// JavaScript\nvar backgroundTexture : Texture;\nvar foregroundTexture : Texture;\nvar frameTexture : Texture;\nvar healthWidth: int = 199;\nvar healthHeight: int = 30;\nvar healthMarginLeft: int = 41;\nvar healthMarginTop: int = 38;\nvar frameWidth : int = 266;\nvar frameHeight: int = 65;\nvar frameMarginLeft : int = 10;\nvar frameMarginTop: int = 10;\n\nfunction OnGUI () {\n    GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight), backgroundTexture, ScaleMode.ScaleToFit, true, 0 );\n    GUI.DrawTexture( Rect(healthMarginLeft,healthMarginTop,healthWidth + healthMarginLeft, healthHeight), foregroundTexture, ScaleMode.ScaleAndCrop, true, 0 );\n    GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth,frameMarginTop + frameHeight), frameTexture, ScaleMode.ScaleToFit, true, 0 );\n}

\n\n

Create an empty GameObject, attach the Javascript and associate the textures

\n\n

In order for the script to do anything, it needs to be attached to a GameObject, so create a new GameObject by selecting from the menu: GameObject > Create Empty. Once the GameObject is made you can right-click on it and rename it to something meaningful like ‘HealthStatusBarGUI’. Drag the script onto the GameObject. You should then see the script’s global variables in the Inspector panel where you must add each of the textures to the appropriate slot.

\n\n

$\"\"$

\n\n

Tip: You can add the textures to each slot by simply dragging and dropping each image asset from the Project panel onto the appropriate texture slot in the Inspector.

\n\n

Run the game and admire your progress

\n\n

At this point, you can run the game and see your new health status bar on the screen!

\n\n

$\"\"$

\n\n

To get a feel for how the indicator will work during game play, drag the Health Width item left and right in the Inspector panel while the game is playing.

\n\n

Conclusion

\n\n

In this article, we provided the assets and a few tips for getting you started on building a player health status indicator for your game. What we wanted to do was give you a starting point that would get you results fast. We discussed how you can prepare the graphics for your GUI in layers which will allow the green health bar to shrink and expand beneath the indicator’s glass and frame. We also provided a starting script and a way to manually drag a control to preview how the widget’s going to move during game play.

\n\n

In Part 2, we’ll examine the Javascript line by line so that you can learn how the script works and hopefully also improve your programming skills.

\n\n

Until next time, enjoy the craft!

\n\n\t\t\t

Next: Part 2 >>

","modified":"2021-06-01T04:24:32.708Z","path":["blog"],"layoutName":"SidebarRight","subtitle":""}]

Topic: Game Dev