Spritesheet frames trimming

[zxlostsoul]

I use this image as spritesheet. Second frame is completely empty (transparent). I crop image into frames:

frame=new PIXI.Texture(texture.baseTexture, new PIXI.Rectangle(x, y, frame_width, frame_height)));

But when I try to draw second frame, I see a garbage from another frames:

Looks like pixels from another frames has been used when sprites are resizing. Tell me please, how to fix it?

[ivan.popelyshev]

is your sprite coordinates fractional?

[zxlostsoul]

11 hours ago, ivan.popelyshev said:

is your sprite coordinates fractional?

No, it is not. I write a demo to show my problem: http://zxlostsoul.4ky.ru/pixi/

Full code:

window.onload = function() {
	var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
	document.body.appendChild(renderer.view);
	var stage = new PIXI.Container();

	var sprite = PIXI.Sprite.fromImage('./img/test.png');
	var texture=new PIXI.Texture(sprite.texture, new PIXI.Rectangle(24, 0, 24, 48));
	var frame=new PIXI.Sprite(texture);

	frame.position.set(230,264);
	frame.scale.x=4;
	frame.scale.y=4;
	stage.addChild(frame);

	animate();
	function animate() {
		renderer.render(stage);
		requestAnimationFrame(animate);
	}
}

 

[ivan.popelyshev]

You have to add transparent border so linear filtering wont affect your spritesheet. TexturePacker has that option when it generates atlas from multiple files. Also, if you want to use mip-mapping , border must be larger.

[ivan.popelyshev]

Also, if you are working with tiles, you can use https://github.com/pixijs/pixi-tilemap , just dont use "true" parameter, your sprites arent squares.