適用於HTML5帆布游戲的Tileset

Question

我正在嘗試用HTML5畫布制作一個游戲，但我沒有上傳大量圖片，而只想上傳一張包含所有圖塊的圖片。 問題是，我不知道如何只顯示圖像的一部分。 基本上我想做谷歌用這張圖片做的事情： http ： //www.google.com/images/srpr/nav_logo27.png，除了固定的高度/寬度圖塊。 有人可以向我解釋如何做到這一點？ 另外，如果它在畫布上與沒有畫布的常規html頁面不同，我將如何在畫布中進行操作？

Answer 1

您可以使用drawImage的切片參數

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• sx ， sy ：要切片的零件的左和上偏移量
• sWidth ， sHeight ：要切片的零件尺寸
• dx ， dy ：要渲染的畫布上的圖像的左上角偏移量
• dWidth ， dHeight ：畫布上的圖像尺寸

有關更多信息，請參閱 ： 使用圖像 - 切片 （MDC）

Answer 2

看看SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js那里的工作是基於從單張圖片中繪制精靈的時刻的偏移量。

Answer 3

這是我使用GWT的方式： http ： //code.google.com/p/gwt-examples/wiki/gwt_hmtl5