Crate autumn_plugin_pixijs 

This crate adds PixiJS 2D canvas stages to Autumn apps. It works with Maud and htmx.

Add PixiPlugin to the app. Put pixi_stylesheet() and pixi_script() in the page <head>. Then write a Stage:

use autumn_plugin_pixijs::{
    Color, PixiPlugin, Shape, Sprite, Stage, Text, pixi_script, pixi_stylesheet,
};
use autumn_web::prelude::*;

#[get("/")]
async fn index() -> Markup {
    html! {
        html {
            head { (pixi_stylesheet()) (pixi_script()) }
            body {
                (Stage::new()
                    .id("game")
                    .label("A coin game")
                    .background(Color::hex(0x0f172a))
                    .add(Text::new("Tap the coin").fill(Color::WHITE).position([400.0, 60.0]))
                    .add(Shape::star(5, 120.0, 50.0).fill(Color::hex(0xff7a18)).spin(30.0))
                    .add(Sprite::new("/static/img/coin.png")
                        .label("Gold coin")
                        .tap_post("/collect")
                        .tap_target("#game")
                        .tap_swap("outerHTML")))
            }
        }
    }
}

autumn_web::app()
    .plugin(PixiPlugin::new())
    .routes(routes![index])
    .run()
    .await;

How it works

• The crate contains PixiJS 8.22.0 (MIT) and its unsafe-eval package. It does not use npm or a bundler. PIXI_ASSETS serves them under /static/_plugins/pixi/. SRI covers every tag.
• The builder renders data-pixi-* attributes. init.js reads them and builds the stage. You can also write the attributes by hand.
• init.js scans on load, on htmx:afterSwap, and on each DOM insertion. It builds a stage again when its declarations change. It frees a stage when its element leaves the document.
• A tappable object sends a pixi:tap event from its declaration. An htmx trigger can use it.
• The pixi:ready event gives your own JavaScript the application, the root container, and the global PIXI.

Limits

• The plugin uses WebGL or Canvas 2D. It does not use the WebGPU renderer.
• The declarative layer has no filters, masks, particles, or physics. Use the pixi:ready event for custom code.
• Each WebGL stage has its own context. Browsers keep about 16 contexts. Renderer::Canvas uses no WebGL context.
• Do not let user content keep data-pixi-* or hx-* attributes. User markup could then start stages, load image URLs, and send requests.

Structs

AnimatedSprite

A frame animation from a PixiJS sprite sheet (.json with its image).

Color

An sRGB color.

PixiPlugin

Installs the PixiJS assets in an Autumn app.

Shape

A vector shape with a fill and an optional stroke.

Sprite

An image sprite.

Stage

A 2D stage. Renders one <div data-pixi="stage"> element.

Text

A text object. The text is the content of the declaration element, so an htmx swap can change it.

TilingSprite

A repeated image that fills a rectangle. It can scroll.

Vec2

A 2D vector: position, scale, anchor, size, or scroll speed.

VendoredFile

Provenance of one vendored upstream file.

Enums

Align

Text alignment of a multi-line Text.

Geometry

The geometry of a Shape. Sizes use logical pixels.

Renderer

The renderer of a Stage.

StageObject

One display object of a Stage.

Constants

ASSETS_NAMESPACE

URL namespace of the bundle. Files are served under /static/_plugins/pixi/.

DEFAULT_STAGE_SIZE

Default logical stage size: 800 × 450.

MAX_POLYGON_POINTS

Maximum number of polygon corners. The builder drops the extra corners.

MAX_STAGE_SIDE

Largest stage side, in logical pixels.

PIXI_VERSION

Pinned PixiJS version.

PLUGIN_NAME

The plugin name in Autumn diagnostics.

VENDORED

The vendored upstream files and their pins.

Statics

PIXI_ASSETS

The plugin asset bundle.

Functions

pixi_script

Renders the tags that load PixiJS and the plugin runtime.

pixi_stylesheet

Renders the <link> tag for the plugin stylesheet.