scrollView Device Bug - 2 diagonal lines

Solar2D Composer
#1

I used a scrollView widget and i put inside it some menu items ( buttons ).

In the simulator everything look ok, but on the devices ( tested iPhone 4S and android 2.3 tablet ),
it show 2 diagonal lines on the scrollview widget.

The lines are “transparent”, so you can see the background color.

Somebody know where is the problem ?

[lua]local widget = require “widget”

local scrollView;
local DeltaX = (display.contentWidth - 640 ) / 2
local DeltaY = (display.contentHeight - 960) / 2;
local TMPmenuItem;

local function scrollViewListener( event )
local s = event.target – reference to scrollView object
end

local function drawScrollView( totalMenuItems )

TMPmenuItem = display.newImage(“menuItem.png”, 18+DeltaX, DeltaY);
TMPmenuItem.alpha = 0.0;

– Create a new ScrollView widget:
scrollView = widget.newScrollView{
width = 4+(TMPmenuItem.width),
height = 4+(TMPmenuItem.height * 6),
scrollWidth = TMPmenuItem.width,
scrollHeight = TMPmenuItem.height * totalMenuItems,
maskFile=“scrollViewMask.png”,
listener = scrollViewListener
}

TMPmenuItem:removeSelf( );

scrollView.x = 18+DeltaX;
scrollView.y = 333+DeltaY;
end

drawScrollView(5);
TMPmenuItem = display.newImage(“menuItem.png”, DeltaX, DeltaY);
scrollView:insert( TMPmenuItem )
TMPmenuItem = display.newImage(“menuItem.png”, DeltaX, ( TMPmenuItem.height*1 )+DeltaY )
scrollView:insert( TMPmenuItem )
TMPmenuItem = display.newImage(“menuItem.png”, DeltaX, ( TMPmenuItem.height*2)+DeltaY )
scrollView:insert( TMPmenuItem )
TMPmenuItem = display.newImage(“menuItem.png”, DeltaX, ( TMPmenuItem.height*3 )+DeltaY )
scrollView:insert( TMPmenuItem )
TMPmenuItem = display.newImage(“menuItem.png”, DeltaX, ( TMPmenuItem.height*4 )+DeltaY )
scrollView:insert( TMPmenuItem ) [/lua] [import]uid: 138364 topic_id: 34894 reply_id: 334894[/import]

#2

I would venture to guess is that your mask file doesn’t match the size of the area you want the scrollView to occupy.

If your scrollView takes up the whole screen, then you don’t need to have a mask at all. You only need it if the scrollView is going to occupy a smaller area or the screen.

We don’t know anything about the image you are loading menuItem.png and we don’t know anything about your mask file. Can you provide a little more information? [import]uid: 199310 topic_id: 34894 reply_id: 138693[/import]

#3

Hi rob,

thank you for your fast answer.

Here there is the code and the images so you can test it on yourself.

https://github.com/gasnervino/scrollViewBug

I tested with 3 different mask files:

  • No black border -> No diagonal lines but the mask not work has expected
  • 1 or 2 pixel black border -> results in 1 or 2 pixel 2 diagonal lines

Thank you for your help [import]uid: 138364 topic_id: 34894 reply_id: 138803[/import]

#4

Make sure images and mask width/height are divisible by 2. [import]uid: 33275 topic_id: 34894 reply_id: 138806[/import]

#5

Hi SegaBoy,

thank you for your answer.

I have checked about image sizes and luckily images and mask width and height are all divisible by 2.

I have never read before something about the divisible by 2 specification for scrollView, where you found this useful information.

Have you tested the code ?

Thank you for help
[import]uid: 138364 topic_id: 34894 reply_id: 138821[/import]

#6

I’m not 100% on it - I just remember having the same issue before and the solution being something along those lines. Has it actually fixed it for you? [import]uid: 33275 topic_id: 34894 reply_id: 138826[/import]

#7

I’ve had that same issue, your mask file height and width has to be divisible by 4 NOT 2. I have ran into that issue many times, lol.

Here it the corona docs stating it has to be divisible by 4:
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Also your black border should be at least 3px, I personally use 4px… OCD [import]uid: 58885 topic_id: 34894 reply_id: 138840[/import]

#8

I make sure my area to be masked is divisible by 4, in other words don’t do:

myScrollView = widget.newScrollView({  
 width = 315,  
 height = 421  
})

but do:

myScrollView = widget.newScrollView({  
 width = 316,  
 height = 420  
})

Then make sure your mask’s white area matches those numbers exactly, then expand the canvas by 4 px on each side. Your mask will end up in this case being 324 x 428. Fill the outer area with black. And that should solve your problems.
[import]uid: 199310 topic_id: 34894 reply_id: 138898[/import]

#9

I would venture to guess is that your mask file doesn’t match the size of the area you want the scrollView to occupy.

If your scrollView takes up the whole screen, then you don’t need to have a mask at all. You only need it if the scrollView is going to occupy a smaller area or the screen.

We don’t know anything about the image you are loading menuItem.png and we don’t know anything about your mask file. Can you provide a little more information? [import]uid: 199310 topic_id: 34894 reply_id: 138693[/import]

#10

Hi rob,

thank you for your fast answer.

Here there is the code and the images so you can test it on yourself.

https://github.com/gasnervino/scrollViewBug

I tested with 3 different mask files:

  • No black border -> No diagonal lines but the mask not work has expected
  • 1 or 2 pixel black border -> results in 1 or 2 pixel 2 diagonal lines

Thank you for your help [import]uid: 138364 topic_id: 34894 reply_id: 138803[/import]

#11

Make sure images and mask width/height are divisible by 2. [import]uid: 33275 topic_id: 34894 reply_id: 138806[/import]

#12

Hi SegaBoy,

thank you for your answer.

I have checked about image sizes and luckily images and mask width and height are all divisible by 2.

I have never read before something about the divisible by 2 specification for scrollView, where you found this useful information.

Have you tested the code ?

Thank you for help
[import]uid: 138364 topic_id: 34894 reply_id: 138821[/import]

#13

I’m not 100% on it - I just remember having the same issue before and the solution being something along those lines. Has it actually fixed it for you? [import]uid: 33275 topic_id: 34894 reply_id: 138826[/import]

#14

I’ve had that same issue, your mask file height and width has to be divisible by 4 NOT 2. I have ran into that issue many times, lol.

Here it the corona docs stating it has to be divisible by 4:
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Also your black border should be at least 3px, I personally use 4px… OCD [import]uid: 58885 topic_id: 34894 reply_id: 138840[/import]

#15

I make sure my area to be masked is divisible by 4, in other words don’t do:

myScrollView = widget.newScrollView({  
 width = 315,  
 height = 421  
})

but do:

myScrollView = widget.newScrollView({  
 width = 316,  
 height = 420  
})

Then make sure your mask’s white area matches those numbers exactly, then expand the canvas by 4 px on each side. Your mask will end up in this case being 324 x 428. Fill the outer area with black. And that should solve your problems.
[import]uid: 199310 topic_id: 34894 reply_id: 138898[/import]

#16

Thank you chevol and Rob Miracle,

your hint work exactly as you say.

I choose to use 2 pixel border each side, so the mask remain divisible by 4.

Thank you again [import]uid: 138364 topic_id: 34894 reply_id: 139553[/import]

#17

Thank you chevol and Rob Miracle,

your hint work exactly as you say.

I choose to use 2 pixel border each side, so the mask remain divisible by 4.

Thank you again [import]uid: 138364 topic_id: 34894 reply_id: 139553[/import]