Strange flashing line when load imagesheet with padding > 0

Solar2D Advanced Graphics
#1

It’s ok when there’s 0 padding in imagesheet.

but when there’s padding>0 in imagesheet, strange flashing lines will appear when move the images.

I used to think it’s a bug of levelhelper api, but now I think  it should be a bug of corona sdk, and I’ve submitted it to the bug system of coronalabs.

Test1: It’s ok when 0 padding

\_AH = display.actualContentHeight display.setDefault("background", 1, 1, 1, 1) local physics = require("physics") physics.start() physics.setGravity( 0, 10 ); local options = { frames = { { x = 0, y = 0, width = 200, height = 150, } }, sheetContentWidth = 200, sheetContentHeight = 150 } local sheetInfo = graphics.newImageSheet("road-0-padding.png", options) local layer = display.newGroup() local xStart = 0 for i = 1, 20 do local body = display.newImage(sheetInfo, 1) body:translate( 200 \* i, \_AH - 200 ) physics.addBody( body, "static", { density=3.0, friction=0.5, bounce=0.3 } ) layer:insert(body) end local function sign(value) if value \> 0 then return 1 elseif value \< 0 then return -1 else return 0 end end local delta = -20 timer.performWithDelay( 20, function(e) if layer.contentBounds.xMax \< display.contentCenterX then delta = math.abs(delta) elseif layer.contentBounds.xMin \> display.contentCenterX then delta = -math.abs(delta) end delta = sign(delta) \* math.random(1, 50) layer:translate( delta, 0 ) end, -1 )

PfdZfWT.png

Test2: It’s not ok when padding>0

 display.setDefault("background", 1, 1, 1, 1) local physics = require("physics") physics.start() physics.setGravity( 0, 10 ); \_AH = display.actualContentHeight local options = { frames = { { x = 8, y = 8, width = 200, height = 150, } }, sheetContentWidth = 216, sheetContentHeight = 266 } local sheetInfo = graphics.newImageSheet("road-8-padding.png", options) local layer = display.newGroup() local xStart = 0 for i = 1, 20 do local body = display.newImage(sheetInfo, 1) body:translate( 200 \* i, \_AH - 200 ) physics.addBody( body, "static", { density=3.0, friction=0.5, bounce=0.3 } ) layer:insert(body) end local function sign(value) if value \> 0 then return 1 elseif value \< 0 then return -1 else return 0 end end local delta = -20 timer.performWithDelay( 20, function(e) if layer.contentBounds.xMax \< display.contentCenterX then delta = math.abs(delta) elseif layer.contentBounds.xMin \> display.contentCenterX then delta = -math.abs(delta) end delta = sign(delta) \* math.random(1, 50) layer:translate( delta, 0 ) end, -1 )

PfaQlkX.png

#2

Hi @pickerel,

What is the case # for this? Typically these issues arise in relation to the content area size and how the app must “round” to a pixel because, naturally, the pixels on the actual screen rarely match a 1:1 ratio of the Corona content area.

Brent

#3

Case 42894 and Case 42948

#4

how is it going?

#5

You need to extrude your images. This tool will do it for you…

http://renderhjs.net/shoebox/packSprites.htm

#6

I use spritehelper and levelhelper.

#7

Texture packer supports extruding:

(old article)

http://www.raywenderlich.com/32049/texture-packer-tutorial-how-to-create-and-optimize-sprite-sheets-in-cocos2d

#8

It’s ok now when I set isImageSheetSampledInsideFrame=true.

But only ok on Simulator.

When build with  2015.2741(online build, offline build is broken now) and run on a real device, the problem still exists.

#9

Hi @pickerel,

We are seeing the same behavior in testing on devices (iPhone 6 in this case), using the textures included in the bug report that was associated with the feature.

Best regards,

Brent

#10

Should I submit a new bug?

#11

Did you make that setting globally before loading any image sheet?

#12

yes. But it’s only ok on simulator.

#13

The project I submitted previous to you is ok both on  simulator and real device.

But my work project is only ok on simulator and android device. On iPad3, iPad4, iPhone 6 Plus, the problem still exists.

SDK version:2015.2743, 2015.2744, online build/offline build are same.

simulator.jpg

ipad3.jpg

#14

Hi @pickerel,

I tested out your original project, and I have a few comments:

  1. First of all, you really need to be using dynamic image selection, if you’re not already (in a real project that’s not for testing). You just won’t get good results if you try to use one image or image sheet for both “normal” and “retina” devices. That, of course, has been true for a long time.

  2. Your original project had the wrong height value for the sheet. You wrote 266 instead of 166 for the height of the image sheet, which of course is a huge difference in size.

  3. You were specifying “sheetContentWidth/Height” but you weren’t using dynamic image selection (point #1). Those properties are specifically needed for dynamic image selection.

Anyway, all that being said, I up-sized your image 2x and modified the code to use dynamic image selection (newImageRect() instead of just newImage())… and unfortunately, I still see the flickering line on the iPad Air. I don’t have a 6 Plus to test on at the moment, but I trust that your reports are accurate. What this leads me to believe is that the issue only occurs on larger “retina” devices, even with the new “isImageSheetSampledInsideFrame” option, because the overall pixel density on such devices is very very high.

Let me discuss this a little further with the engineers and see what they say. If you really want to avoid border artifacts under any/all circumstances, you should really just extrude your frames by 1-2 pixels in the source sheet. Texture “packing” applications like TexturePacker have an automatic option to perform that for you. Now, if you’re hand-creating your frames in Photoshop, you’d have to do it manually, but copy-and-paste and extrusion of the frame’s edges would, in my estimation, take very little time and solve the problem outright.

Best regards,

Brent

#15

Thanks @Brent. I used to overlap the image’s edges to avoid this problem, but I’m really tired of this way.  It’s great If you can solve this problem, if you can not , I have to do overlap again. I’m using spritehelper and levelhelper, and I don’t know how to extrude the frames.

#16

Hi @pickerel,

What is the case # for this? Typically these issues arise in relation to the content area size and how the app must “round” to a pixel because, naturally, the pixels on the actual screen rarely match a 1:1 ratio of the Corona content area.

Brent

#17

Case 42894 and Case 42948

#18

how is it going?

#19

You need to extrude your images. This tool will do it for you…

http://renderhjs.net/shoebox/packSprites.htm

#20

I use spritehelper and levelhelper.