Jump to content

Babylon.js tutorials - Learn by creating a complete game


Recommended Posts

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 !




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
- Play with physics and Oimo.js : http://pixelcodr.com/tutos/physics/physics.html (new!)


Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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            });
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

Gryff, your code is good.


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


But the babylon version is not good




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 :D


cheers, gryff :)

Link to comment
Share on other sites

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 ;)


Link to comment
Share on other sites

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" :o


cheers, gryff :)

Link to comment
Share on other sites

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 : 



|        /|

|      /  |

|    /    |

|   /     |



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 :)



Link to comment
Share on other sites

  • 3 weeks later...

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.";		}	});	
Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...