We’d love to hear from you. Whether you have a question that you’d like us to answer as part of our FAQ,  you’ve identified something that just doesn’t quite look right in one of our tutorials, you have a business opportunity or for any other reason, please use this simple form to contact us.

We’ll do our best to provide a prompt response.

Like what you see?...pass it on!

Adding a Scene Animation

Now let’s add a bit of sexy to our game level, by starting with a countdown, then dynamically creating a player object when the animation is over. To pull this off we are going to have to create a state machine of sorts for tracking what our game is currently up to. So first off, let’s delete the Player instance we just added to our level, we will be creating it dynamically.

Let’s start things off by creating a new node of type Label and center it in the middle of the viewport. With your newly created Label, set the following properties in the Inspector:

Configure-Label-in-Inspector

Now we need to configure the Font to use with our Label. We are going to use the same font we used on the main menu. Additionally set the Size to 60, outline to white, Outline size to 1, drag the ttf file over the Font Data field and finally slightly lower down expand Custom Colors, tick Font Color and select black:

Configuring-the-label-font

The final result should look like:

Stage-results

Now at the beginning of our level, we are going to fade in the newly created label. To do this, we now need to add a new node called AnimationPlayer to our level. At this point your scene hierarchy should look like:

Scene-status

With the AnimationPlayer node selected, the Animation tab should be displayed near the bottom of the window:

AnimationTab

Now we can create a new animation to control the display of our Label.

Animation-Button

Click the Animation button. A menu will pop up, select New:

New-Animation-button

When prompted, name the animation Stage Display:

Stage-Display

We will start be setting the duration of our animation. Locate the duration field to the right of the stop watch icon and set it to 4.

Animation-duration

Next we want to set which node we are going to animate. This is done by clicking the +Add Track button, then select Property Track:

Add-Track

Next select the Label in the resulting dialog.

Select-the-Label

Next select percent_visible as the property to animate.

Select-property

Now we are going to want to define a number of keyframes across the 4 second timeline. Right click in the timeline and select Insert Key.

Insert-key

This will create a dot or tick on the timeline where we just created the key. Left click the new click, then in inspector set Value to 0.

Setting-key-in-inspector

Now repeat this process at the 3.5 second mark, this time setting the value to 1. The end result should look like this:

Label-percent_visible-timeline

You can now preview your newly created animation using the VCR style controls.

Animation-Controls

When our animation ends, we are going to call a function called startAnimationDone() that will fire up our level once the animation stops playing. Of course, we are going to have to create this function. First we need to create a new script in our GameScene, attached to the root object in our scene.

Next, in the newly created script, create a new function called startAnimationDone(). Don’t worry about the contents of this function, we will get to the code in a second, for now just call pass. Now that we’ve created our function, we can call it as part of our animation.

To do this, we once again click +Add Track, this time selecting Call Method Track:

Adding-a-Call-Method-track

When asked for the node, this time select GameSceneRoot. Now at the 4 second mark in the Functions track, left click and create a new Key just like before. This time it will prompt you for what function you want to call, select our startAnimationDone function:

Select-function-key-animation

We will revisit and add features to this code shortly.

Handling Input<<PreviousTable of ContentsNext>>Creating Bullets

Like what you see?...pass it on!

script ends --->