Phantasy Star Online – Title Screen
I decided to try recreating the Phantasy Star Online title-screen using web technology. For that reason, it is incredibly laggy… I do not recommend running at full screen!
This is not a faithful recreation of any particular PSO version, but it is most similar to @HelloKitty‘s version seen here.
# clone repo and enter directory $ npm i $ npm run dev # visit given port in browser
NOTE – If you know of other relevant sources or title screen recreations, let me know or make a PR, I'd be happy to add them here!
- @HelloKitty’s PSOBB2 Title Screen
- dev-log video
- /Sound/ – Has many useful sound effects and songs (title screen song included)
- /UI/Titlescreen/ – Has the divided up assets of the title screen. (I used the Orbs from here)
- PSOBB2 Discord had a good full-circle (I used this in creating an SVG)
- GameCube Version
- Egg+ / anycoloregg
- decent res full-circle
- decent res inner-circle (I used this in creating an SVG)
- Circle Meaning
- Fringes of Algo (I used PSO font from here)
- dreamcast remake
- notably shows use of a sprite based StarStream
- Other Unused Fonts: (its hard to know whats a duplicate or original source…)
- freefontsdownload/free-pso-test-regular-font (prob same as prior)
- wfonts/pso-test (prob same as prior)
- eleriaqueen/stylised-pso-font (links are broken, but I’d like a copy if anyone has them)
- fontstruct/phantasy_star_online (includes punctuation)
- fontstruct/phantasy_star_online_cyr_ver_1 (includes punctuation)
NOTE – StarStream utilizes a glitch in how two.js renders HSL colors, where intensity/luminance is collective when overlapping. This breaks when window is resized... I'm looking for a better solution... For now, the version is pinned incase its fixed.
- Optimize Sigil svg et al.
- Move svg animations to canvas
- Switch Two.js to webgl (
- Use faster canvas Lib (should be fine as long as it has path support)
- Don’t even use js? – rust wasm + simd
- No sound until interaction – pretty sure there is no fix for web as its the intended effect
- Create a more accurate Sigil svg.
- Hex Grid does not cover scree.n (its also scaled incorrectly)
- Background is just a gradient, need a better image. (or see improvements)
- I just guessed on colors, could prob color pick them. (some of the blues and glows don’t mesh as well as they should)
- I believe the StarStream in the original uses rough sprites, while I use circles.
- while these HD-remakes are nice, I believe you loose out a bit on the CRT color-burnt intensity and bleeding colors. (see improvements).
- The Sparkle is probably the least accurate as its rays are not tapered. (needs total rework)
- action-text does not blink due to lag…
- I guessed on rotation speeds based on HelloKitty/Gladers video
- StartStream initializes from one point and may have gaps in center. The OG initializes within a range and doesn’t have gaps in the middle afaik.
- text blur is incorrect, is should be blurred away from the middle. but directional blur is hard to achieve with css. (unless cloning the object multiple times and blurring together.)
- Bg-text animations (ideas: infinite scroll, words that endlessly cycle characters, intermittently change a words letters with pr character slide animation, meaningful text like in ep3 title screen)
- Rather than grungy background image, use gradients/blurry objects that respond to mouse location/movement
- Add strong white glow to sigil during Hex animation Glader does this, I think its nice.
- Needs to handle more screen dimensions/resolution that originally designed for.
- By moving more elements to canvas, a CRT shader can be used rather than a scan-line overlay. (add scan-lines, chromatic aberration, warp, color-burn, etc.)
NOTE – sorry for some of the package bloat, unused stuff is from my template
Other PSO Info:
PSO Community Projects:
SERVERS, EMULATORS, ET AL:
CALC, STAT, & Utils:
- PSOCalc – PSO:bb section ID calc [ js ]
- ID_generator – PSO:gc section ID calc [ rust ]
- secid-calc – PSO section ID calc [ Vue.js ]
- MAG database – PSO:bb plugin
- MAG Calc – PSO mag calculator
- MAG AI – Generate Mag Feeding plan
- MAG Feeder – Mag Feeder Tool for PSOBB – drop chart – PSO:bb plugin for drop chart
- Map Simulator – PSO:gc Map RGN simulation
- pso-highres-ui – highres ui for Dolphin emulator
- highres-dreamcast-ui – highres Dreamcast ui for Dolphin emulator
- Custom-HUD – PSO:bb custom hud plugin