Upgrade Guide

If you have a game made for previous version of vn-Canvas (prior to v.0.5.0), or just want to customize your installation, it is easy to upgrade to the latest version.
Text marked in green are those you need to customize for your game.

Folder structure

The latest vn-Canvas version organizes the scripts into several folders.

  
<root>/
	css/
		mygame.css
		
	script/
		app/
			vncanvas-*.js
			canvastext-*.js
		lib/
			require.js
		mygame/
			mygame_config.js
			mygame_plugin.js
			mygame_script.js
			mygame_toc.js
		init-mygame.js
		
	mygame.html

/mygame.html is the top-level html page for your game.

/css/mygame.css is the custom css file for your game, if any.

/script/app is the folder where vn-Canvas engine is.

/script/lib is the folder where standard libraries may be placed. As of the latest version, only requireJs is needed.

/script/mygame is the folder where you put your game files. Note, the game folder may be placed anywhere you want. We'll tell the engine where to look for it using the init file.

/script/init-mygame.js is the initialization file for your game. Every game must have its own unique init file.

HTML

Our game HTML (mygame.html) for previous versions would look something like this, assuming we followed above folder structure.

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyGame</title>
    <meta name="description" content="Description of mygame." />
    <link rel="stylesheet" href="css/mygame.css" />
  </head>
  <body>
    <div style="text-align: center;">
      <canvas id="stage" style="border:1px solid black" oncontextmenu="return false;" onselectstart="return false;">
        Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.<br/>
      </canvas>
    </div>
    <script src="script/mygame/mygame_toc.js"></script>
    <script src="script/app/canvastext-0.4.1.mod.js"></script>
    <script src="script/app/vncanvas-0.4.js"></script>
    <script>
      window.onload = function() {
        Stage.Init("stage", 720, 480);
        Stage.script.Init(mygame_script);
      }
    </script>
  </body>
</html>

We're going to replace the block in red (yes, all those script calls), as a single script call below.

  
    <script data-main="script/init-mygame.js" src="script/lib/require.js"></script>

Neat! It simply tells the engine to load our initialization file. Now that wasn't so hard, was it?

Initialization

Next we'll add our initialization script (init-mygame.js) according to the folder structure we defined earlier. See also Getting Started.

  
requirejs.config({
    baseUrl: 'script/lib',
    paths: {
        app: '../app',
        mygame: '../mygame'
    }
});

requirejs([
    // load TOC here
    "mygame/mygame_toc",
    // load canvas text
    "app/canvastext-0.4.1.mod",	
    // load base engine
    "app/vncanvas-base",
    // load (optional) engine modules
    "app/vncanvas-cmds",
    "app/vncanvas-media",
    "app/vncanvas-form",
    "app/vncanvas-cform",
    "app/vncanvas-bgnd",
    "app/vncanvas-actor",
    "app/vncanvas-atmo",
    "app/vncanvas-script",
    "app/vncanvas-chkpt",
    // place config, plugin, macro, etc. files here
    "mygame/mygame_config",
    "mygame/mygame_plugins"
],

function () {
    Stage.Init("stage", 720, 480);
    Stage.script.Init("mygame_script");
});

Our initialization file tells our engine where to look for our script, what engine submodules to load, including our game TOC and configuration.

Now remember the window.onload() calls we removed from our HTML file, we're going to put it here inside the function() call which is run after all the modules have been loaded. Note: the quotes are needed for the Stage.script.Init() argument, and it must match the name of the script file.