Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Strange flashing line when load imagesheet with padding > 0
Started by pickerel Sep 22 2015 12:47 AM

14 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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
 


[TOPIC: post.html]
#2

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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



[TOPIC: post.html]
#3

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

Case 42894 and Case 42948

 

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



[TOPIC: post.html]
#4

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

how is it going?



[TOPIC: post.html]
#5

ponywolf

[GLOBAL: userInfoPane.html]
ponywolf
  • Contributor

  • 268 posts
  • Corona SDK

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

 

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



[TOPIC: post.html]
#6

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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

 

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

 

I use spritehelper and levelhelper.



[TOPIC: post.html]
#7

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,587 posts
  • Corona SDK

[TOPIC: post.html]
#8

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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.



[TOPIC: post.html]
#9

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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



[TOPIC: post.html]
#10

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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

 

 

Should I submit a new bug?



[TOPIC: post.html]
#11

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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



[TOPIC: post.html]
#12

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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

 

yes. But it's only ok on simulator.



[TOPIC: post.html]
#13

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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



[TOPIC: post.html]
#14

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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

 



[TOPIC: post.html]
#15

pickerel

[GLOBAL: userInfoPane.html]
pickerel
  • Contributor

  • 135 posts
  • Corona SDK

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.




[topic_controls]
[/topic_controls]