I made a simple java script code to create the sprite sheet xml for the sprite animation in roku written in brightscript. Is there an easier way to just pass in the sheet and let it figure out the dimensions of the frame? That would be cool.
I learnt about animated sprites here.
The code can be found here.
JS
var generate = function () {
frame_w = parseInt($("#f_w").val());
frame_h = parseInt($("#f_h").val());
sheet_w = parseInt($("#s_w").val());
sheet_h = parseInt($("#s_h").val());
xml = '<BitmapSet>\r\n<Bitmap name="set" filespec="<PLACE YOUR SHEET PATH>">\r\n';
region = 0;
for (y = 0; y < sheet_h; y+=frame_h) {
for (x = 0; x < sheet_w; x+=frame_w) {
xml += '<Region name="r'+region+'" x="'+x+'" y="'+y+'" w="'+frame_w+'" h="'+frame_h+'"/>\r\n';
region++;
}
}
xml += '</Bitmap>\r\n<Animation name="animatedSprite">\r\n';
for (i = 0 ; i < region; i ++) {
xml += '<frame use="set.r'+i+'"/>\r\n';
}
xml += '</Animation>\r\n';
xml += '<ExtraInfo width="'+frame_w+'" height="'+frame_h+'" />\r\n'
xml += "</BitmapSet>";
$("#xml").html(formatXml(xml));
};
function formatXml(xml) {
var formatted = '';
var reg = /(>)(<)(\/*)/g;
xml = xml.replace(reg, '$1\r\n$2$3');
var pad = 0;
jQuery.each(xml.split('\r\n'), function(index, node) {
var indent = 0;
if (node.match( /.+<\/\w[^>]*>$/ )) {
indent = 0;
} else if (node.match( /^<\/\w/ )) {
if (pad != 0) {
pad -= 1;
}
} else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
indent = 1;
} else {
indent = 0;
}
var padding = '';
for (var i = 0; i < pad; i++) {
padding += ' ';
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
}
If this helps you then sweet, thought i would share.
Happy coding :)