Antialiasing in pixi-tilemap AND pixi-tilemap layer types

[Zeto]

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.

[ivan.popelyshev]

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)

[Zeto]

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)
                return;
            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.