Collider asset type, CollisionSystem and collision nodes

- Asset type 'collider' (box/circle) placed as child of a body object
- 'Add collider' shortcut (hierarchy context menu + inspector)
- CollisionSystem with enter/stay/exit pairs, sibling colliders excluded
- Nodes: On collision enter/stay/exit, Is touching
- Green outline in edit mode, hidden in play

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/core/commands/assetCommands.ts

@@ -19,6 +19,8 @@ export function buildAsset(type: AssetType, name: string, id = newId()): Asset {
       return { ...base, type: 'sprite' };
     case 'behavior':
       return { ...base, type: 'behavior', variables: [], graph: createEmptyGraph() };
+    case 'collider':
+      return { ...base, type: 'collider' };
   }
 }
 

src/core/commands/colliderCommands.ts

@@ -0,0 +1,44 @@
+import { findScene, type Project } from '../model/Project';
+import { createSceneObject } from '../model/SceneObject';
+import { resolveSceneObjectProps } from '../properties/resolve';
+import { newId } from '../ids';
+import { buildAsset, requireAsset } from './assetCommands';
+import { type Command, CommandError } from './Command';
+import { nextAssetName } from './projectCommands';
+import { requireObject } from './sceneObjectCommands';
+
+/**
+ * The one-click way to give an object a collider: creates a box collider asset sized like
+ * the object (sprites: width × height; anything else: schema defaults) and places it as a
+ * child at the object's centre. Undo removes both the placed collider and the asset.
+ */
+export class AddColliderCommand implements Command {
+  readonly label = 'Add collider';
+  readonly assetId = newId();
+  readonly objectId = newId();
+
+  constructor(private readonly sceneId: string, private readonly targetId: string) {}
+
+  execute(project: Project): void {
+    const scene = findScene(project, this.sceneId);
+    if (!scene) throw new CommandError(`Scene ${this.sceneId} not found`);
+    const target = requireObject(project, this.sceneId, this.targetId);
+    const targetAsset = requireAsset(project, target.assetId);
+    if (targetAsset.type === 'collider') throw new CommandError('A collider cannot have a collider');
+
+    const asset = buildAsset('collider', nextAssetName(project, `${target.name || targetAsset.name} collider`), this.assetId);
+    if (targetAsset.type === 'sprite') {
+      const props = resolveSceneObjectProps(targetAsset, target);
+      asset.props.width = Number(props.width);
+      asset.props.height = Number(props.height);
+    }
+    project.assets.push(asset);
+    scene.objects.push(createSceneObject(this.objectId, this.assetId, { x: 0, y: 0, z: 0 }, this.targetId));
+  }
+
+  undo(project: Project): void {
+    const scene = findScene(project, this.sceneId);
+    if (scene) scene.objects = scene.objects.filter((o) => o.id !== this.objectId);
+    project.assets = project.assets.filter((a) => a.id !== this.assetId);
+  }
+}

src/core/graph/NodeRegistry.ts

@@ -51,6 +51,11 @@ export interface NodeContext {
   dt: number;
   findByName(name: string): EntityHandle | null;
   isKeyDown(key: string): boolean;
+  /**
+   * Whether any collider of `a` overlaps any collider of `b` right now. A collider entity
+   * stands for itself; any other entity stands for its direct collider children.
+   */
+  isTouching(a: EntityHandle, b: EntityHandle): boolean;
   log(message: string): void;
   destroy(target: EntityHandle): void;
   stop(): void;

src/core/graph/nodes.ts

@@ -32,6 +32,12 @@ registerNode({
   outputs: [exec()],
   params: [{ key: 'interval', label: 'Interval (s)', kind: 'number', default: 1, min: 0.01, step: 0.1 }],
 });
+// Collision events reach the behavior whose owner is the collider's body (the collider's
+// parent, or the collider itself when it is top-level). `other` is the other body.
+const collisionOutputs = (): PortDef[] => [exec(), obj('other'), obj('otherCollider', 'other collider'), obj('collider')];
+registerNode({ type: 'OnCollisionEnter', label: 'On collision enter', category: 'event', description: 'Runs once when a collider of the owner starts overlapping another collider.', inputs: [], outputs: collisionOutputs(), params: [] });
+registerNode({ type: 'OnCollisionStay', label: 'On collision stay', category: 'event', description: 'Runs every frame while a collider of the owner overlaps another collider.', inputs: [], outputs: collisionOutputs(), params: [] });
+registerNode({ type: 'OnCollisionExit', label: 'On collision exit', category: 'event', description: 'Runs once when a collider of the owner stops overlapping another collider.', inputs: [], outputs: collisionOutputs(), params: [] });
 
 // --- flow ---------------------------------------------------------------------------------
 
@@ -266,6 +272,20 @@ registerNode({ type: 'And', label: 'And', category: 'data', description: 'Both t
 registerNode({ type: 'Or', label: 'Or', category: 'data', description: 'Either true.', inputs: [bool('a'), bool('b')], outputs: [bool('result')], params: [], run: (_c, i) => ({ outputs: { result: asBoolean(i.a) || asBoolean(i.b) } }) });
 registerNode({ type: 'Not', label: 'Not', category: 'data', description: 'Inverts a boolean.', inputs: [bool('value')], outputs: [bool('result')], params: [], run: (_c, i) => ({ outputs: { result: !asBoolean(i.value) } }) });
 registerNode({ type: 'KeyIsDown', label: 'Key is down', category: 'data', description: 'Whether a key is currently held.', inputs: [], outputs: [bool('down')], params: [keyParam], run: (ctx, _i, p) => ({ outputs: { down: ctx.isKeyDown(String(p.key ?? '')) } }) });
+registerNode({
+  type: 'IsTouching',
+  label: 'Is touching',
+  category: 'data',
+  description: 'Whether the colliders of two objects overlap right now (an object stands for its collider children; a collider for itself).',
+  inputs: [obj('a'), obj('b')],
+  outputs: [bool('result')],
+  params: [],
+  run: (ctx, i) => {
+    const a = asEntity(i.a);
+    const b = asEntity(i.b);
+    return { outputs: { result: Boolean(a && b && ctx.isTouching(a, b)) } };
+  },
+});
 
 // --- actions --------------------------------------------------------------------------------
 

src/core/model/Asset.ts

@@ -37,7 +37,15 @@ export interface BehaviorAsset extends AssetBase {
   graph: Graph;
 }
 
-export type Asset = SpriteAsset | CameraAsset | SceneAsset | BehaviorAsset;
+/**
+ * A collider is a shape (box or circle) used for collision detection. Placed as a child of
+ * the object it belongs to (its "body"); its position is the offset from that body.
+ */
+export interface ColliderAsset extends AssetBase {
+  type: 'collider';
+}
+
+export type Asset = SpriteAsset | CameraAsset | SceneAsset | BehaviorAsset | ColliderAsset;
 
 export function isSceneAsset(asset: Asset): asset is SceneAsset {
   return asset.type === 'scene';

src/core/model/AssetTypes.ts

@@ -1,5 +1,5 @@
 /** All asset types. Scenes are assets too, but cannot be placed in scenes. */
-export const ASSET_TYPES = ['scene', 'camera', 'sprite', 'behavior'] as const;
+export const ASSET_TYPES = ['scene', 'camera', 'sprite', 'behavior', 'collider'] as const;
 
 export type AssetType = (typeof ASSET_TYPES)[number];
 
@@ -19,5 +19,5 @@ export function isAssetType(value: unknown): value is AssetType {
  * They exist in the scene for their position, not for their looks.
  */
 export function isSymbolType(type: AssetType): boolean {
-  return type === 'camera' || type === 'behavior';
+  return type === 'camera' || type === 'behavior' || type === 'collider';
 }

src/core/properties/PropertySchema.ts

@@ -39,6 +39,12 @@ export const ASSET_SCHEMAS: Record<AssetType, PropertySchema> = {
   ],
   // Behaviors declare their own properties (variables) per asset – see `schemaForAsset`.
   behavior: [],
+  collider: [
+    { key: 'shape', label: 'Shape', kind: 'enum', default: 'box', options: [{ value: 'box', label: 'Box' }, { value: 'circle', label: 'Circle' }] },
+    { key: 'width', label: 'Width', kind: 'number', default: 100, min: 1, step: 1 },
+    { key: 'height', label: 'Height', kind: 'number', default: 100, min: 1, step: 1 },
+    { key: 'radius', label: 'Radius', kind: 'number', default: 50, min: 1, step: 1 },
+  ],
 };
 
 /** Properties every scene object has regardless of its asset type. */

src/core/properties/collider.ts

@@ -0,0 +1,40 @@
+import type { PropertyBag, Vec2 } from '../model/Properties';
+import { defaultsFor } from './PropertySchema';
+
+/**
+ * Collider geometry in world units. Pure functions shared by the editor (drawing, gizmos)
+ * and the runtime (CollisionSystem), so both agree on what "overlaps" means.
+ */
+export type ColliderShape =
+  | { kind: 'box'; x: number; y: number; w: number; h: number }
+  | { kind: 'circle'; x: number; y: number; r: number };
+
+/** The shape described by collider properties, centred on `centre` (a world position). */
+export function colliderShape(props: PropertyBag, centre: Vec2): ColliderShape {
+  const d = defaultsFor('collider');
+  if (props.shape === 'circle') return { kind: 'circle', x: centre.x, y: centre.y, r: Math.max(0, Number(props.radius ?? d.radius)) };
+  return { kind: 'box', x: centre.x, y: centre.y, w: Math.max(0, Number(props.width ?? d.width)), h: Math.max(0, Number(props.height ?? d.height)) };
+}
+
+/** Footprint of a collider shape (used for culling and the selection gizmo). */
+export function colliderSize(props: PropertyBag): { w: number; h: number } {
+  const shape = colliderShape(props, { x: 0, y: 0 });
+  return shape.kind === 'circle' ? { w: shape.r * 2, h: shape.r * 2 } : { w: shape.w, h: shape.h };
+}
+
+/** Whether two shapes overlap. Shapes that merely touch along an edge do not overlap. */
+export function shapesOverlap(a: ColliderShape, b: ColliderShape): boolean {
+  if (a.kind === 'box' && b.kind === 'box') {
+    return Math.abs(a.x - b.x) * 2 < a.w + b.w && Math.abs(a.y - b.y) * 2 < a.h + b.h;
+  }
+  if (a.kind === 'circle' && b.kind === 'circle') {
+    const r = a.r + b.r;
+    return (a.x - b.x) ** 2 + (a.y - b.y) ** 2 < r * r;
+  }
+  const box = a.kind === 'box' ? a : (b as Extract<ColliderShape, { kind: 'box' }>);
+  const circle = a.kind === 'circle' ? a : (b as Extract<ColliderShape, { kind: 'circle' }>);
+  // Closest point of the box to the circle centre, then a plain distance check.
+  const cx = Math.max(box.x - box.w / 2, Math.min(circle.x, box.x + box.w / 2));
+  const cy = Math.max(box.y - box.h / 2, Math.min(circle.y, box.y + box.h / 2));
+  return (circle.x - cx) ** 2 + (circle.y - cy) ** 2 < circle.r * circle.r;
+}