Skip to main content

​
Overview

TransitionBlocks is a CanvasLayer-based autoload that provides smooth scene transitions using a spiral block animation. Blocks appear in a spiral pattern from the edge to center, creating a stylish wipe effect. Access via the global singleton: TransitionBlocks

​
Signals

​
transition_finished
signal
Emitted when the fade-out animation completes after a scene change. Used by scenes to trigger UI fade-ins or other post-load logic.
Example Usage: 
# From main_menu.gd:69-72
if TransitionBlocks.visible:
    TransitionBlocks.transition_finished.connect(func(): fade_in_ui())
else:
    fade_in_ui()

​
Exported Properties

​
block_size
Vector2i
default:"Vector2i(16, 16)"
Size of each transition block in pixels
​
block_color
Color
default:"Color.BLACK"
Color of the transition blocks

​
Methods

​
wipe_to()

Triggers a block wipe transition and changes to the target scene.
​
scene_path
String
required
Godot resource path to the target scene (e.g., "res://scenes/main_menu.tscn")
​
duration
float
default:"0.1"
Duration of each block’s fade-in animation in seconds
​
return
void
No return value
How it works:
  1. Shows the transition layer
  2. Blocks fade in one-by-one following a spiral pattern
  3. After all blocks are visible, changes scene
  4. Calls wipe_out_fade() to fade out blocks
  5. Emits transition_finished signal
Example Usage: 
# Return to main menu
TransitionBlocks.wipe_to("res://scenes/main_menu.tscn")

# Custom duration
TransitionBlocks.wipe_to("res://minigames/turtle_run/scenes/main.tscn", 0.15)

# From worm_bucket/hud.gd:35
func _on_home_button_pressed():
    TransitionBlocks.wipe_to("res://scenes/main_menu.tscn")

​
wipe_out_fade()

Fades out the block grid with a smooth overlay. Called automatically by wipe_to().
​
duration
float
default:"0.45"
Duration of fade-out animation in seconds
​
return
void
No return value
Animation sequence:
  1. Creates a black ColorRect overlay
  2. Fades overlay from transparent to opaque
  3. Hides all blocks
  4. Fades overlay back to transparent
  5. Removes overlay
  6. Emits transition_finished signal
Example Usage: 
# Rarely called manually - typically used internally
TransitionBlocks.wipe_out_fade(0.3)  # Faster fade-out

​
Internal Methods

​
create_blocks()

Generates ColorRect blocks to cover the entire viewport. Called automatically in _ready(). Implementation:
  • Calculates grid dimensions based on viewport size and block_size
  • Creates enough blocks to fully cover the screen
  • All blocks start invisible

​
calc_spiral_order()

Calculates the spiral traversal order for block animations. Called automatically in _ready(). Implementation:
  • Uses a directional spiral algorithm (right → down → left → up)
  • Stores block indices in block_order array
  • Creates the signature edge-to-center animation pattern

​
Animation Timing

​
Block Reveal Phase

var delay_per_block := 0.004  # 4ms between each block
var total_reveal_time = duration + (blocks.size() * delay_per_block)
For a typical 270×480 viewport with 16×16 blocks:
  • Grid size: 17 cols × 30 rows = 510 blocks
  • Delay phase: 510 × 0.004s = 2.04s
  • Total reveal time: ~2.14s (with default duration=0.1)

​
Fade-Out Phase

default fade_out duration = 0.45s

​
Complete Example

extends Control

func _ready():
    # Listen for transition completion
    TransitionBlocks.transition_finished.connect(_on_transition_complete)
    
    # Trigger transition after delay
    await get_tree().create_timer(2.0).timeout
    TransitionBlocks.wipe_to("res://scenes/next_scene.tscn")

func _on_transition_complete():
    print("New scene loaded and transition finished!")
    fade_in_ui()

​
Usage in Minigames

All minigames use TransitionBlocks to return to the main menu: Turtle Runner: 
# turtle_run/hud.gd:35
func _on_home_button_pressed():
    TransitionBlocks.wipe_to("res://scenes/main_menu.tscn")
Worm Catch: 
# worm_bucket/hud.gd:35
func _on_home_button_pressed():
    TransitionBlocks.wipe_to("res://scenes/main_menu.tscn")
Food Catch, Memorice, Counting, Color: Similar patterns

​
Architecture Notes

  • Autoload: TransitionBlocks is a global singleton accessible from any scene
  • CanvasLayer: Renders above all game content (high z-index)
  • Tweens: Uses Godot’s Tween system for smooth animations
  • Non-blocking: Scene change happens asynchronously via get_tree().create_timer()
  • Reusable: Blocks are created once and reused for all transitions

​
Tips

Always connect to transition_finished if you need to fade in UI elements after a scene loads. The main menu uses this to prevent UI from appearing during the block fade-out.
Do not call wipe_to() multiple times in quick succession. Wait for transition_finished signal before triggering another transition.

Build docs developers (and LLMs) love

Get started for freeTalk to us