Animating objects

Animating sheet texture

To animate the texture of an object sheet simply use the 2D rendering context. After drawing on the context call the canvasChanged function:

function animateSheet(sheet, state) {
  sheet.context.fillStyle = '#F00';
  sheet.context.fillRect(state * 10,0,10,10);
  sheet.canvasChanged();
}

Moving object sheets

You can animate characters and objects by moving/rotating object sheets. To set the position/orientation of a sheet of an object you can use the following function:

obj.setSheetPos(sheet, targetp, orientation);
Parameters are:
  • sheet: sheet of object to be moved. Reference to the sheet.
  • targetp: target location of center of sheet. JSON with x,y,z keys.
  • orientation: orientation of sheet. JSON with alpha, beta, gamma keys with radian values or alphaD, betaD, gammaD keys with degree values.
You can also simply rotate a sheet with around an axis with a specified angle:

obj.rotateSheet(sheet, axisPoint, axisDirection, angle);
Parameters are:
  • sheet: sheet of object to be moved. Reference to the sheet.
  • axisPoint: a point on the axis of rotation. JSON with x,y,z keys.
  • axisDirection: vector defining the axis of rotation. JSON with x,y,z keys.
  • angle: rotation angle in radians.
Please note, that if an object was created with the intersectionsenabled = false setting and the sheet of the object has been moved in a way that makes it necessary to recalculate intersections, then you will have to call

obj.redefineIntersections();
right after calling rotateSheet or setSheetPos on the object.
Examples:

var sheet = obj.sheets[0];
obj.setSheetPos(sheet, {x:0,y:0,z:0}, {alphaD:0,betaD:0,gammaD:0});
obj.redefineIntersections();

var left = obj.sheets[0];
gate.rotateSheet(left, {x:-21,y:0,z:0}, {x:0,y:0,z:1}, -Math.PI/32);

movingobjectsheets.png
Moving object sheets: character's legs are rotated as it moves forward.

Sprite animation

Sheetengine was designed to give you the ability to define your own models using sheets. Intersections and shadows for your objects are automatically handled by the engine. However if you want to use sprites it is also possible: simply define an object with a singe sheet directed towards the camera and switch off shadows cast on and by the sheet using the following function:

obj.setShadows(castShadows, allowShadows);
Parameters are:
  • castShadows: boolean defining the object should cast shadows or not. Set to false if you don't want the object to cast shadows.
  • allowShadows: boolean defining other objects are allowed to cast shadows on this object. Set to false if you don't want other sheets' shadow appear on object surface.
To animate the sprite use the techniques described in Animating sheet texture and Using custom textures.
spriteanimation.png
Sprite animation: consequtive images are drawn onto sheet canvas. Object shadows are imitated using textures.

Last edited Dec 11, 2012 at 9:35 PM by dobsonl, version 2

Comments

No comments yet.