Tag Archives: development

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.

 

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.

Chrome Developer Tools Tips

I spend a lot of time working in Chrome’s DevTools, so I’m always trying to learn new tricks to help speed up and optimize my workflow. The DevTools are and enormous and always being enhanced with each Chrome release, so there is always plenty to learn.

Here are a couple recent resources I found useful:

DevTools Tips

A collections of quick DevTools tips. Using copy() to store an object (as a string representation per the documentation) could be useful.

Advanced Debugging Techniques with Chrome

In this video Paul Irish, developer advocate for Chrome, covers some advanced debugging features that are available now, and a few interesting features coming soon. He gives the talk at light speed, it’s more of an overview, but left me with a good amount of things to research.

Groovel - Painting

What I found interesting this week (May 11th, 2014)

Interesting things I read/watched/listened to on the web this week.

Everything is about execution. Dreams and visions are free. Implementation takes place in the real world where friction and inefficiencies exist.

A great answer on quora on life lessons.

While playing guitar I remembered an old site I learned quite a bit from: blackbeltguitar.com. Unfortunately it’s no longer around anymore. However, it’s still available on archive.og.

Found devdocs.io – A great well organized and easy to navigate reference guide for web api’s. Much easier to find and browse information than most of the official specs.

Watched this very funny animated short: Johnny Express

Feast your eyes on a live hd view of the Earth from the ISS.