#Texturepacker animation how to#
#Texturepacker animation mac os#

Finish the shape by clicking on the starting point. Simply start anywhere along the edge of the shape you wish to pull out and continue clicking along the entire perimeter. If we open the photo in GIMP, we can use the Free Select Tool from the toolbox to select our shape. Cut out the image with GIMPįirst of all, we need to cut Max out of the photo. I will focus on just one of the photos, because it was the most difficult one to clean up, and covers just about all the processing you may come across.Īs you can see, the dog (Max) in this photo is not only skewed, but one of his feet is completely out of the frame, and he’s wearing a harness! Don’t worry, we can fix all of these problems, and it’s not as difficult as you may think. I couldn’t find free dog photos that I needed, and I have absolutely no artistic drawing capabilities, so my brother provided me with a few photos. For my last tutorial, I wanted to create some dog animations.

Since we are focusing on creating images for this tutorial, we will begin with an image. This is the only software we will be using that is not free, but you can use it to test your texture atlases and animations for free. You can either clone the repo or download the ZIP file.

Download Phaser from it’s Github repo.

#Texturepacker animation mac os#

If you use Mac OS X, you will need to download and install XQuartz first.

Download and install the free Inkscape vector image software.

Download and install the free GIMP photo editing software.

Basic knowledge of JavaScript may be helpful for the Phaser portion of the tutorial.

#Texturepacker animation how to#

This tutorial will explain how to create cartoon versions from real photos for use within any game, with a focus on Phaser.ġ. Learn how to cut out a portion of a photo and clean it up in preparation for creating a cartoon version for use in a game.Ģ. Learn how to create a cartoonized version of a photo.ģ. Learn what a texture atlas is and how to create one using TexturePacker.Ĥ. Learn how to load a texture atlas into Phaser and use it to create animations.

The asset folder contains additional intermediate files that were used during the process of creating the game sprites. All the project files are located in the main folder. You can download the tutorial source code files here. If you want to master Phaser and learn how to publish Phaser games as native games for iOS and Android feel free to check Zenva‘s online course The Complete Mobile Game Development Course – Build 15 Games. Create a texture atlas with TexturePacker.Convert photos to cartoons with Inkscape.