Stretchable, repeatable images

Posted on 31st Aug 2015. Follow @phaser_ and get the Phaser World newsletter.


The Nine Patch Phaser Plugin allows you to use nine patch images in the HTML game framework Phaser.

9 Patch images are stretchable, repeatable images reduced to their smallest size. The simplest example would be if you were to take a rounded div and slice it up into 9 squares like you would a tic-tac-toe board. The four corners wouldn't change sizes at all but would be static while the other 5 pieces would be stretched or repeated to allow the whole image to scale appropriately.

This is not technically a Phaser Plugin. It provides two methods in game.cache to generate nine patch textures and a Phaser.NinePatchImage class to create nine patch images from these textures.

The plugin is written using ES6 and compiled with Babel and Browserify, tested on Phaser 2.1.3 and Phaser 2.4.3.

Feel free to follow me on twitter @netcell and check out my blog!

Read More

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now