Games Billiard Game (Just the Beginning!)

ilan · Dec 17, 2020

hi everyone,

i saw few days ago a video ad on Facebook about a Pool Game and I started thinking how the spinning animation of the half colored ball could be done in b4i using a 2d game engine (or poor code in my case)

so i started a thread asking a little bit about 3d animation. you can watch it here:

need advice for a 3d issue

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...

www.b4x.com

this is what i have until now. i really like the results (remember it is just the beginning)

[There is a newer video on post #7)

NOTE the white ball sometimes stuck on the hole, this is because i create a random force on the ball so it may be stuck. in the finished game, you can set the hitting point + force on the white ball. this is JUST a demonstration. it is not perfect but it is a start!
let see how it will go. i can already notice that it is hard for the engine to draw each frame for each ball the correct sprite. i will need to google a little bit to find a better solution for the 3d spinning that i have right now. the most important part for me is the performance so i hope it will get better.

take care, ilan

EDIT: found a bug, performance is now better

JordiCP · Dec 17, 2020

Wow!
How are you currently generating the bitmaps? (i followed a bit the previous thread).
Have you measured times (current vs needed)?

ilan · Dec 17, 2020

i Jordi, i was hoping you will join the party as you are experienced in 3d animations and maybe you can give me some advice

so yesterday after posting the 2 first questions I had an idea how i could create the 3d animation.
so what i do is i draw a 3d flat image and then use clip-path to draw only part of the image and create from it a bitmap then i use it.
i use the same technique like parallax scrolling. there is no parallax scrolling in my animation but there is a never-ending animation like i use it parallax scrolling.

so the speed of the moving is basically a mapping of the body velocity x and y-direction.

if the body moves on the x-axis the image moves to the same site. like this, i don't need to deal with lots of sprites. i even draw everything in code.

it is not perfect since i draw each frame 9 different parts of the ball to have always every point covered with drawing and not get blank areas.

it looks like this:

in the middle is the part you see, now the whole image is moving in the direction, once the image was moved WIDTH of the ball frame it is recreated again.

this is the relevant code:

B4X:

'Code module

Sub Process_Globals
    Private cnv As B4XCanvas
    Private xui As XUI
    Private ballWidth, ballHeight As Float
    Private ballradius As Float
    Private ballColor As Int
    Private leftPos As Float
    Private topPos As Float
    Private senderBall As ball
End Sub

Public Sub returnTexture(ballPnl As Panel, myball As ball) As SKTexture
    cnv.Initialize(ballPnl)
    senderBall = myball
    ballWidth = myball.Width
    ballHeight = myball.Height
    leftPos = myball.left
    topPos = myball.top
'    Log(speedx & ":" & speedy)
    ballColor = myball.colorint
    Dim texture As SKTexture
    texture.Initialize
    texture.TextureWithImage(drawballwithpattern(myball.body.Velocity))
    ballPnl.RemoveAllViews
    Return texture
End Sub

Private Sub drawballwithpattern(velocity As Vector) As B4XBitmap
    cnv.ClearRect(cnv.TargetRect)
    Dim ballshape As B4XPath
    ballshape.InitializeOval(returnRect(0,0,ballWidth,ballWidth))
    cnv.ClipPath(ballshape)
    drawparallexbackground(velocity)
    cnv.RemoveClip
    Return cnv.CreateBitmap
End Sub

Private Sub drawparallexbackground(velocity As Vector)
    Private speedx As Float = 0
    Private speedy As Float = 0
    speedx = -Functions.mapping(velocity.Dx,0,1000,0,10)
    speedy = Functions.mapping(velocity.Dy,0,1000,0,10)
    
    leftPos = leftPos - speedx
    topPos = topPos - speedy
    ballradius = ballWidth*0.25
    cnv.DrawRect(returnRect(0,0,ballWidth,ballHeight),ballColor,True,0)
    For x = 0 To 3
        For y = 0 To 3
            cnv.DrawCircle((leftPos+(x*ballWidth)),topPos+(y*ballHeight)+(ballHeight/2),ballradius,xui.Color_White,True,1)
        Next
    Next

    If leftPos <= -ballWidth*2 Then leftPos = -ballWidth
    If topPos <= -ballHeight*2 Then topPos = -ballHeight
    If leftPos >= 0 Then leftPos = -ballWidth
    If topPos >= 0 Then topPos = -ballHeight
    senderBall.left = leftPos
    senderBall.top = topPos
End Sub

Private 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

the mapping part is happening here:

B4X:

Public Sub mapping(var As Float, min_real As Float, max_real As Float, min_scaled As Float, max_scaled As Float) As Float
    If Abs(var) < 1 Then
        Return 0
    Else
        Return (var * ((max_scaled-min_scaled) / (max_real-min_real))) + min_scaled   
    End If
End Sub

it is basically scaling the real value to a new value. Velocity to Spinning Speed.

if you have any question let me know,

ilan · Dec 17, 2020

btw i use Tiled to create the balls and Table frame and iTiled to create the bodies in b4i.

JordiCP · Dec 17, 2020

ilan said:
i Jordi, i was hoping you will join the party as you are experienced in 3d animations and maybe you can give me some advice

I'd have to study the code, since I never worked with SpriteKit, but seems promising

Not sure if it applies, but my first thoughts are:

Add a fixed layer of light-shadow on top of the resulting bitmap. Since it is fixed, cost won't be too high ( I think it was commented in your other post.)
Work with a pre-made mono-coloured bitmap for each ball color. For the striped ones, instead of doing the parallax effect, just draw the white circles with their centers where they are calculated to be, according to the ball position. This would save a lot of drawings ( but would not be compatible with the ball number also rotating).

I would not worry much about circles perspective projection. However, if it was important, the approach would need to be totally different.

This reminds me of an experiment I made time ago (opposite to yours, it was 3D pool with 2D balls). I think I published it here, but can't find now

LucaMs · Dec 18, 2020

JordiCP said:
This reminds me of an experiment I made time ago (opposite to yours, it was 3D pool with 2D balls). I think I published it here, but can't find now

https://www.b4x.com/android/forum/t...ox-with-collision-detection.81301/post-515257

ilan · Dec 18, 2020

small updates:

i have improved the performance a lot! i removed unnecessary drawing and draw only if a ball has velocity.
i have also added the numbers to the ball that are over a small white circle as in the original balls.
i must admit that the number rolling is looking great.

i like how it looks now and about lightning and shadow, it may be added in the future. i am afraid of getting fps drop but let see. anyway, it looks now already 3d realistic. don't forget it is a 2d game! i don't really want to have a perfect 3d ball it just needs to get the filling of 3d.

latest Video:

ilan · Dec 18, 2020

JordiCP said:
Add a fixed layer of light-shadow on top of the resulting bitmap. Since it is fixed, cost won't be too high ( I think it was commented in your other post.)

this is a good idea Jordi. this won't cost too much calculation and i do think a fixed image is here a better solution.

JordiCP said:
Work with a pre-made mono-coloured bitmap for each ball color. For the striped ones, instead of doing the parallax effect, just draw the white circles with their centers where they are calculated to be, according to the ball position. This would save a lot of drawings ( but would not be compatible with the ball number also rotating).

i must say that i prefer working as it is now. drawing everything in code. if i would use an image i would also need to draw it each frame so instead of having 16 images of all colors, i prefer to do the drawing with simple tools like canvas and then use the bitmap and convert it to a SKTexture.

but the shadow and lighting will definitely be an image and not coded. this will be the better solution since i don't want any more calculation to keep 60 FPS

thank you for your comments @JordiCP

JordiCP · Dec 18, 2020

ilan said:
i must say that i prefer working as it is now. drawing everything in code. if i would use an image i would also need to draw it each frame so instead of having 16 images of all colors, i prefer to do the drawing with simple tools like canvas and then use the bitmap and convert it to a SKTexture.

Yes, I suppose it won't penalize too much. Also, your code allows to draw the numbers.?

According to your latest video, I can see that you are very good coding but no so good playing billiard! ?

You are doing a great job with it. Waiting to see more advances!!

ilan · Dec 18, 2020

JordiCP said:
According to your latest video, I can see that you are very good coding but no so good playing billiard!

i disagree with you, i am also not so good in coding ?
i just have a lot of luck, i type randomly on the keyboard and something functional comes out.

ilan · Dec 18, 2020

i am not sure why i keep working on it, i guess because i am making progress? but i know for sure that such a game cannot success since there are to many good apps on the store. anyway as a long as i am making progress i will keep working on it

added a light/shadow effect + improved performance and scrolling animation (i always try to make it more and more perfect, not simple)

[shadow/light image.png]
(Video updated in #7 with new light/shadow effect)

LucaMs · Dec 18, 2020

Very good but some things don't convince me.

1 - the sizes. I watch your video on PC and the balls are very small; I don't know if the relationships between the sides of the table and between the total size of it and the balls are correct. Some doubts also about the width of the holes.
Note that in the Miniclip game (I used to play quite a lot in the past) the billiards are placed horizontally.

2 - the rebound on the banks. I attach part of your video; it is true that ball 1 hits the edges of the hole thus taking a certain effect but then when it hits the last bank it cannot go horizontally, with an angle of -90 ° (or 270 °) with respect to the bank.

ilan · Dec 18, 2020

Thanks lucas, i agree the table and holes are not perfect but this is just a very first stage testing. I will change the assets with more nicer one i will purchase and i will fix the hole part too.

according to the physics, i guess it bounce back horizontally because the table border are not 100% straight so if there is a small angle it may bounce back incorrect. I need to mention that i draw the frame by hand in tiled without snip to edge option on and that may give you lines straight like the pisa tower in italy?

LucaMs · Dec 18, 2020

ilan said:
Thanks lucas, i agree the table and holes are not perfect but this is just a very first stage testing. I will change the assets with more nicer one i will purchase and i will fix the hole part too.

according to the physics, i guess it bounce back horizontally because the table border are not 100% straight so if there is a small angle it may bounce back incorrect. I need to mention that i draw the frame by hand in tiled without snip to edge option on and that may give you lines straight like the pisa tower in italy?

I repeat, not having written it well, that in that case the ball certainly hits the two edges of the hole, so the rotation of the ball changes and increases (we call it a little wrongly "effect") and this will change the angle of the bounce, but in that animation this is excessive.

Note: in Italy, decades ago (?) we had "custom" billiards, whose banks were higher than the international ones and had different consistency (hardness). This also affects the "type" of rebound, the material of which the back is made (its elasticity).

[BTW, here the banks were higher and the holes much narrower; for this reason, being used to the tight Italian holes, every time I went abroad I did not find a decent opponent ?]

ilan · Dec 19, 2020

so after the concept is working and i see that the game can be done i started to look for assets (paid) and found some for about 25-30$
the money is not a problem. so now i need to invest about 2 weeks in the game and to see if there is a good potential i went to the AppStore to check the games that are already available and this is what i saw:

there is no chance someone will download my game. those games look so nice and lots of them are 3d.
the question is what can i do now with my game to make it interest and different then what is already available?
any suggestoins?

Sandman · Dec 19, 2020

ilan said:
any suggestoins?

Seems nobody has made a minimalistic pool game. Might be an opportunity.

Example of what I'm talking about:

HOOK - Apps on Google Play

Get Hook'd on unhooking the hooks.

play.google.com

ilan · Dec 19, 2020

Sandman said:
minimalistic pool game

what do you mean with minimalistic? can you explain?
thanx

Sandman · Dec 19, 2020

Did you look at the example I posted?

LucaMs · Dec 19, 2020

The question should be: how could we make 3D graphics at this level.

https://play.google.com/store/apps/details?id=com.xs.pooltd

10.000.000 + downloads

ilan · Dec 19, 2020

Sandman said:
Did you look at the example I posted?

yes i did

Games Billiard Game (Just the Beginning!)

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency