Roku animation using animated sprites, how to create the tedious xml

Question

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 :)

Answer 1

Actually, you don't have to use XML files for sprite animations. Just be aware that frame's dimensions must be set.

Follow the example bellow for a loading sprite with 128x128 dimensions and 12 frames:

compositor = CreateObject("roCompositor")
compositor.SetDrawTo(screen, &h80)
compositor.NewAnimatedSprite(576, 296, GetLoadingSpriteRegions())

Function GetLoadingSpriteRegions() as Object
    arr = []
    bitmap=createobject("robitmap","pkg:/images/loader_sprite.png")

    for i=0 to 1408 step 128        
        region=createobject("roRegion",bitmap,i,0,128,128)    'frame is created here
        arr.Push(region)
    next

    return arr
End Function