Difference between revisions of "PVR Spritesheets"

From DCEmulation
Jump to navigation Jump to search
(Created page with "(currently working on this) = About this tutorial = In this tutorial you will learn: * Generating a spritesheet from a directory full of single images. * Converting the spri...")
 
Line 4: Line 4:
 
= About this tutorial =
 
= About this tutorial =
 
In this tutorial you will learn:
 
In this tutorial you will learn:
* Generating a spritesheet from a directory full of single images.
+
* Generating a spritesheet from a directory full of single images automatically.
* Converting the spritesheet into a PVR paletted texture.
+
* Converting the spritesheet into a PVR paletted texture automatically.
 
* Loading the spritesheet into the PVR for drawing.
 
* Loading the spritesheet into the PVR for drawing.
* Setting up the palette for drawing
+
* Setting up the palette for drawing.
* Drawing a user interface (with a dynamic health bar)
+
* Drawing a user interface (with a dynamic health bar).
* Drawing animated characters
+
* Drawing animated characters.
  
 
This will be the end result:
 
This will be the end result:
  
 
[[File:Spritesheet_tutorial.gif]]
 
[[File:Spritesheet_tutorial.gif]]
 +
 +
= Required software =
 +
Before you can get started, you will need to install two tools.
 +
 +
== TexturePacker ==
 +
The first tool you need is [https://www.codeandweb.com/texturepacker/download TexturePacker]. It packs single images together into one big spritesheet, so you don't need to do this manually. We will make it do it for us using Make.
 +
 +
TexturePacker has some Pro features, but this tutorial limits itself to its free features.
 +
 +
This image should give you an idea about this tools's usefulness:
 +
 +
[[File:Spritesheet_tutorial_texturepacker.png]]
 +
 +
It will also create text files of the following format:
 +
 +
mage_mage_combat6, 244, 103, 122, 103, 0, 0, 0, 0
 +
mage_mage_combat7, 366, 103, 122, 103, 0, 0, 0, 0
 +
mage_mage_idle0, 0, 206, 79, 93, 0, 0, 0, 0
 +
mage_mage_idle1, 79, 206, 79, 94, 0, 0, 0, 0
 +
mage_mage_idle2, 158, 206, 82, 94, 0, 0, 0, 0
 +
mage_mage_idle3, 240, 206, 85, 94, 0, 0, 0, 0
 +
 +
The example code will parse this information to find out where each sprite within the spritesheet is.

Revision as of 12:19, 20 March 2016

(currently working on this)


About this tutorial

In this tutorial you will learn:

  • Generating a spritesheet from a directory full of single images automatically.
  • Converting the spritesheet into a PVR paletted texture automatically.
  • Loading the spritesheet into the PVR for drawing.
  • Setting up the palette for drawing.
  • Drawing a user interface (with a dynamic health bar).
  • Drawing animated characters.

This will be the end result:

Spritesheet tutorial.gif

Required software

Before you can get started, you will need to install two tools.

TexturePacker

The first tool you need is TexturePacker. It packs single images together into one big spritesheet, so you don't need to do this manually. We will make it do it for us using Make.

TexturePacker has some Pro features, but this tutorial limits itself to its free features.

This image should give you an idea about this tools's usefulness:

Spritesheet tutorial texturepacker.png

It will also create text files of the following format:

mage_mage_combat6, 244, 103, 122, 103, 0, 0, 0, 0
mage_mage_combat7, 366, 103, 122, 103, 0, 0, 0, 0
mage_mage_idle0, 0, 206, 79, 93, 0, 0, 0, 0
mage_mage_idle1, 79, 206, 79, 94, 0, 0, 0, 0
mage_mage_idle2, 158, 206, 82, 94, 0, 0, 0, 0
mage_mage_idle3, 240, 206, 85, 94, 0, 0, 0, 0

The example code will parse this information to find out where each sprite within the spritesheet is.