## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

No credit card required

# Game Graphic Transformations

As we saw in the previous section, we can easily rotate a game graphic at the top-left corner by using the `context.rotate()` transformation. However, our game will need to rotate objects at the center rather than the top-left corner. To do this, we must change the transformation point to the center of our game graphic object.

## Rotating the Player Ship from the Center

The code to rotate the player ship from its center point is almost exactly like the code used to rotate it at the top-left corner. What we need to modify is the point of the translation. In Example 8-5, we placed the immediate-mode drawing context at the `x` and `y` coordinates of our game object (`50`,`50`). This had the effect of rotating the object from the top-left corner. Now we must move the translation to the center of our object:

`context.translate(x+.5*width,y+.5*height);`

### Note

The `width` and `height` variables represent attributes of our drawn player ship. We will create these attributes in Example 8-6.

This is not the only change we need to make; we also need to draw our ship as though it is the center point. To do this, we will subtract half the `width` from each `x` attribute in our path draw sequence, and half the `height` from each `y` attribute:

```context.moveTo(10-.5*width,0-.5*height);
context.lineTo(19-.5*width,19-.5*height);```

As you can see, it might get a little confusing trying to draw coordinates in this manner. It is also slightly more processor-intensive than using constants. In that case, we would simply hardcode in the needed values. Remember, the `width` and `height` attributes of our ship are both `20`. The hardcoded version would look something like this:

```context.moveTo(0,−10);  //10-10, 0-10
context.lineTo(9,9); //19-10, 19-10```

The method where we use the calculated values (using the `width` and `height` variables) is much more flexible, while the hardcoded method is much less processor-intensive. Example 8-6 contains all the code to use either method. We have commented out the calculated version of the code.

Example 8-6. Rotating an image from its center point

```//canvasApp level variables
var rotation = 0;
var x = 50;
var y = 50;   var width = 20;
var height = 20;

function drawScreen() {
// draw background and text
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText  ("Player Ship - rotate", 0, 180);

//transformation
var angleInRadians = rotation * Math.PI / 180;
context.save(); //save current state in stack
context.setTransform(1,0,0,1,0,0); // reset to identity

//translate the canvas origin to the center of the player
context.translate(x+.5*width,y+.5*height);

//drawShip

context.strokeStyle = '#ffffff';
context.beginPath();

//hardcoding in locations
context.moveTo(0,-10);
context.lineTo(9,9);
context.lineTo(0,-1);
context.moveTo(-1,-1);
context.lineTo(-10,9);
context.lineTo(-1,-10);

/*
//using the width and height to calculate
context.moveTo(10-.5*width,0-.5*height);
context.lineTo(19-.5*width,19-.5*height);
context.lineTo(10-.5*width,9-.5*height);
context.moveTo(9-.5*width,9-.5*height);
context.lineTo(0-.5*width,19-.5*height);
context.lineTo(9-.5*width,0-.5*height);
*/

context.stroke();
context.closePath();

//restore context
context.restore(); //pop old state on to screen

rotation++;

}```

## Alpha Fading the Player Ship

When a new player ship in Geo Blaster Basic enters the game screen, we will have it fade from transparent to opaque. Example 8-7 shows how we will create this transformation in our game.

### Using the context.globalAlpha attribute

To use the `context.globalAlpha` attribute of the canvas, we simply set it to a number between `0` and `1` before we draw the game graphics. We will create a new variable in our code called `alpha`, which will hold the current alpha value for our player ship. We will increase it by `.01` until it reaches `1`. When we actually create our game we will stop it at `1` and then start the game level. However, for this demo, we will just repeat it over and over.

Example 8-7. Alpha fading to the player ship

```//canvasApp level variables
var x = 50;
var y = 50;
var width = 20;
var height = 20;
var alpha = 0;
context.globalAlpha  = 1;

function drawScreen() {

context.globalAlpha = 1;
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText  ("Player Ship - alpha", 0, 180);
context.globalAlpha = alpha;
context.save(); //save current state in stack
context.setTransform(1,0,0,1,0,0); // reset to identity

//translate the canvas origin to the center of the player
context.translate(x+.5*width,y+.5*height);

//drawShip
context.strokeStyle = '#ffffff';
context.beginPath();

//hardcoding in locations
context.moveTo(0,-10);
context.lineTo(9,9);
context.lineTo(0,-1);
context.moveTo(-1,-1);
context.lineTo(-10,9);
context.lineTo(-1,-10);

context.stroke();
context.closePath();

//restore context
context.restore(); //pop old state on to screen