Simple question on why do we need "spacing between frames" in spritesheet

cocos2d-x C++
#1

I manually aligned each frame for all animation sets into a spritesheet, says, I have 4 animations each with 4 frames. Each frame is 32x32 pixels.
My spritesheet ends up being exactly 128x128.

I read each frame in the code similar to the following …

for(var i=0; i<4; i++) { frames.push(cc.SpriteFrame.create(res_zombie, cc.rect(i*32,0,32,32))); }

And it goes the same for reading other animations.

The problem I found is that, whenever I switch to play another animation from certain animation. It seems to include the upper line of pixels from upper animation.
For example, I play a 2nd row of animation, the result in screen it also includes the “unwanted” line of pixels in horizontal from the 1st row of animation.
I guess it’s about “pixel bleeding” because I don’t have any “spacing pixels” between each frame.

I want to know why do we need it as I think the reading pixel should be correct. I do checking at the spritesheet and each frame align correctly without any unwanted pixel from another.
Anyway I solved the problem by using zwoptex tool with 2 pixel for spacing, the result goes well without unwanted line of pixel anymore.

Please help me clarify and get me a clearer point on this.

#2

It’s from Texture Filtering. Ex. Bilinear filtering has to sampling texels
around the point when do texture mapping. So this is why sometimes you seen pixels “bleed”
from edge of the sprites especially when the sprite is scaled and rotated.
And when you draw sprite at position that not the exact pixel position (ex position = [10.2, 20.33] not [10, 20])
so it need to sampling texture.

Hope I make it clears :slight_smile:

#3

Wow, I got that, totally not think about that kind of stuff.
Thanks much Nuttavut.