changeset 16:b322a8557f93 draft

draw text
author e105711 <yomitan.ie.u-ryukyu.ac.jp>
date Tue, 03 Jul 2012 23:20:21 +0900
parents 80789d11de5c
children 1e8fa3c370ab
files webGL/DrumSimulator.html webGL/ruby/directoryReader.rb webGL/src/Obj.js webGL/src/f4notes.js webGL/src/f4xml.js webGL/src/keybord.js webGL/src/loadMusicFiles.js webGL/src/mainfunc.js webGL/src/sound.js
diffstat 9 files changed, 131 insertions(+), 60 deletions(-) [+]
line wrap: on
line diff
--- a/webGL/DrumSimulator.html	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/DrumSimulator.html	Tue Jul 03 23:20:21 2012 +0900
@@ -19,6 +19,10 @@
     <script src="src/jquery-1.7.2.min.js"></script>
     <script src="src/Cursor.js"></script>    
     <script src="src/loadMusicFiles.js"></script>    
+<!--
+    <script src="src/MusicInformation.js"></script>
+    <script src="src/readFile.js"></script>
+-->
   </head> 
   <script id="vshader" type="x-shader/x-vertex">
     uniform mat4 u_modelViewProjMatrix;
@@ -76,11 +80,6 @@
 //    var WIDTH,HEIGHT,FPS,Interval
 
 
-function drawText(ctext,message){
-  ctext.font = "18px 'MS Pゴシック'";
-  ctext.fillStyle = "blue";
-  ctext.fillText(message, 10, 50, canvas4text.width);
-}
 
 function main(){
     document.body.appendChild(renderStats.domElement);
@@ -88,16 +87,11 @@
     c = document.getElementById("example");
     canvas4text = document.getElementById("textCanvas");
     ctext = canvas4text.getContext("2d");
-    canvas4text.height = 100;
     c.width = WIDTH;
     c.height = HEIGHT;
     cursor.reset();
     ctx = init();
 
-    drawText(ctext,"test1");
-    testImage = document.getElementById("textCanvas").toDataURL();
-    makeTextObj(ctx,"testImage",testImage,432,86);
-
     loop = (function(){
         nextGameTick = (new Date).getTime();
         return function(){
@@ -157,7 +151,7 @@
     <canvas id="example"> 
       There is supposed to be an example drawing here, but it's not important.
     </canvas> 
-    <canvas id="textCanvas" style="display: none;">
+    <canvas id="textCanvas" style="display:none;">
     </canvas>
     <div id="console"></div> 
   </body> 
--- a/webGL/ruby/directoryReader.rb	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/ruby/directoryReader.rb	Tue Jul 03 23:20:21 2012 +0900
@@ -3,12 +3,19 @@
 dir = Dir.open("../music/");
 file = File.open("../src/loadMusicFiles.js","w");
 file.print "function loadMusicFiles(){\n";
+file.print "\tvar jsonArray=[];\n";
 dir.each{|list|
   if list.match(".json") && !(list.match("~")) then
-    file.print "\tmusicsArray.push(\"music/" + list + "\");\n";
+    file.print "\tjsonArray.push(\"music/" + list + "\");\n";
   end
 }
-file.print "\tcursor.setMAX(musicsArray.length);\n";
+file.print "\tcursor.setMAX(jsonArray.length);\n";
+file.print "\tfor(var i=0;i<jsonArray.length;i++){\n";
+file.print "\t\tvar httpObj = jQuery.get(jsonArray[i],null,function(){\n";
+file.print "\t\t\tvar JSONObj = JSON.parse(httpObj.responseText);\n";
+file.print "\t\t\tmusicsArray.push(new MusicInformation(JSONObj.title,JSONObj.path));\n";
+file.print "\t\t});";
+file.print "\t}\n";
 file.print "}\n";
 dir.close();
 file.close();
--- a/webGL/src/Obj.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/Obj.js	Tue Jul 03 23:20:21 2012 +0900
@@ -1,8 +1,8 @@
-var Obj = function(x,y,scale,imgNo){
+var Obj = function(x,y,scale,imgName){
 
     this.x = x;
     this.y = y;
     this.scale = scale;
-    this.imgNo = imgNo;
+    this.imgName = imgName;
 
-};
\ No newline at end of file
+};
--- a/webGL/src/f4notes.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/f4notes.js	Tue Jul 03 23:20:21 2012 +0900
@@ -10,8 +10,8 @@
 	    var note = notesArray[i][j];
 	    if(note.getLocate()<0) //note isn't in the screen.
 		break;
-	    var noteObj = imgs[5-(note.getLane()%2)];
-	    PutSpriteF(ctx,58.984375+(note.getLane()-1)*11.71875,note.getLocate(),1,noteObj,noteObj.texture);
+	    var noteObj = (note.getLane()%2==0) ? ctx.obj["pink_notes"] : ctx.obj["blue_notes"];
+	    PutSpriteF(ctx,58.984375+(note.getLane()-1)*11.71875,note.getLocate(),1,noteObj);
 	}
     }
 }
@@ -145,7 +145,6 @@
 }
 
 function loadMusics(filepath){
-
     var httpObj = jQuery.get(filepath,null,function(){
 	var JSONObj = JSON.parse(httpObj.responseText);
 	console.log("loadNotes : load '" + JSONObj.title + "'");
@@ -155,7 +154,13 @@
 	    noteAdd(note.time,note.lane,note.BPM);
 	}
 	audioBGM.play();
-    }
-    );
+    });
+}
 
+function loadMusicTitle(index){
+    var filepath = musicsArray[index];
+    var httpObj = jQuery.get(filepath,null,function(){
+	var JSONObj = JSON.parse(httpObj.responseText);
+	drawText(ctx,"music_title",JSONObj.title,60,"white","center",432,86);
+    });
 }
--- a/webGL/src/f4xml.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/f4xml.js	Tue Jul 03 23:20:21 2012 +0900
@@ -1,21 +1,13 @@
 function parseXml(gl){
-    imgs = [];
-    loadObjXml(gl,"./xml/title.xml"); //0
-    loadObjXml(gl,"./xml/press.xml");
-    loadObjXml(gl,"./xml/test.xml");
     loadObjXml(gl,"./xml/line.xml");
     loadObjXml(gl,"./xml/blue_notes.xml");
-    loadObjXml(gl,"./xml/pink_notes.xml"); //5
+    loadObjXml(gl,"./xml/pink_notes.xml");
     loadObjXml(gl,"./xml/back.xml");
-    loadObjXml(gl,"./xml/select_music.xml");
-    imgs.push(gl.obj["title"]);
-    imgs.push(gl.obj["press"]);
-    imgs.push(gl.obj["test"]);
-    imgs.push(gl.obj["line"]);
-    imgs.push(gl.obj["blue_notes"]);
-    imgs.push(gl.obj["pink_notes"]);
-    imgs.push(gl.obj["back"]);
-    imgs.push(gl.obj["select_music"]);
+    drawText(gl,"title"," Drum Simulator ",60,"white","center",432,86);
+    drawText(gl,"press"," Press Space ",60,"white","center",320,60);
+    drawText(gl,"main_mode"," main mode ",60,"white","center",450,70);
+    drawText(gl,"select_music"," select music ",60,"white","center",450,70);
+    drawText(gl,"music_title","",60,"white","center",432,86);
 }
 
 function loadObjXml(gl,url)
@@ -30,6 +22,65 @@
     }
 }
 
+function drawText(ctx,name,message,fontSize,color,xPosition,w,h){
+    if(typeof w === "undefined")
+	w = fontSize*jstrlen(message)/2;
+    if(typeof h === "undefined")
+	h = fontSize;
+    canvas4text.width = w;
+    canvas4text.height = h;
+    
+    ctext.shadowBlur = 0.5;
+    ctext.shadowColor = "black";
+    ctext.font = fontSize+"px 'Times New Roman'";
+    ctext.fillStyle = color;
+    switch(xPosition){
+    case "center":
+	ctext.textAlign = "center";
+	var x = canvas4text.width/2;
+	break;
+    case "left":
+	ctext.textAlign = "left";
+	var x = 0;
+	break;
+    case "right":
+	ctext.textAlign = "right";
+	var x = canvas4text.width;
+	break;
+    }
+/*
+    switch(yPosition){
+    case "center":
+	var y = canvas4text.height/2+size/4;
+	break;
+    case "top":
+	var y = size;
+	break;
+    case "bottom":
+	var y = canvas4text.height - size/4;
+	break;
+    }
+*/
+    var y = canvas4text.height/2+fontSize/4;
+    ctext.fillText(message, x, y, canvas4text.width);
+    makeTextObj(ctx,name,canvas4text.toDataURL(),w,h);
+}
+
+function jstrlen(str,len,i) {
+    len = 0;
+    str = escape(str);
+    for (i = 0; i < str.length; i++, len++) {
+	if (str.charAt(i) == "%") {
+            if (str.charAt(++i) == "u") {
+		i += 3;
+		len++;
+            }
+            i++;
+	}
+    }
+    return len;
+}
+
 function makeTextObj(ctx,objName,imageText,w,h){
     var obj = new Object();
     obj.model = [0.0,0.0,0.0];
@@ -53,6 +104,7 @@
 
     ctx.obj[objName] = makeXmlObj(ctx,obj);
     ctx.obj[objName].texture = loadImageTexture(ctx,imageText);
+
 }
 
 function calcSize(w,h){
@@ -70,7 +122,7 @@
     return size;
 }
 
-function PutSpriteF(ctx,x,y,scale,glObj,texture){
+function PutSpriteF(ctx,x,y,scale,glObj){
     ctx.enableVertexAttribArray(0);
     ctx.enableVertexAttribArray(1);
     ctx.enableVertexAttribArray(2);
@@ -103,7 +155,7 @@
     mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
 
     
-    ctx.bindTexture(ctx.TEXTURE_2D, texture);
+    ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
     ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
 
 
--- a/webGL/src/keybord.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/keybord.js	Tue Jul 03 23:20:21 2012 +0900
@@ -193,7 +193,6 @@
 	if(!SpacePressed){
 	    SpacePressed = true;
 	    toMenu();
-//	    toMain();
 	}
 	break;
     }
@@ -214,7 +213,6 @@
 
     var keyCode = event.keyCode;
     var keyChar = String.fromCharCode(keyCode);
-//    console.log(keyChar+":"+keyCode);
     switch(MODE){
     case TITLE:
 	keyTitle(keyCode);
--- a/webGL/src/loadMusicFiles.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/loadMusicFiles.js	Tue Jul 03 23:20:21 2012 +0900
@@ -1,6 +1,25 @@
 function loadMusicFiles(){
-	musicsArray.push("music/Am.json");
-	musicsArray.push("music/test.json");
-	musicsArray.push("music/test2.json");
-	cursor.setMAX(musicsArray.length);
+    var musicsArray=[];
+    musicsArray.push("music/Am.json");
+    musicsArray.push("music/test.json");
+    musicsArray.push("music/test2.json");
+    cursor.setMAX(musicsArray.length);
 }
+/*
+function loadMusicFiles(){
+    var jsonArray=[];
+    jsonArray.push("music/Am.json");
+    jsonArray.push("music/test.json");
+    jsonArray.push("music/test2.json");
+    cursor.setMAX(jsonArray.length);
+    for(var i=0;i<jsonArray.length;i++){
+	var httpObj = jQuery.get(jsonArray[i],null,function(){
+	    while(httpObj.readyState!=4){
+		console.log(httpObj.readyState);
+	    }
+	    var JSONObj = JSON.parse(httpObj.responseText);
+	    musicsArray.push(new MusicInformation(JSONObj.title,JSONObj.filepath));
+	});
+    }
+}
+*/
--- a/webGL/src/mainfunc.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/mainfunc.js	Tue Jul 03 23:20:21 2012 +0900
@@ -4,16 +4,10 @@
 
 function gameUpdate(){
     switch(MODE){
-    case TITLE:
-//	titleUpdate();
-	break;
-    case MAIN:
-//	mainUpdate();
-	break;
     case PLAY:
 	playUpdate();
 	break;
-    case RESULT:
+    default:
 	break;
     }    
 }
@@ -21,27 +15,30 @@
 function toTitle(){
     MODE = TITLE;
     objsArray.length = 0;
-    objsArray.push(new Obj(100,30,1,0));
-    objsArray.push(new Obj(100,90,1,1));
+    objsArray.push(new Obj(100,30,1,"title"));
+    objsArray.push(new Obj(100,90,1,"press"));
 }
 
 function toMenu(){
     MODE = MENU;
     objsArray.length = 0;
-    objsArray.push(new Obj(100,7.8125,1,7)); // select music    
+    objsArray.push(new Obj(100,7.8125,1,"select_music"));
+//    loadMusicTitle(cursor.getIndex());
+//    drawText(ctx,"music_title",musicsArray(cursor.getIndex()).getTitle(),60,"white","center",432,86);
+    objsArray.push(new Obj(100,40,1,"music_title"));
 }
 
 function toMain(){
     MODE = MAIN;
     objsArray.length = 0;
-    objsArray.push(new Obj(100,7.8125,1,2)); // main mode
-    objsArray.push(new Obj(100,105,1,3)); // judge line
+    objsArray.push(new Obj(100,7.8125,1,"main_mode")); // main mode
+    objsArray.push(new Obj(100,105,1,"line"));
 }
 
 function toPlay(){
     MODE = PLAY;
     objsArray.length = 0;
-    objsArray.push(new Obj(100,7.8125,1,2)); // main mode
+    objsArray.push(new Obj(100,7.8125,1,"main_mode")); // main mode
     loadMusics(musicsArray[cursor.getIndex()]);
 }
 
@@ -56,13 +53,13 @@
     ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
     for(var i=0;i < objsArray.length;i++){
 	var obj = objsArray[i];
-	PutSpriteF(ctx,obj.x,obj.y,obj.scale,imgs[obj.imgNo],imgs[obj.imgNo].texture);
+	PutSpriteF(ctx,obj.x,obj.y,obj.scale,ctx.obj[obj.imgName]);
     }
     if(MODE==PLAY){
 	drawNote(ctx);
-	PutSpriteF(ctx,100,105,1,imgs[3],imgs[3].texture); // line
+	PutSpriteF(ctx,100,105,1,ctx.obj["line"]); // line
     }
-    PutSpriteF(ctx,100,70,1,imgs[6],imgs[6].texture); // background
+    PutSpriteF(ctx,100,70,1,ctx.obj["back"]); // background
     ctx.flush();
 }
 
--- a/webGL/src/sound.js	Sun Jul 01 22:01:18 2012 +0900
+++ b/webGL/src/sound.js	Tue Jul 03 23:20:21 2012 +0900
@@ -9,7 +9,6 @@
 	ext = ".wav";
     else
 	alert("your browser does not support wav and ogg File.");
-    ext = ".wav";
     audioHClose = loadAudio("sound/hclose"+ext);
 //    audioHOpen = loadAudio("sound/hopen"+ext);
     audioSnare = loadAudio("sound/snare"+ext);