Tag Archives: phaser.js

Flatfall - Watercolor painting

This astronaut just wants a friend! A Ludum Dare Post-mortem

Another Ludum Dare came and went and I managed to (mostly) complete a little HTML5 minigame. I didn’t really hit crunch time until the last few hours of the jam, and wasted far too much time during the compo not programming.  I’ve gotten to the point that I’m pretty comfortable with Phaser.js, and am able to spend more time figuring out game mechanics.

In ‘With Kindness’, you play a lonely astronaut, stranded on a far away planet. All he wants is to make some new friends. There are many aliens on the planet, that constantly spit acid at you, but maybe, just maybe, if you give them a good hug they will become your friend!

With Kindness Screenshot

I was initially uninspired by the theme, ‘An Unconventional Weapon’, but managed to come up with a decent idea. Though, while rating other games during the judging phase I came across a few other games also using hugging as a weapon.

I’ve been wanting to play around with making some kind of a beat-em-up style game, and used this Ludum Dare to explore and learn some of the challenges I’d run into. Probably the most difficult involved splitting one sprite into multiple sprites in order to layer them, and provide better collision detection.

With Kindness Sprites
A small selection of sprites from With Kindness

I attempted to keep the astronaut and the alien sprites separate, so I’d be able to separate both their animation, but ultimately ended up having to attach the alien to the astronaut sprite when they’re hugging. Time is always the enemy during Ludum Dare and I spent most of the time creating the astronaut sprite frames and trying to figure out how to position and layer them correctly.

I used the gulp config to build a texture atlas I’ve written about previously, which saved a massive amount of time (at least it felt like it) compared to having to manually create and update the atlas.

I only wish I’d saved some time to add some sound effects and music.  I think a super happy pop melody would really complete the experience, but I don’t see much of a future beyond that for the game.

Check out the Ludum Dare entry or Play the game directly. Feel free to check out the With Kindness Source Code, but as is standard for a 48 hour game jam, things got a little sloppy towards the end.

And since I forgot in-game instructions:

WASD or Arrow keys to move around, F key to initiate hug, continue pressing F to hug even harder!

Suzy - Watercolor by Cory Gugler

Using gulp to automate texture atlas and sprite sheet creation for Phaser

I’ve always used TexturePacker to create texture atlases for Phaser. It’s an awesome visual tool that’s really easy to use to create atlases and sprite sheets, but I’m a command line guy and always looking to save time and be more efficient.

While I’ve been working on Crash Landing, I hesitate to update or add new sprites because of the pain of having to go through all the steps to update or add a sprite. It may sound a bit silly, but it really is time consuming having to open up the program, load the old atlas, add or update it and save it back out. I’d rather spend this time coding, or creating new sprites. My dislike for this process makes me not want to create new sprites and iterate quickly.

I first looked into automating TexturePacker, which does have a command line interface, but at the same time being a standalone program I’d have to write a bash script to automate the process, or find a gulp package to interact with the command line (seems a little messy). I plan on building a full workflow for automating more tasks using Gulp, so I did a little research and found a working implementation using existing Node.js packages.

gulp.spritesmith and spritesmith-texturepacker

gulp.spritesmith is a gulp plugin for spritesmith, a node utility to create spritesheets, and spritesmith-texturepacker is an export template for spritesmith to create a .json file compatible with TexturePacker, and thus Phaser.

So let’s get to it. If you’re familiar with gulp already it’s pretty simple to set up. I’m assuming you’ve got npm and are familiar with installing packages. You’ll need gulp in your project, both spritesmith packages above, and I’m also using imagemin to optimize the resulting atlas image file.


npm install --save-dev gulp gulp-spritesmith spritesmith-texturepacker gulp-imagemin

Once installed we just need to create our gulp file with a task to create the texture atlas image and json file.


var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var imagemin = require('gulp-imagemin');
var texturepacker = require('spritesmith-texturepacker');

gulp.task('sprites', function() {
    var spriteData = gulp.src('src/images/sprites/*.png')
        .pipe(spritesmith({
            imgName: 'sprites.png',
            cssName: 'sprites.json',
            algorithm: 'binary-tree',
            cssTemplate: texturepacker
    }));
    spriteData.img.pipe(imagemin()).pipe(gulp.dest('build/images/'));
    spriteData.css.pipe(gulp.dest('build/images'));
});

I’ve created a task (sprites) that pulls all .png files from the src directory, pipes it into spritesmith with the texturepacker template. I save the return value of the operation to spriteData, and individually pipe them out so I can run the image through imagemin.

Now anytime I need to add or update a sprite, I just drop it into the source file and run ‘gulp sprites’.

The .json file outputted will be in JSON hash format. In order to load the spritesheet into a Phaser project you’ll use the atlasJSONHash method. I’m using this:


this.load.atlasJSONHash('sprites', 'build/images/sprites.png', 'build/images/sprites.json');

Each image is saved as a frame in the .json file. You’ll refer to it by the filename minus the extension. As an example, I’m loading the standing.png frame into my player class with the following:


Phaser.Sprite.call(this, game, x, y, 'sprites', 'standing');

So there it is, a simple way to speed up your workflow. Works great if you like to incrementally build out you’re Phaser game like I do.