@lampdotdev/lamp 0.0.0-stage → 0.36.2-nightly.16

package/Resources/GameKit/scaffold/Game/game.cpp

@@ -0,0 +1,142 @@
+// {{NAME}}: the game. A lit floor and a ball the left stick rolls, with a camera behind it that the right stick
+// turns, and its name in the corner. Everything is drawn with sokol_gfx through the one shader in scene.glsl.
+#include "lamp_game.h"
+#include "sokol_debugtext.h"
+#include "sokol_shape.h"
+#include "HandmadeMath.h"
+#include "scene.glsl.h"
+#include <cmath>
+#include <cstring>
+
+struct Mesh { sg_buffer vertices, indices; sshape_element_range_t range; };
+
+static struct {
+    sg_pipeline pipeline;
+    Mesh floor, ball;
+    HMM_Vec3 ball_at, eye;
+    float yaw, pitch;
+    int width, height;
+} g;
+
+// One shape from sokol_shape into a pair of buffers. `layout` keeps the last shape's vertex layout for the pipeline
+// (every shape's is the same).
+static sshape_state_t layout;
+template <typename Build> static Mesh make(Build build) {
+    static uint8_t vertices[64 * 1024 * 24];
+    static uint16_t indices[96 * 1024];
+    sshape_state_t state = {};
+    state.vertices.buffer = SSHAPE_RANGE(vertices);
+    state.indices.buffer = SSHAPE_RANGE(indices);
+    build(&state);
+    Mesh mesh;
+    mesh.vertices = sg_make_buffer(sshape_vertex_buffer_desc(&state));
+    mesh.indices = sg_make_buffer(sshape_index_buffer_desc(&state));
+    mesh.range = sshape_element_range(&state);
+    layout = state;
+    return mesh;
+}
+
+void game_init(const LampSetup* setup) {
+    g.width = setup->width;
+    g.height = setup->height;
+    g.ball_at = HMM_V3(0, 0.5f, 0);
+    g.pitch = 0.45f;
+
+    sdtx_desc_t text = {};
+    text.fonts[0] = sdtx_font_oric();
+    text.context.color_format = setup->color_format;
+    text.context.depth_format = setup->depth_format;
+    text.context.sample_count = setup->sample_count;
+    sdtx_setup(&text);
+
+    g.floor = make([](sshape_state_t* state) {
+        sshape_plane_t plane = {};
+        plane.width = 40; plane.depth = 40; plane.tiles = 10;
+        plane.color = sshape_color_3f(0.55f, 0.6f, 0.65f);
+        sshape_build_plane(state, &plane);
+    });
+    g.ball = make([](sshape_state_t* state) {
+        sshape_sphere_t sphere = {};
+        sphere.radius = 0.5f; sphere.slices = 36; sphere.stacks = 20;
+        sphere.color = sshape_color_3f(1.0f, 0.55f, 0.15f);
+        sshape_build_sphere(state, &sphere);
+    });
+
+    sg_pipeline_desc pipeline = {};
+    pipeline.shader = sg_make_shader(scene_shader_desc(sg_query_backend()));
+    pipeline.layout.buffers[0] = sshape_vertex_buffer_layout_state(&layout);
+    pipeline.layout.attrs[ATTR_scene_position] = sshape_position_vertex_attr_state(&layout);
+    pipeline.layout.attrs[ATTR_scene_normal] = sshape_normal_vertex_attr_state(&layout);
+    pipeline.layout.attrs[ATTR_scene_texcoord] = sshape_texcoord_vertex_attr_state(&layout);
+    pipeline.layout.attrs[ATTR_scene_color0] = sshape_color_vertex_attr_state(&layout);
+    pipeline.index_type = SG_INDEXTYPE_UINT16;
+    pipeline.cull_mode = SG_CULLMODE_BACK;
+    pipeline.depth.compare = SG_COMPAREFUNC_LESS_EQUAL;
+    pipeline.depth.write_enabled = true;
+    pipeline.depth.pixel_format = setup->depth_format;
+    pipeline.colors[0].pixel_format = setup->color_format;
+    g.pipeline = sg_make_pipeline(&pipeline);
+    lamp_log("{{NAME}} is ready.");
+}
+
+static void draw(const Mesh& mesh, const HMM_Mat4& view_projection, const HMM_Mat4& model, HMM_Vec4 tint) {
+    vs_params_t vs;
+    HMM_Mat4 mvp = HMM_MulM4(view_projection, model);
+    memcpy(vs.mvp, &mvp, sizeof mvp);
+    memcpy(vs.model, &model, sizeof model);
+    fs_params_t fs = {};
+    float light[4] = { 0.4f, 1.0f, 0.3f, 0 };
+    float eye[4] = { g.eye.X, g.eye.Y, g.eye.Z, 1 };
+    memcpy(fs.light_dir, light, sizeof light);
+    memcpy(fs.eye_pos, eye, sizeof eye);
+    memcpy(fs.tint, &tint, sizeof tint);
+    sg_bindings bindings = {};
+    bindings.vertex_buffers[0] = mesh.vertices;
+    bindings.index_buffer = mesh.indices;
+    sg_apply_bindings(&bindings);
+    sg_apply_uniforms(UB_vs_params, SG_RANGE(vs));
+    sg_apply_uniforms(UB_fs_params, SG_RANGE(fs));
+    sg_draw(mesh.range.base_element, mesh.range.num_elements, 1);
+}
+
+void game_frame(const LampFrame* frame) {
+    const LampPad& pad = frame->pads[0];
+    float dt = (float)frame->dt;
+
+    // The right stick turns the camera; the left stick rolls the ball the way the camera faces.
+    g.yaw += pad.rx * 2.0f * dt;
+    g.pitch = HMM_Clamp(0.15f, g.pitch - pad.ry * 1.5f * dt, 1.3f);
+    HMM_Vec3 forward = HMM_V3(sinf(g.yaw), 0, cosf(g.yaw));
+    HMM_Vec3 right = HMM_V3(-cosf(g.yaw), 0, sinf(g.yaw));
+    float speed = 6.0f * dt;
+    g.ball_at = HMM_AddV3(g.ball_at, HMM_AddV3(HMM_MulV3F(forward, pad.ly * speed), HMM_MulV3F(right, pad.lx * speed)));
+    g.ball_at.X = HMM_Clamp(-19.5f, g.ball_at.X, 19.5f);
+    g.ball_at.Z = HMM_Clamp(-19.5f, g.ball_at.Z, 19.5f);
+    if (pad.pressed & LAMP_A) lamp_log("A pressed with the ball at %.1f, %.1f", g.ball_at.X, g.ball_at.Z);
+
+    float distance = 9.0f;
+    g.eye = HMM_V3(g.ball_at.X - forward.X * distance * cosf(g.pitch), g.ball_at.Y + distance * sinf(g.pitch),
+                   g.ball_at.Z - forward.Z * distance * cosf(g.pitch));
+    HMM_Mat4 projection = HMM_Perspective_RH_ZO(60.0f * HMM_DegToRad, (float)g.width / (float)g.height, 0.1f, 200.0f);
+    HMM_Mat4 view = HMM_LookAt_RH(g.eye, g.ball_at, HMM_V3(0, 1, 0));
+    HMM_Mat4 view_projection = HMM_MulM4(projection, view);
+
+    sg_pass pass = {};
+    pass.action.colors[0].load_action = SG_LOADACTION_CLEAR;
+    pass.action.colors[0].clear_value = { 0.12f, 0.16f, 0.26f, 1.0f };
+    pass.swapchain = frame->swapchain;
+    sg_begin_pass(&pass);
+    sg_apply_pipeline(g.pipeline);
+    draw(g.floor, view_projection, HMM_M4D(1.0f), HMM_V4(1, 1, 1, 2));   // w = 2 asks the shader for the checks
+    HMM_Mat4 roll = HMM_Rotate_RH((float)frame->time * 2.0f, HMM_V3(1, 0, 0));
+    draw(g.ball, view_projection, HMM_MulM4(HMM_Translate(g.ball_at), roll), HMM_V4(1, 1, 1, 1));
+
+    // Text on a canvas a third of the screen's size, so each letter is 24 pixels: big enough from the sofa.
+    sdtx_canvas(g.width / 3.0f, g.height / 3.0f);
+    sdtx_origin(2, 2);
+    sdtx_color3f(1, 1, 1);
+    sdtx_puts("{{NAME}}");
+    sdtx_draw();
+    sg_end_pass();
+    sg_commit();
+}

package/Resources/GameKit/scaffold/Game/scene.glsl

@@ -0,0 +1,49 @@
+// The game's shader: sokol-shdc turns it into HLSL for the Xbox and Metal for the preview on the Mac, with
+// build/shaders/scene.glsl.h describing it to the game (scene_shader_desc, ATTR_scene_…, UB_vs_params, vs_params_t…).
+@vs vs
+layout(binding=0) uniform vs_params {
+    mat4 mvp;
+    mat4 model;
+};
+in vec4 position;
+in vec4 normal;
+in vec2 texcoord;
+in vec4 color0;
+out vec3 wpos;
+out vec3 nrm;
+out vec2 uv;
+out vec4 color;
+void main() {
+    gl_Position = mvp * position;
+    wpos = (model * position).xyz;
+    nrm = normalize(mat3(model) * normal.xyz);
+    uv = texcoord;
+    color = color0;
+}
+@end
+
+@fs fs
+layout(binding=1) uniform fs_params {
+    vec4 light_dir;
+    vec4 eye_pos;
+    vec4 tint;
+};
+in vec3 wpos;
+in vec3 nrm;
+in vec2 uv;
+in vec4 color;
+out vec4 frag_color;
+void main() {
+    vec3 n = normalize(nrm);
+    vec3 l = normalize(light_dir.xyz);
+    vec3 v = normalize(eye_pos.xyz - wpos);
+    vec3 h = normalize(l + v);
+    float diffuse = clamp(dot(n, l), 0.0, 1.0);
+    float spec = pow(clamp(dot(n, h), 0.0, 1.0), 48.0) * 0.4;
+    float checker = (tint.w > 1.5) ? (mod(floor(uv.x * 40.0) + floor(uv.y * 40.0), 2.0) * 0.25 + 0.75) : 1.0;
+    vec3 base = color.rgb * tint.rgb * checker;
+    frag_color = vec4(base * (0.18 + 0.82 * diffuse) + spec, 1.0);
+}
+@end
+
+@program scene vs fs

package/Resources/GameKit/scaffold-web/Web/game.js

@@ -0,0 +1,31 @@
+// {{NAME}}: not made yet. The same card a new app shows (a hammer, its name, "Lamp is making this game.") on the
+// game's background, so the window is plainly Lamp waiting rather than a game that looks broken. The game replaces
+// all of it: what this file holds, and world.js and making.js, which are the card's (the web-game skill says which
+// files a game has). The card is put together as a game that keeps the player's place through a change is: this file
+// only puts the parts together, world.js builds the world (and builds it again in place when it changes), and each
+// part that changes as the game is played is a class in a module of its own that takes its changes while the game
+// runs (making.js; lamp-game.js, "Changes while it's played"). Everything that has to last through a change is
+// registered here by name: the renderer, the camera, the gameplay state and the world's parts, so a change that
+// can't be swapped in runs this file again with all of them where they were (lamp-game.js, "What the game
+// registers").
+import * as THREE from 'three';
+import { game, hot } from './lamp-game.js';
+import { World } from './world.js';
+import { Making } from './making.js';
+
+const live = hot(import.meta);
+const renderer = live.renderer(() => new THREE.WebGLRenderer({ antialias: true }));
+const camera = live.camera('main', () => new THREE.PerspectiveCamera(60, 16 / 9, 0.1, 10));
+// Everything that says where the game is goes in here. Raise `version` when a field changes its meaning.
+const play = live.state('play', { version: 1, start: () => ({ mode: 'making', time: 0 }) });
+const world = live.keep('world', () => new World());
+const making = new Making(document.title);
+
+game({
+    renderer,
+    frame(f) {
+        play.time += f.dt;
+        making.update(f.dt);
+        renderer.render(world.scene, camera);
+    },
+});

package/Resources/GameKit/scaffold-web/Web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+<title>{{NAME}}</title>
+<script src="lamp.js"></script>
+<script type="importmap">{ "imports": { "three": "./three/three.module.js", "three/addons/": "./three/addons/", "phaser": "./phaser/phaser.esm.min.js" } }</script>
+</head>
+<body>
+<script type="module" src="game.js"></script>
+</body>
+</html>

package/Resources/GameKit/scaffold-web/Web/making.js

@@ -0,0 +1,33 @@
+// The card shown while the game is made. A part that changes as the game is played looks like this: a class whose
+// object holds its state, its look read where it's used, and the module ending with hot(import.meta).accept(), so a
+// change to its methods goes into the running game (lamp-game.js, "Changes while it's played").
+import { hot } from './lamp-game.js';
+
+const LOOK = `
+  .lamp-making { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; gap: 12px; pointer-events: none; z-index: 5; color: #fff;
+    font-family: -apple-system, system-ui, sans-serif; }
+  .lamp-making svg { width: 64px; height: 64px; color: rgba(255, 255, 255, 0.55); }
+  .lamp-making h1 { margin: 0; font-size: 34px; font-weight: 700; }
+  .lamp-making p { margin: 0; font-size: 20px; color: rgba(255, 255, 255, 0.55); }`;
+
+export class Making {
+    constructor(name) {
+        this.style = document.createElement('style');
+        this.card = document.createElement('div');
+        this.card.className = 'lamp-making';
+        this.card.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">'
+            + '<g transform="rotate(40 12 12)"><rect x="10.8" y="8.5" width="2.4" height="13" rx="1.2"/>'
+            + '<path d="M7 3.5h8.5l2.5 2.2v2.8H7z"/></g></svg>'
+            + '<h1></h1><p>Lamp is making this game.</p>';
+        this.card.querySelector('h1').textContent = name;
+        document.head.append(this.style);
+        document.body.append(this.card);
+    }
+
+    update() {
+        if (this.style.textContent !== LOOK) this.style.textContent = LOOK;
+    }
+}
+
+hot(import.meta).accept();

package/Resources/GameKit/scaffold-web/Web/world.js

@@ -0,0 +1,33 @@
+// What's slow to build and rarely changes: the scene, and later the level, the ground and the buildings.
+// build() puts it all in `built`, so a change to this file builds the world again in the running game, with the player
+// and everything else kept (the end of this file; lamp-game.js, "Changes while it's played").
+import * as THREE from 'three';
+import { hot } from './lamp-game.js';
+
+const live = hot(import.meta);
+const worlds = (live.data.worlds ??= new Set());
+
+export class World {
+    constructor() {
+        this.scene = new THREE.Scene();
+        this.built = new THREE.Group();
+        this.scene.add(this.built);
+        this.build();
+        worlds.add(this);
+    }
+
+    build() {
+        this.scene.background = new THREE.Color(0x1d2a44);
+    }
+
+    rebuild() {
+        this.built.traverse(o => {
+            if (o.geometry) o.geometry.dispose();
+            for (const m of [o.material].flat()) if (m) m.dispose();
+        });
+        this.built.clear();
+        this.build();
+    }
+}
+
+live.accept(() => { for (const world of worlds) world.rebuild(); });