update ms per frame

This commit is contained in:
ajuvercr 2019-09-21 11:30:00 +02:00
parent ab3d595ad9
commit 24b3fa295d
2 changed files with 26 additions and 3 deletions

View file

@ -15,6 +15,10 @@
</div> </div>
<input type="file" id="fileselect"> <input type="file" id="fileselect">
<div>
<span>Ms per frame:&nbsp;</span>
<input type="number" id="speed" value="500">
</div>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script> <script src="./bootstrap.js"></script>

View file

@ -20,7 +20,7 @@ const LOADER = document.getElementById("loader");
const SLIDER = <HTMLInputElement>document.getElementById("turnSlider"); const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect"); const FILESELECTOR = <HTMLInputElement> document.getElementById("fileselect");
const SPEED = <HTMLInputElement> document.getElementById("speed");
function set_loading(loading: boolean) { function set_loading(loading: boolean) {
if (loading) { if (loading) {
if (!LOADER.classList.contains("loading")) { if (!LOADER.classList.contains("loading")) {
@ -38,6 +38,8 @@ const RESOLUTION = [CANVAS.width, CANVAS.height];
const GL = CANVAS.getContext("webgl"); const GL = CANVAS.getContext("webgl");
var ms_per_frame = 500;
resizeCanvasToDisplaySize(<HTMLCanvasElement>GL.canvas); resizeCanvasToDisplaySize(<HTMLCanvasElement>GL.canvas);
GL.viewport(0, 0, GL.canvas.width, GL.canvas.height); GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
@ -175,7 +177,7 @@ class GameInstance {
this.last_time = time; this.last_time = time;
return; return;
} }
if (time > this.last_time + 500) { if (time > this.last_time + ms_per_frame) {
this.last_time = time; this.last_time = time;
this.updateTurn(this.frame + 1); this.updateTurn(this.frame + 1);
@ -185,7 +187,7 @@ class GameInstance {
GL.viewport(0, 0, GL.canvas.width, GL.canvas.height); GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT); GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / 500)); this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / ms_per_frame));
this.shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos())); this.shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos()));
this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox())); this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
@ -210,6 +212,7 @@ class GameInstance {
} }
handleKey(event: KeyboardEvent) { handleKey(event: KeyboardEvent) {
console.log(event.keyCode);
// Space // Space
if (event.keyCode == 32) { if (event.keyCode == 32) {
if (this.playing) { if (this.playing) {
@ -229,6 +232,18 @@ class GameInstance {
if (event.keyCode == 39) { if (event.keyCode == 39) {
this.updateTurn(this.frame + 1); this.updateTurn(this.frame + 1);
} }
// d key
if (event.keyCode == 68) {
SPEED.value = ms_per_frame + 10 + '';
SPEED.onchange(undefined);
}
// a key
if (event.keyCode == 65) {
SPEED.value = Math.max(ms_per_frame - 10, 0) + '';
SPEED.onchange(undefined);
}
} }
} }
@ -261,6 +276,10 @@ FILESELECTOR.onchange = function(){
reader.readAsText(file); reader.readAsText(file);
} }
SPEED.onchange = function() {
ms_per_frame = parseInt(SPEED.value);
}
function step(time: number) { function step(time: number) {
if (game_instance) { if (game_instance) {
set_loading(false); set_loading(false);