Splash a Splash Screen Generator (Boot Art 2026)

By Arron R.9 min read
A splash screen generator for browser games in 2026 is a four-step pipeline: lock fade timing and 16:9 safe zones, draft mood art in AI Image Gen, composite log

The first frame players see is rarely gameplay—it is a logo on a mood background, a publisher stamp, a two-second beat that says “you opened the right tab.” A splash screen generator workflow turns that beat into repeatable art instead of a stretched screenshot or a meme template that fights your palette. On Sorceress, the path runs through AI Image Gen for backgrounds, Canvas for logo layers, and a Phaser boot scene for the fade into your preload or main menu. If you already built store icons with Brand’s logo pipeline or a progress-bar screen with Load’s loading-screen guide, reuse those PNGs here—the splash is the shorter cousin, not a duplicate job. New to the stack? Start from the tools guide or open plans when you are ready to export from Canvas.

Four-step splash screen generator pipeline from brief to Phaser boot scene fade
From creative brief to boot-scene fade—the splash screen generator workflow on Sorceress.

What a splash screen generator actually outputs for games

A splash screen generator—whether you mean a mobile app tool or a browser-game pipeline—produces a static or lightly animated boot frame: full-bleed background art, a centered logo, optional publisher or “powered by” line, and timing metadata for when to fade out. The splash screen pattern predates modern PWAs; console and PC titles used it for decades before app stores existed.

For indie browser games, the deliverable is usually one or two PNGs at your game’s native resolution plus a scene script that displays them before heavier assets load. Unlike an indie game loading screen, a splash rarely shows download progress—it is branding theater with a fixed duration, skippable on second launch if you wire input.

Search traffic around “splash screen generator” mixes mobile app builders (Android adaptive icons, iOS launch storyboards) with game jam authors who just want a logo on a gradient. This guide targets the game-dev slice: Phaser boot scenes, 16:9 browser tabs, layered PNGs you own. PWA manifest splash fields (MDN manifest docs, verified July 8, 2026) follow the same visual rules—solid background color plus a centered icon—even when the implementation differs.

Good splash art respects negative space. The generator’s job is mood and logo clearance, not gameplay UI. Keep text out of AI backgrounds; add typography in Canvas where you control stroke, kerning, and contrast against a real checkerboard.

Document skip policy in the brief. Jam builds often allow any key to continue; polished releases may enforce a minimum two-second publisher logo. Code owns timing; PNGs own pixels.

Why splash screens differ from loading screens

Confusing the two wastes art credits. A loading screen tracks bytes—background, empty bar track, tips, this.load.on('progress') wiring. A splash screen is a fixed beat: show logo, wait, fade. Players tolerate a two-second logo; they resent a fake progress bar stuck at ninety-nine percent while audio still streams.

Scene order in Phaser typically runs Boot → Preload → Main (samme/phaser3-faq, verified July 8, 2026). Boot displays splash PNGs already bundled in the initial payload—tiny files, fast first paint. Preload then queues the heavy atlas while optionally reusing art from Load’s pipeline if you want a seamless visual handoff.

Mobile-native searches like “android splash screen generator” or “ios splash screen generator” expect density-specific PNG stacks and XML storyboards. Browser games sidestep that matrix: one 1920×1080 master scaled by Phaser’s scale manager often suffices for jam scope. Mention the native formats in planning docs if you later wrap the tab in Capacitor or Tauri, but do not block shipping the web build waiting for six density buckets.

Visual overlap is fine—same palette as your loading screen—but layer separation matters. Splash logos sit centered; loading screens anchor bars at the bottom safe zone. Compose both in Canvas as separate projects so you can swap languages without regenerating backgrounds.

Finally, splash screens set legal tone: ESRB-style notices, epilepsy warnings, and “press any key” hints belong in code-driven text objects, not baked into AI backgrounds that change every regeneration.

Canvas layer stack for splash screen with background logo and publisher stamp
Separate layers for background, logo, and publisher stamp—compose once, fade in code.

The Sorceress splash screen generator pipeline in four steps

Think of the Sorceress splash screen generator path as four stations: brief and timing, key art generation, Canvas compositing, and boot-scene wiring. No hidden fifth step—WizardGenie is optional acceleration for the Phaser scene, not a requirement to download art.

Step 1 locks duration, aspect ratio, and fade curve. Step 2 drafts backgrounds in AI Image Gen at 16:9 with clear center space. Step 3 imports layers into Canvas, aligns logo and publisher stamp, exports PNG. Step 4 shows the PNG in a Boot scene, waits, fades to Preload or Main. Repeat the same four steps for sequel logos or publisher swaps without touching gameplay scenes.

Cross-tool handoffs stay inside Sorceress: generate → Send to Canvas from the lightbox menu, or drag from WizardGenie embed when you compose inside the agent workspace. That keeps prompts, seeds, and exports in one funnel instead of scattered downloads.

The pipeline deliberately separates static art from timed fades. Canvas handles pixels; Phaser handles clocks. Baking a three-second animation into a GIF splash bloats your initial fetch—camera fades on a static PNG stay lightweight.

Step 1 — lock duration, aspect ratio, and fade timing

Before spending credits, write a quarter-page brief. State target resolution—1920×1080 for desktop browser games is the default Canvas preset named “16:9 Landscape” (src/app/canvas/page.tsx, verified July 8, 2026). Mark safe zones: keep the logo inside the center 70% width and vertically centered ±8% so publisher stamps can sit in corners without collision.

Specify splash duration: 2.0 seconds default, 3.0 if a publisher logo must read, 0.5 minimum on skip-after-first-visit flows. Note fade style—linear camera.fadeOut versus crossfade to preload art. WizardGenie can scaffold either when you describe “boot scene, two second logo, fade to preload.”

List forbidden elements: no embedded text in the background prompt (add type in Canvas), no progress bars (that is Load’s job), no photoreal faces unless your game needs them. Add positives: palette hex values, lighting direction, motif nouns (“obsidian gate, violet rim light, fog”).

Decide skip input now—pointer down, any key, or none for festival kiosk builds. Document file names: splash_bg.png, splash_logo.png, splash_pub.png. Consistent names survive refactors when teammates touch boot order.

Match your Phaser config. If config.scale uses 1280×720 internally, author at 1920×1080 and downscale on Canvas export—or author native to keep the boot payload lean.

Step 2 — draft splash backgrounds in AI Image Gen

Open AI Image Gen and select 16:9 aspect. Model credits as of July 8, 2026 (src/lib/models.ts): Z-Image at 3 credits, Flux 2 Pro at 6, GPT Image 2 at 7. For exploratory splash backgrounds, batch three Z-Image drafts (9 credits total). Escalate one winner to Flux 2 Pro for cleaner focal depth; reserve GPT Image 2 when you need crisp geometric edges around architectural motifs.

Prompt skeleton that behaves for splash backgrounds:

  • Lead with medium: “wide 16:9 game splash screen background, no text, no logo, no UI, no progress bar.”
  • Insert palette and lighting from your brief verbatim.
  • Describe depth: “clear center negative space for logo overlay, soft vignette edges.”
  • Close with guards: “no watermark, no border, no readable faces unless specified.”

Generate at least three variants. Splash screens are mood setters; variance is cheap compared to re-exporting after a logo contrast failure. Compare center negative space—does the logo sit comfortably on the calmest region?

When a draft wins, use Send to Canvas from the image lightbox to push pixels straight into the editor. That skips intermediate downloads and preserves resolution metadata.

If your game already has hero art from Brand or a landscape from Shade, reuse it as the background layer with a darkening rectangle in Canvas instead of regenerating. Consistency beats novelty for boot branding.

Step 3 — composite logo and publisher stamp in Canvas

Canvas is a layered editor: brush, move, alignment, opacity, and Send to Tool routes. Editing costs zero credits; the tool badge is Free in the catalog (src/app/_home-v2/_data/tools.ts, verified July 8, 2026). Downloading the finished PNG requires an active subscription—signed-in subscribers see Download; others see Upgrade to Save (src/app/canvas/page.tsx).

Import the background as the bottom layer. Add a semi-transparent rectangle layer if you need contrast behind the logo. Import or paste your logo from Brand’s pipeline on its own layer; use alignment tools to center horizontally and vertically. Scale logo height to roughly 22–28% of frame height—large enough to read at 1080p, small enough to breathe.

Add a publisher or team stamp on a separate layer—bottom-right at 6% inset is the conventional slot. Keep it subtle: small wordmark, not a second hero logo competing for center mass.

Export strategy: one flattened splash_full.png for simple boot scenes, or separate splash_bg.png plus transparent splash_logo.png if you plan logo-only fades. Both patterns work; pick one project-wide.

Use Download Resize if you need 1280×720 from a 1920×1080 comp. Canvas writes PNG via toDataURL (MDN, verified July 8, 2026). When WizardGenie embed is active, drag the export into the Explorer panel—the agent can reference the asset path in generated boot code.

Step 4 — wire the splash into a Phaser boot scene

Phaser’s recommended pattern places a lightweight Boot scene before Preload (Phaser scenes docs, verified July 8, 2026). Boot loads only splash art—kilobytes, not megabytes—then hands off. Minimal shape:

class Boot extends Phaser.Scene {
  constructor() { super('Boot'); }

  preload() {
    this.load.image('splashBg', 'assets/splash_bg.png');
    this.load.image('splashLogo', 'assets/splash_logo.png');
  }

  create() {
    this.add.image(960, 540, 'splashBg');
    const logo = this.add.image(960, 540, 'splashLogo');
    this.input.once('pointerdown', () => this.fadeToPreload());
    this.time.delayedCall(2000, () => this.fadeToPreload());
  }

  fadeToPreload() {
    this.cameras.main.fadeOut(400, 0, 0, 0);
    this.cameras.main.once('camerafadeoutcomplete', () => {
      this.scene.start('Preload');
    });
  }
}

Keep the boot payload tiny: only splash PNGs. Queue atlases and audio in Preload so the splash appears while the tab still parses your main bundle. Players see branding immediately; heavy assets load under the next scene’s optional loading UI from Load’s pipeline.

Skip-on-second-visit logic belongs here—read localStorage or a save flag, shorten delayedCall to 300 ms, or jump straight to Preload. Do not bake skip state into PNGs.

WizardGenie can emit this scaffolding when you describe “boot scene with centered logo, two second delay, skip on click, fade to preload.” Desktop WizardGenie supports the same flow for longer offline sessions after sync.

Phaser boot scene fade from splash image to preload scene
Static art from Canvas, timing from code—fadeOut hands off to Preload without a spinner.

What a splash screen generator session costs on Sorceress in 2026

Verified July 8, 2026 against src/app/plans/page.tsx (LIFETIME_PRICE = 49, Starter pack 1000 credits / $10) and src/lib/models.ts.

  • Three Z-Image background drafts × 3 = 9 credits
  • One Flux 2 Pro lock × 6 = 6 credits
  • Optional GPT Image 2 detail pass × 7 = 7 credits
  • Canvas compositing = 0 credits (export requires active subscription)
  • WizardGenie boot wiring = 0 credits on web entry

A typical splash screen generator session lands around 15–22 credits (~$0.15–$0.22 on Starter pricing) before subscription. Reusing an existing logo from Brand’s pipeline can cut generation to a single Flux pass. Lifetime at $49 unlocks Canvas download plus the broader Pro tool suite.

Compare that to shipping a black tab flash on launch day, or rebuilding after a meme-template DMCA notice. A documented splash pipeline—brief, generate, compose, boot fade—compounds across every demo build, publisher swap, and sequel logo refresh you ship this year.

When you are ready, open AI Image Gen, draft a 16:9 background with clear center space, compose in Canvas, and wire the PNG into a Phaser Boot scene—that is the moment your game stops feeling like a raw HTML page and starts feeling like something players opened on purpose.

Frequently Asked Questions

What is the difference between a splash screen and a loading screen?

A splash screen is the short branding beat before gameplay—logo, publisher stamp, fade to menu—usually one to three seconds with no progress bar. A loading screen stays visible while assets download and should reflect real loader progress. Sorceress covers both: this post focuses on boot splash art; the Load post covers progress-bar loading screens (verified July 8, 2026).

What size should a game splash screen be in 2026?

For desktop browser games, 1920×1080 (16:9) is the practical default—the Canvas preset named 16:9 Landscape ships that size (src/app/canvas/page.tsx, verified July 8, 2026). Match your Phaser game config width and height so the splash scales without letterboxing. Portrait mobile titles can duplicate art at 1080×1920 using the 9:16 preset.

Does Canvas cost credits for splash screen compositing?

Editing in Canvas is free—layers, brush, alignment, and Send to Tool routing cost zero credits (badge: Free in src/app/_home-v2/_data/tools.ts). Downloading the finished PNG requires an active subscription; non-subscribers see Upgrade to Save (src/app/canvas/page.tsx, verified July 8, 2026). AI Image Gen drafts still consume model credits separately.

How do I fade from splash to menu in Phaser?

Use a dedicated Boot scene that displays the splash image, waits a timed duration or input, then calls this.scene.start('Preload') or this.scene.start('Main') with a camera fadeOut (docs.phaser.io/phaser/concepts/scenes, verified July 8, 2026). Keep splash timing in code—not baked into PNG frames—so you can skip on repeat visits.

What does a splash screen generator session cost on Sorceress?

Verified July 8, 2026 against src/lib/models.ts and src/app/plans/page.tsx (LIFETIME_PRICE = 49). Budget roughly three Z-Image background drafts (9 credits), one Flux 2 Pro lock (6 credits), optional GPT Image 2 logo polish (7 credits), plus zero credits for Canvas compositing—about 15–22 credits (~$0.15–$0.22 on a Starter pack) before subscription.

Sources

  1. Phaser — Scenes concepts
  2. MDN — Web app manifest (splash screens)
  3. samme/phaser3-faq — Scene flow
  4. MDN — HTMLCanvasElement.toDataURL()
  5. Wikipedia — Splash screen
Written by Arron R.·1,930 words·9 min read

Related posts