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

[YolandaFiFI]

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

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

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

 

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

[samme]

First just add your assets to the game without scaling them, and don't scale the game either (with SHOW_ALL, etc.).