how does frame option in drawImage work ?

Hi,

I just received my bangle js2 today, i already got a game going but the original images are a bit small so i wanted to scale them.

initially I had an image consisting of 126 seperate images. this image was 8x1008 (so 1 tile = 8x8). I used the image converter to make a 1 bit image object out of it but i changed the width and and height both to 8 and then i could use the frame option to display a single tile from this bigger image and it displayed fine when drawing single frames or "tiles"

However i have now resized my image to 10x1260 so one tile is 10x10 but somehow this is now producing weird results when using drawBitmap with the frame: option, the images it draws seem distorted now

i could not find an example that used the frame option so i'm not sure if changing the height portion from 1008 or 1260 to 8 or 10 is the way to use this but i'm not sure how else i could produce frames of data

Basically i want to draw a smaller portion of a bigger image only and i thought frame could be used for that but it only seemed to work when i used a 8x8 tilesize not when using a 10x10 tilesize and i'm not sure where i went wrong or if i'm misusing the frame option.

Can someone show me an example on how to use the frame option from drawImage where width and height of a single "frame" is 10x10 in an image that is a multiple of that.

edit: is it possible this is a bug ?
I have included the image as attachment as well as the code i used so the original image was 10x1260 yet somehow imageMetrics is only returning 121 frames while it should report 126 frame if i change width and height to 10.
Or does frame only work for byte aligned sizes ? like 8, 16, 24, 32, etc for width & height ?

{
var blockTiles = {
  width : 10, height : 10, bpp : 1,
  buffer : atob("MgyPP88AAA88yDIMgAAA///wAADzzIMgyDIMjyPIAgCPIMgyDIAAAP4/gCAI8gyDIMgyDI8/zwAAD/wAAAAAAAD///AAAP/AAAAAMgyPI8gCAI/gAAAAAAAA/j+AIAj+AAAAADIMgzzPMAwDPMgyDIAAAD/P8wDAM8yDIMgyDIMgyDIMgyDIMgyAAAA+D4MgyDIMgyDIMgyDPM8wDAP8AAAAAAAAP8/zAMA/wAAAADIMgyDIMgyD4AAAAAAAAD4PgyDIPgAAAAA+D4////////z4Pg+AAAD////////Pg+D4Pg+P4/j+P4/g+D4PgAAA/j+P4/j+D4Pg+D4Pj////////AAAAAAAAP///////8AAAAA+D4/j+P4/j+AAAAAAAAD+P4/j+P4AAAAAPg+D/P8/z/P8+D4PgAAAP8/z/P8/z4Pg+D4Pg+D4Pg+D4Pg+D4AAAD4Pg+D4Pg+D4Pg+D4P8/z/P8/wAAAAAAAA/z/P8/z/AAAAAPg+D4Pg+D4PgAAAAAAAAPg+D4Pg+AAAAAD4f7////////f5/j4AB/v///////9/n+Pg+H+/7/v+/7/n+f4+AAf7/v+/7/v+f5/j4Ph/v///////9/n+AAAH+////////3+f4AD4f7/v+/7/v+f5/gAAB/v+/7/v+/5/n+AA+H+f9/3/f9/3+f4+AAf5/3/f9/3/f5/j4Ph/n+f5/n+f5/n+PgAH+f5/n+f5/n+f4+D4f5/3/f9/3/f5/gAAB/n/f9/3/f9/n+AA+H+f5/n+f5/n+f4AAAf5/n+f5/n+f5/gAAAAAAAAAAAAAAAAADGMYOc5znxjGDnOc5wA/85znOfGMYOc5znx7HjmOY5sex45jmObGMYOc5znxjGP//8AEYRh53nedGEYed53nAB/3ned50YRh53necAP+OY5jmx7HjmOY5sex45jmObHse/7/gARhGHned50YRh/3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/AAAAAAAAAAAAAAAAEAQBAEAQBAEAQBAH/wBAEAQBAEAQBAEAQAAAAAAAAAAAAAAP//8AAAAAAAAAAAAA/8AQBAEAQBAEAQBAH///AEAQBAEAQBAEAf/gCAIAgCAIAgCAIAgD/4AgCAIAgCAIAgCAIBgGAYBgGAYBgGAYB/+AYBgGAYBgGAYBgGAIAgCAIAgCAIAgD///gCAIAgCAIAgCAP/gGAYBgGAYBgGAYB/8AAAAAAAAAAAAAAAAMAMZCEI9ALjBQZBgPQBBkIQhEAuMFBkGA8AAAAAAAAAAAAAAAAD4f5znOc5zn+Pg+AADAMAwDAMAwDAMAwAB+H4BgGH4cB+H4fgAH4fgGAYfgGH4fh+AABgOD4Ph2H4BgGAYAB+H4cBwH4Bh+H4fgAHAcB+H4fh2H4fh+AAfh+AYBgMDgOA4DgAB+H4dh2H4dh+H4fgAH4fh2HYfgGH4fh+AAf5/nOc5/n+c5znOAB+H+c5znYc5/n4fgAH4fhwHAcBwH4fh+AAfB+HOc5znOfh8HwAB+H4cBwH4cB+H4fgAH4fhwHAfB8HAcBwAAP5/nAcB3nOf4+D4AB2HYfh+H4dh2HYdgAAwDAMAwDAMAwDAMAAP4/gYBgGHYfg8DwAB3nefh+H4fh3ned4AHAcBwHAcBwH4fh+AAQFx3ve9/3Xcdx3HABznuf5/nec5znOc4ADwfh2HYdh2H4PA8AAfB+HYdh+HwcBwHAAA+H+c5znOc5/j+P4AHwfh2HYdh8HYdh2AAPh+HgeA8AYfh8HwAB/n+DAMAwDAMAwDAAHYdh2HYdh2H4fh+AAdh2HYdh2HYfg8DwABx3Hcdx3Hdd/zuO4AHOc5/n+DB/nOc5zgAc5zn+f4+AwDAMAwAB+H4BgGAwOB+H4fgAAAOA4DgAA4DgAAAAAPhDk2TZDk2Q4+D4AAEAI+b5gBAH5gIAgED4c5Nk2QZNk2Pg+AAf7z8HweAfP8/z/Pf5/vv+f54BgH5/v+9/n+8/z/P8+AcH8/z3+f738fx+AYBx/3/ff4+HeR5Hned5Dj4PgAD4R57nud5PkOPg+AA")
};
print(g.imageMetrics(blockTiles));
//reports: >{ "width": 10, "height": 10, "bpp": 1, "transparent": false, "frames": 121 }

edit 2: it seems if i use 8bpp it produces correct results

{
const blockTiles = {
  width : 10, height : 10, bpp : 8,
  buffer : require("heatshrink").decompress(atob("AAP//4DCBJgHBBIgAGB445TDpJFRBJY7VAB5j9Y7AJMKowJMDpbH2BJhj9Y7BgIMxiLRDqwAdHZJFdMdLHYBJgrGBJjE4HZhFPMe7HRBIzDFBJgxJHZQnJJ7DJaIIxj/BP4JlY7AJQNv4JSLggJNQI6LMQg4AuHZIJLMfLv9Ymw7MBJZj5J6L/FAFaVXQLJj/BMY4IBNDH4Mf7HjAFSsWADRj/KKzHTBNTH4Mf7HcHpAMCBNhPYZLRj/BP4JsY7AJ/BMYMEBM4AxMf5PUBP7H3Mf5PTfBAIHAFI7JBJSBTMf5jaY7QJoY/Rj/Y8YAoMaoASMf5jaY7QJoY/Rj/Y7RkyMajPSMf5jaY7QJ9Y8pj/Y8YKBBN5jMACRj/MbTHaBPrHlMf4A/AFRwEAhyMEAjAxxNpbwMMf4xRAwQJJDpAJUGPCVxAhwARJAgAFLJIJKKhAJUGOBtKQJBj/MbDkLDowJUBg4JLGP4xjT5KpLXxL5wGK5kaAH4A/AH4A/AH4A/ABv/ABBJ/NkYJ/BLLHSBP4JZAH4AQXxTHRAH5jQfPQJeY7gJ/MaJQ/N1pP/BMJjJBP4JRY6IJ/BLL5xBL4ATLP5jZfPIJfXiIA/ADRlLBYgEDCYgENR4ikJB4Y9JDI47IKxI3NE55oTMewA/AEhpDVIoAGBIgEnHo5FIBJRlNBP4JXYxbHKGS4nMHbRFNMe53WMbRPMDo4nJXpiLjBJrvcOhzH9J7qBXMeAdUBKQIHSywJQMbipMWabH/McDSJMdoVDBJgETE84EGY7I2bbZJ3VY7oJQDpIJdHaZjVGKIEnLJZPOY+gdTY9JjnBKInTYpxaIfJAJGHagdKGJyCUMRYDCBKDbTcpQJjMxwJ/BK7IKd5YgHHjLvTBQhPJMSIWGBJgoGBMA7TMyAOJBOiBaMZQHIDQqHIAiQ+FAYgnHGJIJQY5wEHEQxOIBJohFGJoEaMhoQFd5gDCBMg8LJ5xiNMcwdJGJJFJBKBkTIor+cAiI9HBKbHzaJazIE7LHZBI4cJE5Q0KGKKpKMSb5PIg4J/MZLvaBMDHLBJxj/J6BYJMSIxEG44JpAowAHFipjNAiI6JVZaoILBIEZMeRrJNpAJgMZI7GWJQyVBA4lIHaZFNACCnLBKIndADqBJGpACDAYIJQDqZnHXpLHWCRQvKJAgJHFaQcEDpYaKBBzHJGArHbCaIJGY7qNFWYycJGyAvMGxQJYAgkPDBoFKGShjITppBPV5JJST85jLNZTHVMaYWIBKDHUE5LGQMZabJZhQWGBJjqLDpRqLaxKHHRxJjGJ5ZGEBJxZJGYxjm"))
};

print(g.imageMetrics(blockTiles));
//reports: >>{ "width": 10, "height": 10, "bpp": 8, "transparent": false,  "frames": 126 }
>

1 Attachment

Hi! You've got the right idea with frame - actually changing the image height is a really neat idea to produce the data file!

But I think you figured the issue out yourself. frame works by skipping forward that number of images - but it assumed they're one after the other - but as blocks of bytes. So if one image isn't exactly a byte long, there will be one or two unused bits between them.

I think the behaviour of Espruino there is probably ok - it could get tricky for it if it has to start an image halfway through a byte - but we could definitely improve the tools.

My intention was to allow the Image Converter to take an animated gif, but that seemed a bit tricky and for what you're doing a bit long image works ok. Maybe we could make the converter have an extra option for frames in image and then it would automatically set the height and add the relevant padding.

... and just FYI you could store the image as 2bpp 10x10 and it'd still be byte aligned, so that could be an option to use it as-is. With 2bpp you at least get the ability to have black+white+transparent, which may be handy for you.

Hi Gordon,

Thanks for your answers, yeah i figured we had to use vertical tilesheets to make the frame option work and when i tested it, it seemed to work fine initially. I was not aware of the byte alginment initially but yeah figured that might have been the issue after testing a bit.

I did try to change my image to a 2bpp (greyscale) 10x10 image but somehow it was still not working correctly for displaying all frames. imageMetrics does correctly report 126 frames with the 10x1260 image but somehow when i draw them some don't display and i was not sure what was causing that so i kept the 8 bit format for now as that seems to work fine. I don't know why the 2 bits per pixel 10x1260 would not work for displaying certain frames i did not really look into it as i knew the 8 bit ones are working fine. The reason it was working initially with the 1bpp 8x1008 image is that because of the width and height of the images (and a frame 8x8) the frames were also always byte aligned and as soon as i changed it to 10x10x1 they no longer were, i just kept it at 8bpp as then the size (width & height) of a single frame does not matter at all

modifying the tools would be nice, but its fairly easy to edit the height value manually but i'm not sure what you mean with the padding is this to make it work for images & bitdepth where the frames are not byte aligned ? to somehow make them bytealgined for every frame ? That would be nice if people want to use other bitdepths, but i'm guessing 8 bits per pixel will always work fine and now that there is some info about how one could use the frame option and that one can use vertical tilesheets to make frames work it should be fine for now (at least for me). Maybe it might be a nice feature to have for the tools in the long run.

edit: using optimal 2 bit with a color palette does work so i switched to that, then i can also try to make it adhere to the theme

i'm not sure what you mean with the padding is this to make it work for images & bitdepth where the frames are not byte aligned ?

Yes, that'd be the idea.

Glad you managed to get it sorted though! If you do use color palette then it won't adhere to the theme automatically though - but if it works paletted then there's a good chance it'll work without - maybe you just needed to store the image inverted?

If you do use color palette then it won't adhere to the theme automatically though

i edit the palette with the values from g.theme.fg and g.theme.bg now (if theming option in my game is enabled). this seems to work fine

but if it works paletted then there's a good chance it'll work without - maybe you just needed to store the image inverted?

Initially i had chosen in image convertor 2 bit grey scale and then it did not work correctly, but if i choose 2 bit optimal with a palette it did seem to work fine.