Javascriptによるゲームエンジンの開発における、Updateメソッドの実装

Question

テーマ

Javascriptについてお聞きしたいです。簡易的なゲームエンジンの開発をしており、UnityエンジンにおけるUpdateメソッドと同じような機能を作りたいので、engine.updateの再代入という方法を取っていますが、現在の方法では、requestAnimationFrameという余計な一行を入れる必要があります。もっとスマートな方法はありますか？

class Engine {
	update() {
		
	}
	
	start() {
		requestAnimationFrame(this.update.bind(this));
	}
}

const engine = new Engine();

engine.update = () => {
	console.log('HELLO');
	requestAnimationFrame(engine.update);
}

Answer 1

この回答はGPT-4による自動生成回答です

JavaScriptにおいて、requestAnimationFrameを使わずにループを作る方法としては、setIntervalやsetTimeoutを使う方法があります。しかし、これらの方法はブラウザの描画タイミングと同期しないため、requestAnimationFrameを使うのが一般的です。

あなたのコードを見ると、Engineクラスのupdateメソッドを再定義していますが、これは一般的な設計とは異なります。代わりに、Engineクラスにコールバック関数を渡すように設計すると、よりスマートになるでしょう。

以下にその例を示します。

class Engine {
	constructor(updateCallback) {
		this.updateCallback = updateCallback;
	}

	update() {
		this.updateCallback();
		requestAnimationFrame(this.update.bind(this));
	}

	start() {
		requestAnimationFrame(this.update.bind(this));
	}
}

const engine = new Engine(() => {
	console.log('HELLO');
});

engine.start();

このようにすることで、Engineクラスのupdateメソッドを再定義する必要がなくなります。また、Engineクラスのインスタンスを作成する際に、更新処理を行うコールバック関数を渡すことができます。

Answer 2

別の関数を経てupdate() を呼べばよいでしょう。

class Engine {
	update() {
	}
	
	start() {
		requestAnimationFrame(this.#updateInternal);
	}

	#updateInternal = () => {
		this.update();
		requestAnimationFrame(this.#updateInternal);
	}
}

class MyEngine extends Engine {
	update() {
		console.log('HELLO');
	}
}

const engine = new MyEngine();
engine.start();

Comments

[movswr]

ありがとうございます。まさにUnityと同じようにかけて求めていた回答でした。

Answer 3

engine.update = () => {

そもそもインスタンスからメンバ関数を外側から指定して作ることはないでしょう。
カプセル化して触らせないためにクラスを組むんでしょうから

参考

class Engine {
  get update(){
    return this.#update;
  }
  #update(){
    console.log('HELLO');
  }
}
const eng = new Engine();
eng.update=()=>{
  console.log('YAHOO!');
}; // Engine にupdateのセッタがないためupdate関数は上書きされない
eng.update(); 

Comments

[movswr]

ありがとうございます。オブジェクト指向の勉強をしながらやっているので、設計思想がおかしかったようです。カプセル化について勉強してみます。