Creating a scene

creatingascene.png

Initialization

To use the sheetengine library download it and reference it in your html:

<script src="sheetengine.js"></script>
To create a screen for your application, simply define a canvas in your html markup:

<canvas id="mainCanvas" width="500" height="300"></canvas>
Now you are ready to create your custom javascript to render scenes. We will use the API functions of sheetengine. To initialize the sheetengine use the init function of the sheetengine object passing the canvas you have defined and the total size of the displayed world:

var canvasElement = document.getElementById('mainCanvas');
sheetengine.scene.init(canvasElement, {w:2000,h:1500});

Dynamic vs static main canvas

The main canvas can be initialized in two ways: dynamic and static. Dynamic means that the main canvas only displays a portion of the actual world so it acts as a viewport to the world and can be moved around over the background. In this case a larger hidden background canvas is created and all drawing occurs on that background canvas - the appropriate portion of the background canvas is then drawn onto the main canvas every time. This is the default operation and we will mostly use this mode when creating games. If you want to be able to move the camera (viewport) around you have to use this mode and provide the size of the background canvas in the init function - make sure all loaded yards will fit onto the given area:

// init dynamic canvas with a 2000x1500 pixel background buffer
sheetengine.scene.init(canvasElement, {w:2000,h:1500});
If you don't provide a size for the background canvas the main canvas will be used for drawing and it will be static - you won't be able to move the camera around:

// init static canvas without background buffer
sheetengine.scene.init(canvasElement);

Defining basesheets

To display the ground you can create basesheets with the following syntax:

var basesheet = new sheetengine.BaseSheet(centerp, orientation, size);
Parameters are:
  • centerp: location of the center of the basesheet. JSON with x,y,z keys.
  • orientation: orientation of the basesheet. JSON with alpha, beta, gamma keys with radian values or alphaD, betaD, gammaD keys with degree values.
  • size: width and height of the basesheet. JSON with w, h keys.

Color of the basesheet can be set by setting its color property after construction. Example:

var basesheet = new sheetengine.BaseSheet({x:0,y:0,z:0}, {alphaD:90,betaD:0,gammaD:0}, {w:200,h:200});
basesheet.color = '#5D7E36';

Defining sheets

Use the following syntax to create individual static sheets:

var sheet = new sheetengine.Sheet(centerp, orientation, size);
Parameters are:
  • centerp: location of the center of the sheet. JSON with x,y,z keys.
  • orientation: orientation of the sheet. JSON with alpha, beta, gamma keys with radian values or alphaD, betaD, gammaD keys with degree values.
  • size: width and height of the sheet. JSON with w, h keys.

Texture of sheet can be given by drawing on the 2d rendering context of the underlying canvas. Use the context property of the sheet to access it. Example:

var sheet = new sheetengine.Sheet({x:150,y:20,z:20}, {alphaD:0,betaD:0,gammaD:0}, {w:40,h:40});
sheet.context.fillStyle = '#FFF';
sheet.context.fillRect(0,0,40,40);

Rendering the scene

Before drawing the scene some calculations have to be done. To calculate all sheet data we can use the

sheetengine.calc.calculateAllSheets();
method. To calculate only changed sheets we can use the

sheetengine.calc.calculateChangedSheets();
method. Depending on the number of sheets needed to be recalculated one or the other method could perform better. Typically we will use calculateAllSheets to calculate initial scenes and then use calculateChangedSheets in every iteration later on to calculate the changes.

To draw the sheets on the main canvas we can use the

sheetengine.drawing.drawScene(true);
method. Note the 'true' parameter of the drawScene function: it means the whole scene is to be rendered, not only changed parts. Use this setting to draw the initial scene, and you can use the parameterless version drawScene() to draw in-game changes later on.

Last edited Dec 11, 2012 at 9:06 PM by dobsonl, version 5

Comments

No comments yet.