Welcome back to another edition of the Bardbarian Dev Blog. This time we look at some of the new mechanics we’re adding to the game, and talk a bit about the though process behind them.
Check out the full post over at TreeFortress.com:
http://treefortress.com/dev-blog-6-iterations/
The latest Dev Blog for Bardbarian has come out! We’ve added some new characters, UI screens and other cool stuff.
Here’s a quick pick at the new Level Select screen:
If you’re interested in more info, head on over to TreeFortress.com for the full post:
http://treefortress.com/dev-blog-5-beta-1-completed/
Over at TreeFortress we’ve put together a massive dev update for our upcoming game Bardbarian. To read all about it, check out the TreeFortress blog!
If you’re not familiar, Bardbarian is an iOS/Android game, built with Adobe AIR and the Starling Framework, and is slated for a Spring/Summer release in 2013. TreeFortress is a seperate division of gskinner, focused solely on creating our own apps and games. Follow them directly if you’re interested!
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 🙂
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!
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.
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.
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:
This 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.
On 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.
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.
