Ideally I have a background picture fit to the screen size and multiple objects on the screen (and off screen) that the user can scroll down and view. The scrollView widget seems to be working well but no matter if I code for the object first or the background first, the background seems to always be the top visual layer. Does anyone have some advice to reverse this?
Thanks in advance!
[lua]local widget = require “widget”
local scroller = widget.newScrollView{
– width = 320,
--height = 480,
scrollWidth = 700,
scrollHeight = 1000
}
scroller.content.horizontalScrollDisabled = true
local obj = display.newImage( “pic1.png”)
obj.x = 320
obj.y = 400
scroller:insert( obj )
local background = display.newImageRect (“background.png”, display.contentWidth, display.contentHeight/3)
background.x = display.contentWidth/2
background.y = display.contentHeight/2
[/lua]
Are you using storyboard or some other screen manager?
Do you want the background to be part of the scrollView?
This will eventually turn into an information screen for the user that the user can access from the main screen. Right now I’m trying to get the basics down and working before I start working with a screen manager. Ideally I want this background to be “fixed” as objects can scroll on top of this background image. This was my solution to get rid of the default white screen without having to stretch my background image to twice the display.contentHeight for example.
Can anyone add to this please? In case my description was hard to understand, I essentially want to have objects placed on the screen that won’t have the default white background, instead a picture of my choosing.
Thanks in advance!
If you don’t do anything else, by default Corona SDK stacks things with the first object you create is the background and the last thing you create is the foremost item.
In your code above, your background is in front of the scrollView. Create the background first then your scrollView.
Thanks for guiding me Rob, so here are the things I tried that led to the answer:
So I tried moving the background in front of scrollView, scroll view overrides it’s own white screen over my background.
Adding background to scroller allows you to put it in behind other objects but this isn’t optimal because now your background scrolls around as well.
This (I’m assuming the older version) says to put background in param with a string. It didn’t want to work for me: http://jp.anscamobile.com/dev/reference/index/widgetnewscrollview/index.html
And then I found the newer version which gave me the option of removing the default white background layer added by the widget. http://docs.coronalabs.com/api/library/widget/newScrollView.html
So here is my updated code that works:
[lua]
local background = display.newImageRect (“background.png”, display.contentWidth, display.contentHeight/3)
background.x = display.contentWidth/2
background.y = display.contentHeight/2
local widget = require “widget”
local scroller = widget.newScrollView{
– width = 320,
--height = 480,
scrollWidth = 700,
scrollHeight = 1000,
hideBackground = true
}
scroller.content.horizontalScrollDisabled = true
local obj = display.newImage( “pic1.png”)
obj.x = 150
obj.y = 290
scroller:insert( obj )
[/lua]
The hideBackground=true should make your scrollView transparent and then whatever is behind it would show through.
You can try:
backgroundColor = { 255, 255, 255, 0}
and see if that makes a difference.
[lua]local widget = require “widget”
local scroller = widget.newScrollView{
– width = 320,
--height = 480,
scrollWidth = 700,
scrollHeight = 1000
}
scroller.content.horizontalScrollDisabled = true
local obj = display.newImage( “pic1.png”)
obj.x = 320
obj.y = 400
scroller:insert( obj )
local background = display.newImageRect (“background.png”, display.contentWidth, display.contentHeight/3)
background.x = display.contentWidth/2
background.y = display.contentHeight/2
[/lua]
Are you using storyboard or some other screen manager?
Do you want the background to be part of the scrollView?
This will eventually turn into an information screen for the user that the user can access from the main screen. Right now I’m trying to get the basics down and working before I start working with a screen manager. Ideally I want this background to be “fixed” as objects can scroll on top of this background image. This was my solution to get rid of the default white screen without having to stretch my background image to twice the display.contentHeight for example.
Can anyone add to this please? In case my description was hard to understand, I essentially want to have objects placed on the screen that won’t have the default white background, instead a picture of my choosing.
Thanks in advance!
If you don’t do anything else, by default Corona SDK stacks things with the first object you create is the background and the last thing you create is the foremost item.
In your code above, your background is in front of the scrollView. Create the background first then your scrollView.
Thanks for guiding me Rob, so here are the things I tried that led to the answer:
So I tried moving the background in front of scrollView, scroll view overrides it’s own white screen over my background.
Adding background to scroller allows you to put it in behind other objects but this isn’t optimal because now your background scrolls around as well.
This (I’m assuming the older version) says to put background in param with a string. It didn’t want to work for me: http://jp.anscamobile.com/dev/reference/index/widgetnewscrollview/index.html
And then I found the newer version which gave me the option of removing the default white background layer added by the widget. http://docs.coronalabs.com/api/library/widget/newScrollView.html
So here is my updated code that works:
[lua]
local background = display.newImageRect (“background.png”, display.contentWidth, display.contentHeight/3)
background.x = display.contentWidth/2
background.y = display.contentHeight/2
local widget = require “widget”
local scroller = widget.newScrollView{
– width = 320,
--height = 480,
scrollWidth = 700,
scrollHeight = 1000,
hideBackground = true
}
scroller.content.horizontalScrollDisabled = true
local obj = display.newImage( “pic1.png”)
obj.x = 150
obj.y = 290
scroller:insert( obj )
[/lua]
The hideBackground=true should make your scrollView transparent and then whatever is behind it would show through.
You can try:
backgroundColor = { 255, 255, 255, 0}
and see if that makes a difference.