Palagpat Coding

Fun with JavaScript, HTML5 game design, and the occasional outbreak of seriousness

js13kGames: Library Design and Core Mechanics

Friday, August 31, 2012

js13kGames logo Last week I started working on a game for the js13kGames competition, to see if I could do something fun and cool with open web technologies in less than 13 kilobytes. It's been an interesting week, I've learned a couple of things about my workflow, and I've almost got something playable to show off (maybe next week).

Need-Driven Library Design

The first thing I've run into is how incomplete my in-development HTML5 game library, TangleJS, still is. I've made a couple of decent games from scratch in the past, and started abstracting ideas and lessons learned there to make a better, more deliberate platform for my future efforts. I'm chronicling that process in my blog series, Let's Make a Canvas Library. The mistake I made was in thinking that it was in any way ready for me to start actually, you know, using.

The game I'm building for js13kGames, Blak & Bloo, is my first real effort to build something using the barely-just-enough-library-and-no-more philosophy that's driving Tangle's development. At every step, when I found some new feature I needed (e.g. sprite animations, state machine transition notifications, etc), rather than just grabbing something that worked in a previous game and hacking it down to fit my immediate need, I've tried to take a step back and deliberately design something more general-purpose that can be easily reused as part of the overall Tangle library. It's... well, it's slowed me down during what should have been a quick week of prototyping.

That said, I believe the extra effort I've spent doing this hasn't been wasted; on the contrary, Tangle won't ever be really useful to me unless I extend it organically by growing it on demand in this way. It's just made progress slower and less interesting than I would've liked it to be. Thus, I haven't really had much to blog about. At least, not until yesterday.

Game Mechanics

As a reminder, my vision for Blak & Bloo is a 2-player, cooperative/competitive Match-3 puzzle game. As in all games of this style, the goal will be to line up groups of 3 or more matching tiles (in this case fruits and berries) to score points. The “hook” I alluded to last time, the thing that I hope will make the game fun to play, is that Player 1 and Player 2 have totally different ways of interacting with the game... to make tile matches, Player 1 can only swap adjacent tiles, and Player 2 can only shift rows and columns along their axes:

tile-swapping vs tile column shifting

So far, I've got the code written to make these swaps and shifts (and any resulting group matching) happen instantly, and the tiles are rendering themselves as simple swatches of color, like in the image above. To have a satisfying experience, though, requires more polish... it's going to require custom tile graphics, animations, and tweening of tile movements. So next, I'm going to need to write a Sprite class.

You have been reading js13kGames: Library Design and Core Mechanics, part of the random geekery that is Palagpat Coding: the personal blog of Rylee Corradini. If you'd like to leave me feedback, you can usually find me lurking on Twitter, where I intermittently share and comment on similar topics.