npm - @footgun/cobalt - Versions diffs - 0.1.0 - Mend

@footgun/cobalt 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/LICENSE +21 -0
package/README.md +18 -0
package/bundle.js +284 -0
package/cobalt2.jpeg +0 -0
package/esbuild.js +20 -0
package/examples/01-primitives/Game.js +8 -0
package/examples/01-primitives/component-animation.js +8 -0
package/examples/01-primitives/component-transform.js +13 -0
package/examples/01-primitives/constants.js +6 -0
package/examples/01-primitives/deps.js +2 -0
package/examples/01-primitives/entity-sprite.js +47 -0
package/examples/01-primitives/index.html +191 -0
package/examples/01-primitives/system-renderer.js +37 -0
package/examples/02-sprites/Game.js +8 -0
package/examples/02-sprites/assets/spritesheet.json +6276 -0
package/examples/02-sprites/assets/spritesheet.png +0 -0
package/examples/02-sprites/assets/spritesheet_emissive.png +0 -0
package/examples/02-sprites/component-animation.js +8 -0
package/examples/02-sprites/component-transform.js +13 -0
package/examples/02-sprites/constants.js +6 -0
package/examples/02-sprites/deps.js +2 -0
package/examples/02-sprites/entity-sprite.js +47 -0
package/examples/02-sprites/index.html +310 -0
package/examples/02-sprites/system-renderer.js +38 -0
package/examples/03-tiles/Game.js +8 -0
package/examples/03-tiles/assets/spelunky-tiles.png +0 -0
package/examples/03-tiles/assets/spelunky0.png +0 -0
package/examples/03-tiles/assets/spelunky1.png +0 -0
package/examples/03-tiles/component-animation.js +8 -0
package/examples/03-tiles/component-transform.js +13 -0
package/examples/03-tiles/constants.js +6 -0
package/examples/03-tiles/deps.js +2 -0
package/examples/03-tiles/entity-sprite.js +47 -0
package/examples/03-tiles/index.html +309 -0
package/examples/03-tiles/system-renderer.js +38 -0
package/examples/04-overlay/assets/spritesheet.json +22 -0
package/examples/04-overlay/assets/spritesheet.png +0 -0
package/examples/04-overlay/assets/spritesheet_emissive.png +0 -0
package/examples/04-overlay/constants.js +6 -0
package/examples/04-overlay/deps.js +1 -0
package/examples/04-overlay/index.html +133 -0
package/examples/05-bloom/Game.js +8 -0
package/examples/05-bloom/assets/spritesheet.json +6276 -0
package/examples/05-bloom/assets/spritesheet.png +0 -0
package/examples/05-bloom/assets/spritesheet_emissive.png +0 -0
package/examples/05-bloom/component-animation.js +8 -0
package/examples/05-bloom/component-transform.js +13 -0
package/examples/05-bloom/constants.js +6 -0
package/examples/05-bloom/deps.js +2 -0
package/examples/05-bloom/entity-sprite.js +47 -0
package/examples/05-bloom/index.html +357 -0
package/examples/05-bloom/system-renderer.js +38 -0
package/examples/06-displacement/Game.js +8 -0
package/examples/06-displacement/assets/displacement_map_repeat.jpg +0 -0
package/examples/06-displacement/assets/spelunky-tiles.png +0 -0
package/examples/06-displacement/assets/spelunky0.png +0 -0
package/examples/06-displacement/assets/spelunky1.png +0 -0
package/examples/06-displacement/component-animation.js +8 -0
package/examples/06-displacement/component-transform.js +13 -0
package/examples/06-displacement/constants.js +6 -0
package/examples/06-displacement/deps.js +2 -0
package/examples/06-displacement/entity-sprite.js +47 -0
package/examples/06-displacement/index.html +350 -0
package/examples/06-displacement/system-renderer.js +38 -0
package/examples/07-sdl/assets/spritesheet.json +22 -0
package/examples/07-sdl/assets/spritesheet.png +0 -0
package/examples/07-sdl/assets/spritesheet_emissive.png +0 -0
package/examples/07-sdl/main.js +109 -0
package/examples/07-sdl/package.json +19 -0
package/examples/08-light/Game.js +8 -0
package/examples/08-light/assets/spelunky-tiles.png +0 -0
package/examples/08-light/assets/spelunky0.png +0 -0
package/examples/08-light/assets/spelunky1.png +0 -0
package/examples/08-light/constants.js +6 -0
package/examples/08-light/deps.js +2 -0
package/examples/08-light/index.html +477 -0
package/package.json +34 -0
package/src/bloom/bloom.js +467 -0
package/src/bloom/bloom.wgsl +176 -0
package/src/cobalt.js +231 -0
package/src/create-texture-from-buffer.js +39 -0
package/src/create-texture-from-url.js +35 -0
package/src/create-texture.js +46 -0
package/src/deps.js +3 -0
package/src/displacement/composition.wgsl +58 -0
package/src/displacement/displacement-composition.ts +161 -0
package/src/displacement/displacement-parameters-buffer.ts +44 -0
package/src/displacement/displacement-texture.ts +221 -0
package/src/displacement/displacement.js +160 -0
package/src/displacement/displacement.wgsl +31 -0
package/src/displacement/triangles-buffer.ts +95 -0
package/src/fb-blit/fb-blit.js +161 -0
package/src/fb-blit/fb-blit.wgsl +40 -0
package/src/fb-texture/fb-texture.js +56 -0
package/src/light/README.md +61 -0
package/src/light/light.js +148 -0
package/src/light/lights-buffer.ts +98 -0
package/src/light/lights-renderer.ts +278 -0
package/src/light/public-api.js +20 -0
package/src/light/readme/01_illumination.webp +0 -0
package/src/light/readme/02_lights_texture.webp +0 -0
package/src/light/readme/03_lights_texture_decomposed.webp +0 -0
package/src/light/readme/04_lights_texture_mask.webp +0 -0
package/src/light/readme/05_lights_obstacle_decomposition.webp +0 -0
package/src/light/readme/06_lights_hard_cast_shadows.webp +0 -0
package/src/light/texture/lights-texture-initializer.ts +191 -0
package/src/light/texture/lights-texture-mask.ts +286 -0
package/src/light/texture/lights-texture.ts +121 -0
package/src/light/types.ts +23 -0
package/src/light/viewport.ts +63 -0
package/src/overlay/constants.js +1 -0
package/src/overlay/overlay.js +341 -0
package/src/overlay/overlay.wgsl +88 -0
package/src/primitives/constants.js +1 -0
package/src/primitives/primitives.js +252 -0
package/src/primitives/primitives.wgsl +54 -0
package/src/primitives/public-api.js +325 -0
package/src/scene-composite/scene-composite.js +168 -0
package/src/scene-composite/scene-composite.wgsl +94 -0
package/src/sprite/constants.js +1 -0
package/src/sprite/create-sprite-quads.js +60 -0
package/src/sprite/public-api.js +215 -0
package/src/sprite/read-spritesheet.js +103 -0
package/src/sprite/sorted-binary-insert.js +45 -0
package/src/sprite/sprite.js +268 -0
package/src/sprite/sprite.wgsl +103 -0
package/src/sprite/spritesheet.js +212 -0
package/src/tile/atlas.js +193 -0
package/src/tile/tile.js +171 -0
package/src/tile/tile.wgsl +105 -0
package/src/uuid.js +3 -0

package/examples/05-bloom/assets/spritesheet.png ADDED Viewed

Binary file

package/examples/05-bloom/assets/spritesheet_emissive.png ADDED Viewed

Binary file

package/examples/05-bloom/component-animation.js ADDED Viewed

@@ -0,0 +1,8 @@
+export default function componentAnimation (obj) {
+    return {
+        name: obj.name || '',
+        frame: obj.frame || 0,
+        accumulator: obj.accumulator || 0,
+        done: false,
+    }
+}

package/examples/05-bloom/component-transform.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { vec3 } from './deps.js'
+export default function componentTransform (obj) {
+    return {
+        position: obj.position || vec3.create(0, 0, 0),
+        rotation: obj.rotation || 0,
+        // if set, this means the position is relative to another transform
+        // rather than being in world space
+        relativeTo: obj.relativeTo,
+    }
+}

package/examples/05-bloom/constants.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+   // virtual game screen dimensions in 16:9
+   GAME_WIDTH: 480,
+   GAME_HEIGHT: 270,
+}

package/examples/05-bloom/deps.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as ECS } from 'https://cdn.skypack.dev/pin/ecs@v0.21.0-P934LlnmSF5QgmGODbyN/mode=imports/optimized/ecs.js'
2	+ export { mat4, vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'

package/examples/05-bloom/entity-sprite.js ADDED Viewed

@@ -0,0 +1,47 @@
+import * as Cobalt         from '../../bundle.js'
+import animationComponent  from './component-animation.js'
+import transformComponent  from './component-transform.js'
+import { ECS, vec3, vec4 } from './deps.js'
+export default function spriteEntity (world, opts) {
+    const ENTITY = ECS.createEntity(world)
+    ECS.addComponentToEntity(world, ENTITY, 'transform', transformComponent({
+        position: vec3.create(opts.position[0], opts.position[1], 0)
+    }))
+    ECS.addComponentToEntity(world, ENTITY, 'animation', animationComponent({
+        name: opts.name
+    }))
+    const tint = vec4.create(0, 0, 0, 0)
+    const opacity = opts.opacity ?? 255
+    const spriteNode = opts.spriteNode
+    const cobaltSpriteId = spriteNode.addSprite(opts.name,
+                                           opts.position,
+                                           vec3.create(1, 1, 1),
+                                           tint,
+                                           opacity / 255,
+                                           opts.rotation || 0,
+                                           opts.zIndex)
+    ECS.addComponentToEntity(world, ENTITY, 'sprite', {
+        name: opts.name,
+        layer: opts.layer,
+        rotation: 0, // radians
+        scale: vec3.create(1, 1, 1),
+        opacity: 1,  // 0 is transparent, 1 is opaque
+        tint: vec4.create(0, 0, 0, 0),
+        // cobalt references
+        cobaltSpriteId,
+        spriteNode,
+    })
+    return ENTITY
+}

package/examples/05-bloom/index.html ADDED Viewed

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title class="titleText">Web GPU prototyping</title>
+        <meta name="description" content="Web GPU 2d cobalt" />
+        <meta name="author" content="Michael Reinstein" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <style>
+            body {
+                padding-inline: 40px;
+                margin: 0;
+                overscroll-behavior: none;
+            }
+            img {
+                image-rendering: -moz-crisp-edges;
+                image-rendering: -webkit-crisp-edges;
+                image-rendering: pixelated;
+                image-rendering: crisp-edges;
+            }
+            .viewport-container {
+                position: fixed;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            canvas {
+                background-color: green;
+                border: none;
+                image-rendering: -moz-crisp-edges;
+                image-rendering: -webkit-crisp-edges;
+                image-rendering: pixelated;
+                image-rendering: crisp-edges;
+            }
+            canvas::-webkit-scrollbar {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Bloom Node</h1>
+        <p>
+            That classic beautiful glow.
+        </p>
+        <div class="viewport-container">
+            <canvas id="viewport" width="480" height="270"></canvas>
+        </div>
+<script type="module">
+import Game             from './Game.js'
+import * as Cobalt      from '../../bundle.js'
+import constants        from './constants.js'
+import dat              from 'https://cdn.skypack.dev/pin/dat.gui@v0.7.9-2wtQAdFH5SRwnJLDWGNz/mode=imports,min/optimized/dat.gui.js'
+import debounce         from 'https://cdn.skypack.dev/pin/lodash.debounce@v4.0.8-4GXU9B066R3Th6HmjZmO/lodash.debounce.js'
+//import animationSystem  from './system-animation.js'
+import rendererSystem   from './system-renderer.js'
+import spriteEntity     from './entity-sprite.js'
+import { ECS, vec2 }    from './deps.js'
+async function main () {
+    const canvas = document.querySelector('canvas')
+    const viewportWidth = constants.GAME_WIDTH
+    const viewportHeight = constants.GAME_HEIGHT
+    Game.renderer = await Cobalt.init(canvas, viewportWidth, viewportHeight)
+    // instantiate all resource nodes
+    const hdrTex = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'hdr color texture',
+            format: 'rgba16float',
+            mip_count: 1,
+            viewportScale: 1.0,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        }
+    })
+    const spritesheet = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:spritesheet',
+        refs: { },
+        options: {
+            spriteSheetJsonUrl: './assets/spritesheet.json',
+            colorTextureUrl: 'assets/spritesheet.png',
+            emissiveTextureUrl: 'assets/spritesheet_emissive.png'
+        }
+    })
+    const emissiveTex = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'hdr emissive texture',
+            format: 'rgba16float',
+            mip_count: 1,
+            viewportScale: 1.0,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
+        }
+    })
+    const bloomTex = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'hdr bloom texture',
+            format: 'rgba16float',
+            mip_count: 7,
+            viewportScale: 0.5,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        }
+    })
+    const spriteNode = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:sprite',
+        refs: {
+            // key is the var name defined in this node
+            // value is the var name in the cobalt resources dictionary
+            spritesheet: spritesheet,
+            emissive: emissiveTex,
+            hdr: hdrTex,
+        },
+        options: {
+            loadOp: 'clear',
+        }
+    })
+    const bloomNode = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:bloom',
+        refs: {
+            // key is the var name defined in this node
+            // value is the var name in the cobalt resources dictionary
+            emissive: emissiveTex,
+            hdr: hdrTex,
+            bloom: bloomTex
+        },
+        options: {
+            // any extra options you want to pass to this node
+            bloom_intensity: 45.0,
+            bloom_combine_constant: 0.3,
+            bloom_knee: 0.2,
+            bloom_threshold: 0.1, // 1.0
+            // sprite instance 1
+            sprite_instances: [
+                {
+                    emissive_intensity: 1.0,
+                },
+                {
+                    emissive_intensity: 0.5,
+                },
+            ],
+        }
+    })
+    const tmpTex = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbTexture',
+        refs: { },
+        options: {
+            label: 'bloom + hdr compositing',
+            format: 'bgra8unorm',
+            mip_count: 1,
+            viewportScale: 1.0,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
+        }
+    })
+    const compositeNode = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:composite',
+        refs: {
+            hdr: hdrTex,
+            bloom: bloomTex,
+            combined: tmpTex,
+        },
+        options: { }
+    })
+    const b = await Cobalt.initNode(Game.renderer, {
+        type: 'cobalt:fbBlit',
+        refs: {
+            in: tmpTex,
+            out: 'FRAME_TEXTURE_VIEW',
+        },
+        options: { }
+    })
+    // use resizeViewport to init values on load:
+    resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+    // window resize is *expensive* - best to debounce:
+    const debouncedResize = debounce(function () {
+       resizeViewport(Game.renderer, window.innerWidth, window.innerHeight)
+    }, 50)
+    window.addEventListener('resize', debouncedResize, { passive: true })
+    const gui = new dat.GUI()
+    const config = bloomNode.options
+    gui.add(config, 'bloom_intensity', 0, 200).onChange((v) => {
+        updateFinalParams(config.bloom_intensity, config.bloom_combine_constant, config.bloom_knee, config.bloom_threshold)
+    })
+    gui.add(config, 'bloom_combine_constant', 0.0, 1.0).onChange((v) => {
+        updateFinalParams(config.bloom_intensity, config.bloom_combine_constant, config.bloom_knee, config.bloom_threshold)
+    })
+    gui.add(config, 'bloom_knee', 0.0, 50.0).onChange((v) => {
+        updateFinalParams(config.bloom_intensity, config.bloom_combine_constant, config.bloom_knee, config.bloom_threshold)
+    })
+    gui.add(config, 'bloom_threshold', 0.0, 1.0).onChange((v) => {
+        updateFinalParams(config.bloom_intensity, config.bloom_combine_constant, config.bloom_knee, config.bloom_threshold)
+    })
+    const updateFinalParams = function (bloom_intensity=40.0, bloom_combine_constant=0.68, bloom_knee=0.2, bloom_threshold=0.1) {
+        const { device } = Game.renderer
+        device.queue.writeBuffer(
+            compositeNode.data.params_buf,
+            0,
+            new Float32Array([ bloom_intensity, bloom_combine_constant ])
+        )
+        device.queue.writeBuffer(
+            bloomNode.data.params_buf,
+            0,
+            new Float32Array([ bloom_threshold,
+                                bloom_threshold - bloom_knee,
+                                bloom_knee * 2.0,
+                                0.25 / bloom_knee,
+                                bloom_combine_constant,
+                                // require byte alignment bs
+                                0,
+                                0,
+                                0, ])
+        )
+    }
+    const world = ECS.createWorld()
+    ECS.addSystem(world, rendererSystem(Game.renderer))
+    Cobalt.setViewportPosition(Game.renderer, [ 240, 135 ])
+    ECS.addSystem(world, function cameraLoopSystem(world) {
+        const onUpdate = function (dt) {
+            const elapsed = performance.now()
+            const x = (Math.sin(elapsed / 2000) * 0.5 + 0.5) * 128
+            const y = (Math.sin(elapsed / 5000) * 0.5 + 0.5) * 170
+            //const { tileScale } = Game.renderer.tile
+            //console.log(x, y)
+            Cobalt.setViewportPosition(Game.renderer, [ x, y ])
+        }
+        return { onUpdate }
+    })
+    Game.world = world
+    // test sprites
+    const s2 = spriteEntity(world, {
+        name: 'health_empty-0.png',
+        position: [ 50, 50 ],
+        zIndex: 4,
+        emissiveIntensity: 0.5,
+        spriteNode,
+    })
+    const s = spriteEntity(world, {
+        name: 'health-0.png',
+        position: [ 240, 135 ],
+        zIndex: 4,
+        emissiveIntensity: 0.5,
+        spriteNode,
+    })
+    const gameLoop = function () {
+        tick(Game)
+        requestAnimationFrame(gameLoop)
+    }
+    requestAnimationFrame(gameLoop)
+}
+function tick (context) {
+    const newTime = performance.now()
+    const frameTime = newTime - context.lastFrameTime
+    context.lastFrameTime = newTime
+    ECS.update(context.world, frameTime)
+    ECS.cleanup(context.world)
+}
+function resizeViewport (renderer, width, height) {
+    const { canvas, device } = renderer
+    // determine which screen dimension is most constrained
+    // we floor the render scale to an integer because we get weird texture artifacts when trying to render at
+    // certain float values (e.g., 3.0145833333333334)
+    const renderScale = Math.floor(Math.min(width/constants.GAME_WIDTH, height/constants.GAME_HEIGHT))
+    canvas.width = Math.ceil(constants.GAME_WIDTH)
+    canvas.height = Math.ceil(constants.GAME_HEIGHT)
+    Cobalt.setViewportDimensions(renderer, constants.GAME_WIDTH, constants.GAME_HEIGHT)
+    // https://www.khronos.org/webgl/wiki/HandlingHighDPI
+    // webgl display resolution size within canvas
+    const resolution = window.devicePixelRatio || 1
+    // center the canvas if native window doesn't match aspect ratio
+    canvas.style.width = canvas.width * renderScale + 'px'
+    canvas.style.height = canvas.height * renderScale + 'px'
+    canvas.style.left = Math.round((width - canvas.width * renderScale) / 2) + 'px'
+    canvas.style.top = Math.round((height - canvas.height * renderScale) / 2) + 'px'
+}
+main()
+</script>
+    </body>
+</html>

package/examples/05-bloom/system-renderer.js ADDED Viewed

@@ -0,0 +1,38 @@
+import * as Cobalt from '../../bundle.js'
+import Game        from './Game.js'
+import { ECS }     from './deps.js'
+const SPRITE_QUERY = [ 'sprite' ]
+// @param Object renderer Cobalt render state
+export default function createRendererSystem (renderer) {
+    // temporary variables, allocated once to avoid garbage collection
+    const buf = new Float32Array(136)  // tile instance data stored in a UBO
+    const removedEntities = {
+        count: 0,
+        entries: new Array(100)
+    }
+    return function rendererSystem (world) {
+        const onUpdate = function (/*dt*/) {
+            const device = renderer.device
+            const context = renderer.context
+            ECS.getEntities(world, SPRITE_QUERY, 'removed', removedEntities)
+            for (let i=0; i < removedEntities.count; i++) {
+                const oldSprite = removedEntities.entries[i]
+                oldSprite.spriteNode.removeSprite(oldSprite.sprite.cobaltSpriteId)
+            }
+            Cobalt.draw(Game.renderer)
+        }
+        return { onUpdate }
+    }
+}

package/examples/06-displacement/Game.js ADDED Viewed

@@ -0,0 +1,8 @@
+// all of the example's globals are consolidated here
+export default {
+    renderer: undefined,     // cobalt instance
+    world: undefined,        // ECS instance
+    // timekeeping (in milliseconds)
+    lastFrameTime: 0,        // local time the last frame ran
+}

package/examples/06-displacement/assets/displacement_map_repeat.jpg ADDED Viewed

Binary file

package/examples/06-displacement/assets/spelunky-tiles.png ADDED Viewed

Binary file

package/examples/06-displacement/assets/spelunky0.png ADDED Viewed

Binary file

package/examples/06-displacement/assets/spelunky1.png ADDED Viewed

Binary file

package/examples/06-displacement/component-animation.js ADDED Viewed

@@ -0,0 +1,8 @@
+export default function componentAnimation (obj) {
+    return {
+        name: obj.name || '',
+        frame: obj.frame || 0,
+        accumulator: obj.accumulator || 0,
+        done: false,
+    }
+}

package/examples/06-displacement/component-transform.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { vec3 } from './deps.js'
+export default function componentTransform (obj) {
+    return {
+        position: obj.position || vec3.create(0, 0, 0),
+        rotation: obj.rotation || 0,
+        // if set, this means the position is relative to another transform
+        // rather than being in world space
+        relativeTo: obj.relativeTo,
+    }
+}

package/examples/06-displacement/constants.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+   // virtual game screen dimensions in 16:9
+   GAME_WIDTH: 480,
+   GAME_HEIGHT: 270,
+}

package/examples/06-displacement/deps.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as ECS } from 'https://cdn.skypack.dev/pin/ecs@v0.21.0-P934LlnmSF5QgmGODbyN/mode=imports/optimized/ecs.js'
2	+ export { mat4, vec2, vec3, vec4 } from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'

package/examples/06-displacement/entity-sprite.js ADDED Viewed

@@ -0,0 +1,47 @@
+import * as Cobalt         from '../../bundle.js'
+import animationComponent  from './component-animation.js'
+import transformComponent  from './component-transform.js'
+import { ECS, vec3, vec4 } from './deps.js'
+export default function spriteEntity (world, opts) {
+    const ENTITY = ECS.createEntity(world)
+    ECS.addComponentToEntity(world, ENTITY, 'transform', transformComponent({
+        position: vec3.create(opts.position[0], opts.position[1], 0)
+    }))
+    ECS.addComponentToEntity(world, ENTITY, 'animation', animationComponent({
+        name: opts.name
+    }))
+    const tint = vec4.create(0, 0, 0, 0)
+    const opacity = opts.opacity ?? 255
+    const spriteNode = opts.spriteNode
+    const cobaltSpriteId = spriteNode.addSprite(opts.name,
+                                           opts.position,
+                                           vec3.create(1, 1, 1),
+                                           tint,
+                                           opacity / 255,
+                                           opts.rotation || 0,
+                                           opts.zIndex)
+    ECS.addComponentToEntity(world, ENTITY, 'sprite', {
+        name: opts.name,
+        layer: opts.layer,
+        rotation: 0, // radians
+        scale: vec3.create(1, 1, 1),
+        opacity: 1,  // 0 is transparent, 1 is opaque
+        tint: vec4.create(0, 0, 0, 0),
+        // cobalt references
+        cobaltSpriteId,
+        spriteNode,
+    })
+    return ENTITY
+}