@proumeus/redhood-dialogue-sdk

A lightweight browser SDK for REDHOOD-style branching visual novel dialogue.

Built with plain JavaScript and native DOM — no React, no Vue, no build step required.

Current version: 1.2.0

About REDHOOD

REDHOOD is an independent dark fairy-tale 2D game inspired by Little Red Riding Hood. This SDK extends the game into a small creator kit for modders and web developers.

Play REDHOOD

https://proumeus.itch.io/redhood

Install

npm install @proumeus/redhood-dialogue-sdk

Quick start

<div id="game"></div>

<script type="module">
  import { createDialogue } from "@proumeus/redhood-dialogue-sdk";

  const nodes = {
    "intro-1": {
      speaker: "Jack",
      text: "A new adventurer?",
      nextId: "intro-2",
    },
    "intro-2": {
      speaker: "Jack",
      text: "It's been a long time",
      nextId: "end-1",
    },
    "end-1": {
      speaker: "Jack",
      text: "(nodded)",
    },
  };

  const dialogue = createDialogue({
    container: "#game",
    startId: "intro-1",
    nodes,
    typeSpeed: 35,
    font: "pixel",
    onEnd() {
      console.log("Dialogue ended");
    },
  });

  dialogue.start();
</script>

Load Press Start 2P for pixel font mode:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

Branching dialogue example

const nodes = {
  "choice-1": {
    speaker: "Jack",
    text: "What will you do?",
    choices: [
      { label: "Accept", nextId: "accept-1" },
      { label: "Cancel", nextId: "cancel-1" },
    ],
  },
  "accept-1": {
    speaker: "RedHood",
    text: "thanks",
    nextId: "end-1",
  },
  "cancel-1": {
    speaker: "RedHood",
    text: "I want to look around first",
    nextId: "end-1",
  },
  "end-1": {
    speaker: "Jack",
    text: "(nodded)",
  },
};

API

createDialogue(options)

| Option | Default | Description | | ----------------- | -------- | ----------- | | container | — | CSS selector or DOM element | | startId | — | First node id to display | | nodes | — | Object map of dialogue nodes | | typeSpeed | 35 | Typewriter speed (ms per character) | | allowSkipTyping | true | Click to instantly finish typing | | showSpeaker | true | Show or hide speaker name | | theme | "dark" | Visual theme: dark, blood, forest | | font | "serif" | Set to "pixel" for pixel font | | onEnd | — | Called when dialogue ends |

Node format:

{
  speaker: "Jack",
  text: "Hello.",
  nextId: "next-node",   // optional
  choices: [             // optional
    { label: "Accept", nextId: "accept-1" },
  ],
}

Returns:

const dialogue = createDialogue({ ... });

dialogue.start();    // begin from startId
dialogue.restart();  // restart from startId
dialogue.destroy();  // remove from page

Legacy API

createDialogueScene(containerId, sceneData, options?) is still available for array-based scenes.

Utilities

• typeText(element, text, speed?) — typewriter effect with .skip()
• applyRedhoodStyles(sceneElement, options?) — apply REDHOOD styles

Interaction

• While typing — click the dialogue box to finish the current line instantly
• After typing — click again to go to the next node
• Choices — appear only after typing finishes; click a choice button to branch
• End — when a node has no nextId and no choices, dialogue ends and onEnd runs

Demo

npm install
npm run demo

Open http://localhost:3456/demo/

The demo includes Jack / RedHood branching dialogue, pixel font, click-to-advance, and a Restart button.

Changelog

1.2.0

• Added node-based createDialogue() API
• Added click-to-skip typing and click-to-advance
• Added start(), restart(), and destroy() methods
• Added onEnd callback and improved error handling
• Updated demo with Restart button and polished layout
• Kept legacy createDialogueScene() for backward compatibility

1.1.0

• Branching choices with Accept / Cancel paths
• Pixel font mode
• Dialogue history and events

1.0.0

• Initial release with typewriter dialogue and REDHOOD themes

License

MIT © Proumeus