How can a large canvas have an animated 'viewable area'

Question

The question title may be vague. Basically, imagine a racing game built in canvas. The track takes up 10,000 x 10,000 pixels of screen space. However the browser window is 500 x 500 pixels. The car should stay centered in the browser and the 'viewable' area of the 10,000 x 10,000 canvas will change. Otherwise the car would just drive off the edge at disappear.

Does this technique have a name?

What are the basic principles to make this happen?

Answer 1

Two things:

Canvas transformation methods

First, the canvas transformation methods (along with context.save() and context.restore() are your friends and will greatly simplify the math needed to view a portion of a large 'world`. If you use this approach, you can get the desired behavior just by specifying the portion of the world that is visible and the world-coordinates of everything you want to draw.

This is not the only way of doing things* but the transformation methods are meant for exactly this kind of problem. You can use them or you can reinvent them by manually keeping track of where your background should be drawn, etc., etc.

Here's an example of how to use them, adapted from a project of mine:

function(outer, inner, ctx, drawFunction) {
  //Save state so we can return to a clean transform matrix.
  ctx.save();

  //Clip so that we cannot draw outside of rectangle defined by `outer`
  ctx.beginPath();
  ctx.moveTo(outer.left, outer.top);
  ctx.lineTo(outer.right, outer.top);
  ctx.lineTo(outer.right, outer.bottom);
  ctx.lineTo(outer.left, outer.bottom);
  ctx.closePath();

  //draw a border before clipping so we can see our viewport
  ctx.stroke();
  ctx.clip();

  //transform the canvas so that the rectangle defined by `inner` fills the
  //rectangle defined by `outer`.
  var ratioWidth = (outer.right - outer.left) / (inner.right - inner.left);
  var ratioHeight = (outer.bottom - outer.top) / (inner.bottom - inner.top);
  ctx.translate(outer.left, outer.top);
  ctx.scale(ratioWidth, ratioHeight);
  ctx.translate(-inner.left, -inner.top);

  //here I assume that your drawing code is a function that takes the context
  //and draws your world into it.  For performance reasons, you should
  //probably pass `inner` as an argument too; if your draw function knows what
  //portion of the world it is drawing, it can ignore things outside of that
  //region.
  drawFunction(ctx);

  //go back to the previous canvas state.
  ctx.restore();

};

If you are clever, you can use this to create multiple viewports, picture-in-pictures, etc. of different sizes and zoom in and out on stuff.

Performance

Second, as I commented in the code, you should make sure your drawing code knows what portion of your larger 'world' will be visible so that you don't do a lot of work trying to draw things that will not be visible.

The canvas transformation methods are meant for solving exactly this kind of problem. Use 'em!

*You will likely have problems if your world is so large that its coordinates cannot fit in an appropriate integer. You'll hit that problem roughly when your world exceeds billion (10^9) or a long trillion (10^18) pixels in any dimension, depending on whether the integers are 32- or 64-bit. If your world isn't measured in pixels but in 'world units', you'll run into problems when your world's total size and smallest feature scale lead to floating point inaccuracies. In that case, you will need to do extra work to keep track of things... but you'll probably still want to use the canvas transformation methods!

Answer 2

If the car should stay at the same position (relative to the canvas' position), then you should not move the car. Instead, move the background picture/track/map to the other side.

Causing your eyes to think the car moves right can be done by either moving the car to the right, or by moving the map to the left. The second option seems to be what you want, since the car won't move whereas the viewable area (i.e. the map) will.

This is a quick demo from scratch: http://jsfiddle.net/vXsqM/.

It comes down to altering the map's position the other way round:

$("body").on("keydown", function(e) {
    if(e.which === 37) pos.x += speed; // left key, so move map to the right
    if(e.which === 38) pos.y += speed;
    if(e.which === 39) pos.x -= speed;
    if(e.which === 40) pos.y -= speed;

    // make sure you can't move the map too far.
    // clamp does: if x < -250 return -250
    //             if x >    0 return    0
    //             else it's allowed, so just return x
    pos.x = clamp(pos.x, -250, 0);
    pos.y = clamp(pos.y, -250, 0);

    draw();
});

You can then draw the map with the position saved:

ctx.drawImage(img, pos.x, pos.y);

---

If you're looking for a way to actually move the car when the map cannot be moved any further (because you're driving the car close to a side of the map), then you'd have to extend the clamping and also keep track of when the car should be moved and how far: http://jsfiddle.net/vXsqM/1/.

                              // for x coordinate:
function clamp2(x, y, a, b) { // x = car x, y = map x, a = min map x, b = max map x
    return y > b ? -y : y < a ? a - y : x;
}

The position clamping then becomes a little more complex:

// calculate how much car should be moved
posCar.x = clamp2(posCar.x, posMap.x, -250, 0);
posCar.y = clamp2(posCar.y, posMap.y, -250, 0);

// also don't allow the car to be moved off the map
posCar.x = clamp(posCar.x, -100, 100);
posCar.y = clamp(posCar.y, -100, 100);

// calculate where the map should be drawn
posMapReal.x = clamp(posMap.x, -250, 0);
posMapReal.y = clamp(posMap.y, -250, 0);

// keep track of where the map virtually is, to calculate car position
posMap.x = clamp(posMap.x, -250 - 100, 0 + 100);
posMap.y = clamp(posMap.y, -250 - 100, 0 + 100);
// the 100 is because the car (circle in demo) has a radius of 25 and can
// be moved max 100 pixels to the left and right (it then hits the side)

Answer 3

My very first game was a racing game where I moved the background instead of the car and although I want to think now that I had my reasons to make it so... I just didn't know better.

There are a few techniques that you need to know to achieve this well.

1. Tiled background. You need to make your track out of smaller pieces that tiled. To To draw 10,000 x 10,000 pixels is 100MPix image usually such image will have 32bit depth (4 bytes) this will end up being 400MB in memory. Compressions like PNG, JPEG won't help you since these are made to store and transfer images. They cant be rendered to a canvas without decompressing.

2. Move the car along your track. There is nothing worst then moving the BG under the car. If you need to add more features to your game like AI cars... now they will have to move along the map and to implement car collisions you need to make some not hard but strange spacial transformations.

3. Add camera entity. The camera needs to have position and viewport size (this is the size of your canvas). The camera will make or break your game. This is the entity that will give you the sense of speed in the game... You can have a camera shake for collisions, if you have drifts if your game the camera can slide pass the desired position and center back to the car, etc. Of course the most important thing will be tracking the car. Some simple suggestions I can give you are to not put the car in dead center of the camera. put the car a little behind so you can see a bit more what's in front of your. The faster the car moves the more you should offset the camera. Also you can't just compute the position of the camera instead compute desired position and slowly per frame move the current camera position to the desired position.

4. Now when you have camera and a large tiled map, when you draw the tiles you have to subtrack the camera position. You can also compute which tiles are not visible and skip them. This technique will allow you do extend your game with even larger maps or you can stream your map where you don't have all the tiles loaded and load in advance on background (AJAX) what will be visible soon.