neocturne/rpgedit
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
dist/resources/sprite/entity/red_ellipse.png vendored
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 1.7 KiB

5
src/view/entity.ts
View file

@ -14,9 +14,10 @@ export async function loadEntity(
const sprites: SpriteView[] = []; const sprites: SpriteView[] = [];
for (let frame = 0; frame < data.frames; frame++) { 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); r.snapToGrid(offset, offset);
const anchorCoords: SpriteCoords = [ const anchorCoords: SpriteCoords = [

14
src/view/util/image.ts
View file

@ -16,18 +16,17 @@ export function mkTexture(
src: HTMLCanvasElement|HTMLImageElement, src: HTMLCanvasElement|HTMLImageElement,
frame: number = 0, frame: number = 0,
total: number = 1, total: number = 1,
): [WebGLTexture, [number, number], SpriteCoords] { ): [WebGLTexture, SpriteCoords] {
const gl = r.getContext(); const gl = r.getContext();
const texture = gl.createTexture(); const texture = gl.createTexture();
if (!texture) if (!texture)
throw new Error('unable to create texture'); throw new Error('unable to create texture');
const w = src.width, h = src.height / total; const w = src.width, h = src.height / total;
const w2 = nextPowerOf2(w), h2 = nextPowerOf2(h);
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = w2; canvas.width = w;
canvas.height = h2; canvas.height = h;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
ctx.drawImage(src, 0, frame * h, w, h, 0, 0, w, h); 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_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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 = [ 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];
} }