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

In the preceding screenshot, we have a label Mr. Red placed on top of our model and
a red bar denoting the remaining power in the model (game stats). Now, the sprite
that displays this information is a quad/square geometry with a dynamic texture.
Also, the sprite faces the camera after it has been rotated. Hence, the sprite class
should have the following features:

• It should be placed at a defined delta distance from the model and should
move with the model.

• It should rotate when the camera rotates.

So to achieve the preceding features, we need three things: a quad geometry, a
dynamic texture (canvas object), and a sprite class that inherits the StageObject
class and binds the geometry to the texture.

Using the sprite texture
We will start our learning with evolving the sprite texture, which writes the text
(model name) and generates the power bar.

We will try to build a generic class that can handle the following:

• The multiline text, if the text exceeds the maximum width
• Calculates the dynamic height and width of the sprite (canvas), based on font
style, font size, and length of the text

Open the SpriteTexture.js file from client/primitive in the code files of this
chapter in your text editor. The constructor takes the canvas element, elemId , as the
parameter to render the text in:

SpriteTexture = function (elemId) {
this.canvas = document.getElementById(elemId);
this.ctx = this.canvas.getContext('2d');
this.textSize=56;
this.maxWidth=256;
this.backgroundColor="#ffffff";
this.color="#333333";
this.powerColor="#FF0000";
this.power=7;
this.fullPower=10;
this.squareTexture=false;
}