[英]How Can I Prevent Texture Bleeding When Using drawImage To Draw Multiple Images From A Tile Sheet, Sprite Sheet, Or Texture Atlas?
[英]How to get images from a texture atlas with Javascript?
一个包含精灵的精灵图片对象...
var spritesheet = new Image(); spritesheet.src ="foo.png";
我希望能够从该spritesheet变量中获得具有所需x,y,宽度和高度的子图像。 然后分配一个变量,该变量是Spritesheet的子图像。
我怎么做?
将div
与backgroundPosition一起使用使此操作变得容易,因为它将为我们自动剪辑 ,而不必使用overflow
。
例如,这是流行的Cookie Clicker空闲游戏的纹理图集 。
使用x和y的负偏移量,我们可以从纹理图集中选择一个子精灵:
// 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>
这是一种方法:
创建一个内存画布以从Spritesheet裁剪子精灵像素,并在该画布上绘制这些裁剪的像素
从画布的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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.