Typescript Texture Atlas

A Texture Atlas is several sprites packed into a single image file, with an accompanying text file (json or xml) that tells you where all the individual sprites within that file are located. There are several programs that can produce Texture Atlases (Texture Packer, Spritester, Flash or Adobe Animate) or you can even put one together yourself with a tool like Photoshop or Gimp and a text editor. I happen to use Texture Packer, which is very reasonably priced, but if you are short on money, Gimp and Notepad is a way you could put something together for free (although it will take you a lot more time). Texture Packer outputs a simple json file that is very easy to parse using TypeScript, and we'll use a json file and an image file created in Texture Packer to load up our Texture Atlas.

Spritester

I wanted to give the user's an easy option for creating Texture Atlases that work with my Texture Atlas class, so I put together a simple texture atlas generator I call Spritester. The code is all MIT licensed and I have it on Github. I'm planning on adding a few tutorials showing how I created Spritester, so there is more to come very soon.

The Texture Atlas Class

I'm going to create a class to manage our texture atlas. You can have several of them in a game, but for this demonstration we will keep everything in a single texture atlas. The texture atlas class will need to load a json file, and a .png file. We will also need a Rectangle Class, because each of the images within a texture atlas will need to be addressable, by x, and y coordinates as well as the width and height of the image. We will need to read in all of these rectangles from our json file, which will look something like this:

{"frames": {

"Asteroid.png":
{
   "frame": {"x":2,"y":2,"w":52,"h":50},
   "rotated": false,
   "trimmed": true,
   "spriteSourceSize": {"x":23,"y":2,"w":52,"h":50},
   "sourceSize": {"w":96,"h":54}
},
"Ship.png":
{
   "frame": {"x":56,"y":2,"w":54,"h":50},
   "rotated": false,
   "trimmed": true,
   "spriteSourceSize": {"x":21,"y":1,"w":54,"h":50},
   "sourceSize": {"w":96,"h":54}
}
}}

Our Texture Atlas class is going to need a dictionary of frames that will use the original image file name as it's index, and a rectangle within the atlas that represents where that image is located in our atlases main image file. We also need a flag to tell us if the texture atlas has been loaded, an image element to represent the image in the DOM, and an atlas name for the name of the image file we are loading as the main atlas image.

class cTextureAtlas {
   public frames: { [index: string]: cRectangle } = {};
   public taLoadComplete: boolean = false;
   public image: HTMLImageElement = new Image();
   public atlasName: string = "";
   private _imageFile: string = "";
   private _jsonFile: string = "";
   private _loadCallback: () => void;
}

Now let's add a constructor to our Texture Atlas class. Initially there will be some methods called in our constructor that do not exist. We will fill those in soon.

constructor(atlasName: string, loadCallback: () => void) {
   this.atlasName = atlasName;
   this._imageFile = atlasName;
   this._jsonFile = atlasName.replace(".png", "") + ".json";    this._loadCallback = loadCallback;
   this._loadJSON();
}

In this constructor we will need to set the image file name, and the json file name. When creating the atlas you will need to pass in a callback function that will get called when the files required for the texture atlas have been loaded. The last thing we do is call the function that loads the json file, which is a method we still need to define.

Use the arrow keys to move the asteroid

You can take a look at the full source code.

Next -> Animated Sprites

Prev -> Render Image to Canvas