Как получить изображения из атласа текстуры с помощью Javascript?

Question

spritesheet изображение объекта, который содержит спрайты ...

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

Я хотел бы быть в состоянии получить суб изображение из этой spritesheet переменной с желаемой х, у, ширину и высоту. А затем назначьте переменную, являющуюся суб-изображением спрайта.

Как это сделать?

Answer 1

Вот один из способов:

• Создание холста в памяти подрезать subsprite пикселей от spritesheet и сделать эти обрезанные пиксели на этом холсте

• Создать новый subsprite изображение от холста dataURL.

Пример кода (не тестировалось - может понадобиться tweeking):

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.

Например, texture atlas от популярного Cookie Clicker простоя.

Использование отрицательное смещение х и у можно выбрать суб-спрайт из атласе текстуры:

// 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>