gaps between sprite tiles when scaling DisplayObjectContainer

[Sharpleaf]

I have a DisplayObjectContainer that has a map made out of individual pats of a texture atlas. When I scale the DOC to "zoom" in and out of the map, at certain points the tiles sprites will have a small gap between them. Oddly enough, it only seems to be horizontal gaps and never vertical ones.

Does anyone know why this could be happening?

 

Also of note is that I never noticed this happening when the sprite textures came from individual files instead of a texture atlas.

 

Thank you.

 

EDIT: example 

http://i.imgur.com/1z56tjL.png

[agamemnus]

On the face of it, this looks like the result of the scaling method. When an image is scaled using the bicubic method, the pixels at the edges will have nothing to blend with. Depending on the exact implementation, they can either blend with themselves (preferred) or with transparency -- causing a visible shearing on the edges. You might want to change the scaling to nearest-neighbor.

 

It might also be a problem with your image file not being 100% opaque at the edges. This can happen if (for example) you rescale an image up or down in Photoshop and it has layers. That creates some transparency on the edges.

[Sharpleaf]

On the face of it, this looks like the result of the scaling method. When an image is scaled using the bicubic method, the pixels at the edges will have nothing to blend with. Depending on the exact implementation, they can either blend with themselves (preferred) or with transparency -- causing a visible shearing on the edges. You might want to change the scaling to nearest-neighbor.

I'm not scaling the images, I'm scaling the DisplayObjectContainer. If the same problem arises, then how would I go about changing the scaling method in pixi? The only thing I know to do for scaling is something like this

 

map1.scale.x = .9;map1.scale.y = .9;

It might also be a problem with your image file not being 100% opaque at the edges. This can happen if (for example) you rescale an image up or down in Photoshop and it has layers. That creates some transparency on the edges.

The texture atlas is created using Code and Web's TexturePacker if that help narrow the problem down at all.

Thanks!

[xerver]

If you scale a container, everything within it is scaled (including the images). agamemnus is right, by default we use linear scaling for webgl and bicubic scaling for canvas. To change this you can change the scaleMode of the texture for the images you are talking about, or to change everything change the default scale mode.

 

http://www.goodboydigital.com/pixijs/docs/classes/BaseTexture.html#property_scaleMode

[Sharpleaf]

Hey thanks,

Can you more specifically direct me on how to change the scale mode?

Something's not clicking and I can't get it to work.

Also, what are the scale mode available?

For instance, I try PIXI.Texture.SCALE_MODE.DEFAULT = PIXI.Texture.SCALE_MODE.NEAREST; and I get a Uncaught TypeError: Cannot read property 'NEAREST' of undefined

also, I noticed that sometimes those "gaps" contain pixels from the frames neighbor in the atlas.

[Sharpleaf]

Instead of PIXI.Texture.SCALE_MODE.DEFAULT = PIXI.Texture.SCALE_MODE.NEAREST; I found a post where someone mentioned using this: PIXI.scaleModes.DEFAULT = 1;

That seems to work except for occasional instances where I'd briefly see a line. I tried setting to 1 to a 2 and to a 3 and to a 4 to see if it would make a difference, but it doesn not. Only 0 and 1 seem to mean something. Is this correct?

Also, wouldn't setting the scaleMode to linear be a performance boost over bicubic?

thanks

[agamemnus]

Performance should be specific to the graphics chip if you are using webgl mode.

 

> "That seems to work except for occasional instances where I'd briefly see a line."

I (think!) it is just because of rounding...

 

P.S.: in the documentation, it would be nice to see the options. For example, what are the different scale modes? (so, the same question that Sharpleaf has) For this particular problem, if you don't set it to nearest-neighbor, it really needs to be "bicubic, except at the edges" .. I wonder if there is such a thing.

[jeffsim]

I ran into this as well; the solution in my case was to ensure that the position of my scaled Stage wasn't a float; e.g.:

 

        this.stage.position.x = Math.floor(this.stage.position.x);

        this.stage.position.y = Math.floor(this.stage.position.y);

        this.pixiRenderer.render(this.stage);

 

Hope that helps someone else!

 

Cheers,

Jeff