Friday, September 07, 2012

SVG as level description file


If you ever wanted to use svg as a level editor for your HTML5 games.. here is the basic code you can use. Obviously you have to make sure that your svg file is using only rects instead of any other type if you want to use this code as is.. But its' a good basic start for getting you started. I've used the color of the rects in svg to determine how it behaves in game.. you could offload it to the editor (i.e inkscape in my case) to add properties to the rects which can be read and used to determine properties.

$.get("drawing.svg", function(res){
                //loading the data from an svg file.
                blocks = [];
                user = null;
                ball = null;

                var $layer = $(res).find('g').first();
                //get all the rectangles in the level and create the list.
                $layer.find('rect').each(function(){
                    //string operations to get the color set for the block.
                    var fillstyle = $(this).attr("style").split(';')[0].split(':')[1];
                    var x, y, w, h;
                    x = parseInt($(this).attr('x'));
                    y = parseInt($(this).attr('y'));
                    w = parseInt($(this).attr('width'));
                    h = parseInt($(this).attr('height'));
                    if(fillstyle == "something"){
                    }else if(fillstyle == "something"){
                    }
               });
});

ps:///$.get() is the jquery call, so you need jquery to run this as is.. or you could handle the xmlhttp request thing ..