Creating objects

If you want to add dynamics (moving sheets, etc.) in sheetengine, you have to use SheetObjects. If you simply create a new sheet, it will become part of the stationary scene. If you want to define sheets that are able to move around, you have to construct objects from them using the SheetObject constructor. The trick here is to define some sheets with position relative to the object center ({x:0,y:0,z:0}). Use the following syntax:

var obj = new sheetengine.SheetObject(centerp, orientation, sheets, canvasSize, intersectionsenabled);
Parameters are:
  • centerp: location of the center of the object. JSON with x,y,z keys.
  • orientation: orientation of the object. JSON with alpha, beta, gamma keys with radian values or alphaD, betaD, gammaD keys with degree values.
  • sheets: array of sheets the object consists of. Array containing Sheet objects.
  • canvasSize: size of the object's bounding box with relative position of the object with respect to the top left corner of the bounding box. This parameter is needed to reach optimal performance when redrawing the object. JSON with w, h, relu, relv keys.
  • intersectionsenabled: (optional) a boolean property that defines whether the object can intersect other sheets or not. Set it to true if you always need proper intersections even if that leads to more computationally expensive calculations. Boolean, default is false.


var sheet1 = new sheetengine.Sheet({x:0,y:-14,z:14}, {alphaD:45,betaD:0,gammaD:0}, {w:40,h:40});
sheet1.context.fillStyle = '#F00';

var sheet2 = new sheetengine.Sheet({x:0,y:14,z:14}, {alphaD:-45,betaD:0,gammaD:0}, {w:40,h:40});
sheet2.context.fillStyle = '#FFF';

var obj = new sheetengine.SheetObject(
  [sheet1, sheet2], 

The canvasSize parameter

The canvasSize is a compulsory parameter when creating an object. Its role is to define a bounding box that is used to redraw the scene when the object is changed (moved, rotated or any sheet of the object is changed). This makes it possible to only redraw parts of the entire canvas that have been changed since the last drawn snapshot and thus achieve higher frame rates. The canvasSize parameter contains the following properties:
  • w: width of the bounding box,
  • h: height of the bounding box,
  • relu: horizontal position of the object center relative to the top left corner of the bounding box,
  • relv: vertical position of the object center relative to the top left corner of the bounding box.

Select the above properties so that the object and its shadow surely fits into the bounding box. To check if the canvasSize parameter defines the right box switch on object contour drawing and adjust parameter properties accordingly:

sheetengine.drawObjectContour = true;

Object bounding box: only region inside will be redrawn. The bounding box should enclose object shadows even if the object jumps or falls from high above.

The intersectionsenabled parameter

The intersectionsenabled is an optional parameter when creating an object. Its role is to define whether the object will intersect other sheets or not. The pure goal of this switch is to make calculations more performant when objects don't intersect other sheets - which is the usual case. In a typical scenario if you define an object that can move around (like a character or a vehicle), it may not go through walls or trees or other objects in the scene (because it will be stopped using collision detection before that could happen). Therefore it is usually unnecessary to calculate intersections for these objects - because intersections will simply not occur - and this is the default behavior. To indicate that an object is allowed to intersect others (for example a wall can be setup to intersect another wall), set this switch to true and thus you will get correctly displayed polygons. Note, that the intersections of an object's own sheets will always be correctly calculated regardless of the state of this switch, so if you define an object that consist of sheets that intersect each other, those will always be displayed correctly.

Note, that the above behavior can be switched off by setting

sheetengine.objectsintersect = true;
which will globally enable intersections of all sheets, regardless of the intersectionsenabled parameter of objects.

Last edited Dec 11, 2012 at 8:23 PM by dobsonl, version 4


Josenzo Feb 13, 2013 at 9:16 PM 
Have you think in create some script to convert obj in sheet object? Or take the Three.js format to render objects in sheetengine?

Have a look this links:

Very nice library! :)

dobsonl Jan 27, 2013 at 12:31 AM 
No, it is designed to always be positioned relative to the object center as reflected by obj.centerp. You should set canvasSize initially to a value that is big enough to enclose the object after sheet rotations. Also make sure that sheets are always positioned so that obj.centerp always stays at the center of the object (you could move all sheets relative to centerp to a distant location, but I would not consider it as a correct object model, centerp should always fall near to the geometrical centrum of sheets).

Obi2Kenoby Jan 3, 2013 at 10:56 AM 
I have a problem when I rotate all the sheets of an object. (obj.rotateSheet('allsheets..'))
The bounding box of the 'canvasSize' is never changes and always stays in the same place.
Is there an easy way to 'refresh' the 'canvasSize' parameter of an object?
(So that the 'relu' and 'relv' parameters are calculated from the new center of the object after rotation.)