Sign in to follow this  
YolandaFiFI

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.