Babylon.js tutorials - Learn by creating a complete game

[GameMonetize]

pointerlock is already supported by bjs

 

Beside that, I reallly love this tutorial

[Temechon]

Indeed, but I thought it was only for fullscreen. 

Thank you

[joshcamas]

Noice tut!

 

I don't like the pointer-image not being javascript, however. This is just personal, but I like having everything controlled by javascript.

Could you post a tutorial on how to make a sprite act like a image? (follow camera)

[gryff]

Hi Temechon - another great tutorial from which I can learn stuff

 

A couple of questions though:

 

1.  "Our game will have several javascript classes". I was under the impression that javascript was a classless language - is that my limited knowledge of javascript betraying itself?

 

2. Am I correct in thinking that the Asset Manager does not load lights and cameras? Neither are mentioned on the wiki link you gave.

 

As for the game itself - I was surrounded by spheres within a minute - but then I've never been much good with fps games  

 

cheers, gryff  

[Temechon]

Hi gryff, 

 

1. Javascript is prototype-based actually, not class-based. It's pretty much the same.

2. I think you are right, Assets Manager only imports meshes/text/images/binary... But I'm not sure.

 

Thank you

[GameMonetize]

2. this is correct. If you need to load a complete scene then you can use SceneLoader

[Temechon]

Hey guys ! New tutorial here : http://pixelcodr.com/tutos/physics/physics.html

 

Learn to play with Oimo

[Wingnut]

Nice work, T-doggy, but, I think you're just halfway.  You should probably cover turning and jumping.  I really want to see you go thru the hell I did... with my flying 4-poster bed.  (misery loves company) 

 

Player objects don't really use/want translational and rotational "drift", but for spacecraft, such drift is almost required (no friction in zero-G space).  Thus, I used dual impulsing to do the turns (or else I got 'skid' - vehicle wouldn't turn on a dime).  I used one impulsing with contact point forward of center, and another impulsing in the opposite direction (at the same time) with contact point behind center.  Twist action.  The amount of forward and backward contact point offset... sets the turn leveraging.

 

Turn speed/force = force + contact point offset amount from center.  (erf)  And... I needed to do that on all 3 axes!  OMG!

But then... once you turn the player (or in my case, the spacecraft), all the translate impulsings need to change force angles.  They need to be transformed by the amount of turn on the rotation quaternion.  AND, I needed to do that for all 3 axes, too.  (Deltakosh rescued me from that mud hole, thx bud!)

 

And maybe you will need to turn the player on all three axes, too, if you want the player to lay down on its belly, back or sides, when it gets killed.  :/  Ain't I a turd?

 

When you get your tumor, I would like to sign it, if that's ok. 

[Temechon]

Hey Wingnut, 

 

My tutorial purpose is not to cover the whole physics topic, but only to give some tips/pointers to help a new comer.

However, I may think of a solution for your problem. You don't need to recalculate all the things when the players is rotated with physics, and you can get along with something like this : 

this.b.computeWorldMatrix();var v = new BABYLON.Vector3(0,0,1);var m = this.b.getWorldMatrix();var v2 = BABYLON.Vector3.TransformCoordinates(v, m);v2.subtractInPlace(this.b.position);v2.scaleInPlace(10);this.b.applyImpulse(v2, this.b.position);

Basically, you ask to Babylon to compute the 'forward' axis in the mesh world, so you just have to transform the forward vector into the mesh world matrix.

 

I may start a new tutorial on the 'rotation' topic, maybe it will be useful indeed.

 

Cheers, 

[Wingnut]

Hi again, Temechon!  Yep, you are on the right track with your comment.  Here's the transform function that Deltakosh gave me.

	//  a special func - thanks Deltakosh! 	BABYLON.FlyerFrameController.prototype.doTransformPerFlyerQuat = function (vec) {		var mymatrix = new BABYLON.Matrix();		this.flyerframe.handle.rotationQuaternion.toRotationMatrix(mymatrix);		return BABYLON.Vector3.TransformNormal(vec, mymatrix);	};

Then when I needed to do a translation (along spacecraft -x for this function)...  I did this:

BABYLON.FlyerFrameController.prototype.transNegativeX = function () {        // turn on the particle emitters for the thrusters	this.flyerframe.thrusters[7].start();	this.flyerframe.thrusters[10].start();	this.flyerframe.thrusters[13].start();	this.flyerframe.thrusters[16].start();        // set a force vector for impulse, after applying the rotation of craft	var forcevec = this.doTransformPerFlyerQuat(new BABYLON.Vector3(-this.transforce, 0, 0));        // set a contact point to center of the spacecraft	var cntptvec = this.flyerframe.handle.position;        // throttle on	this.flyerframe.handle.applyImpulse(forcevec, cntptvec);};

Rotation was a bit more challenging.  We must rotate the physics imposter with the mesh.  So... rotations must be done using applyImpulse (as far as I know).  But I could be wrong. 

 

Remember I said/showed that I positioned one contact point forward of center, and another behind center, then do two impulsings, to cause a twist?  Well, even the (re-)positioning of those contact points, needed to consider the current quaternion rotation of the spacecraft.  So here's the nightmare function that does a -x local-axis physics-active rotation (nose pitch up).  Gruesome.  Heavy comments.

BABYLON.FlyerFrameController.prototype.rotNegativeX = function () {	this.flyerframe.thrusters[6].start();	this.flyerframe.thrusters[12].start();	this.flyerframe.thrusters[15].start();	this.flyerframe.thrusters[21].start();	// Init the contact point location to the center of the flyer, no matter where flyer is located	var flyer_center = this.flyerframe.handle.position;	// ------------------------------------------------------------------------	// Pitch nose UP by creating a twist motion. Do TWO impulses, one -z above center, one +z below center.	// First, prepare for the upper force...        //          +y        //          |        //   -z --> |        //          o            <<<flyer<<< - left side view        //          |        //          |        //         -y	// Get the direction of +y axis, after applying flyer's unknown rotationQuaternion values.	// Move the contact point UP by adding a +y offset (leverage) to the flyer's center point.	var contact_point = flyer_center.add(this.doTransformPerFlyerQuat(new BABYLON.Vector3(0, this.offset, 0)));	// Get the direction of -z axis considering flyer's rotationQuaternion, to be used for thrusting -z.	var force_direction = this.doTransformPerFlyerQuat(new BABYLON.Vector3(0, 0, -1));	// Thrust it #1	this.flyerframe.handle.applyImpulse(force_direction, contact_point);	// Now, prepare for the lower force...        //          +y        //          |        //          |        //          o            <<<flyer<<< - left side view        //          | <-- +z        //          |        //         -y	// Get direction of -y axis, after applying flyer's unknown rotationQuaternion values.	// Move the contact point DOWN by adding a -y offset (leverage) to the flyer's center point.	contact_point = flyer_center.add(this.doTransformPerFlyerQuat(new BABYLON.Vector3(0, -this.offset, 0)));	// Get the direction of +z axis considering flyer's rotationQuaternion, to be used for thrusting +z.	force_direction = force_direction.negate();	// Thrust it #2	this.flyerframe.handle.applyImpulse(force_direction, contact_point);};

Deltakosh mentioned computing up-vectors and forward vectors, just like you did, but I didn't understand it real well.  Notice I had to draw myself diagrams to keep my crap together. 

 

A smarter person than I could have used arguments and managed to get all rotating and translating done with two functions (plus the Deltakosh transform function).  I... used 6 functions for rotating, and 6 functions for translating (I'll improve it someday).  Shown above... are only the -x rotation and -x translation functions, and the transformer.

 

I think some framework tools would be handy for users wanting to rotate and translate physics objects (always using applyImpulse to do it).  Such things sure would have made my job easier when i built the dreaded flyerframe controller class.  Its a big class, but it doesn't help that so many keypress options were allowed. 

 

In the beginning, I was going to have the flyer ONLY be controlled by control and shift numberpad keys... but then Deltakosh said he didn't have a numberpad on his computer, and I couldn't have one of my heroes not being able to fly it.  So I also activated control and shift O K L ; . pgUp, pgDn... and then I also activated 12 html buttons on a sidepanel that could be held-down.  Thus, any given rotation or translation... has three ways to activate it.  erf.  36 kbytes of controller.  Ouch.

 

But all the flyer translations travel in the correct direction, now, even if the flyer is upside-down, or on its side.  The current quaternion rotation is accounted-for... on every little applyimpulse, even when the key is held down.  This allows for proper flyer activity... even if the flyer is translated while a rotational drift is still happening. ie. When the spacecraft has a spin going, translation directions are updated constantly accounting for the active rotation).

 

4 months.  It took 4 months for me to figure out how to ASK Deltakosh what I needed to accomplish.  I read so much complicated crap about quaternions that I got a tumor!  As soon as DK understood my whining, it took him 32 seconds to show me the answer.  hehe.  All because I didn't know how to speak transforms/matrices yet.    Still don't.  heh

 

The needed tools... in my opinion...

 

physicsTranslateConsideringCurrentRotation(mesh, (+/-)axis, contactPoint, forceAmount);  // a single impulser

   and

physicsRotateConsideringCurrentRotation(mesh, (+/-)axis, twistLeverageAmount, forceAmount);   // a "twister" dual impulser

 

With those two 'impulsing funcs', life would be much easier for the physics object-moving user, in my opinion.

 

Oh well, its all good fun!  Sorry for the long post, and I hope you didn't take any offense, Temechon.  I like talking with you and doing a little "ribbing" along the way.    (but I sometimes take it too far, according to friends).  Hope I didn't with you.  Maybe we can build these two physics-moving functions, together, along with other tool geniuses, and get them into production someday.

 

As far as your tutorials, if I were you, I would simply name your latest tutorial "Moving Anything Using Impulsings"... and then keep fleshing that puppy.  (moving = translating AND rotating, in this case).  There's really only three categories of things to impulse-move.  1. Players, 2. general ground-based mesh (cars, cannon balls, soccer balls, etc), and 3. spacecraft/helicopters.  Your super-tutorial could provide an example of impulse-translating and impulse-rotating... for each of those.  NOW you have a nice one-stop tutorial for the physics engine experimenters, yes?  *shrug*

 

Later you can add-on semi-truck sim...  and baggage cart train sim... hehe... incorporate links... to trailers.    Haywagons!  Hayride!  All aboard Temechon's "physics links" sub-section!  Waterskier!  Send 'em on "the whip"!  FUN (with physics links)!!  YAY!

 

See how the word "move" is... umm... ambiguous?  Rotation is a movement just like translation/position.  So... our core function called moveWithCollision() ... is actually poorly named.  It should maybe be translateWithCollision(), and it should have a sister function called rotateWithCollision().  And maybe ANOTHER function called scaleWithCollision().  But that's not physics engine stuff, so we'll discuss that another time and another place. 

[rans0000]

This is a great tutorial series. I've been thinking of learning 3d game development for a long time but was setting it aside because of the complexity and time required.
Your tutorial series finally convinced me to jump in and also to choose BabylonJS as the starting library. Checking it in 2018, I saw some of the tuts are taken out. Is there any chance of bringing them back or adding new ones? Thanks.

[JohnK]

Hi @rans0000 and welcome to the forum. You might find this useful https://doc.babylonjs.com/resources/offsite_tutorials_list

 

[rans0000]

Thankyou @JohnK. This is a very helpful link.

[i_tejas19]

Thanks for this, it's a great help..?