HTML5 Canvas: Di chuyển/panning thế giới bằng các phím mũi tên trong EaselJS

Question

Sau một năm nghiên cứu và thử nghiệm thông qua thử và lỗi, tôi cảm thấy rằng tôi bắt đầu hiểu JavaScript nhiều hơn một chút. Vì vậy, bây giờ, tôi muốn thử tay của tôi bằng văn bản một trò chơi nền tảng 2D đơn giản (nghĩ Super Mario World hoặc Sonic the Hedgehog). Đối với điều này, tôi sẽ sử dụng thư viện EaselJS.

Tôi đang cố gắng tìm ra cách tôi có thể di chuyển/xoay 'thế giới' trong một khung bằng cách sử dụng các phím mũi tên trái và phải. Tôi biết làm thế nào tôi có thể chạy một chức năng trên keydown của phím mũi tên, nhưng tôi không quá chắc chắn làm thế nào tôi nên tiếp cận di chuyển/panning.

Tôi có nên điều chỉnh vị trí/tọa độ của mỗi điều duy nhất trong canvas khi một phím được nhấn? Hoặc tôi có nên đặt tất cả mọi thứ trong một thùng chứa và di chuyển vị trí/tọa độ của vùng chứa không?

Tôi sẽ đánh giá cao mọi thứ thúc đẩy tôi đi đúng hướng. Tyvm :)

cập nhật với câu trả lời The chosen answer below xác nhận rằng tôi thực sự phải chịu đựng tất cả mọi thứ trong một container vì vậy mà tôi có thể thiết lập vị trí của container đó. Đây là mã tôi soạn thảo, và nó hoạt động.

// 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; 
    } 
}); 

Tôi đã thử cập nhật world.x cũng như world.regX. Bằng cách nào đó, world.regX dường như mượt mà hơn.

Answer 1

Tôi nghĩ rằng cách tốt nhất là để đặt tất cả các đối tượng hiển thị sẽ được cuộn vào một scrollableObjectContainer (có lẽ bạn có những yếu tố tĩnh như lifebar).

Vì vậy, khi bạn di chuyển, chỉ cần cập nhật scrollableObjectContainer.regX.

Bạn có thể sử dụng tweenJS để cuộn mượt mà hơn.

Answer 2

Chỉ cần một ý tưởng ... nhưng hãy xem chức năng dịch canvas và sử dụng nó ở đầu mỗi lần vẽ lại để đặt ngữ cảnh từ đó vẽ mọi thứ khác.

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

Answer 3

Thường thì tôi sẽ đồng ý với EaselJS đối với hầu hết các dự án liên quan đến vải, tuy nhiên các loại trò chơi mà bạn muốn xây dựng sẽ phù hợp hơn cho melonJS.

Check it out http://melonjs.org

Answer 4

Đây là mẫu cuộn và cuộn xuống trên cùng 2d theo trình phát.

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

Nhưng nó nắm tới:

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

Sau đó, tất cả mọi thứ bao gồm các cầu thủ đi vào container thế giới và sẽ được luân chuyển như di chuyển người chơi. GUI phải sau thế giới để nó dựa trên nó.

• Stage
  • Thế giới
    • Objects
    • chơi
  • Gui