Commits

Philipp Tiefenbacher committed 1407bf0 Draft

started CellSpace game loop cleanup

  • Participants
  • Parent commits 3c98641

Comments (0)

Files changed (3)

 	<script data-main="src/game/CellSpace" src="src/game/libs/require.js"></script>
 </head>
 <body>
-	<canvas id="c" width="100" height="100" style="border:1px solid green; position: fixed; top: 0px;left: 0px;" ></canvas>
+	<canvas id="c" width="100" height="100" style="border:0px solid black; position: fixed; top: 0px;left: 0px; z-index:0;" ></canvas>
 	<br>
-	<div style="border:1px solid green; position: fixed; top: 0px;right: 0px;">
-		fps<input size="1" id="fps">
+	<div style="border:0px solid black; position: fixed; top: 0px;left: 0px; z-index:1; color:#DDDDDD; font-family:monospace;">
+		fps: <span id="fpsMonitor">n/a</span>
 	</div>
 </body>
 </html>

src/game/CellSpace.js

 		loader.load("painter", "src/game/shaders/primitiveRenderer.shader", "text");
 		loader.load("intersectSpawn", "src/game/shaders/intersectSpawn.shader", "text");
 		
-		var frames = 0;
-		function fr(){
-			var ti = new Date().getTime();
-			var fps = Math.round(1000*frames/(ti - time));
-			document.getElementById('fps').value = fps;
-			frames = 0;  time = ti;
-		}
-		timer = setInterval(fr, 1000);
-		time = new Date().getTime();
-
+		var fpsMonotor = new utils.FPSMonitor("fpsMonitor");
 
 /*
 		reactor.moveParticles(particlesMoveShader, particlesDish);
 		reactor.renderParticles(particlesRenderShader, particlesDish, state, size);
+		// reactor.collideParticles( // TODO: colission 
 */
-		// reactor.collideParticles( // TODO: colission 
 
 		loader.start(function (data) {
 			var gameW = 1024, gameH = 1024;
 				});
 
 				cnt++;
-				frames++;
+				fpsMonotor.frameIncrease();
 			});
 
 			gameLoop.start();

src/game/Utils.js

 	}
 
 	requestAnimFrame = (function(){
-  return  window.webkitRequestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    function(callback, element){ setTimeout(callback, 1000 / 60); }
+		return  window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		function(callback, element){ setTimeout(callback, 1000 / 60); }
 	})();
 
 	var AnimationLoop = function(callback) {
 		this.pauseRequested = true;
 	}
 
+	var FPSMonitor = function(elementID) {
+		this.frames = 0;
+
+		var delayMs = 1000;
+		var time;
+		var monitorContext = this;
+
+		function fr(){
+			var ti = new Date().getTime();
+			var fps = Math.round(1000*monitorContext.frames/(ti - time));
+			document.getElementById(elementID).innerHTML = fps.toString();
+			monitorContext.frames = 0;  
+			time = ti;
+		}
+		var timer = setInterval(fr, delayMs);
+		time = new Date().getTime();
+	};
+	FPSMonitor.prototype.frameIncrease = function() {
+		this.frames++;
+	}
+
 	var Keyboard = {
 	  _pressed: {},
 
 		getArrayBufferFromURL : getArrayBufferFromURL, 
 		ResLoader : ResLoader, 
 		AnimationLoop : AnimationLoop,
+		FPSMonitor : FPSMonitor,
 		keyboard : Keyboard
 	};
-
-
-
 });