9-patch scaling: What’s the difference between borders, rectangle, and padding?

The 9-patch editor lets you specify which area of a sprite image should be scaled and which border should remain fixed when the overall image is scaled.

Have a look at the following sprite of size 100x100:

9-patch sprite example
  • Some frameworks (like Unity) expect the width of the fixed borders (in our example: 20,20,20,20)
  • Others (like Phaser) expect the position and size of the inner, resizable rectangle (e.g. 20,20 60x60)

Some frameworks also support paddings (or a fill area) to position extra content within a scaled sprite (e.g, a button text). While TexturePacker doesn’t allow configuring paddings, it can read them from Android ".9.png" files and pass them to the exporter.

Show all FAQ entries >