@footgun/cobalt 0.7.0 → 0.7.1

package/src/spritesheet/read-spritesheet.js

@@ -1,88 +1,3 @@
-// take a texturepacker json hash export and convert it into a Float32Array
-// copied into the renderer's vertex buffer
-//
-// @return Float32Array vertices (interleaved positions and uvs)
-/*
-export default function readSpriteSheet (spritesheetJson) {
-
-    // a sprite is a quad (2 triangles) so it has 6 vertices
-    // each vertex has 4 float32 (interleaved vec2 position, vec2 uv)
-    const spriteFloatCount = 4 * 6
-
-    // each key in the spritesheet is a unique sprite type
-    const spriteCount = Object.keys(spritesheetJson.frames).length
-    
-    const vertices = new Float32Array(spriteCount * spriteFloatCount)
-
-    const locations = [ ]
-
-    const spriteMeta = { }
-
-    let i = 0
-
-    for (const frameName in spritesheetJson.frames) {
-        const frame = spritesheetJson.frames[frameName]
-
-        locations.push(frameName)
-
-        spriteMeta[frameName] = frame.sourceSize
-
-        // iterate over each sprite and fill it's position and u,v coords in the output
-
-        // calculate normalized vertex coordinates, accounting for trimmed space
-        const minX = -0.5 + (frame.spriteSourceSize.x / frame.sourceSize.w)
-        const minY = -0.5 + (frame.spriteSourceSize.y / frame.sourceSize.h)
-
-        const maxX = -0.5 + ((frame.spriteSourceSize.x + frame.spriteSourceSize.w) / frame.sourceSize.w)
-        const maxY = -0.5 + ((frame.spriteSourceSize.y + frame.spriteSourceSize.h) / frame.sourceSize.h)
-
-        const p0 = [ minX, minY ]
-        const p1 = [ minX, maxY ]
-        const p2 = [ maxX, maxY ]
-        const p3 = [ maxX, minY ]
-
-
-        // calculate uvs
-        // u,v coordinates specify top left as 0,0  bottom right as 1,1
-        const minU = 0.0 + (frame.frame.x / spritesheetJson.meta.size.w)
-        const minV = 0.0 + (frame.frame.y / spritesheetJson.meta.size.h)
-        const maxU = 0.0 + ((frame.frame.x + frame.frame.w) / spritesheetJson.meta.size.w)
-        const maxV = 0.0 + ((frame.frame.y + frame.frame.h) / spritesheetJson.meta.size.h)
-
-        const uv0 = [ minU, minV ]
-        const uv1 = [ minU, maxV ]
-        const uv2 = [ maxU, maxV ]
-        const uv3 = [ maxU, minV ]
-
-
-        // quad triangles are  [ p0, p1, p2 ]  ,  [ p0, p2, p3 ]
-        // vertex data is interleaved; a single vertex has a vec2 position followed immediately by vec2 uv
-        vertices.set(p0, i)
-        vertices.set(uv0, i + 2)
-
-        vertices.set(p1, i + 4)
-        vertices.set(uv1, i + 6)
-
-        vertices.set(p2, i + 8)
-        vertices.set(uv2, i + 10)
-
-        vertices.set(p0, i + 12)
-        vertices.set(uv0, i + 14)
-
-        vertices.set(p2, i + 16)
-        vertices.set(uv2, i + 18)
-
-        vertices.set(p3, i + 20)
-        vertices.set(uv3, i + 22)        
-
-        i += spriteFloatCount
-    }
-
-    return { spriteMeta, locations, vertices }
-}
-*/
-
-
 /**
  *  ------------------------------ TexturePacker (no rotation) ------------------------------
  * Accepts the "Hash" JSON format from TexturePacker. Assumes rotated=false.
@@ -97,41 +12,35 @@ export default function readSpriteSheet (spritesheetJson) {
         "sourceSize": {"w":32,"h":32}
     },
 */
-export default function buildSpriteTableFromTexturePacker (doc) {
-    const atlasW = doc.meta.size.w;
-    const atlasH = doc.meta.size.h;
-    const names = Object.keys(doc.frames).sort();
-    const descs = new Array(names.length);
-
-    for (let i=0; i<names.length; i++) {
-        const fr = doc.frames[names[i]];
-
-        const fx = fr.frame.x, fy = fr.frame.y, fw = fr.frame.w, fh = fr.frame.h;
-        const offX = fx / atlasW, offY = fy / atlasH;
-        const spanX = fw / atlasW, spanY = fh / atlasH;
-        const sw = fr.sourceSize.w, sh = fr.sourceSize.h;
-        const ox = fr.spriteSourceSize.x, oy = fr.spriteSourceSize.y;
-        const cx = (ox + fw*0.5) - (sw*0.5);
-        const cy = (oy + fh*0.5) - (sh*0.5);
+export default function buildSpriteTableFromTexturePacker(doc) {
+    const atlasW = doc.meta.size.w
+    const atlasH = doc.meta.size.h
+    const names = Object.keys(doc.frames).sort()
+    const descs = new Array(names.length)
+
+    for (let i = 0; i < names.length; i++) {
+        const fr = doc.frames[names[i]]
+
+        const fx = fr.frame.x,
+            fy = fr.frame.y,
+            fw = fr.frame.w,
+            fh = fr.frame.h
+        const offX = fx / atlasW,
+            offY = fy / atlasH
+        const spanX = fw / atlasW,
+            spanY = fh / atlasH
+        const sw = fr.sourceSize.w,
+            sh = fr.sourceSize.h
+        const ox = fr.spriteSourceSize.x,
+            oy = fr.spriteSourceSize.y
+        const cx = ox + fw * 0.5 - sw * 0.5
+        const cy = oy + fh * 0.5 - sh * 0.5
         descs[i] = {
             UvOrigin: [offX, offY],
             UvSpan: [spanX, spanY],
-            FrameSize:[fw, fh],
-            CenterOffset:[cx, cy],
-        };
+            FrameSize: [fw, fh],
+            CenterOffset: [cx, cy],
+        }
     }
-    return { descs, names };
+    return { descs, names }
 }
-
-
-/*
-texturepacker frame structure:
-    "f2.png":
-    {
-        "frame": {"x":15,"y":1,"w":10,"h":15},
-        "rotated": false,
-        "trimmed": true,
-        "spriteSourceSize": {"x":22,"y":17,"w":10,"h":15},
-        "sourceSize": {"w":32,"h":32}
-    },
-*/

package/src/spritesheet/spritesheet.js

@@ -1,35 +1,33 @@
 import createTextureFromBuffer from '../create-texture-from-buffer.js'
-import createTextureFromUrl    from '../create-texture-from-url.js'
-import readSpriteSheet         from './read-spritesheet.js'
-
+import createTextureFromUrl from '../create-texture-from-url.js'
+import readSpriteSheet from './read-spritesheet.js'
 
 // shared spritesheet resource, used by each sprite render node
 
 export default {
     type: 'cobalt:spritesheet',
-    refs: [ ],
+    refs: [],
 
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
-    onInit: async function (cobalt, options={}) {
+    onInit: async function (cobalt, options = {}) {
         return init(cobalt, options)
     },
 
-    onRun: function (cobalt, node, webGpuCommandEncoder) { },
+    onRun: function (cobalt, node, webGpuCommandEncoder) {},
 
     onDestroy: function (cobalt, node) {
         // any cleanup for your node should go here (releasing textures, etc.)
         destroy(node)
     },
 
-    onResize: function (cobalt, node) { },
+    onResize: function (cobalt, node) {},
 
-    onViewportPosition: function (cobalt, node) { },
+    onViewportPosition: function (cobalt, node) {},
 }
 
-
 // configure the common settings for sprite rendering
-async function init (cobalt, node) {
+async function init(cobalt, node) {
     const { canvas, device } = cobalt
 
     let spritesheet, colorTexture, emissiveTexture
@@ -42,23 +40,42 @@ async function init (cobalt, node) {
         spritesheet = await spritesheet.json()
         spritesheet = readSpriteSheet(spritesheet)
 
-        colorTexture = await createTextureFromUrl(cobalt, 'sprite', node.options.colorTextureUrl, format)
-        emissiveTexture = await createTextureFromUrl(cobalt, 'emissive sprite', node.options.emissiveTextureUrl, format)
-        
+        colorTexture = await createTextureFromUrl(
+            cobalt,
+            'sprite',
+            node.options.colorTextureUrl,
+            format,
+        )
+        emissiveTexture = await createTextureFromUrl(
+            cobalt,
+            'emissive sprite',
+            node.options.emissiveTextureUrl,
+            format,
+        )
+
         // for some reason this needs to be done _after_ creating the material, or the rendering will be blurry
         canvas.style.imageRendering = 'pixelated'
-    }
-    else {
+    } else {
         // sdl + gpu path
         spritesheet = readSpriteSheet(node.options.spriteSheetJson)
 
-        colorTexture = await createTextureFromBuffer(cobalt, 'sprite', node.options.colorTexture, format)
-        emissiveTexture = await createTextureFromBuffer(cobalt, 'emissive sprite', node.options.emissiveTexture, format)
+        colorTexture = await createTextureFromBuffer(
+            cobalt,
+            'sprite',
+            node.options.colorTexture,
+            format,
+        )
+        emissiveTexture = await createTextureFromBuffer(
+            cobalt,
+            'emissive sprite',
+            node.options.emissiveTexture,
+            format,
+        )
     }
 
     // Map sprite name → ID
-    const idByName = new Map(spritesheet.names.map((n,i)=>[n,i]))
-    
+    const idByName = new Map(spritesheet.names.map((n, i) => [n, i]))
+
     return {
         colorTexture,
         emissiveTexture,
@@ -67,8 +84,7 @@ async function init (cobalt, node) {
     }
 }
 
-
-function destroy (node) {
+function destroy(node) {
     node.data.quads.buffer.destroy()
     node.data.colorTexture.buffer.destroy()
     node.data.emissiveTexture.texture.destroy()

package/src/tile-hdr/atlas.js

@@ -1,21 +1,19 @@
+import round from 'round-half-up-symmetric'
 import createTextureFromBuffer from '../create-texture-from-buffer.js'
-import createTextureFromUrl    from '../create-texture-from-url.js'
-import getPreferredFormat      from '../get-preferred-format.js'
-import tileWGSL                from './tile.wgsl'
-import round                   from 'round-half-up-symmetric'
-
+import createTextureFromUrl from '../create-texture-from-url.js'
+import getPreferredFormat from '../get-preferred-format.js'
+import tileWGSL from './tile.wgsl'
 
 const _buf = new Float32Array(8) //(136)  // tile instance data stored in a UBO
 
-
 // shared tile atlas resource, used by each tile render node
 export default {
     type: 'cobalt:tileAtlas',
-    refs: [ ],
+    refs: [],
 
     // @params Object cobalt renderer world object
     // @params Object options optional data passed when initing this node
-    onInit: async function (cobalt, options={}) {
+    onInit: async function (cobalt, options = {}) {
         return init(cobalt, options)
     },
 
@@ -25,7 +23,7 @@ export default {
 
     onDestroy: function (cobalt, node) {
         // any cleanup for your node should go here (releasing textures, etc.)
-        destroy(data)
+        destroy(node)
     },
 
     onResize: function (cobalt, node) {
@@ -38,8 +36,7 @@ export default {
     },
 }
 
-
-async function init (cobalt, nodeData) {
+async function init(cobalt, nodeData) {
     const { canvas, device } = cobalt
 
     const format = nodeData.options.format || 'rgba8unorm'
@@ -48,16 +45,25 @@ async function init (cobalt, nodeData) {
 
     if (canvas) {
         // browser (canvas) path
-        atlasMaterial = await createTextureFromUrl(cobalt, 'tile atlas', nodeData.options.textureUrl, format)
-    }
-    else {
+        atlasMaterial = await createTextureFromUrl(
+            cobalt,
+            'tile atlas',
+            nodeData.options.textureUrl,
+            format,
+        )
+    } else {
         // sdl + gpu path
-        atlasMaterial = await createTextureFromBuffer(cobalt, 'tile atlas', nodeData.options.texture, format)
+        atlasMaterial = await createTextureFromBuffer(
+            cobalt,
+            'tile atlas',
+            nodeData.options.texture,
+            format,
+        )
     }
 
     const uniformBuffer = device.createBuffer({
         size: 32, //32 + (16 * 32), // in bytes.  32 for common data + (32 max tile layers * 16 bytes per tile layer)
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
 
     const atlasBindGroupLayout = device.createBindGroupLayout({
@@ -65,18 +71,18 @@ async function init (cobalt, nodeData) {
             {
                 binding: 0,
                 visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-                buffer: { }
+                buffer: {},
             },
             {
                 binding: 1,
                 visibility: GPUShaderStage.FRAGMENT,
-                texture:  { }
+                texture: {},
             },
             {
                 binding: 2,
                 visibility: GPUShaderStage.FRAGMENT,
-                sampler: { }
-            }
+                sampler: {},
+            },
         ],
     })
 
@@ -86,18 +92,18 @@ async function init (cobalt, nodeData) {
             {
                 binding: 0,
                 resource: {
-                    buffer: uniformBuffer
-                }
+                    buffer: uniformBuffer,
+                },
             },
             {
                 binding: 1,
-                resource: atlasMaterial.view
+                resource: atlasMaterial.view,
             },
             {
                 binding: 2,
-                resource: atlasMaterial.sampler
-            }
-        ]
+                resource: atlasMaterial.sampler,
+            },
+        ],
     })
 
     const tileBindGroupLayout = device.createBindGroupLayout({
@@ -105,38 +111,38 @@ async function init (cobalt, nodeData) {
             {
                 binding: 0,
                 visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-                buffer: { }
+                buffer: {},
             },
             {
                 binding: 1,
                 visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-                texture:  { }
+                texture: {},
             },
             {
                 binding: 2,
                 visibility: GPUShaderStage.FRAGMENT,
-                sampler: { }
+                sampler: {},
             },
         ],
     })
 
     const pipelineLayout = device.createPipelineLayout({
-        bindGroupLayouts: [ tileBindGroupLayout, atlasBindGroupLayout ]
+        bindGroupLayouts: [tileBindGroupLayout, atlasBindGroupLayout],
     })
 
     const pipeline = device.createRenderPipeline({
         label: 'tileatlas',
         vertex: {
             module: device.createShaderModule({
-                code: tileWGSL
+                code: tileWGSL,
             }),
             entryPoint: 'vs_main',
-            buffers: [ ]
+            buffers: [],
         },
 
         fragment: {
             module: device.createShaderModule({
-                code: tileWGSL
+                code: tileWGSL,
             }),
             entryPoint: 'fs_main',
             targets: [
@@ -149,24 +155,24 @@ async function init (cobalt, nodeData) {
                         },
                         alpha: {
                             srcFactor: 'zero',
-                            dstFactor: 'one'
-                        }
-                    }
-                }
-            ]
+                            dstFactor: 'one',
+                        },
+                    },
+                },
+            ],
         },
 
         primitive: {
-            topology: 'triangle-list'
+            topology: 'triangle-list',
         },
 
-        layout: pipelineLayout
+        layout: pipelineLayout,
     })
 
     return {
         pipeline,
         uniformBuffer,
-        atlasBindGroup,   // tile atlas texture, transform UBO
+        atlasBindGroup, // tile atlas texture, transform UBO
         atlasMaterial,
 
         tileBindGroupLayout,
@@ -176,14 +182,12 @@ async function init (cobalt, nodeData) {
     }
 }
 
-
-function destroy (data) {
+function destroy(data) {
     data.atlasMaterial.texture.destroy()
     data.atlasMaterial.texture = undefined
 }
 
-
-function _writeTileBuffer (c, nodeData) {
+function _writeTileBuffer(c, nodeData) {
     // c.viewport.position is the top left visible corner of the level
     _buf[0] = round(c.viewport.position[0])
     _buf[1] = round(c.viewport.position[1])
@@ -194,14 +198,14 @@ function _writeTileBuffer (c, nodeData) {
     const GAME_WIDTH = c.viewport.width / c.viewport.zoom
     const GAME_HEIGHT = c.viewport.height / c.viewport.zoom
 
-    _buf[2] = GAME_WIDTH / tileScale          // viewportSize[0]
-    _buf[3] = GAME_HEIGHT / tileScale         // viewportSize[1]
+    _buf[2] = GAME_WIDTH / tileScale // viewportSize[0]
+    _buf[3] = GAME_HEIGHT / tileScale // viewportSize[1]
 
-    _buf[4] = 1 / tile.atlasMaterial.texture.width  // inverseAtlasTextureSize[0]
+    _buf[4] = 1 / tile.atlasMaterial.texture.width // inverseAtlasTextureSize[0]
     _buf[5] = 1 / tile.atlasMaterial.texture.height // inverseAtlasTextureSize[1]
 
     _buf[6] = tileSize
-    _buf[7] = 1.0 / tileSize                            // inverseTileSize
-    
+    _buf[7] = 1.0 / tileSize // inverseTileSize
+
     c.device.queue.writeBuffer(tile.uniformBuffer, 0, _buf, 0, 8)
 }