espace Posted August 25, 2016 Share Posted August 25, 2016 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 ? Link to comment Share on other sites More sharing options...
rich Posted August 25, 2016 Share Posted August 25, 2016 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. Link to comment Share on other sites More sharing options...
espace Posted August 25, 2016 Author Share Posted August 25, 2016 Thanks rich for your reply. i have test with a png file (2000/2000 pixels) and put phaser.WEBGL in place of phaser.AUTO and the result is the same see my attachement. Do you know what is the problem ? I have seen this for support svg files on phaser but i don"t know if it is benefit ??? http://getcontext.net/read/svg-images-on-a-html5-canvas Link to comment Share on other sites More sharing options...
rich Posted August 25, 2016 Share Posted August 25, 2016 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. Link to comment Share on other sites More sharing options...
espace Posted August 25, 2016 Author Share Posted August 25, 2016 i changed the extension and the image above is with a png file. so i have a problem also with png and my resolution is 2000/2000 pixel for the circle Link to comment Share on other sites More sharing options...
Milton Posted August 25, 2016 Share Posted August 25, 2016 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). Link to comment Share on other sites More sharing options...
espace Posted August 25, 2016 Author Share Posted August 25, 2016 yes you are right > test done surely a question who is already post ...how do you choose the resolution of images in game. what is the good rule ? Link to comment Share on other sites More sharing options...
Milton Posted August 25, 2016 Share Posted August 25, 2016 Make 'm so you don't have to scale. So have multiple versions, and load the correct ones. For instance, retina needs 4 times the resolution of an older, non retina phone... Link to comment Share on other sites More sharing options...
espace Posted August 25, 2016 Author Share Posted August 25, 2016 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... Link to comment Share on other sites More sharing options...
Milton Posted August 25, 2016 Share Posted August 25, 2016 I don't use Phaser myself, but I'm sure @rich can help you there. Scaling is easy, just look at the ScaleManager but you don't want to use HD images on an iPhone 3. That's why you need x4 x2 x1 versions... Link to comment Share on other sites More sharing options...
bruno_ Posted August 25, 2016 Share Posted August 25, 2016 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. Link to comment Share on other sites More sharing options...
espace Posted August 27, 2016 Author Share Posted August 27, 2016 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 ? Link to comment Share on other sites More sharing options...
espace Posted August 27, 2016 Author Share Posted August 27, 2016 and just a last question did you use sprite animation with a svg file ? if yes could you give me some example ?..for this time, i can't do that thanks in advance Link to comment Share on other sites More sharing options...
bruno_ Posted August 27, 2016 Share Posted August 27, 2016 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). Link to comment Share on other sites More sharing options...
Recommended Posts