Psychho Posted August 15, 2013 Share Posted August 15, 2013 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> 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.