ScrollView - takes too long to render 20 horizontal level icons - how to fix/optimize?

babzzz · July 9, 2014, 4:13am

Thanks for everything. It is working now.

Since you are a marvellous pro i would like to ask you something

I’m having problem understanding “ultimate config.lua”

you can see a discussion beet wen me and Rob here : http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/#comment-154531

It is the 4/5 last comments.

I’m explaining you :

i’ve create photoshop file with 5 buttons and as an exemle each of these button are 200X100

Rob told me that this :

button01.png ( 50X25)
button01@2x.png (100X50)
button01@4x.png (200X100) —> my photoshop size

is ok, but it doesn’t work!!

Also i asked him to have 2png instead of 3 and he told me that i should change :

"then you can change your width and height in the config.lua to not be based on 320 x 570 and 360 x 480 sizes and instead go to the 2x sizes as the default::

640×1140 and 720×960. At that point, you can loose the @4x and just have normal and @2x where in your example normal would be 100×50 and @2x would be 200×100"

It is working fine on Ipad Retina and Ipad but it still too big on Iphone 4 and Iphne5

Do i need to use ultimate config.lua or would it be ok to use basic config.lua :

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 60, imageSuffix = { ["@2x"] = 2, } }, }

Thanks

richard9 · July 9, 2014, 3:28pm

My guess is that you’d want to use the ultimate config.lua method because there is a substantial chance in September that the iPhone 6 uses @3x. It’s much easier to work @2x,@3x,@4x than @1.5x/@2x.

If you want to use @2x as default, then:

All of your @2x assets should no longer have @2x on them. So your 100x50 button has no @ mark while the 200x100 is @2x
In config.lua, width and height would be set to 2x whatever value they were originally.
The imageSuffix table should only have the @2x entry and it should have whatever number it used to. (So what you have above looks ok)

Personally I would rather use the ultimate config.lua method. I mean you could just use that, remove the @4x line, and update the resolution numbers and it would probably be fine…

babzzz · June 30, 2014, 1:35am

Richard9 > thank you for your tips. I’m a newbie and i don’t really understand the step 3 (automate process). Would you kindly explain a little bit more that step?Thank you

Do you have a sample code with this technic with 2 or 3 images that a newbie can understand?

babzzz · June 30, 2014, 2:22am

I have made this code :

display.setStatusBar( display.HiddenStatusBar ) local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, bottomPadding = 0, id = "onBottom", horizontalScrollDisabled = false, verticalScrollDisabled = true, listener = scrollListener, } --Create a Rectangle local myRectangle1 = display.newRect( 50, 420, 50, 50 ) myRectangle1:setFillColor( 1, 0.2, 0.2 ) local myRectangle2 = display.newRect( 120, 420, 50, 50 ) myRectangle2:setFillColor( 1, 0.2, 0.2 ) local myRectangle3 = display.newRect( 190, 420, 50, 50 ) myRectangle3:setFillColor( 1, 0.2, 0.2 ) local myRectangle4 = display.newRect( 260, 420, 50, 50 ) myRectangle4:setFillColor( 1, 0.2, 0.2 ) local myRectangle5 = display.newRect( 330, 420, 50, 50 ) myRectangle5:setFillColor( 1, 0.2, 0.2 ) local myRectangle6 = display.newRect( 400, 420, 50, 50 ) myRectangle6:setFillColor( 1, 0.2, 0.2 ) local myRectangle7 = display.newRect( 470, 420, 50, 50 ) myRectangle7:setFillColor( 1, 0.2, 0.2 ) local myRectangle8 = display.newRect( 540, 420, 50, 50 ) myRectangle8:setFillColor( 1, 0.2, 0.2 ) local myRectangle9 = display.newRect( 610, 420, 50, 50 ) myRectangle9:setFillColor( 1, 0.2, 0.2 ) scrollView:insert( myRectangle1 ) scrollView:insert( myRectangle2 ) scrollView:insert( myRectangle3 ) scrollView:insert( myRectangle4 ) scrollView:insert( myRectangle5 ) scrollView:insert( myRectangle6 ) scrollView:insert( myRectangle7 ) scrollView:insert( myRectangle8 ) scrollView:insert( myRectangle9 )

Using your “step 3” i wonder what would it looks like?

Thank you

richard9 · June 30, 2014, 4:51pm

local xPos = 50 -- this is the first rectangle position local yPos = 420 -- this is the yPosition of all your rectangles for i = 1, 9 do -- you have 9 rectangles, so this means to the stuff inside 9 times -- This rectangle is local, so "myRectangle" doesn't exist outside this loop. -- instead, the rects would be scrollView[1], scrollView[2], etc. -- The (optional) first argument of any display object is the parentgroup, so you -- can save using the :insert() command later. local myRectangle = display.newRect(scrollView, xPos, yPos, 50, 50) myRectangle:setFillColor(1, 0.2, 0.2) -- Now you need to increment the xPos so each rectangle is not on the same spot xPos = xPos + 70 end

babzzz · July 3, 2014, 4:11am

Hey Richard9,

Sorry for the late reply.

Really appreciated what you didi for me

It works!

Thanks

babzzz · July 4, 2014, 6:08am

Richard9,

I was wondering if you can help me on that one.

I would like to replace the rectangle by images…

my actual code (working) :

--Create a Rectangle local xPos = 50 -- this is the first rectangle position local yPos = 0 -- this is the yPosition of all your rectangles for i = 1, 10 do -- you have 9 rectangles, so this means to the stuff inside 9 times -- This rectangle is local, so "myRectangle" doesn't exist outside this loop. -- instead, the rects would be scrollView[1], scrollView[2], etc. -- The (optional) first argument of any display object is the parentgroup, so you -- can save using the :insert() command later. local myRectangle = display.newRect(xPos, yPos, 91, 122) scrollView:insert( myRectangle ) myRectangle:setFillColor(1, 0.2, 0.2) myRectangle.anchorY = 1 myRectangle.y = display.actualContentHeight + display.screenOriginY -- Now you need to increment the xPos so each rectangle is not on the same spot xPos = xPos + 100 end &nbsp;

But how should i add series of images…let’s say 10 (same as our rectangle exemple)?

Should i name my images “image01.png, image02.png…”

Also i think that this line :

local myRectangle = display.newRect(xPos, yPos, 91, 122)&nbsp;

will change into :

local myRectangle = display.newImageRect(??????????, width, height)&nbsp;

Thank you for your time

richard9 · July 4, 2014, 3:13pm

Well you have two options

Name them sequentially like you said. inside the loop you would use:

local myRectangle = display.newImageRect(scrollView, “image”…i, 91, 122)

“…” is a way to join two strings together. So “dude”…1 will appear as “dude1”. In this case i is a number from the loop.

Name them whatever you want, but put them in a table.

– somewhere before the loop local images = {} images[1] = “coolrect.png” images[2] = “otherimg.png” images[3] = “bluedog.png” – etc… – then later, inside the loop local myRectangle = display.newImageRect(scrollView, images[i], 91, 122)

I prefer #2 because you can specify image sizes too!

local images = {} -- tables can contain tables too! images[1] = { file = "supercool.png", width = 121, height = 244 } images[2] = { file = "homersimpson.png", width=22, height=92 } -- then later, in the loop local myRectangle = display.newImageRect(scrollView, images[i].file, images[i].width, images[i].height)

babzzz · July 5, 2014, 12:22am

Hi Richar9,

Thank you for your reply.

This is not working…i have a error in the corona simulator :

File: ERROR

ERROR: table expected. If this is a function call, you might have used ‘.’ instead of ‘:’

stack traceback:

[C]: in function ‘insert’

?: in function ‘insert’

main.lua:74: in main chunk

Here is the code for option 1 ( i named my images “image01.png, image02.png”):

display.setStatusBar( display.HiddenStatusBar ) local backok = display.newImageRect( "bg.jpg", 360, 570 ) backok.x = display.contentCenterX backok.y = display.contentCenterY local backslide = display.newRect( 0, 396, 0, 173 ) backslide:setFillColor( .365, .808, .773 ) backslide.anchorY = 1 backslide.width = display.contentWidth backslide.x = display.contentCenterX backslide.y = display.actualContentHeight + display.screenOriginY local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = -25, width = display.contentWidth, height = display.contentHeight, bottomPadding = 0, id = "onBottom", horizontalScrollDisabled = false, verticalScrollDisabled = true, listener = scrollListener, hideBackground = true, } --Create a Rectangle local xPos = 50 -- this is the first rectangle position local yPos = 0 -- this is the yPosition of all your rectangles for i = 1, 10 do -- you have 9 rectangles, so this means to the stuff inside 9 times -- This rectangle is local, so "myRectangle" doesn't exist outside this loop. -- instead, the rects would be scrollView[1], scrollView[2], etc. -- The (optional) first argument of any display object is the parentgroup, so you -- can save using the :insert() command later. local myRectangle = display.newImageRect(scrollView, "image"..i, 91, 122) scrollView:insert( myRectangle ) myRectangle:setFillColor(1, 0.2, 0.2) myRectangle.anchorY = 1 myRectangle.y = display.actualContentHeight + display.screenOriginY -- Now you need to increment the xPos so each rectangle is not on the same spot xPos = xPos + 100 end local groupslide = display.newGroup() groupslide:insert( backslide ) groupslide:insert( scrollView ) groupslide.alpha = 0 local myRoundedRect = display.newRoundedRect( 150, 150, 100, 50, 12 ) myRoundedRect.strokeWidth = 3 myRoundedRect:setFillColor( 0.5 ) myRoundedRect:setStrokeColor( 1, 0, 0 )

And for option 2 :

File: ERROR

ERROR: table expected. If this is a function call, you might have used ‘.’ instead of ‘:’

stack traceback:

[C]: in function ‘insert’

?: in function ‘insert’

main.lua:78: in main chunk

display.setStatusBar( display.HiddenStatusBar ) local backok = display.newImageRect( "bg.jpg", 360, 570 ) backok.x = display.contentCenterX backok.y = display.contentCenterY local backslide = display.newRect( 0, 396, 0, 173 ) backslide:setFillColor( .365, .808, .773 ) backslide.anchorY = 1 backslide.width = display.contentWidth backslide.x = display.contentCenterX backslide.y = display.actualContentHeight + display.screenOriginY local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = -25, width = display.contentWidth, height = display.contentHeight, bottomPadding = 0, id = "onBottom", horizontalScrollDisabled = false, verticalScrollDisabled = true, listener = scrollListener, hideBackground = true, } local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" --Create a Rectangle local xPos = 50 -- this is the first rectangle position local yPos = 0 -- this is the yPosition of all your rectangles for i = 1, 10 do -- you have 9 rectangles, so this means to the stuff inside 9 times -- This rectangle is local, so "myRectangle" doesn't exist outside this loop. -- instead, the rects would be scrollView[1], scrollView[2], etc. -- The (optional) first argument of any display object is the parentgroup, so you -- can save using the :insert() command later. local myRectangle = display.newImageRect(scrollView, images[i], 91, 122) scrollView:insert( myRectangle ) myRectangle:setFillColor(1, 0.2, 0.2) myRectangle.anchorY = 1 myRectangle.y = display.actualContentHeight + display.screenOriginY -- Now you need to increment the xPos so each rectangle is not on the same spot xPos = xPos + 100 end local groupslide = display.newGroup() groupslide:insert( backslide ) groupslide:insert( scrollView ) groupslide.alpha = 0 local myRoundedRect = display.newRoundedRect( 150, 150, 100, 50, 12 ) myRoundedRect.strokeWidth = 3 myRoundedRect:setFillColor( 0.5 ) myRoundedRect:setStrokeColor( 1, 0, 0 )

Thank you for your time.

richard9 · July 5, 2014, 2:33pm

Well the really obvious problem here is that your loop has a count of 10 but there are only 3 images. So it’s trying to call images[4] but it doesn’t exist.

If you only want to loop as many times as you have images, then…

for i = 1, #images do -- #images is the total count of the images table.

Also, I would remove scrollView from the display.newImageRect call. Just let the second line do its job (the insert line)

babzzz · July 6, 2014, 5:38am

Hi Richar9,

Thank you for that, It is my bad! I should have been more careful about this!!

Now it is working but…

I’m loosing xPos, yPos inside :

local myRectangle = display.newRect(xPos, yPos, 91, 122)

I have now :

local myRectangle = display.newImageRect(images[i], 91, 122)

Trying to add :

local myRectangle = display.newImageRect(xPos, yPos, images[i], 91, 122)

or

local myRectangle = display.newImageRect(images[i], xPos, yPos, 91, 122)

doesn’t work.

Thank you for your time. I am really learning a lot with your methods.

babzzz · July 7, 2014, 11:04am

i still didn’t find anything to fix this issue…this is really strange!

richard9 · July 7, 2014, 12:56pm

Look at the documentation for newImageRect. newImageRect does not support x/y inside the original call. So leave it out of object creation and then set .x and .y separately.

local img = display.newImageRect(parent, file, width, height) img.x = xPos img.y = yPos

babzzz · July 9, 2014, 4:13am

Thanks for everything. It is working now.

Since you are a marvellous pro i would like to ask you something

I’m having problem understanding “ultimate config.lua”

you can see a discussion beet wen me and Rob here : http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/#comment-154531

It is the 4/5 last comments.

I’m explaining you :

i’ve create photoshop file with 5 buttons and as an exemle each of these button are 200X100

Rob told me that this :

button01.png ( 50X25)
button01@2x.png (100X50)
button01@4x.png (200X100) —> my photoshop size

is ok, but it doesn’t work!!

Also i asked him to have 2png instead of 3 and he told me that i should change :

"then you can change your width and height in the config.lua to not be based on 320 x 570 and 360 x 480 sizes and instead go to the 2x sizes as the default::

640×1140 and 720×960. At that point, you can loose the @4x and just have normal and @2x where in your example normal would be 100×50 and @2x would be 200×100"

It is working fine on Ipad Retina and Ipad but it still too big on Iphone 4 and Iphne5

Do i need to use ultimate config.lua or would it be ok to use basic config.lua :

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 60, imageSuffix = { ["@2x"] = 2, } }, }

Thanks

richard9 · July 9, 2014, 3:28pm

My guess is that you’d want to use the ultimate config.lua method because there is a substantial chance in September that the iPhone 6 uses @3x. It’s much easier to work @2x,@3x,@4x than @1.5x/@2x.

If you want to use @2x as default, then:

All of your @2x assets should no longer have @2x on them. So your 100x50 button has no @ mark while the 200x100 is @2x
In config.lua, width and height would be set to 2x whatever value they were originally.
The imageSuffix table should only have the @2x entry and it should have whatever number it used to. (So what you have above looks ok)

Personally I would rather use the ultimate config.lua method. I mean you could just use that, remove the @4x line, and update the resolution numbers and it would probably be fine…