[oden][game] Draw the world

This involved basically a giant rewrite of the renderer because I now
need to share the vertex buffer across textures and it is *a lot* let
me tell you.

There's like a vertical seam which I don't understand yet.

game/level.ts

@@ -0,0 +1,141 @@
+// NOTE: It's super not clear how much of this should be in rust vs
+//       javascript. Dealing with the level code is really nice in javascript
+//       but there's a bunch of weird stuff that really feels lower level.
+import { load_texture } from "./assets";
+import { Texture, print, spr, use_texture } from "./graphics";
+import { load_string } from "./io";
+
+// TODO: Use io-ts? YIKES.
+
+export type Tile = {
+  px: [number, number];
+  src: [number, number];
+  f: number;
+  t: number;
+  a: number;
+};
+
+export type TileLayer = {
+  type: "tile";
+  texture: Texture;
+  grid_size: number;
+  offset: [number, number];
+  tiles: Tile[];
+};
+
+export type Layer = TileLayer;
+
+export type Level = {
+  world_x: number;
+  world_y: number;
+  width: number;
+  height: number;
+  layers: Layer[];
+};
+
+export type TileSet = { id: number; texture: Texture };
+
+export type World = { levels: Level[]; tilesets: Map<number, TileSet> };
+
+async function load_tileset(def: {
+  uid: number;
+  relPath: string;
+}): Promise<TileSet> {
+  let relPath = def.relPath as string;
+  if (relPath.endsWith(".aseprite")) {
+    // Whoops let's load the export instead?
+    relPath = relPath.substring(0, relPath.length - 8) + "png";
+  }
+  let texture = await load_texture(relPath);
+
+  print("Loaded tileset", def.uid, "from", relPath, "as ID", texture.id());
+  return { id: def.uid, texture };
+}
+
+function load_level(
+  tile_sets: Map<number, TileSet>,
+  def: {
+    worldX: number;
+    worldY: number;
+    pxWid: number;
+    pxHei: number;
+    layerInstances: {
+      __gridSize: number;
+      __pxTotalOffsetX: number;
+      __pxTotalOffsetY: number;
+      __tilesetDefUid: number;
+      gridTiles: {
+        px: [number, number];
+        src: [number, number];
+        f: number;
+        t: number;
+        a: number;
+      }[];
+    }[];
+  }
+): Level {
+  return {
+    world_x: def.worldX,
+    world_y: def.worldY,
+    width: def.pxWid,
+    height: def.pxHei,
+    layers: def.layerInstances.map((li) => {
+      const tileset = tile_sets.get(li.__tilesetDefUid);
+      if (!tileset) {
+        throw new Error("Unable to find texture!!! " + li.__tilesetDefUid);
+      }
+
+      return {
+        type: "tile",
+        texture: tileset.texture,
+        grid_size: li.__gridSize,
+        offset: [li.__pxTotalOffsetX, li.__pxTotalOffsetY],
+        tiles: li.gridTiles,
+      };
+    }),
+  };
+}
+
+export async function load_world(path: string): Promise<World> {
+  print("Loading map:", path);
+  const blob = await load_string(path);
+  const map = JSON.parse(blob);
+
+  const tilesets = new Map<number, TileSet>();
+  let loaded_tilesets = await Promise.all(
+    map.defs.tilesets
+      .filter((def: any) => def.relPath != null)
+      .map((def: any) => load_tileset(def))
+  );
+  for (const ts of loaded_tilesets) {
+    tilesets.set(ts.id, ts);
+  }
+
+  const levels = map.levels.map((l: any) => load_level(tilesets, l));
+  return { levels, tilesets };
+}
+
+export function draw_level(
+  level: Level,
+  offset_x: number = 0,
+  offset_y: number = 0
+) {
+  for (const layer of level.layers) {
+    use_texture(layer.texture);
+
+    let [ofx, ofy] = layer.offset;
+    ofx += offset_x;
+    ofy += offset_y;
+    for (const tile of layer.tiles) {
+      // TODO: Flip and whatnot.
+      spr(
+        tile.px[0] + ofx,
+        tile.px[1] + ofy,
+        layer.grid_size,
+        layer.grid_size,
+        tile.src[0],
+        tile.src[1]
+      );
+    }
+  }
+}

game/main.ts

@@ -2,8 +2,8 @@ import { cls, print, spr, use_texture, Texture } from "./graphics";
 import { load_texture } from "./assets";
 import { since_start } from "./time";
 import { btn, Button } from "./input";
-// import { load_string } from "./io";
 import { new_v2, vadd, vmul, vnorm } from "./vector";
+import { load_world, World, Level, draw_level } from "./level";
 
 /// TODO: Support reload by saving and restoring state from init/update/restore.
 
@@ -11,6 +11,8 @@ import { new_v2, vadd, vmul, vnorm } from "./vector";
 let clock = 0;
 
 let bot_sprite: Texture | undefined = undefined;
+let world: World | undefined = undefined;
+let level: Level | undefined = undefined;
 
 // Note zelda overworld is 16x8 screens
 //      zelda screen is 16x11 tiles
@@ -18,13 +20,6 @@ let bot_sprite: Texture | undefined = undefined;
 
 let loaded = false;
 
-async function load_map(path: string) {
-  // print("Loading map:", path);
-  // const blob = await load_string(path);
-  // const map = JSON.parse(blob);
-  // print("Loaded map:", map);
-}
-
 function load_assets() {
   // Start this load, but then...
   let texture_load = load_texture("./bot.png").then((n) => {
@@ -32,7 +27,16 @@ function load_assets() {
     bot_sprite = n;
   });
 
-  let map_load = load_map("./overworld.ldtk");
+  let map_load = load_world("./overworld.ldtk").then((w) => {
+    print("World loaded at", since_start());
+    world = w;
+
+    // Assume we start at 0,0
+    level = world.levels.find((l) => l.world_x == 0 && l.world_y == 0);
+    if (!level) {
+      throw new Error("UNABLE TO FIND LEVEL AT 0,0: CANNOT START");
+    }
+  });
 
   Promise.all([texture_load, map_load]).then(() => {
     loaded = true;
@@ -106,6 +110,10 @@ export function draw() {
     return;
   }
 
+  if (level != undefined) {
+    draw_level(level, 0, 0);
+  }
+
   if (bot_sprite != undefined) {
     // ...it gets resolved here?
     use_texture(bot_sprite);