ProfessorF Posted January 2, 2014 Share Posted January 2, 2014 I'm writing a research article on infographics, and one of the examples I created was an infographic for videogames: I was reminded of this graphic as I was programming a third-person-follow camera in Babylon.js. You can use these basic math concepts to move characters, move missiles, to position cameras etc. And this is even the basic math you need to know for "monsters" orienting towards a player and chasing the player. While this looks like it's just for 2D games, you can use it for basic 3D games--just think in terms of the XZ instead of the XY coordinate system. Anyway, yes, I use a lot of linear algebra knowledge for more advanced graphics programming, but for basic "stuff" the knowledge in this diagram is good enough (I think). Feedback would be appreciated. I'd like to hear what other basic math the community uses. Thank you in advance,, - Nick Update: Below is a more general infographic, which may be of use to highschool math teachers for trignometry & geometry problems.(I almost never use the arcsin, arccos functions in my virtual worlds--dx, dy, arctan, distance formula) Artem, elessar.perm, c75 and 1 other 4 Quote Link to comment Share on other sites More sharing options...
Bluevessel Games Posted January 2, 2014 Share Posted January 2, 2014 thanks, very interesting! Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 3, 2014 Share Posted January 3, 2014 This level of mathematics is incomprehensible to me. I have never learned algebra in my life.I have never made a game by employing of such mathematical. Quote Link to comment Share on other sites More sharing options...
reddozen Posted January 3, 2014 Share Posted January 3, 2014 have to be conservative with distance. sqrts can be expensive. A lot of times you're better off doubling your test value and dropping the sqrt. if (10<=sqrt(pow(2,2)+pow(3,2))) becomes if(pow(10,2)<=(pow(2,2)+pow(3,2))) or really just flat our multiply them... if(10*10)<=((2*2)+(3*3))) ProfessorF 1 Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 3, 2014 Author Share Posted January 3, 2014 Good point reddozen. I like learning about all the "tweaks" developers make to the math. Dad72, depending on the game, you may not need this math at all. But if you have to rotate your avatar (A) towards some object (O), you need an angle, and that's the math I use to figure out that angle. Although be careful in Babylon.js because 3D characters are already rotated -90 degrees (like dude). So if you want dude facing 45 degrees, you have to actually rotate -(90+45). I'll add some examples to this thread. But in one of the posts I show the code for clicking on a plane and orienting + moving Dude towards the click. I'll clean it up and repost here using the variables in the infographic. Thanks guys! GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 3, 2014 Share Posted January 3, 2014 That's just brutally cool:) ProfessorF 1 Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 3, 2014 Author Share Posted January 3, 2014 Dad72, here's one way I use the math: Below is the exact code I used. Note:1) All y-variables are replaced by z-variables because the plane is XZ, not XY2) Where I click becomes ox,oz3) Dude starts off rotated 90 degrees so you, can't just do: A=atan2(dz, dx). You have to correct: A=-(Math.PI/2+atan2(dz, dx)) CODE using the basic math. If you use this code, you will have to put dude.babylon in the folder Assets/Dude:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Tutorial: Basic Math for Video Games</title> <script src="js/babylon.js"></script> <script src="js/hand.js"></script> <script> window.addEventListener("load", start); // first line of code executed window.addEventListener("click", handleClick); var canvas, engine, scene, light, camera, zero, ground, Avatar, ox, oz, dx, dz, A, D; function start() { canvas = document.getElementById("cvRAVE"); engine = new BABYLON.Engine(canvas, true); scene = new BABYLON.Scene(engine); light = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(1, -1, 1), scene); camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 8, -10), scene); ground = new BABYLON.Mesh.CreateGround("ground", 1024, 1024, 1, scene); ground.material = new BABYLON.StandardMaterial("texGround", scene); ground.material.diffuseTexture = new BABYLON.Texture("geotrigtexture.png", scene); BABYLON.SceneLoader.ImportMesh("him", "assets/dude/", "dude.babylon", scene, function (meshes, particles, skeletons) { Avatar = meshes; Avatar[0].scaling = new BABYLON.Vector3(.1, .1, .1); scene.beginAnimation(skeletons[0], 0, 120, true, 1.0); }); scene.activeCamera.attachControl(canvas); engine.runRenderLoop(update); } function update() { if (Avatar) { ax = Avatar[0].position.x; az = Avatar[0].position.z; dx = ox - ax; dz = oz - az; D = Math.sqrt(dx * dx + dz * dz); // Dude is rotated 90; Positive Y rotations are clockwise // You need to correct dude by duderot+90--backwards (negative) A = -(Math.atan2(dz, dx) + Math.PI / 2); if (D > 1) { Avatar[0].rotation.y = A; Avatar[0].position.x += (dx / D); Avatar[0].position.z += (dz / D); } } scene.render(); } function handleClick(event) { // https://github.com/BabylonJS/Babylon.js/wiki/11---Picking-collisions var picked = scene.pick(event.clientX, event.clientY); if (picked.hit) { ox = picked.pickedPoint.x; oz = picked.pickedPoint.z; } } </script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #cvRAVE { width: 100%; height: 100%; } </style></head><body> <canvas id="cvRAVE"></canvas></body></html> Dad72 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 3, 2014 Share Posted January 3, 2014 Thanks You ProfessorF The ideal would be to have in Babylon in BABYLON.Mesh the function : LookAt(worldPosition:Vector3, worldUp:Vector3 = Vector3.up);Ennemie.position.LookAt(new BABYLON.Vector3(Player.position.x, Player.position.y, Player.position.z), BABYLON.Vector3.up);Thus the enemy would look at in the direction of the player and move in his direction.@DeltaKosh: It would be possible to have this feature in Babylon. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 3, 2014 Share Posted January 3, 2014 If Prof is ok to make a pull request it will be great:) Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 3, 2014 Author Share Posted January 3, 2014 Yes, that would be useful. You will have to add a rotation-correction factor because most character models are rotated -90 degrees. Although it may still be good to know the math so that you have more flexible control over the movement of objects. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 3, 2014 Share Posted January 3, 2014 You have not replied to my question DeltaKosh? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 3, 2014 Share Posted January 3, 2014 I do. I said yes and I proposed Prof to do the job:) Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 3, 2014 Share Posted January 3, 2014 Ah, ok, i had not understood. Sorry and Thank You. Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 3, 2014 Author Share Posted January 3, 2014 Haha, yeah I can add that. I'll add that over the weekend! Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 3, 2014 Share Posted January 3, 2014 Haha, yeah I can add that. I'll add that over the weekend! Great if you add a function LookAt( ); Thanks in advance ProfessorF Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 4, 2014 Share Posted January 4, 2014 With the function LookAt( ), it would be interesting also to be able to retrieve the distance between the player and the target.For example: (Member "magnitude")dirToMain = Player.position - Enemi.position;if(dirToMain.magnitude > 2) //play movement...else //stop movementhis would in addition to watch the target with "LookAt( )", to know the distance that the separated.It would be also interesting to have a Member "velocity" for the movement of a mesh. (rigidbody.velocity) or/and function TransformDirection(BABYLON.Vector3.forward * speed) What you think of that? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 4, 2014 Share Posted January 4, 2014 the distance is simple to evaluate: Player.position.subtract(Enemi.position).length() Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 4, 2014 Share Posted January 4, 2014 Cool, Thanks DeltaKosh. Quote Link to comment Share on other sites More sharing options...
gwenael Posted January 4, 2014 Share Posted January 4, 2014 the distance is simple to evaluate: Player.position.subtract(Enemi.position).length() dad72, you may want to use getAbsolutePosition instead of position just in case Player and Enemi do not have the same parent. If they have the same parent or no parent, you are fine to use position like suggesting by deltakosh. Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 6, 2014 Author Share Posted January 6, 2014 Okay Dad72, I almost have something working. Just have to make sure it's efficient and check on some weird rotation. Anyway, is this basically what you wanted for the LookAt: Quote Link to comment Share on other sites More sharing options...
gwenael Posted January 6, 2014 Share Posted January 6, 2014 That seems nice ProfessorF. Do you have to call LookAt any time you need it (in an update function for example) or is it like a flag that you add to the mesh so it will always look at its target? Something similar to physics constraint. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 6, 2014 Share Posted January 6, 2014 Yes, that is exactly this ProfessorF. Good works. It shalt be very useful.Thank You Quote Link to comment Share on other sites More sharing options...
ProfessorF Posted January 6, 2014 Author Share Posted January 6, 2014 That seems nice ProfessorF. Do you have to call LookAt any time you need it (in an update function for example) or is it like a flag that you add to the mesh so it will always look at its target? Something similar to physics constraint.Yes, currently you have to call it in update. Although I can add a flag. Thanks. Quote Link to comment Share on other sites More sharing options...
gwenael Posted January 6, 2014 Share Posted January 6, 2014 Great. It could be nice to add a constraints mechanism to mesh like an array of callbacks which would be called at each update. Thus, your "flag" would be a callback to constrain the mesh to look at. I can think about another constrain "catch me if you can" This constrain would be used instead of infiniteDistance for example. ProfessorF 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 7, 2014 Share Posted January 7, 2014 Constraints can be easily done with mesh.registerBeforeRender(func) ProfessorF 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.