Create a Flash Ball game with visual from above – Flare3D version

If you are a long time reader, you should remember the Create a Flash ball game with visual from above tutorial published almost four years ago. I also made a game out of it, Tileball, probably too hard.

Now I am showing you how to do the same thing using Flare3D.

What’s the point in using a 3D engine to make a 2D game? The animation of the rolling ball, for instance.

Let’s see this script:

Lines 5-10: import required Flare3D classes

Line 12: defines a Scene3D variable. Scene3D is the world which will contain our 3D environment.

Line 13: defines a Sphere variable, used to create the ball

Line 14: defines another Sphere variable, which will be used to create the target the camera will track. It’s not mandatory to create it as a sphere, we just need a body to act as a camera tracker.

Line 15: sphereSpeed is the vector containing x and z speeds of the ball. y has not speed since it’s a 2D game with the visual from above.

Line 16: we also need a friction to simulate some kind of physics.

Lines 17-18: creation of two different wireframe materials to be applied to the ball. ballMaterial will be applied when the ball is on the track, ballOutMaterial when it’s out of the track. It’s just to give a visual feedback.

Line 19: a RayCollision variable. It will be used to see if the ball is on the track.

Line 21: defines a Cube variable, which will be used to build the track. I won’t use squared tiles like in the original engine this time, I’ll just build a big “O” with four rectangular tiles.

Line 22: creates the track material.

Line 23: creates the scene.

Line 24: creation of the ball itself. The four arguments are the name, the radius, the number of segments into which the sphere is to be divided and the material.

Line 25: this is the dummy sphere which will act as camera target.

Lines 26-27: adds both spheres to the scene.

Line 28: we start building the track, cube by cube. The arguments are the name, the width, the height, the depth, the number of segments the cube will have on each face and the material.

Line 29: sets the position of the cube, in the (x,y,z) space.

Line 30: adds the cube to the scene.

Line 31: very important line: adds the newly added cube to the list of objects we have to check for the collision.

Lines 32-43: construct the rest of the track.

Lines 44-45: set up the camera position and target, using (x,y,z) coordinates.

Line 46: Flare3D listener to be triggered once there is something to update. It will call updateEvent function.

Lines 49-51: increase z speed if the player pressed UP arrow key.

Lines 52-60: same concept applied to LEFT, DOWN and RIGHT arrow keys.

Line 61: applies friction using ScaleBy method.

Lines 62-63: update ball position according to the speed.

Lines 64-65: update ball rotation according to the speed. The second argument has to be set to true to rotate respecting current orientation, or false to rotate according to orientation relative to parent (our case).

Line 66: the core of collision detection. From the origin of the ball Vector3D(ball.x,ball.y,ball.z) we fire a ray downward Vector3D(0,-1,0) looking for any of the objects previously inserted with addCollisionWith method. Then we show the green ball (line 67) if there is a collision (the ball is on the track) or the red ball (line 70) otherwise.

Lines 72-73: update the position of camTarget to make it have the same position of the ball.

Line 74: moves the camera to place it in the same coordinates as the ball, just at an higher position.

This is the result:

Move the ball tapping arrow keys. The ball will be green when correctly on track, red otherwise.

Download the source code. How would you improve the prototype? Anyone willing to convert it using Away3d?

  • I assume this doesn’t use Molehill yet, right? Does Flare3D intend to use it once FP11 get’s installed worldwide? Or is this where Away3D has the advantage?

    Thanks for your tutorials Emanuele! :)

  • Flare3D is molehill ready

  • rjgtav

    hi. I have a question. In flare3d’s website it says that we cant use the free edition for commercial purposes.. Does that mean that, for example, i cant publish in the web a game with flare3d free edition?

    Regarding your question about what would i do to improve the prototype, well i would probably change a little the gameplay as it is a little hard to control the ball :-)

  • rjgtav

    Hi. I have a question. In Flare3D’s website it says that we can’t use the free edition for commercial purposes… Does it mean that, for example, I can’t publish a game using the free edition?

    Regarding your question about How would I improve the prototype, i would probably change a little the gameplay, as the ball is a little hard to control.

    Finally, I love your tutorials, I read your blog for some years already! (sorry for only commenting today :-D)

  • rjgtav

    Ups, you can remove the 1st comment, as I didn’t know that they needed approval (i sent the 1st on mobile and it didnt show the msg…). Sorry