half working frame rendering
This commit is contained in:
parent
5d5f620fec
commit
9f211ec36a
3 changed files with 52 additions and 3 deletions
45
msagent.js/src/agent.ts
Normal file
45
msagent.js/src/agent.ts
Normal file
|
@ -0,0 +1,45 @@
|
|||
import { AcsData } from "./character.js";
|
||||
import { AcsAnimationFrameInfo } from "./structs/animation.js";
|
||||
|
||||
export class Agent {
|
||||
private data: AcsData;
|
||||
private cnv: HTMLCanvasElement;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
constructor(data: AcsData) {
|
||||
this.data = data;
|
||||
this.cnv = document.createElement("canvas");
|
||||
this.ctx = this.cnv.getContext("2d")!;
|
||||
this.cnv.width = data.characterInfo.charWidth;
|
||||
this.cnv.height = data.characterInfo.charHeight;
|
||||
this.cnv.style.position = "fixed";
|
||||
this.hide();
|
||||
this.renderFrame(this.data.animInfo[0].animationData.frameInfo[0]);
|
||||
}
|
||||
|
||||
private renderFrame(frame: AcsAnimationFrameInfo) {
|
||||
for (const mimg of frame.images) {
|
||||
const img = this.data.images[mimg.imageIndex];
|
||||
let data = this.ctx.createImageData(img.image.width, img.image.height);
|
||||
for (let i = 0; i < img.image.data.length; i++) {
|
||||
let px = this.data.characterInfo.palette[img.image.data[i]];
|
||||
data.data[(i * 4)] = px.r;
|
||||
data.data[(i * 4) + 1] = px.g;
|
||||
data.data[(i * 4) + 2] = px.b;
|
||||
data.data[(i * 4) + 3] = px.a;
|
||||
}
|
||||
this.ctx.putImageData(data, mimg.xOffset, mimg.yOffset);
|
||||
}
|
||||
}
|
||||
|
||||
addToDom(parent: HTMLElement = document.body) {
|
||||
parent.appendChild(this.cnv);
|
||||
}
|
||||
|
||||
show() {
|
||||
this.cnv.style.display = "block";
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.cnv.style.display = "none";
|
||||
}
|
||||
}
|
|
@ -4,9 +4,10 @@ import { LOCATION } from './structs/core.js';
|
|||
import { AcsCharacterInfo } from './structs/character.js';
|
||||
import { AcsAnimationEntry } from './structs/animation.js';
|
||||
import { AcsImageEntry } from './structs/image.js';
|
||||
import { Agent } from './agent.js';
|
||||
|
||||
// Experiment for storing parsed data
|
||||
class AcsData {
|
||||
export class AcsData {
|
||||
characterInfo = new AcsCharacterInfo();
|
||||
animInfo: AcsAnimationEntry[] = [];
|
||||
images: AcsImageEntry[] = [];
|
||||
|
@ -53,12 +54,13 @@ function agentCharacterParseACS(buffer: BufferStream) {
|
|||
});
|
||||
|
||||
console.log(acsData);
|
||||
return acsData;
|
||||
}
|
||||
|
||||
// For the testbed code only, remove when that gets axed
|
||||
// (or don't, I'm not your dad)
|
||||
export function agentParseCharacterTestbed(buffer: Uint8Array) {
|
||||
return agentCharacterParseACS(new BufferStream(buffer));
|
||||
return new Agent(agentCharacterParseACS(new BufferStream(buffer)));
|
||||
}
|
||||
|
||||
// TODO this will be the public API
|
||||
|
|
|
@ -11,7 +11,9 @@ input.addEventListener("change", async () => {
|
|||
let buffer = await input.files![0].arrayBuffer();
|
||||
|
||||
console.log("About to parse character");
|
||||
msagent.agentParseCharacterTestbed(new Uint8Array(buffer));
|
||||
let agent = msagent.agentParseCharacterTestbed(new Uint8Array(buffer));
|
||||
agent.addToDom(document.body);
|
||||
agent.show();
|
||||
console.log("parsed character");
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in a new issue