Nine Patch
Nine Patch is a smart way to scale images, it is commonly used in UIs (Windows and Android use this method for their buttons for example).
How does it work, well it is pretty simple, you need to draw four lines, one on the top, one on the left, one on the right and one at the bottom (the last two are not mandatory).
The top and left lines are guides that tell the system how the image should be split, the other two define where the content will be drawn.
With the two guides the system can 9patch the image
For more info on 9patch check this guide which is great.
Also 9 patch supports broken lines in the top and left side, this is useful for images that have a static part in the middle
Note: Broken lines on the bottom and right side are not supported by this implementation.
To create a Nine Patch image there are plenty of tools. Android provides Draw 9 patch which is an standard for nine patch already, but there is also Android Studio, an online tool.
Nine.lua is a simple implementation of Nine Patch, for LÖVE. It is really simple to use and provides all the needed operations in just three functions!
Just require it into your project and start using it!
nine = require "material-love.libs.nine"The first step to use nine.lua, is converting an image with the nine patch lines into the bare asset (That is, without the lines) and a .lua file with the patch info.
Doing this is pretty simple, just load your image into your project and pass it to nine.convert:
image = love.graphics.newImage("Yourimagewithlines.png")
luastr, asset = nine.convert(image,name,encode)As we said before the first argument is the image you want to convert.
The second argument, name is the name you want to give to the patch.
The third one, encode is a boolean that tells the function to save this file in the save folder, if you want to save it to a special location save it yourself.
The function returns a string (it is the lua file for the patch), and an asset (the image without the lines), save both of them together.
Note: This function is really expensive to compute so I recommend you pre-compute your patches, and use this in your final project. Don't try running this function on your project love.update or it will completely freeze.
To load a patch you must require the lua file generated by nine.convert, this returns a function you need to call with the path to the asset (without the asset file name nor it's extension), in order to load the patch.
So if the asset is in the save directory call it with an empty string "".
patch = require "mypatch.lua" ("path/to/theasset/") -- This is without the asset name and extension.Alternatively you can load it with love.filesystem.load
patch = love.filesystem.load("mypatch.lua")()("path/to/theasset/")If you dont want to save the string to a file, you can use loadstring
patch = loadstring(luafile)()("path/to/theasset/")The next step is to process the patch information, and turn it into a patch object. To do this call nine.process with the patch info you just loaded, as an argument.
patchobject = nine.process(patch)There is an optional second argument to nine.process, the image table, you can pass images in a table, nine.process will try to use those images instead of loading new ones. This is really useful when you dont want to save the asset either.
Just do:
patchobject = nine.process(patch,{asset})Now you are ready to start drawing your Nine Patch to the screen. To do this you have the nine.draw function and the draw method of the patchobject.
nine.draw(patchobject, x, y, w, h, pad, image)
patchobject:draw(x, y, w, h, pad, image)-
x,y: The x and y coordinates of the content that will be inside the patch -
w,h: The width and height of the content -
pad: A boolean that tells whether the padding of the Patch should be taken into account (defaults tofalse) -
image: The image used for the patch, some patches have more than one image, for example the shadow patch provided by Material-Love, which has 5.
The only needed file is libs/nine.lua