Add-ons / Dynamic Avatar Drawer

Overview

This is a tool for developers of text-based games to visualize characters dynamically based on their statistics, in the form of a Javascript module named da.

Installation

You can download a template with the library already installed using the Twine Customizer tool.

To install it without the customizer go to the official Dynamic Avatar Drawer Twine integration guide and follow the steps.

Usage

Since da is basically a JavaScript library, using it in Twine requires calling JavaScript functions, either in the Story JavaScript, or using the <<sript>> and <<run>> macros. Check the official Twine Demo for a very complete example on how to render the avatar on the sidebar and update it to match character stats.

You'll find a more basic example of just rendering a static character inside a passage below.

Live demo

Demo Twee code:

:: Start
<<script>>
    da.load();
    const div = document.createElement("div");
    div.id = "player";
    div.style = "margin: -25px auto;";
    const canvasGroup = da.getCanvasGroup(div, {
        width: 400,
        height: 600,
    });
    const player = new da.Player({
        name: "Jane",
        age: 26,
        fem: 11,
        sub: 2,
        basedim: {
            armThickness:   58,
            armLength:      45,
            breastSize:     10,
            buttFullness:   13,
            chinWidth:      63,
            eyelashLength:  3,
            eyeSize:        13,
            faceFem:        40,
            faceLength:     212,
            faceWidth:      83,
            hairLength:     37,
            hairStyle:      4,
            hairHue:        0,
            hairSaturation: 19,
            hairLightness:  21,
            handSize:       119,
            height:         172,
            hipWidth:       111,
            legFem:         40,
            legFullness:    4,
            legLength:      99,
            lipSize:        18,
            lowerMuscle:    22,
            neckLength:     72,
            neckWidth:      39,
            shoulderWidth:  64,
            upperMuscle:    0,
            waistWidth:     102,
        },
        decorativeParts: [
            da.Part.create(da.BeautyMark, {side: null}),
        ],
        clothes: [
            da.Clothes.create(da.Tee),
            da.Clothes.create(da.Jeans),
            da.Clothes.create(da.FlatShoes)
        ],
    });
    const color = getComputedStyle(document.body).getPropertyValue("color");
    da.draw(canvasGroup, player, {
        nameColor: color,
        genderColor: color,
        printVitals: false,
        printHeight: false,
    });
    $(output).append(div);
<</script>>