Interactive Treasure Chest System Using Timeline
Have you ever noticed how a little cutscene or animation segment plays when you open a chest in a video game? These are different from other kinds of cutscenes and blend in with the flow of gameplay, this is something we can be easily achieved with Timeline.
Objective: Learn how to create a chest opening system that gets activated on key-press.
Table of Contents
· Animating the Chest
∘ Animated Treasure Chest Result
· Animating the Loot
∘ Loot Animation Result
· Animating the Character
∘ Character Opening Chest Animation Result
· Adding Sound Effects
· Setting Up the Loot Spawn
· Activating the Chest System on Key-Press
· The Result
Note: If you’re new to Timeline, be sure to check out my other articles, including how to get started and some Quick Tips to make thing easier.
Animating the Chest
- Let’s start by creating an Empty Game object, this will hold our Director and Timeline components. I named it Chest_Director to identify what this object will be directing.
2. With your Empty Object selected, create a Timeline.
3. Let’s start animating. For my animation, I am only adding the lid as an Animation Track to Timeline because that’s all the movement I need on my treasure chest.
Note: The Treasure Chest game asset was obtained via Filebase.
4. Press the record on the Animation Track. I started my animation by adding a key at the starting position of my chest, then I scrubbed ahead and added another key for the rotation change.
5. When you’re done adding keys, press record again to stop. Then right-click on your Animation Track and Convert it to Clip.
Animated Treasure Chest Result
This is the result of the little animation I just created.
Animating the Loot
The loot animation is added in a new Empty Game Object with its own Timeline and Director, so repeated steps 1 and 2 to create that.
Note: Please note that the example gif images show the animation being done in the chest_director timeline, I recorded it before switching to a different Timeline and realized I hadn’t captured my process after recording it. 😅 I will explain why I made this change later.
- Create a new Empty Game Object to bet the loot_Director(repeated steps 1–2).
2. Grab your loot game asset and add it as an Animation Track. This can be any game asset you like, I’m using a sci-fi rifle from Filebase.
3. Add keys for your animation, as always I started with a key at the default position then added another where the object moves upward.
4. Drag and drop your Loot_Director object to your Chest_director Timeline. This will automatically create a Control Track which will play the second Timeline as it was just another clip.
Loot Animation Result
Here is there result of both animations together.
Note: Remember that the second clip in that timeline is meant to be the Control Track we created on step 4, I simply hadn’t recorded that process but it should work the same exact way.
Animating the Character
I didn’t want the chest to just open up by itself, I wanted the character to interact with it so I grabbed an animation from Mixamo, and got to work. For my third-person character, I am using Unity’s Third-Person Starter Asset.
- Drag and drop your character into the chest Timeline. You can alternatively create a timeline for your character, but since this animation will only exist in relation to a chest object, I decided this was adequate for the time being.
2. While my character was selected in the Timeline, I went into the Inspector and used the Clip Transform Offsets to make sure my character is well-positioned to open up the chest.
3. Drag and drop your chest opening animation into the character’s Animation Track.
Note: A word of warning when working with Imported Animations, you may need to do a bit of setup for them to work properly. This quick 3-minute guide will help you along.
4. Tweak the Animation as needed. I adjusted the duration and speed to match the chest animation better.
Tip: If you find that your interaction between the character and chest is difficult to align, you can resize the chest. By resizing my treasure chest, I got things to align pretty well.
Character Opening Chest Animation Result
Adding Sound Effects
We’re going to add a chest opening sound effect with spatial sound so that you can only hear this if you are close to the object emitting the sound. You can grab some free sound effects here.
- Drag and drop your sound effects into the Chest_Director Timeline.
2. Drah and drop the object that is emitting the sound into the Audio Source slot of your newly added audio. In my case, this is the lid.
Now, when you play the sequence, the sound effect will play and emanate from your selected object. As a little bonus, I added another sound effect for when the loot appears by using the same process.
Setting Up the Loot Spawn
Most loot is instantiated into chests, the objects are not just sitting there waiting to pop up. This is why I decided to create a separate director object for the loot, that way the object can exist independently and be instantiated.
- Turn your loot_director object into a prefab object by dragging and dropping it into your project folders.
Note: There are other ways to achieve object instantiation with Timeline animations such as setting Playable Director Bindings via code and having a independent object to assign the bindings to, but we’ll explore that in another article. For now, this simple approach will suffice.
2. Delete your newly created prefab from the scene.
3. Create an Empty Game Object, this will be your spawn point.
Position it where you wish the loot to spawn at.
Now you’re all set up to instantiate the object via code!
Activating the Chest System on Key-Press
So far, everything just sort of plays on awake but we want things to be interactable so let’s get coding.
- First, we need to make sure that we toggle off Play on Awake for the Chest_Director.
2. Create a new script or add this to an existing script. We need to make sure that we can access our Playable Directors, so we will need this namespace.
3. Declare global variables for the objects that we’ll need to assign in the Inspector. The SerializedField allows us to create slots for them.
4. Insert the objects into the given slots, we use this to easily access their properties via code.
5. Create a private void function to handle the instantiation of the loot.
Our instantiation values are as follows:
- The _item, which was assigned on the Inspector is our loot object.
- The _spawnpoint, which is the position given from our assigned object.
- We use Quaternion.identity to maintain the rotation.
6. Now for the final step, let’s register some user input to activate our function and playable director.
Since we previously added the loot_director as a Control Track, the object won’t play the rising animation until the right time even when it has instantiated.
If you look at the Heriarchy, you can see that the Loot_Director object instantiates as soon as I press the Shift key, however, it starts out deactivated and only becomes active when the Timeline reaches the control track, that’s when the animation will play.
As a little bonus, I added some particle effects to the final version. These are controlled by an Activation Track in the Chest_Director.
The Result
Video so that you can hear the audio
Gif for visuals alone
