Basics

Creating a novel

To create a novel you will need to create a html file. Let's call it 'index.html'. Then connect Kawaii.js. Then you should write novel script and start the novel using .start() method.

Contents of index.html:

Now let us write some novel script:

To start writing you should define some variables. To define variable you should use $ followed by variable name and constructor. For example to create a character:

$you=Character('You', 'white', ' ', ' ')

Explanation:

$ - variable defenition start,
you - variable name,
Character(name, color, spritesFolder, spritesExtension) - constructor of class Character

You can create as much characters and other variables as you want.

Now let us get to scripting:

Script is divided in acts. So you should define an act:

ACT INIT
/ACT

Now you have an INIT act. Every script should contain an init act. Now you can start the actual script. To make character speak use this construction:

<Variable, that contains character>: <Variable or string with speech>

Now put it in your script:

ACT INIT
you: "Hello world!"
/ACT

Ending novel

To end novel use

die

statement. It also deletes target element.

Deploying novel

Now when your script is ready, start the novel

To start novel create novel object:

let novel=new Kawaii({id:'exampleNovel'}, ".Kawaii", document.querySelector("#Script").innerHTML);
novel.start();

Contents of novel script:

ACT INIT
$you=Character('You', 'white', ' ', ' ')
you: "Hello world!"
die
/ACT

Contents of index.html:

<DOCTYPE html>
<html>
<head>
<title>Example Novel</title>
</head>
<body>
<div class=Kawaii ></div>
<script src="libs/Kawaii.js" ></script>
<script id=Script type="application/x-vnd.kawaii.acts">
ACT INIT
$you=Character('You', 'white', ' ', ' ')
you: "Hello world!"
die
/ACT
</script>
<script>
let novel=new Kawaii({id:'exampleNovel'}, ".Kawaii", document.querySelector("#Script").innerHTML);
novel.start();
</script>
</body>
</html>

Reference

Comments

Rem

Comment construction, all following characters in line are ignored by interpreter.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif") Rem Bob is my favourite character!
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
/ACT

$!

Comment construction, all following characters in line are ignored by interpreter.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif") $!Bob is my favourite character!
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
/ACT

(value)

Comment construction, all characters in between are ignored by interpreter.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif") (*Bob is my favourite character!*)
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
/ACT

Keywords

Keywords is like functions, but without any possible parameters.

die

Destroys novel screen with neither saving any of the data nor prompting user.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Bye"
die
/ACT

save

Not implemented

Saving game as autosave.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
save
alice: "Bye"
die
/ACT

load

Not implemented

Loading game from autosave.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
load
alice: "Bye"
die
/ACT

halt

Not implemented

See @halt().

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
halt
alice: "Bye" Rem never going to be executed
die
/ACT

Functions

@lock(time)

See @pause()

@pause(time)

Pervents execution for time seconds.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Hi. Can you please wait for a few seconds?"
bob: "Ok!"
@pause(5000)
alice: "Thanks!" Rem is going to be be executed in 5 seconds.
die
/ACT

@halt()

This function does not take any parameters.

Pervents execution for ever.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Hi. Can you please wait for ever?"
bob: "Ok!"
@halt()
alice: "Thanks!" Rem is never going to be be executed.
die
/ACT

@choice(Associative link, Associative link, ...)

This function can take an infinite amount of parameters.

Prompts choice. You can have as many options as you wish.
Associative link syntax: "Option"=>"Code".

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Hi. Can you please wait for a few seconds?"
@choice("Yes"=>"@goto YES", "No"=>"@goto NO")
die Rem is never going to be be executed.
/ACT
ACT YES
bob: "ok"
alice: "thanks"
die
/ACT
ACT NO
bob: "no"
alice: "Why?"
die
/ACT

@noop()

This function does not take any parameters.

Does nothing. Literally. That's it.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Hi."
@noop() Rem does nothing
die
/ACT

@appear(Character, position=0, sprite=index)

Parameters position, sprite are not yet implemented.

Adding character to the scene. If no position is given, adds character to the right side of scene. If no sprite is given, the default is index.<extension>

@hide(Character)

Hides a character from scene (but does not not deletes! For deletion, see @dispose()).

@show(Character)

Shows hideen character on scene.

@mov(Character, Position)

Moves a character on scene to the left on Positionpx.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
bob: "Hello"
alice: "Hi."
bob: "Where are you?"
alice: "Right here!"
@appear(alice) Rem appears!
bob: "..."
@hide(alice)
bob: "Where have you gone again?"
@show(alice)
alice: "Here I am!!"
bob: "Okay. Can you please move a little bit right side?"
alice: "Okay"
@mov(alice, 100)
die
/ACT

@sprite(Character, Sprite)

Changes character sprite to Sprite.

@dispose(Character)

Deletes a character from scene. After disposing, you can't use @hide, @show, @mov on this character until @appear is called.

@background(Path)

Changes background image to image located at Path.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
@background("images/empty_classroom.png")
bob: "Hello"
alice: "Hi."
bob: "Where are you?"
alice: "Right here!"
@appear(alice) Rem appears!
bob: "..."
@hide(alice)
bob: "Where have you gone again?"
@show(alice)
alice: "Here I am!!"
bob: "Okay. Can you please move a little bit right side?"
alice: "Okay"
@mov(alice, 100)
die
/ACT

@video(Path)

Plays video in the background. Video must be located at Path. It is recommended to use @pause after starting video.

@audio(Path)

Plays audio located at Path.

ACT INIT
$bob=Character("Bob", "green", "sprites/Alice", "gif")
$alice=Character("Alice", "yellow", "sprites/Alice", "gif")
@audio("images/audio/calm.ogg")
@background("images/empty_classroom.png")
bob: "Hello"
alice: "Hi."
bob: "Where are you?"
alice: "Right here!"
@appear(alice) Rem appears!
bob: "..."
@hide(alice)
bob: "Where have you gone again?"
@show(alice)
alice: "Here I am!!"
bob: "Okay. Can you please move a little bit right side?"
alice: "Okay"
@mov(alice, 100)
@video("images/videos/Alice.ogv")
@pause(120000)
die
/ACT

@goto(Act)

Passes to ACT.

Kawaii.js

A visual novel engine.

Changes without backwards comapatability

Basics

Creating a novel

Reference

Comments

Rem

$!

(value)

Keywords

die

save

load

halt

Functions

@lock(time)

@pause(time)

@halt()

@choice(Associative link, Associative link, ...)

@noop()

@appear(Character, position=0, sprite=index)

@hide(Character)

@show(Character)

@mov(Character, Position)

@sprite(Character, Sprite)

@dispose(Character)

@background(Path)

@video(Path)

@audio(Path)

@goto(Act)

Kawaii.js

A visual novel engine.

Changes without backwards comapatability

Basics

Creating a novel

Reference

Comments

Rem

$!

(*value*)

Keywords

die

save

load

halt

Functions

@lock(time)

@pause(time)

@halt()

@choice(Associative link, Associative link, ...)

@noop()

@appear(Character, position=0, sprite=index)

@hide(Character)

@show(Character)

@mov(Character, Position)

@sprite(Character, Sprite)

@dispose(Character)

@background(Path)

@video(Path)

@audio(Path)

@goto(Act)

(value)