refactor: internal getKaboomCtx and getInternalCtx, modulizate components

examples/multiboom.js

@@ -5,6 +5,11 @@ const backgrounds = [
     [0, 0, 255],
 ];
 
+const positions = [
+    [200, 200],
+    [220, 100],
+];
+
 for (let i = 0; i < 2; i++) {
     const k = kaboom({
         background: backgrounds[i],
@@ -27,12 +32,12 @@ for (let i = 0; i < 2; i++) {
     }
 
     k.add([
-        k.sprite("bean"),
-        k.pos(k.width() / 2, k.height() / 2),
-        k.scale(6),
-        k.rotate(0),
-        spin(),
+        k.circle(40),
         k.anchor("center"),
+        k.pos(
+            positions[i][0],
+            positions[i][1],
+        ),
     ]);
 
     k.add([

src/components/draw/circle.ts

@@ -0,0 +1,49 @@
+import { getKaboomContext } from "../../kaboom";
+import { Rect, Vec2 } from "../../math";
+import {
+    AnchorComp,
+    CircleComp,
+    CircleCompOpt,
+    GameObj,
+    KaboomCtx,
+} from "../../types";
+
+function getRenderProps(obj: GameObj<any>) {
+    return {
+        color: obj.color,
+        opacity: obj.opacity,
+        anchor: obj.anchor,
+        outline: obj.outline,
+        shader: obj.shader,
+        uniform: obj.uniform,
+    };
+}
+
+export function circle(
+    this: KaboomCtx,
+    radius: number,
+    opt: CircleCompOpt = {},
+): CircleComp {
+    const k = getKaboomContext(this);
+
+    return {
+        id: "circle",
+        radius: radius,
+        draw(this: GameObj<CircleComp>) {
+            k.drawCircle(Object.assign(getRenderProps(this), {
+                radius: this.radius,
+                fill: opt.fill,
+            }));
+        },
+        renderArea(this: GameObj<AnchorComp | CircleComp>) {
+            return new Rect(
+                new Vec2(this.anchor ? 0 : -this.radius),
+                this.radius * 2,
+                this.radius * 2,
+            );
+        },
+        inspect() {
+            return `${Math.ceil(this.radius)}`;
+        },
+    };
+}

src/components/draw/drawon.ts

@@ -0,0 +1,9 @@
+import { FrameBuffer, GameObj } from "@/types";
+
+export function drawon(c: FrameBuffer) {
+    return {
+        add(this: GameObj) {
+            this.canvas = c;
+        },
+    };
+}

src/components/draw/fadeIn.ts

@@ -0,0 +1,28 @@
+import { getKaboomContext } from "@/kaboom";
+import { Comp, GameObj, OpacityComp } from "@/types";
+
+export function fadeIn(time: number = 1): Comp {
+    const k = getKaboomContext(this);
+
+    let finalOpacity: number;
+    let t = 0;
+    let done = false;
+
+    return {
+        require: ["opacity"],
+        add(this: GameObj<OpacityComp>) {
+            finalOpacity = this.opacity;
+            this.opacity = 0;
+        },
+        update(this: GameObj<OpacityComp>) {
+            if (done) return;
+            t += k.dt();
+            this.opacity = k.map(t, 0, time, 0, finalOpacity);
+
+            if (t >= time) {
+                this.opacity = finalOpacity;
+                done = true;
+            }
+        },
+    };
+}

src/components/draw/mask.ts

@@ -0,0 +1,8 @@
+import { Mask, MaskComp } from "@/types";
+
+export function mask(m: Mask = "intersect"): MaskComp {
+    return {
+        id: "mask",
+        mask: m,
+    };
+}

src/components/draw/opacity.ts

@@ -0,0 +1,25 @@
+import { getInternalContext, getKaboomContext } from "../../kaboom";
+import { OpacityComp, TweenController } from "../../types";
+
+// TODO: fadeIn here?
+export function opacity(a: number): OpacityComp {
+    const k = getKaboomContext(this);
+    const internal = getInternalContext(k);
+
+    return {
+        id: "opacity",
+        opacity: a ?? 1,
+        inspect() {
+            return `${internal.toFixed(this.opacity, 1)}`;
+        },
+        fadeOut(time = 1, easeFunc = k.easings.linear): TweenController {
+            return k.tween(
+                this.opacity,
+                0,
+                time,
+                (a) => this.opacity = a,
+                easeFunc,
+            );
+        },
+    };
+}

src/components/draw/outline.ts

@@ -0,0 +1,15 @@
+import { rgb } from "@/math";
+import { Color, OutlineComp } from "@/types";
+
+export function outline(
+    width: number = 1,
+    color: Color = rgb(0, 0, 0),
+): OutlineComp {
+    return {
+        id: "outline",
+        outline: {
+            width,
+            color,
+        },
+    };
+}

src/components/draw/polygon.ts

@@ -0,0 +1,38 @@
+import { getInternalContext, getKaboomContext } from "@/kaboom";
+import { Polygon } from "@/math";
+import type { GameObj, PolygonComp, PolygonCompOpt, Vec2 } from "@/types";
+
+export function polygon(pts: Vec2[], opt: PolygonCompOpt = {}): PolygonComp {
+    const k = getKaboomContext(this);
+    const internal = getInternalContext(k);
+
+    if (pts.length < 3) {
+        throw new Error(
+            `Polygon's need more than two points, ${pts.length} points provided`,
+        );
+    }
+    return {
+        id: "polygon",
+        pts,
+        colors: opt.colors,
+        uv: opt.uv,
+        tex: opt.tex,
+        radius: opt.radius,
+        draw(this: GameObj<PolygonComp>) {
+            k.drawPolygon(Object.assign(internal.getRenderProps(this), {
+                pts: this.pts,
+                colors: this.colors,
+                uv: this.uv,
+                tex: this.tex,
+                radius: this.radius,
+                fill: opt.fill,
+            }));
+        },
+        renderArea(this: GameObj<PolygonComp>) {
+            return new Polygon(this.pts);
+        },
+        inspect() {
+            return this.pts.map(p => `[${p.x},${p.y}]`).join(",");
+        },
+    };
+}

src/components/draw/raycast.ts

@@ -0,0 +1,27 @@
+import { getKaboomContext } from "@/kaboom";
+import { RaycastResult, Vec2 } from "@/types";
+
+export function raycast(origin: Vec2, direction: Vec2, exclude?: string[]) {
+    const k = getKaboomContext(this);
+    let minHit: RaycastResult;
+
+    const shapes = k.get("area");
+
+    shapes.forEach(s => {
+        if (exclude && exclude.some(tag => s.is(tag))) return;
+        const shape = s.worldArea();
+        const hit = shape.raycast(origin, direction);
+        if (hit) {
+            if (minHit) {
+                if (hit.fraction < minHit.fraction) {
+                    minHit = hit;
+                    minHit.object = s;
+                }
+            } else {
+                minHit = hit;
+                minHit.object = s;
+            }
+        }
+    });
+    return minHit;
+}

src/components/draw/rect.ts

@@ -0,0 +1,29 @@
+import { getInternalContext, getKaboomContext } from "@/kaboom";
+import { Rect, vec2 } from "@/math";
+import { GameObj, RectComp, RectCompOpt } from "@/types";
+
+export function rect(w: number, h: number, opt: RectCompOpt = {}): RectComp {
+    const k = getKaboomContext(this);
+    const internal = getInternalContext(k);
+
+    return {
+        id: "rect",
+        width: w,
+        height: h,
+        radius: opt.radius || 0,
+        draw(this: GameObj<RectComp>) {
+            k.drawRect(Object.assign(internal.getRenderProps(this), {
+                width: this.width,
+                height: this.height,
+                radius: this.radius,
+                fill: opt.fill,
+            }));
+        },
+        renderArea() {
+            return new Rect(vec2(0), this.width, this.height);
+        },
+        inspect() {
+            return `${Math.ceil(this.width)}, ${Math.ceil(this.height)}`;
+        },
+    };
+}

src/components/draw/shader.ts

@@ -0,0 +1,21 @@
+import { ShaderComp, Uniform } from "@/types";
+
+export function shader(
+    id: string,
+    uniform?: Uniform | (() => Uniform),
+): ShaderComp {
+    return {
+        id: "shader",
+        shader: id,
+        ...(typeof uniform === "function"
+            ? {
+                uniform: uniform(),
+                update() {
+                    this.uniform = uniform();
+                },
+            }
+            : {
+                uniform: uniform,
+            }),
+    };
+}