The History of the Doubutt Game

Posted by Kim on April 27, 2018, 10:51am

Note from Kim: The following is an article written by my father, the force behind the Doubutt game's code. He wanted to share the story of how it came to be with all of you.

I thought you might like to hear a little about the development of the Doubutt game. Some of it is history, and other parts are technical. Just skip the technical parts if you're not interested.

Kim and I started working on it in 2008 as a hobby project, two years before she'd start building the RPR. We thought it would have a completely different plot then. At the time, we worked on creating a level editor, monster/NPC pathing, physics simulations and other game essentials.

In 2015, Kim reconceived the game for the RPR with Doubutt as the star, designed levels, created and collected pixel art, and collected music and sound effects. I did the Doubutt game coding. Kim also implemented the RPR server side code so the game could report game wins and losses to the RPR. Although not part of the Doubutt game itself, Kim did all the RPR coding for the web game side of epic week. She had the clever idea to tie in the Doubutt game in to the web game. You would gather a weapon in the Doubutt game, and that weapon would then reappear on the site as part of the on-site plot, and could be used in the battle against the first goblin invasion.

Doubutt was written in Java so it would easily run on multiple platforms including Windows and Mac OS. My dream from the beginning was to be able to run the game in the browser as well as the desktop. To accomplish this I planned to write a Java to JavaScript converter. Despite JavaScript having the word Java in the name, JavaScript and Java are two very different languages. Java is a compiled statically typed language designed to run on many operating systems. JavaScript is a dynamically typed interpreted language designed to give web pages behavior. So I couldn't just drop the Java code into the browser and expect it to work. Running in the browser would have to wait. First we had to get it running on the desktop.

In May 2016 I finally started working on a Java to JavaScript converter. This was a considerable amount of work. In February 2017 I discovered the language Scala. Scala is a statically typed compiled language like Java. It compiles to JVM bytecode so it can run anywhere Java can. In addition, Scala can be compiled to JavaScript. I did some experiments and was very pleased with the quality of the JavaScript code produced. I abandoned work on the Java to JavaScript converter in favor of using Scala.

I went on a crash course of converting the game from Java to Scala to get it ready for Epic week 2017 at the end of April. Last year when you played Doubutt you were running the Scala version, even though it was still desktop only.

Converting to Scala wasn't the only step needed to get Doubutt running in the browser. There were a number of services from Java I depended on that would have to be rewritten to get them to use the corresponding service in the browser. Here's a list of those services: sound, dialog boxes, graphics, file IO, XML and JSON parsing, dynamic code invocation, timers and logging. I didn't want to lose the ability to run Doubutt on the desktop as I added support for the browser. I designed an abstraction layer to provide the game with the needed services. I created two implementations for these services, one for the desktop and one for the browser. It took until March of 2018 to get Doubutt to start working in the browser. This was so late that we thought we would have to wait until Epic Week 2019 to see the dream of Doubutt running in the browser be realized. And it still runs on the desktop. It's often easier to debug a new feature of the game on the desktop, even though the plan is to deploy it on the browser.

One of the biggest challenges in getting the game to work in the browser was asynchronous execution. On the desktop when a request is made to read an image or XML file, the request returns with the requested data (synchronous IO). On the browser when you ask for a file (XMLHttpRequest), you don't get it right away, and you're not allowed to have your program wait for the IO to complete. Waiting for the IO would cause the browser to freeze until data was returned. Instead, when you make a read request not only do you specify the URL where the data should be retrieved from, you also supply a callback. When the browser eventually retrieves the data, it will call your callback code to continue execution of your program. This is called asynchronous IO. Converting the code from synchronous to asynchronous took the bulk of the effort to get the game running in the browser. This asynchronous approach can't be hidden by an abstraction layer. Every part of the game that needed to read an image and draw it, or read a sound and play it required this change. Scala provided a construct class called a Future, and something called a for comprehension that made this conversion far easier than it would otherwise would have been.

In 2018 the browser is very powerful. The HTML canvas element provides a very capable 2D graphics system. The sound API is as powerful as the desktop sound API. Unfortunately Apple has not adopted the latest W3C standard for sound. Their API is close, but not close enough to get the sound working in Safari in time for this year.

As this is the first year that Doubutt runs in the browser, it is in some ways still experimental. There are some strange display issues we will continue to work out, like black lines that sometimes appear between tiles when Doubutt walks. But there are also major advantages. For example, this is the first time that the Doubutt game may run on tablets, mobile phones, other touch screen devices, or on computers that for whatever reason could not install Java. I say "may" run because some of these devices will not be powerful enough to run the game smoothly, especially when the physics engine is working hard to bounce many balls. Still, this expands the number of people that the game is potentially available to, and that's a good thing.

Post tags: Epic Week 2018

Next: Epic Sunday! » « Previous: Epic Week 2018: The Goblin Corsair Has Caught Up With Us!