import { Vec2, Vec4 } from "./common.js"; export function fullscreenCanvas(gfx, id) { const canvas = document.getElementById(id); canvas.width = window.innerWidth; canvas.height = window.innerHeight; gfx.ctx.viewport(0, 0, canvas.width, canvas.height); } function createShader(ctx, type, source) { var shader = ctx.createShader(type); if (!shader) { throw new Error("Couldn't create shader: " + type); } ctx.shaderSource(shader, source); ctx.compileShader(shader); var success = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS); if (!success) { console.log(ctx.getShaderInfoLog(shader)); ctx.deleteShader(shader); throw new Error("Couldn't compile shader: " + type); } return shader; } function createProgram(ctx, vertexShaderSource, fragmentShaderSource) { var program = ctx.createProgram(); if (vertexShaderSource !== null) { const vs = createShader(ctx, ctx.VERTEX_SHADER, vertexShaderSource); ctx.attachShader(program, vs); } if (fragmentShaderSource !== null) { const fs = createShader(ctx, ctx.FRAGMENT_SHADER, fragmentShaderSource); ctx.attachShader(program, fs); } ctx.linkProgram(program); var success = ctx.getProgramParameter(program, ctx.LINK_STATUS); if (!success) { console.log(ctx.getProgramInfoLog(program)); ctx.deleteProgram(program); throw new Error("Failed to create program!"); } return program; } export var DrawTag; (function (DrawTag) { DrawTag[DrawTag["ISO"] = 0] = "ISO"; })(DrawTag || (DrawTag = {})); export class Graphics { ctx; program; attribs = new Map(); uniforms = new Map(); vao; vbo; toRender = []; texCount = 0; width() { return this.ctx.canvas.width; } height() { return this.ctx.canvas.height; } constructor(ctx, vs, fs) { this.ctx = ctx; this.program = createProgram(ctx, vs, fs); this.vao = ctx.createVertexArray(); this.vbo = ctx.createBuffer(); ctx.bindVertexArray(this.vao); ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.useProgram(this.program); ctx.blendFunc(ctx.SRC_ALPHA, ctx.ONE_MINUS_SRC_ALPHA); ctx.enable(ctx.BLEND); } clear(r, g, b, a) { this.ctx.clearColor(r, g, b, a); this.ctx.clear(this.ctx.COLOR_BUFFER_BIT); } createAttribute(name) { const attrib = new Attribute(this.ctx, this.program, name); this.attribs.set(name, attrib); return attrib; } getAttribute(name) { const attrib = this.attribs.get(name); if (attrib === undefined) throw new Error("Tried to get uninitialized attribute: " + name); return attrib; } createUniform(name) { const loc = this.ctx.getUniformLocation(this.program, name); if (loc === null) throw new Error("Couldn't get location for uniform: " + name); this.uniforms.set(name, loc); } getUniform(name) { const loc = this.uniforms.get(name); if (loc === undefined) throw new Error("Tried to get uninitialized uniform: " + name); return loc; } draw() { for (let o of this.toRender) { const data = o.data; this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.vbo); this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(data), this.ctx.STATIC_DRAW); let aid = 0; for (let a of o.attribs) { let attr = this.getAttribute(a); if (!attr.formatted) throw new Error("Tried to use unformatted attribute!"); this.ctx.enableVertexAttribArray(attr.loc); this.ctx.vertexAttribPointer(attr.loc, attr.size, attr.type, attr.normalized, o.vertexSize * 4, aid * 4); aid += attr.size; } // Generalize the tag uniforms aka. don't hard code them for (let t of o.tags) { switch (t) { case DrawTag.ISO: { this.ctx.uniform1ui(this.getUniform("u_isIso"), 1); break; } } } o.sprites?.bind(this); this.ctx.drawArrays(this.ctx.TRIANGLES, 0, data.length / o.vertexSize); o.sprites?.unbind(this); for (let t of o.tags) { switch (t) { case DrawTag.ISO: { this.ctx.uniform1ui(this.getUniform("u_isIso"), 0); break; } } } } // TODO: Maybe add persistent rendering? this.toRender = []; } } export class Attribute { loc; formatted = false; size = 0; type = 0; offset = 0; normalized = false; constructor(ctx, program, name) { this.loc = ctx.getAttribLocation(program, name); } format(size, type, normalized, offset) { this.size = size; this.type = type; this.normalized = normalized; this.offset = offset; this.formatted = true; } } export class Texture { tex; texId; width = 0; height = 0; constructor(texId, tex, width, height) { this.height = height; this.width = width; this.tex = tex; this.texId = texId; } // TODO: Load sprite sheet only once // TODO: Allow changing sprite size static async load(gfx, path) { let image = await loadTexture(path); let tex = gfx.ctx.createTexture(); gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, tex); gfx.ctx.texImage2D(gfx.ctx.TEXTURE_2D, 0, gfx.ctx.RGBA, gfx.ctx.RGBA, gfx.ctx.UNSIGNED_BYTE, image); gfx.ctx.texParameteri(gfx.ctx.TEXTURE_2D, gfx.ctx.TEXTURE_MAG_FILTER, gfx.ctx.NEAREST); gfx.ctx.texParameteri(gfx.ctx.TEXTURE_2D, gfx.ctx.TEXTURE_MIN_FILTER, gfx.ctx.NEAREST); gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, null); gfx.texCount += 1; return new Texture(gfx.texCount, tex, image.width, image.height); } bind(gfx) { gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, this.tex); } unbind(gfx) { gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, null); } } export class Sprite { id = 0; constructor(id) { this.id = id; } static id(id) { return new Sprite(id); } static tile(id) { let s = new Sprite(id); return { left: s, top: s, right: s, }; } } ; export class Spritesheet { texture; // Texture is a horizontal spritesheet spriteSize; // width and height of one sprite spriteCount; // number of sprites constructor(texture, spriteSize) { this.texture = texture; this.spriteSize = spriteSize; this.spriteCount = texture.width / spriteSize.x; } getUVs(id) { return [ new Vec2((this.spriteSize.x * id) / this.texture.width, 0), new Vec2((this.spriteSize.x * (id + 1)) / this.texture.width, 0), new Vec2((this.spriteSize.x * (id + 1)) / this.texture.width, -1), new Vec2((this.spriteSize.x * id) / this.texture.width, -1), ]; } bind(gfx) { this.texture.bind(gfx); } unbind(gfx) { this.texture.unbind(gfx); } } async function loadTexture(path) { return new Promise(resolve => { const img = new Image(); img.addEventListener("load", () => { resolve(img); }); img.src = path; }); } export class Camera { dt = 0; position; movement; speed = 600; scale = 1.0; scaling; scaleSpeed = 1.5; constructor(position) { this.position = position; this.movement = new Vec4(0, 0, 0, 0); this.scaling = new Vec2(0, 0); } update(dt) { this.dt = dt; let newPosition = this.movement.multScalarNew(this.dt); this.position.x += (newPosition.x + newPosition.y) * this.speed; this.position.y += (newPosition.z + newPosition.w) * this.speed; this.scale += (this.scaling.x + this.scaling.y) * this.dt * this.scaleSpeed; if (this.scale < 0.5) { this.scale = 0.5; } if (this.scale > 1.5) { this.scale = 1.5; } } }