Temechon

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 !

 

 

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

 

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
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.

Share this post


Link to post
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            });

Share this post


Link to post
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.  

Share this post


Link to post
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

 

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

 

cheers, gryff :)

Share this post


Link to post
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 ;)

post-5218-0-05460400-1407332057.jpg

Share this post


Link to post
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 :)

Share this post


Link to post
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 : 

 

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,

Share this post


Link to post
Share on other sites

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.";		}	});	

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.