Skip to content

JollyPixel

💃 Getting Started ​

This workspace-private package stores .pixelart documents. Add "@jolly-pixel/asset.pixel-art": "workspace:*" to another workspace's dependencies.

👀 Usage example ​

Register the kind ​

ts
import { pixelArtAssetKind } from "@jolly-pixel/asset.pixel-art";
import { createAssetBackend } from "@jolly-pixel/asset-server";
import { FilesystemAssetSource } from "@jolly-pixel/asset-source";
import * as EventStore from "@jolly-pixel/event-store";

using eventStore = await EventStore.persistence.sqlite(
  "./assets/.jollypixel/events.db"
);
await createAssetBackend({
  source: new FilesystemAssetSource("./assets"),
  eventStore,
  handlers: [pixelArtAssetKind({ defaultSize: { x: 32, y: 32 } })]
});

The handler claims .pixelart files. defaultSize is the size of a texture created without content; it defaults to 32 by 32. A deleted texture keeps its size and loses its pixels and UV regions. The renderer package owns the file codec. Use MemoryAssetSource and an in-memory event store for an ephemeral workspace.

Connect a document ​

Create the synced document before joining the room so it receives the first snapshot.

ts
import { Client } from "@jolly-pixel/network/client";
import {
  SyncedPixelDocument,
  pixelArtRoom
} from "@jolly-pixel/asset.pixel-art/client";

const client = new Client();
const room = pixelArtRoom(client, assetId);
const synced = new SyncedPixelDocument(room);

room.join();
await synced.ready;

// Pass synced.document to PixelArtCanvas or another document consumer.
// On teardown: synced.dispose(); room.leave(); client.destroy();

PixelCollaboration adds cursors and in-progress previews to a PixelArtCanvas built on that document. See the network API for its constructor and lifecycle.

📚 API ​

  • @jolly-pixel/asset.pixel-art exports pixelArtAssetKind, PixelArtState, the PIXEL_ART_ASSET descriptor, ASSET_KINDS (the kind package, taking { defaultSize?, snapshot? } options), the kind and event constants for server registration, and pixelArtContentFromPng(png), which turns PNG bytes into .pixelart content. Build a blank texture with encodePixelArtFile(createPixelArtFile(size)) from @jolly-pixel/pixel-draw.renderer. Loading malformed content throws InvalidAssetFileError, with the renderer error as cause.
  • @jolly-pixel/asset.pixel-art/client exports SyncedPixelDocument, PixelSyncClient, pixelArtRoom, createPixelArtAsset, PixelCollaboration, presence helpers, wire types such as PixelArtRoom, and the history a PixelArtCanvas or a host records undo in.
  • @jolly-pixel/asset.pixel-art/server exports PixelCommandArbiter, applyPixelCommand, and the command, snapshot and UV layout schemas.

The package root imports server dependencies. Browser code should use the client entry point. The network API covers commands, snapshots, notices, and presence helpers. Architecture covers replay and conflict handling. The .pixelart file format and codec are documented by pixel-draw.renderer.

✨ Contributors guide ​

Read the contributing guide before submitting a change. Run pnpm --filter @jolly-pixel/asset.pixel-art test and pnpm run lint from the monorepo root.

📃 License ​

MIT