- Home /
WebGL build makes background (sprite) look odd.
Is the original image; however, when I build my game for WebGL it ends up looking like this:
Notice around the edge how the colors get all weird? How do I fix this? EDIT: it sometimes appears messed up in the editor. If I apply new import settings it looks good again though.
Answer by BeonoCactus · Apr 29, 2020 at 11:18 AM
@HittmanA This issue has to do with compression when importing, you have to find a way to get your final product without compressing your files.
Answer by Bunny83 · Apr 29, 2020 at 12:44 AM
Well first thing I should mention is that your original image has a resolution of 256x164 and you scale it up to 2880x1678. You seem to use point filtering for the image which of course will give you several issues. First of all the aspect ratio of the original image is about 1.561 while your actual resolution has 1.716. So the image is slightly stretched horizontally. Though the main issue with point filtering is you should never scale it to a size that isn't a whole multiple of the original. If you do you get strange distortions because for example you can not fit 3 pixels into 7 pixels evenly
One solution is to not use point filtering but bilinear filtering. Of course you won't see individual pixels in that case and it might look a bit blurry, however the image should look more like the original. If you really want to use point filtering you either have to set your resolution to an exact multiple of your background image, or change the background image resultion to "better" fit the actual screen resolutions. Maybe you need several versions of that image in that case.
I'm not an artist but if you want actual pixel art I highly recommend you watch this video