# GamesBilliard Game (Just the Beginning!)

#### ilan

##### Expert
Longtime User
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:

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

Last edited:

#### JordiCP

##### Well-Known Member
Longtime User
Wow!
How are you currently generating the bitmaps? (i followed a bit the previous thread).
Have you measured times (current vs needed)?

#### ilan

##### Expert
Longtime User
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 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
cnv.DrawRect(returnRect(0,0,ballWidth,ballHeight),ballColor,True,0)
For x = 0 To 3
For y = 0 To 3
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

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

#### JordiCP

##### Well-Known Member
Longtime User
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

Longtime User

#### ilan

##### Expert
Longtime User

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:

Last edited:

#### ilan

##### Expert
Longtime User
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.

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

#### JordiCP

##### Well-Known Member
Longtime User
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

##### Expert
Longtime User
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

##### Expert
Longtime User
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)

(Video updated in #7 with new light/shadow effect)

Last edited:

#### LucaMs

##### Expert
Longtime User
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

##### Expert
Longtime User
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

##### Expert
Longtime User
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

##### Expert
Longtime User
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

##### Expert
any suggestoins?
Seems nobody has made a minimalistic pool game. Might be an opportunity.

Example of what I'm talking about:

#### ilan

##### Expert
Longtime User
minimalistic pool game

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

#### Sandman

##### Expert
Did you look at the example I posted?

Longtime User

Replies
3
Views
490
Replies
26
Views
2K
Replies
11
Views
5K
Replies
12
Views
1K
Replies
6
Views
2K