Tip: Use PIXI.SCALE_MODES.NEAREST for tiles and sprites, to prevent gaps and imperfections

[kaan]

So ever since I started game programming with PIXI, a soft issue of mine was gaps between tiles and upper shadows on sprite's (the shadow of an upper sprite frame showing up in the lower sprite frame)

This happened when I scaled the map/stage to 2/3 - my assumption was that, since I scale Integer and not Float, like 1.5 or sth, the scaling should have been perfect

But turns out it doesn't have to be, but with PIXI.SCALE_MODES.NEAREST it is perfect!

This is how I currently change the mode: PIXI.utils.BaseTextureCache[file].scaleMode=PIXI.SCALE_MODES.NEAREST - works, but it might not be the intended way of doing it

[ivan.popelyshev]

1. put it before you create the loader: PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

2. https://github.com/pixijs/pixi-tilemap deals with it differently. If your tiles are squares or 2x1 rectangles, it will clamp texture just fine.

3. There's a new lib for Z-ordering tiles and other stuff: https://github.com/pixijs/pixi-display It helps with shadows.

[kaan]

39 minutes ago, ivan.popelyshev said:

1. put it before you create the loader: PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

2. https://github.com/pixijs/pixi-tilemap deals with it differently. If your tiles are squares or 2x1 rectangles, it will clamp texture just fine.

3. There's a new lib for Z-ordering tiles and other stuff: https://github.com/pixijs/pixi-display It helps with shadows.

Thanks a lot for the suggestions

http://pixijs.github.io/examples/index.html?s=display&f=zorder.js&title=Z-order&plugins=pixi-display&v=dev - I should play around with pixi-display some time, I still didn't wrap my head around it's capabilities - one part of me still want to just manually handle layering, mainly because I'm worried the plugin might create an overhead for a trivial use case

[ivan.popelyshev]

Plugin was optimized a lot. Basically, it sorts ONLY the elements that have some displayGroup, their children will just "follow" them. Even if there's parent.displayGroup and child.displayGroup and 999 children without it, sort() will take only array of 2 elements, while 999 will be arranged automatically. Limitations are the same as if you use manual container ordering - the algorithm wont pass through filters and masks.

Also, if there are 1000 elements with same DisplayGroup and that DisplayGroup sorting is not enabled, sort() wont be called for them.

I already have ideas of new optimizations that will speed it up if most of elements are static, that way it will be faster even than manual ordering for some cases.

[kaan]

Thanks for the info

After sleeping on the idea, pixi-display seems like the way to go, my use case is actually very basic, yet still, it would be very hard to implement without pixi-display

Developing a 2d mmorpg, a caste door has an arc, so in order for a character to pass through that door, the characters need to have a lower .zOrder past a certain .y -- I was going to remove the door's arc, make it an opening instead of a door, to keep things one dimensional, yet doing it proper with pixi-display seems worthy of the trial