shawn.blais

Shawn has worked as programmer and product designer for over 15 years. He has extensive programming experience with ActionScript, SQL, PHP, Javascript and C#, as well as deep proficiency with motion graphics and UX design. Shawn is currently the Lead Developer, and Product Director for TreeFortress Games, focusing on the creation of our own game titles for sale across Desktop and Console platforms.

@tree_fortress

Introducing: TreeFortress Games!

Today we’re happy to announce a new initiative at gskinner: TreeFortress Games!

TreeFortress is a new arm of the company, focused on building mobile games (or apps) and bringing them to market. Initially, we will be using AIR + Starling as our core development stack, possibly branching out to Unity3D or HTML in the future.

TreeFortress will have its own blog which will include posts on our development workflow and upcoming games. Expect lots of code snippets, workflow tools, and tons of cool Artwork.

If you’re interested, you can follow us on your preferred social network:

 
Our first game is called Bardbarian, and is due out for Spring, 2013. For more info check it out here: http://treefortress.com/introducing-bardbarian/

Hope to see you there!

Orcastra: Live Web Audio using CreateJS

We recently spent some time playing with a new feature in Chrome called Web Audio Input, which provides access to a microphone or other audio input.

The result was “Orcastra” (ha!) which allows users to select one of five deep sea characters who lip sync along to the user’s audio input.

Orcastra

Creating Orcastra was quite straightforward. The characters were all created in the Flash CS6 IDE (MovieClips with timeline animations) and exported to HTML5 using Toolkit for CreateJS. We used PreloadJS to load all our assets, TweenJS for simple tweens, and EaselJS as the display layer.

We use feature detection to ensure the browser supports audio input, prompt users to allow access to their microphone, then listen for volume changes (with maximum mic gain) to confirm audio input before showing the character selection screen. Once the user picks a character, it’s just a simple matter of syncing the CreateJS animations with the current input volume level.

Orcastra should work with any Web Audio Input enabled browser. This currently includes the latest version of Chrome for OSX, and Chrome Canary for Windows, but you’ll need to enable the feature with chrome://flags and restart your browser before trying it.

The Great Pumpkin Showdown 2012 Results

We recently continued our proud halloween tradition with Pumpkin Showdown 2012. We all had a great time and hope everyone else did too. And now, without further ado, the results:

Zom-B-MO Victory PictureThis year’s winner and predominant pumpkin is Zom-B-MO! It was a close contest with runner up Suzy Delores for a while, sparking some good natured office trash talk, but in the end the public picked which pumpkin they preferred.

Level 2: Grenade mod Defeat PictureOn the other end of the spectrum, there was a hotly contested battle for last place, with Level 2: Grenade mod clinching the title after a surprising rally with Mac-o-Lantern that catapulted it out of contention!

Congratulations to all of our contestants, and thanks to everyone who voted for their favorite.

Reducing File Size for Images With Alpha Channels

We’ve been building a lot of spritesheets and other images for use in HTML5 projects. To preserve alpha channels, you need to use PNG32, which can get pretty large for some types of content because it’s a lossless compression format.

I wanted to find a way to reduce these file sizes, so that games and other experience would load more quickly. Ultimately I settled on a solution that separates an image into two parts: a JPG with all of the RGB information, and a PNG32 with the alpha channel. In my testing, the end results vary wildly – some content is larger when split, but some content can see a reduction in size of up to 70%. This is can have a pretty significant effect when applied to a 2MB sprite sheet image!

To enable this, I added a utility method in EaselJS that takes these two images and merges them back into a single canvas, which can be used for sprite sheets, drawn to other canvases, added to the DOM, or used as an image source via toDataURL(). The great thing is, it runs REALLY fast (a few milliseconds for most large images), because it leverages composite operations.

var combinedCanvas = SpriteSheetUtils.mergeAlpha(rgbImage, alphaImage);

For initial testing, I prepared my images using Photoshop, but this was slow, time consuming, and cumbersome. To make the process easier, I wrote a simple AIR application codenamed “Omega” (as in, alpha and omega – such boundless wit!). It will prepare multiple images at a time, and display a report showing the original and total resulting sizes, so you can decide which assets to use it on.

It’s currently very barebones, and requires you to do everything via the command line. In some ways, this is kind of nice – you can create batch files or commands to quickly run it on specific files or folders of images – but I plan to add a UI soon. I’m also planning to open source it the not too distant future, but I thought I should share it in the interim so others can use it.

You can grab “Omega” here. It comes with a text file that describes all of the available arguments and shows some examples. It works great with Zoë or your spritesheet creation tool of choice.

One important note: if you’re using Omega on OSX, you’ll need to quit the application before running it a second time. For some reason AIR apps on OSX do not receive parameters with invocation events if they are already open.

Prep For Zoe JSFL Command

We’re recently been working on some pretty cool CreateJS projects with heavy dependencies on sprite sheet animations. Our sprite sheet export tool, Zoë, does a pretty good job, but it’s limited to exporting the main timeline of a published SWF. To facilitate an efficient designer/developer workflow, we really needed a solution that would let us maintain a single FLA, containing multiple animated symbols, and export them to a single combined spritesheet.

We considered using the new export to spritesheet feature in CS6, but it was missing some features we needed. Zoë offers multi-image sprite sheets (important when exporting smaller sprite sheets for mobile compatibility), configurable smart frame reuse, and flexible registration point export for EaselJS. It’s also open source, so we could modify it to work the way we needed.

To facilitate this workflow, I wound up writing a (fairly) simple JSFL command called “Prep for Zoe”. It takes multiple symbols, copies them as Graphic instances, distributes them to the main timeline, and copies their labels appropriately. If no label is specified on the first frame of a symbol (or it is a bitmap), it will automatically add a label based on the symbol’s name. It will even warn you about duplicate labels. Finally, it publishes your FLA to generate an updated SWF.

The end result is a single SWF with all the animations and labels on the main timeline, which you can bring it into Zoë to export them all as a spritesheet.

To use it, you just place all of the symbols you want to include in a single guided layer on your stage then run the command. Your main timeline will be prepped for you, and the SWF will be automatically published. Need to make changes? Edit your guide layer, and run the command again – it will automatically delete all the old layers, rebuild the timeline, and export a new SWF.

By default, the registration point (aka regX/Y in EaselJS) for every symbol will be set at the symbol origin. It is represented in the built out timeline with an empty symbol instance named “registrationPoint”. If you want to set up custom registration points for each symbol, you can do so by putting each symbol on it’s own frame in the guide layer, and adding a “registrationPoint” instance for each. These registration points will be preserved in the prepared timeline. Check out the included “advancedExample.fla” file to see this in practice.

Once your SWF is ready, just bring it into Zoë, configure the settings as appropriate, and push “Export”. Once you set up a SWF once, Zoë will remember the settings for it, so exporting a new sprite sheet from your FLA is as simple as running Prep for Zoë to update the SWF, then running export in Zoë. Hand the updated image(s) and JSON data to a dev, and it’s ready to be integrated into a game or other experience.

You can grab the JSFL command here, including a couple of example FLAs to get you started. To use the command, either double click the JSFL file (this will immediately run it on the front-most FLA if Flash is open), or copy it into the Commands folder in your Flash config directory – it will then be available in the Commands menu. You can download Zoë here.

New CreateJS Version Launched

I’m excited to announce the launch of new versions of the CreateJS libraries and tools. CreateJS is a suite of open source libraries and tools to make it easier to build really rich, interactive experiences using modern web standards.

This release added a ton of new features, including masks, multitouch support, run time generated sprite sheets, and better support for fluid or multi-resolution experiences. We also refined functionality, fixed a bunch of bugs, and added tutorials on a number of major topics for EaselJS.

The biggest change, which you’ll want to be aware of if you’re going to migrate existing content to the new versions is that all classes are now in a configurable namespace. You can either use the default “createjs” namespace, switch it to something more convenient, or configure it to not use any namespace at all to retain compatibility with legacy content.

I’m hoping to write up a more detailed overview of this release when time permits – things are very busy here at gskinner.com!

You can grab the latest, and get more info about CreateJS at createjs.com.

Disable Local Security In Chrome (More Easily)

This is a quick follow up to my previous post about disabling local security errors in Chrome on OSX.

I’ve been working a lot with command files lately and thought I would share a simple one that you can double-click in the Finder to launch Chrome with the -disable-web-security flag set. This lets you test content locally that uses “sandboxed” JS features like accessing the pixel data of local images. Handy when working with EaselJS.

This comes with the obvious warning that you probably shouldn’t surf the web in this mode.

You can download the command here. For it to work properly, you need to quit Chrome prior to running the command. You may also need to open it up in a text editor and change the path to Chrome if it’s somewhere other than /Applications, or you want to use this command with Chrome Canary.

Command files are pretty handy – they let you package Terminal commands into a file that can be double clicked in the Finder. Definitely worth learning about if you’re a developer on OSX. There are also .terminal and .term files, which provide similar functionality with a little more control, but they seem to have some issues in the current version of Terminal.

Media Keys In OSX For Any Keyboard

I recently bought a shiny new mechanical keyboard to use with my Mac. So far, I’m liking it, but I miss having media keys for controlling volume and music playback like on my Apple & Logitech keyboards.

To address this, I wrote a few simple Applescript services that you can bind keyboard shortcuts to, which enable media commands (volume up/down, mute, play/pause, and next/prev track) for any keyboard.

You can download them by clicking here. Once downloaded and unzipped, simply double click each workflow file to install it. Note that these are only tested in OSX 10.7 Lion.

To bind keyboard shortcuts to the scripts, go to System Preferences > Keyboard > Keyboard Shortcuts. Select Services in the left panel, then scroll down to the script you want to assign a shortcut to. Double click on the right side of the row to edit the shortcut. Now, just hit the key combination you want to use, and make sure the checkbox to the left is checked (it likes to uncheck when you edit the key combo).

I used the following shortcuts:
Command +:
F13 – Volume Down
F14 – Mute
F15 – Volume Up

Command + Option +:
F13 – iTunes Volume Down
F14 – iTunes Mute
F15 – iTunes Volume Up

Command + Control +:
F13 – iTunes Previous Track
F14 – iTunes Toggle Pause
F15 – iTunes Next Track

I chose these because they are conveniently grouped at the top right of my keyboard, and I don’t use them for anything else. Note that you seem to need to include a Command in your key combo for it to work everywhere.

Also note that I made the system volume control fairly granular (5% increments), and the iTunes control fairly coarse (20% increments) based on my personal preference. You can easily edit these values by opening the workflow files in Automator. The scripts can be found at ~/Library/Services/ once installed.