# SpriteDX - Playground - Requirements and Implementation Plan *Today’s My last day in Japan, and I have some time to spare. I don’t have time to do full on coding, but I do have some time to write up about the SpriteDX Playground requirements.* --- [Previous post](https://blog.sprited.app/spritedx-designing-the-playground) discussed about overall direction and strategy of SpriteDX’s Playground system. We discussed key directions. What we want: 1. **An unified system** with an opinionated design—a side scrolling platformer. 2. **Support** different scale and style. Side scrolling platformer. This begs questions of why. It’s simple, I like side scrolling platformer’s cinematic flat views. It also limits the problem space quite a bit allowing us to move fast. There are some alternatives to side scroller worth mentioning. 4-directional like [Liberated Pixel Cup](https://liberatedpixelcup.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_light&head=Human_male_light) specs or 8-directional Ragnarok Style specs. Supporting those types of specs will not be the focus. --- ## Requirements * Supported character states: **idle, run** * Starting state: **idle** * Control: **Left**, **Right** * Background: Beautiful sky box with **summer vibe** and some level of parallax * Audio: white noise + summer vibe + busy streets **ASMR**. * Extras: Public **characters** of similar vibe are selected rendered as a background extras * Scale: Imagine **MapleStory** but scale it up to account for amount of space used by the UI chromes * Offline mode: This is **offline-first** experience * LLM integration: **No LLM** integration in V1. --- ## Implementation Plan * To implement this, I will create a Playground component. Current idea is that we would use `pixi.js` for rendering the characters. * As mentioned in previous post, the **Playground** button will show up in **Content Panel**’s Header. Most likely case is that user will be previewing the character, and click on Playground button. Once this button is clicked, the character will be **sprung in to life**. That is, the character will transition from mere preview to a character that can is breathing in and out and moves on and about. * At first, the character will run though a short 1s initialization sequence where we move the character to left then right then idles. * Then screen zoom out transition happens at the same time we give control to the user with a keyboard “WASD“ HUD indicator showing that users can control the character. * Sound will transition in. * To give a live feel… This is random but, we will show following HUD. `11:11 [cell][wifi][battery]` where the design is reminiscent of popular smart phone headers. This is to differentiate this playground mode. * We will spend some time on honing in on the background image and audio. * Summer vibe background image with big cloud. * Platform with trees and minimal parallax. * ASMR sound with summer vibe. In a sense, we are making this a cinematic experience. --- ## ASCII Mockup ```plaintext ┌─────────────────────┬─────────┬─────────┬────────────────────────────────────┐ │[//] File Edit │Gen 1 │Gen 2 │ + │ ├────┬────────────────┴─┬───────┴─────────┴────────────────────────────────────┤ │┌──┐│⌄ Template │< Back 11:11 ◿◿ ◥◤ [▩▩ ]│ ││Cr││┌────────────────┐│ │ │└──┘││Machi/Character ││ ┌───┐ ┌───┐ │ │┌──┐│└────────────────┘│ ◯◯◯◯◯◯◯ │ ◀ │ │ ▶ │ ◯◯◯ │ ││Hi││┌────────────────┐│ ◯ Tree2 ◯ └───┘ └───┘ ◯◯◯◯◯◯ ◯◯◯ │ │└──┘││┌─┐ ┌─┐ ┌─┐ ┌─┐ ││ ◯◯◯◯ ◯◯◯ ◯◯ Tree1 ◯ │ │┌──┐││├─┤ ├─┤ ├─┤ ├─┤ ││ ┌─────────┐ ◯◯◯◯◯ ┌─────────┐ ◯◯◯◯ ◯◯◯ ┌────┤ ││Pi│││└─┘ └─┘ └─┘ └─┘ ││ │ │ ◯◯◯◯ │ chracter│ ◯◯◯◯◯◯◯ │ │ │└──┘│└────────────────┘│ │ │ ◯◯◯ │ *** │ ◯◯ │ ext│ │ ├──────────────────┤ │ extra │ ◯◯ │ *** │ ◯ │ ra2│ │ │⌄ Prompt │ │ 1 │ ◯◯◯ │ *** │ ◯◯ │ │ │ │┌────────────────┐│ │ │ ◯◯◯◯◯ │ ***** │ ◯ │ │ │ ││Boy scout kid ││ │ │ ◯◯◯◯ │ * * * │ ◯ │ │ │ ││doing yoyo ││ │ │ ◯ │ * │ ◯ │ │ │ │└────────────────┘│ │ │ ◯ │ *** │ ◯ │ │ │ │Seed [42]│ │ │ ◯◯◯ │ *** │ ◯ │ │ │ │Guidance [60]├───┴─────────┴────────┴───***───┴────────────────┴────┤ │ ├──────────────────┤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤│ │ │⌄ Animation [+]│▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤ platform ▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤│ │ │ ┌────┐┌───────┐│▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤▤│ │ │[-]│Idle││... │├──────────────────────────────────────────────────────┤ │ │ ├────┤├───────┤│Files │ │ │[-]│Run ││... ││ │ │ │ └────┘└───────┘│ ┌───┐ ┌───┐ ┌───┐ │ │ ├──────────────────┤ │ │ │ │ │ │ │ │ │Post Processing │ └───┘ └───┘ └───┘ │ │┌──┐│BG Cleanup [v]│ │ ││Ac│├━━━━━━━━━━━━━━━━━━┤ rest of the app is dimmed │ │└──┘│[Run] eta 2m │ │ └────┴──────────────────┴──────────────────────────────────────────────────────┘ ``` Once Playground button is pressed, we transition to above view where the rest of the app is dimmed, and only the top playgound plays in HD just as if you were playing HD video on youtube. The background has minimal composition with trees and flat platform. The sky is summer sky blue then have a big inspiring cloud. Then zoom out transition will happen and make it seem little more controllable and explorable. --- ## Mobile Layout Considerations While we don’t currently support mobile layout, let’s make the design mobile-proof. In mobile layout, side panel is going to be the main view where user enters in the parameters. Then, when user clicks on **Generate**, we transition to **Files** view. The Files panel will need to show a progress update of the current job and all the files that’s been generated. In Mobile, **Files** panel will provide a button to go to **Playground** since Files view will be showing large enough thumbnails giving enough “preview“ of the files being generated. Then when user enters Playground, we will zoom in right from the thumbnail and then into the full Playground experience. To exit the playground, use will press “< Back“ button on top-left corner. User is also able to tap on the thumbnail once to go into detailed preview mode which will be equivalent to the Content Preview panel. In there, user will also see small **Playground** button in which case, we would transition right from the Content Preview to the Playground and pressing Back button will simply get you back to the detailed content preview. **Playground** experience in mobile will start in portrait mode as if you were watching a YouTube shorts. But if you rotate the phone, we will show landscape mode. --- Next step is to create a more realistic mockup in Figma. Wish me luck. — Sprited Dev 🌱