Temechon Posted July 19, 2014 Share Posted July 19, 2014 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!) Zimbofly, binyan, cpu_sam and 6 others 9 Quote Link to comment Share on other sites More sharing options...
gryff Posted July 19, 2014 Share Posted July 19, 2014 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 Zimbofly 1 Quote Link to comment Share on other sites More sharing options...
Temechon Posted July 19, 2014 Author Share Posted July 19, 2014 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 ! Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted July 20, 2014 Share Posted July 20, 2014 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. Quote Link to comment Share on other sites More sharing options...
Temechon Posted July 22, 2014 Author Share Posted July 22, 2014 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 Quote Link to comment Share on other sites More sharing options...
gryff Posted July 22, 2014 Share Posted July 22, 2014 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 Temechon and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
Zimbofly Posted July 23, 2014 Share Posted July 23, 2014 Awesome work man - really good for us beginners to get stuck into! thanks! Temechon 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted July 23, 2014 Share Posted July 23, 2014 @Temechon, you should reference your articles on the wiki Quote Link to comment Share on other sites More sharing options...
Temechon Posted July 24, 2014 Author Share Posted July 24, 2014 Thanks DK, I will do it ! Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted July 24, 2014 Share Posted July 24, 2014 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. Quote Link to comment Share on other sites More sharing options...
Temechon Posted July 24, 2014 Author Share Posted July 24, 2014 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 and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted July 24, 2014 Share Posted July 24, 2014 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. Temechon 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted July 30, 2014 Share Posted July 30, 2014 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 }); Carlos R 1 Quote Link to comment Share on other sites More sharing options...
Temechon Posted July 30, 2014 Author Share Posted July 30, 2014 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. Quote Link to comment Share on other sites More sharing options...
gryff Posted July 30, 2014 Share Posted July 30, 2014 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 Quote Link to comment Share on other sites More sharing options...
Temechon Posted August 6, 2014 Author Share Posted August 6, 2014 Hello guys, A new tutorial is live ! You can check it out here : http://pixelcodr.com/tutos/trees/trees.htmlYou 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 Quote Link to comment Share on other sites More sharing options...
gryff Posted August 6, 2014 Share Posted August 6, 2014 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 Quote Link to comment Share on other sites More sharing options...
Temechon Posted August 6, 2014 Author Share Posted August 6, 2014 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 3Two 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, gryff 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted August 6, 2014 Share Posted August 6, 2014 Thanks for this new tutorial Quote Link to comment Share on other sites More sharing options...
reddozen Posted August 7, 2014 Share Posted August 7, 2014 How about reading color data from a texture? lol Quote Link to comment Share on other sites More sharing options...
Temechon Posted August 28, 2014 Author Share Posted August 28, 2014 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, Quote Link to comment Share on other sites More sharing options...
Dad72 Posted August 28, 2014 Share Posted August 28, 2014 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."; } }); Quote Link to comment Share on other sites More sharing options...
Temechon Posted August 28, 2014 Author Share Posted August 28, 2014 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. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted August 28, 2014 Share Posted August 28, 2014 Ah yes, ok. I see. Quote Link to comment Share on other sites More sharing options...
Temechon Posted October 8, 2014 Author Share Posted October 8, 2014 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 ! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.