Jump to content

Antialiasing in pixi-tilemap AND pixi-tilemap layer types


Recommended Posts

Hi! I am currently trying out pixi-tilemap. All works well except that CompositeRectTileLayer is making everything blurry when I had set the SCALE.MODE to NEAREST (my sprites are not blurry, only the tile layer). I then foolishly tried RectTileLayer and it isn't antialiasing (great!), but I cannot get addFrame to actually insert the right texture.

My first question is, what is the difference between CompositeRectTileLayer and RectTileLayer? And what about the rest of the classes like GraphicLayer? There is no documentation anywhere on the web on in the src folder.

My second question is, how to disable antialiasing in CompositeRectTileLayer? (or alternatively, why RectTileLayer only accepts 1 texture)


I am using the pixi.js v4 version of pixi-tilemap. I have included the way I am currently adding textures to both layer:

var tiles = new PIXI.tilemap.CompositeRectTileLayer(0, [texture1, texture2], true);
this.tiles.addFrame(0, x1, y1);
this.tiles.addFrame(1, x2, y2);

//this works for CompositeRectTileLayer, but doesn't work for RectTileLayer...
//RectTileLayer displays texture1 on both x1,y1 x2,y2

I have attached the CompositeRectTileLayer vs RectTileLayer effect.



Link to comment
Share on other sites

First, in terms of WebGL - that's not AA, that's texture filtering.

pixi-tilemap was for RMMV and has a few architectural  quirks because of it. GraphicLayer was made to make shadows , but then I deprecated it because extra "if" in tile shader was enough.

Composite is just an array of layers , and because of each layer handlers only a certain number of BaseTexture's, you might need several of them if you exceed that limit - though ordering of tiles in that case will depend on textures.

Where to set ScaleMode depends on your global tilemap settings. In v4 I used multiple renderTexture's and merged several textures into them - that setting is in constant: https://github.com/pixijs/pixi-tilemap/blob/master/src/Constant.ts#L9

In v5 by default it uses original texture, and you have to specify scaleMode in your atlas (baseTexture)

Link to comment
Share on other sites

Ok I have found a solution. There is a SCALE_MODES in pixi-tilemap.js source which is set to linear, and I set it to nearest to get the desired result.

I also looked at the code (a bit), and compositeTileRectLayer is simply a few TileRectLayer, and each texture should be a tilemap, instead of a single tile.

@ivan.popelyshev Thank you for your quick reply! I was writing my answer before you quickly replied! I will leave my own explanation if someone else has the same problem as me in the future! Also I think there might be an error in the TileRectLayer class where textureIndex = points[i + 8], where I think it should be i + 9.

RectTileLayer.prototype.renderCanvasCore = function (renderer) {
            if (this.textures.length === 0)
            var points = this.pointsBuf;
            renderer.context.fillStyle = '#000000';
            for (var i = 0, n = points.length; i < n; i += pixi_tilemap.POINT_STRUCT_SIZE) {
                var x1 = points[i], y1 = points[i + 1];
                var x2 = points[i + 2], y2 = points[i + 3];
                var w = points[i + 4];
                var h = points[i + 5];
                var rotate = points[i + 6];
                x1 += points[i + 7] * renderer.plugins.tilemap.tileAnim[0];
                y1 += points[i + 8] * renderer.plugins.tilemap.tileAnim[1];
                var textureIndex = points[i + 8];
                if (textureIndex >= 0) {
                    renderer.context.drawImage(this.textures[textureIndex].baseTexture.source, x1, y1, w, h, x2, y2, w, h);
                else {
                    renderer.context.globalAlpha = 0.5;
                    renderer.context.fillRect(x2, y2, w, h);
                    renderer.context.globalAlpha = 1;

I have another question but I will ask in another thread to make it easier for people to google.

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.

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.


  • Recently Browsing   0 members

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