Jump to content

Sprites - what is the secret to a sharp sprite for Canvas/WebGL?


YolandaFiFI
 Share

Recommended Posts

I'm at my wit's end. I've tried across several game engines and drawing programs now, tried every little setting and have really read everything there is to read.

I just cannot get a sharp appearance on any asset as soon as they are rendered in an HTML Canvas or WebGL. In desktop applications, they look fine.

 

Here, for example, is a good asset - it's sharp and clear and as it as a PNG, it should scale down nicely (I need it about 25% of this size):

kryds.png.a5b6fc98b3d40aaec367de3567b9408b.png


As soon as I load it as a sprite via Phaser, I get a result like this (don't mind the money-man):

5ac7703d09638_ScreenShot2018-04-06at15_03_00.thumb.png.63bb4dfd10a673c276d374500e24fb53.png

It's blurry and it's even worse when scaled down (here scaled to 0.1x, 0.1y):

5ac770a7e5b88_ScreenShot2018-04-06at15_05_28.png.544c190061a272e87ba8f9579b0b839f.png

 

I'm on an iMac, so maybe it has to do with the retina display, but I am getting similar results on lower quality monitors as well. What am I doing wrong? When I load other assets in, such as the ones used in the Phaser 2 tutorial, they look crystal clear. I feel like there's something really simple that I am missing. :-(

 

My old (finished) build was in Unity 2D, and I was having the exact same issue. This is why I swapped to Phaser instead of using the Unity WebGL build. I've tested on both engines, and some assets render perfectly (particularly, pixel art renders perfectly. Other, more vector-like assets render poorly). 

Really hope there's somebody here who can help. :-(

Yolanda

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...