2D Canvas and Multiplayer Games - WebGL Game Development - page 356

Implementing the ModelSprite class
This class inherits the Sprite class. The objective of the class is twofold:

• Set the position of the sprite at a delta distance from the model so that it

moves with the model

• Set the orientation of the sprite to face the camera

Open the ModelSprite.js file from client/primitive/game in your editor. The
constructor takes two parameters: the model object (the sprite has to be associated
with) and the camera object:
ModelSprite= inherit(Sprite, function (model,cam){
superc(this);
this.model=model;
this.camera=cam;
this.scale=vec3.fromValues(8,8,8);
//The relative values to the model position

The delta distance from the model is initialized to zero as shown in the following
code snippet:

this.deltaX=0;
this.deltaY=0;
this.deltaZ=0;
});

We have overridden the update function of the StageObject class:
ModelSprite.prototype.update=function(){

We have discussed on numerous occasions that the model matrix is the inverse of
the camera matrix. Hence, we set this.matrixWorld to the inverse of the camera
matrix, as shown in the following line of code:

mat4.invert(this.matrixWorld,this.camera.viewMatrix);

Then, we scale our transformation matrix, this.matrixWorld , as shown in the
following line of code:

mat4.scale(this.matrixWorld,this.matrixWorld,this.scale);

We then set the position of the sprite by setting the values of m30 , m31 , and m32
indices of the this.matrixWorld array to the values got from adding the model
positions and the delta values on the three axes, as shown in the following code:

this.matrixWorld[12]=this.model.position[0]+this.deltaX;
this.matrixWorld[13]=this.model.position[1]+this.deltaY;
this.matrixWorld[14]=this.model.position[2]+this.deltaZ;
}