In this tutorial you’ll discover how to create a moving sunbeam effect in your Corona SDK project.
First, watch the video to see what it looks like:
The sample project actually looks better than in the video because I did a little tweaking after recording that.
Here’s where you can grab the sample project including graphics and everything:
Download Sunbeam Sample Project
The secret is a graphic of a single sunbeam that’s faded in, moved, and faded out. And by overlapping the one that’s leaving and the one that’s coming in, you get a really cool effect.
Here’s the code needed to create the sunbeam effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
local crawlspaceLib = require("crawlspaceLib") display.setStatusBar(display.HiddenStatusBar) local background = display.newImage("eforest04.png" ) function spawnSunbeam() local sunbeam = display.newImage("sunbeam.png" ) sunbeam.x = math.random(100, 400) sunbeam.y = centerY sunbeam:rotate( 4 ) sunbeam:scale(3, 1.5) local function ditchSunbeam(obj) obj:fadeOut(2000, true) end local function moveIt() transition.to ( sunbeam, {time=2000, x=sunbeam.x + math.random(-50, 50 ), onComplete=ditchSunbeam } ) end sunbeam:fadeIn(2000, moveIt) end timer.performWithDelay ( 1900, spawnSunbeam, -1 ) |
Not much there, eh? And there is a line in there you don’t really need — I just put the rotate() in so I wouldn’t have to go edit my sunbeam graphic again (is that lazy, or what?!).
Starting at the bottom of the code we set up a timer to spawn a sunbeam every 1.9 seconds and with the last parameter set to -1 it will never end (eternal sunbeams, courtesy of me).
The spawnSunbeam() function loads the sunbeam.png file which is nothing more than a faint line, diagonal and about the height of the screen.
We set the X coordinate to a random number from 100 to 400 on the screen and the Y coordinate to the center of the screen.
If you make sure your sunbeam graphic is at the correct angle you can skip the call to rotate().
The ditchSunbeam() function just fades out the sunbeam when it’s called.
And it’s called when the transition.to in the moveIt() function is complete. The code inside moveIt() is what makes the sunbeams move across the screen. Using math.random we specify a new X coordinate that’s within 50 pixels of the starting point — we don’t want the sunbeam to skitter all the way across the screen.
And then finally, we get things started with that individual sunbeam by fading it in over 2 seconds. You can see in the Crawlspace Library fadeIn() function we’re taking advantage of the callback that happens once the object has finished fading in.
So the timer calls spawnSunbeam, which loads the graphic and then fades it in. After it’s faded in moveIt is called to make it glide across the screen, and when that transition is done, ditchSunbeam is called which fades out the sunbeam.
While that’s ben going on the timer has popped out another sunbeam and the circle of life — er, sunbeams — continues.
If you don’t need sunbeams you can use the same technique (with some tweaking) to make spotlights shining around (Hollywood premier or prison break), the aurora borealis (northern lights) in the sky, etc.
Now that is, most definitely, art! Thanks for sharing. 🙂
i am download now , Thanks for sharing. 😉
This is pretty cool. Great work. Wouldn’t mind creating my own fish tank “screensaver” 🙂
HI, nice effect but crawlspace messes up my app so I did a quick rewrite of the code so its now pure corona.
function spawnSunbeam()
local sunbeam = display.newImage(“images/sunbeam.png” )
sunbeam.x = math.random(100, 400)
sunbeam.y = screenW/2
sunbeam:rotate( 4 )
sunbeam:scale(3, 1.5)
group:insert(sunbeam)
local function ditchSunbeam(obj)
local removeThis = function()
obj:removeSelf();
end
transition.to(obj,{alpha=0,time=2000, onComplete=removeThis})
end
local function moveIt()
transition.to ( sunbeam, {time=2000, x=sunbeam.x + math.random(-50, 50 ), onComplete=ditchSunbeam } )
end
–sunbeam:fadeIn(2000, moveIt)
transition.to(sunbeam,{alpha=1,time=2000, onComplete=moveIt})
end
Nice! Sorry the comments section won’t format code correctly, but anyone should be able to copy that out and use it.
Thanks for the contribution, Joakim.
Jay
I’m using the cleaned up Corona code and using this in my intro. The intro goes into a menu that uses scenes. Every scene uses the sunbeam. Is there a way to keep the sunbeam within just the intro and also when the menu is used the app gets “stuck” at :
local function moveIt()
transition.to ( sunbeam, {time=2000, x=sunbeam.x + math.random(-50, 50 ), onComplete=ditchSunbeam } )
Corona outputs
Runtime error
attempt to perform arithmetic on field ‘x’
stack traceback:
output multiple: 280 1
It seems as if I use the menu too frequently the code gets overwhelmed and can’t catch up. THat or a timer needs modified. Could you help? I’m using director.
You have a great talent awesome Job.
As a follow up I think I’m starting to understand that every local I use sometimes if it refers director or library with vars and mathmatics, etc, you call on those functions to do with what you want to those said locals. Back to my issue the
is producing a error when I use my menu buttons to
As before I believe the transition.to is applying the beam to every scene and overwhelmes the app. I could be wrong. I just don’t know where to lay the code in my intro to not effect the other scenes. Thank you, your guideince is appreciated and I’m learning about corona more and more everyday from you guys and girls.Thank you.