[英]Tileset for HTML5 canvas game
I'm trying to make a game in HTML5 canvas, but instead of uploading a ton of images I want to just upload one image that has all of the tiles on it. 我正在尝试用HTML5画布制作一个游戏,但我没有上传大量图片,而只想上传一张包含所有图块的图片。 The problem is, I don't know how to make only one part of the image show up.
问题是,我不知道如何只显示图像的一部分。 Basically I want to do what Google does with this image: http://www.google.com/images/srpr/nav_logo27.png except with fixed height/width tiles.
基本上我想做谷歌用这张图片做的事情: http : //www.google.com/images/srpr/nav_logo27.png,除了固定的高度/宽度图块。 Can someone explain to me how to do this?
有人可以向我解释如何做到这一点? Also, if it's different in canvas than in a regular html page without canvas, how would I do it in canvas?
另外,如果它在画布上与没有画布的常规html页面不同,我将如何在画布中进行操作?
You can use the slicing parameters of drawImage
您可以使用
drawImage
的切片参数
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
sx
, sy
: left and top offset of the part to be sliced sx
, sy
:要切片的零件的左和上偏移量 sWidth
, sHeight
: dimensions of the part to be sliced sWidth
, sHeight
:要切片的零件尺寸 dx
, dy
: left and top offset for the image on the canvas to be rendered at dx
, dy
:要渲染的画布上的图像的左上角偏移量 dWidth
, dHeight
: image dimensions on the canvas dWidth
, dHeight
:画布上的图像尺寸 More info at: Using images - Slicing (MDC) 有关更多信息,请参阅 : 使用图像 - 切片 (MDC)
看看SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js那里的工作是基于从单张图片中绘制精灵的时刻的偏移量。
这是我使用GWT的方式: http : //code.google.com/p/gwt-examples/wiki/gwt_hmtl5
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.