Tag Archives: javascript

Assemble Prototype Repository Screenshot

Assemble boilerplate

Assemble is a static site generator for node.js that provides a massive amount of flexibility to build static sites. It allows you to build full static sites, themes, blogs, documentation or anything else you might want to generate through a template engine like Handlebars.

I will almost always use assemble to build a static site because it makes it much easier to divide a site into components and devise different ways one could break the site. Even a one page campaign site can benefit from being build in a static site generator as it helps with breaking styles into reusable bits too.

Assemble is perfect for prototyping a site out before integrating into a CMS. If you work with a large team of both front end and back end engineers, the code hand off is a lot smoother when handing over markup that has already been componentized.

It also allows you to throw components around and arrange them much easier to iron out any edge cases or things that might break a layout. If you’re full stack and working on a more enterprisey Java or .Net CMS, you may have to compile when you update markup, so testing everything out in a static build first could save you time.

Assemble has changed massively over the last year or so and most of the documentation is still in the process of being updated. Much of it still refers to grunt-assemble, which is great, but lacks many of the new features, and up to date template engines.

I’ve put together a bare bones boilerplate for prototyping sites with Assemble. It’s cleverly named ‘Assemble boilerplate for rapid prototyping‘.

Clone it, scaffold the rest of your project (css pre/post processors, js scrunchers, whatever), and reward yourself for the hours you’ve saved debugging and integrating code. Or use it to make a really cool static site. Just do it.

Check it out here

Watch out soon for a post demo’ing how I use assemble to develop prototypes.

 

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!

Water color painting by Cory Gugler - Energist

Exploding sprites with Phaser.js and Shatter.js

I’ve been working on increasing Crash Landing‘s juiciness and one of my first tasks was to make the ground beneath the player explode into pieces. It’s been a great opportunity to  get some use out of Shatter.js.

It wasn’t completely straightforward to figure out how to access the raw image data in order to feed it to Shatter.js, and how to best provide the shattered image back to Phaser. Since I’m loading the sprites from a sprite atlas I need to extract the individual sprite I want to shatter to it’s own image. I could also just load the images individually, but I really wanted to keep the sprite atlas and not load duplicate images.

Next I created a sprite group to contain all the shattered pieces, with each shattered piece placed in it’s correct spot so that when the group is rendered it still visually appears as one object. Then we can interact with the group as a whole and also each sprite individually. To make them explode I just loop through all of them and a random x and y velocity.

Most of the magic is all in ShatterSprite.js which I’ve heavily commented below:


CrashLanding.Util.ShatterSprite = function ShatterSprite(game, key, frame) {
    var numberOfSprites = 12; // make 12 sprites from frame
    var offCanvas = -1000; // constant to create sprites outside of game canvas

    function getImageFromSprite(game, key, frame) {
       // temp sprite used for extraction
       var sprite = game.add.sprite(offCanvas, offCanvas, key, frame);
       // create a canvas to draw the sprite to with Phaser's bitmapData method
       var bmd = game.add.bitmapData(sprite.width, sprite.height);
       // create an image and set the image data, and clean up
       var image = new Image();
       bmd.draw(sprite, 0, 0, sprite.width, sprite.height);
       bmd.update();
       sprite.destroy();
       image.src = bmd.canvas.toDataURL();
       return image;
    }
    
    // Create a phaser group out of a Shatter object
    function createShatteredGroup(game, shatteredImage) {
       var shatteredGroup = game.add.group();
       // Shatter.js returns the new images in an array at Shatter.images, here we loop through all of them
       shatteredImage.images.forEach(function(image, ind, arr) {
          // create a key for the using the same name as the frame of the original sprite + its position in the array of shattered images
          var key = frame + ind;
          // add it to the game cache, so we can add it to the new sprite group
          game.cache.addImage(key, null, image.image);
          var sprite = shatteredGroup.create(offCanvas, offCanvas, key);
          // save the sprites offset so we can place it properly when drawing the groupp
          sprite.originX = image.x;
          sprite.originY = image.y;
          game.physics.arcade.enable(sprite);
          // for the shattered ground objects I only check down collision. Need to move this out and pass in.
          sprite.body.checkCollision.left = false;
          sprite.body.checkCollision.right = false;
          sprite.body.checkCollision.up = false;
       });
       return shatteredGroup;
    }

    return createShatteredGroup(game,
       new Shatter(getImageFromSprite(game, key, frame), numberOfSprites));
}

Once I’ve created my sprite group I can use it to replace sprites/tiles on the screen.  The ground exploding awesomeness takes place in the appropriately named Ground.js. Below, ‘exploder’ is the shattered sprite group and oldTile is the tile I’ve decided to remove from the game world.


oldTile = game.level1map.removeTileWorldXY(removeX, groundLevel, tileWidth, tileHeight);
       // I'm randomly removing tiles, so I make sure there was a tile removed
       if (typeof oldTile != 'undefined') {
          // set shattered group to the previous location of the tile
          exploder.x = oldTile.worldX;
          exploder.y = oldTile.worldY;
          // add each piece at it's proper location within the group and give it some velocity
          exploder.children.forEach(function(sprite) {
             sprite.x = sprite.originX;
             sprite.y = sprite.originY;
             sprite.body.velocity.x = game.rnd.integerInRange(xVelocityMin, xVelocityMax);
             sprite.body.velocity.y = game.rnd.integerInRange(yVelocityMin, yVelocityMax);
          });

There are plenty of improvements we could make, but I think this provides a decent example of how to use Shatter.js with Phaser.js.

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.

Early intro screen to Crash Landing

Crash Landing

Crash Landing (tentative title) is an HTML5 game I created during Ludum Dare 29.  The game is written for the browser in JavaScript with a little help from the Phaser.js game framework.

The theme for Ludum Dare 29 was ‘Beneath the surface’, so I created a simple platformer where you must move fast through the level while the ground randomly explodes beneath you.

I stopped working on Crash Landing after the compo, but recently decided it was an idea worth finishing. As I build the game and refactor the code (it’s a horrifying mess), I’ll be writing about various things I’ve learned about Phaser.js, JavaScript, and anything else I learn along the way over on the blog.

Play the most recent build of the game here: Crash Landing

The code is all available on the GitHub repo.

 

Hugs - Painting by Cory Gugler

Stuff I found Interesting (June 2014)

An interesting article about ‘The Scroll Up Bar‘, a navigation trend on the web that has recently been becoming more popular. I’m a fan of this style as it really helps save some valuable screen space when browsing on devices.

Defensive BASH Programming – A load of techniques for BASH programming. I picked up a few good tips for cleaning up some BASH scripts I’ve written.

One Top Quest – A surprisingly entertaining web game considering how simple it is.

JSNice – A neat JavaScript deobfuscatator that uses statistical renaming of variables and attempts to guess type annotations. From the few examples I tried it seemed to do a decent job of making obfuscated code readable.

Human JavaScript – free online book about building browser apps.

Shatter.js Image Shattering

Shatter.js – Make things explode in JavaScript

Sometimes I feel the need to break things.  We all get that feeling sometimes after a rough day at work, or after a day of dealing with pushy clients, or maybe your cat threw up on your face while you were taking a nap. The point is, we all need to release some steam and take out our frustrations sometimes.

Now, you could pick up the flower vase sitting by your computer-you know, the one that’s been sitting there with the dried out remains of a dead plant in it for the last 2 years-and toss it across the room. But then you have to deal with little shards of glass all over your floor and you’ll have to explain to your roommate that you did not, in fact, just have a psychotic episode.

Aside from that, we now live in a digital world. I imagine most people wake up in the morning and their first instinct is to go straight to the bathroom…and take a picture of themselves in the mirror to post to facetwitgram before they post their daily half eaten breakfast photo.

So what better way than to break stuff digitally? And with today’s hottest new technology, JavaScript!

Shatter.js is a small little library that can help you do just that! Use your JavaScript programming skills to add and image to the dom, give it to Shatter.js and it will return to you your image all nice and shattered and packaged up for you to do with it what you will.

“That sound’s incredible! But, wait, how much is this going to cost me?”, you say.

Well, that’s a great question, and my answer to that is that it’s completely open source and free! Do with it what you will! It’s licensed under the MIT license and available on Github for you to download, fork, branch, pull, push, rm -rf, or whatever you desire!

Check it out on GitHub or view the examples on the project page.

Groovel - Painting

What I found interesting this week (May 18th 2014)

WTF? Forms – A nice bit of css for some common form controls.

Digging, Debugging – This talk is loaded with great tips on debugging with Chrome devtools.

CCNA Training Videos – 88 videos covering CCNA training, crowd funded through Kickstarter and now available to stream free on YouTube.

Littlewargame – HTML5 rts game, amazing performance for an HTML5 game.

And there’s this: Cats and Dogs dressed as people, 100 years ago.