0

I am trying to make a side scrolling game in html5. I am wondering how i can have lets say a 500px by 500px viewing are but the background is about 500px high by 2000px wide. When the viewing area scrolls more of the background appears but the character stays in the middle similar to how the pokemon games are.

Anzwur
  • 603
  • 1
  • 6
  • 10
  • In the future, it is helpful to show what you've already tried or at least what you've considered. Additionally, you might consider asking your question more directly, e.g., "How can I create a 500px by 500px viewing area where the background is 500px by 2000px?" – adamdunson Mar 01 '13 at 03:51

1 Answers1

2

The context.drawImage function has a whole bunch of arguments you can give it. You want to play with the source (image) x, y, width, height and destination (screen) x, y, width, height. Here is the argument list for drawImage.

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

So the following will draw the image starting 400px from the left to 900px from the left.

var w = 500;
var h = 500;
var scrollPos = 400;
drawImage(image, scrollPos, 0, w, h, 0, 0, w, h);

Further reading

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166