I've been avoiding my online Morpheus accounts because I'm rather embarrassed at the current state of affairs but I managed to spend part of the holidays and the past two weekends getting some serious work done that I wanted to share.  Getting that time in was rather extraordinary for me as my professional situation remains unchanged... I still work for a startup and I still (sometimes) work crazy hours there.

What started as a "smart refactor" of the rendering engine has turned into an almost total rewrite of most of the core game engine. You can see the changes that I am working on locally compared to what is released here: https://github.com/soap-bubble/web/compare/typescript
To give you an idea of the scope of the change, GitHub reports 38,743 additions and 32,606 deletions to lines in the code. This number is inflated by 3K lines of lock file changes which occur when changing dependencies as well as the addition of prettier to perform automatic code formatting. I've been updating the code from ES6 Javascript to Typescript which also introduces a lot of mechanical changes. The addition of Typescript has been a big win as well. Typescript introduces compile time static typings to Javascript which is a fancy way of saying that it catches bugs while writing code. I even managed to fix a couple of unknown bugs while doing the conversion to Typescript.

So let's summarize where we are. I was not happy with the mechanics of a single canvas engine so I ended up with a dual canvas rendering engine. Because 3D scenes are always full screen I can safely keep the 2D canvas on the top. So let's call the lower 3D scene the pano and the upper 2D canvas special . This mirrors the names used for these types of scenes in the original Morpheus code and what I still use today. 

Rather than loading one drawing canvas per scene while having up to 7 scenes in memory I only have the 2. Rather have each scene and its canvas having its own event handling and resource management I now have a single instance of both. Because I know that pano scenes are always fullscreen, I can stop drawing any scene behind a pano. Rather than having our own event and resource management engine, I am using React event bindings and hooks for resource management.

Lot's of code has been rewritten and/or moved around. The current state of the game is that there are still more bugs with the new engine than when I started the refactor. However the corollary is that the game is somewhat playable. You can move between scenes and interact with puzzles. The core stuff is there. What is completely missing is scene entering and leaving transitions. There is still no fade-in / fade-out and you get to see elements of each scene load in as they become available. I'm tracking which scenes need to fade but I'm just currently ignoring that value. A couple of Morpheus engine edge case triggers need to be implemented. I've actually been working on these so the only remaining are panorama at angle trigger and a special case of move-at-end trigger.

I'm getting pretty close! When I have the engine running well without transitions I'll probably go ahead and release it as-is just to get it out there. I have a couple of choices for how I implement transitions and since I haven't decided how I've been putting it off. When each scene was its own canvas doing transitions was easy. A simple cross-fade of opacity was performed with separate canvases.  But with only 2 canvases to work with and with the constraint of always having the special canvas on top there then transitions become.... not impossible but more complicated.