iOS Question need advice for a 3d issue

ilan · Dec 16, 2020

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:

Any way to Simulate 3D ball movement in a 2D game using SpriteKit?

I am wondering if anyone is aware of a way to simulate a ball for example moving in 3D in SpriteKit (a 2D framework). Like if a soccer ball is rolling, or a stripped pool ball, or even a baseball w...

stackoverflow.com

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 · Dec 16, 2020

I would do it as a code, the sphere is not that complicated.

Perhaps the number is difficult to rotate

ilan · Dec 16, 2020

Star-Dust said:
I would do it as a code, the sphere is not that complicated.

Perhaps the number is difficult to rotate

so you would each frame calculate the shape and create a bitmap of it and draw it on the circle?

i think starting with the shape is better then nothing. i would like to try it.

Star-Dust · Dec 16, 2020

A similar thing:

[BAX] [XUI] SD XUI_View3D

I created a library to display polygons in 3D. It is also possible to use it to create 3D XUI views. This library can be used to create 3D models from code or load them from obj files. To create a 2D drawing app, to create games, animations, introductions, and 3D effects You can find a detailed...

www.b4x.com

ilan · Dec 16, 2020

Star-Dust said:
A similar thing:

[BAX] [XUI] SD XUI_View3D

I created a library to display polygons in 3D. It is also possible to use it to create 3D XUI views. This library can be used to create 3D models from code or load them from obj files. To create a 2D drawing app, to create games, animations, introductions, and 3D effects You can find a detailed...

www.b4x.com

this is amazing. i have no idea how to create a 3d object. need to start study about it.

Sandman · Dec 16, 2020

This might be a stupid question, but wouldn't it be easier to just do it as a 3D game? The camera could still be positioned so it looks 2D.

ilan · Dec 16, 2020

Sandman said:
This might be a stupid question, but wouldn't it be easier to just do it as a 3D game? The camera could still be positioned so it looks 2D.

i would like to use a 2d game engine that i am familiar with and i am also pretty sure b4x doesnot have a 3d game engine.

btw apple has a 3d game engine. its called SceneKit. but we will need someone to wrap it. maybe @JanPRO? he wrapped Spitekit for b4i.
this would be a huge step forward in game making for b4i. really HUGE. maybe erel would like to do it

Star-Dust · Dec 16, 2020

ilan said:
this is amazing. i have no idea how to create a 3d object. need to start study about it.

Let's say that it is not complicated also because it is a very simple 'engine' and with not many lines of code.
And probably a simple motor is enough to make a sphere spin.

Making a full 3D game means having a more complex engine.

I agree with you, just doing the ball, it's also a challenge with yourself

ilan · Dec 16, 2020

i think i have an idea. i am not sure if it will work but something came to my mind i will have to try it out. will share with you later the results

btw. this is the framework of apple: https://developer.apple.com/documentation/scenekit/
i am sure it is simple as Spritekit and very similar so such a lib would be perfect!

Star-Dust · Dec 16, 2020

ilan said:
i think i have an idea. i am not sure if it will work but something came to my mind i will have to try it out. will share with you later the results

btw. this is the framework of apple: https://developer.apple.com/documentation/scenekit/
i am sure it is simple as Spritekit and very similar so such a lib would be perfect!

Great. I'm really curious to see, you will surely do something extraordinary

ilan · Dec 16, 2020

ok, i am making some progress. now i will also need to rotate the image.

this is what i have now:

EDIT: video was updated to ver2 of the animation

ilan · Dec 16, 2020

i will explain what i am doing.

i create a patter of the ball flat 2d. then i draw a parallax scrolling animation of 3 full pattern of the ball in 9 different positions to avoid blank area.
now i clip-path an oval in the middle of the screen of the shape of the ball and draw the whole screen to it.

this is the patter:

this is the code:

B4X:

#Region Project Attributes
    #MainFormWidth: 510
    #MainFormHeight: 510
#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
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
    For x = 0 To 2
        For y = 0  To 2
            cnv.DrawBitmap(redBall,returnRect(leftPos+(x*vpw),topPos+(y*vph),vpw,vph))
        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

i coded it very fast without trying to polish the code so please dont judge me. i first need to have a working code then polish it
now i need to get the rotation correctly. i am still thinking of a way to get a nice animation. then i can create a bitmap and draw it on my 2dPhysicBody while it is moving on my board. what do you think guys?

am i close to the solution?

Sandman · Dec 16, 2020

ilan said:
am i close to the solution?

I can't speak to the code at all, I have no clue about (pseudo) 3D programming.

But as far as the visuals go, I'd say "perhaps somewhat", depending on how you're planning on using it. I mean, the ball would be a lot smaller, which probably would help a lot in covering how it looks slightly off. I would also recommend just removing the number on it, if that's an option for your game. Plus it will help lots once you add the shadow and the highlight on the ball:

ilan · Dec 16, 2020

Sandman said:
I can't speak to the code at all, I have no clue about (pseudo) 3D programming.

But as far as the visuals go, I'd say "perhaps somewhat", depending on how you're planning on using it. I mean, the ball would be a lot smaller, which probably would help a lot in covering how it looks slightly off. I would also recommend just removing the number on it, if that's an option for your game. Plus it will help lots once you add the shadow and the highlight on the ball:

View attachment 104514

the size is just for demonstration. Lightning and shadow will be added once the code is working. First we need to have a working code then we can add improovments.

Star-Dust · Dec 17, 2020

ilan said:
ok, i am making some progress. now i will also need to rotate the image.

this is what i have now:

EDIT: video was updated to ver2 of the animation

Excellent. ?

You can also add an effect to give roundness. see here

[B4X] [XUI] jSD LiquidProgress (ProgressBar)

Made entirely with B4J with XUI Download Here jSD_LiquidProgress Author: Star-Dust Version: 0.09 LiquidProgress Functions: Class_Globals As String DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String Base type must be Object Initialize (Callback As Object, EventName As...

www.b4x.com

Star-Dust · Dec 17, 2020

ilan said:
i will explain what i am doing.

i create a patter of the ball flat 2d. then i draw a parallax scrolling animation of 3 full pattern of the ball in 9 different positions to avoid blank area.
now i clip-path an oval in the middle of the screen of the shape of the ball and draw the whole screen to it.

Don't try to be very precise in relation to the white sphere that rotates within the red one. Although it should be oval, take into account that it has to spin fast and this will already give the optical effect that it is oval.
So wasting too much time on it would be of little use, it wouldn't add much to you.

I agree with @Sandman's idea, the number does not go in the image, it must be inserted by code and deformed.

By inserting the light effect as indicated in my previous post you also have an impression of three-dimensionality

You are on the right track

PS. The red and white sphere, you don't need an image, but you can create them from code

Star-Dust · Dec 17, 2020

I would add that you may also be add to shade the ball.

This @JordiCP code might be useful to you or using native methods
.

ilan · Dec 17, 2020

Star-Dust said:
Don't try to be very precise in relation to the white sphere that rotates within the red one. Although it should be oval, take into account that it has to spin fast and this will already give the optical effect that it is oval.
So wasting too much time on it would be of little use, it wouldn't add much to you.

actually, this was the challenge ?
i do agree with you that wasting too much time on something is not always the right thing to do but here i wanted to create a 3d spinning ball simulation in a 2d environment.

Star-Dust said:
I agree with @Sandman's idea, the number does not go in the image, it must be inserted by code and deformed.

i put the number just to see how it rolls, this can be improved as you say in code. will see what i can do. for now, i want to make the spinning more precise and then try to make a simple board with physic bodies and look at how the animation is performing.
i already see that it won't be simple because Spritekit works differently than Libgdx. in libgdx you can draw anytime any sprite you want and create an animation, in spritekit you create a SKAction that is generating animation and then you load it to the body what means i have to load the sprites in advance but in my solution, it is not possible as the sprite is updated in real-time so i will have to change each frame the relevant SKTexture.

so create a SKtexture and update it to the SKSPriteNode. it will be interesting to see if performance (FPS) will drop.

Star-Dust said:
By inserting the light effect as indicated in my previous post you also have an impression of three-dimensionality

i can update the Image with lights and shadows, this won't be a problem at all, i can also add light effects to the SKNode with SKemitternode i have done that a lot this is not the part i want to focus on right now, i would like to see how i can put this animation in my game and then improve all those points you mentioned.

to tell you the truth i don't think i will create a finished game of it. it all starts as a challenge for me. there are so many Pool games in the Store with Multiplayer option something i have no clue how to do so i am not sure it will be worth putting time on something you can not do better than others but i would like to learn new stuff and this is why i started this project. so it is more for learning purposes BUT maybe, in the end, something will do come from it. who knows

Sandman · Dec 17, 2020

Star-Dust said:
I agree with @Sandman's idea, the number does not go in the image, it must be inserted by code and deformed.

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.

Star-Dust · Dec 17, 2020

Sandman said:
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.

Even if you don't create the finished game, I still want to play it.

I didn't realize you were using a library to manage sprites. This obviously changes, it takes me back to my Commodore 64.

iOS Question need advice for a 3d issue

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency