Get Started in 5 steps:

1. Download the VisualNovelJS files:
visual-novel.min.js
visaul-novel.min.css

2. Add the files to your webpage: 
<link type="text/css" rel="stylesheet" href="visaul-novel.min.css" />
<script type="text/javascript" src="visual-novel.min.js" ></script>

3. Create the file "myVisualNovel.js" and add it to your webpage: 
<script type="text/javascript" src="myVisualNovel.js" ></script>

4. Open the created file (myVisualNovel.js), add the code below, and save it: 
// Create Visual Novel:
// HTML element id = getting-started-vn
// Width = 800
// Height = 600
// Images location = img/
var vn = new VisualNovel( "getting-started-vn", 800, 600, "img/" );

vn.init();

// Title
vn.setNovelTitle( "Visual Novel JS", "getting started" );

// Start screen settings
vn.setStartScreenBgColor( "black" );
vn.setStartScreenMenuPos( 550, 500 );

// Background
vn.setBgColor( "black" );

// Dialog settings
vn.setDialogBgColor( "white" );
vn.setDialogTextColor( "black" );

vn.say( "Me", "Hello World" );
vn.say( "World", "Hi Me" );

// Go back to start screen
vn.reset();

5. Add the div for your novel on the webpage 
<div id="getting-started-vn"></div>


That's it! To learn more, view the examples or read the docs





Example code: 
<script>

	var vn = new VisualNovel( "getting-started-vn", 800, 600, "img/" );

	vn.init();

	vn.setNovelTitle( "Visual Novel JS", "getting started", 300, 100 );

	vn.setStartScreenBgColor( "black" );
	vn.setStartScreenMenuPos( 550, 500 );

	vn.setBgColor( "black" );

	vn.setDialogBgColor( "white" );
	vn.setDialogTextColor( "black" );

	vn.say( "Me", "Hello World" );
	vn.say( "World", "Hi Me");

	vn.reset();

</script>
Create a visual novel instance: 
var vn = new VisualNovel(
    "getting-started-vn", // id of div html element
    800, 600,             // width, height
    "img/"                // location of images
);


Set the novel title: 
vn.setNovelTitle( "Visual Novel JS", "getting started" );


Set the start screen background color / image: 
vn.setStartScreenBgColor( "black" );
vn.setStartScreenBgImage(
    "bg/market.jpg", // path to image
    800, 600         // width, height
);


Set the start screen menu position: 
vn.setStartScreenMenuPos( 400, 400 ); // x, y position


Set the novel background color / image: 
vn.setBgColor( "black" );
vn.setBgImage(
    "bg/market.jpg", // path to image
    800, 600,        // background width, height
    "no-repeat",
    800, 600         // background size css
);


Set the dialog background color: 
vn.setDialogBgColor( "white" );


Set the dialog text color: 
vn.setDialogTextColor( "black" );


Define a Character: 
var nao = {
    name: "Naoto Shirogane",
    nameStyle: "color: darkblue;",
    width: 600,
    height: 600,
    image: {
        "default" : "character/na0_base0.png",
        "happy" : "character/na1_base0.png",
        "sad" : {
            "src" : "character/na0.png",
            "position" : "-100px 990px"
        }
    },
    pos: {
        x : 1.0,
        y : 0.007
    },
    dialog: {
        image: "character/na1_pe_000.png",
        nextImage: "character/na1_pe_010.png",
        imageDelay: 5000,
        height: 100,
        location: "left",
        button: {
            text: "...",
            image: "icon/play1.png",
            imageHover: "icon/play2.png",
            bgColor: "transparent",
            bgColorHover: "white",
            width: 20,
            height: 20
        }
    }
};
Required:
  • name ( string )
  • width ( int )
  • height ( int )
  • image ( string / object )
  • pos ( object )
Optional:
  • nameStyle ( string )
  • dialog ( object )
Say line/s: 
/**
 * say line,
 * and show button ( to go to next line )
 */
vn.say( "Me", "Hello World" );


/**
 * say line,
 * and add delay before saying next line
 */
vn.say( "Me", "Hello World", 1000 );


/**
 * say multiple lines,
 * show button for each line
 */
vn.say( "Me", [
    "Hello",
    "World"
] );


/**
 * say multiple lines,
 * add delay before saying 2nd line
 * show button on 2nd line
 */
vn.say( "Me", [
    "Hello", 1000,
    "World"
] );


/**
 * say multiple lines,
 * add delay before saying 2nd line
 * include previous line when showing 2nd line
 * show button on 2nd line
 */
vn.say( "Me", [
    "Hello", 1000,
    "World", true
] );


Menu: 
var choices = [
    {
        label : "Choice 1",
        action : function() {
            // add code here
        }
    },
    // add more choices here
];

vn.choice(
    "menuName",
    choices,
    {
        "pos": {
            "x": 0.5,
            "y": 0.5
        },
        "img": {
            "image": "character/lin.png",
            "width": 100,
            "height": 100
        }
    }
);


Add a condition ( =, >, <, != ): 
vn.setValue( "answer", "true" );

vn.addCondition( "answer", "=", "true",
    function success() {

        vn.say( char, "That's right!" );

    },
    function fail() {

        vn.say( char, "Too bad!" );

    }
);


Add loop: 
/**
 * Character animation
 */
vn.loop( "lin", true, function() {

    vn.setCharacterImage( lin, "sleep" );

    setTimeout( function() {
        vn.setCharacterImage( lin, "happy" );
    }, 200 );

}, 5000 );


/**
 * Scene object animation
 */
vn.addObjectToScene( "s1",
    { width: 10, height: 10, color: "blue" },
    { x: 0.5, y: 0.2, z: 0 }, 0
);

vn.loop( "object1", true, function() {

    vn.setSceneObjectPosition( "s1",
        0, 0.1, 0, // x, y, z position
        3000	   // duration
    );

    vn.setSceneObjectFade( "s1",
        "out",	// fade out
        3000	// duration
    );

    vn.setSceneObjectRotation( "s1",
        "y",	// axis
        45,	// angle
        10,	// duration
        false	// rotate continuously
    );

    setTimeout( function() {

        vn.setSceneObjectPosition( "s1",
            0, -0.1, 0, // x, y, z position
            3000	    // duration
        );

        vn.setSceneObjectFade( "s1",
            "in",	// fade in
            3000	// duration
        );

        vn.setSceneObjectRotation( "s1",
            "y",	// axis
            -45,	// angle
            10,	// duration
            false	// rotate continuously
        );

    }, 5000 );

}, 10000 );


Clear loop: 
vn.clearLoop( "lin" );


Move Scene: 
// x, y, z, duration
vn.moveScene( 0, 0, 100, 1000 );
Rotate Scene: 
// axis, angle, speed, loop rotation
vn.rotateScene( "z", 45, 100, false );
Add scene text: 
vn.addTextToScene( "thanks",
    "Thanks for watching",
    {
        x : 0.5, y : 0, z : 0.4,
        width : 300, height : 50,
        size : 50,
        color : "black",
        fade : 500
    }, 500 );


Fade in/out scene text: 
// text, fade in, duration
vn.fadeSceneText( "thanks", "in", 500 );

// text, fade out, duration
vn.fadeSceneText( "thanks", "out", 500 );


Remove scene text: 
vn.removeSceneText( "thanks" );


Add scene object: 
// name, imageInfo, position, delay, fadeInfo
vn.addObjectToScene(
    "fool",
    { width: 100, height: 200, path: "tarot/fool.png" },
    { x: 0.5, y: 0, z: 0.15 },
    500,
    { duration: 500, from: 0, to: 1 }
);


Fade in/out scene object: 
// scene object, fade in, duration
vn.fadeSceneObject( "fool", "in", 500 );

// scene object, fade out, duration
vn.fadeSceneObject( "fool", "out", 500 );


Move scene object: 
// object name, x, y, z, move duration, delay before next event
vn.moveSceneObject( "fool", 0.5, 0.1, 0, 1000, 0 );


Rotate scene object: 
// object name, axis, angle, duration, rotate continuously
vn.rotateSceneObject( "fool", "y", 1, 0, true );

// clear object rotation if set to rotate continuously
vn.resetSceneObject( "fool", "rotate" );


Remove scene object: 
vn.removeSceneObject( "fool" );


Add a custom event: 
// To create an event:
// vn.createEvent( type, event, delay )

// @type = wait / no wait
// @event = function
// @delay = delay in milliseconds for nowait type events

// wait = wait for nextEvent call before proceeding
vn.createEvent(
    "wait",
    function myEvent() {

        // do something

        // continue to next event
        vn.nextEvent();
    }
);

// nowait = proceed to next event after calling myEvent
vn.createEvent(
    "nowait",
    function myEvent() {

        // do something

    }
);

Basic examples:


Full Examples:


Resources:


Goal:   simplify visual novel creation on a webpage

Features:

Proposed features: