feat: package backgrounds in spiral from map origin

src/data-processed/backgrounds.json

@@ -1 +1 @@
-{"backgroundColor":1445381,"backgroundResolution":512}
+{"backgroundColor":1445381,"backgroundResolution":512,"backgroundSize":100,"backgroundStart":[-1757,-1141],"backgroundCount":[35,20],"backgroundLength":286}

src/process/compress_backgrounds.js

@@ -1,11 +1,11 @@
 import sharp from 'sharp'
 import * as fs from 'node:fs'
 import { join } from 'node:path'
-import { backgroundColor } from '../data-raw/backgrounds/backgrounds.js'
+import * as B from '../data-raw/backgrounds/backgrounds.js'
 
-const bgr = parseInt(backgroundColor.slice(0, 2), 16)
-const bgg = parseInt(backgroundColor.slice(2, 4), 16)
-const bgb = parseInt(backgroundColor.slice(4, 6), 16)
+const bgr = parseInt(B.backgroundColor.slice(0, 2), 16)
+const bgg = parseInt(B.backgroundColor.slice(2, 4), 16)
+const bgb = parseInt(B.backgroundColor.slice(4, 6), 16)
 const bgInt = bgr | (bgg << 8) | (bgb << 16)
 
 const srcPath = join(import.meta.dirname, '../data-raw/backgrounds')
@@ -23,15 +23,6 @@ function updateDone() {
     if(done % 10 === 0) console.log('done', done, 'of ~' + filenames.length)
 }
 
-function uint32ToString(value) {
-    return String.fromCharCode(
-        (value      ) & 0xff,
-        (value >>  8) & 0xff,
-        (value >> 16) & 0xff,
-        (value >> 24) & 0xff,
-    );
-}
-
 function findChunk(buffer, name) {
     const nameInt = name.charCodeAt(0) | (name.charCodeAt(1) << 8) | (name.charCodeAt(2) << 16) | (name.charCodeAt(3) << 24)
     const nameUint = nameInt >>> 0
@@ -152,5 +143,9 @@ for(let i = 0; i < filenames.length; i++) {
 const bgInfo = {}
 bgInfo.backgroundColor = bgInt
 bgInfo.backgroundResolution = 512
+bgInfo.backgroundSize = B.backgroundSize
+bgInfo.backgroundStart = B.backgroundStart
+bgInfo.backgroundCount = B.backgroundCount
+bgInfo.backgroundLength = B.backgrounds.length
 
 fs.writeFileSync(dstInfo, JSON.stringify(bgInfo))

src/process/package_backgrounds.js

@@ -1,21 +1,61 @@
 import { promises as fs } from 'node:fs'
 import { createWriteStream } from 'node:fs'
 import { join } from 'node:path'
-import { backgrounds } from '../data-raw/backgrounds/backgrounds.js'
+import * as B from '../data-raw/backgrounds/backgrounds.js'
 
 const srcDir = join(import.meta.dirname, '../data-processed/backgrounds')
 const dstFilename = join(import.meta.dirname, '../data-processed/backgrounds.pak')
 
+const bs = new Map()
 
-const filenames = await fs.readdir(srcDir)
-
-const filesP = []
-for(let i = 0; i < filenames.length; i++) {
-    filesP[i] = fs.readFile(join(srcDir, filenames[i]))
+for(let i = 0; i < B.backgrounds.length; i++) {
+    const [x, y] = B.backgrounds[i]
+    let col = bs.get(x)
+    if(col == null) bs.set(x, col = new Map())
+    col.set(y, fs.readFile(join(srcDir, x + '_' + y + '.png')))
 }
 
-const header = []
+const len = B.backgrounds.length
+
+const filesOrder = (() => {
+    const order = []
+
+    let stepSize = 1
+    let x = 18, y = 12
+    let dx = -1, dy = 0
+
+    function add() {
+        const col = bs.get(x)
+        if(col == null) return
+        const val = col.get(y)
+        if(val != null) order.push({ x, y, fileP: val })
+    }
+
+    function step() {
+        for(let i = 0; i < stepSize; i++) {
+            if(order.length >= len) return true
+            x += dx
+            y += dy
+            add()
+        }
+        // 90 degrees counter clockwise
+        const tmp = dx
+        dx = -dy
+        dy = tmp
+    }
+
+    add()
+    // go stepSize, turn, go stepSize, stepSize++
+    while(true) {
+        if(step()) break
+        if(step()) break
+        stepSize++
+    }
 
+    return order
+})()
+
+const header = []
 function writeUint(v) {
     var it = v
     do {
@@ -25,40 +65,14 @@ function writeUint(v) {
         it = div;
     } while(it != 0)
 }
-function writeString(v) {
-    const buffer = Buffer.from(v, 'utf8')
-    for(var i = 0; i < buffer.length; i++) if(buffer.readInt8(i) < 0) {
-        throw new Exception(v)
-    }
-
-    if(buffer.length == 0) header.push(1 << 7)
-    else {
-        if(buffer.length == 1 && buffer.readUint8(0) == (1 << 7)) throw new Exception()
-        for(let i = 0; i < buffer.length-1; i++) {
-            header.push(buffer[i])
-        }
-        header.push(buffer[buffer.length - 1] | (1 << 7))
-    }
-}
-
-writeUint(filenames.length)
-
-const files = await Promise.all(filesP)
 
-const nameRegex = /^(.+)_(.+)\.png$/
-
-for(let i = 0; i < filenames.length; i++) {
-    writeUint(files[i].length)
-    const groups = filenames[i].match(nameRegex)
-    const x = groups[1]
-    const y = groups[2]
-    let texI = 0
-    while(true) {
-        const coord = backgrounds[texI]
-        if(coord[0] == x && coord[1] == y) break
-        texI++
-    }
-    writeUint(texI)
+writeUint(len)
+for(let i = 0; i < filesOrder.length; i++) {
+    const it = filesOrder[i]
+    const file = await it.fileP
+    writeUint(file.length)
+    writeUint(it.x)
+    writeUint(it.y)
 }
 
 const dst = createWriteStream(dstFilename)
@@ -67,8 +81,8 @@ hLen.writeUint32LE(header.length)
 dst.write(hLen)
 dst.write(Buffer.from(header))
 
-for(let i = 0; i < files.length; i++) {
-    dst.write(files[i])
+for(let i = 0; i < filesOrder.length; i++) {
+    dst.write(await filesOrder[i].fileP)
 }
 
 dst.end(async() => {

src/renderBackground.js

@@ -1,15 +1,14 @@
-import * as bkg from '$/backgrounds.js'
 import * as bkg2 from '$/backgrounds.json'
 import { loadShader, checkProg } from './render_util.js'
 import backgroundsUrl from '$/backgrounds.pak'
 
 const actualResolution = bkg2.backgroundResolution
-const texturesC = bkg.backgrounds.length
+const texturesC = bkg2.backgroundLength
 
-// THIS LANGUAGE... IMAGINE TOT BEING ABLE TO PRINT A NUMBER WITH DECIMAL POINT
+// THIS LANGUAGE... IMAGINE NOT BEING ABLE TO PRINT A NUMBER WITH DECIMAL POINT
 // NO, toFixed() ALSO ROUNDS THE NUMBER OR ADDS A MILLION ZEROS
 // NO, toString() PRINTS INTEGERS WITHOUT DECIMAL POINT
-const bgSize = bkg.backgroundSize + '.0'
+const bgSize = bkg2.backgroundSize + '.0'
 
 const vsSource = `#version 300 es
 precision highp float;
@@ -111,11 +110,13 @@ function convToRGB565(gl, inputC) {
     return res
 }
 
-function updateBackground(context, index, chunks) {
+function updateBackground(context, imageData, chunks) {
     const rd = context.backgrounds
     if(rd?.loadImages !== true) return
 
-    const imgData = rd.images[index]
+    const imgData = rd.images[imageData.i]
+    imgData.x = imageData.x
+    imgData.y = imageData.y
 
     const blob = new Blob(chunks, { type: 'image/png' })
     const url = URL.createObjectURL(blob)
@@ -127,7 +128,7 @@ function updateBackground(context, index, chunks) {
         // Technically can be the last texture, so this will make
         // mimpaps not appear. But only until the user moves the screen
         // or something else triggers a rerender, so shouldn't be a big deal
-        context.backgrounds.changed.push(index)
+        context.backgrounds.changed.push(imageData.i)
         imgData.done = true
         URL.revokeObjectURL(url)
         console.log('err')
@@ -138,13 +139,13 @@ function updateBackground(context, index, chunks) {
         gl.bindTexture(gl.TEXTURE_2D_ARRAY, rd.bgTextures)
         gl.texSubImage3D(
             gl.TEXTURE_2D_ARRAY, 0,
-            0, 0, index,
+            0, 0, imageData.i,
             actualResolution, actualResolution, 1,
             gl.RGB, gl.UNSIGNED_BYTE,
             img
         )
 
-        rd.changed.push(index)
+        rd.changed.push(imageData.i)
         imgData.ok = true
         imgData.done = true
 
@@ -223,15 +224,18 @@ async function downloadBackgrounds(context) {
     const imageDatas = []
     for(let i = 0; i < len; i++) {
         const size = parseCompressedInt()
-        const ti = parseCompressedInt()
-        imageDatas.push({ size, index: ti })
+        const xi = parseCompressedInt()
+        const yi = parseCompressedInt()
+        const x = bkg2.backgroundStart[0] + xi * bkg2.backgroundSize
+        const y = bkg2.backgroundStart[1] + yi * bkg2.backgroundSize
+        imageDatas.push({ size, i, x, y })
     }
 
     for(let i = 0; i < imageDatas.length; i++) {
         const id = imageDatas[i]
         var chunks = tryRead(id.size)
         if(chunks == null) chunks = await read(id.size)
-        updateBackground(context, id.index, chunks)
+        updateBackground(context, id, chunks)
     }
 }
 
@@ -358,14 +362,11 @@ export function render(context) {
         var coordsCount = 0
         var done = true
         for(let i = 0; i < texturesC; i++) {
-            done = done & rd.images[i].done
-            if(!rd.images[i].ok) continue
-            const bg = bkg.backgrounds[i]
-
-            const x = bkg.backgroundStart[0] + bg[0] * bkg.backgroundSize
-            const y = bkg.backgroundStart[1] + bg[1] * bkg.backgroundSize
-            dv.setFloat32(coordsCount * 12    , x, true)
-            dv.setFloat32(coordsCount * 12 + 4, y, true)
+            const it = rd.images[i]
+            done = done & it.done
+            if(!it.ok) continue
+            dv.setFloat32(coordsCount * 12    , it.x, true)
+            dv.setFloat32(coordsCount * 12 + 4, it.y, true)
             dv.setUint32 (coordsCount * 12 + 8, i, true)
             coordsCount++
         }