Tutorial collection: Sprites, sprite sheets and animations

The tutorial collection covers all about sprite and animations, packing sprite sheets, optimizing images for web and game development and more.

How to create sprite sheets and animations for PixiJS

In this tutorial you learn how to
  • Create sprite sheets for PixiJS
  • Optimize start up time with 8-bit png
  • Edit pivot points visually
Continue reading...

How to create sprite sheets for UnrealEngine Paper2D

In this tutorial you learn how to
  • Create sprite sheets for UnrealEngine / Paper2d
  • Create flipbook animations in UnrealEngine
  • Edit pivot points in TexturePacker
Continue reading...

How to create dynamically lit 2d pixel art scenes with Unity

Tutorial: This video shows you how create dynamic light effects for your pixel art scene in Unity using normal maps created with SpriteIlluminator.

Continue reading...

How to create sprite sheets and animations with Monogame

Randolph Burt, Joachim Grill

Learn how to use sprite sheet animations in MonoGame:

  • Creating sprite sheets with TexturePacker
  • Using Monogame Spritesheet loader
  • Cross-platform desktop application with Visual Studio
  • Create a complete demo scene with animations

Full source code available on GitHub.

Continue reading...

How to create sprite animations for EaselJS / CreateJS

Learn more about:

  • Why using sprite sheets is important for your game
  • Create sprite sheets for EaselJS/CreateJS
  • Load assets from the server using PreloadJS
  • Use animations from a sprite sheet
  • Set/edit pivot points
  • Optimize your sprite sheet for fast downloads
Continue reading...

Godot 3: How to create sprite sheets the easy way

This video shows you how to easily create sprite sheets (AtlasTexture) for Godot.

Continue reading...

Godot 3: How to create tile sets the easy way

This video (1:50) shows you how to easily create tile sets for Godot.

Spoiler: About half of the video is used to install the TexturePacker importer plugin from Godot's asset library. Creating the tile sets only takes about 40s.

Continue reading...

How to create sprite sheets for Phaser 3 with TexturePacker

Joachim Grill, Andreas Löw

Content of the tutorial:

  • Creating sprite sheets with TexturePacker
  • Loading sprite sheets in Phaser
  • Setting pivot points with TexturePacker
  • Playing animations from the sprite sheet
  • Optimizing start up time and reducing download size
  • Complete code is on GitHub
Continue reading...

How to create light effects in Phaser 3

Content of the tutorial:

  • Load normal maps in Phaser
  • Create movable light
  • Use normal mapped sprites
  • Use animated normal mapped sprites
Continue reading...

Panda2 sprite sheet animations tutorial

Basic game scene tutorial for Panda2

  • Pack an animation into a sprite sheet
  • Optimize the sprite sheet for performance and download speed
  • Edit pivot points using TexturePacker's pivot point editor
  • Build a basic game scene with a walking character
Continue reading...

Panda Playtime: Texture packing

Tom Vencel creates a video series called Panda Playtime in which he explains how to use PandaJS.

This episode is about creating sprite sheets with TexturePacker.

Continue reading...

How to create Responsive Retina CSS sprites

Andreas Löw

Learn how to create css sprites:

  • Simple workflow
  • Minified images using pngquant algorithm
  • Serve high quality images for Retina / HighDPI devices
  • Responsive

This blog post contains full source code available on GitHub.

Continue reading...

SpriteKit TextureAtlases with Swift 3

Learn how to use SpriteSheets with SpriteKit:

  • Creating sprite sheets with TexturePacker
  • Loading sprite sheets
  • Using header files to enable compile time checks
  • Play animations with a single line of code

This blog post contains full source code available on GitHub.

Continue reading...

How to create a sprite sheet

How to create a sprite sheet

  • Sprite sheet formats
  • Simple sprite sheet workflow
  • Previewing animations
Continue reading...

LibGDX Beginner Tutorial: Sprite Sheets & Physics with Box2d

Basic tutorial for libGDX users:

  • Creating a new project
  • Creating sprite sheets
  • Using sprites
  • Creating physics collision shapes
  • Editing physics parameters
  • Using physics in your game
Continue reading...

Tutorial: Using sprite sheet animations in cocos2d-x V3

In this tutorial you are going to learn:

  • Why you should use sprite sheets
  • Designing and running your game on different devices and screen sizes
  • Creating optimized sprite sheets
  • Creating animations
  • Playing character animations
Continue reading...

Tutorial: Using sprite sheets in MelonJS

In this tutorial you are going to learn:

  • Why you should use a sprite sheet in your MelonJS game
  • Using TexturePacker to create a sprite sheet
  • Optimizing the sprite sheet for size faster downloads
  • Adding a static background
  • Creating an animation
Continue reading...

Performance optimization for cocos2d-x using polygon sprite meshes

Learn how to increase the performance of your cocos2d-x game.

Continue reading...

Reducing artifacts on rotated sprites

Andreas Löw

Get rid of those ugly edge artifacts!

I prefer smooth edges instead over jagged outlines.

TexturePacker 4's upcoming feature trim margin gives you full control over sprite's transparency when using trim & crop. It also replaces inner padding.

Learn how to take advantage of this new feature to improve your game's quality.

Continue reading...

cocos2d-x dynamic light tutorial

What you are going to learn:
  • Create your normal maps + sprite sheets using SpriteIlluminator and TexturePacker.
  • Load animation frames from a sprite sheet
  • Load a normal map sprite sheet and add a light effect to your animation
Continue reading...

2d dynamic lighting tutorial for Unity

What you are going to learn:
  • Creating normal mapped sprites with SpriteIlluminator
  • Packing sprite sheets and normal maps with TexturePacker
  • Importing normal mapped sprites into Unity
Continue reading...

Packing normal maps into sprite sheets

What you are going to learn:
  • Pack normal maps into sprite sheets
  • Create sprite and normal map textures with identical layout
Required skills:
  • Basic knowledge about sprite sheets
  • Basic knowledge about normal maps
Continue reading...

Creating sprite sheets for ShiVa using TexturePacker

Learn how to use Sprite Sheets with ShiVa:

  • What are sprite sheets? Why should you use them?
  • Creating sprite sheets with TexturePacker
  • Installing and using JPSprite
  • Playing animations

This blog post contains full source code available on GitHub.

Continue reading...

Creating spritesheets for Phaser 2 with TexturePacker

Learn how to use SpriteSheets with Phaser:

  • Creating sprite sheets with TexturePacker
  • Loading sprite sheets in Phaser
  • Optimizing start up time and reducing download size
  • Using static sprites in Phaser
  • Playing animations from the sprite sheet

This blog post contains full source code available on GitHub.

Continue reading...

CSS animation examples with TexturePacker

Kerstin Mueller

What you are going to learn:

  • Creating a css sprite sheet
  • Creating hover animations
  • Playing animations from css
Continue reading...

Optimizing sprite sheets for Unity

Joachim Grill & Andreas Loew

This tutorial describes how you can use TexturePacker to create sprite sheets for Unity's 2D extension.

  • Prepare your Unity project to read TexturePacker sprite sheets
  • Create your sprite sheet and load it into Unity
  • Handling deleted sprites in Unity
  • Simplify your sprites workflow in Unity
Continue reading...

Getting started with Starling A Flash game development framework

Learn how to create a sprite sheet in TexturePacker and use it in a simple Starling application.

  • Setting up a Starling project
  • Use TexturePacker for your sprite sheet
  • Include the sprite sheet in your project

Full source code is available on GitHub

Continue reading...

SpriteKit Animations and TextureAtlases

Learn how you can improve development of SpriteKit games and apps using TexturePacker.

  • Create your SpriteKit atlas with TexturePacker
  • Creating a SKSpriteNode from the texture atlas
  • Using SKActions to move the sprite
  • Applying SKAction to multiple SKSpriteNodes

Full source code is available on GitHub

Continue reading...

UIKit Animations with TexturePacker

What you are going to learn:

  • Using the sprites with UIKit
  • Add static images
  • Add and control animations

Full source code is available on GitHub

Continue reading...

TexturePacker Content Protection

Andreas Löw

Learn how to protect your sprites from getting ripped out of your applications.

  • Setting up TexturePacker for encryption
  • Preparing your cocos2d project for content protection
  • Apple's requirements on encryption and Content Protection
Continue reading...

Integrating TexturePacker with Xcode’s Build Rules

Learn how to integrate TexturePacker with Xcode’s Build Rules:

  • benefit from Xcode’s ability to compile several files
  • use .tps files as an integral part of the build process
  • add build rules for each different texture formats
Continue reading...

Designing content for the whole iOS family

Andreas Löw

This is what you are going to learn:

  • difficulties with different screen resolutions
  • Features of the TexturePacker AutoSD feature
  • Using scaling variants for iOS devices
Continue reading...

Dynamic Content Scaling for Corona SDK

Use dynamic content scaling in Corona SDK

  • How to use the new AutoSD feature
  • load the image sheets in CoronaSDK
Continue reading...

Using JavaScript to enhance your TexturePacker output format

What you are going to learn:

  • How to create a new TexturePacker template
  • How the folder structure looks like
  • include a javascript file to enhance the exporter
Continue reading...

Getting started with TexturePacker and CoronaSDK image sheets

What you are going to learn:

  • Introduction of the new CoronaSDK ImageSheet API
  • Using it with TexturePacker 3.0.0

Full source code to this example project is available on GitHub

Continue reading...

Example with CoronaSDK using PhysicsEditor & TexturePacker

Small example for CoronaSDK using PhysicsEditor to create the shapes and TexturePacker for the sprite sheets.

Full source code to this example project is available on GitHub.

Continue reading...

Tutorial: XCode4 integration of TexturePacker for Cocos2d and Sparrow framework

Integrate TexturePacker into XCode to save time and memory!

Learn both ways to achieve this:

  1. create .tps files from TexturePacker and update them from the build phase
  2. simply use the commandline interface of TexturePacker
Continue reading...

Batch converting and optimizing images for web and games in Windows

Learn how to write a batch file to automatically convert or optimize images with TexturePacker command line.

Continue reading...

Batch converting images to pvr or pvr.ccz

Learn how to write a batch file to automatically convert or optimize images with TexturePacker command line.

Continue reading...

Using TexturePacker with 3rd party tile sets

Short description how to use TexturePacker to remove colored background from sprites.

Continue reading...