Skip to content

[FEATURE] Implement a custom splash screen #308

Description

@ikostan

Description:
Implement a custom splash screen in SkyLockAssault using Godot 4.5, displayed at game startup before transitioning to the main menu. Include fade-in, pause, and fade-out effects for a smooth introduction, replacing the default Godot splash. For web exports, integrate with the existing custom HTML shell (custom_shell.html) to handle initial loading visuals consistently.

Image

Why is this useful?:
Enhances game polish by adding branding (e.g., game logo or title), prevents abrupt starts, and serves as a learning exercise for Godot's tween animations, scene management, and UI nodes in a Windows 10 environment—key for building engaging game intros in your combat airplane project. For web exports, customizing the splash ensures a seamless experience across platforms without relying on default behaviors.

Proposed Implementation (optional):

  • In Project Settings > Application > Boot Splash: Disable "Show Image" and set Background Color to black.
  • Set the custom splash scene as the Main Scene in Project Settings > Application > Run.
  • Create splash_screen.tscn with: Control root, ColorRect for background (full rect anchor), CenterContainer (full rect), and TextureRect for logo/image.
  • Attach a GDScript to the root: Export variables for next_scene (PackedScene, e.g., "res://main_menu.tscn"), in_time (float, e.g., 1.0), fade_in_time (1.0), pause_time (1.0), fade_out_time (1.0), and logo (TextureRect node path).
  • In _ready(): Call fade().
  • fade() function: Set logo.modulate.a = 0; Create tween with interval(in_time), tween_property(logo, "modulate:a", 1.0, fade_in_time), interval(pause_time), tween_property(logo, "modulate:a", 0.0, fade_out_time); Await tween.finished, then get_tree().change_scene_to_packed(next_scene).
  • For multiple screens (optional extension): Use an array of TextureRects in a container, chain tweens to fade each sequentially, with _unhandled_input() to skip on any keypress.
  • For web export: In custom_shell.html, customize the #loading div (e.g., replace or enhance with a project-specific image or add fade effects via CSS/JS if needed for pre-engine load visuals); Ensure the loading screen transitions smoothly to the in-engine splash by hiding #loading on engine start.

Additional Context:
Draws from Godot documentation on tweens, scene changes, and web export customization (e.g., custom HTML shells), plus tutorials in the provided videos (QKAuacUG0y4 for multi-screen fading and skipping; xy-ssYTQ3as for single-screen setup and timing). Integrates with existing main_menu.tscn and custom_shell.html; no impact on game_level.tscn or player controls. Test on Win 10 64-bit for export compatibility, ensuring the custom HTML handles placeholders like $GODOT_SPLASH correctly.

Metadata

Metadata

Assignees

Labels

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions