Creating spritesheets for ShiVa using TexturePacker
2015-01-09 Andreas Löw texturepacker, tutorial, shiva
What you are going to learn
- What is a sprite sheet
- Why you should use sprite sheets
- Creating sprite sheets with TexturePacker
- Installing JPSprite
- Loading sprite sheets with JPSprite
- Using sprites (free)
- Playing animations (requires JPSprite license)
- Complete code is on github
What is a sprite sheet?
A sprite sheet is simply a big image containing many sprites which would otherwise be single images. There's also information in a separate file that describes where the sprites are located so that they can be cut from the sheet and be used individually.
Why should I use a sprite sheet? Using single sprites is easier!
You are right - adding single sprites to your game is in many cases the easier way to go... but: Using sprite sheets is quite easy if you have the right tools. And the benefit you get from it is immense!
There are 3 main reasons to use sprite sheets:
Reduced memory usage
Memory reduction happens in 3 ways:
- Reducing the memory required on the file system by using a single file.
- Reducing runtime memory by removing transparency from sprites.
- ShiVa requires squared textures which comes with unused space - which can be filled with sprites.
Faster loading of your game / application
Using only a single file reduces the work required to load a file into memory to opening 1 file and loading it as a complete block into memory.
This speeds up things dramatically compared to loading many small files. Even if you are in flash memory or on a SSD the load time will be significantly reduced.
Increase of framerate / performance
A sprite sheet reduces the draw calls required to render your game scenes. Instead of setting source texture, coordinates and target space for each single sprite setting all coordinates as a list at once is possible.
This increases the framerate of your game - especially if you have many game objects in your scenes.
Source code available for download
git clone https://github.com/CodeAndWeb/TexturePacker-Shiva-JPSprite.gitTexturePacker-Shiva-JPSprite.zip TexturePacker-Shiva-JPSprite.tar.gz
In this tutorial you are going to learn how you can improve development of SpriteKit games and apps using TexturePacker.
The main advantages over the pure Xcode solution are
- Organizing your sprites in folders
- Importing multiple formats such as PNG, PSD, SVG, SWF
- Compile time checks for sprite names
- Creating animations with a single line of code
Let's start with how to easily create your atlas.
Source code available for download
git clone https://github.com/CodeAndWeb/TexturePacker-SpriteKit-Swift.gitTexturePacker-SpriteKit-Swift.zip TexturePacker-SpriteKit-Swift.tar.gz
Creating spritesheets for Phaser.io with TexturePacker
2014-12-17 Andreas Loew texturepacker, tutorial, phaser
What you are going to learn
- Minimalistic setup for Phaser
- Creating sprite sheets with TexturePacker
- Using static sprites in Phaser
- Playing animations from the sprite sheet
- Complete code is on github
Setting up Phaser
Source code available for download
git clone https://github.com/CodeAndWeb/TexturePacker-Phaser.gitTexturePacker-Phaser.zip TexturePacker-Phaser.tar.gz
CSS animation examples with TexturePacker
2014-11-05 Kerstin Mueller texturepacker, tutorial, css
Do you want to have a nice hover animation on your webpage?
Let TexturePacker do the work and just include the spritesheet and css output in your site!
Advantages of css spritesheets over individual images include:
- reduce the amount of HTTP requests by fetching only one image rather than many
- no JavaScript code to maintain animations or preload images
- maximize browser compatibility
- avoid flickering when a button changes state
Example 1: Simple hover animation
Follow these easy steps if you want to create a hover animation like for example a download button or a navigation image
1. Open TexturePacker, choose CSS as framework for your project and put in your sprites: Either drop your sprites individually or simply drop the whole folder containing all your sprites you want to have on the spritesheet.
Animation made easy in MonoGame with TexturePacker
2014-08-08 Randolph Burt texturepacker, tutorial, monogame
Thanks to Randolph Burt for writing this tutorial!
TexturePacker Now Supports MonoGame!
By now I’m sure that you’re well aware of how TexturePacker can make in-game animation easier than ever. Well, we’ve now added the option to export from TexturePacker directly into MonoGame!
Here’s a look at an example of using TexturePacker to animate a MonoGame project:
In this article we will go through, step by step, how to produce the above video, and we’ll also give you a link to the source code.
TexturePacker
TexturePacker allows you to easily create sprite sheets and texture atlases, greatly simplifying the process of in-game animation. Here’s how it works – you take your individual animation frames (of characters, objects, etc.), and drag and drop them into TexturePacker. Then TexturePacker combines them into sprite sheets, which you can then load into your game. Using sprite sheets rather than individual images is a much more efficient process, making development quicker and easier for you! Here’s a video to explain how it all works:
SpriteSheets – TheMovie – Part 1 by CodeAndWeb
TexturePacker has always been quite versatile, and compatible with numerous formats. However, we’ve now added the ability to save your sprite sheets and data files in a format compatible with MonoGame, as well as the source code to properly manage and use these files in your MonoGame app.
Source code available for download
git clone https://github.com/CodeAndWeb/TexturePacker-MonoGame-Demo.gitTexturePacker-MonoGame-Demo.zip TexturePacker-MonoGame-Demo.tar.gz
