Phantasy Star Online Episode 1 & 2 2D Interactive Map Viewer
Many many years ago I played a game known as Phantasy Star Online on the Sega Dreamcast. I instantly fell in love with this game. There were three different classes: Hunter, which focused on melee attacks and they had high attack power and health; Ranger, which focused on ranged attacks and had medium health and attack power; and Force, which focused on techniques, but had the lowest health and defense attributes.
I played the game a lot. I reached max level (which was 100 at the time) and we were even lucky enough to have the option to play the game online. Yes, you could play the game online, on the Dreamcast! We played the game so much it even killed our first Dreamcast motor, so the discs would no longer spin.
A version 2 was released on the Dreamcast which we skipped, but they released a 3rd version known as Phantasy Star Online Episode 1 & 2. This was released for Gamecube and Xbox. Ver 3 added 4 player split screen, so you no longer needed to play online. Although we never played this version online and I never reached max level, I still played this game a ton.
Around 2020 I watched my first Awesome Games Done Quick (https://gamesdonequick.com/), AGDQ for short. This is a charity event that hosts speed runs, usually a couple of times a year. A speed run, basically, is playing a game really quickly under specific rules. One time I saw someone do a glitched Phantasy Star Online Episode 1 & 2 speed run. After watching this I thought to myself, why don’t I try it? So I did.
I currently run the Episode 1 glitched category and I’m planning to get 1st place, which would mean I’m the fastest player of this game in the world (under particular rules). But, more to the point of this post, there are a few resources floating around that can help with speed runs, which you can find here: speedrun.com, typically in the form of images and videos. So then I thought, maybe I could create some sort of interactive map?
I’ve used the canvas tag a few times, once for a university project and a couple of times for just random personal projects. So let’s use the canvas tag again for another personal project!
The project in its current state can be viewed here https://mrapproved.github.io/Phantasy-Star-Online/Map-Viewer/index.html. If you want to edit the map you can execute “enableMapMaker()” in your browser developer console. You can zoom in and out via your mouse wheel (if you have one) and move around by left clicking and dragging the map.
My main aim was to provide the map of an area and then provide all other details such as item box placements, doors, switches and other objects. Enemies on the other hand were a little more complicated because a room would have a wave of monsters, but some waves would be completely optional. Now this information is quite important when you are trying to complete the game ASAP, since you don’t want to waste time on enemies that aren’t required to progress.
The first issue I had was the map. I wanted to draw the map by rooms, which allows objects, enemies and anything else related to that room to be associated with the room. This would give better control of disabling and enabling objects for a specific room.
The map object would contain its name and contain an array of scenarios. A scenario is a version of the map which can differ later on as not all maps have the same layout.
Get Ben Watts’s stories in your inbox
Join Medium for free to get updates from this writer.
A scenario contains rooms and its route. It also contains a name and the average completion time in seconds. The name and average time are just displayed at the top of the viewer, but the rooms array is a list of custom room objects and the route is an array of 2D points which is used to draw the route for the map: this is a dotted line which has a gradient from green to red (start to finish).
A room object would contain its order, start flag, finish flag, src for the image to be displayed, an array of objects, an array of waves, active state and selected state. The active state is for the viewer to display all necessary objects related to that room and select state is for editing the map.
For enemies, I created an object called “wave”, which contains a list of encounters (this allowed me to mark an encounter as optional). An encounter would contain an array of enemies. Some waves are triggered by the player when they enter a specific part of the map, such as a spawn area.
The encounter object would contain a list of enemies, an enemy would just contain the name of the enemy and the 2D position of where it spawns enemies.
Markers on the map use the BaseMapMarker. This was implemented to try and make it easier to draw specific markers without having to keep typing the necessary properties to draw a box, a line, etc. It was a way to have custom makers for specific objects.
A map would also contain an array of enemies. An enemy object would just contain the name, health points and the colour of the marker when rendered on the map viewer. The marker, colour and position would all be combined using all the map, scenario, room, wave, encounter, and enemies properties.
I’m not finished with this project, but it has been pushed down my priority list. It requires a lot of manual recording by myself and then translating that information into my custom JSON scenario object. This can take hours for a map and the specific scenario, so there are many days’ worth of work to be done.
This isn’t an informative blog post or my take on something, it’s more just something I enjoyed doing and wanted to share.
Thank you for reading. Feel free to provide feedback, positive or negative.
References
https://mrapproved.github.io/Phantasy-Star-Online/Map-Viewer/index.html
https://github.com/MrApproved/mrapproved.github.io
https://www.speedrun.com/pso
