SVG in html5 gameDev

[markusT]

Check out this posts about SVG in html5 game dev

 

http://www.inkfood.com/tag/svg/

 

What do you think about it? Is it worth to put more work an effort into this series to finish it? I guess it would take three more posts and a game prototype to finalize the series. Even if there is plenty more SVG stuff to uncover.

 

Any ideas, suggestions or critique to take account of for further posts?

 

Thanks,

-markusT / inkfood.com

[brennanyoung]

This looks good. I am gathering a bunch of svg resources, and there's very little up-to-date. Some good old stuff,

I think it would be useful to easily see where SVG falls down - i.e. when NOT to use it, or which features to avoid on a per-platform basis.

SVG definitely has some useful game-design features, even if performance is not one of them.

 

Suggested topics:

• Up-to-date resources list
• Tackling the problem of the transform origin
• SVG -> image (build graphics in svg, display as bitmap)
• Working with filters
• SVG 2.0 status
   

[AshleyScirra]

Any information on rendering SVG in a WebGL context would be interesting.

[PixelPicoSean]

Any information on rendering SVG in a WebGL context would be interesting.

I think it's better to render SVG to canvas and then use them as textures in WebGL.

I built a game using the amazing Ai-Canvas plugin. In that game I export assets into javascript code and pre-draw to entities' textures which makes it possible to scale to any size and still keep perfect outlooking.

Looks like you can also export events information into the output which may be helpful but that is another story.

Since you can render SVG to canvas very easily(without using any plugins), so you can follow my way.

[Dread Knight]

Personally I only use SVG icons in the UI of my html5 game, which is DOM overlayed on canvas. I'm not sure if that would cause lower performance issues on mobile devices though.

[bfresh]

I have been using svg graphics for my games more and more so this is cool.  I recently got frustrated trying to get an svg to display and scale correctly in a canvas....

 

Side note, I do run http://www.vectorstash.com where I will be sharing the svg's and sprite stuff I create for games.  I just uploaded about 10 different guns I used for a game there.

[markusT]

Make sure you check the first SVG based game prototype of the SVG series.

 

Even if there is many more SVG related stuff to uncover. I move on to the first prototype, which is called "UP" and it is entirely made with dynamic SVG elements and properties.

 

Get the documentation and the fully commented code here

http://www.inkfood.com/svg-platformer-up/ 

 

Play the prototype here

http://inkfood.com/content/pages/SVG_UP/

 

->Post your highScore!!

[markusT]

Don't miss the second SVG game prototype. It's a Pivvot game clone made entirely with SVG element.

 

Get the documentation and the fully commented code here

http://www.inkfood.com/svg-pivvot-clone/

 

Play the prototype here

http://www.inkfood.com/content/pages/SVG_pivvot/

 

Test it on your mobile device

->Post your highscore!!!

[kuuuurija]

great stuff.. I have started to look into SVG for making simple games...
any thoughts on using Snap.svg for making games?

[markusT]

great stuff.. I have started to look into SVG for making simple games...

any thoughts on using Snap.svg for making games?

 

If you wanna do a "real" game with pure SVG elements, you are better using some libraries like Snap.svg or RaphaelJS. In general it really doesn't matter what you are using or how you are rendering, the game mechanics are always the same, they are only applied in different ways.  

It might be also a good idea to use some vector drawing software like inkscape or illustrator as a level editor, so you could create multiple levels without a lot of work.