create-bloop 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bloop",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Create a new Bloop game",
   "type": "module",
   "bin": "./dist/index.js",

package/templates/hello/package.json

@@ -13,8 +13,8 @@
     "vite": "^7.2.2"
   },
   "dependencies": {
-    "@bloopjs/bloop": "^0.0.87",
+    "@bloopjs/bloop": "^0.0.89",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.87"
+    "@bloopjs/web": "^0.0.89"
   }
 }

package/templates/mario/package.json

@@ -15,8 +15,8 @@
     "vite": "^7.2.2"
   },
   "dependencies": {
-    "@bloopjs/bloop": "^0.0.87",
+    "@bloopjs/bloop": "^0.0.89",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.87"
+    "@bloopjs/web": "^0.0.89"
   }
 }

package/templates/mario/public/sprites/Ground.json

@@ -0,0 +1,26 @@
+{ "frames": {
+   "Ground.aseprite": {
+    "frame": { "x": 0, "y": 0, "w": 16, "h": 16 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 16, "h": 16 },
+    "sourceSize": { "w": 16, "h": 16 },
+    "duration": 100
+   }
+ },
+ "meta": {
+  "app": "https://www.aseprite.org/",
+  "version": "1.3.8.1-arm64",
+  "image": "Ground.png",
+  "format": "I8",
+  "size": { "w": 16, "h": 16 },
+  "scale": "1",
+  "frameTags": [
+  ],
+  "layers": [
+   { "name": "Layer 1", "opacity": 255, "blendMode": "normal" }
+  ],
+  "slices": [
+  ]
+ }
+}

package/templates/mario/src/draw.ts

@@ -79,9 +79,8 @@ export function createDrawState(toodle: Toodle): DrawState {
   );
 
   const block = gameScreen.add(
-    toodle.shapes.Rect({
+    toodle.Quad("brick", {
       size: { width: BLOCK_SIZE, height: BLOCK_SIZE },
-      color: BLOCK_COLOR,
     }),
   );
 

package/templates/mario/src/game.ts

@@ -5,6 +5,7 @@ import { FLIPBOOKS } from "./sprites";
 import { AnimationSystem } from "./systems/animation";
 import { CollisionSystem } from "./systems/collision";
 import { InputsSystem } from "./systems/inputs";
+import { MatchmakingSystem } from "./systems/matchmaking";
 import { PhaseSystem } from "./systems/phase";
 import { PhysicsSystem } from "./systems/physics";
 
@@ -113,12 +114,10 @@ game.system(
   }),
 );
 
+game.system("matchmaking", MatchmakingSystem);
 game.system("inputs", InputsSystem);
-
 game.system("physics", PhysicsSystem);
-
 game.system("collision", CollisionSystem);
-
 game.system("animation", AnimationSystem);
 
 // Debug hitbox toggle (H key)

package/templates/mario/src/main.ts

@@ -1,12 +1,13 @@
 import "./style.css";
 import { Toodle } from "@bloopjs/toodle";
-import { joinRollbackRoom, start } from "@bloopjs/web";
+import { start } from "@bloopjs/web";
 import { createChromaticAberrationEffect } from "./chromatic-aberration";
 import { createDrawState, draw as drawFn } from "./draw";
 import { game } from "./game";
 
 let draw = drawFn;
 
+// boot up the game
 const app = await start({
   game,
   startRecording: false,
@@ -15,6 +16,17 @@ const app = await start({
   },
 });
 
+// HMR support
+if (import.meta.hot) {
+  import.meta.hot.accept("./game", async (newModule) => {
+    await app.acceptHmr(newModule?.game);
+  });
+
+  import.meta.hot.accept("./draw", async (newModule) => {
+    draw = newModule?.draw;
+  });
+}
+
 const canvas = app.canvas;
 if (!canvas) throw new Error("No canvas element found");
 
@@ -38,6 +50,8 @@ await toodle.assets.registerBundle("main", {
     marioWalk: spriteUrl("MarioWalk"),
     marioJump: spriteUrl("MarioJump"),
     marioSkid: spriteUrl("MarioSkid"),
+    brick: spriteUrl("Brick"),
+    ground: spriteUrl("Ground"),
   },
   autoLoad: true,
 });
@@ -54,7 +68,20 @@ requestAnimationFrame(function frame() {
   requestAnimationFrame(frame);
 });
 
-let networkJoined = false;
+game.system("recording-watcher", {
+  netcode({ event, time }) {
+    console.log("[netcode]", event.type, event);
+    if (event.type === "session:start") {
+      console.log(
+        "[netcode]",
+        "session started, recording at frame",
+        time.frame,
+      );
+
+      app.sim.record(100_000);
+    }
+  },
+});
 
 // Debug: Press R to start recording mid-game
 window.addEventListener("keydown", (e) => {
@@ -75,43 +102,3 @@ if (toodle.backend.type === "webgpu") {
     }
   });
 }
-
-game.system("title-input", {
-  update({ bag, inputs }) {
-    if (bag.phase !== "title") return;
-
-    if ((inputs.keys.enter.down || inputs.mouse.left.down) && !networkJoined) {
-      // Online multiplayer - wait for connection
-      bag.mode = "online";
-      bag.phase = "waiting";
-      networkJoined = true;
-
-      // Phase transitions are handled by the session-watcher system
-      joinRollbackRoom("mario-demo", app, {
-        onSessionStart() {
-          bag.phase = "playing";
-
-          app.sim.record(100_000);
-          console.log(
-            "Network session started, recording at frame",
-            app.sim.time.frame,
-          );
-        },
-        onSessionEnd() {
-          networkJoined = false;
-        },
-      });
-    }
-  },
-});
-
-// HMR support
-if (import.meta.hot) {
-  import.meta.hot.accept("./game", async (newModule) => {
-    await app.acceptHmr(newModule?.game);
-  });
-
-  import.meta.hot.accept("./draw", async (newModule) => {
-    draw = newModule?.draw;
-  });
-}

package/templates/mario/src/sprites.ts

@@ -1,4 +1,6 @@
 // TODO: allow loading animated sprite JSON from async boot
+import brickJson from "../public/sprites/Brick.json";
+import groundJson from "../public/sprites/Ground.json";
 import marioIdleJson from "../public/sprites/MarioIdle.json";
 import marioJumpJson from "../public/sprites/MarioJump.json";
 import marioSkidJson from "../public/sprites/MarioSkid.json";
@@ -11,4 +13,7 @@ export const FLIPBOOKS = {
   run: AsepriteFlipbook(marioWalkJson),
   jump: AsepriteFlipbook(marioJumpJson),
   skid: AsepriteFlipbook(marioSkidJson),
+
+  brick: AsepriteFlipbook(brickJson),
+  ground: AsepriteFlipbook(groundJson),
 };

package/templates/mario/src/systems/matchmaking.ts

@@ -0,0 +1,24 @@
+import { PhaseSystem } from "./phase";
+
+export const MatchmakingSystem = PhaseSystem("title", {
+  update({ bag, inputs, net }) {
+    if (net.isInSession) return;
+    if (inputs.keys.enter.down || inputs.mouse.left.down) {
+      bag.mode = "online";
+      bag.phase = "waiting";
+      net.wantsRoomCode = "mario-demo";
+      console.log("[netcode] setting wantsRoomCode");
+    }
+  },
+
+  netcode({ event, bag }) {
+    switch (event.type) {
+      case "session:start":
+        bag.phase = "playing";
+        break;
+      case "session:end":
+        bag.phase = "title";
+        break;
+    }
+  },
+});

package/templates/mario/src/tape-load.ts

@@ -75,6 +75,8 @@ async function loadTape(bytes: Uint8Array, fileName: string) {
       marioWalk: spriteUrl("MarioWalk"),
       marioJump: spriteUrl("MarioJump"),
       marioSkid: spriteUrl("MarioSkid"),
+      brick: spriteUrl("Brick"),
+      ground: spriteUrl("Ground"),
     },
     autoLoad: true,
   });