Need effect to animate bonus mode selection

Solar2D General Questions/Discussion
#1

Hi community,

I am quite new to game development and would like to implement kind of a “one-columned-slot-machine” or an horizontal image carousel.

I have some bonus modes and want to animate the selection of these modes. A user can tap on a bonus box and then the animation should start.

The animation should contain images with the bonus mode name and it should be possible to start the animation at a random image, spin it at a certain speed and stop it after a certain time at a given image/index.

Do you have any links/examples/tipps how to realize this problem?

#2

Hello,

the widget " widget.newPickerWheel() " seems to looks like what you want, but the selection animation are string or number.

The spin-speed is not controlled.

local columnsData={   {align="right",     width=100,     startIndex=math.random(10),     labelPadding=0,     labels={"a","b","c","d","e","f","g","h","i","BONUS"}     }   }    local chooser=widget.newPickerWheel({   x=display.contentCenterX,y=display.contentCenterY,   columns=columnsData,     }) timer.performWithDelay(3000,function()     local myChoosenIndex=8     chooser:selectValue(1,myChoosenIndex)     end)

Yvan.

#3

Thanks Yvan but this was not what I was looking for  :wink:

Meanwhile I implemented my own solution and thought it could be useful for any other Corona developer so I published my solution on GitHub:

https://github.com/MrMojo86/CoronaImageCarousel

See animation:

Kcq2dy8E4RQ2s.gif

Code uses 4 images, only 3 are visible. Animation can be stopped and started programmatically.

#4

Hi,

I have write quite the same program, but fewer lines

local g=display.newGroup() g.x,g.y=display.contentCenterX,display.contentCenterY local tab={} local rdn=math.random(4) for k=1,4 do   tab[1+(k+rdn)%4]="ims/0"..k..".png" //I choose 4 paths of the image, randomly end local up=display.newImageRect(g,tab[1],200,100) up.y=-80 up.xScale,up.yScale=0.6,0.6 local middle=display.newImageRect(g,tab[2],200,100) local down=display.newImageRect(g,tab[3],200,100) down.y=80 down.xScale,down.yScale=0.6,0.6 local hide=display.newImageRect(g,tab[4],200,100) hide.y=40 hide.xScale,hide.yScale=0.6,0.6 hide.alpha=0 //The four image, plus the hide image called "hide" local vitesse=500 //vitesse for time :D local function spin()     local a,b,c,d //that parameter is useFull to switch place object on the group g      transition.scaleTo(g[1],{time=vitesse, y=0, alpha=0,transition=easing.outCirc,       onComplete=function(u) u.y=80 ;d=u end})   transition.scaleTo(g[2],{time=vitesse, y=-80, xScale=0.6, yScale=0.6,       onComplete=function(u) a=u end})   transition.scaleTo(g[3],{time=vitesse, y=0, xScale=1, yScale=1,       onComplete=function(u) b=u end})   transition.scaleTo(g[4],{time=vitesse, y=80, alpha=1, xScale=0.6, yScale=0.6,       transition=easing.inExpo,       onComplete=function(u) c=u end})      timer.performWithDelay(vitesse+500,     function() g:insert(a);g:insert(b);g:insert(c);g:insert(d) end)   //here I switch end timer.performWithDelay(2\*vitesse,spin,0)

There is no border on the bottom of the image, but it’s very the same lol.

For transition, you have also transition.scaleTo() :smiley:

Good night.

#5

Hello,

the widget " widget.newPickerWheel() " seems to looks like what you want, but the selection animation are string or number.

The spin-speed is not controlled.

local columnsData={   {align="right",     width=100,     startIndex=math.random(10),     labelPadding=0,     labels={"a","b","c","d","e","f","g","h","i","BONUS"}     }   }    local chooser=widget.newPickerWheel({   x=display.contentCenterX,y=display.contentCenterY,   columns=columnsData,     }) timer.performWithDelay(3000,function()     local myChoosenIndex=8     chooser:selectValue(1,myChoosenIndex)     end)

Yvan.

#6

Thanks Yvan but this was not what I was looking for  :wink:

Meanwhile I implemented my own solution and thought it could be useful for any other Corona developer so I published my solution on GitHub:

https://github.com/MrMojo86/CoronaImageCarousel

See animation:

Kcq2dy8E4RQ2s.gif

Code uses 4 images, only 3 are visible. Animation can be stopped and started programmatically.

#7

Hi,

I have write quite the same program, but fewer lines

local g=display.newGroup() g.x,g.y=display.contentCenterX,display.contentCenterY local tab={} local rdn=math.random(4) for k=1,4 do   tab[1+(k+rdn)%4]="ims/0"..k..".png" //I choose 4 paths of the image, randomly end local up=display.newImageRect(g,tab[1],200,100) up.y=-80 up.xScale,up.yScale=0.6,0.6 local middle=display.newImageRect(g,tab[2],200,100) local down=display.newImageRect(g,tab[3],200,100) down.y=80 down.xScale,down.yScale=0.6,0.6 local hide=display.newImageRect(g,tab[4],200,100) hide.y=40 hide.xScale,hide.yScale=0.6,0.6 hide.alpha=0 //The four image, plus the hide image called "hide" local vitesse=500 //vitesse for time :D local function spin()     local a,b,c,d //that parameter is useFull to switch place object on the group g      transition.scaleTo(g[1],{time=vitesse, y=0, alpha=0,transition=easing.outCirc,       onComplete=function(u) u.y=80 ;d=u end})   transition.scaleTo(g[2],{time=vitesse, y=-80, xScale=0.6, yScale=0.6,       onComplete=function(u) a=u end})   transition.scaleTo(g[3],{time=vitesse, y=0, xScale=1, yScale=1,       onComplete=function(u) b=u end})   transition.scaleTo(g[4],{time=vitesse, y=80, alpha=1, xScale=0.6, yScale=0.6,       transition=easing.inExpo,       onComplete=function(u) c=u end})      timer.performWithDelay(vitesse+500,     function() g:insert(a);g:insert(b);g:insert(c);g:insert(d) end)   //here I switch end timer.performWithDelay(2\*vitesse,spin,0)

There is no border on the bottom of the image, but it’s very the same lol.

For transition, you have also transition.scaleTo() :smiley:

Good night.