My journey becoming a Unity game developer: 2.5D Infinite Runner-Collecting an item from a chest

Objective: Create animations to open the container’s lid, and play an image of the Hazmat Suit onscreen when the Player collects it. Also, allow the Player to open the Container’s Lid and collect a Hazmat Suit.

Player opens the container to receive an item.

Let’s begin with creating an animation for the Container Lid to open. The 1st animation we will create is a Closed Lid animation. With the Scifi Lid game object selected, open the Animation tab, click the Create button, and name the animation Closed Lid.

We want to rotate the Container Lid, therefore click on the Add Property button, select Transform, and click the Rotation “+” sign. This will automatically add keyframes in the timeline at zero and 60 frames.

Closed Lid Rotation keyframes created for the animation.

Since the lid will stay closed with this animation, just leave the Rotation set to zero for all 3 axis.

Closed Lid Rotation is set to zero.

To create the Open Lid animation, select Add Property->Transform->Rotation. Press the REC button to begin setting the keyframes, and at keyframe zero we will still have the Rotation set to zero on all 3 axis. However, at keyframe 60 we will change the Rotation on the X-axis to -77 to rotate the lid open.

Open Lid animation created.

In the Animator, we need to create 2 parameters Type Bool name OpenLid and ClosedLid. Create a Transition from Closed Lid to Open Lid with the Has Exit Time turned off. The Fixed Duration can either be left on or turned off because it won’t have any significant impact on the animations transition. Under Conditions, add Open Lid equals True and Closed Lid equals False.

Transition from Closed Lid to Open Lid animations prepared with Bool conditions.

To make sure the Closed Lid and Open Lid animations work properly, make sure to turn off Loop Time for each animation in the Animations folder.

Open Lid and Closed Lid animations Loop Time is turned off.

Now once the lid is open, we want the Player to collect an item from inside the container. We added a clothes game object inside that particular container named Hazmat Suit for the Player to collect. The Hazmat Suit object will be a child of that Sci-Fi Container game object as you can see in the image above.

Also, we want an image to appear onscreen that will show the Hazmat Suit the player collected when the container’s lid is opened. In the Canvas game object, create an Image object name Hazmat Image. In the Source Image slot, place the image of the Hazmat Suit that will appear onscreen.

Hazmat image object added to the Canvas object.

With the Hazmat Image object still selected, create a new animation name Treasure which will create an Animator component automatically on the Hazmat Image. Select Add Property, and add Scale as we’re going to make the image scale from 0.1 at the zero mark to 4 at the 60 frames mark. This will make the image go from very small where it won’t be seen to a large image covering most of the screen. Last, open the Animator and drag the Treasure animation into the Animator. If you need to position the image onscreen a little better, use the Transform->Position to move it along the Z-axis. When finished, turn off the Hazmat Image game object in the Inspector as we only want the image to display when the lid is opened by the Player character.

Create a C# script name ContainerLid which will control the behavior of the Container’s Lid. We’re going to create 7 different variables in this script starting with 3 Public Type Game Objects name containerLid, chestItem, and prizeImage.

Then, a Private Type Animator name anim to be a handle for the Animator component that is attached to the Container’s Lid object. Another Private Type Bool name inRange, plus a Private Type AudioSource name audioSource to be a handle for the AudioSource component. Last, is a Public Type AudioClip name prizeClip for the audio clip that will play when the Hazmat Image appears onscreen.

In the Start() function, we will set inRange to equal False as the Player will not be in the range of the Container’s Lid when the game starts. Also, we will use the anim variable to Get the Animator’s Component. Finally, we will use the audioSource variable to Get the Audio Source Component.

In the Update() function, we will check IF the Player is inRange AND if the X-key was pressed. If so, we’re going to use 2 methods named OpenLid() and Collectible() which will be use in the Start Coroutine() function.

With the OpenLid() method, we will gain access to the Animator through the anim variable and Set the Bool of OpenLid to True which will play the OpenLid animation. Also, we will use anim to Set Bool Closed Lid to False to keep this animation from playing.

In the OnTriggerEnter() function, IF the Tag of the object that collides with the Container’s Lid is the Player, we will set inRange to True as the Player will be in range to open the container.

The Collectible() method will be created as a Coroutine by using the IEnumerator function. We’re going to Pause for 2 seconds by yielding return and Waiting For Seconds. IF the chestItem game object’s Tag is a “Collectibles”, do the following:

Set Active the prizeImage to True so the image can show onscreen.

Get the Animator’s component of the prizeImage, and Play the Base Layer which has the Treasure animation on it.

Last, use the audioSource component to PlayOneShot() the prizeClip audio clip.

We will allow the Hazmat Image to stay onscreen for 3 seconds using Yield Return new Wait For Seconds. After 3 seconds, we will Set Active to False the chestItem and prizeImage objects.

On the Scifi Container Lid game object, we’re going to have the following components starting with the ContainerLid script. Add the Scifi Lid, Hazmat Suit, Hazmat image, and sound effect for when the suit is collected.

Container Lid script component added.

Next will be the Animator component with the Scifi Lid animator. Also, the Rigidbody component with Use Gravity turned off, and the Freeze Position in Constraints turned on.

Animator and Rigidbody components added.

With the Box Collider, adjust the collider to extrude far enough for the Player character to go inside of the collider. Make sure the Is Trigger setting is turned on.

Box Collider adjusted on the lid.

Finally, with the Audio Source component we’re going to leave the Audio Clip slot empty. We’re doing this just in case we want to use more than 1 audio clip on the Scifi Container Lid.

Audio Source component added on as well.

Play the game, go up to the container, press the ‘X’ key, then watch the lid open with image of the Hazmat Suit appearing onscreen, the sound effect playing signaling the Player collected the suit, and the image and suit disappearing.

Player collects Hazmat Suit and image displays onscreen.