How i built fortmcmoney.com – Part 3 – Assets automation with Grunt

In the third post of the series, i will talk about the process of creating assets on fortmcmoney.com. If you haven’t read the previous post about the exploration module, i strongly suggest that you read it before reading this one, as it will introduce you to some of the concept behind the exploration module.

Preamble

As you know, we had to split our panoramic images into pieces of 2048 x 2048 for retina display and 1024 x 1024 for standard resolution display. We also had to compress these images to ATF format to be compatible with Starling and use lower GPU memory.

With 23 locations across the projects and lots of round of iterations and corrections, i knew that we needed a way to automate this process to prevent human errors during one of the multiples operations required.

Grunt to the rescue

If you don’t know Grunt, i suggest you to read my posts about Grunt. Using Grunt, i was able to build simple plugins that would completely automate this process and make it 100% bullet proof.

As a starting point, i knew i would need these parameters in my plugin.

  • sources directory
  • output directory
  • retina (true | false)
  • atf format (desktop | ios)

 

With this in mind, i built a simple plugin that take care of splitting images into pieces, compress it to ATF and saving it into output directory.

Splitting panoramic into pieces

Here is the process behind splitting the panoramic images into smaller pieces.

  1. Get source image dimensions
  2. If RETINA = true, copy image to temporary folder as temporary image
  3. If RETINA = false, resize image by 50% and save it to temporary folder as temporary image
  4. Calculate the number of pieces required (n) by dividing image’s width with piece’s width (2048 for retina versus 1024 for standard)
  5. Crop piece i from temporary image using EasyImage
  6. Compress cropped image to ATF format into output folder
  7. Get back to step 5 until image is completely splitted

 

As you can see, it’s pretty simple. All i have to do next is to populate my Grunt file with all locations on the project. Here is simplified of what my Grunt file looks like:

Contributions

I’ve submitted all Grunt plugins i’ve made in this project to GitHub. Feel free to clone and modify theses to better suit your needs.

  • fmm-zone: Create all types of assets used by exploration module using EasyImage and node-atf
  • fmm-atlas: Create image atlas (aka spritesheet) using TexturePacker command line tool
  • node-atf: NodeJS module to output ATF texture from PNG image using Adobe’s PNG2ATF command line tool. ** Update ** TexturePacker now export to ATF format. Check if this awesome tool better suit your needs and skills set.

Resume

Creating this process took me around 2 days but i estimate this automation process saved me about 4 to 5 days of work. The most valuable part of this was to bullet proof this process by removing unexpected human errors and ensure the same quality, locations after locations.

I hope you enjoy this post about automated assets creation with GruntJS on fortmcmoney.com. The complete Grunt file on the project create more than just explorations assets. This includes responsive images, spritesheets and more.

In the next post of the series, i will talk about Audio and Video modules in fortmcmoney.com.

Thanks for reading.

Posted under Fort McMoney
Tagged as GruntJS, Fort McMoney, Case Study

Categories