Texture filtering and Tilemaps

[englercj]

So close!

I am creating tilemaps in the way we discussed before (in #48), using a single sprite for each "tile" all which share the tileset texture as their base texture. However, there is a small issue with scaling.

Without scaling it all looks great:

Once I make the scale 2, it scales up using Linear scaling due to lines 241/242 in the WebGLRenderer. Unfortunately linear scaling does not guarantee that textures will stay the same size so we get:

If I patch those lines to use gl.NEAREST for the filter we get:

So the ideal situation here is if I could set the filter type for a texture either in the ctor or with some property so that it would use the proper filtering when rendered.

Event outside the case where I need tiles to fit together, scaling any kind of "pixel-art" game will require gl.NEAREST scaling to look half decent.

[GoodBoyDigital]

good point,
how does it look with the canvas renderer? do the same scaling issues exist?
looks like you have made some great progress on the tile engine BTW!

[englercj]

Yes the same issues exist with the canvas renderer. I've been working non stop on the rewrite 😄

[GoodBoyDigital]

Cool, do you know if there is an option for canvas to allow similar nearest scaling? Really keen on keeping the two renderers consistant..

[englercj]

Yessir, the basic idea is to do:

ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;

Where true is linear and false is nearest.

You can read more on the StackOverflow Question.

[GoodBoyDigital]

Nice! Good to know, will have to look into adding that into the renderers!

[namuol]

I've also done research on this topic with regards to various browsers: http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas

If you want to "zoom" with nearest filtering and you want true cross-browser compatibility, you'll need to have a special implementation for browsers that don't support imageSmoothingEnabled -- my engine basically does what ImpactJS does: scale all textures manually with a nearest-neighbor algorithm in JS, and then clamp sprite positions to the nearest Nth pixel.

This works great for when you aren't rotating or scaling individual sprites, but will look "incorrect" or "fake" otherwise, so I would recommend only using this as a last-resort when the browser doesn't support imageSmoothingEnabled.

Here's code to detect if imageSmoothingEnabled is available:

var imgSmoothingEnabled = function() {
  var canvas, ctx;
  canvas = document.createElement('canvas');
  ctx = canvas.getContext('2d');
  return ctx.imageSmoothingEnabled != null ||
         ctx.webkitImageSmoothingEnabled != null ||
         ctx.mozImageSmoothingEnabled != null ||
         ctx.oImageSmoothingEnabled != null;
};

[jdarling]

@englercj any chance of you sharing some of that code on how to do tilemaps? I've just started looking at Pixi and this is one of my first requirements is a basic tilemap that I can generate randomly. I have code to build out random tilemaps based on perlin noise and something like: http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/

Now I just need to take the output and link it to a proper display. I have looked at creating it myself, but for the life of me I can't figure out how to with the exception that I need to start with DisplayObjectContainer and DisplayObjects. Since I can't find where the render actually happens I am not sure what to overload to get the tiles (sprites) displayed.

[englercj]

Grapefruit is 100% open source, you can find it here: https://github.com/grapefruitjs/grapefruit

The code for Tile maps imported from the Tiled Editor can be found here: https://github.com/grapefruitjs/grapefruit/blob/master/src/map/tiled/TiledLayer.js

hope this helps.

---

@GoodBoyDigital Any update on custom filters for textures to fix this issue?

[englercj]

Added PR #167 to fix this issue.

[englercj]

landed

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.