iOS Question need advice for a 3d issue

ilan

Expert
Licensed User
Longtime User
hello everyone

i came across a game ad on Facebook. It's a billiard game 2d but the balls that are rolling are somehow rolling in 3d so the half-colored ball and the number on it roll according to the hitting point of the white ball and that made me think how can i make such an animation.

i came across some threads about that like:


i saw more threads about it but cannot find it right now.
how would you solve such a problem?

this is the game i am talking about:


the physics and all the game itself is not a problem, i am talking ONLY about the animation of the rolling ball. it's in 3d and i cannot use 100' of sprite sheet in any direction possible and load it each time i hit the ball.

it needs to be simpler.

thanx
 

Star-Dust

Expert
Licensed User
Longtime User
Actually my thought was to completely remove the number, if the game would allow for it. As it is now it makes it look more off, and I imagined making code to deform the number and place it correctly to be overly complicated.
It might be tricky if you want to get it precise, but in the speed of movement you don't need it.

However, deforming an image is not as complex as you imagine. I worked on the 3D library without using the OS support and I understood several things about 3D.

If you divide an image into individual pixels, here the image is small because it would be only the number, each pixel with a trigonometric formula positions it on the face of the sphere, then it is easy to rotate it with well-known mathematical formulas.

You just have to have a good rendering. The more complicated thing is that
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
It might be tricky if you want to get it precise, but in the speed of movement you don't need it.

i will build a board with 1 ball and see how it performs. you may be right but i would like to see the finished result. if you look at the second part of the video i posted you can see that i also rotate the image (i removed that part from the code i posted since it was not very nice) but it is working.

i will need to see it in a real game example and will post a video here.

i really like doing games it is a lot of fun and you always learn new stuff. this is important for my motivation. even if the game won't be a success (all of mine aren't) at least i learned something new from it :)
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
i will build a board with 1 ball and see how it performs. you may be right but i would like to see the finished result. if you look at the second part of the video i posted you can see that i also rotate the image (i removed that part from the code i posted since it was not very nice) but it is working.

i will need to see it in a real game example and will post a video here.

i really like doing games it is a lot of fun and you always learn new stuff. this is important for my motivation. even if the game won't be a success (all of mine aren't) at least i learned something new from it :)
The games I created them in my Commodore 64, then I lost the passion.

I have rarely done this on other platforms
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
The games I created them in my Commodore 64, then I lost the passion.

I have rarely done this on other platforms
Can you post a video or screenshots from them?

i grew up on the commodore 64 pc and i have great memories from it.

i also own a c64 mini and sometimes play those old games. They inspire me a lot.
I love playing rambo3, bruce lee, and many more.

it is amazing how they did those game where pc hadonly 64kb memory 😁
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Unfortunately 30 years have passed, I have nothing left. All floppy disks were destroyed.

But the best thing I've done in C64 is an ASM compiler. I also started a Basic compiler but never finished
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
ok now everything is done with code (no sprites)

B4X:
#Region Project Attributes
    #MainFormWidth: 500
    #MainFormHeight: 500
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
   
    Private cnv As B4XCanvas
    'Private redBall As B4XBitmap
    Private xui As XUI
    Private timer As Timer
    Private vpw, vph As Float
    Private speedx As Float = 0
    Private speedy As Float = 0
    Private leftPos As Float
    Private topPos As Float
    Dim ballradius As Float
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
    MainForm.Show
    vpw = MainForm.RootPane.Width
    vph = MainForm.RootPane.Height
    cnv.Initialize(MainForm.RootPane)
   
'    redBall = xui.LoadBitmap(File.DirAssets,"redball.png")
    leftPos = -vpw
    topPos = -vph
    timer.Initialize("timer",1000/60)
    timer.Enabled = True
End Sub

Sub timer_Tick
    clearcnvblackbackground
    drawballwithpattern
End Sub

Sub clearcnvblackbackground
    cnv.ClearRect(cnv.TargetRect)
    cnv.DrawRect(returnRect(0,0,vpw,vph),xui.Color_Black,True,0)
End Sub

Sub drawparallexbackground
    leftPos = leftPos - speedx
    topPos = topPos - speedy
    ballradius = vpw*0.3
   
    Dim color As Int = xui.Color_Red
    cnv.DrawRect(returnRect(0,0,vpw,vph),color,True,0)

    For x = 0 To 3
        For y = 0 To 4
            'CREATE SHADOW
            Dim alphaLevel As Float = 30
            Dim radiusIncrease As Float = ballradius
            For s = 0 To 10
                cnv.DrawCircle((leftPos+(x*vpw)),topPos+(y*vph)+(vph/2),radiusIncrease,xui.Color_ARGB(alphaLevel,0,0,0),True,0)
                alphaLevel = Max(alphaLevel-3, 0)
                radiusIncrease = radiusIncrease * 1.05
            Next
            cnv.DrawCircle((leftPos+(x*vpw)),topPos+(y*vph)+(vph/2),ballradius,xui.Color_White,True,0)
        Next
    Next
    If leftPos <= -vpw*2 Then leftPos = -vpw
    If topPos <= -vph*2 Then topPos = -vph
    If leftPos >= 0 Then leftPos = -vpw
    If topPos >= 0 Then topPos = -vph
End Sub

Sub drawballwithpattern
    Dim ballshape As B4XPath
    ballshape.InitializeOval(returnRect((vpw/2)-150,(vph/2)-150,300,300))
    cnv.ClipPath(ballshape)
    drawparallexbackground
    cnv.RemoveClip
End Sub

Sub returnRect(x As Float, y As Float, w As Float, h As Float) As B4XRect
    Dim r As B4XRect
    r.Initialize(x,y,x+w,y+h)
    Return r
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

Sub MainForm_MouseMoved (EventData As MouseEvent)
    If EventData.X > vpw*0.55 Then
        speedx = -3
    else if EventData.X < vpw*0.45 Then
        speedx = 3
    Else
        speedx = 0
    End If
   
    If EventData.y < vph*0.45 Then
        speedy = 3
    else if EventData.y > vph*0.55 Then
        speedy = -3
    Else
        speedy = 0
    End If
End Sub
 

Attachments

  • 3dball.jar
    406.9 KB · Views: 197
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
ok now everything is done with code (no sprites)

B4X:
#Region Project Attributes
    #MainFormWidth: 500
    #MainFormHeight: 500
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
  
    Private cnv As B4XCanvas
    'Private redBall As B4XBitmap
    Private xui As XUI
    Private timer As Timer
    Private vpw, vph As Float
    Private speedx As Float = 0
    Private speedy As Float = 0
    Private leftPos As Float
    Private topPos As Float
    Dim ballradius As Float
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
    MainForm.Show
    vpw = MainForm.RootPane.Width
    vph = MainForm.RootPane.Height
    cnv.Initialize(MainForm.RootPane)
  
'    redBall = xui.LoadBitmap(File.DirAssets,"redball.png")
    leftPos = -vpw
    topPos = -vph
    timer.Initialize("timer",1000/60)
    timer.Enabled = True
End Sub

Sub timer_Tick
    clearcnvblackbackground
    drawballwithpattern
End Sub

Sub clearcnvblackbackground
    cnv.ClearRect(cnv.TargetRect)
    cnv.DrawRect(returnRect(0,0,vpw,vph),xui.Color_Black,True,0)
End Sub

Sub drawparallexbackground
    leftPos = leftPos - speedx
    topPos = topPos - speedy
    ballradius = vpw*0.3
  
    Dim color As Int = xui.Color_Red
    cnv.DrawRect(returnRect(0,0,vpw,vph),color,True,0)

    For x = 0 To 3
        For y = 0 To 4
            'CREATE SHADOW
            Dim alphaLevel As Float = 30
            Dim radiusIncrease As Float = ballradius
            For s = 0 To 10
                cnv.DrawCircle((leftPos+(x*vpw)),topPos+(y*vph)+(vph/2),radiusIncrease,xui.Color_ARGB(alphaLevel,0,0,0),True,0)
                alphaLevel = Max(alphaLevel-3, 0)
                radiusIncrease = radiusIncrease * 1.05
            Next
            cnv.DrawCircle((leftPos+(x*vpw)),topPos+(y*vph)+(vph/2),ballradius,xui.Color_White,True,0)
        Next
    Next
    If leftPos <= -vpw*2 Then leftPos = -vpw
    If topPos <= -vph*2 Then topPos = -vph
    If leftPos >= 0 Then leftPos = -vpw
    If topPos >= 0 Then topPos = -vph
End Sub

Sub drawballwithpattern
    Dim ballshape As B4XPath
    ballshape.InitializeOval(returnRect((vpw/2)-150,(vph/2)-150,300,300))
    cnv.ClipPath(ballshape)
    drawparallexbackground
    cnv.RemoveClip
End Sub

Sub returnRect(x As Float, y As Float, w As Float, h As Float) As B4XRect
    Dim r As B4XRect
    r.Initialize(x,y,x+w,y+h)
    Return r
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

Sub MainForm_MouseMoved (EventData As MouseEvent)
    If EventData.X > vpw*0.55 Then
        speedx = -3
    else if EventData.X < vpw*0.45 Then
        speedx = 3
    Else
        speedx = 0
    End If
  
    If EventData.y < vph*0.45 Then
        speedy = 3
    else if EventData.y > vph*0.55 Then
        speedy = -3
    Else
        speedy = 0
    End If
End Sub

excellent
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
this is the patter:
1608243990481.png

balls.jpg
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
However, by posting that image I wanted to point out the position of the number on the "half" balls, of course.

thank you, your help is very much appreciated. i will add the number to the ball but still need to get it spinning correctly.
btw with your image, i have now the correct colors of the balls. is there a specific order on putting them on the table?

i used to play a lot of billiard but cannot remember right now.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
When I was a boy I lived playing billiards!

The arrangement of the balls in the triangle depends on the game, there are several. In the 8 game, for example, the position of the number 8 and the number 1 is important and that on the sides they are alternated between full and half.

(here the order is wrong)

1608245305350.png
 
Upvote 0
Top