Week 27: A screen-transition system, and pixelated styling

An animated GIF of a recording from Momma Duck showing a "screen-mask" screen transition with a checkered pattern.
I added some fancy screen transitions
using shaders and configurable masking textures.


tl;dr: I made a new screen-transition system, and updated lots of UI to have pixelated styling.


What happened last week?

Highlights

  • New screen-transition system.
    • When transitioning between one menu screen and the next, it's nice to show to some sort of animation.
    • I added support for new types of animations.
    • And I made it easier to configure these transitions.
  • New pixelated styling.
    • It's important to have a consistent theme across an app, so I've continued working on making my GUIs have a more low-res, pixelated look.
    • This week, I made updates to things like buttons, checkboxes, radio buttons, scroll bars, panel borders, and other icons.

Laundry list

  • Screen-transition system:
    • Refactor the screen-transition system.
      • Pull-out all screen-transition-handling logic into a separate class.
      • Create a standardized enum for configuring various types of transitions:
        • Immediate
        • Fade
        • Slide
        • OverlayMask
        • ScreenMask
      • Add more screen-activation-lifecycle methods for better control over transition in/out start/end.
      • Add support for any widget to detect when the containing screen becomes visible.
        • This was needed in order to fix a long-standing and very subtle bug with accordion panels.
        • The problem was that Godot will tell us that the height of a control is 0, if it, or any of its ancestors, has `visible = false`.
        • But the accordion needs to be able to calculate the height of the projected accordion-body content, in order to know how far to open.
        • So, by listening for this new screen-visible event, the accordion panel can now know exactly when it is safe to calculate this height.
      • Start implementing a screen-mask transition with a shader that masks the entire GUI.
An animated GIF of a recording from Momma Duck showing an "immediate" screen transition.
Screen transition: immediate

An animated GIF of a recording from Momma Duck showing a "fade" screen transition.
Screen transition: fade

An animated GIF of a recording from Momma Duck showing a "slide" screen transition.
Screen transition: slide

An animated GIF of a recording from Momma Duck showing an "overlay-mask" screen transition.
Screen transition: overlay-mask

An animated GIF of a recording from Momma Duck showing a "fade-mask" screen transition.
Screen transition: screen-mask
    • Finish implementing a screen-mask transition with a shader that masks the entire GUI.
      • This took a fair amount of research and poking around to figure out.
      • I really wanted to find a solution that applied a shader to an active node tree, so that the effect would be applied to the still-running screen.
      • However, I ran into various problems trying to get this to work.
        • At first, I realized I needed to set `use_parent_material` recursively on every descendent node.
        • Then, I realized that I needed to update my shader logic to use `SCREEN_UV` rather than the normal local `UV`.
        • Then, I found that this worked pretty well, BUT, I was seeing a strange effect with the upcoming screen that is beneath the transitioning screen.
          • Godot was only rendering rectangular solid-colored blocks as placeholders for all of the icons and text in the lower screen.
          • I assume this is an important performance optimization that Godot performs for you, since it assumes that the underneath-screen won’t normally be visible.
          • I couldn’t find a way around this problem, and I couldn’t figure-out the right search-query-incantation to find any related information on the internet.
      • So I ended up taking a screenshot of the current screen at the start of the transition, and then animated this image from my transition shader in the same way that I’ve been animating my old overlay-based transition shader.
    • Create a new checkered-pattern texture for the screen-mask transition.
    • Make all screen-transitions more configurable.
    • Fix transition-mask-texture configuration and scaling configuration.
    • Add support for configuring screen-transition easing.
  • Pixelated GUI styling:
    • Create new pixelated checkbox and tree-arrow icons.
    • Restructure the Scaffolder images directories.
    • Redo icons to be more pixelated.
    • Add support for configuring more border styles.
    • Add support for configuring screen-container styles.
    • Move icon-configuration into a new class.
    • Add support for quickly toggling whether to use pixelated styles.
    • Update scenes to dynamically access icons from the new ScaffolderIcons configuration, rather than statically through standard scene definitions.
    • Add support for configuring nine-patch textures for buttons.
    • Add support for scaling these nine-patch textures.
    • Update the ScaffolderButton shine-line and color-pulse to work well with these new nine-patch textures.
    • Fix an issue with texture-based buttons sometimes forcing an undesirable min-height.
    • Add support for configuring nine-patch textures for scrollbars.
    • Add some dropdown button nine-patch textures.
    • Create radio-button, dropdown, and slider icons and styles, and make them configurable.
    • Create a new ScaffolderOptionButton.
    • Make various styling configuration fixes.
    • Add support for configuring the different sides separately when configuring margins.
    • Fix some styling issues for option buttons:
      • Dropdown-arrow icon spacing
      • Popup-list radio-button icon size
      • Content margin
      • Z-index relative to screen-containers
    A screenshot from Momma Duck showing some widgets with the new pixelated styles.
    Widgets with the new pixelated styles.

    A screenshot from Momma Duck showing some widgets with the old high-resolution styles.
    Widgets with the old high-resolution styles.
  • Fix obsolete references to error logging on Utils.
  • Update the loading screen to show 100% when loading platform graphs from a file before transitioning to the next screen.
  • Adjust surface draw utility to cut-off the surface ends at 45-degress, so perpendicular neighbor surface annotations don't overlap.
  • Break editor-icon declarations onto new lines.
  • Add support for disabling suggested-button shine-line and color-pulse.
  • Move some incohesive functions out of ScaffolderUtils and into more appropriate spots.
  • :) A random person on the internet sent me an email asking about how to get Surfacer set up and running! Very cool!

What's next?

  • Finish a couple small pixel-styling tasks.
  • Go back to working on Surfacer!
    • I have a long list of small fixes do first, before I move on to some meatier features.


🎉 Cheers!


This is a simple icon representing my sabbatical.

Comments