如何使用 Javascript 从纹理图集中获取图像？

Question

包含 sprites 的 spritesheet 图像对象...

var spritesheet = new Image(); spritesheet.src ="foo.png";

我希望能够从该 spritesheet 变量中获取具有所需 x、y、宽度和高度的子图像。然后分配一个变量，它是 spritesheet 的子图像。

我该怎么做？

Answer 1

这是一种方法：

在内存中创建一个 canvas 以从 spritesheet 中剪裁子画面像素并在 canvas
从 canvas 的数据 URL 创建一个新的子精灵图像。

示例代码（未测试——可能需要调整）：

var spritesheet = new Image();
spritesheet.onload=function(){

    // specify desired x,y,width,height
    // to be clipped from the spritesheet
    var x=0; 
    var y=0;
    var w=10;
    var h=10;

    // create an in-memory canvas
    var canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');

    // size the canvas to the desired sub-sprite size
    canvas.width=w;
    canvas.height=h;

    // clip the sub-sprite from x,y,w,h on the spritesheet image
    // and draw the clipped sub-sprite on the canvas at 0,0
    ctx.drawImage(spritesheet,  x,y,w,h,  0,0,w,y);

    // convert the canvas to an image
    var subsprite=new Image();
    subsprite.onload=function(){ doCallback(subsprite); };
    subsprite.src=canvas.toDataURL();    

}
spritesheet.src ="foo.png";


function doCallback(img){
    // do something with the new subsprite image
}

Answer 2

将 div 与 backgroundPosition 一起使用会使这变得很容易，因为它将 自动剪辑 为我们提供，而无需使用 overflow。

例如，这是流行的 Cookie Clicker 闲置游戏中的 texture atlas。

对 x 和 y 使用 negative 偏移量，我们可以 select 来自纹理图集的子精灵：

// Inputs -- change this based on your art
var tw  = 48; // Texture Atlas Tile Width (pixels)
var th  = 48; // Texture Atlas Tile Height (pixels)
var tx  =  3; // tile index x (relative) (column)
var ty  =  2; // tile index y (relative) (row)
var src = 'http://orteil.dashnet.org/cookieclicker/img/icons.png';

// Calculations -- common code to sub-image of texture atlas
var div = document.getElementById('clip');
var x   = (tx*tw); // tile offset x position (absolute)
var y   = (ty*th); // tile offset y position (absolute)
div.style.width              = tw + 'px';
div.style.height             = th + 'px';
div.style.backgroundImage    = "url('" + src + "')";
div.style.backgroundPosition = '-' + x + 'px -' + y + 'px';

// You don't need the remaining parts. They are only to
// show the sub-sprite in relation to the texture atlas
div.style.border             = "1px solid blue"; // only for demo purposes

// highlight where in the original texture the sub sprite is

var rect    = document.getElementById('sprites').parentNode.getBoundingClientRect();
var hi      = document.getElementById('highlight');
hi.style.zIndex   = 999; // force to be on top
hi.style.position = "absolute";
hi.style.width    = tw + 'px';
hi.style.height   = th + 'px';
hi.style.left     = (rect.left     + x) + 'px';
hi.style.top      = (rect.top + th + y) + 'px'; // skip sub-sprite height
hi.style.border   = '1px solid red';

<div id="clip"></div>
<img id="sprites" src="http://orteil.dashnet.org/cookieclicker/img/icons.png">
<div id="highlight"></div>

如何使用 Javascript 从纹理图集中获取图像？

How to get images from a texture atlas with Javascript?

javascript

html5-canvas