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.

• 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

• 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.)
  • Acerola CRT breakdown
  • Łukasz Łazarecki options walk through
  • well known: CRT-Royale
  • Pixi js out of box filter
  • js Babylon walk-through
  • gflx js
  • vanilla js

Notable Tech:

NOTE – sorry for some of the package bloat, unused stuff is from my template

• Vite
• Vue 3
• Two.js
• Howler

Other PSO Info:

PSO Community Projects:

• NewServe – PSO server/proxy
• Booma : (proxy | client | server) – PSO:bb emulation suite
• PSO:BB2 : (Library | content | Client) – PSO:bb remake in unity
• Telepipe – PSO on Dolphin Emulator
• Phantasmal – web app, utils, and WIP server

• 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

PSO:BB Servers:

1. Ephinea
2. Ultima
3. Destiny

GitHub

View Github