Asset editor interleaved pixel data

Use `il:true` to indicate interleaved byte data.

Author: fredsa

src/ide/pixeleditor.ts

@@ -45,6 +45,7 @@ export type PixelEditorImageFormat = {
   flip?: boolean		// flip vertically
   skip?: number		// skip bytes
   wpimg?: number		// words per image
+  il?: boolean	// interleave images row by row
   aspect?: number	// aspect ratio
   xform?: string		// CSS transform
   destfmt?: PixelEditorImageFormat
@@ -169,12 +170,14 @@ export function convertWordsToImages(words: UintArray, fmt: PixelEditorImageForm
   var pofs = fmt.pofs || wordsperline * height * count;
   var skip = fmt.skip || 0;
   var wpimg = fmt.wpimg || wordsperline * height;
+  var rowstride = wordsperline;
+  if (fmt.il) { wpimg = wordsperline; rowstride = wordsperline * count; }
   var images = [];
   for (var n = 0; n < count; n++) {
     var imgdata = [];
     for (var y = 0; y < height; y++) {
       var yp = fmt.flip ? height - 1 - y : y;
-      var ofs0 = wpimg * n + yp * wordsperline;
+      var ofs0 = wpimg * n + yp * rowstride;
       var shift = 0;
       for (var x = 0; x < width; x++) {
         var color = 0;
@@ -256,21 +259,24 @@ export function convertImagesToWords(images: Uint8Array[], fmt: PixelEditorImage
   var pofs = fmt.pofs || wordsperline * height * count;
   var skip = fmt.skip || 0;
   var wpimg = fmt.wpimg || wordsperline * height;
+  var rowstride = wordsperline;
+  if (fmt.il) { wpimg = wordsperline; rowstride = wordsperline * count; }
 
+  var totalwords = rowstride * height;
   var words;
   if (nplanes > 0 && fmt.sl) // TODO?
-    words = new Uint8Array(wpimg * count);
+    words = new Uint8Array(totalwords);
   else if (bitsperword <= 8)
-    words = new Uint8Array(wpimg * count * nplanes);
+    words = new Uint8Array(totalwords * nplanes);
   else
-    words = new Uint32Array(wpimg * count * nplanes);
+    words = new Uint32Array(totalwords * nplanes);
 
   for (var n = 0; n < count; n++) {
     var imgdata = images[n];
     var i = 0;
     for (var y = 0; y < height; y++) {
       var yp = fmt.flip ? height - 1 - y : y;
-      var ofs0 = n * wpimg + yp * wordsperline;
+      var ofs0 = n * wpimg + yp * rowstride;
       var shift = 0;
       for (var x = 0; x < width; x++) {
         var color = imgdata[i++];

src/ide/ui.ts

@@ -1596,6 +1596,7 @@ function openAssetEditorHelp() {
       ${row('flip', 'false', 'Flip vertically (y=0 is bottom row)')}
       ${row('skip', '0', 'Skip bytes at start of each image')}
       ${row('pofs', 'sl×h×count', 'Offset between bitplanes')}
+      ${row('il', '0', 'Interleave images row by row (data stored as one wide block)')}
       ${row('remap', '—', 'Bit remapping table for address lines')}
       ${row('reindex', '—', 'Pixel-to-byte/bit remapping')}
       ${row('wpimg', 'sl×h', 'Words per image')}
@@ -1608,6 +1609,7 @@ function openAssetEditorHelp() {
       ${row('layout', '—', 'Palette editor layout (nes, astrocade)')}
       <tr><th colspan="3">Examples</th></tr>
       <tr><td colspan="2"><code>/*{w:8,h:8,bpp:1,brev:1}*/</code></td><td>8x8 1bpp, MSB first (NES-style)</td></tr>
+      <tr><td colspan="2"><code>;;{w:8,h:5,count:4,il:1};;</code></td><td>4 interleaved 8x5 chars (stored as 32x5 block)</td></tr>
       <tr><td colspan="2"><code>;;{w:7,h:8};;</code></td><td>7x8 1bpp, LSB first (Apple II HGR)</td></tr>
       <tr><td colspan="2"><code>/*{w:16,h:16,bpp:4,np:1}*/</code></td><td>16x16 4bpp</td></tr>
       <tr><td colspan="2"><code>/*{pal:332,n:16}*/</code></td><td>16-entry RGB332 palette</pre></td></tr>