improve lookbook

Author: spearwolf

apps/lookbook/public/assets/skinball-256.png

@@ -0,0 +1,69 @@
+{
+  "frames": {
+    "head-00": {
+      "frame": { "x": 286, "y": 1077, "w": 274, "h": 336 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 274, "h": 336 },
+      "sourceSize": { "w": 274, "h": 336 }
+    },
+    "robot-00": {
+      "frame": { "x": 445, "y": 305, "w": 351, "h": 356 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 351, "h": 356 },
+      "sourceSize": { "w": 351, "h": 356 }
+    },
+    "robot-01": {
+      "frame": { "x": 1, "y": 431, "w": 335, "h": 339 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 335, "h": 339 },
+      "sourceSize": { "w": 335, "h": 339 }
+    },
+    "robot-02": {
+      "frame": { "x": 1, "y": 772, "w": 283, "h": 423 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 283, "h": 423 },
+      "sourceSize": { "w": 283, "h": 423 }
+    },
+    "robot-03": {
+      "frame": { "x": 445, "y": 1, "w": 384, "h": 302 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 384, "h": 302 },
+      "sourceSize": { "w": 384, "h": 302 }
+    },
+    "robot-04": {
+      "frame": { "x": 831, "y": 1, "w": 126, "h": 150 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 126, "h": 150 },
+      "sourceSize": { "w": 126, "h": 150 }
+    },
+    "robot-05": {
+      "frame": { "x": 633, "y": 663, "w": 283, "h": 414 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 283, "h": 414 },
+      "sourceSize": { "w": 283, "h": 414 }
+    },
+    "skull-00": {
+      "frame": { "x": 1, "y": 1, "w": 442, "h": 428 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 442, "h": 428 },
+      "sourceSize": { "w": 442, "h": 428 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.0",
+    "image": "skulls-n-robots--natural.png",
+    "format": "RGBA8888",
+    "size": { "w": 1024, "h": 2048 },
+    "scale": "1",
+    "smartupdate": "$TexturePacker:SmartUpdate:9d5eb569e15f9fb706b8e29bb02bd21e:67229d0c6336253efe0d6524e8cb93e2:a8f162fc7a0dcbafee8f3f64b02e2a94$"
+  }
+}

apps/lookbook/public/assets/skulls-n-robots--natural.png

@@ -0,0 +1,34 @@
+{
+  "frames": {
+    "ship-00": {
+      "frame": { "x": 844, "y": 1, "w": 468, "h": 466 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 468, "h": 466 },
+      "sourceSize": { "w": 468, "h": 466 }
+    },
+    "ship-01": {
+      "frame": { "x": 1, "y": 1, "w": 841, "h": 920 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 841, "h": 920 },
+      "sourceSize": { "w": 841, "h": 920 }
+    },
+    "ship-02": {
+      "frame": { "x": 844, "y": 469, "w": 443, "h": 418 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 443, "h": 418 },
+      "sourceSize": { "w": 443, "h": 418 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.0",
+    "image": "spaceships.png",
+    "format": "RGBA8888",
+    "size": { "w": 1313, "h": 1313 },
+    "scale": "1",
+    "smartupdate": "$TexturePacker:SmartUpdate:261fbe1c75839df77d33ecf1e185da74:0d916bf28d20488915a6dd96169d5eee:3272f82166f65e17cc3a00865a7647ff$"
+  }
+}

apps/lookbook/public/assets/skulls-n-robots.json

@@ -14,7 +14,7 @@ import {title} from './_textured-sprites.json';
   }
   body {
     background-color: #391e39;
-    background: radial-gradient(circle, rgb(82 95 132) 0%, rgb(149 188 199) 100%);
+    background: radial-gradient(circle, rgb(175 82 82) 0%, rgb(90 148 191) 100%);
     color: #eee;
     font-family: sans-serif;
     font-size: 16px;
@@ -35,17 +35,17 @@ import {title} from './_textured-sprites.json';
   const demo = new PerspectiveOrbitDemo(document.getElementById('canvas-container'), {antialias: false});
 
   demo.on('init', async ({scene}) => {
-    const CAPACITY = 333;
+    const CAPACITY = 256;
 
     const geometry = new TexturedSpritesGeometry(CAPACITY);
 
-    const {tileSet, texture} = await new TileSetLoader().loadAsync(assetsUrl('nobinger-anim-sheet.png'), {
-      tileWidth: 64,
-      tileHeight: 64,
+    const {tileSet, texture} = await new TileSetLoader().loadAsync(assetsUrl('skinball-256.png'), {
+      tileWidth: 256,
+      tileHeight: 256,
       margin: 1,
     });
 
-    const bouncingSprites = new BouncingSprites(geometry.instancedPool, tileSet.atlas, 100, 75, 7, CAPACITY);
+    const bouncingSprites = new BouncingSprites(geometry.instancedPool, tileSet.atlas, 100, 75, 4, CAPACITY);
 
     bouncingSprites.createSprites();