I'm a robot
CodeAndWeb

CodeAndWeb's GameDev Blog page 1/11

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.

Continue reading...

Source code available for download

git clone https://github.com/CodeAndWeb/TexturePacker-Shiva-JPSprite.git
TexturePacker-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.

Using TexturePacker to create sprite sheets for SpriteKit

Continue reading...

Source code available for download

git clone https://github.com/CodeAndWeb/TexturePacker-SpriteKit-Swift.git
TexturePacker-SpriteKit-Swift.zip TexturePacker-SpriteKit-Swift.tar.gz

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

Continue reading...

Source code available for download

git clone https://github.com/CodeAndWeb/TexturePacker-Phaser.git
TexturePacker-Phaser.zip TexturePacker-Phaser.tar.gz

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

TexturePacker CSS Animate Sprites Screenshot

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.

Continue reading...

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.

Continue reading...

Source code available for download

git clone https://github.com/CodeAndWeb/TexturePacker-MonoGame-Demo.git
TexturePacker-MonoGame-Demo.zip TexturePacker-MonoGame-Demo.tar.gz
Andreas Löw

Join the CodeAndWeb Newsletter (privacy policy)

I'm a robot