Search the Community
Showing results for tags 'metrix.js'.
Found 3 results
-
I just whipped up another quick example for Metrix.js this time it shows you how to build a controllable player on a randomly generated heightmap with first person controls. You can try out the example here http://psych.gs/public_html/playgame.php?gameId=Metrix.js 0.3 - First Person Controls on HeightMap heres what the random terrain in the example looks like(for the lazy) and heres the source, requires three.js(http://threejs.org/) and Metrix.js(http://psych.gs/public_html/metrix.html) <!DOCTYPE html><html lang="en"><head> <script src="three.min.js"></script> <script src="Metrix0.3.js"></script> <script> var mouseLocked = false; var user,fpsControls; var terrainMap,terrainMesh; Metrix.WorldOptions.Gravity = 3; window.onload = function() { Metrix.Initialize(); }; Metrix.OnLoad = function() { var txt = new MUI.Element("span",document.body); txt.SetHTML("click anywhere to start"); Metrix.camera.position.set(0,10,0); user = new Metrix.Object(Metrix.camera,{velocity: true, slope: {start: 0.3}, collisions: true, gravity: true, mass: 30, drag: 2, bounds: {aabb: new Metrix.AABB(null,new THREE.Vector3(0.5,2,0.5),0,-1,0)}});//Create Metrix.Object to control velocity, collisions and gravity of the player user.AddUpdateCallback(userUpdate); fpsControls = new Metrix.FirstPersonController(Metrix.camera,1,1);//Add a first person controller to control yaw, pitch and look sensitivity terrainMap = new Metrix.HeightMap(new THREE.Vector3(0,0,0),1,Utils.GenerateHeightMap(1,20,-10,40,40,true));//Create a new height map thats randomly generated using Metrix.js's Utils.GenerateHeightMap(maxRandomClimb,maxHeight,minHeight,smooth,smoothingAmount) terrainMesh = terrainMap.GenerateMesh(new THREE.MeshPhongMaterial({color: 0x20af30, specular: 0x202020, shininess: 20, ambient: 0x109f20}));//Generate a THREE.Mesh from the height map Metrix.AddHeightMap(terrainMap);//Add the terrain to the metrix world var sun = new THREE.SpotLight(0xfafafa,1.5,0,-2); sun.position.set(40,100,90); Metrix.scene.add(terrainMesh); Metrix.scene.add(new THREE.AmbientLight(0x303030)); Metrix.scene.add(sun); window.addEventListener("click",function() { if (!mouseLocked) { Metrix.LockMouse(mouseMove,mouseExit);//If mouse isnt locked and mouse clicked, lock mouse Metrix.AddObject(user);//Unpause be adding user back to the metrix world } mouseLocked = true; }); Metrix.Go();//Start Metrix.js game loop }; function userUpdate() { if (Metrix.Key[KEY_W]) {//If W key down, move forward user.MoveForward(1); } if (Metrix.Key[KEY_D]) {//If D key down, move right user.MoveRight(1); } if (Metrix.Key[KEY_S]) {//If S key down, move backward user.MoveForward(-1); } if (Metrix.Key[KEY_A]) {//If A key down, move left user.MoveRight(-1); } if (Metrix.Key[KEY_SPACE] && user.Grounded()) {//If SPACE key down and user is on ground, jump user.velocity.y = 35; } } function mouseMove(mX,mY) { fpsControls.Look(-mX,-mY);//Look around, mX = mouse movement x, mY = mouse movement y } function mouseExit() { mouseLocked = false; Metrix.RemoveObject(user);//Remove user to pause the game once mouse lock is cancelled } </script></head><body></body></html> -
Heres the second tutorial for using Metrix.js along with Three.js, this tutorial explains the basics of how the Metrix.js entity system works and how to create objects/entities. In the tutorial you will learn how to create a Metrix.Object and a update callback to go with it to rotate the cube from our last tutorial. You can checkout the tutorial here http://www.psych.gs/wordpressblog/metrix-js-tutorial-1-entitiesobjects-and-rotating-the-cube/ And heres what you should have once you finish the tutorial
-
First tutorial of many on my game framework Metrix.js this is just the first so its simply on using it with Three.js to render a cube. The tutorial- http://www.psych.gs/wordpressblog/metrix-js-tutorial-0-the-basics-rendering-a-cube/