Sign in to follow this  
V0RT4C

Antialiasing after scaling

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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:

 

kot2 (1).gif

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

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:

279520454_Screenshot2019-12-04at12_22_48.png.3c06161324e937ff3c8549912f97f4b4.png

With scale set to 2:

686130095_Screenshot2019-12-04at12_24_22.png.376a1b3f925e55c8bd7dfd9e8189e0f6.png

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 :)

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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? :)

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.