Tag Archives: SalsaMe

AppGameKit + TexturePacker

Recently I’ve started going back to school to try to finish up my bachelors. (I honestly don’t know why, there seems to be some kind of compelling force that tells me education is more valuable than experience?)

I am taking a video game development class, and we are using a devkit called AppGameKit.

AppGameKit is very easy to understand, simple, and works on a wide variety of environments, including Android and IOS.

My game idea is very ambitious. It is called SalsaMe, and is a salsa dancing game with an interface inspired by Guitar Hero. It’s kicker is that it would have a wide variety of moves and combinations that are activated through the use of gestures.

Loving a challenge, I somehow got inspired by the crazy idea of using Microsoft Kinect to do motioncapture (with Brekel Kinect) and animate the moves using AutoDesk MotionBuilder.

Unfortunately AppGameKit’s newly introduced 3D features do not support skeletal character animation, or the import/conversion of FBX files (a seemingly industry standard). And unfortunately for me I discovered this late in the project. I was having too much fun animating.

AppGameKit seems more fit for retro-style games.

So just for the purpose of completing the project, I needed to convert these animations into sprites. AppGameKit comes with a tool called AGK Image Joiner. It’s suppose to take a bunch of image files and combine them into a single file (an “atlas”), and produce a txt file with coordinate data.

This tool is very buggy and low-level. It gave me confusing error messages, and was quite a hassle to try to figure out. Before this I tried other methods using Photoshop, and the ImageMagick library’s montage function. However AGK expects images to be layed out left to right, and it was not an easy solution with the different animations I was outputting from MotionBuilder.

This is where TexturePacker comes in. I came across TexturePacker on the AGK forums. Upon installing this program, I instantly knew it was a high-quality tool with its install interface and easy interface.

I didn’t even need instructions to use it, the GUI provides very helpful tooltip hoverovers.

With TexturePacker I …

  1. Dragged and dropped the TIF files exported from MotionBuilder.  (Didn’t need to convert them to PNGs, a big plus)
  2. Set the AppGameKit preset
  3. Set the Max size to 2048×2048.  This is the max bitmap size supported by my Android Nexus phone
  4. Set the layout algorithm to sort by filename, so all animation frames were in order.
  5. Adjusted the Scale, so all animation frames fit into the file.  In this case it is about .81, which isn’t too bad of a quality loss for my workaround.  This was also a huge plus as I didn’t need to run a Photoshop script to resize my animation frame images.
  6. Set padding to 0.
  7. Publish!

This was almost too easy.  I was so impressed with the tool I also learned that it can be used as a Sprite creator for any environment.  As a web developer, I found this to be awesome.  Often times we have hover-overs, or simple graphic changes on websites.  Using TexturePacker I can create one sprite png easily (no fuddling around in photoshop), and use background-position to do the animations.

I highly recommend this tool to anyone working with 2d graphics / animation, it’s applications are far reaching!

You can get TexturePacker here