SpriterAS: Playback Spriter animations with Starling

One of the toughest aspects of doing Game Development with GPU rendering, is managing the texture size of your various animations. Traditional SpriteSheets consume texture memory extremely quickly, and in the age of Retina Devices, they’re starting to prove inadequate.

To help work around this problem, our guys at TreeFortress have put together a library called SpriterAS. SpriterAS is a plugin which allows you to playback Spriter Animations (.SCML files) in AIR using Starling/Stage3D.

What is Spriter?
Spriter is a tool for creating so-called ‘modular’ animations which require a very small texture footprint. This enables long, complex animations running at a smooth 60fps.

For full details, examples and code snippets, check out the blog post over at treefortress.com!

Also, in case you’re wondering, we are planning on creating a Javascript version for use with EaselJS in the future 🙂

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!

Open Source Licenses, JS, and Minification

I’m definitely not a lawyer and I detest reading legalese, but I have a strong interest in the legal considerations of the technology I work with. One area I’ve done a lot of research into in the past is the implications of different open source licenses, which led to this older blog post comparing common licenses.

Recently, one of my devs asked how this applied to JS and minification. Here’s the quick response I tossed together:

Let’s assume we are looking at the MIT license or an equivalent. Remember that ANY third party code requires client approval, and any license other than MIT should be run past me as well.

The MIT license specifically requires that the license is included somewhere in the software, but it does not need to be public facing. Typically, the license is included as a comment at the top of the source files. However, minification strips out the comments and combines source code into a single file. This raises three possible scenarios:


  1. All of the code in the file is under MIT license. In this case, you can inject the copyright statements for each of the libraries followed by the main body of the MIT license above the minified code. We do this automatically for the CreateJS libraries as part of our build process.
  2. Client code & MIT licensed code. I would recommend that all open source code is treated as in #1, and client code is minified into its own file (potentially with a copyright header specified by the client). This is much cleaner than trying to mix them.
  3. Code with different licenses. This gets much more complex, and should be dealt with on a case by case basis.

I’d be interested to hear about how other companies are dealing with this topic, or related ones.

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.

The Great Pumpkin Showdown 2012

Welcome to our most hotly contested pumpkin showdown ever! This year, exciting new teams formed to reshape ordinary pumpkins into masterpieces. Please vote to help decide which pumpkin wins, and which get burned.

For something new this year, the app was crafted for HTML5 using CreateJS. We also continued something old, with the app being built by the newest member of the team, O’Jay.

Continue reading →

Upcoming Talks

I’m excited to be doing talks all over the world in the next couple of months, focusing on two related topics: CreateJS, and the Atari Arcade.

Create The Web, San Francisco, London, Tokyo, & Sydney (Sep & Oct)
I’ll be on an around the world tour with a group of Adobe evangelists (I’m the only non-Adobe presenter), talking about the open source CreateJS libraries, and how to get started creating rich content in HTML5. Adobe is the primary sponsor of the libraries, and is a great partner in helping to actively promote them.

The SF event is full, but you can still sign up free for the other locations here.

Screens, Toronto (Sep 26-28)
Screens focuses on multi-screen content, and I’ll be presenting on the HTML5 Atari Arcade project and some of the challenges we had in making it work well with both desktop and multitouch tablets. You can get more info on the conference here.

FITC Vancouver (Nov 17-18)
Once again, I’ll be talking about the Atari Arcade, and our continuing experiences building games and rich content in HTML5. Despite my (relative) proximity, this will be my first time speaking in Vancouver, and I’m really looking forward to it. More info here.

In addition to the above, I will also likely be hanging out at the MS Build conference Oct 30-Nov 2. I’m pretty excited to see first hand what’s announced with respect to Windows 8, Windows Phone, IE10, and Surface.

It’s going to be a busy autumn, but it should be a lot of fun!

Atari Arcade: Classic Games Reimagined in HTML5

The Atari Arcade has launched! We’ve been working tirelessly with Atari and the Microsoft IE team to re-imagine classic Atari games for the modern web. The games are multi-touch tablet friendly, use the latest crop of modern web standards, are built on top of CreateJS, and run on pretty much any popular current generation browser. We had a ton of fun trying to balance modernizing these games with preserving their iconography and gameplay faithful to the originals.

There’s a lot more to say, but we’re all still recovering from the launch rush, so for now I’d encourage you to check out the arcade, read through the dev center articles on how we built it, and wander over to CreateJS.com to learn about the libraries the games were built on top of.

Update: We have published a Case Study on our site.