Ability to create custom loading splashscreens

[cohenerickson]

Overview

Some sites (such as the one I maintain) have or are looking to create custom loading screens in order to make the emulator blend into the theme of the website better, other game platforms such as Unity provide API's to easily create these screens however there isn't a system for this in Ruffle.

Some issues relating to this system: #875 #2302

Current System

Currently, this screen is hard coded into shadow-template.ts and requires one to modify this file and rebuild.

Proposed Solution

Add an options paramater to <SourceAPI>.createPlayer() that takes in a template for this screen. This alone won't allow for custom progress bars though, there will also have to be a onProgress event that will allow the program to dynamically update the custom progress bar.

window.RufflePlayer = window.RufflePlayer || {};

window.addEventListener("DOMContentLoaded", () => {
  let ruffle = window.RufflePlayer.newest();

  let player = ruffle.createPlayer({
    splashTemplate: `<div
      id="splash-screen"
      class="w-full h-full flex items-center justify-center flex-col gap-5"
    >
      <img src="/img/logo.png" class="w-10" />
      <div class="h-2 w-64"><div id="loadProgress" class="h-full"></div></div>
    </div>`
  });

  player.onProgress = (progress: number, template: HTMLElement) => {
    const loadBar = template.getElementById("loadProgress");
    loadBar.style.width = `${progress}%`;
  }

  let container = document.getElementById("container");
  container.appendChild(player);
  player.load("movie.swf");
});

[ActionWavele]

Depending on what you want to accomplish, Ruffle provides a JS Boolean in the configuration object to toggle the splash screen entirely. "splashScreen": true | false and CSS variables available to customize the preloader background and logo display (which can technically be any background object)

ruffle-player, ruffle-embed, ruffle-object {
--splash-screen-background: #f2f6fa;
--logo-display: block;
}

[cohenerickson]

Depending on what you want to accomplish, Ruffle provides a JS Boolean in the configuration object to toggle the splash screen entirely. "splashScreen": true | false and CSS variables available to customize the preloader background and logo display (which can technically be any background object)

ruffle-player, ruffle-embed, ruffle-object {
            --splash-screen-background: #f2f6fa;
            --logo-display: block;
        }

I'm hoping to see something a bit more customizable, right now we are locked to just those 2 configuration options.

[Croworbit]

correct me if I'm wrong, but I thought the option to do custom splash screens is already filled by the options where you can completely hide ruffle's load screen as far as I can tell, that gives you absolute freedom in what takes it's place

can't get much more custom than 100% of it being custom