Another year, another entry for Hatsune Miku’s Magical Mirai Programming Contest. Against all odds, I managed to put together a decent entry along with an amazing group but again, for the second year in a row, we weren’t selected as finalists. You can check out our entry, a web-playable game for PC, at itch.io . You can also check a gameplay video of it here, at my YouTube channel.
Read on for more details about the contest, how our entry came to be, and future plans.
What is this?
Hatsune Miku “Magical Mirai” is a combined event that consists of a 3DCG live concert of virtual singers such as Hatsune Miku, along with an exhibition where you will be able to experience the creative culture surrounding Hatsune Miku. […] By making Hatsune Miku and the other virtual singers a creative hub, we are hoping to make space for people to gather and have fun; tied together with the keyword “creativity”.
Join the creative culture by making an original web application using programming!
We are looking for “lyric apps,” interactive web applications with animated lyrics and other visual effects to accompany the songs of the Magical Mirai Music Contest.
The contest was announced on April 10, and of course I thought of participating although I was unsure how possible it was going to be. This year is being hectic with contract work and life in general (I reserve the right to complain about this several times in this story).
In any case, one of the biggest lessons from last year was to stick more closely to the theme of the event, so that was the first time I considered: Can I come up with something interesting that will fit the theme this year?
This year’s theme is “Starry River in the Sky”
Well, that’s something quite… open? I imagined there was something behind it that may be lost in translation, so I searched for the original theme in Japanese; and of course it wasn’t just any starry river in the sky.
テーマは『星河一天（せいがいってん）』です！
So the main topic was 星河一天 , “Seiga-itten”, a pretty open expression that could be interpreted literally as “the milky way filling all the sky”. Of course, this made sense as noted in the key art of the website, which referenced the Japanese tradition of 七夕 (Tanabata, “Star Festival”).
Tanabata comes from an old Chinese tale about princess Orihime and Hikoboshi, the cowherd. They are represented by the stars Vega and Altair, separated by the Milky Way. The gods allowed them to meet only once a year, on the seventh night of the seventh month, if the skies are clear and the river of stars can be crossed.
Before the Start
My idea, initially, was to have something like Miku flying around in a spaceship while the music played (maybe she was singing, maybe the music was just ambience on her spaceship). Drifting in space with the milky way in the background, no real objectives or game, just chill space exploration. I was inspired by this video and its music
Talking with Gaby, Slashware’s design assistant, we also considered doing something with the small pokemon-like mascots the characters were carrying on their waist in the cover art.
Also, on May 21, I made an initial contact with friend Alcaraz… he had mentioned sometime before that he would enjoy working again together, so I told him I was considering participating this year and he told me he was on board.
I wasn’t so sure about my ideas though… and, in the middle of busy times, I thought it would be better to take a sane decision and pass the opportunity for this year.
Day 1 – July 1, 2025
But all of a sudden, within one week to the deadline… I had an idea that maybe could work… and I could put together easily from existing components… maybe? 7 days to make a game sounds familiar so why not?
An interstellar journey… how about taking Distant Friends, my entry for js13k 2021, but instead of visiting friends, you’d have to gather together the vocaloid team to sing along one of the winners of the song contest, “Street Light“? It so happened that this song was the first contest winner featuring all of the vocaloids, as allowed by new rules of the contest, so I thought it would make sense to make a game featuring them all. What if we showed them in small boxes, in a style similar to Star Fox, with animations in sync with the music?
And so, project “Bocaro-frenz” was born.
The idea was to take Distant Friends, and mix it with Hatsune Miku’s Magical Tablet, my procon entry from 2024, but that was harder than it sounds. I went back and forth, deciding which codebase would have precedence… these are very different projects, with Distant Friends being a js13k and thus extremely minimalistic vanilla JS and featuring packaging tools optimized to reduce the size of it as a package to the bare minimum so that the entire game is under 13KB, and Magical Tablet being a much more relaxed project in that aspect, while at the same time nicely packed TypeScript with webpack, as I took some time on 2024 to organize the source code to make it easier for jurors to review (I wonder if they ever took a look at it).
After some rounds, I found out that even if the infrastructure of Magical Tablet was better, I would not be using the bulk of it (which included the logic for the special SVG masked animations, and the pointer based drawing routines). So I decided to instead go with Distant Friends, and then port the “singing” components from Magical Tablet.
The first step though was to modernize Distant Friends so that I could get it running on 2025, and then strip it of its music (sorry QuietGecko!) only to then slap Magical Tablet’s TextAlive API integration on top of it. It was more of an ugly mix and remove, not a nice clean port.
I reskinned the game, changing the name of the friends for the bocaroidos. and then, just to get an idea of how it’d look visually, I put a concept a singing Miku there. I thought it didn’t look bad at all. I used what I had there to pitch the idea to Alcaraz, who also participated on the entry for last year. Time is very short but maybe he would be able to help. I was also considering already friend Armyboy for the cover art.
Day 2 – July 2
Both Alcaraz and Armyboy got back to me and asked for more details, yay! I sent some info and, luckily, they were in. Having great art is a MUST for this contest. I was also planning to get a pixel artist in (either Aguahervida or Kevin), to create some cute UI art. (but that didn’t happen).
This day I shared with Armyboy some ideas for the cover art, including the fact that Meiko was to have a lot of protagonism, I thought that was a good fit for the style of art made by Army. As a reference I sent his very own art for ArcherFire (from around 2014), as well as MikuMikuFly, the excellent entry by saderuuu from 2024.
Another critical addition to the team was my daughter, Gaby. I got her to do some design of the universe, the planets you’d have to explore, who would be on each planet and what cities would be on each. We used Slashware’s official design documentation templates.
Back to coding, I went ahead and migrated some critical components from the Magical Tablet project, including the ImagePreloader and another portion of the bopping/singing animation controllers. Still using art from 2024, I put together a minimal working version of it all connected to the TextAlive API.
Day 3, July 3
This day Alcaraz sent some progress on his style tests for the portraits.
I thought it was step in the good direction, I liked the uniqueness of the style although it may have been a bit too chibi.
It was a very busy day but you got to do something every day even if it’s tiny – so I decided to set up the data for the planets, based on Gaby’s designs.
Day 4, July 4
Not a lot of progress this day on my side; I finished positioning the planets based on Gaby’s designs,
Continuing build the team last minute, I contacted Sara Rios, a UX specialist with whom I’ve done some projects in the past and present, to see if she would be interested on joining the project for UX/UI (parts I often neglect and translate into poor experiences in the end). She was interested!
Alcaraz sent a bit more of progress, he was still conceptualizing a bit. I continued coordinating work with him in regards of the assets required for the singing animation.
I toyed around a bit with Alcaraz idea and mixed it with the animated mouths and eyes, just to get a glimpse of how things looked.
No news from Armyboy at this point so I was still not sure if he was going to manage to send the title screen. Patience!
Also made the game completable – was planning for the goal to be to complete the game while the song was still going.
At this point, I considered the top priorities were to do a bit of level design and make sure the game was fun with boosters and obstacles, and also decide what to do with the rockets. In the end I just left them there, but they are useless.
Day 5, July 5
I went ahead and start working on “de-vectorizing” the game so that instead of drawn shapes it worked with sprites; the first task was removing the ship and replacing it with a sprite sent by Armyboy, while keeping the asymmetrical scaling effect that made it look so cool in Distant Friends.
One critical part of the entry would be to make sure we showed who was singing each part of the song; the TextAlive API currently doesn’t support this so I had to manually jump ahead and do it; I considered crazy things like manually mapping the intervals of the song (that would have been a lot of work!) but in the end I settled on mapping the full verses with the characters (I had to look up the lyrics and adjust them to the data that we receive via the API), it was a bit of work but in the end worked great (as long as there are no collisions like characters repeating the same verses in different parts! but luckily that wasn’t the case on Street Light)
Along with this detection, I changed it so that the correct vocaloid graphics were displayed, aligning with the music progression.
Someone (Alcaraz?) suggested we had a parallax effect for the space background; the effect was actually there already, but I added an additional layer for closer objects vs far-away stars.
Sara continued exploring the galaxy and sending a lot of ideas for improving the game and the user experience, I was sure I could keep up my pace to her ideas but I wasn’t going to stop her as all of them were great and I hope we can implement them all in the future.
I shared with Alcaraz the official vocaloid “costumes” for this year’s Magical Mirai, just in case they were useful for our own illustrations to git each one its personality. It never ceases to amaze me how much attention to detail is put to everything in this event.
Day 6, July 6
Armyboy returns! he was busy of course but set aside some time today to work on the cover art of the game. He did some amazing work, as expected of an artist of his caliber.
Following some hints on Sara’s UX designs, I decided to change the theme so that, instead of picking up your friends in the planets, they were already on board and you just had to visit the planets to recover some powerful musical gems or something; I thought it made more sense because else, how would they be singing together already from the beginning? the alternative was to make it look like they were somewhere connected remotely, until you picked them up, but that would have required more graphics work and was awkward anyways (intergalactic communications have very high latency!).
I also thought we needed to further distance us from the original Distant Friends (see what I did there?). Sara started investigating and brought some ideas to change visual elements, including some sharp stars and nebulae in a darker background. I went ahead and implemented the stars, for now.
This evolved along with more work in the UX; I set some time aside to implement it in the game, including integrating the font and some of the HUD elements.
Day 7, July 7
I received the final art for the characters from Alcaraz including variations in their eyes and the mouth shapes, they look great.
Sara was hard at work in the UX design front, adapting the colors and HUD elements to the new visuals of the main scene. As a last day bash, it was crazy to get things going; I tried to integrate as much as possible of Sara’s UX work while I made visual tweaks and changes including making the game run at full HD so much more crisp than the original Distant Friends.
Last minute changes in the cover art to cover a bit of underskirt skin; since Army wasn’t available that day I had to do it myself, using his own “plugsuit” variation of the cover art on top of the original version.
Alcaraz also updated the cover art to include all of the other vocaloids crammed into the spaceship window; he also sent new art for the asteroids, allowing me to remove the remaining pieces of hand-drawn style art
I was running out of time, but there was still a big pending task to make the map interesting to explore (and different from Distant Friends!) luckily, the way it was originally made for the js13k was half-procedural (because you cannot add a lot of data to a js13k) so that allowed me to change the parameters of the pathways between the planets and populate these with asteroid and booster fields, to add some pathway to mastery of the game (successful players will discover quicker ways between planets, if a bit risky with the asteroids but they can dodge them with their mad skillz)
More last minute critical changes including simplifying greatly the process of landing into planets, which was a bit awkward to explain and execute, removing the NPCs from planets (because we wouldn’t be able to put content for them), and changing the theme one last time so that instead of magical gems, you had to find the vocaloid artifacts on each planet (a decision made partly due to not having art for different types of gems, and just to add some stronger connection with the characters)
Finally, the game was ready for testing, like, 1 hour before the deadline. Which was of course a bit too late to react to changes, but at least we confirmed nothing was breaking the game critically.
After the contest, July 8
Playing the game a bit the next day, I noticed some UX improvements would have made it much better. First and foremost, I think we could have condensed the info in the HUD a lot so that there was a kind of “Dragon Radar” in which you could toggle the waypoint, and see the direction at the same component, also eliminating a lot of superfluous text which makes a lot of noise.
If we manage to create an update, I’d like to include this at least. Another good idea that was too late: including one of the other tracks for the title screen (maybe this one)
The first filter – August 8
So this day we got the news that we hadn’t made it to the finalists. (by the way I plan to review them sometime soon)
It’s hard to know what we did wrong, but the mobile experience was terrible for sure so, if they checked it there, I’m sure it would have left a bad impression. Lack of a proper context of what the goal was, and further game instructions might also have contributed.
Ultimately, there’s a lot of competition so it’ll always be hard to make it… it would seem investing even more in UX is at hand. How do you think we could make it better? Let me know in the comments or elsewhere!
Slashie's Gamedev Adventures 