summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--dist/resources/sprite/entity/simple_square.pngbin0 -> 155 bytes
-rw-r--r--src/index.ts48
-rw-r--r--src/view/entity.ts15
-rw-r--r--src/view/renderer/Renderer.ts24
-rw-r--r--src/view/sprite.ts2
5 files changed, 80 insertions, 9 deletions
diff --git a/dist/resources/sprite/entity/simple_square.png b/dist/resources/sprite/entity/simple_square.png
new file mode 100644
index 0000000..7c427cc
--- /dev/null
+++ b/dist/resources/sprite/entity/simple_square.png
Binary files differ
diff --git a/src/index.ts b/src/index.ts
index b4109e6..b6bcd26 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,17 +1,63 @@
import MapData from './model/data/MapData';
+import { vec2 } from 'gl-matrix';
+
import { getJSON } from './util';
+import { loadSimpleEntity } from './view/entity';
+import DirectionHandler from './view/input/DirectionHandler';
import { loadMap } from './view/map';
import Renderer from './view/renderer/Renderer';
+const entityCenter = vec2.create();
+const entityTranslation = vec2.create();
+const entityMovement = vec2.create();
+
window.onload = async () => {
const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
if (!canvas)
return;
+ const input = new DirectionHandler();
+ input.addListener((v) => {
+ if (vec2.sqrLen(v) > 0)
+ vec2.normalize(entityMovement, v);
+ else
+ vec2.copy(entityMovement, [0, 0]);
+ });
+
const renderer = new Renderer(canvas);
const map = new MapData(await getJSON('resources/map/test.json'));
const mapView = await loadMap(renderer, map);
- mapView.render();
+
+ const entity = await loadSimpleEntity(renderer, 'simple_square');
+
+ let prevTime: number|null = null;
+
+ const render = (time: number) => {
+ const res = 64;
+
+ let diff = 0;
+ if (prevTime !== null)
+ diff = time - prevTime;
+ prevTime = time;
+
+ vec2.scaleAndAdd(entityCenter, entityCenter, entityMovement, diff / 100);
+ vec2.scale(entityCenter, entityCenter, res);
+ vec2.round(entityCenter, entityCenter);
+ vec2.scale(entityCenter, entityCenter, 1 / res);
+
+ renderer.setCenter(entityCenter);
+ renderer.clear();
+
+ mapView.render();
+
+ vec2.sub(entityTranslation, entityCenter, [0.5, 0.5]);
+ renderer.setTranslation(entityTranslation);
+ entity.render();
+
+ window.requestAnimationFrame(render);
+ };
+
+ window.requestAnimationFrame(render);
};
diff --git a/src/view/entity.ts b/src/view/entity.ts
new file mode 100644
index 0000000..d95d924
--- /dev/null
+++ b/src/view/entity.ts
@@ -0,0 +1,15 @@
+import Renderer from './renderer/Renderer';
+import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
+import { loadImage, mkTexture } from './util/image';
+
+export async function loadSimpleEntity(r: Renderer, sprite: string): Promise<SpriteView> {
+ const tile = await loadImage(`resources/sprite/entity/${sprite}.png`);
+ const texture = mkTexture(r.getContext(), tile);
+
+ const builder = new SpriteViewBuilder(r, texture);
+
+ const coords: SpriteCoords = [0, 0, 1, 1];
+ builder.addSprite(coords, coords);
+
+ return builder.build();
+}
diff --git a/src/view/renderer/Renderer.ts b/src/view/renderer/Renderer.ts
index bf29797..344bccf 100644
--- a/src/view/renderer/Renderer.ts
+++ b/src/view/renderer/Renderer.ts
@@ -1,10 +1,13 @@
-import {mat4} from 'gl-matrix';
+import { mat4, vec2 } from 'gl-matrix';
import Shaders from './Shaders';
export default class Renderer {
private readonly gl: WebGLRenderingContext;
private readonly shaders: Shaders;
+
+ private readonly center: vec2 = vec2.create();
+ private readonly translation: vec2 = vec2.create();
private readonly viewport: mat4 = mat4.create();
constructor(private readonly canvas: HTMLCanvasElement) {
@@ -45,8 +48,19 @@ export default class Renderer {
return this.shaders.samplerLoc;
}
- public setTranslation(v: Float32List) {
- this.gl.uniform2fv(this.shaders.translateLoc, v);
+ public setCenter(v: vec2|number[]) {
+ vec2.copy(this.center, v);
+ }
+
+ public setTranslation(v: vec2|number[]) {
+ vec2.sub(this.translation, v, this.center);
+ this.gl.uniform2fv(this.shaders.translateLoc, this.translation);
+ }
+
+ public clear(): void {
+ this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+ this.setTranslation([0, 0]);
}
private mkContext(): WebGLRenderingContext {
@@ -64,12 +78,10 @@ export default class Renderer {
const h = this.canvas.height;
this.gl.viewport(0, 0, w, h);
- this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+ this.clear();
mat4.identity(this.viewport);
mat4.scale(this.viewport, this.viewport, [2 * 64 / w, -2 * 64 / h, 1.0]);
this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
-
- this.setTranslation([-5, -5]);
}
}
diff --git a/src/view/sprite.ts b/src/view/sprite.ts
index 18c91c7..02fa77a 100644
--- a/src/view/sprite.ts
+++ b/src/view/sprite.ts
@@ -57,8 +57,6 @@ export class SpriteView {
public render(): void {
const gl = this.r.getContext();
- gl.clear(gl.COLOR_BUFFER_BIT);
-
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.uniform1i(this.r.getSamplerLoc(), 0);