vn-Canvas for HTML5

A javascript visual novel engine for HTML5 Canvas.

  • Current version: 0.6.3 (Elsa)
  • Takes advantage of new HTML5 features, as compared to other visual novel engines which use mostly standard HTML4 elements.

  • Targeted specifically for visual novels, so it contains none of the overhead caused by extra features (which visual novels aren't going to use anyway) in generic game engines

  • Simple enough to use even by non HTML and/or javascript programmers. A game maker or story teller only needs to concern himself with the story, like directing a movie or play.

  • Cross platform on any HTML5-capable browser without the need for additional plugins or extensions. That means, it should run on Windows, Mac, Android, or anywhere these modern browsers run on. (Have only tested though on Firefox, Chrome, Opera and Safari, sometimes Opera mobile and Android emulators, so if you're willing to give it a shot on the other browsers, feel free and please give me feedback.)

  • Resources (e.g. images, audio) are loaded on-the-fly and not preloaded at the start. So you don't have to wait 5 minutes watching a progress bar that gets stuck at 88%. There will be lags however in between frames as resources get loaded, but with faster internet connections or even offline play, these will hardly be noticeable.

  • Best of all, it's built using free tools at zero budget. :)

  • Additional notes to the game developer:
    - Feel free to modify to your heart's content, while keeping the copyright info, of course.
    - For performance considerations, scriptline checking is deliberately kept at a bare minimum. That means, making sure the scriptline is correct is the developer's responsibility. The engine directly executes the scriptline to minimize execution delay, as compared to going thru tons of validation checking.
    - It is recommended to have a javascript console open when developing the script. It's not unusual to misspell or miss a comma, colon, quotes or brackets. The console is your friend.
    - It is also recommended that all javascripts be minified, with or without obfuscation, prior to deployment. This not only improves loading time, but also makes it a little bit harder for players to take a peek at the story endings.
  • The following lists what's new for version 0.6+, aka Elsa.

  • Visual programming support using Blockly

  • Support for full-body sprites with automatic zoom based on z-order

  • Support for image filters

  • Support for mobile platform development using Apache Cordova/Phonegap


  • The following lists what's new for version 0.5+, aka Diana.

  • New folder organization. Scripts, CSS, etc. are now organized for easier and clearer separation of engine and game.

  • Engine divided into submodules, making it possible to choose only what you need.

  • On-demand script loading, for faster loading and less memory usage.

  • Now uses requireJS for asynchronous module loading.

  • Change in licensing, well, minor change.

  • Support for responsive grid.

  • Release 0.5.1a is an interim release which adds an HTML5 syntax builder but with minimal engine updates. (See Development menu)

  • The following is a list of known limitations. Some of these have been verified; some have been documented in a reference material somewhere; some have been observed by others. Currently, no fallbacks for these have been implemented, and possibly many will not have fallbacks. So please use with caution.

  • Different browsers have different implementation of form elements.

  • Some browsers designed for mobiles (e.g. Opera Mobile and Safari/iOS) may limit bandwidth and/or memory and cache usage. So resources, such as large images, exceeding whatever browser limit there is, may not display/render, if it is even loaded at all. Safari/iOS also limits audio stream play for bandwidth consideration.

  • Safari on iOS devices do not support audio/video preloading, as well as video-on-canvas, according to some reference.

  • Some tests done on an Android device report that the demo/script doesn't work, even though apparently it works on the Android SDK (4+ platform). If you absolutely must on an Android device, there's always PhoneGap. :)

  • Some new versions of Firefox (33.x+) have compatibility issues, such as HTML5 audio failing to load and some asynchronous module issues in requireJS. These work fine on other browsers such as Chrome and on older versions of FF with no issues. A workaround is currently being investigated.
       - Confirmed working on FF26.
       - requireJS buggy on FF33+, apparently works on higher versions. Workaround: refresh page
       - HTML5 audio/mp3 broken on FF34+. Workaround: use OGG format.

  • Responsive grid operates differently on Opera. It stretches the canvas instead of setting the dimensions according to the screen size.

Revision history:
Version 0.6 Elsa
10.29.16 - Add checkpoint support for RPG mod
08.28.16 - Moved tooltip above cursor
07.05.16 - Bugfix: setting multiple uservars to null
07.01.16 - Support for actor horizontal/vertical flip using canvas scale
06.29.16 - Change button defaults to use Config.activeTheme settings
         - Support picture from user variables
06.22.16 - Bugfix: use === or !== when conparing with findStats return value
06.18.16 - Bugfix: fix 'return' jump to correct frame
         - Bugfix: fix regex search for string with operator
         - Bugfix: fix for actor transtions and missing sprites
         - Add support for active image scaling and hiding
         - Add support for getting cform control via id
         - Add support for button images via user variables
04.28.16 - Bugfix: fix move transitions based on actual image dimensions
04.27.16 - Bugfix: fix audio pause/resume on device initiated pause
	 - Add support for full body sprites
03.01.16 - Add support for canvas image filters
11.10.15 - Add option to pass previous stat value on update callback
11.03.15 - Bugfix: fix se repeat parameter on replay
10.28.15 - Bugfix: fix bgm stops on replay
	 - Added individual sound volume adjustment at creation
	   - as offset from master volume setting
	 - Prevent updates when window is minimized, see init.js
	   - stop audio play, for example
09.29.15 - better handling of touch events
	 - revamped menu to use buttons
	   - hard to select menu on small screens
	   - also makes it possible to have greater than 3 choices
	 - nodal dialog box no longer require a "loop cheat"
	 - Bugfix: fix input when a form is active
	 - TODO: video fix for cordova
09.22.15 - support for Apache Cordova
	   - only Android for now, checked with emulator only
	 - merged vncanvas-script with vncanvas-base
	   - remove asynchronous load issues
	   - script is essential to vncanvas anyway, not optional
Version 0.5 Diana
01.14.15 - support responsive template
	 - TODO: Firefox issues - requireJS fails on some version
12.30.14 - improved documentation
	 - organized folder structure
	 - speed up module loading:
	   - engine divided to modules
	   - story script load on demand
	   - support for requireJS
	 - support on-the-fly audio mute
Version 0.4 Chelsea
11.18.14 - add keyboard support (return, arrow keys)
11.11.14 - add autotype for text
06.02.14 - Bugfix: localStorage fix for IE, c/o CatNip
06.21.13 - Bugfix: parseFontString doesn't handle quoted single words
05.18.13 - updated vntemplate
	 - added config file checks to catch errors
04.12.13 - various bugfixes
03.10.13 - support for clickable "scene" objects
	 - support for change of actor "nick"
	 - Bugfix: actor reset changes position for non-auto actors
03.03.13 - "overlay" support for animated images
02.22.13 - support for "actor" shortcut
02.19.13 - "actor" support for animated avatars
02.17.13 - Bugfix: fix size and position of multiple sprites
02.10.13 - "actor" support for animated sprites
02.07.13 - "scene" support for animated objects
12.29.12 - 'menu' support for user variable set, in addition to jump to label
12.24.12 - Support _range attribute for actor stats
	 - Support '$' prepend on jump labels, to skip push on frame stack
12.01.12 - Prep for RPG MOD Pack
Version 0.3 Brenda
10.12.12 - Bugfix: touch devices reset fix (courtesy of Turker Yasa)
05.15.12 - Added 'random' generator for user variables
	 - Added a parameter to 'macro' calls
	 - Added multiple conditions for 'jump' 
05.04.12 - Added auto-revealing map to 'tile' navigation
	 - Bugfix: local storage persist flag fix
04.23.12 - Optimized 'skip' text storage
	 - Bugfix: sprite reuse using tags
	 - Support multiple avatars reuse thru tags
	 - Added screen action 'fall'
04.22.12 - Added actor 'stats' plugin
04.17.12 - Added 'skip read text' function for quick replay
	 -   not thoroughly tested, use with caution
	 - Added toggle mode for 'button'
04.14.12 - Added lookAhead option to preload next resources while idle
	 - Converted 'timer' cform element to a generic text display element
	 - Bugfix: added actor 'voice' to auto preload
	 - Bugfix: added Config-defined format in auto preload
	 - Bugfix: repeat 'animation' fix
04.10.12 - Added 'map' and 'tile' navigation
04.06.12 - Added custom 'animation' set
	 - Added tryit editor for developers (in demo section)
	 - Bugfix on movement effects (broken due to 'nowait')
Version 0.2 Althea
03.06.12 - Added 'z_order' for actor
	 - Setting a variable to null deletes it
	 - Support persistent user variable
	 - Support multiple named 'checkpoints'
03.04.12 - Added screen actions 'shake', 'snap'
03.01.12 - Added speech 'balloon' in actor
	 - Added arrays in user variables
02.28.12 - Added 'voice' dub in-sync with dialog
	 - Added 'nowait' argument to effects
02.27.12 - Expand user variables for more active use
	 - Several bugfixes
02.24.12 - Recode 'cform' (to be plugin-ready)
02.21.12 - Improved memory handling (avoid leaks ?)
	 - Modify Vector2d class
02.13.12 - Recode 'atmosphere' (to be plugin-ready)
02.12.12 - Recode effects (to be plugin-ready)
02.10.12 - Recode 'box', script, stage and 'button'
	 - Added 'preload'
	 - Selectable 'video-on-canvas' or 'video-element'
02.09.12 - Added vector2d class (in anticipation of some future features)
	 - Optimized 'particles' for performance
	 - Recode 'scene', 'overlay'
	 - Recode 'actor'
02.06.12 - Recode 'user variables'
	 - Recode 'audio', 'video'
	 - Recode 'form'
	 - Bug fix for iOS user inputs
02.05.12 - Recode for "cleaner" encapsulation thru functional inheritance
	 - Recode 'atmosphere'
Version 0.1 Preview
02.02.12 - Added atmosphere 'snow', 'rain' direction
01.31.12 - Updated cutscene/movie to play in canvas
	 - Optimized method encapsulation
01.28.12 - Bugfix for non-modal dialog while checkpoint loading
	 - Bugfix for cross-browser compatibility (re:image constructor)
	 - Added timer cform element
	 - Added animated picture cform element						
01.25.12 - Added macro for custom javascript
01.12.12 - Updated scene and overlay to accept HTML color
	 - Updated button (cform) to accept HTML color
	 - Optimized memory footprint (a bit)
01.11.12 - Added word filter
	 - Added URL jump
	 - Simplified atmosphere, added cloud and beam						
01.09.12 - Added themes
	 - Forms can be instantiated in-game
01.06.12 - Implemented text effects
01.04.12 - Bug fix: avatar, checkpoint
	 - Implemented additional actor effects
	 - Implemented additional overlay effects
	 - Implemented additional background effects						
12.30.11 - Simplified 'audio'						
12.29.11 - Added configuration file (just the basics)
12.28.11 - Added a subset of HTML forms
12.26.11 - Simplified 'set' and 'jump'
12.25.11 - Added actor avatar
	 - Updated checkpoint saves to include avatar and forms
12.24.11 - Added video for intros, cutscenes, endings
12.21.11 - Added cforms (buttons only... so far)
12.20.11 - Added basic saves using checkpoint
12.08.11 - Added overlay and atmosphere basics
12.06.11 - Added actor basics
12.05.11 - Added script box, flow control using jump
12.01.11 - Basics for background image, music/sounds, flow control using wait
11.27.11 - Initial creation