Babylon.js tutorials - Learn by creating a complete game

[Temechon]

Hello guys ! 

 

I wrote my first tutorial on Babylon.js here : http://pixelcodr.com/tutos/toad_attack/toad_attack.html

 

I introduce several notions, as :

- basic stuff (getting started, sphere, box, ....)

- import a custom mesh (as a babylon file)

- materials

- texture

- skybox

- basic animations

 

My goal is not to fully describe all these elements (because it is already well done in the Github wiki), but it is more 'learning by trying'. By creating simple simple, I hope it wil help newcomers by showing how easy Babylon is.

 

Don't hesitate to send me your feedbacks, there are very valuable for me as you got already some experience with babylon, and it will surely increase the quality of future tutorials I plan to write.

 

Thank you guys ! 

 

Keep the webgl games coming

 

Cheers !

 

 

EDIT : 

Here is (for now) the complete list of tutorials: 

 

- Learn the basics: http://pixelcodr.com/tutos/toad_attack/toad_attack.html

- Interactions with the Actions system: http://pixelcodr.com/tutos/plane/plane.html

- Physics engine (with Oimo): http://pixelcodr.com/tutos/oimo/oimo.html

- Manipulate vertices of an object (for procedural generation for example): http://pixelcodr.com/tutos/trees/trees.html

- How to create a loading screen by creating a preloader: http://pixelcodr.com/tutos/preloader/preloader.html

- Create a simple FPS game : http://pixelcodr.com/tutos/shooter/shooter.html

- Play with physics and Oimo.js : http://pixelcodr.com/tutos/physics/physics.html (new!)

 

[gryff]

Temechon, excellent, excellent, excellent. (I assume all the code works - and it should since you wrote it and not me. )

 

It combines bits and pieces from a number of the tutorials on github  to come up with a complete game. Nothing like a working complete game to inspire someone starting out - and getting them to delve more into BJS.

 

Only other comment I have, is with this statement:

 

A web server to load all our game assets. You can either install WAMP for Windows (or MAMP for Mac), or use the public folder of your DropBox account.

 

 

You might possibly  explain this a little more - why for instance. It was something that confounded me when I first started with BJS five months ago.

 

cheers, gryff

[Temechon]

Thank you, thank you thank you very much Gryff

 

I will indeed explain it, you are right that I went quite fast on this part. Thank you again !

[Vousk-prod.]

Excellent work !!!

 

BTW, I noticed some time ago that WAMP could be very buggy under Win8 laptop (it takes forever to "reach" localhost, at each page refresh). I gave a try at XAMP and no lag problem anymore.

[Temechon]

Hi ! 

 

A new tutorial is out ! Learn about the Action system by creating a simple game prototype here : http://pixelcodr.com/tutos/plane/plane.html

 

Cheers

[gryff]

Learn about the Action system by creating a simple game

 

Temechon, how do they say it in French : "C'est magnifique!".

 

I have been putting off using, and learning about,  the Action Manager - now I have no excuse

 

cheers, gryff

[Zimbofly]

Awesome work man - really good for us beginners to get stuck into!

 

thanks!

[GameMonetize]

@Temechon,

 

you should reference your articles on the wiki

[Temechon]

Thanks DK, I will do it !

[Vousk-prod.]

If I may... since this is a tuto about creating an HTML5 game, which can natively run in a regular web page, why not embed a working version directly inside the tuto, at the begining of the page for instance.

Personnaly I found very usefull to know the final result before reading the source code (when you know what does the piece of code you're reading, it's easier / quicker to understand).

And I think this is a lot more true for a beginner, which don't have good abstraction ability yet.

(I don't even mention the far better benefit of being able to then modify that code, like in the playground or a fiddle)

Well, in my opinion that would be an easy but usefull enhancement for a your tutos.

[Temechon]

You are totally right, and I did it for my last one here.

I have to update the first tuto, but don't have the time right now :/ 

I promise I will do it soon

Thank you for your feedbacks !

[Dad72]

I love your tutorials Temechon, I am delighted to see that you made several to cover several topic of Babylon.

 

Thanks for your work and your time.

[gryff]

Well Temechon, inspired by your action tutorial, I finally decided to "grasp the nettle" and try to work with actions. My first experiment worked fine a simple pick interaction. Feeling brave I charged on and went for mesh-mesh interaction.

 

You can see in this Playground (another first for me) the code and the effect

 

Mesh Interaction

 

Use the arrow keys to collide the blue box with the red one. Seems to work fine the blue box scales down on collision.

 

But, when I try to use similar code with a .babylon scene from Blender -  it fails

 

EDIT: Using latest version of BJS as suggested by Temechon - works fine. TY Temechon

 

Mesh Interaction2

 

No scale change.

 

I've spent several hours trying to figure out what the difference is - anybody any ideas - before I go totally barmy? Here is the relevant code for the non-working example:

BABYLON.SceneLoader.Load("", "multibox2.babylon", engine, function (newScene) {                newScene.executeWhenReady(function () {                                        theBox = BABYLON.Mesh.CreateBox("box", 2, newScene);                    theBox.position = new BABYLON.Vector3(0,1,12);                    theBox.scaling = new BABYLON.Vector3(2,2,2);                    boxMat = new BABYLON.StandardMaterial("boxMat", newScene);                    boxMat.emissiveColor = BABYLON.Color3.Red();                    theBox.material = boxMat;                                        //create camera                    myCam = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 2, 0), newScene);                    newScene.activeCamera = myCam;                    myCam.attachControl(canvas);                                        //create camera intersect sensor and parent to camera                    camSensor = new BABYLON.Mesh.CreateBox("sensor", 1, newScene);                    camMat = new BABYLON.StandardMaterial("camMat", newScene);                    camMat.emissiveColor = BABYLON.Color3.Blue();                    camSensor.material = camMat;                    camSensor.scaling = new BABYLON.Vector3(.35, .25, .25);                    camSensor.position = new BABYLON.Vector3(0, -0.150, 1);                    camSensor.parent = myCam;                    myCam.speed = 0.2;                                        myScene = newScene;                                        // create camSensor action manager                    camSensor.actionManager = new BABYLON.ActionManager(myScene);                    //camSensor action                    camSensor.actionManager.registerAction(new BABYLON.SetValueAction({trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, parameter: theBox},camSensor,"scaling", new BABYLON.Vector3(.1, .1, .1)));                                                                              // Once the scene is loaded, just register a render loop to render it                    engine.runRenderLoop(function() {                    divFps.innerHTML = BABYLON.Tools.GetFps().toFixed() + " fps";                    myScene.render();                    });                });                                                            }, function (progress) {                // To do: give progress feedback to user            });

[Temechon]

Gryff, your code is good.

But the babylon version is not good Try to take the last one from Github, and everything will work.

 

Hope you enjoyed my tutorial

 

Cheers !

 

Edit : Ho and btw, thank you for the demo scene. I couldnt find the problem without it.  

[gryff]

Gryff, your code is good.

 

LOL, never thought I would see anyone write that on this forum

 

But the babylon version is not good

 

Grr!

 

Temechon - thanks for finding that - never crossed my mind as the first one using mesh picking worked fine.

 

Yes I am enjoying your tutorial. After I finish with the action manager parts, I will go back and look at the ship prototyping stuff aswell.

 

TY again - works like a charm - saved my sanity.

 

Now onward and upward

 

cheers, gryff

[Temechon]

Hello guys, 

 

A new tutorial is live ! You can check it out here : http://pixelcodr.com/tutos/trees/trees.html

You will learn to manipulate directly the mesh geometry with VertexData, and create a polygonal tree generator (like this one : http://pixelcodr.com/tutos/trees/game/index.html)

 

Cheers

 

PS @Deltakosh : is it please possible to rename this topic : "Babylon.js Tutorials" ? Thanks  Nevermind it's done now. Thank you gryff

[gryff]

Another great tutorial Temechon - with tutorials 2 & 3 I should be able to finally get my head around using "prototypes"

 

However, I still have a hard time with "vertices" :

 

Each face of a polygon has its own vertices. A cube for example will have a total of 24 vertices (6 faces, each faces has 4 vertices), because each vertex will have its normal for the corresponding face.

 

I start from my simple Blender perspective - a cube has 6 faces defined by 8 vertices and has 8 normals (face normals) . Obviously, somewhere "under the hood" - graphics card, BJS, etc - these vertex normals must be needed for the final display. But then I get further confused by the fact that for each of those six "quad faces" of the cube have to be displayed as two triangles. So for the cube, that is 12 triangles, each defined by 3 vertices for a total of 36 vertices. 

 

At that point, I  go back to Blender -  and try not to worry about what is "under the hood"

 

cheers, gryff

[Temechon]

Hey gryff, 

 

Thank you

 

To help you understand your vertex issue: a cube has 8 vertices, but each vertices is shared on 3 faces (so 3 normals for each vertex). 8*3 = 24

 

Why not 36 ? Because we are using indices : with a list of indice, 2 triangles will be composed of 4 vertices.

 

Look at this : 

 

0------1 

|        /|

|      /  |

|    /    |

|   /     |

2------3

 

4 vertices : 0 1 2 3

Two triangles : 0-1-2 and 1-2-3

 

That is for ONE face : Each vertex will have the same normal value.

As a cube has 6 faces => 6 * 4 = 24 !

 

I hope my great ascii art helped you a bit

 

Cheers,

[Dad72]

Thanks for this new tutorial

[reddozen]

How about reading color data from a texture? lol

[Temechon]

Hey guys, 

 

A new tutorial about creating a clean loading screen is out. With this article, you can learn how to display a loading screen, and in the meantime loading all your 3D models.

You can read it here : http://pixelcodr.com/tutos/preloader/preloader.html

 

Cheers, 

[Dad72]

It is interesting. Thanks
 
You can also do it directly like this:
 

        BABYLON.SceneLoader.Load('./', 'file.babylon', engine, function (newScene) {    			loadingText.innerHTML = "";		$("#loading").hide();	}, function (evt) {                if (evt.lengthComputable) {                        that.loadingText.innerHTML = "Loading, please wait... " + (evt.loaded * 100 / evt.total).toFixed() + "%";		} else {                       dlCount = evt.loaded / (1024 * 1024);                       that.loadingText.innerHTML = "Loading, please wait... " + Math.floor(dlCount * 100.0) / 100.0 + " MB.";		}	});	

        BABYLON.SceneLoader.ImportMesh('', './', 'file.babylon', scene, function (newScene) {    			loadingText.innerHTML = "";		$("#loading").hide();	}, function (evt) {                if (evt.lengthComputable) {                        that.loadingText.innerHTML = "Loading, please wait... " + (evt.loaded * 100 / evt.total).toFixed() + "%";		} else {                        dlCount = evt.loaded / (1024 * 1024);                        that.loadingText.innerHTML = "Loading, please wait... " + Math.floor(dlCount * 100.0) / 100.0 + " MB.";		}	});	

[Temechon]

Yes, but it does not work if you have several meshes to import. My solution produce a clean object-oriented code, that can be improved easily, and with only one function ImportMesh.

[Dad72]

Ah yes, ok. I see. 

[Temechon]

Hey guys, 

 

I wrote a new tutorial, don't hesitate to tell me what you think of it

 

http://pixelcodr.com/tutos/shooter/shooter.html

 

Cheers !