Palagpat Coding

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

js13kGames: On Polish

Tuesday, September 11, 2012

In my last post, I said that I had the basic tile mechanics (swapping, sliding, and group matching) in place for my js13kGames entry, Blak & Bloo. At the time, I felt like the next thing I needed to tackle was polish:

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.

Me, last time

So with this in mind, I spent a few hours scouring the Internet for suitable (and usable) fruit & berry images, drawing a custom "picnic basket" style background to replace the plain black frame in the prototype, and modified the codebase to use these images in the render loop. There's a definite difference in the "before" and "after" screenshots of this change:

Blak & Bloo gameboard with basic, colored-box tiles

This colored-boxes version kind of looks like one of those optical illusions, doesn't it?

Blak & Bloo with improved, image-based tiles

Overall, I'm pretty happy with the direction the art's going, although I'll want to tweak it somewhat as we go along, so it doesn't get too "busy".

Once I'd made these changes, I decided to check the js13kGames contest's Facebook page and saw that several entries had already been posted. I went over to check out what kinds of things other people were doing, and was blown away by the diversity and quality on display!

Holy Miyamoto, I've got to step up!

Hitting the 13KB Wall

Unfortunately, I got trapped in a mental cul-de-sac of sorts — I really want the polish that comes with the better graphics, but they made the payload much bigger than the contest's 13-kilobyte limit!

I tried a few things to shrink my footprint, with varying degrees of success:

  1. I base64-encoded the images as data URIs, hard coded at the head of my JavaScript code... no size savings there, because I'm using PNG images, which are already pretty efficiently stored
  2. I opened up my images in The GIMP again, and meticulously removed all the extraneous fields of color I could, if they could conceivably be drawn in by canvas fillRect() calls at runtime. This helped a bit, but not nearly enough to get my under the size limit.
  3. Finally, I realized what should have been an obvious avenue for size-reduction: I dropped the color depth of the images from 24-bit (RGB / true color) to 8-bit (limited to an optimized 256-color palette). This last avenue proved to be the most fruitful: I'm now back under the 13kb limit, with room to spare.

Along the same lines, I'm beginning to realize that my reliance on my minimal game framework, TangleJS, is making things bigger than they need to be. Case in point: the state machine code. But that deserves an entire blog post, so I'll save that for next time, probably in the post-mortem.

Two days to go!

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.

js13kGames: Kickoff

Sunday, August 19, 2012

js13kGames logo This past Monday marked the beginning of a cool new 1-month competition called js13kGames, where the aim is to use open web technologies (i.e. JavaScript, HTML5, and CSS3 — no plugins) to build an online game. I've had a couple of ideas simmering on the back burners of my brain for the past few months, as I've been working on my Let's Make a Canvas Library blog series, and I've decided to take this contest as an opportunity to grab one of those ideas and front-burner it for the next 4 weeks. Should be a fun exercise, and when the month's over, I hope to have something neat to show for it.

Design Brainstorming

So the original kernel of my idea was to make a simple puzzle game in the Match-3 vein, something like Bejewelled maybe, but to somehow change the dynamic. The trick is, the genre is pretty crowded with innovations, so it's a little hard to come up with something that's never been done before. A less-than-innovative game could be saved with awesome artwork or music, but sadly, my artistic skills aren't quite at the level where they could redeem an otherwise-boring game, so that's not really an option.

About the same time I started trying to think of clever Match-3 game hooks, I needed to create some fake game assets for my AssetCache demo page. I hit upon the fake game name "Black & Baloo" for a title screen, and kinda liked it:

Blak & Bloo title screen prototype

The name started out as just a simple play on words, sparked by something in my gray matter about a bear named Baloo in an old favorite story, and was never intended to be any more than a throwaway for that TangleJS tutorial page. But the more I thought about it, the more I realized I could use it as the hook I was needing!

What if, I thought, I based my game around the interactions of two player characters, named Black and Baloo respectively? (I've since decided to change the names to Blak and Bloo, since the pun still works that way, and it's a little more unique). The idea of collaborative / competitive Match-3 hasn't been explored very well, I don't think, so there's a novelty factor. Plus, the two-player mechanic provides some interesting technical challenges for me to overcome, which I'll probably talk about soon.

Once I'd hit upon this core idea, my ideas began to take shape. Next time, I'll talk about another one of the game mechanics I'll be playing with to make the game (and the development process) more interesting. It's gonna be a fun month!