JavaScriptで譜面データ管理の実装

Question

実現したいこと

• 譜面データを配列で管理したい
• 描画処理の高速化

前提

クラス内のメソッドを呼び出すにはインスタンスを作成しないと動作しない。
今までのはconst testなど単体だったが、実際の音ゲーは複数ノーツが同時に降ってくるためその実装方法だと処理面でも厳しい。

発生している問題・エラーメッセージ

・前提にもある通り、前回の質問(https://teratail.com/questions/qyt4yv84nqfgcf)で、loop関数内でただ単にconst testと単体インスタンスを呼び出してから、クラスNotes内を呼び出していました。
これを配列で管理しようと思っております。しかし、loop関数内で配列の値を読みだそうとすると処理落ちしてしまいます。

・原因は毎回class Notesのデータを読みだそうとしているというのはわかるのですが、この頻度を下げる方法がわかりません。
ノーツの座標もしくは時間で制御すればよさそうですが、どのように実装したらよいのかわからずじまいです。

該当のソースコード

let canvas = document.querySelector(".fnfcanvas")
let ctx = canvas.getContext("2d");
let g_width = canvas.width = 1080;
let g_height = canvas.height = 680;
let posy = 0;
let sprite = 0;
let flags = false;
let note_sprite = new Image();
const audio = new Audio("sample.mp3");

//ノーツの種類(上から通常・半透明・ダメージノーツ・即死ノーツ)
const param={
	totaltime: 0,
	start: 0,
	end: 0
}

class Notes_Elements{
	constructor(){
		this.normal = 'normal';
		this.invisible = 'invisible';
		this.reverse = 'damage';
		this.death = 'death';
	}
}
const Judge={
	PERFECT: 0.032,
	GOOD: 0.070,
	BAD: 1.1,
	MISS: 1.5
};
class Pushing{
	constructor(up_push,down_push,left_push,right_push){
		this.up_push = false;
		this,down_push = false;
		this.left_push = false;
		this.right_push = false;
	}	
}
class Pushing_continue extends Pushing{
	constructor(up_pushing,down_pushing,left_pushing,right_pushing){
		super(up_pushing,down_pushing,left_pushing,right_pushing);
	}
}


window.addEventListener("click",(event)=>{
	audio.volume = 0.5;
	audio.playbackRate = 1.2;
	audio.play();
	flags = true;
});

function playingtime(event){
	if(flags){
		let plytime = audio.currentTime;
		if(param.start){
			param.totaltime = Math.abs(param.end-param.start - plytime);
		} 
		requestAnimationFrame(playingtime,event);
	}
}
audio.addEventListener("timeupdate",(event)=>{
	if(flags){
		param.end=event.timeStamp / 1000;
		requestAnimationFrame(playingtime,(param.end));
	} else {
		cancelAnimationFrame(playingtime);
	}
});



//ノーツそのものの制御(座標・加速度・画像の大きさ・各秒数)
class Notes{
	constructor(x,y,VelX,VelY,width,height,time){
		this.x = x;
		this.y = y;
		this.VelX = VelX;
		this.VelY = VelY;
		this.width = width;
		this.height = height;
		this.time = time;
	}
	notesdrawing(x,y,VelX,VelY,width,height,time){
		//ここに描画処理を書く。
		ctx.clearRect(0,0,width,height);
		ctx.translate(width/2,height/2);
		note_sprite.src = "arrow_down_empty.png";
		ctx.fillRect(-(width/2), -(height/2), width, height);
		note_sprite.addEventListener("load",(event)=>{
			ctx.clearRect(0,0,g_width,g_height);
			ctx.drawImage(note_sprite,(sprite * 220),0,158,157,110,0+posy,158,157); 
		});
		if (posy > g_height) {
    			const newStartPos = -((g_height/2) + 120);
    			posy = Math.ceil(newStartPos);
  		} else {
    			posy += 2;
  		}
	}
	
	notesmoving(x,y,VelX,VelY,width,height,time){
		//ここにVelYの挙動およびVelXなどの挙動を書く。
		if(this.y + this.height >= g_height ){
			this.VelY = -(this.VelY);
		}
		if((this.y - this.height) <= 0){
			this.VelY = -(this.velY);
		}
		this.y += this.VelY;
		
	}
}

const notes_LEGENDALY = [];
//const notes_LASO = [];
//const notes_SLASO = [];
const test = new Notes(110,-100,1,4,110,110,34.5);
for(let i = 0; i < 2000;i++){
	notes_LEGENDALY.push(test);
}
i = null;


function loop(){
	/*問題箇所、このコメントアウトを外して実行する際は自己責任でお願いします。
	notes_LEGENDALY.forEach((elements,index)=>{
		const notesData = new Notes(elements.x,elements.y,elements.VelX,elements.VelY,elements.width,elements.height,elements.time);
		notesData.notesdrawing();
		notesData.notesmoving();
	});
	*/
　　  test.notesdrawing();
	test.notesmoving();
	requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

class notes_lane extends Notes{
	constructor(x,y,VelX,VelY,width,height,time){
		super(x,y,VelX,VelY,width,height,time);
	}
	laneupdate(){
	
	}
	
	lanedisplay(){
	
	}
}
//判定枠
const NotesJudge = function(key_send,start,fin){
	const judgetime = Math.abs(10-Math.abs(start-fin));
    if(key_send.up_push){
    	if((judgetime <= Judge.PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    }
    
    if(key_send.down_push){
    	if((judgetime <= Judge.PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    }
    
    if(key_send.left_push){
    	if((judgetime <= Judge.PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    }
    if(key_send.right_push){
    	if((judgetime <= Judge.PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    } 
};	

document.addEventListener('keydown',(event)=>{
	const check = new Pushing();
	switch (event.key){
    	case 'ArrowUp':
    		acction_time.start_time = event.timeStamp / 1000;
    		check.up_push = true;
    		NotesJudge(check.uppush,param.start,param.fin);
    		break;
    	case 'ArrowDown': 
    		acction_time.start_time =event.timeStamp / 1000;
    		check.down_push = true;
    		NotesJudge(check.downpush,param.start,param.fin);
    		break;
    	case 'ArrowLeft':
    		acction_time.start_time =event.timeStamp / 1000;
    		check.left_push = true;
    		NotesJudge(check.left,param.start,param.fin);
    		break;
    	case 'ArrowRight':
    		acction_time.start_time =event.timeStamp / 1000;
    		check.right_push = true;
    		NotesJudge(check.right,param.start,param.fin);
    		break;
    }
    console.log(`keydown: ${param.start}ms`);

});


document.addEventListener('keyup', (event) => {
	const check = new Pushing();
    switch (event.key){
    	case 'ArrowUp':
    		check.up_push = false;
    		break;
    	case 'ArrowDown': 
    		check.down_push = false;
    		break;
    	case 'ArrowLeft':
    		check.left_push = false;
    		break;
    	case 'ArrowRight':
    		check.right_push = false;
    		break;
    }
    //console.log(`keyup: ${param.end}ms`);
});

試したこと

・performance.now()からevent.timeStampに変更し、処理速度の改善を行った。
・配列notes_LEGENDALYをforeachで制御しようとしたが、あまりにも負荷がかかりすぎていたため断念。

補足情報（FW/ツールのバージョンなど）

ブラウザ:Chrome 114.0.5735.134
PCのスペック: CPU: i7-12700 2.10 GHz
メモリ: 32GB
Windows11 Home 22H2

Answer 1

仮に1曲に2千個の「ノーツ」があったとしても、一度に画面に出ているのはたぶん数十個ですよね。描画やジャッジに関してはその画面内にあるノーツだけを処理するようにしましょう。

仮に、ノーツのデータが次のように定義されているとして、

const notesData = [
  // timeOffset: 曲の先頭からのミリ秒
  // type: プレーヤがどのボタンを押すべきか
  {timeOffset; 100, type: '↑'},
  {timeOffset; 100, type: '↓'},
  {timeOffset; 110, type: '←'},
  {timeOffset; 120, type: '→'},
  ... (曲の終わりまで何百個〜数千個も続く)
];

• visibleNotes という空のリストを用意しておく
• nextDataIndex = 0 という変数を用意しておく
• 曲が始まって n ミリ秒経過したら、
  • notesData[nextDataIndex] から nextDataIndex を増やしてループして、timeOffset が n-D 以下の要素から Notes オブジェクトを new して、visibleNotes に push() する。timeOffset が n-D より大きくなったらループ終了。D は画面内で事前に表示するミリ秒。
  • visibleNotes に入っている Notes のうち、timeOffset が n より小さいものを削除する
  • visibleNotes に残っている Notes を描画する

Comments

[falcon_function]

ありがとうございます。
アドバイス通りにコードを書こうとしてみましたが、まだ内容を理解しきれていないためか動作いたしません。
お手数ですが、どの部分が間違っているのかご教授いただけますでしょうか。
※以下のコードはloop関数内に記述されているとします。
if(param.end){
while(nextDataindex < notes_LEGENDALY.length){
if(notes_LEGENDALY[nextDataindex].time <= (param.end - 10)){
let moving = new Notes(notes_LEGENDALY[nextDataindex].x,notes_LEGENDALY[nextDataindex].y,notes_LEGENDALY[nextDataindex].VelX,notes_LEGENDALY[nextDataindex].VelY,notes_LEGENDALY[nextDataindex].width,notes_LEGENDALY[nextDataindex].height,notes_LEGENDALY[nextDataindex].time);
visibleNotes.push(moving);
nextDataindex++;
} else if(notes_LEGENDALY[nextDataindex].time > (param.end - 10)){
break;
}

if(visiableNotes[nextDataindex].time < param.end){
visibleNotes[nextDataindex].time=null;
}
}
moving.notesdrawing();
moving.notesmoving();
}

[int32_t]

> param.end - 10

これがミリ秒だとすると、10 は小さすぎると思います。10msec って、1/60秒よりも小さいですよ。

> if(visiableNotes[nextDataindex].time < param.end){

この判定はwhileの中に入れてはいけません。while の前(か後)に visibleNotes を先頭からチェックして、splice() で配列要素を削除しましょう。

> moving.notesdrawing();
> moving.notesmoving();

ここだと moving が未定義でエラー出てませんかね。
while の後に、visibleNotes 全体をループしてそれぞれの要素に notedrawing() と notesmoving() を呼ぶ必要があります。

[falcon_function]

アドバイス通り修正してみました。しかし、描画と移動の部分がどう呼び出したらよいのかイメージがわかなかったため、その部分は記述しておりません。
function loop(){
if(param.end){
while(nextDataindex < notes_LEGENDALY.length){
if(notes_LEGENDALY[nextDataindex].time <= Math.abs(param.end - 40000)){
let moving = new Notes(notes_LEGENDALY[nextDataindex].x,notes_LEGENDALY[nextDataindex].y,notes_LEGENDALY[nextDataindex].VelX,notes_LEGENDALY[nextDataindex].VelY,notes_LEGENDALY[nextDataindex].width,notes_LEGENDALY[nextDataindex].height,notes_LEGENDALY[nextDataindex].time);
visibleNotes.push(moving);
nextDataindex++;
} else if(notes_LEGENDALY[nextDataindex].time > Math.abs(param.end - 40000)){
break;
}
}
for(let i = 0; i < visibleNotes.length;i++){
if(visibleNotes[i].time < param.end){
visibleNotes.splice(i,1);
}
}
//ここに描画と移動処理をしたいが、visibleNotes全体をループするの意味が分からなかった
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

[int32_t]

たとえば、

for (const n of visibleNotes) {
n.notesdrawing();
n.notesmoving();
}

こんな感じでしょう。

[falcon_function]

上記のコードも入れて試してみましたが動作しませんでした。しかし、重要なことを忘れていました。
・notesdrawingメソッド自体が、配列ではないため、最後に読み込まれたデータを基にしか描画しない。
・param.endは事前に1000で割っているので、ミリ秒ではなく秒単位になる
・Dは固定値なのか、それともクラスNotes内にあるtimeを基にすればよいのかわからなかった

この部分が解消されないと実装は難しいとわかりました・・・

[int32_t]

Notesクラスはいろいろとおかしいところがありますね。直し方がわからかったら新たな質問を立ててください。
(一つの質問で複数の問題を解決しようとするとごちゃごちゃしすぎるので)

Answer 2

複数描画することに成功したのでご報告いたします。動作自体は問題ないですが、少し読み込み中に遅延が発生しているのでそこが問題点でしょう・・・

for(let i = 0; i < notes_LEGENDALY.length;i++){
	notes_LEGENDALY[i].img = new Image();
	notes_LEGENDALY[i].img.src = notes_LEGENDALY[i].image;
	let y = notes_LEGENDALY[i].y
	notes_LEGENDALY[i].img.addEventListener("load",(event)=>{
		//ctx.clearRect(0,0,g_width,g_height);
		ctx.drawImage(notes_LEGENDALY[i].img,(sprite*220),0,220,220,notes_LEGENDALY[i].x,y,notes_LEGENDALY[i].width,notes_LEGENDALY[i].height);
	});
}
function loop(){
		if(param.end){
			while(nextDataindex < (notes_LEGENDALY.length-1)){
				if(notes_LEGENDALY[nextDataindex].time <= Math.abs(param.end-10)){
					moving = new Notes(notes_LEGENDALY[nextDataindex].x,notes_LEGENDALY[nextDataindex].y,notes_LEGENDALY[nextDataindex].VelX,notes_LEGENDALY[nextDataindex].VelY,notes_LEGENDALY[nextDataindex].width,notes_LEGENDALY[nextDataindex].height,notes_LEGENDALY[nextDataindex].time,notes_LEGENDALY[nextDataindex].image,notes_LEGENDALY[nextDataindex].ways);
					visibleNotes.push(moving);
				} else if(notes_LEGENDALY[nextDataindex].time > Math.abs(param.end - 10)){
					break;
				}
				nextDataindex++;
			}
			for(let i = 0;i < visibleNotes.length;i++){
				if(visibleNotes[i].time < param.end){
					visibleNotes.splice(i,1);
				}
			}
		}
		ctx.clearRect(0,0,g_width,g_height);
		for(let i = 0; i < notes_LEGENDALY.length;i++){
			notes_LEGENDALY[i].y -= notes_LEGENDALY[i].VelY;
			if(notes_LEGENDALY[i].y  < -notes_LEGENDALY[i].height){
				notes_LEGENDALY[i].y = g_height;
			}
			
			ctx.drawImage(notes_LEGENDALY[i].img,(sprite*220),0,220,220,notes_LEGENDALY[i].x,notes_LEGENDALY[i].y,notes_LEGENDALY[i].width,notes_LEGENDALY[i].height);
		}
		requestAnimationFrame(loop);
		
		
}
requestAnimationFrame(loop);
//判定枠