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.
pso-mini.mp4
Getting Started
# clone repo and enter directory
$ npm i
$ npm run dev
# visit given port in browser
Dev Notes:
Notable Sources:
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
- demo-video
- 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…)
- font2s/pso_test_regular
- 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)
To-Do:
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.
PERFORMANCE:
- Optimize Sigil svg et al.
- Move svg animations to canvas
- Switch Two.js to webgl (
Two.Types.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
ACCURACY:
- 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.)
IMPROVEMENTS:
- 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.)
Notable Tech:
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
AESTHETICS:
- pso-highres-ui – highres ui for Dolphin emulator
- highres-dreamcast-ui – highres Dreamcast ui for Dolphin emulator
- Custom-HUD – PSO:bb custom hud plugin
