@inglorious/engine 0.1.0 → 0.1.1

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],
-        },
-      },
-    },
-  },
-}

package/src/docs/image/tilemap.js

@@ -1,84 +0,0 @@
-import { enableTilemap } from "@inglorious/game/decorators/image/tilemap"
-
-export default {
-  types: {
-    tilemap: [enableTilemap()],
-  },
-
-  instances: {
-    game: {
-      pixelated: true,
-    },
-
-    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,
-              91,
-              83,
-              -1,
-              0x80000000 + 91,
-              -1,
-              // third row
-              -1,
-              -1,
-              -1,
-              97,
-              -1,
-              -1,
-              // fourth row
-              -1,
-              91,
-              -1,
-              -1,
-              0x80000000 + 91,
-              -1,
-              // fifth row
-              // -1, -1, 36, 37, -1, -1,
-              -1,
-              -1,
-              66,
-              67,
-              -1,
-              -1,
-            ],
-          },
-        ],
-      },
-    },
-  },
-}

package/src/docs/input/controls.js

@@ -1,67 +0,0 @@
-import move from "@inglorious/engine/movement/kinematic/modern.js"
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import {
-  createControls,
-  enableControls,
-} from "@inglorious/game/decorators/input/controls.js"
-import { merge } 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(),
-
-    character: [
-      enableCharacter(),
-      {
-        "game:update"(instance, event, options) {
-          const { input0 } = options.instances
-          instance.velocity = zero()
-
-          if (input0.left) {
-            instance.velocity[X] = -instance.maxSpeed
-          }
-          if (input0.down) {
-            instance.velocity[Z] = -instance.maxSpeed
-          }
-          if (input0.right) {
-            instance.velocity[X] = instance.maxSpeed
-          }
-          if (input0.up) {
-            instance.velocity[Z] = instance.maxSpeed
-          }
-
-          merge(instance, move(instance, options))
-        },
-      },
-    ],
-  },
-
-  instances: {
-    ...createControls("input0", {
-      ArrowUp: "up",
-      ArrowDown: "down",
-      ArrowLeft: "left",
-      ArrowRight: "right",
-      KeyW: "up",
-      KeyS: "down",
-      KeyA: "left",
-      KeyD: "right",
-      Btn12: "up",
-      Btn13: "down",
-      Btn14: "left",
-      Btn15: "right",
-      Axis0: "leftRight",
-      Axis1: "upDown",
-    }),
-
-    character: {
-      type: "character",
-      maxSpeed: 250,
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/input/gamepad.js

@@ -1,67 +0,0 @@
-import move from "@inglorious/engine/movement/kinematic/modern.js"
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import {
-  createGamepad,
-  enableGamepad,
-} from "@inglorious/game/decorators/input/gamepad.js"
-import { merge } 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: {
-    gamepad: [enableGamepad()],
-
-    character: [
-      enableCharacter(),
-      {
-        "game:update"(instance, event, options) {
-          const { gamepad0 } = options.instances
-
-          instance.velocity = zero()
-
-          if (gamepad0.left) {
-            instance.velocity[X] = -instance.maxSpeed
-          }
-          if (gamepad0.down) {
-            instance.velocity[Z] = -instance.maxSpeed
-          }
-          if (gamepad0.right) {
-            instance.velocity[X] = instance.maxSpeed
-          }
-          if (gamepad0.up) {
-            instance.velocity[Z] = instance.maxSpeed
-          }
-
-          if (gamepad0.leftRight != null) {
-            instance.velocity[X] += gamepad0.leftRight * instance.maxSpeed
-          }
-          if (gamepad0.upDown != null) {
-            instance.velocity[Z] += -gamepad0.upDown * instance.maxSpeed
-          }
-
-          merge(instance, move(instance, options))
-        },
-      },
-    ],
-  },
-
-  instances: {
-    gamepad0: createGamepad("gamepad0", {
-      Btn12: "up",
-      Btn13: "down",
-      Btn14: "left",
-      Btn15: "right",
-      Axis0: "leftRight",
-      Axis1: "upDown",
-    }),
-
-    character: {
-      type: "character",
-      maxSpeed: 250,
-      position: [400, 0, 300],
-    },
-  },
-}

package/src/docs/input/input.mdx

@@ -1,55 +0,0 @@
-import { Canvas, Meta, Source } from '@storybook/blocks'
-import * as Input from './input.stories'
-
-import mouse from "./mouse?raw"
-import keyboard from "./keyboard?raw"
-import gamepad from "./gamepad?raw"
-import controls from "./controls?raw"
-
-<Meta of={Input} />
-
-# Input
-
-It's pretty easy to add input controls to your game. Let's have a look.
-
-## Mouse
-
-If you need mouse support, it's as easy as using the `enableMouse()` decorator. It automatically detects movement and clicks on any instance in the scene.
-
-You can get a reference to any instance in the scene by inspecting the `options.instances` property.
-
-<Source dark code={mouse} />
-
-<Canvas of={Input.Mouse} />
-
-## Keyboard
-
-Using the keyboard is very similar, but we also need to specify an id for the input and some mapping configuration. This way we can create multiple mappings that can work at the same time!
-
-Also, please note how we are using some predefined functions to achieve our goal:
-
-- `zero()` returns a vector with the three coordinates set to zero;
-- `move()` calculates orientation, position, and velocity;
-- `merge()` applies those calculations to the instance.
-
-<Source dark code={keyboard} />
-
-<Canvas of={Input.Keyboard} />
-
-## Gamepad
-
-If you plug a gamepad, there's a high chance that the engine will recognize it and you will be able to control your character with the D-pad or the left axis.
-
-<Source dark code={gamepad} />
-
-<Canvas of={Input.Gamepad} />
-
-## Controls
-
-Want to make both keyboard and gamepad work? Use the `enableControls()` and `createControls()` functions then!
-
-You'll probably always want to use these two instead of dealing with keyboards and gamepads separately, but who am I to judge?
-
-<Source dark code={controls} />
-
-<Canvas of={Input.Controls} />

package/src/docs/input/input.stories.js

@@ -1,27 +0,0 @@
-import UiChooser from "@inglorious/docs/ui-chooser.jsx"
-
-import controls from "./controls.js"
-import gamepad from "./gamepad.js"
-import keyboard from "./keyboard.js"
-import mouse from "./mouse.js"
-
-export default {
-  title: "Engine/Input",
-  component: UiChooser,
-}
-
-export const Mouse = {
-  args: { config: mouse },
-}
-
-export const Keyboard = {
-  args: { config: keyboard },
-}
-
-export const Gamepad = {
-  args: { config: gamepad },
-}
-
-export const Controls = {
-  args: { config: controls },
-}

package/src/docs/input/keyboard.js

@@ -1,58 +0,0 @@
-import move from "@inglorious/engine/movement/kinematic/modern.js"
-import { enableCharacter } from "@inglorious/game/decorators/character.js"
-import {
-  createKeyboard,
-  enableKeyboard,
-} from "@inglorious/game/decorators/input/keyboard.js"
-import { merge } 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: {
-    keyboard: [enableKeyboard()],
-
-    character: [
-      enableCharacter(),
-      {
-        "game:update"(instance, event, options) {
-          const { keyboard0 } = options.instances
-
-          instance.velocity = zero()
-
-          if (keyboard0.left) {
-            instance.velocity[X] = -instance.maxSpeed
-          }
-          if (keyboard0.down) {
-            instance.velocity[Z] = -instance.maxSpeed
-          }
-          if (keyboard0.right) {
-            instance.velocity[X] = instance.maxSpeed
-          }
-          if (keyboard0.up) {
-            instance.velocity[Z] = instance.maxSpeed
-          }
-
-          merge(instance, move(instance, options))
-        },
-      },
-    ],
-  },
-
-  instances: {
-    keyboard0: createKeyboard("keyboard0", {
-      ArrowLeft: "left",
-      ArrowDown: "down",
-      ArrowRight: "right",
-      ArrowUp: "up",
-    }),
-
-    character: {
-      type: "character",
-      maxSpeed: 250,
-      position: [400, 0, 300],
-    },
-  },
-}