HTML5 Canvas：在EaselJS中使用箭头键移动/平移世界

Question

After a year of studying and experimenting through trial-and-error, I feel that I am starting to understand JavaScript a bit more. So, now, I wanna try my hand at writing a simple 2D platform game (think Super Mario World or Sonic the Hedgehog). For this, I'll be employing the EaselJS library.

I am trying to figure out how I can move/pan the 'world' within a canvas by use of the left and right arrow keys. I know how I can run a function upon a keydown of the arrow key, but I'm not too sure how I should approach the moving/panning.

Should I adjust the position/coordinates of every single thing within the canvas when a key is pressed? Or should I perhaps put everything in a container and move the position/coordinates of the container?

I'll appreciate anything that nudges me into the right direction. Tyvm :)

Updated with answer The chosen answer below confirmed that I indeed had to put everything in a container so that I can set the position of that container. This is the code I drafted, and it works.

// Canvas
var stage = new createjs.Stage('game');
createjs.Ticker.addEventListener('tick', tick);
function tick(event) {
    stage.update();
}

// Cave
var cave = new createjs.Bitmap('img/cave.png');
cave.x = cave.y = 0;

// World
// Pans World if the left or right arrow keys are pressed
var world = new createjs.Container();
world.x = 0;
world.y = 0;
world.addChild(cave);
stage.addChild(world);
$(window).keydown(function(e){
    switch (e.which || e.keyCode){
        case 39: // right arrow key
            world.regX += 10;
            break;
        case 37: // left arrow key
            world.regX -= 10;
            break;
    }
});

I tried updating world.x as well as world.regX . Somehow, world.regX seems to go smoother.

Answer 1

I think the best way is to put all display objects which will be scrolled into a scrollableObjectContainer (perhaps you have static elements like lifebar).

So when you move, just update scrollableObjectContainer.regX.

You can use tweenJS for a smoother scroll.

Answer 2

Just an idea... but take a look at the canvas translate function and use it at the beginning of each redraw to set the context from which to draw everything else.

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Answer 3

Usually I would agree with EaselJS for most canvas related projects, however the type of game you want to build would be better suited for melonJS.

Check it out http://melonjs.org

Answer 4

Here is a sample of 2d top down scroll and rotation following a player.

https://jsfiddle.net/StaticDelvar/bt9ntuL5/

But it boils down to:

world.regX = player.x;
world.regY = player.y;
world.rotation = -player.rotation;

Then everything including the player goes into the World container and will be rotated as the player moves. GUI must be after world so it draws on top of it.

• Stage
  • World
    • Objects
    • Player
  • Gui