Creating a disappearing platform

In this lesson, we’ll design and code the first hazard in our platformer: a platform that disappears when the robot lands on it.

Creating the platform’s scene

Create a new scene with a StaticBody2D as the root. This node is a good fit because we’re not interested in moving the platform. Call it DisappearingPlatform.

Add the following children:

• A Sprite.
• A CollisionShape2D.
• An AnimationPlayer.

Save the scene in the SideScroller/ directory and add a script to the root node.

Your scene should look like this.

You’ll find disappearing_platform.png in the SideScroller/ folder. Drag it to the Texture property of the Sprite.

Add a new RectangleShape2D to the CollisionShape2D and set the size appropriately. This is where the robot character will walk across, so align it to the top of the sprite.

After saving the scene, you can now place the platforms in your level by dragging them directly into the viewport or instantiating them using the link icon in the Scene dock.

Add several instances of the platform to the level.

It’s looking good! Although, our platforms don’t disappear yet when the player lands on them.

Creating a player detector scene

Before we have our fade animation, we need to trigger it somehow. The fade should happen when the robot steps on it. We’ll use an Area2D, because we’ve seen that they are perfect for detecting when an object enters them.

Back in the DisappearingPlatform scene, add a new Area2D node and call it PlayerDetector.

Let’s set up its properties.

We’re not interested in anything detecting the PlayerDetector. It’s the detector that should detect the player instead. So disable Monitorable in the Inspector. This is a small optimization that will make all other areas ignore this one.

The node doesn’t need to be in a collision layer. However, it can still look for other physics objects using its collision mask and the Monitoring property.

Changing the robot and player detector’s collisions

Currently, all our nodes are on collision layer and mask 1.

And that’s a problem because DisappearingPlatform also is on layer 1. Its PlayerDetector will detect the platform itself, triggering the disappear mechanic.

To prevent that, we need to change the Robot’s collision settings as well as the PlayerDetector’s.

Head back to the Robot scene, select the Robot node, and set its Collision -> Layer to 2.

At the DisappearingPlatform scene, select the PlayerDetector node and set its Collision -> Mask to layer 2 to only detect the player.

Then, add a CollisionShape2D as a child of the PlayerDetector with a RectangleShape2D assigned to the Shape property.

Make sure the collision shape is just above the DisappearingPlatform’s collider so the detector can reach the player.

We have the components in place. Now, all that’s left is to animate and then connect them.

Animating the platform disappearing

There are three parts to making the platform disappear. We need to:

1. Detect when the robot has landed on the platform.
2. Wait a few seconds.
3. Animate the platform disappearing.

We’ll start with animating the platform disappearing, then code a way for the robot to trigger it.

The animation will fade the platform visually and turn off collisions. You can animate almost all properties in Godot, so we’ll take advantage of that.

Select the AnimationPlayer, and in the animation editor, create an animation named “fade.”

We will add three property tracks to it.

To add a new property animation track, click on Add Track -> Property Track.

Select the Sprite and select the modulate property.

Then, create another track for the CollisionShape2D of the DisappearingPlatform node and select its disabled property.

Finally, add a track for the PlayerDetector’s monitoring property.

The disabled property of the CollisionShape2D will allow us to make the player fall through the platform. Then, the PlayerDetector’s monitoring property controls the area’s ability to detect the player.

When the player walks on the platform, we want to:

1. Wait a bit.
2. Make the platform disappear.
3. Wait a bit longer.
4. Make it appear again.

The total animation length should be a little over four seconds. Change the length in the Animation Length field, and press Enter.

To zoom in and out of the timeline, you can press the Ctrl key and use the mouse wheel.

Zoom in until you see the entire length of the animation (the grey part of the timeline). You can also use the magnifier slider in the bottom-right.

Let’s start!

Making the platform fade in and out

We will work on the fading first and create keys for the modulate property.

Place a key at the first frame. Then right-click around 0.7 seconds and insert a new key.

Insert a new key at 0.8. Click on the key, and change the value. Lower the color’s alpha (the A channel) to 0 in the color picker.

At this point, your timeline should look like this (we zoomed in on the first second):

With these keys, the platform remains opaque for 0.7 seconds, then fades out from 0.7 to 0.8 seconds.

To leave the platform invisible until 3.8 seconds, insert a new key with an alpha value of 0.0.

And add another key at 3.9 and set the alpha channel back to 1.

To make the animation more appealing, we can add extra keys that alternate between fully opaque and fully transparent on both ends of the animation.

It will make the platform blink before disappearing and when it’s about to reappear.

Here’s how we did that over the first 0.4 seconds of the animation.

We then duplicated and adjusted the keys at the end of the animation.

You can already play the animation to see how the platform disappearing and reappearing will feel.

Turning collision detection on and off

We now animate the collisions too. In the CollisionShape2D track, create a keyframe at the start with the checkbox turned off. Then, at frame 0.8, create a new keyframe, and set its value to “on.” Jump to 4.4, create a new key, and set it to “off” again.

Now the platform’s collisions are disabled at second 0.8, making the player fall through, and re-enabled at 4.4.

Finally, let’s add a keyframe on the PlayerDetector’s monitoring value. Set its value to “off” at the start of the animation. Place a new key at 4.4, and set its value “on” again.

This prevents the player from re-triggering the animation while the platform disappears.

Verifying the RESET animation

It’s always good to double-check RESET. Sometimes, the automatic keys that get created there could be wrong.

In this case, PlayerDetector’s monitoring property starts with false in our animation. We might have also set it to false in RESET. We will check it, as well as the other tracks.

Select the RESET animation.

You can click on each track’s key to read their values:

Verify that your keys are like the above image:

1. modulate starts completely white and fully opaque (Color’s A property is 255).
2. disabled is false (unchecked).
3. monitoring is true (checked).

If any value is wrong, set it correctly. Once you’ve verified everything, let’s use this animation we just made!

Writing the code

In the DisappearingPlatform’s script, start by referencing the AnimationPlayer and the PlayerDetector.

extends StaticBody2D

onready var animation_player := $AnimationPlayer
onready var player_detector := $PlayerDetector

Then we connect the PlayerDetector’s signal to know when the player fell on the platform.

func _ready() -> void:
    player_detector.connect("body_entered", self, "_on_PlayerDetector_body_entered")

Finally, we play the animation in the connected function.

func _on_PlayerDetector_body_entered(body: PhysicsBody2D) -> void:
    animation_player.play("fade")

Try it! Now, when the robot jumps on a platform, the platform disappears.

Practice: Creating a jump pad

Open the practice Creating a jump pad.

In this practice, you will create a jump pad for the character to jump higher. This is often used in platformer games and is represented by a spring.

We will just reuse the platform asset we have:

Note that, in this practice, we added several lines of code to the character compared to the lessons to limit the jump_number when the player falls on the jump pad.

When falling on the jump pad, we need to set the jump_number to 1. Otherwise, the jump_number will reset to 0 and allow the player to do two extra jumps mid-air, for a total of three jumps with the pad.

func _physics_process(delta: float) -> void:
    # ...
    elif is_on_fl   oor():
        var is_on_jump_pad: bool = get_slide_collision(0).collider.is_in_group("jump_pad")
        if is_on_jump_pad:
            jump_number = 1
        else:
            jump_number = 0
    # ...

We already added that code to the SideScrollDoubleJump.gd script. That way, you only have to edit the PlayerDetector.gd script.

The code

Here’s the full code for DisappearingPlatform.gd.

extends StaticBody2D

onready var animation_player := $AnimationPlayer
onready var player_detector := $PlayerDetector

func _ready() -> void:
    player_detector.connect("body_entered", self, "_on_PlayerDetector_body_entered")

func _on_PlayerDetector_body_entered(body: PhysicsBody2D) -> void:
    animation_player.play("fade")