@inglorious/engine 0.1.0 → 0.2.0

package/src/docs/collision/circles.js

@@ -1,58 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

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

package/src/docs/engine.mdx

@@ -1,81 +0,0 @@
-import { Canvas, Meta, Source } from '@storybook/blocks'
-import * as Engine from './engine.stories'
-
-import bounds from './bounds?raw'
-import codeReuse from './code-reuse?raw'
-import eventHandlers from './event-handlers?raw'
-import framerate from './framerate?raw'
-
-<Meta of={Engine} />
-
-# Core Concepts
-
-This page showcases some of the core concepts and features of the Inglorious Engine. If you are just getting started, we recommend you check out the [Quick Start Guide](/docs/quick-start--docs) first.
-
-Inglorious Engine is a headless game engine that takes a configuration file in plain JavaScript and creates a scene. The UI can be implemented in any technology: canvas, HTML, ...here we are using React components.
-
-Here are a few examples of what you can do.
-
-## Bounds
-
-We can customize the game's bounds by passing an array of four numbers: these will hold the upper and lower bounds in pixels.
-
-The game is an instance in the game, that we can customize as we please.
-
-<Source dark code={bounds} />
-
-<Canvas of={Engine.Bounds} />
-
-## Event Handlers
-
-To animate stuff we write event handlers for events that are triggered by our instances or by the game itself. The `game:update` event, for example, is triggered at every cycle of the game loop.
-
-An event handler accepts the following arguments:
-
-- The `instance` itself that is handling the event, so we can change its properties to our needs;
-- The triggered `event`, which contains a `payload` that holds whatever we need to accomplish our task;
-- An `options` object that contains the following:
-  - The elapsed time `dt`, which can help slow down certain movement algorithms based on the current FPS;
-  - The game's current `config` object (here you can find the scene's `bounds`, for example);
-  - All `instances` present in the scene; note that they are read-only, so look but don't touch!
-
-You might notice the code directly changes properties on the `instance`. While this looks like a direct mutation, the engine uses [Immer](https://immerjs.github.io/immer/) under the hood. This allows you to write simple, mutable-style code while Immer handles the complexity of producing a new, immutable state object for you. It's the best of both worlds: simple code and the safety of immutability.
-
-The character shown here updates its velocity and position at every frame, going back and forth like it's patroling the scene!
-
-The `fps` type shows FPS debug info on the top left of the scene; its value is updated based on the `dt` time at every `game:update` event.
-
-<Source dark code={eventHandlers} />
-
-<Canvas of={Engine.EventHandlers} />
-
-## Code Reuse
-
-Coding is beautiful, but reusing code without reinventing the wheel is even better! This is where the engine's functional approach really shines.
-
-Instead of relying on complex class inheritance hierarchies, we use **function composition**. In this example, all the code necessary to draw the character is encapsulated in an `enableCharacter()` decorator.
-
-This approach is more flexible and powerful than inheritance. You can mix and match behaviors by simply adding decorators to an array, avoiding problems like the "diamond problem" and creating deeply nested, brittle class structures. You are free to combine `canBeControlledByPlayer`, `canBeHurt`, and `canShoot` decorators on the fly.
-
-The event handler for this character is also using a predefined `bounce()` function. There are many predefined functions out there at your disposal, just look through the documentation to find the ones that suit you best.
-
-<Source dark code={codeReuse} />
-
-<Canvas of={Engine.CodeReuse} />
-
-## Fixed Framerate
-
-What if you want to provide a more retro feel to your game? You can use a fixed framerate and make your animations more jerky by changing the default loop.
-
-<Source dark code={framerate} />
-
-<Canvas of={Engine.Framerate} />
-
-## What's Next?
-
-You've now seen the core features of the engine. Here's where you can go from here:
-
-- **Add player controls**: See [Input Handling](/docs/engine-input--docs) for keyboard and mouse.
-- **Detect collisions**: Learn about [Collision Detection](/docs/engine-collision-detection--docs).
-- **Build autonomous characters**: Explore [AI Kinematic Movement](/docs/ai-movement-kinematic--docs) and [AI Dynamic Movement](/docs/ai-movement-dynamic--docs).
-- **See complete examples**: Look at our [Recipes](/docs/engine-recipes--docs) for common game patterns.

package/src/docs/engine.stories.js

@@ -1,37 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-import bounds from "./bounds.js"
-import codeReuse from "./code-reuse.js"
-import empty from "./empty.js"
-import eventHandlers from "./event-handlers.js"
-import framerate from "./framerate.js"
-import instances from "./instances.js"
-
-export default {
-  title: "Engine",
-  component: UiChooser,
-}
-
-export const Empty = {
-  args: { config: empty },
-}
-
-export const Bounds = {
-  args: { config: bounds },
-}
-
-export const Instances = {
-  args: { config: instances },
-}
-
-export const EventHandlers = {
-  args: { config: eventHandlers },
-}
-
-export const CodeReuse = {
-  args: { config: codeReuse },
-}
-
-export const Framerate = {
-  args: { config: framerate },
-}

package/src/docs/event-handlers.js

@@ -1,68 +0,0 @@
-const X = 0
-
-export default {
-  types: {
-    character: {
-      draw(ctx, instance) {
-        const {
-          size = 24,
-          orientation = 0,
-          stroke = "black",
-          fill = "transparent",
-        } = instance
-
-        const radius = size * 0.5
-
-        ctx.save()
-        ctx.rotate(-orientation)
-        ctx.translate(radius - 1, 0)
-
-        ctx.fillStyle = "black"
-
-        ctx.beginPath()
-        ctx.moveTo(0, 6)
-        ctx.lineTo(0, -6)
-        ctx.lineTo(6, 0)
-        ctx.fill()
-        ctx.closePath()
-        ctx.restore()
-
-        ctx.save()
-        ctx.lineWidth = 1
-        ctx.strokeStyle = stroke
-        ctx.fillStyle = fill
-
-        ctx.beginPath()
-        ctx.arc(0, 0, radius, 0, 2 * 3.14)
-        ctx.fill()
-        ctx.stroke()
-        ctx.closePath()
-        ctx.restore()
-      },
-
-      "game:update"(instance, event, { dt, instances }) {
-        const [left, , right] = instances.game.bounds
-
-        if (instance.position[X] > right) {
-          instance.velocity[X] = -instance.maxSpeed
-          instance.orientation = 3.14
-        } else if (instance.position[X] < left) {
-          instance.velocity[X] = instance.maxSpeed
-          instance.orientation = 0
-        }
-
-        instance.position[X] += instance.velocity[X] * dt
-      },
-    },
-  },
-
-  instances: {
-    character: {
-      type: "character",
-      maxSpeed: 250,
-      position: [400, 0, 300],
-      velocity: [250, 0, 0],
-      orientation: 0,
-    },
-  },
-}

package/src/docs/framerate.js

@@ -1,37 +0,0 @@
-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 {
-  loop: { type: "fixed", fps: 10 },
-
-  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/game.jsx

@@ -1,15 +0,0 @@
-import { start } from "@inglorious/ui/canvas"
-import { useRef } from "react"
-import { useEffect } from "react"
-
-export default function Game({ config }) {
-  const canvas = useRef()
-
-  useEffect(() => {
-    if (canvas.current) {
-      start(config, canvas.current)
-    }
-  }, [config])
-
-  return <canvas id="canvas" ref={canvas} />
-}

package/src/docs/image/image.js

@@ -1,19 +0,0 @@
-import { enableImage } from "@inglorious/game/decorators/image/image"
-
-export default {
-  types: {
-    image: [enableImage()],
-  },
-
-  instances: {
-    logo: {
-      type: "image",
-      position: [400 - 128 / 2, 0, 300 + 128 / 2],
-      image: {
-        id: "logo",
-        src: "/logo.png",
-        imageSize: [128, 128],
-      },
-    },
-  },
-}

package/src/docs/image/image.stories.js

@@ -1,22 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-import image from "./image.js"
-import sprite from "./sprite.js"
-import tilemap from "./tilemap.js"
-
-export default {
-  title: "Engine/Image",
-  component: UiChooser,
-}
-
-export const Image = {
-  args: { config: image },
-}
-
-export const Tilemap = {
-  args: { config: tilemap },
-}
-
-export const Sprite = {
-  args: { config: sprite },
-}

package/src/docs/image/sprite.js

@@ -1,39 +0,0 @@
-import { enableSprite } from "@inglorious/game/decorators/image/sprite.js"
-import { Sprite } from "@inglorious/game/sprite.js"
-
-export default {
-  types: {
-    cat: [
-      enableSprite(),
-      {
-        "game:update"(instance, event, options) {
-          Sprite.play("sleepy", instance, options)
-        },
-      },
-    ],
-  },
-
-  instances: {
-    game: {
-      pixelated: true,
-    },
-
-    neko: {
-      type: "cat",
-      position: [400, 0, 300],
-      sprite: {
-        image: {
-          id: "neko",
-          src: "/sprites/neko.png",
-          imageSize: [192, 192],
-          tileSize: [32, 32],
-          scale: 2,
-        },
-        speed: 0.2,
-        frames: {
-          sleepy: [4, 10, 10, 3, 9, 15, 9, 15, 15],
-        },
-      },
-    },
-  },
-}