How to Add Professional Screen Transitions in GDevelop (Step-by-Step)

Ever notice how amateur games have that jarring "snap" between scenes? One frame you're on the menu, the next you're mid-level with no warning. Professional games use screen transitions — fades, wipes, iris effects — to bridge scenes smoothly. Here's exactly how to set them up in GDevelop.

What You Need

• GDevelop (free)
• The Flash and Transition Painter extension (free, built-in)

Step 1: Install the Extension

Open your Extensions tab → Create or Add Extensions → search for Flash and Transition Painter. Double-click to install. This extension handles drawing and animating transition shapes across your screen without manual opacity math.

Step 2: Create a Dedicated Transition Layer

This is where most beginners fail. Your transition effect must live on its own layer, above everything else.

1. Open the Layers Panel
2. Add a new layer → name it Transition
3. Drag it to the top of the layer stack

If the transition layer sits below your UI or game layer, the effect renders behind your interface elements and looks broken.

Step 3: Add the Shape Painter Object

1. In Scene Objects, add a new Shape Painter object
2. Name it ShapePainterTransition
3. Drag it into your scene
4. In the Properties Panel, change the Base Layer to your Transition layer

This is the second place beginners get stuck. If the Shape Painter stays on the base layer, it's subject to camera movement — your transition will drift off-screen when the player moves.

Step 4: Add the Behavior

Select your Shape Painter object → Behaviors tab → add the Flash Transition Painter behavior. This links the extension's logic to this specific object. Without it, the event sheet actions have nothing to target.

Step 5: Configure the Event Sheet

Add an action wherever you want the transition to fire (level start, goal collision, button press).

In Add Action, search for Paint Effect → select the Flash Transition Painter option.

Settings that look professional:

Parameter	Value	Why
Object	ShapePainterTransition	Your transition object
Color	0;0;0 (black)	Clean, neutral bridge between scenes
Duration	1 second	Long enough to register, short enough to not drag
Effect Type	Circular or Flash	Circular = cinematic iris effect. Flash = simple fade.
Direction	Backwards	Smoother "closing" animation for iris effects
Opacity	255	Fully opaque — hides the scene completely

The #1 Mistake

Everything works — extension installed, object placed, events configured — but the Shape Painter is still on the base layer. The transition animates but drifts with the camera. Always move it to a dedicated top-level layer.

Key Takeaways

• Dedicated layer, top of the stack. Non-negotiable.
• 1-second duration. The sweet spot for pacing.
• Circular iris effect adds immediate polish with zero extra effort.
• Stay consistent. Use the same transition style throughout your game.

This takes about 5 minutes to set up and immediately makes your game feel more polished. The full video walkthrough with live demonstration is here: