A hackable template for creating small and fast browser games.
1import {Mesh} from "./mesh.js";
2import {create_spritesheet_from, create_texture_from, fetch_image, Spritesheet} from "./texture.js";
3
4/**
5 * Asynchronously load a texture.
6 *
7 * let game = new Game();
8 * Promise.all([
9 * load_texture(game, "Bricks059_1K_Color.jpg"),
10 * load_texture(game, "Bricks059_1K_Normal.jpg"),
11 * load_texture(game, "Bricks059_1K_Roughness.jpg"),
12 * ]).then(() => {
13 * scene_stage(game);
14 * game.Start();
15 * });
16 */
17export async function load_texture(
18 game: {
19 Gl: WebGL2RenderingContext;
20 Textures: Record<string, WebGLTexture>;
21 },
22 name: string,
23) {
24 let image = await fetch_image("../textures/" + name + ".webp");
25 game.Textures[name] = create_texture_from(game.Gl, image);
26}
27
28/**
29 * Asynchronously load a spritesheet.
30 *
31 * The spritesheet will be uploaded to the GPU without mipmaps and using only
32 * GL_NEAREST for scaling.
33 */
34export async function load_spritesheet(
35 game: {
36 Gl: WebGL2RenderingContext;
37 Spritesheets: Record<string, Spritesheet>;
38 },
39 name: string,
40) {
41 let image = await fetch_image("../sprites/" + name + ".webp");
42 game.Spritesheets[name] = create_spritesheet_from(game.Gl, image);
43}
44
45/**
46 * Asynchronously load a mesh.
47 *
48 * The mesh file must be transpiled to JavaScript in a separate build step.
49 *
50 * let game = new Game();
51 * Promise.all([
52 * load_mesh("monkey_flat"),
53 * load_mesh("monkey_smooth")
54 * ]).then(() => {
55 * scene_stage(game);
56 * game.Start();
57 * });
58 */
59export async function load_mesh(
60 game: {
61 Gl: WebGL2RenderingContext;
62 Meshes: Record<string, Mesh>;
63 Ui: HTMLElement;
64 },
65 name: string,
66) {
67 let module = await import("../meshes/" + name + ".js");
68 game.Meshes[name] = module["mesh_" + name](game.Gl);
69
70 // Report loading progress.
71 game.Ui.innerHTML += `Loading <code>${name}</code>... ✓<br>`;
72}