view: do not split multi-frame sprites into multiple textures

2 files changed, 18 insertions, 31 deletions

diff --git a/src/view/entity.ts b/src/view/entity.ts
index 83cd955..3b30e3c 100644
--- a/src/view/entity.ts
+++ b/src/view/entity.ts
@@ -10,25 +10,24 @@ export async function loadEntity(
 	data: EntityData,
 ): Promise<SpriteView[]> {
 	const tile = await loadImage(`resources/sprite/entity/${data.sprite}.png`);
+	const [texture, size] = mkTexture(r, tile);
+	const frameSize = [size[0], size[1] / data.frames];
 
-	const sprites: SpriteView[] = [];
-
-	for (let frame = 0; frame < data.frames; frame++) {
-		const [texture, coords] = mkTexture(r, tile, frame, data.frames);
+	const offset = vec2.mul(vec2.create(), frameSize, data.anchor);
+	r.snapToGrid(offset, offset);
 
-		const offset = vec2.fromValues(coords[2] - coords[0], coords[3] - coords[1]);
-		vec2.mul(offset, offset, data.anchor);
-		r.snapToGrid(offset, offset);
+	const coords: SpriteCoords = [
+		-offset[0],
+		-offset[1],
+		-offset[0] + frameSize[0],
+		-offset[1] + frameSize[1],
+	];
 
-		const anchorCoords: SpriteCoords = [
-			coords[0] - offset[0],
-			coords[1] - offset[1],
-			coords[2] - offset[0],
-			coords[3] - offset[1],
-		];
+	const sprites: SpriteView[] = [];
 
+	for (let frame = 0; frame < data.frames; frame++) {
 		const builder = new SpriteViewBuilder(r, texture);
-		builder.addSprite(anchorCoords, [0, 0, 1, 1]);
+		builder.addSprite(coords, [0, frame / data.frames, 1, (frame + 1) / data.frames]);
 		sprites.push(builder.build());
 	}
 
diff --git a/src/view/util/image.ts b/src/view/util/image.ts
index 4c5e386..0ad5d16 100644
--- a/src/view/util/image.ts
+++ b/src/view/util/image.ts
@@ -1,4 +1,3 @@
-import { nextPowerOf2 } from '../../util';
 import { Renderer } from '../renderer/renderer';
 import { SpriteCoords } from '../sprite';
 
@@ -14,33 +13,22 @@ export function loadImage(url: string): Promise<HTMLImageElement> {
 export function mkTexture(
 	r: Renderer,
 	src: HTMLCanvasElement|HTMLImageElement,
-	frame: number = 0,
-	total: number = 1,
-): [WebGLTexture, SpriteCoords] {
+): [WebGLTexture, [number, number]] {
 	const gl = r.getContext();
 	const texture = gl.createTexture();
 	if (!texture)
 		throw new Error('unable to create texture');
 
-	const w = src.width, h = src.height / total;
-
-	const canvas = document.createElement('canvas');
-	canvas.width = w;
-	canvas.height = h;
-
-	const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-	ctx.drawImage(src, 0, frame * h, w, h, 0, 0, w, h);
-
 	gl.bindTexture(gl.TEXTURE_2D, texture);
-	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 
-	const coords: SpriteCoords = [
-		0, 0, w / r.coordScale, h / r.coordScale,
+	const size: [number, number] = [
+		src.width / r.coordScale, src.height / r.coordScale,
 	];
 
-	return [texture, coords];
+	return [texture, size];
 }