Porting Doki Doki Densha Sekai to Web

Doki Doki Densha Sekai is still one of my favorites things I've been a part of creating, and I keep coming back to it. Recently I was made aware of Love.js, a port of LÖVE to run in a Web Browser, and got inspired to use it on Doki Doki Densha Sekai.

The end result can be played here. The rest of this article documents the changes I had to do to the source code to get it to work.

First off, I have to mention that there is no functional difference between the web version and the desktop version. The game itself is identical between web and desktop. What difficulties I encountered where mostly in the source code itself, either as a result of the WebGL having a more restrictive shader system than that used by desktop LÖVE, or due to some interfaces working slightly differently.

Fixing Shaders

When I initially tried to start the game it failed when it tried to compile the shaders used for the metro backgrounds. It turns out that WebGL, the system which Love.js uses as its underlying graphics, uses GLSL ES, a smaller standard of the GLSL originally created for embedded devices. This means that compared to the desktop version, Love.js doesn't support:

• Implicit type casts, for example from an int to a float. This was greatly annoying, especially cases where the type was right there: float x = 1; is rejected, but float x = 1.0; is acceptable.
• Arrayed types, such as int[], but array variables is supported. As such int[20] points is rejected, but int points[20] is accepted. For my use cases this was mostly a syntactic issue.
• Instantiated uniforms. An uniform (or extern in LÖVE parlance) is a configurable variable in the shader, allowing the CPU code to change the behaviour of the shader without having to recompile it. An instantiated uniform effectively has a default value. This was a non-issue for me, as my code always supplied the updated values every frame.
• Arbitrary array indexing. The GLSL ES Shading Language has very specific requirements for the expression used to index into an array, assumingly for optimisation reasons. The expression must either be a literal or a loop variable. This forced me to redesign my Voronoi diagram algorithm: The original algorithm searched for the closest point by index, and then found the colour of the point by the index. The GLSL ES compiler rejected due to the aforementioned rules, so I changed the algorithm to store the colour, rather than the index.

Once all of this was fixed I could finally start the game, right in my browser! There was one problem: None of the game's many colourful and usually busy inhabitants moved; they all just stood and stared...

Pathfinding

The browser console was filled with "Pathfinding failed!" errors; an issue I did not have in the desktop version. It turns out I had two different implementations of some bit backing logic for my A* Search Algorithm. The desktop version uses LuaJIT with support for bit operations, whereas the web version fell back to PUC Lua with an inefficient implementation that used modulus and division to emulate bit packing.

Both bit operation implementations were correct... assuming that all inputs were integers. The LuaJIT one was slightly more robust, and would always output integer values, even if the inputs were floats, but the PUC Lua one did not, which ultimately was the issue: The pathfinding algorithm would be given two non-integer positions, and would, in the PUC Lua case, pack them into a single non-integer value, which could not be found in the map, so no path could be found.

The simplest fix was just to round the positions off to the nearest integer, which instantly fixed the issue: The tiny jello men, cats, leeks and other weirdos were once again busy in their little metro lives.

Conclusion

This was a fun little exercise, and have made me optimistic about using Love.js for further projects. I've experimented a bit with Sasuga Keisatsu and Nijousatsujinjikenriron, but the resulting build runs at very low frame rates, even on my relatively beefy PC.

Once again, you can play Doki Doki Densha Sekai in your browser.