view: remove support for non-power-of-2 sprites again

Sprites with unusual dimensions must be padded with transparency. By only
supporting power-of-two sprites, the anchor point can always be specified
accurately.
This commit is contained in:
Matthias Schiffer 2018-11-11 13:30:15 +01:00
parent b83b596b0f
commit 4eb954e759
Signed by: neocturne
GPG key ID: 16EF3F64CB201D9C
3 changed files with 8 additions and 11 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -14,9 +14,10 @@ export async function loadEntity(
const sprites: SpriteView[] = [];
for (let frame = 0; frame < data.frames; frame++) {
const [texture, size, coords] = mkTexture(r, tile, frame, data.frames);
const [texture, coords] = mkTexture(r, tile, frame, data.frames);
const offset = vec2.mul(vec2.create(), data.anchor, size);
const offset = vec2.fromValues(coords[2] - coords[0], coords[3] - coords[1]);
vec2.mul(offset, offset, data.anchor);
r.snapToGrid(offset, offset);
const anchorCoords: SpriteCoords = [

View file

@ -16,18 +16,17 @@ export function mkTexture(
src: HTMLCanvasElement|HTMLImageElement,
frame: number = 0,
total: number = 1,
): [WebGLTexture, [number, number], SpriteCoords] {
): [WebGLTexture, 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 / total;
const w2 = nextPowerOf2(w), h2 = nextPowerOf2(h);
const canvas = document.createElement('canvas');
canvas.width = w2;
canvas.height = h2;
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);
@ -39,12 +38,9 @@ export function mkTexture(
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
const size: [number, number] = [
w / r.coordScale, h / r.coordScale,
];
const coords: SpriteCoords = [
0, 0, w2 / r.coordScale, h2 / r.coordScale,
0, 0, w / r.coordScale, h / r.coordScale,
];
return [texture, size, coords];
return [texture, coords];
}