Rain Animation

Games
#1

Hello

Is there a sample that show how to make a rain animation like this sample: http://www.toxiclab.org/tutorial.asp?ID=151

also how can I can adjust the screen brightness with the simulator [import]uid: 89131 topic_id: 19005 reply_id: 319005[/import]

#2

the flash example you posted works without any scripting, it’s timeline based only.

for a similar - scripted - effect, you should take a look to the code sharing section and search for “particle” effects.

as for the drop-on-ground animation you could use vector objects (display.newCircle) or sprite animations. vector objects are more generic and allow variations of the animation (speed, size, duration) while sprite animations allow better fps-performance on higher object counts…

-finefin
[import]uid: 70635 topic_id: 19005 reply_id: 73200[/import]

#3

You should make an oval shaped white Outline that is blurred and transition it.

You can use simply transition.to(ovalShape,{time=2000,xScale=2,yScale=2,alpha=0,onComplete=function() ovalShape:removeSelf() end}) for each particle when it hits the fake-ground

(or even better make a little timer that will call a function to create 3 of these ovalShapes and transition them!)
[import]uid: 13097 topic_id: 19005 reply_id: 73214[/import]

#4

I followed your advices and come out with this:

display.setStatusBar( display.HiddenStatusBar )  
   
local background = display.newImage("countrySide.jpg")  
local function itsRaining()  
 local rainType = math.random(1,3)  
 local ovalShape = display.newImage("Oval.png")  
 local xPostion = math.random(0,48) \* 20  
 ovalShape.x = xPostion; ovalShape.y = 0  
 ovalShape:rotate(45)  
  
 local function removeRainDrop(obj)  
 local myCircle = display.newCircle( obj.x, obj.y, 1 )  
 myCircle:setFillColor(204,255,255)  
 myCircle:setStrokeColor(153,204,255)   
 myCircle.strokeWidth = 1  
 myCircle:scale(1,0.25)  
  
 --ovalShape:removeSelf()  
 transition.to(obj,{time=00,xScale=2,yScale=2,alpha=0,onComplete=function() ovalShape:removeSelf() end})   
 transition.to(myCircle,{time=500,xScale=4,yScale=1,alpha=1,onComplete=function() myCircle:removeSelf() end})   
 end  
 local toY = math.random(0,64)  
 transition.to(ovalShape,{time=(toY \* 100)/1.5,x=ovalShape.x - 200,y=toY \* 10,alpha=1,onComplete=removeRainDrop})  
end  
Runtime:addEventListener("enterFrame",itsRaining)

Do you have any suggestion for better visual? [import]uid: 89131 topic_id: 19005 reply_id: 73874[/import]

#5

try to add easing to your transitions
https://developer.anscamobile.com/reference/animation/easing [import]uid: 70635 topic_id: 19005 reply_id: 74528[/import]

#6

Cool, i didn’t think about accelerating the motion.

If there is any other advices, please let me know :slight_smile:

Thank you [import]uid: 89131 topic_id: 19005 reply_id: 74605[/import]