jecrooks.com


New Games Section and Articles

March 17, 2016

TLDR: New Section! Games!

I'm adding a new section to the site and planning on starting a new series of articles on game development. Specifically, for now at least, I'm going to be writing about my own experiences writing HTML5 games. I've done a decent bit of work in data visualization, both static layout and dynamic visuals in C++ and JavaScript, in the past as part of my scientific work (plus the usual graphing tools in Python). In my copious free time (/s), I've gotten interested in learning to make games. The combination of technical challenge and creative expression is hard to resist, although I'll still be posting about non-game related stuff; in particular I started working on a Discus-like commenting system in Go, even writing a multi-thousand word post describing it, and then dropped it in favor of re-writing in Rust because, honestly, I just don't like Go that much. I'll post that development story once I've done the re-write, though it took a backseat to my recent game-endevor, some long days at the day job, and SXSW (ugh).

I'm planning to build games, generally from scratch, in HTML/CSS/JS and Rust for Web and Desktop respectively. I started playing around with Piston and graphics work in Rust, and really like it. That said, I'd like to post games and eventually publish some work to a portal like Kongregate, which means web games. I'm considering moving to TypeScript rather than standard JavaScript, but otherwise I want to stick to HTML5 (as opposed to Flash/AS3) development, on one hand because Flash needs to die, and on the other because the general skills in web game development are useful in the day job and consulting gigs. That last bit is a lesser consideration though, since Business Factory work is pretty un-inspiring on the front-end, aside from data visualization.

My first 'game' is robotfindskitten, a clone of the zen simulation 'game' where you play as a robot, represented by a # and you have to find a kitten by touching things to figure out what they are. It's very simple, but includes most of the basics of a 2D game: the standard event loop, generating and updating a game state, input, rendering to screen, and collision detection. I've used SVG graphics a lot in the past, so this was my first real experience with <canvas>. Overall, I found the experience fairly straightforward. I've used SFML and C++ to do some graph layout in the past, so the rendering strategy wasn't entirely foreign, although I learned some basics about sprite-based rendering. For robotfindskitten I rendered individual items (from text symbols) to off-screen canvases once at start-up and then re-rendered from the off-screen canvases to the main canvas after blanking the main display each frame. This is the basic sprite rendering flow and worked just fine for the simplicity that is robotfindskitten. Performance improvements (in the general case, but not needed here) could come from batching or re-using sprites to reduce the number of DOM elements used, and partial re-painting. In the case of batching, I could use a single off-screen canvas for all the sprites, and just store a position off-set and (width, height) pair to grab the sprite from. Even better, since only the robot moves, it would make sense to repaint only the robot on updates. Everything works find as it stands, although there are a few bugs (random generation of stuff can sometimes cause things to overlap) that I'm not planning to fix, as I would rather work on a new project at this point. I may add the partial re-draw though.

As for the next game, I'm considering either a basic shooter or an infinite runner. I'm leaning towards the shooter as I think the animation and art will be easier, while the programming will be a little harder than the runner. I'm imagining a classic space shooter, so static ship sprites without much (drawn) animation. I may also do an incremental/clicker, but I've lost my personal taste for them, and they don't push real hard on the skills I most want to work on right now, namely graphics programming and art.

I'm planning to do a more in-depth article on robotfindskitten in the future, but for now you can play it HERE. The source code is up on GitHub, so check it out