npm - create-spud - Versions diffs - 0.1.5 → 0.1.7 - Mend

create-spud 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/example/index.html CHANGED Viewed

@@ -10,11 +10,13 @@
       canvas {
         position: fixed;
         inset: 0;
+        width: 100%;
+        height: 100%;
         /* pixel_art_canvas_css */
       }
     </style>
   </head>
   <body>
-    <script type="module" src="/src/index.ts"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/example/package.json CHANGED Viewed

@@ -4,8 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "dev:demo": "vite --open /demo.html",
+    "dev": "bunx --bun vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },

package/example/readme.md CHANGED Viewed

@@ -14,11 +14,6 @@ bun i
 bun dev
 ```
-```bash
-# start the local development server and open the demo.html directly
-bun run dev:demo
-```
 ```bash
 # prepare a production build
 bun run build

package/example/src/audio.ts CHANGED Viewed

@@ -19,8 +19,8 @@ export const sfx = audio.createSounds({
 });
 /*
-  createMusic is for longer tracks that can
-  stream and don't need frame-perfect timing.
+  createMusic is for longer tracks that can stream and don't need
+  frame-perfect timing.
 */
 export const menuMusic = audio.createMusic({
   url: menuMusicUrl,
@@ -28,9 +28,4 @@ export const menuMusic = audio.createMusic({
   volume: 0.4,
 });
-/*
-  in spud demo mode (spud.isDemoMode === true), audio methods are no-ops.
-  that means you can always call sfx("...").play() or music.play() without
-  adding conditional checks; the demo stays silent automatically.
-*/
 menuMusic.play();

package/example/src/canvas.ts ADDED Viewed

@@ -0,0 +1,36 @@
+export function createBounds() {
+  return { x: 0, y: 0, width: 0, height: 0, centerX: 0, centerY: 0 };
+}
+type Bounds = ReturnType<typeof createBounds>;
+/*
+  by default, canvas rendering is blurry on high-dpi screens.
+  this fixes it by scaling the pixel buffer by the devicePixelRatio
+  and then setting a matching transform so that the drawing coords
+  can stay in CSS pixels.
+  see also: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
+*/
+export function scaleAndObserveCanvasSize(ctx: CanvasRenderingContext2D, bounds: Bounds) {
+  const { canvas } = ctx;
+  function updateCanvasSize() {
+    const { x, y, width, height } = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    bounds.x = x;
+    bounds.y = y;
+    bounds.width = width;
+    bounds.height = height;
+    bounds.centerX = width / 2;
+    bounds.centerY = height / 2;
+  }
+  updateCanvasSize();
+  new ResizeObserver(updateCanvasSize).observe(canvas);
+}

package/example/src/gameLoop.ts ADDED Viewed

@@ -0,0 +1,42 @@
+type GameLoopConfig<State> = {
+  ctx: CanvasRenderingContext2D;
+  state: State;
+  update: (state: State, dt: number) => void;
+  render: (state: State, ctx: CanvasRenderingContext2D) => void;
+  fixedDeltaTime?: number;
+};
+export function gameLoop<State>({
+  ctx,
+  state,
+  update,
+  render,
+  fixedDeltaTime = 8 / 1000,
+}: GameLoopConfig<State>) {
+  let lastFrameTime: number | null = null;
+  let accumulator = 0;
+  function tick(now: number) {
+    if (lastFrameTime === null) {
+      lastFrameTime = now;
+    }
+    const elapsed = now - lastFrameTime;
+    const dt = Math.min(elapsed / 1000, 0.1);
+    lastFrameTime = now;
+    {
+      accumulator += dt;
+      while (accumulator >= fixedDeltaTime) {
+        update(state, fixedDeltaTime);
+        accumulator -= fixedDeltaTime;
+      }
+    }
+    render(state, ctx);
+    requestAnimationFrame(tick);
+  }
+  render(state, ctx);
+  requestAnimationFrame(tick);
+}

package/example/src/gameplay.ts CHANGED Viewed

@@ -1,36 +1,26 @@
 import { Button, gamepads } from "@spud.gg/api";
-import { State } from "./state";
-import { CanvasFrameRect } from "./helpers";
+import type { State } from "./state";
 /* moon_sprite_import */
 /* audio_import */
-/*
-  the update loop runs in a fixed time-step and should be used for any
-  state updates. `deltaTime` is the time since the last update call.
-*/
-export function update(state: State, deltaTime: number) {
-  state.elapsedSeconds += deltaTime / 1000;
-  if (gamepads.anyPlayer.buttonJustPressed(Button.RightTrigger)) {
-    /* audio_shoot_sfx */
-  }
+export function update(state: State, dt: number) {
+  // handle inputs and update state here
+  state.elapsedSeconds += dt;
+  /* audio_shoot_sfx */
+  // handle any post-update cleanup below
+  gamepads.clearInputs();
 }
-export function render({
-  state,
-  ctx,
-  rect,
-}: {
-  state: State;
-  ctx: CanvasRenderingContext2D;
-  rect: CanvasFrameRect;
-}) {
-  const { width, height, centerX, centerY } = rect;
+export function render(state: State, ctx: CanvasRenderingContext2D) {
+  const { width, height, centerX, centerY } = state.bounds;
   /* pixel_art_image_smoothing */
   // clear out the background
   ctx.fillStyle = "#0b0d1a";
   ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "white";
   // draw an orbiting circle
   const moon = {
@@ -43,10 +33,10 @@ export function render({
       return centerY + Math.sin(state.elapsedSeconds) * moon.orbitRadius;
     },
   };
   /* moon_sprite_draw */
   // write some text
-  ctx.fillStyle = "white";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   /* fonts_ctx_font */

package/example/src/main.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/*
+  main.ts is the main entry point for your game.
+*/
+import { scaleAndObserveCanvasSize } from "./canvas";
+import { gameLoop } from "./gameLoop";
+import { render, update } from "./gameplay";
+import { state } from "./state";
+const canvas = document.createElement("canvas");
+document.body.appendChild(canvas);
+const ctx = canvas.getContext("2d", { alpha: false })!;
+scaleAndObserveCanvasSize(ctx, state.bounds);
+gameLoop({ ctx, state, update, render });

package/example/src/state.ts CHANGED Viewed

@@ -1,5 +1,8 @@
+import { createBounds } from "./canvas";
 export const state = {
   elapsedSeconds: 0,
+  bounds: createBounds(),
 };
 export type State = typeof state;

package/example/vite.config.ts CHANGED Viewed

@@ -1,22 +1,12 @@
 import { defineConfig } from "vite";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
-const dir = dirname(fileURLToPath(import.meta.url));
 export default defineConfig({
   build: {
     sourcemap: true,
     modulePreload: {
       polyfill: false,
     },
-    rolldownOptions: {
-      input: {
-        main: resolve(dir, "index.html"),
-        demo: resolve(dir, "demo.html"),
-      },
-    },
   },
   plugins: [ViteImageOptimizer()],
   resolve: {

package/index.ts CHANGED Viewed

@@ -40,7 +40,7 @@ const { rawGameName, features, shouldContinue } = await group(
       }),
     shouldContinue: ({ results }) =>
       confirm({
-        message: `Create a folder for "${kebabcase((results.rawGameName ?? "").trim())}" in the current directory?`,
+        message: `Ready to write the files to "./${kebabcase((results.rawGameName ?? "").trim())}". Continue?`,
       }),
   },
   {
@@ -66,7 +66,11 @@ await tasks([
     title: `Scaffolding project in ./${slug}/`,
     async task() {
       await mkdir(targetDir, { recursive: true });
-      await copyDir(templateDir, targetDir, { gameName, slug, features });
+      await copyDir(templateDir, targetDir, {
+        gameName,
+        slug,
+        features,
+      });
       return "Initialized project from spud starter template";
     },
   },
@@ -176,10 +180,13 @@ async function copyDir(
       .replaceAll(
         "    /* audio_shoot_sfx */\n",
         replacements.features.includes(Feature.Audio)
-          ? `    sfx("shoot").play({
+        }
+          ? `  if (gamepads.anyPlayer.buttonJustPressed(Button.RightTrigger)) {
+    sfx("shoot").play({
       detune: -1000 + Math.random() * 2000,
       playbackRate: 0.5 + Math.random(),
     });
+  }
 `
           : "    /* handle inputs and update state */\n",
       )
@@ -189,6 +196,7 @@ async function copyDir(
           ? 'ctx.font = "48px Atari";'
           : 'ctx.font = "48px sans-serif";',
       );
     await Bun.write(destPath, replaced);
   }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-spud",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "bin": {
     "create-spud": "./index.ts"
   },

package/readme.md CHANGED Viewed

@@ -21,8 +21,6 @@ bun create spud
 - Canvas setup with [DPI-aware scaling](https://web.dev/articles/canvas-hidipi)
 - Fixed‑timestep update loop + variable-rate render loop ready to edit
 - Static asset import handling through [Vite](https://vite.dev/guide/assets#importing-asset-as-url) and [image optimization](https://github.com/FatehAK/vite-plugin-image-optimizer)
-- `index.html` and `demo.html` entry points with scripts ready to run
-  - _(Demo mode is a non-interactive gameplay example, providing your potential players a preview into your actual game. Spud favors realistic self-playing demos over pre-recorded trailers.)_
 - Gamepad integration with the [spud API (npm)](https://www.npmjs.com/package/@spud.gg/api)
 - Optional:
   - Audio examples (low-latency [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) sfx and [streaming background music](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement)) with [autoplay best practices](https://developer.chrome.com/blog/web-audio-autoplay) for web games.
@@ -52,4 +50,5 @@ curl -fsSL https://bun.sh/install | bash
 <!--
 TODO
 - add hmr hints for Vite to cleanup / reinit the raf loops and keep game state reloadable.
+- handle resize
 -->

package/example/_gitignore DELETED Viewed

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-node_modules
-dist
-dist-ssr
-*.local
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/example/demo.html DELETED Viewed

@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>game_name</title>
-    <style>
-      /* fonts_face_css */
-      canvas {
-        position: fixed;
-        inset: 0;
-        height: 100vh;
-        width: 100vw;
-        /* pixel_art_canvas_css */
-      }
-    </style>
-  </head>
-  <body>
-    <script type="module" src="/src/demo.ts"></script>
-  </body>
-</html>

package/example/src/demo.ts DELETED Viewed

@@ -1,50 +0,0 @@
-/*
-  demo.ts is the entry point for the demo.html file, which displays a
-  non-interactive demo of your game. it should be a minimal preview
-  version of your game that starts automatically and does not play any
-  sounds, use local storage, or handle inputs.
-*/
-import { render, update } from "./gameplay";
-import { state } from "./state";
-import { handleCanvasDpi } from "./helpers";
-const canvas = document.createElement("canvas");
-document.body.appendChild(canvas);
-const ctx = canvas.getContext("2d", { alpha: false })!;
-let lastFrameTime: number | null = null;
-let physicsAccumulatorMs = 0;
-function gameLoop(now: number) {
-  // initialize lastFrameTime on the first tick
-  if (lastFrameTime === null) {
-    lastFrameTime = now;
-  }
-  // cap extreme frame deltas so one frame doesn't do a huge catch-up after tab restore
-  const deltaTime = Math.min(now - lastFrameTime, 100);
-  lastFrameTime = now;
-  const rect = handleCanvasDpi(ctx);
-  {
-    // process physics updates at a fixed 120hz time step
-    physicsAccumulatorMs += deltaTime;
-    const physicsTicksPerSecond = 120;
-    const fixedDeltaMs = 1000 / physicsTicksPerSecond;
-    while (physicsAccumulatorMs >= fixedDeltaMs) {
-      physicsAccumulatorMs -= fixedDeltaMs;
-      update(state, fixedDeltaMs);
-    }
-  }
-  render({ state, ctx, rect });
-  requestAnimationFrame(gameLoop); // queue up the next tick
-}
-// render immediately, then start the game loop
-const rect = handleCanvasDpi(ctx);
-render({ state, ctx, rect });
-requestAnimationFrame(gameLoop);

package/example/src/helpers.ts DELETED Viewed

@@ -1,24 +0,0 @@
-/*
-  by default, canvas rendering is blurry on high-dpi screens.
-  this fixes it by scaling the pixel buffer by the devicePixelRatio
-  and then setting a matching transform so that the drawing coords
-  can stay in CSS pixels.
-  see also: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
-*/
-export function handleCanvasDpi(ctx: CanvasRenderingContext2D) {
-  const { width, height } = ctx.canvas.getBoundingClientRect();
-  const targetWidth = width * window.devicePixelRatio;
-  const targetHeight = height * window.devicePixelRatio;
-  const rect = { width, height, centerX: width / 2, centerY: height / 2 };
-  // optimization: since setting canvas.width and .height reset the canvas state, skip if the size didn't change
-  if (ctx.canvas.width === targetWidth && ctx.canvas.height === targetHeight) return rect;
-  ctx.canvas.width = targetWidth;
-  ctx.canvas.height = targetHeight;
-  ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
-  return rect;
-}
-export type CanvasFrameRect = ReturnType<typeof handleCanvasDpi>;

package/example/src/index.ts DELETED Viewed

@@ -1,64 +0,0 @@
-/*
-  index.ts is the main entry point for your game. it's responsible for
-  setting up the canvas and the two main game loops: a 120hz fixed time
-  step physics/update loop, and a variable framerate draw cycle.
-  see also:
-    - https://gafferongames.com/post/fix_your_timestep/
-    - https://www.youtube.com/watch?v=yGhfUcPjXuE
-    - https://gist.github.com/HipHopHuman/3e9b4a94b30ac9387d9a99ef2d29eb1a
-*/
-import { spud, gamepads } from "@spud.gg/api";
-import { render, update } from "./gameplay";
-import { state } from "./state";
-import { handleCanvasDpi } from "./helpers";
-const canvas = document.createElement("canvas");
-document.body.appendChild(canvas);
-const ctx = canvas.getContext("2d", { alpha: false })!;
-let lastFrameTime: number | null = null;
-let physicsAccumulatorMs = 0;
-let animationFrame = -1;
-function gameLoop(now: number) {
-  // initialize lastFrameTime on the first tick
-  if (lastFrameTime === null) {
-    lastFrameTime = now;
-  }
-  // cap extreme frame deltas after tab restore so one frame doesn't do a huge catch-up
-  const deltaTime = Math.min(now - lastFrameTime, 100);
-  lastFrameTime = now;
-  const rect = handleCanvasDpi(ctx);
-  {
-    // process physics updates at a fixed 120hz time step
-    physicsAccumulatorMs = spud.isPaused ? 0 : physicsAccumulatorMs + deltaTime;
-    const physicsTicksPerSecond = 120;
-    const fixedDeltaMs = 1000 / physicsTicksPerSecond;
-    while (physicsAccumulatorMs >= fixedDeltaMs) {
-      physicsAccumulatorMs -= fixedDeltaMs;
-      update(state, fixedDeltaMs);
-      gamepads.clearInputs();
-    }
-  }
-  render({ state, ctx, rect });
-  animationFrame = requestAnimationFrame(gameLoop); // queue up the next tick
-}
-// render immediately, then start the game loop
-const rect = handleCanvasDpi(ctx);
-render({ state, ctx, rect });
-animationFrame = requestAnimationFrame(gameLoop);
-// enable hot reloading in dev mode, but ensure the canvas is properly cleaned up
-if (import.meta.hot) {
-  import.meta.hot.accept(() => {
-    cancelAnimationFrame(animationFrame);
-    canvas.remove();
-  });
-}