The DOMRenderer handles all visual presentation of the visual novel, including:
Background images for scenes
Character sprites with positioning and sizing
Dialogue display with text effects (typewriter, fade)
User interaction (clicking to advance dialogue)
The renderer creates a layered DOM structure within the provided container:
Background layer (.vn-background-layer)
Character layer (.vn-character-layer)
Dialogue box (.vn-dialogue-box) containing speaker name and text
DOMRenderer
Example
// Usually created automatically by VNEngine, but can be used directly: constrenderer = newDOMRenderer("#game-container", engine, { typewriterSpeed:50, assetsDirectory:"assets" });
Renders the visual novel to the DOM.
The DOMRenderer handles all visual presentation of the visual novel, including:
The renderer creates a layered DOM structure within the provided container:
.vn-background-layer).vn-character-layer).vn-dialogue-box) containing speaker name and textDOMRenderer
Example