create-bloop 0.0.1

package/templates/mario/src/draw.ts

@@ -0,0 +1,312 @@
+import { unwrap } from "@bloopjs/bloop";
+import type { Color, QuadNode, SceneNode, Text, Toodle } from "@bloopjs/toodle";
+import { Colors } from "@bloopjs/toodle";
+import {
+  BLOCK_SIZE,
+  BLOCK_Y,
+  COIN_SIZE,
+  GROUND_Y,
+  PLAYER_HEIGHT,
+  PLAYER_WIDTH,
+} from "./config";
+import type { game, Player, Pose } from "./game";
+
+// Placeholder colors until sprites are added
+const MARIO_COLOR = Colors.web.red;
+const LUIGI_COLOR = Colors.web.green;
+const BLOCK_COLOR = Colors.web.sienna;
+const COIN_COLOR = Colors.web.gold;
+const GROUND_COLOR = Colors.web.saddleBrown;
+
+/** Quads for each pose animation */
+type PoseQuads = Record<Pose, QuadNode>;
+
+export interface DrawState {
+  root: SceneNode;
+  // Screen containers
+  titleScreen: SceneNode;
+  gameScreen: SceneNode;
+  // Game elements (under gameScreen)
+  ground: QuadNode;
+  block: SceneNode;
+  coin: QuadNode;
+  p1: PoseQuads;
+  p2: PoseQuads;
+  viewport: SceneNode;
+  p1Score: Text.TextNode;
+  p2Score: Text.TextNode;
+  // Title elements (under titleScreen)
+  titleText: Text.TextNode;
+  subtitleText: Text.TextNode;
+}
+
+export function createDrawState(toodle: Toodle): DrawState {
+  const root = toodle.Node({ scale: 3 });
+
+  // Title screen container
+  const titleScreen = root.add(toodle.Node({}));
+  const titleText = titleScreen.add(
+    toodle.Text("ComicNeue", "COIN CHASE", {
+      fontSize: 24,
+      color: { r: 1, g: 1, b: 1, a: 1 },
+      position: { x: 0, y: 20 },
+    }),
+  );
+  const subtitleText = titleScreen.add(
+    toodle.Text("ComicNeue", "[Space] Local  [Enter] Online", {
+      fontSize: 10,
+      color: { r: 1, g: 1, b: 1, a: 1 },
+      position: { x: 0, y: 0 },
+    }),
+  );
+
+  // Game screen container
+  const gameScreen = root.add(toodle.Node({}));
+  gameScreen.isActive = false;
+
+  const ground = gameScreen.add(
+    toodle.shapes.Rect({
+      size: { width: 400, height: 40 },
+      position: { x: 0, y: GROUND_Y - 20 },
+      color: GROUND_COLOR,
+    }),
+  );
+
+  const block = gameScreen.add(
+    toodle.shapes.Rect({
+      size: { width: BLOCK_SIZE, height: BLOCK_SIZE },
+      color: BLOCK_COLOR,
+    }),
+  );
+
+  const coin = gameScreen.add(
+    toodle.shapes.Circle({
+      radius: COIN_SIZE / 2,
+      color: COIN_COLOR,
+    }),
+  );
+
+  // Map pose to texture name
+  const poseTextures: Record<Pose, string> = {
+    idle: "marioIdle",
+    run: "marioWalk",
+    jump: "marioJump",
+    skid: "marioSkid",
+  };
+
+  // Create pose quads for a player
+  const createPoseQuads = (color?: typeof LUIGI_COLOR): PoseQuads => {
+    const poses = {} as PoseQuads;
+    for (const pose of ["idle", "run", "jump", "skid"] satisfies Pose[]) {
+      const quad = gameScreen.add(
+        toodle.Quad(poseTextures[pose], {
+          size: { width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
+          region: { x: 0, y: 0, width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
+          color,
+        }),
+      );
+      quad.isActive = false; // Start inactive, draw will activate the right one
+      poses[pose] = quad;
+    }
+    return poses;
+  };
+
+  const p1 = createPoseQuads();
+  const p2 = createPoseQuads(LUIGI_COLOR);
+
+  const p1Score = gameScreen.add(
+    toodle.Text("ComicNeue", "P9: 0", {
+      fontSize: 16,
+      color: MARIO_COLOR,
+    }),
+  );
+
+  const p2Score = gameScreen.add(
+    toodle.Text("ComicNeue", "P2: 0", {
+      fontSize: 16,
+      color: LUIGI_COLOR,
+    }),
+  );
+
+  const viewport = toodle.Node({
+    size: { width: toodle.resolution.width, height: toodle.resolution.height },
+  });
+
+  return {
+    root,
+    titleScreen,
+    gameScreen,
+    ground,
+    block,
+    coin,
+    p1,
+    p2,
+    p1Score,
+    p2Score,
+    titleText,
+    subtitleText,
+    viewport,
+  };
+}
+
+export function draw(g: typeof game, toodle: Toodle, state: DrawState) {
+  const { bag } = g.context;
+
+  // Toggle screens
+  state.titleScreen.isActive = bag.phase !== "playing";
+  state.gameScreen.isActive = bag.phase === "playing";
+
+  // Update title text based on phase
+  if (bag.phase === "title") {
+    state.subtitleText.text = "[Space] Local  [Enter] Online";
+  } else if (bag.phase === "waiting") {
+    state.subtitleText.text = "Waiting for opponent...";
+  }
+
+  // Update game positions only when playing
+  if (bag.phase === "playing") {
+    state.block.position = { x: bag.block.x, y: BLOCK_Y + BLOCK_SIZE / 2 };
+
+    state.coin.position = {
+      x: bag.coin.x,
+      y: bag.coin.y,
+    };
+    state.coin.isActive = bag.coin.visible;
+    state.coin.color =
+      bag.coin.winner === 1
+        ? MARIO_COLOR
+        : bag.coin.winner === 2
+          ? LUIGI_COLOR
+          : COIN_COLOR;
+    // Update player sprites
+    updatePlayerQuads(state.p1, bag.p1);
+    updatePlayerQuads(state.p2, bag.p2);
+
+    const padding = 20;
+
+    state.p1Score.text = `P1: ${bag.p1.score}`;
+    state.p2Score.text = `P2: ${bag.p2.score}`;
+
+    state.viewport.size = {
+      width: toodle.resolution.width,
+      height: toodle.resolution.height,
+    };
+
+    state.ground.size.width = state.viewport.size.width;
+
+    state.p1Score.setBounds({
+      left: state.viewport.bounds.left + padding,
+      top: state.viewport.bounds.top - padding,
+    });
+
+    state.p2Score.setBounds({
+      right: state.viewport.bounds.right - padding,
+      top: state.viewport.bounds.top - padding,
+    });
+  }
+
+  toodle.startFrame();
+  toodle.draw(state.root);
+  if (bag.debugHitboxes) {
+    drawHitboxes(toodle, state, bag);
+  }
+  toodle.endFrame();
+}
+
+/** Updates a player's pose quads based on their current state */
+function updatePlayerQuads(quads: PoseQuads, player: Player) {
+  const poses: Pose[] = ["idle", "run", "jump", "skid"];
+
+  for (const pose of poses) {
+    const quad = quads[pose];
+    const isActive = pose === player.pose;
+    quad.isActive = isActive;
+    if (!isActive) {
+      continue;
+    }
+
+    // Update position
+    quad.position = {
+      x: player.x,
+      y: player.y + PLAYER_HEIGHT / 2,
+    };
+
+    // Update flip based on facing direction
+    quad.flipX = player.facingDir === -1;
+
+    // Update region from flipbook frame using static flipbooks + bag AnimState
+    const flipbook = unwrap(
+      player.anims[pose],
+      `No runtime flipbook for pose ${pose}`,
+    );
+    const frameIndex = flipbook.frameIndex % flipbook.frames.length;
+    const frame = flipbook.frames[frameIndex];
+    quad.region.x = frame.pos.x;
+    quad.region.y = frame.pos.y;
+    quad.region.width = frame.width;
+    quad.region.height = frame.height;
+  }
+}
+
+function drawHitboxes(toodle: Toodle, state: DrawState, bag: typeof game.bag) {
+  const p1Quad = state.p1[bag.p1.pose];
+  const p2Quad = state.p2[bag.p2.pose];
+
+  toodle.draw(makeHitbox(toodle, p1Quad.bounds));
+  toodle.draw(makeHitbox(toodle, p2Quad.bounds));
+  toodle.draw(makeHitbox(toodle, state.block.bounds));
+
+  if (bag.coin.visible) {
+    toodle.draw(makeHitbox(toodle, state.coin.bounds));
+  }
+}
+
+const hitboxDefaultColor = { r: 1, g: 0, b: 1, a: 0.4 };
+
+let hitboxShader: ReturnType<Toodle["QuadShader"]> | null = null;
+
+function getHitboxShader(toodle: Toodle) {
+  if (!hitboxShader) {
+    hitboxShader = toodle.QuadShader(
+      "hitbox-border",
+      16,
+      /*wgsl*/ `
+@fragment
+fn frag(vertex: VertexOutput) -> @location(0) vec4f {
+  let color = default_fragment_shader(vertex, linearSampler);
+  let uv = vertex.engine_uv.zw;
+  let border = 0.1;
+
+  let nearLeft = uv.x < border;
+  let nearRight = uv.x > (1.0 - border);
+  let nearBottom = uv.y < border;
+  let nearTop = uv.y > (1.0 - border);
+
+  if (nearLeft || nearRight || nearBottom || nearTop) {
+    return vec4f(color.rgb, 1.0);
+  }
+
+  return color;
+}
+      `,
+    );
+  }
+  return hitboxShader;
+}
+
+function makeHitbox(
+  toodle: Toodle,
+  bounds: { left: number; right: number; top: number; bottom: number },
+  color: Color = hitboxDefaultColor,
+) {
+  return toodle.shapes
+    .Rect({
+      color,
+      size: {
+        width: bounds.right - bounds.left,
+        height: bounds.top - bounds.bottom,
+      },
+      shader: getHitboxShader(toodle),
+    })
+    .setBounds(bounds);
+}

package/templates/mario/src/flipbook.ts

@@ -0,0 +1,159 @@
+export type Flipbook = {
+  /** The total time */
+  time: number;
+  /** The accumulated time */
+  acc: number;
+  /** The index of the current frame */
+  frameIndex: number;
+  /** The available frames for this flipbook */
+  frames: AnimatedSpriteFrame[];
+  /** The current frame */
+  frame: AnimatedSpriteFrame;
+  /** The total duration */
+  duration: number;
+};
+
+export function createFlipbook(frames: AnimatedSpriteFrame[]): Flipbook {
+  return {
+    time: 0,
+    acc: 0,
+    frameIndex: 0,
+    frames,
+    frame: frames[0],
+    duration: frames.reduce((acc, f) => acc + f.duration, 0),
+  };
+}
+
+export function step(flipbook: Flipbook, dt: number) {
+  flipbook.acc += dt;
+  while (flipbook.acc > flipbook.frames[flipbook.frameIndex].duration) {
+    flipbook.acc -= flipbook.frames[flipbook.frameIndex].duration;
+    flipbook.frameIndex++;
+    flipbook.frameIndex %= flipbook.frames.length;
+  }
+  flipbook.time += dt;
+  update(flipbook);
+}
+
+export function update(flipbook: Flipbook) {
+  flipbook.frame =
+    flipbook.frames[flipbook.frameIndex % flipbook.frames.length];
+}
+
+export function setFrame(flipbook: Flipbook, index: number) {
+  if (index < 0 || index >= flipbook.frames.length) {
+    throw new Error(
+      `InvalidFrame: ${index} not in range 0..${flipbook.frames.length}`,
+    );
+  }
+
+  flipbook.time = 0;
+  for (let i = 0; i < index; i++) {
+    flipbook.time += flipbook.frames[i].duration;
+  }
+  flipbook.frameIndex = index;
+  update(flipbook);
+}
+
+export function setTime(flipbook: Flipbook, time: number) {
+  flipbook.time = time;
+  flipbook.frameIndex = 0;
+  while (flipbook.time > flipbook.frames[flipbook.frameIndex].duration) {
+    flipbook.time -= flipbook.frames[flipbook.frameIndex].duration;
+    flipbook.frameIndex++;
+  }
+  flipbook.frameIndex %= flipbook.frames.length;
+  update(flipbook);
+}
+
+export function reset(flipbook: Flipbook) {
+  flipbook.frameIndex = 0;
+  flipbook.time = 0;
+  flipbook.acc = 0;
+  update(flipbook);
+}
+
+export type AnimatedSpriteFrame = {
+  pos: { x: number; y: number };
+  width: number;
+  height: number;
+  duration: number;
+};
+
+/**
+ * constructs an AnimatedSprite from a json object exported from aseprite
+ *
+ *
+ * @param aseprite
+ * @returns
+ *
+ * @example
+ *
+ * import asepriteJson from "./path/to/exported-sprite.json"
+ * const sprite = AsepriteFlipbook(asepriteJson)
+ */
+export function AsepriteFlipbook(aseprite: AsepriteImport): Flipbook {
+  const asepriteFramesArray = Array.isArray(aseprite.frames)
+    ? aseprite.frames
+    : Object.values(aseprite.frames);
+  const frames: AnimatedSpriteFrame[] = asepriteFramesArray.map(
+    (asepriteFrame) => ({
+      pos: { x: asepriteFrame.frame.x, y: asepriteFrame.frame.y },
+      width: asepriteFrame.frame.w,
+      height: asepriteFrame.frame.h,
+      duration: asepriteFrame.duration,
+    }),
+  );
+
+  return createFlipbook(frames);
+}
+
+export type AsepriteImport = {
+  // Aseprite has a "Hash" and "Array" export format
+  frames:
+    | {
+        [key: string]: AsepriteFrame;
+      }
+    | AsepriteFrameWithFilename[];
+  meta: AsepriteMetadata;
+};
+
+type AsepriteFrameWithFilename = AsepriteFrame & { filename: string };
+
+type AsepriteFrame = {
+  frame: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  rotated: boolean;
+  trimmed: boolean;
+  spriteSourceSize: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  sourceSize: {
+    w: number;
+    h: number;
+  };
+  duration: number;
+};
+
+type AsepriteMetadata = {
+  app: string;
+  version: string;
+  image: string;
+  format: string;
+  size: { w: number; h: number };
+  scale: string;
+  layers: {
+    name: string;
+    opacity: number;
+    blendMode: string;
+  }[];
+  frameTags: unknown[];
+  slices: unknown[];
+};

package/templates/mario/src/game.ts

@@ -0,0 +1,171 @@
+import { Bloop } from "@bloopjs/bloop";
+import * as cfg from "./config";
+import type { Flipbook } from "./flipbook";
+import { FLIPBOOKS } from "./sprites";
+import { AnimationSystem } from "./systems/animation";
+import { CollisionSystem } from "./systems/collision";
+import { InputsSystem } from "./systems/inputs";
+import { PhaseSystem } from "./systems/phase";
+import { PhysicsSystem } from "./systems/physics";
+
+export type Player = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  grounded: boolean;
+  facingDir: 1 | -1;
+  pose: Pose;
+  score: number;
+  anims: {
+    idle: Flipbook;
+    run: Flipbook;
+    jump: Flipbook;
+    skid: Flipbook;
+  };
+};
+
+function createPlayer(x: number, facingDir: 1 | -1 = 1): Player {
+  return {
+    x,
+    y: cfg.GROUND_Y,
+    vx: 0,
+    vy: 0,
+    grounded: true,
+    facingDir,
+    pose: "idle",
+    score: 0,
+    anims: {
+      idle: FLIPBOOKS.idle,
+      run: FLIPBOOKS.run,
+      jump: FLIPBOOKS.jump,
+      skid: FLIPBOOKS.skid,
+    },
+  };
+}
+
+export type Pose = "idle" | "run" | "jump" | "skid";
+
+export type Phase = "title" | "waiting" | "playing";
+
+export const game = Bloop.create({
+  bag: {
+    phase: "title" as Phase,
+    mode: null as "local" | "online" | null,
+    p1: createPlayer(cfg.P1_START_X, 1),
+    p2: createPlayer(cfg.P2_START_X, -1),
+    block: {
+      x: (cfg.BLOCK_MIN_X + cfg.BLOCK_MAX_X) / 2,
+      direction: 1 as 1 | -1,
+    },
+    coin: {
+      visible: true as boolean,
+      hitTime: 0,
+      winner: null as 1 | 2 | null,
+      x: (cfg.BLOCK_MIN_X + cfg.BLOCK_MAX_X) / 2,
+      y: 0,
+    },
+    debugHitboxes: false as boolean,
+  },
+});
+
+export function resetGameState(bag: typeof game.bag) {
+  bag.p1 = createPlayer(cfg.P1_START_X, 1);
+  bag.p2 = createPlayer(cfg.P2_START_X, -1);
+  bag.block = { x: (cfg.BLOCK_MIN_X + cfg.BLOCK_MAX_X) / 2, direction: 1 };
+  bag.coin = {
+    visible: false,
+    x: (cfg.BLOCK_MIN_X + cfg.BLOCK_MAX_X) / 2,
+    y: 0,
+    hitTime: 0,
+    winner: null,
+  };
+}
+
+// Handle online session transitions (runs in all phases)
+game.system("session-watcher", {
+  update({ bag, net }) {
+    // Waiting for connection → connected, start playing
+    if (bag.phase === "waiting" && net.isInSession) {
+      resetGameState(bag);
+      bag.phase = "playing";
+    }
+
+    // Was playing online → disconnected, back to title
+    if (bag.phase === "playing" && bag.mode === "online" && !net.isInSession) {
+      bag.phase = "title";
+      bag.mode = null;
+    }
+  },
+});
+
+game.system(
+  "title-screen",
+  PhaseSystem("title", {
+    keydown({ bag, event }) {
+      if (event.key === "Space") {
+        // Local multiplayer - start immediately
+        bag.mode = "local";
+        bag.phase = "playing";
+        resetGameState(bag);
+      }
+    },
+  }),
+);
+
+game.system("inputs", InputsSystem);
+
+game.system("physics", PhysicsSystem);
+
+game.system("collision", CollisionSystem);
+
+game.system("animation", AnimationSystem);
+
+// Debug hitbox toggle (H key)
+game.system("debug", {
+  keydown({ bag, event }) {
+    if (event.key === "KeyH") {
+      bag.debugHitboxes = !bag.debugHitboxes;
+    }
+  },
+});
+
+// Block movement (oscillates left/right)
+game.system(
+  "block",
+  PhaseSystem("playing", {
+    update({ bag }) {
+      const block = bag.block;
+      block.x += cfg.BLOCK_SPEED * block.direction;
+
+      if (block.x >= cfg.BLOCK_MAX_X) {
+        block.x = cfg.BLOCK_MAX_X;
+        block.direction = -1;
+      } else if (block.x <= cfg.BLOCK_MIN_X) {
+        block.x = cfg.BLOCK_MIN_X;
+        block.direction = 1;
+      }
+    },
+  }),
+);
+
+game.system(
+  "coin",
+  PhaseSystem("playing", {
+    update({ bag, time }) {
+      // Coin follows block unless coin animation is active
+      if (!bag.coin.visible) {
+        bag.coin.x = bag.block.x;
+        bag.coin.y = cfg.BLOCK_Y + cfg.BLOCK_SIZE;
+        return;
+      }
+
+      bag.coin.y += cfg.COIN_V_Y;
+      if (time.time - bag.coin.hitTime >= cfg.COIN_VISIBLE_DURATION) {
+        bag.coin.visible = false;
+      }
+    },
+  }),
+);
+
+export type GameSystem = Parameters<typeof game.system>[1];