espace

resolution svg ugly ...Why ?

Recommended Posts

hi,

on my inkskape i have an svg image (500 pixel/500pixel) ---> (see my first image)

when i incorporate this image on my game the resolution is ugly ---> (see my second image)

whenever my resolution on my game is correct :

var game = new Phaser.Game(640,960, Phaser.AUTO, "game");

Did you know what happens ?

02.png

01.png

Share this post


Link to post
Share on other sites

Phaser doesn't support SVG, only rasters.

When you load an SVG file in as an Image (which is what you've done here) it gets rasterised on load. Then the raster version is used for your Sprites, etc. Hence the jaggies.

The rasterisation takes place automatically, it isn't something Phaser does (the browser does it). I'd suggest seeing what happens if you try doing something like doubling the size of the SVG, do you get a better, less jagged, result? If not then it's entirely possible it basically looks as good as it's going to get from this way of importing SVGs, without first rendering them to PNGs yourself.

Share this post


Link to post
Share on other sites

There you go then, I guess it doesn't matter what 'size' the SVG is, the browser will render it quite tiny when converted to an Image tag (which is essentially what is happening).

The solution is simple: don't use SVG. There's no alternative I'm afraid.

Share this post


Link to post
Share on other sites
Just now, espace3d said:

i think you don't understand the image above is with a png file.

Any scaled image will be ugly. It's like zooming in on a matrix printer...
Use a SVG renderer (i.e. not Phaser, but maybe Snap). 

Share this post


Link to post
Share on other sites

If i design a game in high resolution (iPad retina)...is there any tool or trick that adapt the scale in function for example an iPhone 3? 

If this exist...it would be more easier...

 

Share this post


Link to post
Share on other sites

I have used svg images with phaser and they scale very well.

Although they dont work on firefox.That's not a problem for me because I only make Android games that run on crosswalk.

Can you try your svg on Chrome?

You can also install the game in my signature and see for yourself the images are fine. Even if you install the game on an Android TV (large living room TV), phaser will scale it.

Share this post


Link to post
Share on other sites

hi@bruno

svg work perfectly in chrome. a lower resolution 50/50 px is perfectly scaled to the screen.

i have an another problem due to chrome. i explain :

i start a server with python :

sudo python -m SimpleHttpServer 80 

access my index.html via localhost

ok it works but after a certain delay my change on my js.files are not considered.

i must close this server and chrome and restart those services and it works again....:(

what's your solution to start a server with chrome...have you the same problem than me ?

Share this post


Link to post
Share on other sites

I haven't tried sprite animation. In those I used png.

As for the server I didn't have any problems, but I use IIS that comes with Windows 10.

Is it a cache problem? When you make changes try to refresh with Ctrl+F5 to ignore files in cache. Or use private browsing (Ctrl+Shift+N).

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


  • Recently Browsing   0 members

    No registered users viewing this page.