@inglorious/engine 0.1.0

package/src/docs/ai/movement/kinematic/flee.js

@@ -0,0 +1,36 @@
+import flee from "@inglorious/engine/ai/movement/kinematic/flee.js"
+import { clampToBounds } from "@inglorious/game/bounds.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+
+export default {
+  types: {
+    mouse: [enableMouse()],
+
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, { dt, instances }) {
+          const target = instances.mouse
+
+          merge(instance, flee(instance, target, { dt }))
+          clampToBounds(instance, instances.game.bounds)
+        },
+      },
+    ],
+  },
+
+  instances: {
+    mouse: {
+      type: "mouse",
+      position: [400, 0, 300],
+    },
+
+    character: {
+      type: "character",
+      maxSpeed: 250,
+      position: [400, 0, 300],
+    },
+  },
+}

package/src/docs/ai/movement/kinematic/kinematic.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Meta, Source } from '@storybook/blocks'
+import * as Kinematic from './kinematic.stories'
+
+import align from './align?raw'
+import arrive from './arrive?raw'
+import flee from './flee?raw'
+import seek from './seek?raw'
+import wander from './wander?raw'
+import wanderAsSeek from './wander-as-seek?raw'
+
+<Meta of={Kinematic} />
+
+# Kinematic Movement
+
+The algorithms described here make an NPC instance move by changing its velocity. The movement is a little snappy but it does the trick for simple games.
+
+Every algorithm returns some parameters, such as velocity, position, and orientation, which can be merged to the instance.
+
+Most examples here make use of user [input](/?path=/docs/games-input--docs), so check those out if you haven't already.
+
+## Seek
+
+The seek algorithm makes the instance chase a target. Speed is constant and it makes the character flick around the target once reached.
+
+<Source dark code={seek} />
+
+<Canvas of={Kinematic.Seek} />
+
+## Flee
+
+The flee algorithm is the exact opposite of seek: the instance will run away from the target.
+
+<Source dark code={flee} />
+
+<Canvas of={Kinematic.Flee} />
+
+## Arrive
+
+The arrive algorithm is a more refined version of seek: the instance will slow down as it approaches the target.
+
+<Source dark code={arrive} />
+
+<Canvas of={Kinematic.Arrive} />
+
+## Align
+
+The align algorithm makes the instance rotate to match the target's orientation.
+
+<Source dark code={align} />
+
+<Canvas of={Kinematic.Align} />
+
+## Wander
+
+The wander algorithm makes the instance move around randomly. It does so by changing its orientation by a small random amount at each frame.
+
+<Source dark code={wander} />
+
+<Canvas of={Kinematic.Wander} />
+
+## Wander as Seek
+
+This is a simpler version of the wander algorithm that does not require trigonometry. It just seeks a random point in the scene, and once it's reached, it seeks another one.
+
+<Source dark code={wanderAsSeek} />
+
+<Canvas of={Kinematic.WanderAsSeek} />

package/src/docs/ai/movement/kinematic/kinematic.stories.js

@@ -0,0 +1,42 @@
+import UiChooser from "@inglorious/docs/ui-chooser.jsx"
+
+import align from "./align.js"
+import arrive from "./arrive.js"
+import face from "./face.js"
+import flee from "./flee.js"
+import seek from "./seek.js"
+import wander from "./wander.js"
+import wanderAsSeek from "./wander-as-seek.js"
+
+export default {
+  title: "Engine/AI/Movement/Kinematic",
+  component: UiChooser,
+}
+
+export const Seek = {
+  args: { config: seek },
+}
+
+export const Flee = {
+  args: { config: flee },
+}
+
+export const Arrive = {
+  args: { config: arrive },
+}
+
+export const Align = {
+  args: { config: align },
+}
+
+export const Face = {
+  args: { config: face },
+}
+
+export const Wander = {
+  args: { config: wander },
+}
+
+export const WanderAsSeek = {
+  args: { config: wanderAsSeek },
+}

package/src/docs/ai/movement/kinematic/seek.js

@@ -0,0 +1,34 @@
+import seek from "@inglorious/engine/ai/movement/kinematic/seek.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { enableMouse } from "@inglorious/game/decorators/input/mouse.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+
+export default {
+  types: {
+    mouse: [enableMouse()],
+
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, { dt, instances }) {
+          const target = instances.mouse
+
+          merge(instance, seek(instance, target, { dt }))
+        },
+      },
+    ],
+  },
+
+  instances: {
+    mouse: {
+      type: "mouse",
+      position: [400, 0, 300],
+    },
+
+    character: {
+      type: "character",
+      maxSpeed: 250,
+      position: [400, 0, 300],
+    },
+  },
+}

package/src/docs/ai/movement/kinematic/wander-as-seek.js

@@ -0,0 +1,62 @@
+import wanderAsSeek, {
+  DEFAULT_WANDER_RADIUS,
+} from "@inglorious/engine/ai/movement/kinematic/wander-as-seek.js"
+import { flip } from "@inglorious/game/bounds.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+import { pi } from "@inglorious/utils/math/trigonometry.js"
+
+export default {
+  types: {
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, { dt, instances }) {
+          const { fields } = instances.parameters.groups.wanderAsSeek
+
+          merge(
+            instance,
+            wanderAsSeek(instance, {
+              dt,
+              wanderRadius: fields.wanderRadius.value,
+            }),
+          )
+          flip(instance, instances.game.bounds)
+        },
+      },
+    ],
+
+    form: {
+      "field:change"(instance, event) {
+        const { id, value } = event.payload
+        instance.groups.wanderAsSeek.fields[id].value = value
+      },
+    },
+  },
+
+  instances: {
+    character: {
+      type: "character",
+      maxSpeed: 250,
+      maxAngularSpeed: pi() / 4,
+      position: [400, 0, 300],
+    },
+
+    parameters: {
+      type: "form",
+      position: [800 - 352, 0, 600],
+      groups: {
+        wanderAsSeek: {
+          title: "Wander As Seek",
+          fields: {
+            wanderRadius: {
+              label: "Wander Radius",
+              inputType: "number",
+              defaultValue: DEFAULT_WANDER_RADIUS,
+            },
+          },
+        },
+      },
+    },
+  },
+}

package/src/docs/ai/movement/kinematic/wander.js

@@ -0,0 +1,28 @@
+import wander from "@inglorious/engine/ai/movement/kinematic/wander.js"
+import { flip } from "@inglorious/game/bounds.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+import { pi } from "@inglorious/utils/math/trigonometry.js"
+
+export default {
+  types: {
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, { dt, instances }) {
+          merge(instance, wander(instance, { dt }))
+          flip(instance, instances.game.bounds)
+        },
+      },
+    ],
+  },
+
+  instances: {
+    character: {
+      type: "character",
+      maxSpeed: 250,
+      maxAngularSpeed: pi() / 4,
+      position: [400, 0, 300],
+    },
+  },
+}

package/src/docs/bounds.js

@@ -0,0 +1,7 @@
+export default {
+  instances: {
+    game: {
+      bounds: [0, 0, 600, 800],
+    },
+  },
+}

package/src/docs/code-reuse.js

@@ -0,0 +1,35 @@
+import { bounce } from "@inglorious/game/bounds.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { enableFps } from "@inglorious/game/decorators/fps.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { pi } from "@inglorious/utils/math/trigonometry.js"
+
+export default {
+  types: {
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, options) {
+          merge(instance, bounce(instance, options))
+        },
+      },
+    ],
+
+    fps: [enableFps()],
+  },
+
+  instances: {
+    character: {
+      type: "character",
+      maxSpeed: 250,
+      orientation: pi() / 6,
+      position: zero(),
+    },
+
+    fps: {
+      type: "fps",
+      position: [0, 0, 600],
+    },
+  },
+}

package/src/docs/collision/circles.js

@@ -0,0 +1,58 @@
+import { collidesWith } from "@inglorious/engine/collision/detection.js"
+import { bounce } from "@inglorious/game/bounds.js"
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { merge } from "@inglorious/utils/data-structures/objects.js"
+import { mod } from "@inglorious/utils/math/numbers.js"
+import { pi } from "@inglorious/utils/math/trigonometry.js"
+
+export default {
+  types: {
+    character: [
+      enableCharacter(),
+      {
+        "game:update"(instance, event, options) {
+          const characters = Object.values(options.instances).filter(
+            ({ type }) => type === "character",
+          )
+          const target = characters.find(({ id }) => id !== instance.id)
+
+          if (collidesWith(instance, target)) {
+            instance.orientation += pi()
+            instance.orientation = mod(instance.orientation, 2 * pi())
+          }
+          merge(instance, bounce(instance, options))
+        },
+      },
+    ],
+  },
+
+  instances: {
+    left: {
+      type: "character",
+      position: [200, 0, 300],
+      orientation: 0,
+      maxSpeed: 250,
+      collisions: {
+        hitbox: {
+          shape: "circle",
+          offset: [-6, 0, -6],
+          radius: 12,
+        },
+      },
+    },
+
+    right: {
+      type: "character",
+      position: [600, 0, 300],
+      orientation: pi(),
+      maxSpeed: 250,
+      collisions: {
+        hitbox: {
+          shape: "circle",
+          offset: [-6, 0, -6],
+          radius: 12,
+        },
+      },
+    },
+  },
+}

package/src/docs/collision/collision.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Source } from '@storybook/blocks'
+import * as Collision from './collision.stories'
+
+import circles from './circles?raw'
+import platform from './platform?raw'
+
+<Meta of={Collision} />
+
+# Collision Detection
+
+Examples on how to use the built-in collision detection functions.
+
+## Circles
+
+Two shapes with a circular hitbox bounce against each other when colliding.
+
+<Source dark code={circles} />
+
+<Canvas of={Collision.Circles} />
+
+## Platform
+
+A character is able to jump on top of a platform and keep its `y` position.
+
+<Source dark code={platform} />
+
+<Canvas of={Collision.Platform} />

package/src/docs/collision/collision.stories.js

@@ -0,0 +1,22 @@
+import UiChooser from "@inglorious/docs/ui-chooser.jsx"
+
+import circles from "./circles.js"
+import platform from "./platform.js"
+import tilemap from "./tilemap.js"
+
+export default {
+  title: "Engine/Collision Detection",
+  component: UiChooser,
+}
+
+export const Circles = {
+  args: { config: circles },
+}
+
+export const Platform = {
+  args: { config: platform },
+}
+
+export const Tilemap = {
+  args: { config: tilemap },
+}

package/src/docs/collision/platform.js

@@ -0,0 +1,76 @@
+import { enableCharacter } from "@inglorious/game/decorators/character.js"
+import { enableClampToBounds } from "@inglorious/game/decorators/clamp-to-bounds.js"
+import { enableModernControls } from "@inglorious/game/decorators/controls/kinematic/modern.js"
+import {
+  createControls,
+  enableControls,
+} from "@inglorious/game/decorators/input/controls.js"
+import { enableJump } from "@inglorious/game/decorators/jump.js"
+import { enablePlatform } from "@inglorious/game/decorators/platform.js"
+
+export default {
+  types: {
+    ...enableControls(),
+
+    platform: [enablePlatform()],
+
+    character: [
+      enableCharacter(),
+      enableModernControls(),
+      enableClampToBounds(),
+      enableJump(),
+    ],
+  },
+
+  instances: {
+    ...createControls("input0", {
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      Space: "jump",
+      KeyA: "left",
+      KeyD: "right",
+      Btn0: "jump",
+      Btn14: "left",
+      Btn15: "right",
+      Axis0: "leftRight",
+    }),
+
+    ground: {
+      type: "platform",
+      position: [0, 50, 0],
+      size: [800, 50, 0],
+      backgroundColor: "green",
+      collisions: {
+        platform: {
+          shape: "platform",
+        },
+      },
+    },
+
+    platform: {
+      type: "platform",
+      position: [600, 100, 0],
+      size: [80, 20, 0],
+      backgroundColor: "grey",
+      collisions: {
+        platform: {
+          shape: "platform",
+        },
+      },
+    },
+
+    character: {
+      type: "character",
+      layer: 1,
+      position: [200, 62, 0],
+      collisions: {
+        platform: {
+          // shape: "rectangle",
+          // size: [24, 24, 24],
+          shape: "circle",
+          radius: 12,
+        },
+      },
+    },
+  },
+}

package/src/docs/collision/tilemap.js

@@ -0,0 +1,181 @@
+import { findCollisions } from "@inglorious/engine/collision/detection.js"
+import { enableCollisionsDebug } from "@inglorious/game/decorators/debug/collisions.js"
+import { enableSprite } from "@inglorious/game/decorators/image/sprite.js"
+import { enableTilemap } from "@inglorious/game/decorators/image/tilemap.js"
+import {
+  createControls,
+  enableControls,
+} from "@inglorious/game/decorators/input/controls.js"
+import { Sprite } from "@inglorious/game/sprite.js"
+import { extend } from "@inglorious/utils/data-structures/objects.js"
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+const X = 0
+const Z = 2
+
+export default {
+  types: {
+    ...enableControls(),
+
+    tilemap: [enableTilemap(), enableCollisionsDebug()],
+
+    player: [
+      enableSprite(),
+      enableCollisionsDebug(),
+      // enableModernControls(),
+      (type) =>
+        extend(type, {
+          "game:update"(instance, event, options) {
+            type["game:update"]?.(instance, event, options)
+
+            const { maxSpeed } = instance
+            const { dungeon } = options.instances
+
+            const spriteState = Sprite.move2(instance)
+            Sprite.play(spriteState, instance, options)
+
+            const { input0 } = options.instances
+            instance.velocity = zero()
+
+            if (input0.left) {
+              instance.velocity[X] = -maxSpeed
+            }
+            if (input0.right) {
+              instance.velocity[X] = maxSpeed
+            }
+            if (input0.leftRight != null) {
+              instance.velocity[X] += input0.leftRight * maxSpeed
+            }
+
+            const oldX = instance.position[X]
+            instance.position[X] += instance.velocity[X] * options.dt
+            if (findCollisions(dungeon, instance)) {
+              instance.position[X] = oldX
+            }
+
+            if (input0.down) {
+              instance.velocity[Z] = -maxSpeed
+            }
+            if (input0.up) {
+              instance.velocity[Z] = maxSpeed
+            }
+            if (input0.upDown != null) {
+              instance.velocity[Z] += -input0.upDown * maxSpeed
+            }
+
+            const oldZ = instance.position[Z]
+            instance.position[Z] += instance.velocity[Z] * options.dt
+            if (findCollisions(dungeon, instance)) {
+              instance.position[Z] = oldZ
+            }
+          },
+        }),
+    ],
+  },
+
+  instances: {
+    game: {
+      pixelated: true,
+    },
+
+    ...createControls("input0", {
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      ArrowDown: "down",
+      ArrowUp: "up",
+    }),
+
+    dungeon: {
+      type: "tilemap",
+      position: [400 - (16 * 6 * 3) / 2, 0, 300 - (16 * 5 * 3) / 2],
+      tilemap: {
+        image: {
+          id: "dungeon",
+          src: "/tilemaps/dungeon.png",
+          imageSize: [160, 160],
+          tileSize: [16, 16],
+          columns: 6,
+          scale: 3,
+        },
+        layers: [
+          {
+            tiles: [
+              // first row
+              0, 1, 2, 3, 4, 5,
+              // second row
+              10, 11, 12, 13, 14, 15,
+              // third row
+              20, 21, 22, 23, 24, 25,
+              // fourth row
+              30, 31, 32, 33, 34, 35,
+              // fifth row
+              40, 41, 42, 43, 44, 45,
+            ],
+          },
+          {
+            tiles: [
+              // first row
+              -1, -1, -1, -1, -1, -1,
+              // second row
+              -1, -1, 83, -1, -1, -1,
+              // third row
+              -1, -1, -1, 97, -1, -1,
+              // fourth row
+              -1, -1, -1, -1, -1, -1,
+              // fifth row
+              -1, -1, 66, 67, -1, -1,
+            ],
+          },
+        ],
+      },
+      collisions: {
+        hitbox: {
+          shape: "hitmask",
+          tileSize: [48, 48],
+          columns: 6,
+          heights: [
+            // first row
+            2, 2, 2, 2, 2, 2,
+            // second row
+            2, 0, 1, 0, 0, 2,
+            // third row
+            2, 0, 0, 1, 0, 2,
+            // fourth row
+            2, 0, 0, 0, 0, 2,
+            // fifth row
+            2, 2, 2, 2, 2, 2,
+          ],
+        },
+      },
+    },
+
+    player: {
+      type: "player",
+      position: [400 - 16 * 3, 1, 300 - 16],
+      maxSpeed: 250,
+      sprite: {
+        image: {
+          id: "dungeon_character",
+          src: "/sprites/dungeon_character.png",
+          imageSize: [112, 64],
+          tileSize: [16, 16],
+          scale: 3,
+        },
+        speed: 0.2,
+        frames: {
+          right: [17],
+          left: [0x80000000 + 17],
+        },
+      },
+      collisions: {
+        hitbox: {
+          shape: "rectangle",
+          size: [48, 0, 48],
+          offset: [-48 / 2, 0, -48 / 2],
+          // size: [24, 0, 24],
+          // offset: [-8, 0, -8],
+        },
+      },
+    },
+  },
+}

package/src/docs/empty.js

@@ -0,0 +1 @@
+export default {}