Expanding Unity Stealth Demo with Vanish, Energy Bar, Player and Enemy Traps and adding Mobile Support

Expanding Unity Stealth Demo with Vanish, Energy Bar, Player and Enemy Traps and adding Mobile Support

Matthew Joyal, Mounika Chillamcherla, Yan Bai 

This tutorial is intended to pick up where the end of the Stealth demo (https://unity3d.com/learn/tutorials/projects/stealth) left off so make sure you've finished that first.

Vanish Feature

1. Introduction

We added a new vanish feature to the game. There is a button called “Vanish” in the left-top corner of the scene. When this button is clicked, the player vanishes. He can not be detected by the guards, cameras or lasers. During this vanished state, the player blinks to demonstrate that they are invisible. This state lasts 10 seconds and can be used only once each game.

2. Implementation

The implementation is not complicated. We added an empty object in the scene and add a C# script called “VanishPill”.

2.1 How to disable detection

We need a boolean value to demonstrate whether or not the player is vanished, such as a variable called “isPlayerVanished”. When the player collides with guards, cameras or lasers. This is the original code from Stealth project:

We need to add one more condition which is whether or not the player is vanished. If ture, trigger the alarm. Otherwise, do nothing.

2.2. How to make player blinking

The logic is very similar to the laser. Enable and disable the renderer property alternately so the player will appear and disappear. But because the player consists of four parts, body, board, glass and harness. So remember to vanish all four parts.

Line 48 - Line 55 is used to limit the vanished period to 10 seconds. If the player is vanished, we decrease the time (pillTime demonstrates how long the vanished state lasts, initially it is 10s). If the time decrease to 0s which means vanish end, we set the bool to true and display the player.

Line 59 - Line 80 is used to make the player blink. I will not elaborate on this because you can find this in the “1.08 Laser Grids” tutorial (https://unity3d.com/learn/tutorials/projects/stealth/laser-grids).

3. How to make an energy indicater:

The energy indicator displays how much energy (Health) is left. When Energy=0, the player is dead. If the player has n amount of health, the energy of 1/nth part is decremented for each injury.

The energy indicator is made of green and red bars. As the energy decreases, the width of green bar decreases and the width of the red bar increases. In order to implement this add an Empty Game object and move it below this scene. Next create a new script called EnergyBarScript. This script (seen below) will draw the bars (Rect) onto the screen. The two public Textures should be populated with two textures of your choosing by dragging and dropping to the Unity Inspector.

Finally, we can change the width of the energy bar in this way.

4. Player Jump

In order to make it easy for the player to win the game, the height of laser fence is reduced and the jump attribute is added to the player. Key j along with any arrow key is pressed to perform the player jump. Make sure that you add rigid body to the player. Speed and jump velocity are declared as public so that we can change them dynamically. This code is added in the FixedUpdate() in the PlayerMovement script.

This makes the player to cross the laser fences without the alarm being triggered.

 5. Creating a Trap for the Player

While there are already many traps in the scene for the player all of them are part of the security system. However, if the player were to bump into an object it would make some noise which should attract the enemies to that location.

For that purpose we will be using the already included prop_barrel to add another obstacle for the player to watch for and avoid.

First look in the Assets/Models folder for the prop_barrel and add it to your scene. Next use the inspector to add a Rigidbody to the barrel. In the Rigidbody properties check X, Y, and Z for both Freeze Position and Freeze Rotation. It should look like this:

Next add an Audio Source component to the barrel. This will be what is used to play the sound when the player gets close enough to the barrel. Make sure to uncheck Play On Awake. You may use any Audio Clip you want, I had a dog barking clip lying around so I used that. The finished component should look like this:

Next add a Sphere Collider to the barrel, this will be used to detect when the player is too close to the barrel. The finished component should look close to this but feel free to adjust the Radius and Center to your liking. Make sure to set it as a Trigger.

Next we will add a Capsule Collider to the barrel so the player can’t run through it. Again feel free to play with the values of the component, below are our values.

Finally, added a new script called BarrelControl. The script seen below grabs the player and lastPlayerSighting on Awake. Then if the player enters the sphere collider it triggers the audio clip and sets the lastPlayerSighting position to the location of the barrel. This will cause all the enemies to converge on the very loud barking dog.

The player trap is now completed and can be dragged to the Prefab folder and then duplicated and moved around the environment.

6. Creating a Trap for the Enemy

Next we created a deployable trap for the enemy. To accomplish this create a new Empty GameObject and place it below the scene rename it EnemyTrap. Next add a new script to the new empty object called EnemyTrap and open it. At the top of the script add a public GameObject variable. This can be used to drag a PreFab of your choice to act as the trap physical representation of the trap, for our demo I just created a small sphere with a point light for this purpose and dragged it onto the inspector.

You will also see two private variables player and hasTrap which is set to true. Then in the OnGUI function we grab the player using FindGameObjectWithTag. Then we create a GUI Box to house the label and the button. We then create a button that when pressed will check if the player still has their trap and if they do it will set hasTrap to false and then Instantiate the trap object we’re passing in at the characters position.

Speaking of the trap object we’re passing in we need to add a few things. First add a Sphere Collider this will act as the zone that will cause the enemy to be destroyed. You can see our settings below, make sure to set it as a trigger.

We also need the trap object to have a small script so add a new script called EnemyTrapController and open it. In this script we will just be using the OnTriggerEnter function in this function we check if the Collider object is tagged as an enemy, then if it is the enemies CapsuleCollider. This is important since the enemy also has another sphere collider that has a large radius and we only want to destroy the enemy if they get within the radius of our trap. If they are we then call the Destroy on the Collider gameObject and then on the gameObject itself. This way the trap is only used once.

With that you should have a working trap that you can use to eliminate an enemy.

7. Adding Mobile Touch Controls and Publishing to a Phone

Finally, we added touch controls to the Stealth game and pushed it out to one of our phones. To accomplish this we used one of the provided Unity Assets. To Import it go to Assets > Import Package > Standard Assets (Mobile) and import all of the files (we only use a few but you might want to explore some of them later).

The next step is very important for getting things working, if you look in your project you will see a new folder called Standard Assets (Mobile) this is where the Assets auto imported to. The problem is the scripts found in this folder are compiled after your other scripts you’ve done. This is a problem because we want to be able to reference the Joystick.js class so that we can use it. To fix this we need to create a new folder in our main Assets folder called “Standard Assets” and move all of the contents of Standard Assets (Mobile) to this new folder. Standard Assets gets compiled before the rest of the scripts we made and thus the Joystick.js class will be available in a C# script.

In Standard Assets/Prefabs find the Single Joystick and drop it in the Hierarchy. If you look at the properties you will see the GUITexture component with a Pixel Inset. You can use the Pixel Inset to position the joystick on the screen. Do this rather than changing the transform. For our purposes we changed the X to 175 and Y to 75 as seen below.

You also want uncheck the enabled check box near the name in the Inspector as shown below. We will be automatically enabling the joystick gameobject if it is detect that we are playing on a mobile device.

Next open the PlayerMovement script made early in the Stealth tutorial and add two public variables one is a GameObject and one is a Joystick. We will actually be using the Single Joystick object we just added to the hierarchy (through the Inspecter on char_ethan) for both of the variables. The reason for doing this is to be able to access the SetActive function on the game object and also get access to the joystick properties.

In the Awake function add the following code which sets the joystick gameobject to active. It also sets the different orientations our game supports. Since we only want to play in landscape we set those to true and the portrait to false. Finally, we set ScreenOrientation to auto rotate so it will orient to whichever orientation the user has their device in.

In the above snippet you will notice a call to IsMobile this is a small helper method that just checks what device the game is running on, it is as follows:

Now we have the joystick auto appearing if the user is playing on a mobile device. We still have to wire it up to control the player however. To do this we make a small edit to the existing code found in the FixedUpdate function in the same PlayerMovement script.

You will see if the device is mobile we get the joysticks position in the x for the h and its position in the y for the v. We then cap it by saying if h and v are less than or equal to 0.9 and both are greater than -0.9 (you can play with these values to make it as sensitive as you want) set sneak to true else it is false then pass it into the pre-existing MoveManagement method. And that’s it now you should be able to move the character on your mobile device. But what about the shout/attract feature!

Adding a shout button on mobile is easy all you have to do is add the OnGUI function and a private isShouting bool. When the button is clicked set isShouting to true.

Then in the update function make a small change so if we’re using mobile and the isShouting is true run the shout logic.

That’s it! Now you can deploy it to your mobile device by going to File > Build Settings and pick your platform by clicking on it and then clicking Switch Platform. Click Build and Run and select a folder to save the build in. Unity will then build and then deploy it to your connected mobile device. Keep in mind that you most likely will have to have your mobile device developer unlocked.