Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

My web game pixel-art assets look distorted in some browsers

A topic by FelixTemari created Aug 01, 2023 Views: 243 Replies: 1
Viewing posts 1 to 2

Hello, the question isn't directly connected to itchio, but I hope it's fine to seek general advice and support here.
So for my game I'm using small 16x16 pixel art PNGs. I'm rendering them inside html canvas, and I have image smoothing disabled so that these small pictures can be upscaled and still look crisp and pixel-arty. While I was developing and testing it inside chromium web browser all looked and worked fine. After I posted the game on itchio I noticed that my assets appear broken and distorted. At first I thought to blame itchio, but it turned out that it's Firefox (LibreWolf in my case) that renders it differently.

Normal asset (chromium):

Broken asset (firefox):

I decided to also check using Brave (also chromium engine) on both mobile and desktop. Desktop looks just fine while mobile is broken.

So, has anyone else had this issue? And if so, what can I do apart from using higher resolution source assets?

(+1)

I'm not an html expert, but from what I understand, the problem is generated by the up-scaling that the browser does from the canvas resolution to the display resolution and always uses a filter that is different from the image smoothing that is used to render inside the canvas.

I leave you a couple of links that may be useful to you.

https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.