Android Question How to animate a ball in bingo game

EduardoElias

Well-Known Member
Licensed User
Longtime User
Hi great people!

I need to make one animation only in a casino style game for that center ball:

painel cap da hora s.png


that is after the ball show up from nowhere it goes rolling and getting small to the place of the small one, that all will slide to the right.

it is not a game in the normal sense, it is more a dashboard that will show what is happening.

any ideas?
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
32udhiRHkW.gif


Complete code:
B4X:
Private Sub Button1_Click
    Dim iv As ImageView
    iv.Initialize("")
    Dim xiv As B4XView = iv
    XUIViewsUtils.SetBitmapAndFill(xiv, xui.LoadBitmap(File.DirAssets, "Ball-4-icon.png"))
    Dim w = 50dip, h = 50dip As Int
    Root.AddView(iv, Root.Width / 2 - w / 2, Root.Height / 2 - h / 2, w, h)
    w = 100dip
    h = 100dip
    xiv.SetLayoutAnimated(300, Root.Width / 2 - w / 2, Root.Height / 2 - h / 2, w, h)
    Sleep(300)
    Dim tx = 50dip, ty = 50dip As Int
    xiv.SetLayoutAnimated(300, tx - w / 2,ty - h / 2, w, h)
    Sleep(500)
    w = 50dip
    h = 50dip
    xiv.SetLayoutAnimated(300, tx - w / 2,ty - h / 2, w, h)
End Sub

Image source: https://iconarchive.com/show/pool-ball-icons-by-barkerbaggies/Ball-4-icon.html
 

Attachments

  • Project.zip
    88 KB · Views: 313
Upvote 0

ilan

Expert
Licensed User
Longtime User

 
Upvote 0

ilan

Expert
Licensed User
Longtime User
relevant code may be this:

 
Upvote 0

ilan

Expert
Licensed User
Longtime User
32udhiRHkW.gif


Complete code:
B4X:
Private Sub Button1_Click
    Dim iv As ImageView
    iv.Initialize("")
    Dim xiv As B4XView = iv
    XUIViewsUtils.SetBitmapAndFill(xiv, xui.LoadBitmap(File.DirAssets, "Ball-4-icon.png"))
    Dim w = 50dip, h = 50dip As Int
    Root.AddView(iv, Root.Width / 2 - w / 2, Root.Height / 2 - h / 2, w, h)
    w = 100dip
    h = 100dip
    xiv.SetLayoutAnimated(300, Root.Width / 2 - w / 2, Root.Height / 2 - h / 2, w, h)
    Sleep(300)
    Dim tx = 50dip, ty = 50dip As Int
    xiv.SetLayoutAnimated(300, tx - w / 2,ty - h / 2, w, h)
    Sleep(500)
    w = 50dip
    h = 50dip
    xiv.SetLayoutAnimated(300, tx - w / 2,ty - h / 2, w, h)
End Sub

Image source: https://iconarchive.com/show/pool-ball-icons-by-barkerbaggies/Ball-4-icon.html

turtle library would be also good in this case, right erel?
 
Upvote 0

omarruben

Active Member
Licensed User
Longtime User
sometime ago I used Cinema4d to do a dice animation ( should be very easy to animate a rolling ball), and convert file to a GIF (using photoshop), that time GIF support was very bad in Android. Maybe now it is better with last components ... give it a try with B4XGifView
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Hi great people!

I need to make one animation only in a casino style game for that center ball:



that is after the ball show up from nowhere it goes rolling and getting small to the place of the small one, that all will slide to the right.

it is not a game in the normal sense, it is more a dashboard that will show what is happening.

any ideas?
Hi great man!

Video1.gif


B4X:
SD_Rollball1.Start
 
Last edited:
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
I would do this, I think it's the easiest way
B4X:
SD_RollingBall2.Start
SD_RollingBall2.Move(800,300,300)
Sleep(800)
SD_RollingBall2.Rebound(1.8)


Video 2.gif
 
Last edited:
Upvote 0

ilan

Expert
Licensed User
Longtime User
I would do this, I think it's the easiest way
B4X:
SD_RollingBall2.Start
SD_RollingBall2.Move(800,300,300)
Sleep(800)
SD_RollingBall2.Rebound(1.8)


View attachment 107744

this is what i meant using the turtle logic in such a scenario.
i think the turtle logic can be useful in a lot cases when you want to implement animations in your apps.

well done @Star-Dust :)
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Everything by code (excluding the fund which is an ImageView)

ezgif.com-resize.gif


B4X:
SD_RollingBall1.BallText="8"
SD_RollingBall1.MoveTo(1500,Side1.Left,Side1.Top)
Sleep(1500)
SD_RollingBall1.Reduce(500,Side1.Width,Side1.Height)
Sleep(500)
SD_RollingBall1.Stop
 
Upvote 0

EduardoElias

Well-Known Member
Licensed User
Longtime User
I would do this, I think it's the easiest way
B4X:
SD_RollingBall2.Start
SD_RollingBall2.Move(800,300,300)
Sleep(800)
SD_RollingBall2.Rebound(1.8)


sir, I am little newbie with all these libraries cited here, would you mind to give me some heads up about SD_RollingBall2 ? is is part of B4XTurtle and how can I materilize it?

appreciated...
 
Last edited:
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
sir, I am little newbie with all these libraries cited here, would you mind to give me some heads up about SD_RollingBall2 ? is is part of B4XTurtle and how can I materilize it?

appreciated...
There is no SD_RollingBall. I combined the algorithms (or rather the basic idea) of these two codes (by Erel and Ilan) by adding the light effect.


Do the same too.
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
At the request of elias, I produced a small example with a B4XLib library.
I have removed a small effect which reinforces the 3D effect because I do not wish to disclose it and with the B4Xlib libraries some are convinced that they have the right to disassemble them.

Despite this change, the result is equally satisfactory.

The ideas to make this animation were brilliantly illustrated by others, it was only necessary to put everything together
 

Attachments

  • jSample SD_RollingBall.zip
    216 KB · Views: 313
Upvote 0
Top