open-index/open-npm huggingface dataset:
npm package: @pixelation/animation
Description: Animation support for the Pixelation Engine.
Author: Jake Hamilton
Latest version: 1.1.6

# @pixelation/animation

> Animation support for the Pixelation Engine.

## Installation

```shell
npm install @pixelation/animation
```

## Usage

```ts
import * as engine from "@pixelation/engine";

import * as animation from "@pixelation/animation";

const box = {
    x: 0,
    y: 0,
    width: 10,
    height: 10,
};

// Construct a new animation which will perform some actions.
const move = new animation.Animation(
    // Supply a function which runs for each progress value (0-1) of the animation.
    (progress, surface, inputs, audio, dt, t) => {
        // Apply the progress value to determine how things should look.
        box.x = engine.easing.lerp(0, 100, progress);
    },

    // Set the duration of the animation (milliseconds).
    2_000,

    // Optionally loop this animation.
    false,

    // Optionally set the direction this animation plays.
    animation.AnimationDirection.Forward
);

// Set the animation to play.
move.play();

// Set the animation to paused.
move.pause();

// Stop the animation, resetting it.
move.stop();

// Update the animation. This will call the animation's animate function.
move.update(surface, inputs, audio, dt, t);

// Timelines can compose animations.
const timeline = new animation.Timeline(
    [
        { animation: move, offset: 0 },
        // Additional animations can be added at specific offset times...
    ],
    // Optionally loop this timeline.
    false
);

// Set the timeline to play.
timeline.play();

// Set the timeline to paused.
timeline.pause();

// Stop the timeline, resetting it.
timeline.stop();

// Update the timeline. This will call the relevant animate functions.
timeline.update(surface, inputs, audio, dt, t);
```
npm package: @pixelation/aseprite
Description: A library for parsing Aseprite files.
Author: Jake Hamilton
Latest version: 1.2.6

# @pixelation/aseprite

> A library for parsing Aseprite files.

## Installation

```shell
npm install @pixelation/aseprite
```

## Usage

To parse an Aseprite file, create a new instance of the `Aseprite` class with the file
provided as an array buffer.

```ts
import { Aseprite } from "@pixelation/aseprite";

const response = await fetch("./example.aseprite");
const file = await response.arrayBuffer();

const sprite = new Aseprite(file);
```

Sprite data is now accessible from this instance.

```ts
// Contains information about the whole file.
sprite.header;

// Contains information about each frame in the file.
sprite.frames;

// Contains the file's palette (if one exists).
sprite.palette;

// For example to work with each frame in the image.
for (const frame of sprite.frames) {
    // Do something with each frame...
}
```
npm package: @pixelation/engine
Description: A simple pixel art game engine.
Author: Jake Hamilton
Latest version: 1.8.5

# @pixelation/engine

> A simple pixel art game engine.

## Installation

```shell
npm install @pixelation/engine
```

## Usage

To start using the Pixelation Engine, import this library and call the `run` lifecycle function.
This function requires the following options:

-   `screen`: An `engine.graphics.Screen` or `engine.graphics.VirtualScreen` to draw to.
-   `setup`: An `engine.lifecycle.Setup` function which is called before running other code.
-   `update`: An `engine.lifecycle.Update` function which is called before rendering each frame.
-   `render`: An `engine.lifecycle.Render` function which is called to render each frame.

```ts
import * as engine from "@pixelation/engine";

// Create a screen to draw to.
const screen = new engine.graphics.Screen(100, 100);

const setup: engine.lifecycle.Setup = (surface, inputs, audio) => {
    // Add the screen to the page.
    document.body.appendChild(screen.canvas);
};

const update: engine.lifecycle.Update = (surface, inputs, audio, dt, t) => {
    // Here you can handle things like user inputs or process game logic.
    if (inputs.keyboard.pressed("w")) {
        // ...
    }
};

const render: engine.lifecycle.Render = (surface, inputs, dt, t) => {
    // Here you can render to the current rendering target `surface`.
    surface.fillRect(
        0,
        0,
        surface.width,
        surface.height,
        engine.colors.fromHsl(0.65, 0.8, 0.75)
    );
};

engine.lifecycle.run({
    surface: screen,
    setup,
    update,
    render,
});
```

## Examples

For reference examples, please see [`./examples`](./examples).

In addition, the code for the engine is fairly short, so it should be possible to read through to
get a better understanding. Don't be intimidated, this stuff ended up being easier than it seems!
npm package: @pixelation/scene
Description: Scene management for the Pixelation Engine.
Author: Jake Hamilton
Latest version: 1.0.8

# @pixelation/scene

> Scene management for the Pixelation Engine.

## Installation

```shell
npm install @pixelation/scene
```

## Usage

```ts
import * as engine from "@pixelation/engine";

// To start using this package, import it into your code.
import * as scene from "@pixelation/scene";

const red = engine.colors.fromHex("#ff0000");
const blue = engine.colors.fromHex("#0000ff");

// Scenes must implement the Pixelation Engine Lifecycle Component interface.
const a: engine.lifecycle.Component = {
    render: (surface) => {
        surface.fillRect(0, 0, surface.width, surface.height, red);
    },
};

const b: engine.lifecycle.Component = {
    render: (surface) => {
        surface.fillRect(0, 0, surface.width, surface.height, blue);
    },
};

// Create a scene switcher with a default scene set.
const switcher = new scene.Switcher(a);

// Update the switcher.
switcher.update(surface, inputs, audio, dt, t);

// Render the current scene.
switcher.render(surface, inputs, dt, t, fps);

// Switch to a different scene.
switcher.switch(
    // The scene to switch to.
    b,
    // The duration of the switch animation.
    2_000
);
```
npm package: @pixelation/state
Description: Composable, reactive state management.
Author: Jake Hamilton
Latest version: 1.0.0

# @pixelation/state

> Composable, reactive state management for the Pixelation Engine.

## Installation

```shell
npm install @pixelation/state
```

## Usage

```ts
import { atom, get, set } from "@pixelation/state";

// Create readable state.
const number = atom(0);

// Change an atom's value.
set(number, 42);

// Get an atom's value.
get(number); // 42

// Derive state from other atoms.
const derived = atom((get) => get(number) * 10);

// Get derived state just like normal state.
get(derived); // 420

// Create write actions for state that take over when `set` is called.
const reset = atom(null, (get, set) => {
    set(number, 0);

    return get(number);
});

// Call a write action.
set(reset);

// Write actions can accept arguments supplied through `set`.
const modify = atom(null, (get, set, value = 0) => {
    set(number, 0);

    return value;
});

// Call a write action with arguments.
set(reset, 9000);

// Write atoms can have derived state.
const double = atom(
    (get) => get(number) * 2,
    (get, set, value) => {
        let current = value;

        if (value === undefined) {
            current = get(number);
        }

        const result = current * 2;

        set(number, result);

        return result;
    }
);

// Interact with read/write atoms just like normal state.
set(double, 1); // 2
get(double); // 2
set(double); // 4
```

## Performance

> [!WARNING]
> Careful construction of the state graph is necessary for responsive games. This library does not
> perform cycle checking or try to optimize your state graph. It is the responsibility of the
> programmer using this library to ensure that the code your write is the code that runs.

This library propagates all state changes whenever a call to `set` is made. Via that call all
atoms which depend on the modified atom are queued to update. If any of those atoms change from
their previous value, the atoms that depend on it are added to the queue. This process repeats
until there are no more atoms to process.
npm package: @pixelation/text
Description: Text support for the Pixelation Engine.
Author: Jake Hamilton
Latest version: 1.0.12

# @pixelation/text

> Basic text support for the Pixelation Engine.

## Installation

```shell
npm install @pixelation/text
```

## Usage

```ts
import * as engine from "@pixelation/engine";

// To start using this package, import it into your code.
import * as Text from "@pixelation/text";

// English text can be created by supplying:
// - The text content.
// - The maximum width of the text area.
// - The maximum height of the text area.
// - The font variation.
// - The whitespace strategy.
// - An optional color to render the text in.
const text = new Text.English(
    "My Text!",
    Infinity, // Infinity can be used for the width to allow any amount of text.
    Infinity, // Infinity can be used for the height to allow any amount of text.
    Text.Variation.Normal,
    Text.WhiteSpace.BreakWord,
    engine.colors.fromHex("#000000") // If a color is not supplied, a default will be used.
);
```

The following `Variation` values are available:

-   `Variation.Normal`: The default font style.
-   `Variation.Compact`: A smaller, more condensed font style.

The following `WhiteSpace` values are available:

-   `WhiteSpace.BreakAll`: Causes characters to move to the next line if they reach the maximum width, even in the middle of a word.
-   `WhiteSpace.BreakWord`: Causes characters to move to the next line if they reach the maximum width, but will never break up a word. Instead, the whole word will be moved to the next line if it were to overflow.