summaryrefslogtreecommitdiffstats
path: root/src/view
diff options
context:
space:
mode:
authorMatthias Schiffer <mschiffer@universe-factory.net>2018-11-11 00:56:22 +0100
committerMatthias Schiffer <mschiffer@universe-factory.net>2018-11-11 01:46:08 +0100
commitb83b596b0f79fa1d5b95c462d3fa7171ff221a19 (patch)
tree0601d178aff79a47cade680fc2a193cd67108aca /src/view
parent426b2c37ff72d8de40f716365c8301449acfdfcb (diff)
downloadrpgedit-b83b596b0f79fa1d5b95c462d3fa7171ff221a19.tar
rpgedit-b83b596b0f79fa1d5b95c462d3fa7171ff221a19.zip
Add support for simple periodic sprite animations
Diffstat (limited to 'src/view')
-rw-r--r--src/view/entity.ts33
-rw-r--r--src/view/util/image.ts6
2 files changed, 24 insertions, 15 deletions
diff --git a/src/view/entity.ts b/src/view/entity.ts
index b59bf92..7600826 100644
--- a/src/view/entity.ts
+++ b/src/view/entity.ts
@@ -8,21 +8,28 @@ import { vec2 } from 'gl-matrix';
export async function loadEntity(
r: Renderer,
data: EntityData,
-): Promise<SpriteView> {
+): Promise<SpriteView[]> {
const tile = await loadImage(`resources/sprite/entity/${data.sprite}.png`);
- const [texture, size, coords] = mkTexture(r, tile);
- const offset = vec2.mul(vec2.create(), data.anchor, size);
- r.snapToGrid(offset, offset);
+ const sprites: SpriteView[] = [];
- const anchorCoords: SpriteCoords = [
- coords[0] - offset[0],
- coords[1] - offset[1],
- coords[2] - offset[0],
- coords[3] - offset[1],
- ];
+ for (let frame = 0; frame < data.frames; frame++) {
+ const [texture, size, coords] = mkTexture(r, tile, frame, data.frames);
- const builder = new SpriteViewBuilder(r, texture);
- builder.addSprite(anchorCoords, [0, 0, 1, 1]);
- return builder.build();
+ const offset = vec2.mul(vec2.create(), data.anchor, size);
+ r.snapToGrid(offset, offset);
+
+ const anchorCoords: SpriteCoords = [
+ coords[0] - offset[0],
+ coords[1] - offset[1],
+ coords[2] - offset[0],
+ coords[3] - offset[1],
+ ];
+
+ const builder = new SpriteViewBuilder(r, texture);
+ builder.addSprite(anchorCoords, [0, 0, 1, 1]);
+ sprites.push(builder.build());
+ }
+
+ return sprites;
}
diff --git a/src/view/util/image.ts b/src/view/util/image.ts
index e01246c..7baeccc 100644
--- a/src/view/util/image.ts
+++ b/src/view/util/image.ts
@@ -14,13 +14,15 @@ export function loadImage(url: string): Promise<HTMLImageElement> {
export function mkTexture(
r: Renderer,
src: HTMLCanvasElement|HTMLImageElement,
+ frame: number = 0,
+ total: number = 1,
): [WebGLTexture, [number, number], SpriteCoords] {
const gl = r.getContext();
const texture = gl.createTexture();
if (!texture)
throw new Error('unable to create texture');
- const w = src.width, h = src.height;
+ const w = src.width, h = src.height / total;
const w2 = nextPowerOf2(w), h2 = nextPowerOf2(h);
const canvas = document.createElement('canvas');
@@ -28,7 +30,7 @@ export function mkTexture(
canvas.height = h2;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
- ctx.drawImage(src, 0, 0);
+ 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);