Another observation I made regarding slices etc and combining images seamlessly is that I would not recommend using the center reference point - you just don’t know exactly where the edges will end up with.
What I do is make everything top left and work from there - again it helps with pixel-perfect positioning (and since, for example, with buttons you supply the width and height, it doesn’t make it any less centered (as you just position everything offset by -math.floor( width / 2 ) and -math.floor( height / 2 ), but you place your top left piece, and offset using the width and height from there by the pieces you’ve already placed.
Just to show my different approach, here is the part of my button code where I set up the 9 slice graphics. In case you are wondering, the line:[lua]class.getThemeImage( “button_” … sliceName )[/lua] is how I hook into the widget theme - it returns the imagesheet, the frame number, and the size of the requested sprite.
Point is, you can see where I set up my positions, and how I start ‘top left’ and work from there, with all positions relative to that, but taken directly from the sizes of things. I do do something a bit cheeky, that might potentially come back to haunt me but so far hasn’t caused problems, and that is when I need to create a sprite of a certain stretched size, I actually pass those required sizes as the parameters to newImageRect(), rather than create it at its default size, and then scale (has also proved better for getting specific pixel sizes - but might screw up the automatic content loading, so as far as that is concerned, procede with caution!).
[lua] – Get the slice values
local sheet
local slices = {}
local sliceNames = {
“topLeft”,
“topMiddle”,
“topRight”,
“bottomLeft”,
“bottomMiddle”,
“bottomRight”,
“middleLeft”,
“middle”,
“middleRight”,
“topLeftOver”,
“topMiddleOver”,
“topRightOver”,
“bottomLeftOver”,
“bottomMiddleOver”,
“bottomRightOver”,
“middleLeftOver”,
“middleOver”,
“middleRightOver”,
}
for i = 1, #sliceNames do
local frame, size
local sliceName = sliceNames[i]
sheet, frame, size = class.getThemeImage( “button_” … sliceName )
local width, height = size.width, size.height
slices[sliceName] = { frame = frame, size = size }
end
– Get sizes
local width = params.width
local height = params.height
local left = -math.floor( width / 2 )
local top = -math.floor( height / 2 )
local leftWidth = slices.middleLeft.size.width
local rightWidth = slices.middleRight.size.width
local topHeight = slices.topMiddle.size.height
local bottomHeight = slices.bottomMiddle.size.height
local middleWidth = width - leftWidth - rightWidth
local middleHeight = height - topHeight - bottomHeight
local xMid = left + leftWidth
local right = left + leftWidth + middleWidth
local yMid = top + topHeight
local bottom = top + topHeight + middleHeight
– Create the actual image slices
local slicesLayout = {
topLeft = { self._default, left, top, leftWidth, topHeight },
topMiddle = { self._default, xMid, top, middleWidth, topHeight },
topRight = { self._default, right, top, rightWidth, topHeight },
bottomLeft = { self._default, left, bottom, leftWidth, bottomHeight },
bottomMiddle = { self._default, xMid, bottom, middleWidth, bottomHeight },
bottomRight = { self._default, right, bottom, rightWidth, bottomHeight },
middleLeft = { self._default, left, yMid, leftWidth, middleHeight },
middle = { self._default, xMid, yMid, middleWidth, middleHeight },
middleRight = { self._default, right, yMid, rightWidth, middleHeight },
topLeftOver = { self._over, left, top, leftWidth, topHeight },
topMiddleOver = { self._over, xMid, top, middleWidth, topHeight },
topRightOver = { self._over, right, top, rightWidth, topHeight },
bottomLeftOver = { self._over, left, bottom, leftWidth, bottomHeight },
bottomMiddleOver = { self._over, xMid, bottom, middleWidth, bottomHeight },
bottomRightOver = { self._over, right, bottom, rightWidth, bottomHeight },
middleLeftOver = { self._over, left, yMid, leftWidth, middleHeight },
middleOver = { self._over, xMid, yMid, middleWidth, middleHeight },
middleRightOver = { self._over, right, yMid, rightWidth, middleHeight },
}
for k, v in pairs( slicesLayout ) do
local sliceData = slices[k]
local image = display.newImageRect( sheet, sliceData.frame, v[4], v[5] )
image:setReferencePoint( display.TopLeftReferencePoint )
v[1]:insert( image )
image.x = v[2]
image.y = v[3]
end
end
[/lua]
