Antialiasing after scaling

[V0RT4C]

Hello,

I'm having troubles getting antialiasing to work after I've scaled my game.

Antialiasing is working great when I dont scale the game but I want my users to be able to

scale the game to any size. Is there any workaround for this or am I missing something?
Im using Pixi.js V5

[ivan.popelyshev]

how do you scale the game?

[V0RT4C]

Right now Im simply trying to do it manually like this:

let app = new PIXI.Application({ width: 800, height: 600, antialias: true });

app.stage.scale.set(2);

[ivan.popelyshev]

It should work. Please give more information.

[V0RT4C]

Im using Pixi Version 5.2.

I first create a Pixi application with Pixi.Application({ width: 800, height: 600, antialias: true})

I then generate my textures fromBuffer. The buffers consist of Uint8Arrays filled with RGBA values.

I first create a basetexture from this, then I create a texture from the basetexture and add them to the TextureCache with Pixi.Texture.addToCache

When this is done I simply create sprites from the textures in the texturecache. Each texture and thus also sprite has a size of 32x32 pixels.

Without scaling I then add these to the stage with app.stage.addChild.

When doing this, antialiasing works just fine, however as soon as i try to scale the stage with app.stage.scale.set no antialiasing is being done. Oh and Im also using LINEAR scalemode.

 

[ivan.popelyshev]

I think you mistake antialiasing with texture filtering. Antialiasing affects edges of geometry, and if you have a tilemap you usually don't need antialiasing at all, its more for triangles and circles.

For texture filtering, there's also a matter of mipmapping, if you do downscaling then you need mipmaps, if upscaling (probably your case) - the only setting is whether you use LINEAR or NEAREST scaleMode in that texture. If you set it globally but after you create textures - it wont affect them, global settings are assigned on texture creation.

Now I need even more information

AA vs texture filtering:

 

Edited December 4, 2019 by ivan.popelyshev

[V0RT4C]

Yeah you are probably right, I don't really understand how antialiasing works or how it is applied.

Yes, I do only need upscaling no downscaling. I have tried setting the global scale mode both before and after the creation of the textures, the result is still always the same. I do this with this code :

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;

So are you saying I cant get the antialias effect with textures after I've scaled the game?

Consider these two images:

Without scale:

With scale set to 2:

There's a big difference and I would really like to get the first result also after I've scaled the game. If its done with antialiasing or any other way does not really matter.

Thank you for your help

[ivan.popelyshev]

OK, so its actually texture filtering problem. Are you sure that you are upscaling. If your sprite is scales 0.25 and then you apply 2 on parent - the result is scale 0.5. It looks like mipmapping problem. Please share minimal demo. Please put the image that you want to achieve in the same demo so i can see it nearby and not in another page.

I refrain from word "antialiasing" in that case, because all "antialias" settings in webgl are about edges, not textures. If I use that word - more people will set "antialias:true" then forget that they set it and ask me why is their game slow. It only creates more chaos and I have to explain the same thing for hundreds times

Edited December 4, 2019 by ivan.popelyshev

[V0RT4C]

Yes I'm pretty sure that im upscaling. But I am rather new to Pixi so I might be misunderstanding why this is not working as I had expected.

Ok so a texture filtering problem, I will have to research that then.

Well I created a small demo here: http://plnkr.co/edit/gh6dlrUL92YSBfZC4RHv

I've included one of the textures. On one side untouched and raw 32x32, while on the other side upscaled by a factor of 2.

If you zoom in you can clearly see that the edges on the unscaled version are much "smoother" looking than on the upscaled version.

I wish to achieve the same kind of "smooth" feel on the upscaled version, if it's even possible, what do you think?