Phantasy Star Online Title Screen with Vue 3

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!

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: 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:

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: AESTHETICS:

PSO:BB Servers:

  1. Ephinea
  2. Ultima
  3. Destiny

GitHub

View Github