In this first step we are going to setup a simple scene and render it. We will have no objects in the scene so nothing will be visible yet but later steps in this tutorial will fix this.
For creating a new scene we just need to create an instance of the class twodee.Scene:
var scene = new twodee.Scene();
The scene needs a root node to display. This can be any type of node but it is recommended to use an instance of the twodee.SceneNode class for this. This kind of scene node can be used for hierarchical purposes much like the div element in HTML. Later steps in this tutorial simply adds stuff to this root node so we don't have to repeat the scene creation code again and again.
So let's create this invisible root node:
var root = new twodee.SceneNode(); scene.setRootNode(root);
Rendering the scene is the most code-intensive part of TwoDee because TwoDee assumes that you want to create your own rendering loop. So TwoDee just provides a render() method which renders the scene into a pre-configured HTML 5 canvas. Creating this canvas and clearing it to some background color is completely your own responsibility.
The following code is just an example how to setup a rendering loop. Feel free to implement your own one:
// The canvas element and its 2D context. Initialized once on startup.
var canvas, ctx;
// The interval ID needed to stop rendering.
var renderId;
// Initializes the render loop. Must be called once.
function init()
{
canvas = document.getElementById("output");
ctx = canvas.getContext("2d");
}
// Starts the render loop.
function start()
{
renderId = setInterval(render, 20);
}
// Stops the render loop.
function stop()
{
clearInterval(renderId);
}
// Renders a single frame.
function render()
{
var width, height;
// Get the canvas size
width = canvas.width;
height = canvas.height;
// Clear canvas
ctx.clearRect(0, 0, width, height);
// Update and render the scene
scene.update();
scene.render(ctx, width, height);
}
As you can see this render function first calls the update() method to update the scene. This means TwoDee processes animations and physics and checks for collisions. Then the render function calls the render() method to render the scene into the speciefied canvas 2D context.
setInterval is used to call the render function periodically. In this example it is called every 20 milliseconds which means a frame rate of 50 frames per second. If you want to render the animation with as much frames per second as possible then you can use 1 as interval. In theory you'll get a maximum of 1000 frames per seconds then but no browser can do this (yet) but good browsers may give you more than 100 fps easily (At least with a simple scene as in this example).
And last but not least here is a simple example HTML document needed for the above code. It provides the output canvas and two buttons to start and stop the render loop. It also calls the init method when the page is loaded. This kind of setup is used in all the examples of this tutorial:
<!DOCTYPE html>
<html>
<body onload="init()">
<canvas id="output" width="480" height="320"></canvas>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
</body>
</html>