9-Slice has blanks in it?

Solar2D Widgets
#1

I am using a 9-slice image for a button but the button has a drop shadow on it. Therefore the slices look like 50%, 10%, 40%

The bottom 40% will leave a gap in column 1 and 3. Am I doing something wrong? 

I am using a 100x100px .png

local function buildStartButton2() local nineSliceOptions = { frames = { { x=0, y=0, width=50, height=50 }, { x=50, y=0, width=10, height=50 }, { x=60, y=0, width=40, height=50 }, { x=0, y=50, width=50, height=10 }, { x=50, y=50, width=10, height=10 }, { x=60, y=50, width=40, height=10 }, { x=0, y=60, width=50, height=40 }, { x=50, y=60, width=10, height=40 }, { x=60, y=60, width=40, height=40 }, { x=0, y=0, width=50, height=50 }, { x=50, y=0, width=10, height=50 }, { x=60, y=0, width=40, height=50 }, { x=0, y=50, width=50, height=10 }, { x=50, y=50, width=10, height=10 }, { x=60, y=50, width=40, height=10 }, { x=0, y=60, width=50, height=40 }, { x=50, y=60, width=10, height=40 }, { x=60, y=60, width=40, height=40 } }, sheetContentWidth = 100, sheetContentHeight = 100 } local buttonSheet = graphics.newImageSheet( "art/menus/testBox.png", nineSliceOptions ) local myButton = widget.newButton { width = 270, height = 270, sheet = buttonSheet, topLeftFrame = 1, topMiddleFrame = 2, topRightFrame = 3, middleLeftFrame = 4, middleFrame = 5, middleRightFrame = 6, bottomLeftFrame = 7, bottomMiddleFrame = 8, bottomRightFrame = 9, topLeftOverFrame = 10, topMiddleOverFrame = 11, topRightOverFrame = 12, middleLeftOverFrame = 13, middleOverFrame = 14, middleRightOverFrame = 15, bottomLeftOverFrame = 16, bottomMiddleOverFrame = 17, bottomRightOverFrame = 18, label = "button" } myButton:setLabel( "9-Slice" ) end

Thanks for any help you can give me!

Gullie

   

#2

I should mention that if you change the offsets to 40%, 20%, 40% it works as designed. 

#3

Hi @gullie667,

Can you post the image sheet you’re using, so I get a better sense of how it’s structured?

Thanks,

Brent

#4

Here ya go… I removed the color as that was a test I was doing to check my implementation.

Thanks!

#5

Opps, wrong image… This is the one:

#6

Hi @gullie667,

Try using a larger “sample” of the regions that span the sides (topMiddle, middleLeft, middleRight, bottomMiddle). I think I had a similar issue once where I was taking a very small sample (like 10 pixels) and stretching it over a much larger span (200-300 pixels). Because of the way the graphics engine scales and stretches that part, some “bleed” can occur.

So basically, try to get at least a 50px wide (or tall) sample of the middle spans, or even greater, depending on your intended button sizes in the app… as in, make the image sheet twice the size so you can get 100px size on those parts.

Hope this helps somewhat,

Brent

#7

Thanks for the tip.

#8

I should mention that if you change the offsets to 40%, 20%, 40% it works as designed. 

#9

Hi @gullie667,

Can you post the image sheet you’re using, so I get a better sense of how it’s structured?

Thanks,

Brent

#10

Here ya go… I removed the color as that was a test I was doing to check my implementation.

Thanks!

#11

Opps, wrong image… This is the one:

#12

Hi @gullie667,

Try using a larger “sample” of the regions that span the sides (topMiddle, middleLeft, middleRight, bottomMiddle). I think I had a similar issue once where I was taking a very small sample (like 10 pixels) and stretching it over a much larger span (200-300 pixels). Because of the way the graphics engine scales and stretches that part, some “bleed” can occur.

So basically, try to get at least a 50px wide (or tall) sample of the middle spans, or even greater, depending on your intended button sizes in the app… as in, make the image sheet twice the size so you can get 100px size on those parts.

Hope this helps somewhat,

Brent

#13

Thanks for the tip.