Jump to content

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


kaan
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...