Animated Loading Screen

Summary

Implemented an animated loading screen that displays for 3.5 seconds when launching the emulator. The screen shows the application icon (viboycolor-icon.png) centered on the screen and text "Loading..." with animated dots that change every 300ms (Loading. → Loading.. → Loading...). The animation uses pygame.time.Clock() to maintain 60 FPS and allows you to close the application with ESC or closing the window during charging.

Hardware Concept

Although the loading screen is not part of the original Game Boy hardware, it is a feature common in modern emulators that improves the user experience. Provides visual feedback during system initialization and allows time for all components to initialize correctly before starting the emulation.

The dot animation is a classic retro gaming technique that indicates the system is processing. Using pygame.time.Clock() ensures that the animation runs at 60 FPS, providing a Smooth and professional viewing experience.

Implementation

Added method_show_loading_screen()to classRendererthat is executed automatically after initializing the Pygame window.

Components created/modified

• src/gpu/renderer.py: Added method_show_loading_screen()and call from__init__()

Design decisions

• Configurable duration:The method accepts a parameterduration(default 3.5 seconds) to allow future adjustments.
• Automatic icon scaling:The icon automatically scales if it is too large, maintaining its proportion and limiting its size to 1/3 of the window.
• Retro font:A bold monospace (Courier) font is used to give a retro look to the text.
• Smooth animation:The points change every 300ms, creating a cycle of 1 to 3 points (Loading. → Loading.. → Loading...).
• Event control:During loading events can be handled (close window, press ESC) to allow exit if necessary.
• Controlled FPS:It is usedpygame.time.Clock()to maintain 60 FPS during animation.

Implemented code

def _show_loading_screen(self, duration: float = 3.5) -> None:
    """Displays a loading screen with the icon and animated text."""
    # Load icon and scale it if necessary
    icon_path = Path(__file__).parent.parent.parent / "viboycolor-icon.png"
    #...icon loading and scaling...
    
    # Initialize retro font
    font = pygame.font.SysFont("courier", font_size, bold=True)
    
    # Time controlled animation loop
    clock = pygame.time.Clock()
    start_time = pygame.time.get_ticks()
    dot_count = 0
    dot_interval = 300 # Change points every 300ms
    
    while elapsed< duration:
        # Actualizar animación de puntos
        if current_time - last_dot_time >= dot_interval:
            dot_count = (dot_count + 1) % 3
            dots = "." * (dot_count + 1) # 1, 2, or 3 points
            loading_text = f"Loading{dots}"
        
        # Draw centered icon and text
        #...rendered...
        
        clock.tick(60) # 60 FPS

Affected Files

• src/gpu/renderer.py- Added method_show_loading_screen()and call from__init__()

Tests and Verification

Verification was carried out by manually executing the application:

• Visual verification:Run the emulator and verify that the loading screen appears correctly with the icon centered and the text animated.
• Duration check:The loading screen was confirmed to last approximately 3.5 seconds before starting emulation.
• Animation check:It was observed that the points change smoothly every 300ms in the Loading cycle. → Loading.. → Loading...
• Event verification:It was verified that the application can be closed with ESC or by closing the window during loading.
• Scaling verification:Verified that the icon scales correctly if it is too large, maintaining its proportion.

Result: Verified- Loading screen works properly with smooth animation and event handling.

Sources consulted

• Pygame documentation:pygame.time.Clock() - https://www.pygame.org/docs/ref/time.html#pygame.time.Clock
• Pygame documentation:pygame.font - https://www.pygame.org/docs/ref/font.html
• Pygame documentation:pygame.transform.scale() - https://www.pygame.org/docs/ref/transform.html#pygame.transform.scale

Educational Integrity

Next Steps

• [ ] Continue emulator performance and functionality improvements
• [ ] Implement additional features according to project needs