Jump to content

Responsive game with SVG ?


ollo
 Share

Recommended Posts

Hi everybody, 

 

I am working on a game project for school, and I choose Phaser for developt it.

I would like to know if is it possible to make a responsive game with SVG file that I made with Illustrator.

 

I saw that with Arcade engine, the collisions/bounding box is not accurate compared to my SVG file.

So I tried to use the P2 engine, and use PhysicsEditor to generate physic JSON file and load with "loadPolygon" function like this example :

 

http://examples.phaser.io/_site/view_full.html?d=p2%20physics&f=load+polygon+2.js&t=load%20polygon%202

(I tried but not working for the moment, I have "Invalid key/object" )

 

Problem is that I have to export my SVG file to a PNG file, for use PhysicsEditor so I lost the responsive possibilites.

 

I would like to know if responsive is possible with phaser or if a solution can be make any reponsive.

 

ollo

Link to comment
Share on other sites

Phaser renders raster images to a HTML5 canvas element, this is fundamentally different to vector graphics (SVG).  Refer to Rich's comment here: http://www.html5gamedevs.com/topic/5267-phaser-svg-files/?p=31958.

Thats not to say that you can't make a canvas game which responds to the device size.  You would just need to make different resolution versions of your assets and change which ones you use depending on the size of the viewport and the device.  There is a wealth of information provided by game.device (http://phaser.io/docs/Phaser.Device.html), and you can get the size of the viewport by using window.innerWidth & window.innerHeight.

Other options available to you would be to use the Graphics primitives, however this will be nowhere near as performant as using bitmap images. Or you could use phaser to manage your state and game logic and write your own code which then manipulates svg elements based on it.  To be clear I'm not necessarily recommending this, but if the game is simple and you need to use SVG for your school project then it is an option.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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