NinePatch

Nobuyuki

(Posted 2013) [#1]

You should all know what this does. If you don't, then this picture might help explain:

NinePatch is a class I wrote sometime last year to deal with buttons for a game I was working on at the time. It takes a base image and stretches it selectively to make scaling artifacts less apparent. (This version of NinePatch doesn't have tiling capabilities.) Border thicknesses can be specified independently, in case you wish the center graphic to have higher resolution than the edges.

Source code is as follows:

' Some notes about this routine:
' in HTML5, if you use SetColor() on a NinePatch in Firefox, it changes how the texture is scaled.
' as a result, the pieces of the NinePatch will not fit together seamlessly.  You will see seams.
' This doesn't happen on Android or GLFW.  I haven't tested it on any other platforms.  Sorry..
' Let me know if you get seams on Chrome, ios, or anything else, I'm interested!
' -Nobuyuki  (nobu[at]subsoap.com),  05 September 2012.

Import mojo 

Class NinePatch
	Field img:Image
	Field x:Int, y:Int,w:Int, h:Int 
	Field borderwidth:Int, borderheight:Int
	
	Method New(x:Int, y:Int, w:Int, h:Int, img:Image=Null, borderwidth:Int=0, borderheight:Int=0)
		Self.img = img 
		Self.x = x; Self.y = y; Self.w = w; Self.h = h

		If img = Null Then Return 
		If borderwidth = 0 Then Self.borderwidth = Ceil(img.Width / 3) Else Self.borderwidth = borderwidth 
		If borderheight = 0 Then Self.borderheight = Ceil(img.Height / 3) Else Self.borderheight = borderheight 
	End Method
	
	Method Draw:Void(frame:Int=0, xOffset:Int=0, yOffset:Int=0,wOffset:Int=0, hOffset:Int=0)
		DrawNinePatch(img,x+xOffset,y+yOffset,w+wOffset,h+hOffset, Self.borderwidth, Self.borderheight, frame)	
	End Method
	
	Method Set:Void(x:Int, y:Int, w:Int, h:Int)
		Self.x = x; Self.y = y; Self.w = w; Self.h = h		
	End Method

	'Draw separately from instance
	Function DrawNinePatch:Void(img:Image, x:Int, y:Int, w:Int, h:Int, borderwidth:Int=0, borderheight:Int=0, frame:Int=0)
		If borderwidth = 0 Then borderwidth = Floor(img.Width / 3) 
		If borderheight = 0 Then borderheight = Floor(img.Height / 3)

		'Draw the corners.
		DrawImageRect(img,x,y,0,0,borderwidth,borderheight,frame)
		DrawImageRect(img,x+w-borderwidth,y+h-borderheight,img.Width-borderwidth,img.Height-borderheight,borderwidth,borderheight,frame)
		DrawImageRect(img,x+w - borderwidth,y,img.Width-borderwidth,0,borderwidth,borderheight,frame)
		DrawImageRect(img,x,y+h - borderheight,0,img.Height-borderheight,borderwidth,borderheight,frame)
		
		'Draw the borders.
		Local wRatio:Float = (w - borderwidth * 2.0) / (img.Width - borderwidth * 2.0)  'Width stretch ratio for top/bottom
		Local hRatio:Float = (h - borderheight * 2.0) / (img.Height - borderheight * 2.0)  'Height stretch ratio for l/r

		if wRatio <> 0 
			DrawImageRect(img,x+borderwidth,y, borderwidth, 0, img.Width - borderwidth*2, borderheight,0,wRatio,1,frame) 'top
			DrawImageRect(img,x+borderwidth,y+h-borderheight, borderwidth, img.Height-borderheight, img.Width - borderwidth*2, borderheight,0,wRatio,1,frame) 'bottom
		End if 

		if hRatio <> 0
			DrawImageRect(img,x,y + borderheight,0,borderheight, borderwidth, img.Height - borderheight*2, 0, 1, hRatio,frame) 'Left 
			DrawImageRect(img,x+w-borderwidth,y + borderheight,img.Width-borderwidth,borderheight, borderwidth, img.Height - borderheight*2, 0, 1, hRatio,frame) 'Right
		End if 

		'Draw the center.
		If hRatio <> 0 And wRatio <> 0
			DrawImageRect(img,x+borderwidth,y+borderheight, borderwidth,borderheight,img.Width - borderwidth*2, img.Height - borderheight*2,0,wRatio,hRatio,frame)
		End If
	End Function
End Class

Gerry Quinn

(Posted 2013) [#2]

Heh, I did something similar just last week. Yours is neater, though. I just tiled everything as I didn't think of selective stretching.

Gerry Quinn

(Posted 2013) [#3]

Just a suggestion about the 'seams' issue you mention: why not stretch the non-corner pieces an extra pixel or so - won't that eliminate any possibility of seams? Of course this won't work if the images are part transparent.

Nobuyuki

(Posted 2013) [#4]

> Of course this won't work if the images are part transparent.

Exactly. Even stranger, though, is the fact that Firefox applies some sort of filtering when applying hue to the image before it's even blitted to screen, so even without changing the global scale, you could run into this!

I'm sure both of these problems could be resolved a better way; In the latest Monkey, importing Gles11 and using LoadImageData() to grab rgba pixels directly could in theory let a tiling (instead of a stretching) 9-patch generate a static image with no seams, even if the global scale isn't 1.0 and the component image contains alpha. But who knows how inefficient that would be at runtime when you're constantly having to redraw it on resize and keep the texture in standard RAM instead of VRAM..

Gerry Quinn

(Posted 2013) [#5]

I used the tiling technique to generate fresh images in the render buffer which I then grabbed using ReadPixels and WritePixels. So I only have to generate fresh graphics when screen elements are resized (which can happen at the start or when game parameters such as board size are changed). Thus the inefficiency shouldn't be an issue in practice.

Should work well for things like buttons.

Nobuyuki

(Posted 2013) [#6]

Well, true, I guess my mind is always thinking of the edge cases, like animating a dialog window, but I guess there's no point in doing that if most animations would look almost-as-good just scaling the final texture :)

Gerry Quinn

(Posted 2013) [#7]

Yours is actually much simpler than mine and would be much faster if you want to do it on the fly. The only problem is the risk of overlaps if your images are not full opaque.

I think there are uses for both techniques.