Hey all, I don’t know if I’m saying this with the right terms but what I’m trying to say is whether a dynamic background, one that changes at random times, is possible with Corona sdk? If it can be done, what is the best way of doing this and with smooth transitions?
Cheers
Corona caches png/jpg files, so reloading a background picture won’t work (it stores the first copy and just keeps using that).
A popular approach is to create a “basic” background that has all the constant / unchanging elements in it, put it in a group, and then load the optional/changing stuff and put it in the group in front of the basic background. You can set things visible/invisible and use transition.to to make things appear as you like. The “basic” background can also be done in several images layered on top of each other, and moved slightly different from each other to fake perspective when the user moves as well…
Essentially, you’ll have a background group that you turn things on and off within to make it dynamic. Since everything is in the same group, a single x,y change will also scroll the bg as well.
Thanks for the reply, I see what your saying but what I’m essentially trying to do is make a daytime background that turns into a night time image over time. Can that be done with the method you mentioned? sorry I failed to mention that before.
Cheers
Absolutely, and probably 50 different ways too.
For the sky itself you could use a big blue rectangle, and change the rectangles color as time passes. For the sun or clouds you could use smaller graphics that are moved over time. There’s tons of ways to deal with stars.
It sounds like you’ll need to break down your scene into all it’s elements determining ways to achieve all the effects you want… (Which is of course a good thing to do before you write too much of the app…)
Thats great, thanks for the help. Just out of curiosity, what are the other way of doing it? incase I run into problems? Not all 50 as you mentioned but instead maybe another good way of doing it.
I haven’t done a sidescroller or something with serious bg layering with corona yet (just done one scrolling app with layered bg so far, and no day/night changes in that one). The app was graphically pretty simple, so I got away with the blue rect for the sky with clouds moving on top and a “town” in the foreground (moving separately as the user scrolled). Nothing like dynamic night though (although I could have easily changed the sky rects color to simlaute that part).
But making the town go darker would be a different challenge… Perhaps the new filter effects (there’s a brightness filter for example).
I’m sure there are dozens of people in the community that can throw out ideas on the various challenges in getting the effects you want…
Maybe another targetted question in the forums with some specifics on the scene, and the specific effects you want will attract some users?
I see. Well thanks for those useful tips, I definitely got an idea of how to go about doing this now .
cheers
Corona caches png/jpg files, so reloading a background picture won’t work (it stores the first copy and just keeps using that).
A popular approach is to create a “basic” background that has all the constant / unchanging elements in it, put it in a group, and then load the optional/changing stuff and put it in the group in front of the basic background. You can set things visible/invisible and use transition.to to make things appear as you like. The “basic” background can also be done in several images layered on top of each other, and moved slightly different from each other to fake perspective when the user moves as well…
Essentially, you’ll have a background group that you turn things on and off within to make it dynamic. Since everything is in the same group, a single x,y change will also scroll the bg as well.
Thanks for the reply, I see what your saying but what I’m essentially trying to do is make a daytime background that turns into a night time image over time. Can that be done with the method you mentioned? sorry I failed to mention that before.
Cheers
Absolutely, and probably 50 different ways too.
For the sky itself you could use a big blue rectangle, and change the rectangles color as time passes. For the sun or clouds you could use smaller graphics that are moved over time. There’s tons of ways to deal with stars.
It sounds like you’ll need to break down your scene into all it’s elements determining ways to achieve all the effects you want… (Which is of course a good thing to do before you write too much of the app…)
Thats great, thanks for the help. Just out of curiosity, what are the other way of doing it? incase I run into problems? Not all 50 as you mentioned but instead maybe another good way of doing it.
I haven’t done a sidescroller or something with serious bg layering with corona yet (just done one scrolling app with layered bg so far, and no day/night changes in that one). The app was graphically pretty simple, so I got away with the blue rect for the sky with clouds moving on top and a “town” in the foreground (moving separately as the user scrolled). Nothing like dynamic night though (although I could have easily changed the sky rects color to simlaute that part).
But making the town go darker would be a different challenge… Perhaps the new filter effects (there’s a brightness filter for example).
I’m sure there are dozens of people in the community that can throw out ideas on the various challenges in getting the effects you want…
Maybe another targetted question in the forums with some specifics on the scene, and the specific effects you want will attract some users?
I see. Well thanks for those useful tips, I definitely got an idea of how to go about doing this now .
cheers
I have a SailBoat game that was using a static image for the background. I wanted to try to get the water to move so I tried several things. I ended up using the same image 4 times, each time with a slightly different Width and Height and X and Y placement. I set each image Alpha to be .2 and then I use the transition library to slowly move the images. After tweaking the speed, placement and size I finally have what looks random ocean waves. I am very pleased with how it turned out.
You can check out the effect and test out my game here:
https://dl.dropboxusercontent.com/u/97869025/SailboatBattle.apk
I am a few weeks from publishing the game so please let me know if you find any bugs
Chris Rennie
Here’s the code I use for the effect.
local background = display.newImageRect( “ocean.png”, display.contentWidth+100, display.contentHeight+100 )
background:setReferencePoint( display.TopLeftReferencePoint )
background.x, background.y = -50, -50
background.alpha=.2
local background2 = display.newImageRect( “ocean.png”, display.contentWidth+140, display.contentHeight+140 )
background2:setReferencePoint( display.TopLeftReferencePoint )
background2.x, background2.y = -50, -50
background2.alpha=.2
local background3 = display.newImageRect( “ocean.png”, display.contentWidth+180, display.contentHeight+180 )
background3:setReferencePoint( display.TopLeftReferencePoint )
background3.x, background3.y = -60, -50
background3.alpha=.2
local background4 = display.newImageRect( “ocean.png”, display.contentWidth+200, display.contentHeight+200 )
background4:setReferencePoint( display.TopLeftReferencePoint )
background4.x, background4.y = -60, -50
background4.alpha=.2
local xx=20
local yy=10
function backListener(e)
xx= -xx
yy=-yy
transition.to(background, {time=4600,x=-50+xx})
transition.to(background2, {time=5000,x=-50-xx})
transition.to(background3, {time=4500,y=-50+yy})
transition.to(background4, {time=5000,y=-50-yy})
timer.performWithDelay(5000, backListener)
end
Hi ebookren, thanks for that suggestion it sounds very good. I can’t open the .apk file on my mac however.
Apk only works on an android. I posted the code so you can test it out , all you need is the ocean.png
Oh ok. thanks for that, i will check it out.
Thanks again
I have a SailBoat game that was using a static image for the background. I wanted to try to get the water to move so I tried several things. I ended up using the same image 4 times, each time with a slightly different Width and Height and X and Y placement. I set each image Alpha to be .2 and then I use the transition library to slowly move the images. After tweaking the speed, placement and size I finally have what looks random ocean waves. I am very pleased with how it turned out.
You can check out the effect and test out my game here:
https://dl.dropboxusercontent.com/u/97869025/SailboatBattle.apk
I am a few weeks from publishing the game so please let me know if you find any bugs
Chris Rennie
Here’s the code I use for the effect.
local background = display.newImageRect( “ocean.png”, display.contentWidth+100, display.contentHeight+100 )
background:setReferencePoint( display.TopLeftReferencePoint )
background.x, background.y = -50, -50
background.alpha=.2
local background2 = display.newImageRect( “ocean.png”, display.contentWidth+140, display.contentHeight+140 )
background2:setReferencePoint( display.TopLeftReferencePoint )
background2.x, background2.y = -50, -50
background2.alpha=.2
local background3 = display.newImageRect( “ocean.png”, display.contentWidth+180, display.contentHeight+180 )
background3:setReferencePoint( display.TopLeftReferencePoint )
background3.x, background3.y = -60, -50
background3.alpha=.2
local background4 = display.newImageRect( “ocean.png”, display.contentWidth+200, display.contentHeight+200 )
background4:setReferencePoint( display.TopLeftReferencePoint )
background4.x, background4.y = -60, -50
background4.alpha=.2
local xx=20
local yy=10
function backListener(e)
xx= -xx
yy=-yy
transition.to(background, {time=4600,x=-50+xx})
transition.to(background2, {time=5000,x=-50-xx})
transition.to(background3, {time=4500,y=-50+yy})
transition.to(background4, {time=5000,y=-50-yy})
timer.performWithDelay(5000, backListener)
end
Hi ebookren, thanks for that suggestion it sounds very good. I can’t open the .apk file on my mac however.
Apk only works on an android. I posted the code so you can test it out , all you need is the ocean.png