Mercurial > hg > Members > e105711

changeset 5:a730b51d59eb draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
6th:use stat.js,divide render and update,change a way of updating game.
author e105711 <yomitan.ie.u-ryukyu.ac.jp>
date Fri, 04 May 2012 05:22:57 +0900
parents a22ff379000f
children 8c25fd3f9866
files webGL/DrumSimulator.html webGL/src/f4notes.js webGL/src/mainfunc.js webGL/src/stats.js
diffstat 4 files changed, 80 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/webGL/DrumSimulator.html	Fri May 04 01:18:13 2012 +0900
+++ b/webGL/DrumSimulator.html	Fri May 04 05:22:57 2012 +0900
@@ -14,6 +14,7 @@
     <script src="src/jkl-parsexml.js"></script>
     <script src="src/f4notes.js"></script>
     <script src="src/Note.js"></script>
+    <script src="src/stats.js"></script>
   </head> 
   <script id="vshader" type="x-shader/x-vertex">
     uniform mat4 u_modelViewProjMatrix;
@@ -57,30 +58,66 @@
     }
   </script> 
   <script> 
-    
+    renderStats = new Stats();
+    updateStats = new Stats();
+
     var WIDTH = 1024;
     var HEIGHT = 640;
     var MODE = TITLE;
     notesArray = [];
-    var Interval = 30;
+    var FPS = 30;
+    var Interval = 1000/FPS;
     function main(){
+    document.body.appendChild(renderStats.domElement);
+    document.body.appendChild(updateStats.domElement);
     c = document.getElementById("example");
     c.width = WIDTH;
     c.height = HEIGHT;
     var ctx = init();
     framerate = new Framerate("framerate");
-    l = function(){loop(ctx)};
+//    l = function(){loop(ctx)};
+
+    loop = (function(){
+        nextGameTick = (new Date).getTime();
+        return function(){
+	  while((new Date).getTime()>nextGameTick){
+            updateStats.update();
+            gameUpdate(MODE);
+            nextGameTick += Interval;
+          }
+          renderStats.update();
+          gameRender(ctx,MODE);
+        };
+    })();
+
     loadNotes();
     loadSounds();
     ptime=0;
-//    gameStart();
+    time1=0
     }
     
     function gameStart(){
+    setInterval(loop,0);
+    }
+
+/*
+    function loop(ctx){ //main loop
     d1 = new Date();
-    time1 = d1.getMilliseconds();
-      setInterval(l,Interval);
+    framerate.snapshot();
+    gameRender(ctx,MODE);
+    d2 = new Date();
+    ptime = d2.getMilliseconds()-time1;
+    ttime = d2.getMilliseconds() - d1.getMilliseconds();
+    if(ttime<0)
+    ttime+=1000;
+    if(ptime<0)
+    ptime+=1000;
+
+    console.log("ptime is "+ptime+", ttime is "+ttime);
+    time1 = d2.getMilliseconds();
+    setTimeout(l,Interval-ttime);
     }
+*/
 
     function init(){
     var gl = initWebGL("example","vshader","fshader",["vNormal","vTexCoord","vPosition"],[0,0,0,1],10000);
@@ -92,16 +129,6 @@
     return gl;
     }
     
-    function loop(ctx){ //main loop
-    d2 = new Date();
-    framerate.snapshot();
-    gameRender(ctx,MODE);
-    ptime = d2.getMilliseconds()-time1;
-    if(ptime<0)
-    ptime+=1000;
-    console.log("time is "+ptime);
-    time1 = d2.getMilliseconds();
-    }
 
     width = -1;
     height = -1;
@@ -123,12 +150,7 @@
     border: 2px solid black;
     }
   </style> 
-  <body onload="main()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:hidden'>
-    <font size="4">
-      TITLE) SPACE:Go to MAIN MODE<br>
-      MAIN MODE)S:High-hat &nbsp;&nbsp; D:Snare  &nbsp;&nbsp; F:Kick  &nbsp;&nbsp; J:Tom  &nbsp;&nbsp; K:Cymbal  &nbsp;&nbsp; SPACE:Play/Stop &nbsp;&nbsp; <!--A:AUTO PLAY<br>-->
-      <!--  	AUTO PLAY)Q:Quit(Back to MAIN MODE)-->
-    </font>
+  <body onload="main()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:scroll'>
     <div id="framerate"></div> 
     <canvas id="example"> 
       There is supposed to be an example drawing here, but it's not important.
--- a/webGL/src/f4notes.js	Fri May 04 01:18:13 2012 +0900
+++ b/webGL/src/f4notes.js	Fri May 04 05:22:57 2012 +0900
@@ -5,7 +5,6 @@
 	note.kill(); 
     if(!note.isAlive())
 	return;
-    note.updLocate(testBPM,1.0);
 
     if(note.getLane()%2!=0){
 	PutSpriteF(ctx,58.984375+(note.getLane()-1)*11.71875,note.getLocate(),1,imgs[4]);
@@ -15,6 +14,14 @@
     }
 }
 
+function updNote(note){
+    if(note.getLocate() > 105 && note.isAlive())//105:line's locate
+	note.kill(); 
+    if(!note.isAlive())
+	return;
+    note.updLocate(testBPM,1.0);
+}
+
 function loadNotes(){
 /*    notesArray.push(new Note(0,4,testBPM));
     notesArray.push(new Note(0.25,4,testBPM));
--- a/webGL/src/mainfunc.js	Fri May 04 01:18:13 2012 +0900
+++ b/webGL/src/mainfunc.js	Fri May 04 05:22:57 2012 +0900
@@ -11,6 +11,19 @@
     }
 }
 
+function gameUpdate(MODE){
+    switch(MODE){
+    case TITLE:
+//	titleUpdate();
+	break;
+    case MAIN:
+//	mainUpdate();
+	break;
+    case PLAY:
+	playUpdate();
+    }    
+}
+
 function titleRender(ctx){
     reshape(ctx);
     ctx.clearColor(0,0,0.15,1);
@@ -43,4 +56,10 @@
     }
     PutSpriteF(ctx,100,70,1,imgs[6]);
     ctx.flush();
+}
+
+function playUpdate(){
+    for(i=0;i<notesArray.length;i++){
+	updNote(notesArray[i]);
+    }
 }
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webGL/src/stats.js	Fri May 04 05:22:57 2012 +0900
@@ -0,0 +1,9 @@
+// stats.js r5 - http://github.com/mrdoob/stats.js
+var Stats=function(){function w(d,K,n){var u,f,c;for(f=0;f<30;f++)for(u=0;u<73;u++){c=(u+f*74)*4;d[c]=d[c+4];d[c+1]=d[c+5];d[c+2]=d[c+6]}for(f=0;f<30;f++){c=(73+f*74)*4;if(f<K){d[c]=b[n].bg.r;d[c+1]=b[n].bg.g;d[c+2]=b[n].bg.b}else{d[c]=b[n].fg.r;d[c+1]=b[n].fg.g;d[c+2]=b[n].fg.b}}}var v=0,x=2,e,y=0,l=(new Date).getTime(),J=l,z=l,o=0,A=1E3,B=0,m,g,a,p,C,q=0,D=1E3,E=0,h,i,r,F,s=0,G=1E3,H=0,j,k,t,I,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mem:{bg:{r:48,
+g:16,b:26},fg:{r:255,g:0,b:128}}};e=document.createElement("div");e.style.cursor="pointer";e.style.width="80px";e.style.opacity="0.9";e.style.zIndex="10001";e.addEventListener("click",function(){v++;v==x&&(v=0);m.style.display="none";h.style.display="none";j.style.display="none";switch(v){case 0:m.style.display="block";break;case 1:h.style.display="block";break;case 2:j.style.display="block"}},false);m=document.createElement("div");m.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
+2)+","+Math.floor(b.fps.bg.b/2)+")";m.style.padding="2px 0px 3px 0px";e.appendChild(m);g=document.createElement("div");g.style.fontFamily="Helvetica, Arial, sans-serif";g.style.textAlign="left";g.style.fontSize="9px";g.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";g.style.margin="0px 0px 1px 3px";g.innerHTML='<span style="font-weight:bold">FPS</span>';m.appendChild(g);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";m.appendChild(a);
+p=a.getContext("2d");p.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";p.fillRect(0,0,a.width,a.height);C=p.getImageData(0,0,a.width,a.height);h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";e.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize=
+"9px";i.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MS</span>';h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);r=a.getContext("2d");r.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";r.fillRect(0,0,a.width,a.height);F=r.getImageData(0,0,a.width,a.height);try{if(webkitPerformance&&webkitPerformance.memory.totalJSHeapSize)x=
+3}catch(L){}j=document.createElement("div");j.style.backgroundColor="rgb("+Math.floor(b.mem.bg.r/2)+","+Math.floor(b.mem.bg.g/2)+","+Math.floor(b.mem.bg.b/2)+")";j.style.padding="2px 0px 3px 0px";j.style.display="none";e.appendChild(j);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.textAlign="left";k.style.fontSize="9px";k.style.color="rgb("+b.mem.fg.r+","+b.mem.fg.g+","+b.mem.fg.b+")";k.style.margin="0px 0px 1px 3px";k.innerHTML='<span style="font-weight:bold">MEM</span>';
+j.appendChild(k);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";j.appendChild(a);t=a.getContext("2d");t.fillStyle="#301010";t.fillRect(0,0,a.width,a.height);I=t.getImageData(0,0,a.width,a.height);return{domElement:e,update:function(){y++;l=(new Date).getTime();q=l-J;D=Math.min(D,q);E=Math.max(E,q);w(F.data,Math.min(30,30-q/200*30),"ms");i.innerHTML='<span style="font-weight:bold">'+q+" MS</span> ("+D+"-"+E+")";r.putImageData(F,0,0);J=l;if(l>
+z+1E3){o=Math.round(y*1E3/(l-z));A=Math.min(A,o);B=Math.max(B,o);w(C.data,Math.min(30,30-o/100*30),"fps");g.innerHTML='<span style="font-weight:bold">'+o+" FPS</span> ("+A+"-"+B+")";p.putImageData(C,0,0);if(x==3){s=webkitPerformance.memory.usedJSHeapSize*9.54E-7;G=Math.min(G,s);H=Math.max(H,s);w(I.data,Math.min(30,30-s/2),"mem");k.innerHTML='<span style="font-weight:bold">'+Math.round(s)+" MEM</span> ("+Math.round(G)+"-"+Math.round(H)+")";t.putImageData(I,0,0)}z=l;y=0}}}};