Lobby Archive - A Live2D Collection

It's been awhile! All sorts of things happen in life that you cannot easily predict but at the same time, I've been quite productive with myself at least! 😁

Before I end up rambling on the things I've been up to, let me introduce a new project I've been recently been working on, Lobby Archive, a fan-made website that stores various Live2D animations of various Blue Archive students and let you view them within the browser or download as is.

Site URL: https://lobby-archive.vercel.app/

Blue Archive..?

For those reading unfamiliar with Blue Archive, or gacha games as a whole, Blue Archive is a free-to-play gacha game where you are a teacher (sensei) is summoned to a modern-esque academic city called Kivotos. As a sensei, you are tasked with various in-game tasks to accomplish while collecting various playable characters called students.

One of the most cool features that this game are live2d animations of each character. As explained by Wikipedia:

Live2D is an animation technique used to animate static images—usually anime-style characters—that involves separating an image into parts and animating each part accordingly, without the need of frame-by-frame animation or a 3D model

They are called Memorial Lobbies in this Blue Archive! You can view it in an astoundingly high quality, comes with a respective OST to emphasize the mood, and you can even interact with the animation by patting the student's head (technology really has advanced, what can I say 😂).

See here for a video of the headpat interaction

The Problem

I have always liked viewing art and live2d is no different. However, when Googling around to view the live2d of other students, I wasn't able to find many easy results. Even browsing through fan-made wikis, it wasn't abundantly clear on where to find them either. At most, I found a list that had the information of all live2d memorial lobbies but only a static image of them, and not an animated live2d that I was hoping for.

A small pet peeve of mine if anything else, so I took it upon myself and came up with the idea of creating a website where you can strictly browse for Memorial Lobbies of characters (and maybe even download them too). After all, I'm sure someone else most likely had the same problem too before resorting through various YouTube results for a somewhat high quality rendition too, right?

Features

Here are the features that are available for this project:

• Browse through a list of Memorial Lobbies
• Search functionality, letting you search for any data by student name
• Simple video component letting you see (and hear) the Memorial Lobby as exactly as it is in-game
• Download functionality, letting you download the video file as an mp4 file

My Chosen Tech Stack

For this project, I have built with the following:

Frontend

• Astro
• Tailwind CSS
• Vanilla Typescript (with some little React involved)

Backend

• Sanity CMS

Frontend

Because this site's content wouldn't change that often, I decided to opt for Astro and utilize it's power to create a Static Site Generated (SSG) website. Tailwind CSS is used for the site's styling and everything else is built with mostly vanilla Typescript.

ALthough I have added React, not much React is really used in this project. At most, I have used React to handle the loading state of the video (ie. change the blurred loading state when the video has loaded, controlled by React state)

// State to handle when video has loaded or not, fetched from Sanity CDN
const [video, setVideo] = useState();

Backend

For the backend, I have chosen Sanity CMS as the backend. My reasons for choosing is simply because I have done a previous project that involved using Sanity CMS as a learning experience. Simply put, Sanity CMS is still refresh in the mind so it was a perfect chance for me to implement it for another project.

For this project, there is only one schema that is really needed, defined as memlobby. Grabbed from my Github README, memlobby's schema type is as follows:

For the actual content, I have taken several steps to prepare the content for Sanity:

1. I have subscribed to Jaymie's Blue Archive Workshop Live2d Collection on Steam. For each student, I have downloaded the respective video for each student. (My project wouldn't exist without this collection, so huge props for Jaymie on keeping this collection public and active!)
2. Fetched the respective data on Blue Archive Wiki. Data consisted of the student's full name, a static image that is used as the loading state of the live2d video, the date of when the student has been released, and the relationship number (used to determine when the student's memorial lobby is unlocked in-game)
3. To reduce as much storage space as I can on Sanity's content lake, I have created my own Python script that converted jpg/png images to webp format. This resulted in a lot of space saved!
4. Access Sanity Studio's Admin panel, created a new memlobby entry and inputted the data into the respective fields.
5. Publish the content!!

Data fetched from Sanity's CDN is converted into a string format for usage on the Frontend. Although tedious, it was quite a simple process!

Conclusion

Overall, this project took me just under 2 weeks. It is one of those projects where although it wasn't as complex as it ended up being, as someone who also plays the game, it ended up being a passion project too since I made something that I find myself using (and adding over time).

I am open to suggestions too so if you got anything to say, I am all ears! Thanks for reading, sensei!

Disclaimer

All assets, game content, and materials are trademarks and copyrights of Nexon Games. This website is not affiliated with Nexon games and is simply a fan-made project created by a fan that also plays the game.

incase you missed it, here is the URL again: https://lobby-archive.vercel.app/