March updates: lots of small things

From Red Blob Games's Blog

One of my goals this year is to publish in smaller chunks instead of trying to do everything in "one big launch". This is what I've been working on over the past few weeks:

1. I've been learning more about reactive updates, because I think this will make it easier to implement my interactive diagrams, and I think I'll be able to write tutorials more easily. The web has changed a lot since 2010 and I haven't kept up, so now I've been learning a lot about what's now available.
2. I updated my 3D renderer for Mapgen2. I had been developing this for a game that has since been cancelled, so I never finished this project, and didn't publicize it. But it's here if you want to play with it. It's an incomplete 3D render of the maps you can make with mapgen2. I improved the 3D rendering by tweaking the initial settings. I added a seed URL parameter so that once you find a seed you like with mapgen2, you can come to this page and see it in 3D (change rotate_z to spin the map around). And I added an elevation+moisture export. It's all rather rough, and if I get a client that needs something like this, I'll put more effort into it, but for now it only gets minor updates.
3. I updated the implementation of the 2D Visibility article. This was one of my earliest pages, and at the time I had written it with SVG, but found it was too slow on my iPhone and didn't work at all on my Android phone. I rewrote the whole thing with Canvas, which was great, but I made the draggable circles and squares into separate Canvases. I also made the background grid a separate Canvas. Then I had to use absolute positioning to overlay these layers on top of each other. It worked but when I changed my site to have a responsive layout for phones and tablets, it was hard to convert this page. I went through this code and reimplemented the system to use a single responsive-sized Canvas. I also added numeric labels to corners and triangles during the sweep steps, and mouseover effects to give feedback that you're over a draggable item. I also decided that I didn't like the animation and switched it to a slider that lets you control time. I got rid of JQuery, as I no longer needed JQuery-UI to make a slider now that browsers have a native slider control. However the native slider control has some issues on some mobile devices so I tweaked it to make larger and slide better. I built a polar/cartesian animation to help explain the connection to sweep line algorithms, but ended up not using it. Maybe next update.
4. I updated the code generated from my hexagon library procedural code generator. It generates hex grid code in 8 different languages. The original code produced module-level functions. This wasn't a good style for languages like Java and C# that put everything into classes, so I turned those functions into static methods. That's still not the best style, so I spent some time last week making them into instance methods. I also added a class-style Javascript output, since Javascript now has class syntax. I also added invariant testing to make sure that q+r+s == 0 in the Hex class constructor. It's an easy test that can catch some bugs from misunderstanding how cube coordinates work. At some point I'd like to use the generated Javascript code to implement the hexagon page.
5. I've also been investigating ways to make my pages load faster. Right now the text will show up and then after the page loads, it loads the Javascript code, and then that will generate the diagrams, as well as the code to animate and interact with them. It's a noticeable delay with an annoying layout update. It'd be nicer if I could generate the diagrams on the server side, and then the code to animate and interact with them would be on the client. That way the initial diagrams would already be rendered by the time you visit the page, and it would only have to render the subsequent diagrams when you interact with them. My code currently isn't structured to support this, but I'm learning how to structure it to make that work.
6. I played with animation techniques for hexagon grid diagrams. What I do now is kind of annoying to implement. I wanted to try CSS transitions instead; they weren't available when I wrote the hexagon page but they're available now in most browsers. The main idea is that when switching between pointy and flat layouts, the entire grid rotates, but the labels have to rotate in the opposite direction. I should be able to use CSS transforms. I tried out several different animation techniques, with an eye towards getting GPU acceleration with SVGs. My conclusion was what I do is annoying and slow, and I now have an option of annoying and fast, or non-annoying and slow. I'm likely to favor non-annoying. And that me to discover a Safari bug, which I filed on the Safari bug tracker.
7. I started deciphering the RimWorld save file format, because I'd like to use some RimWorld maps as test cases for a pathfinding algorithm I plan to work on. I think it could make a big difference for games like RimWorld. My initial experiments with Dragon Age Origins maps were promising, with significant speedups with very little code. However, I never finished those experiments. I'm hoping RimWorld (one of my favorite games right now) will give me enough motivation to work on this. Now that I think about it, it'd probably be easier to ask Tynan for the map format than for me to decipher it myself…
8. I'm going to the Game Developers Conference later this month so I made new business cards. I have 50 different designs, and 50 rounded-corner cards and 50 sharp-corner cards, so there's only one of each card. If you're at GDC, find me and pick your favorite card. Each one is based on one of my projects and has a story behind it. My goal is to chat with lots of people.

I track my projects on Trello but some of these things aren't “projects” so they aren't on Trello.