create-spud 0.0.1 → 0.1.1

package/example/demo.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>game_name</title>
     <style>
+      /* fonts_face_css */
       canvas {
         position: fixed;
         inset: 0;

package/example/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>game_name</title>
     <style>
+      /* fonts_face_css */
       canvas {
         position: fixed;
         inset: 0;

package/example/readme.md

@@ -1,6 +1,6 @@
 # game_name
 
-# Getting started
+## Getting started
 
 Useful scripts:
 
@@ -24,14 +24,15 @@ bun run dev:demo
 bun run build
 ```
 
-# Resources:
+## Resources:
 
 - **Game assets**
   - [itch.io game assets](https://itch.io/game-assets)
 
 - **Audio**
-  - [sfxr.me sfx generator](https://pro.sfxr.me/)
+  - [sfxr.me sfx generator](https://pro.sfxr.me/) and [bfxr](https://www.bfxr.net/)
   - [OpenGameArt cc0 sound effects](https://opengameart.org/art-search-advanced?keys=&title=&field_art_tags_tid_op=or&field_art_tags_tid=&name=&field_art_type_tid%5B%5D=13&field_art_licenses_tid%5B%5D=4)
+  - [Free sfx](https://www.freesfx.co.uk/)
 
 - **Animation**
   - [easings.net](https://easings.net/)
@@ -39,10 +40,12 @@ bun run build
 - **Sprites & pixel art**
   - [Aseprite](https://www.aseprite.org/)
   - [Pixel planet generator (itch.io)](https://deep-fold.itch.io/pixel-planet-generator)
+  - [Paint of Persia](https://dunin.itch.io/ptop)
 
 - **Fonts**
   - [Google Fonts](https://fonts.google.com/)
   - [Font Squirrel](https://www.fontsquirrel.com/)
+  - [Font Library](https://fontlibrary.org/)
 
 - **Documentation for dev tools & APIs used in this project**
   - [Vite docs](https://vite.dev/)

package/example/src/demo.ts

@@ -13,7 +13,6 @@ const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 
 const ctx = canvas.getContext("2d", { alpha: false })!;
-/* pixel_art_image_smoothing */
 
 let lastFrameTime = 0;
 let timeToProcessPhysics = 0;

package/example/src/gameplay.ts

@@ -21,17 +21,12 @@ export function draw(state: State, ctx: CanvasRenderingContext2D) {
     y: height / 2,
   };
 
+  /* pixel_art_image_smoothing */
+
   // clear out the background
   ctx.fillStyle = "#0b0d1a";
   ctx.fillRect(0, 0, width, height);
 
-  // write some text
-  ctx.fillStyle = "white";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  ctx.font = "32px sans-serif";
-  ctx.fillText("hello, gamer", center.x, center.y);
-
   // draw an orbiting circle
   const moon = {
     radius: 30,
@@ -44,4 +39,11 @@ export function draw(state: State, ctx: CanvasRenderingContext2D) {
     },
   };
   /* moon_sprite_draw */
+
+  // write some text
+  ctx.fillStyle = "white";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  /* fonts_ctx_font */
+  ctx.fillText("hello, gamer", center.x, center.y);
 }

package/example/src/index.ts

@@ -16,7 +16,6 @@ const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 
 const ctx = canvas.getContext("2d", { alpha: false })!;
-/* pixel_art_image_smoothing */
 
 let lastFrameTime = 0;
 let timeToProcessPhysics = 0;

package/example/src/sprite.ts

@@ -30,12 +30,13 @@ export function drawSprite(
   frameIndex: number,
   x: number,
   y: number,
+  scale = 1,
 ) {
   const frame = frameIndex % sheet.frameCount;
   const sourceX = frame * sheet.frameWidthPx;
   const sourceY = 0;
-  const drawWidthPx = sheet.frameWidthPx;
-  const drawHeightPx = sheet.frameHeightPx;
+  const drawWidthPx = sheet.frameWidthPx * scale;
+  const drawHeightPx = sheet.frameHeightPx * scale;
 
   // see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
   ctx.drawImage(

package/index.ts

@@ -7,7 +7,12 @@ import kebabcase from "lodash.kebabcase";
 
 intro("It's spud time.");
 
-const Feature = { Audio: "Audio", PixelArt: "PixelArt" } as const;
+const Feature = {
+  Audio: "Audio",
+  Fonts: "Fonts",
+  PixelArt: "PixelArt",
+} as const;
+
 type Feature = (typeof Feature)[keyof typeof Feature];
 
 const { rawGameName, features, shouldContinue } = await group(
@@ -23,10 +28,11 @@ const { rawGameName, features, shouldContinue } = await group(
     features: () =>
       multiselect({
         message: "Features",
-        initialValues: [Feature.Audio],
+        initialValues: [],
         required: false,
         options: [
           { label: "Audio", value: Feature.Audio },
+          { label: "Fonts", value: Feature.Fonts },
           { label: "Pixel art", value: Feature.PixelArt },
         ],
       }),
@@ -91,6 +97,8 @@ async function copyDir(
     if (entry.isDirectory()) {
       if (entry.name === "node_modules" || entry.name === "dist") continue;
       if (entry.name === "audio" && !replacements.features.includes(Feature.Audio)) continue;
+      if (entry.name === "fonts" && !replacements.features.includes(Feature.Fonts)) continue;
+      if (entry.name === "images" && !replacements.features.includes(Feature.PixelArt)) continue;
       await copyDir(sourcePath, destPath, replacements);
       continue;
     }
@@ -123,9 +131,9 @@ async function copyDir(
         replacements.features.includes(Feature.PixelArt) ? "image-rendering: pixelated;\n" : "",
       )
       .replaceAll(
-        "/* pixel_art_image_smoothing */\n",
+        "  /* pixel_art_image_smoothing */\n",
         replacements.features.includes(Feature.PixelArt)
-          ? "ctx.imageSmoothingEnabled = false;\n"
+          ? "  // ensure sharp edges for scaled pixel art\n  ctx.imageSmoothingEnabled = false;\n"
           : "",
       )
       .replaceAll(
@@ -138,6 +146,18 @@ async function copyDir(
         "/* audio_import */\n",
         replacements.features.includes(Feature.Audio) ? 'import { sfx } from "./audio";\n' : "",
       )
+      .replaceAll(
+        "      /* fonts_face_css */\n",
+        replacements.features.includes(Feature.Fonts)
+          ? `      @font-face {
+        font-family: 'Atari';
+        font-display: block;
+        src: url('/src/assets/fonts/atari.ttf') format('truetype');
+      }
+
+`
+          : "",
+      )
       .replaceAll(
         "  /* moon_sprite_draw */\n",
         replacements.features.includes(Feature.PixelArt)
@@ -158,6 +178,12 @@ async function copyDir(
     });
 `
           : "    /* handle inputs and update state */\n",
+      )
+      .replaceAll(
+        "/* fonts_ctx_font */",
+        replacements.features.includes(Feature.Fonts)
+          ? 'ctx.font = "48px Atari";'
+          : 'ctx.font = "48px sans-serif";',
       );
     await Bun.write(destPath, replaced);
   }

package/package.json

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

package/readme.md

@@ -8,17 +8,32 @@ The quickest way to set up and scaffold a [spud](https://spud.gg) game.
 bun create spud
 ```
 
+![demo](demo.svg)
+
 ## What gets created
 
 - A new folder named after your game
-- A ready-to-run spud game project based on the `example/` template
+- A ready-to-run minimal spud game project
+
+## Automatically set up for you
+
+- A working [Vite](https://vite.dev) + [TypeScript](https://www.typescriptlang.org) project with [hot module replacement](https://vite.dev/guide/features#hot-module-replacement) (no config needed)
+- 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.
+  - Pixel‑art mode (example sprite sheet, image smoothing disabled)
 
 ## Requirements
 
 - [Bun](https://bun.com/) (runtime + package manager)
 
 <details>
-<summary><strong>Bun installation guide</strong></summary>
+<summary><strong>Installation guide</strong></summary>
 
 1. Install Bun ([docs](https://bun.com/docs/installation)):
 
@@ -33,3 +48,8 @@ curl -fsSL https://bun.sh/install | bash
 ## Notes
 
 - This CLI is Bun-only. If you try to run it with Node (`npx create spud`, for example), that won't work.
+
+<!--
+TODO
+- add hmr hints for Vite to cleanup / reinit the raf loops and keep game state reloadable.
+-->