Spritesheet Atlas Unpacker

{"name":"Spritesheet Atlas Unpacker 6-3-2024","description":"A template project that contains code to unpack a spritesheet with a JSON atlas","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-05-27 at 9.52.57 AM.png","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-06-03T19:11:55.157137Z","updated_at":"2024-06-03T19:11:55.157140Z","user_id":5,"status":"PUBLIC","parent_id":1600,"id":1730,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// SPRITESHEET ATLAS UNPACKER TEMPLATE\n// ————— by Kristen —————\n// Assets by Kenney -- https://kenney.nl/assets/pixel-platformer-farm-expansion\n// Using LeshyLabs Spritesheet Tool https://www.leshylabs.com/apps/sstool/\n\nlet spriteSheet;\nlet assets = {};\n\n/* REPLACE THIS! Directly include the JSON data within the script\n Ensure the spritesheet is in \"JSON-TP-Array\" format, the Texture Packer Array format (you can create your atlas with https://www.leshylabs.com/apps/sstool/)\n Ideally, ensure the filenames are human-readable and descriptive so that Jippity understands what assets you have available\n Ex: \"flower1\" is a good name, \"tile004\" is a bad name */\nlet spriteAtlas = { \"frames\": [{ \"filename\": \"platform_middle\", \"frame\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"platform_left\", \"frame\": { \"x\": 0, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"platform_single\", \"frame\": { \"x\": 19, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"platform_right\", \"frame\": { \"x\": 19, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"jack_o_lantern\", \"frame\": { \"x\": 0, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"pumpkin\", \"frame\": { \"x\": 19, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"hay_barrel\", \"frame\": { \"x\": 38, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"hay_left\", \"frame\": { \"x\": 38, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"hay_single\", \"frame\": { \"x\": 38, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"hay_right\", \"frame\": { \"x\": 0, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"sunflower\", \"frame\": { \"x\": 19, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"pail\", \"frame\": { \"x\": 38, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"watering_can\", \"frame\": { \"x\": 57, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"shovel_top\", \"frame\": { \"x\": 57, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"sunflower_stalk\", \"frame\": { \"x\": 57, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"trellis_left\", \"frame\": { \"x\": 57, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"parsnip\", \"frame\": { \"x\": 0, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"shovel_bottom\", \"frame\": { \"x\": 19, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"trellis_single\", \"frame\": { \"x\": 38, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"trellis_right\", \"frame\": { \"x\": 57, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"trellis_middle\", \"frame\": { \"x\": 76, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_roof_right\", \"frame\": { \"x\": 76, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_roof_left\", \"frame\": { \"x\": 76, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_top_left\", \"frame\": { \"x\": 76, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_top_right\", \"frame\": { \"x\": 76, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_top_middle\", \"frame\": { \"x\": 0, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_middle_middle\", \"frame\": { \"x\": 19, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_middle_left\", \"frame\": { \"x\": 38, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_middle_right\", \"frame\": { \"x\": 57, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_bottom_left\", \"frame\": { \"x\": 76, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_bottom_middle\", \"frame\": { \"x\": 95, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"dirt_bottom_right\", \"frame\": { \"x\": 95, \"y\": 19, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"carrot\", \"frame\": { \"x\": 95, \"y\": 38, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"tomatoes\", \"frame\": { \"x\": 95, \"y\": 57, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"corn\", \"frame\": { \"x\": 95, \"y\": 76, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"wheat\", \"frame\": { \"x\": 95, \"y\": 95, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_roof_middle\", \"frame\": { \"x\": 0, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_center_left\", \"frame\": { \"x\": 19, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_center_middle\", \"frame\": { \"x\": 38, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_center_right\", \"frame\": { \"x\": 57, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_floor_right\", \"frame\": { \"x\": 76, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_floor_middle\", \"frame\": { \"x\": 95, \"y\": 114, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }, { \"filename\": \"greenhouse_floor_left\", \"frame\": { \"x\": 114, \"y\": 0, \"w\": 18, \"h\": 18 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 18, \"h\": 18 }, \"sourceSize\": { \"w\": 18, \"h\": 18 } }], \"meta\": { \"app\": \"https://www.leshylabs.com/apps/sstool/\", \"version\": \"Leshy SpriteSheet Tool v0.8.4\", \"image\": \"farm_spritesheet.png\", \"size\": { \"w\": 132, \"h\": 132 }, \"scale\": 1 } }\n\nfunction preload() {\n // REPLACE THIS! Upload your spritesheet image and replace farm_scene_spritesheet with the name of your image\n spriteSheet = loadImage(\"@asset('farm_scene_spritesheet')\");\n}\n\nfunction setup() {\n createCanvas(400, 400);\n processSpriteAtlas();\n}\n\n// This function does the work of slicing up the spritesheet based on the JSON data\nfunction processSpriteAtlas() {\n let frames = spriteAtlas.frames;\n for (let i = 0; i < frames.length; i++) {\n let frameData = frames[i];\n let frame = frameData.frame;\n let sprite = spriteSheet.get(frame.x, frame.y, frame.w, frame.h);\n // the sprite gets added to the 'assets' object, with the fileName as the sprite key\n assets[frameData.filename] = sprite;\n /* Now, if the sprite's filename was 'mySprite' for example,\n you could access it in your code like so:\n assets[\"mySprite\"]\n */\n }\n}\n\nfunction draw() {\n background(24, 142, 201); // Change to whatever you want; this is a nice blue sky default\n // drawAllSprites();\n drawDemoScene();\n}\n\n/* This function draws all the sprites from the spritesheet to the screen\n in a grid, so that you can see them all laid out */\nfunction drawAllSprites() {\n let x = 20; // Starting x and y coodinates to position sprites\n let y = 20;\n let spacing = 30; // Spacing between each sprite\n\n for (let key in assets) {\n if (assets.hasOwnProperty(key)) {\n image(assets[key], x, y);\n x += spacing;\n if (x > width - spacing) { // Move to next row if end of canvas width is reached\n x = 20;\n y += spacing;\n }\n }\n }\n}\n\n/* This function is a demo scene using the farm_scene_spritesheet in this template example\nwhere the sprites are used after being unpacked from the spritesheet \nto draw a scene, like they might be in a game\nDELETE THIS FUNCTION after swapping out spritesheet image and JSON with your own! */\nfunction drawDemoScene() {\n let groundY = height - 18; // Ground level Y coordinate\n\n // Stack ground tiles\n for (let x = 0; x < width; x += 18) {\n image(assets[\"dirt_bottom_middle\"], x, groundY);\n image(assets[\"dirt_middle_middle\"], x, groundY - 18);\n image(assets[\"dirt_top_middle\"], x, groundY - 36);\n }\n\n // Draw greenhouse\n image(assets[\"greenhouse_floor_left\"], 50, groundY - 54);\n image(assets[\"greenhouse_floor_middle\"], 68, groundY - 54);\n image(assets[\"greenhouse_floor_right\"], 86, groundY - 54);\n\n image(assets[\"greenhouse_center_left\"], 50, groundY - 72);\n image(assets[\"greenhouse_center_middle\"], 68, groundY - 72);\n image(assets[\"greenhouse_center_right\"], 86, groundY - 72);\n\n image(assets[\"greenhouse_roof_left\"], 50, groundY - 90);\n image(assets[\"greenhouse_roof_middle\"], 68, groundY - 90);\n image(assets[\"greenhouse_roof_right\"], 86, groundY - 90);\n\n // Adding some objects on the ground\n image(assets[\"trellis_left\"], 160, groundY - 54);\n image(assets[\"trellis_middle\"], 178, groundY - 54);\n image(assets[\"trellis_right\"], 196, groundY - 54);\n\n image(assets[\"pumpkin\"], 150, groundY - 54);\n\n image(assets[\"jack_o_lantern\"], 200, groundY - 54);\n\n image(assets[\"shovel_top\"], 108, groundY - 72);\n image(assets[\"shovel_bottom\"], 108, groundY - 54);\n\n // Place platforms\n let platformY = groundY - 50 - 54;\n\n image(assets[\"platform_left\"], 300, platformY);\n image(assets[\"platform_middle\"], 318, platformY);\n image(assets[\"platform_right\"], 336, platformY);\n\n // Place another set of platforms\n image(assets[\"platform_left\"], 50, platformY - 50);\n image(assets[\"platform_middle\"], 68, platformY - 50);\n image(assets[\"platform_right\"], 86, platformY - 50);\n\n // Place objects on platforms\n image(assets[\"parsnip\"], 68, platformY - 68);\n image(assets[\"parsnip\"], 86, platformY - 68);\n\n image(assets[\"watering_can\"], 320, platformY - 18);\n\n image(assets[\"pail\"], 338, platformY - 18);\n\n // Place plants on the ground\n image(assets[\"sunflower\"], 20, groundY - 72);\n image(assets[\"sunflower_stalk\"], 20, groundY - 54);\n\n image(assets[\"carrot\"], 40, groundY - 54);\n\n image(assets[\"tomatoes\"], 264, groundY - 54);\n\n image(assets[\"wheat\"], 284, groundY - 54);\n\n image(assets[\"corn\"], 304, groundY - 54);\n\n // Place more platforms\n platformY -= 126;\n image(assets[\"platform_left\"], 140, platformY);\n image(assets[\"platform_middle\"], 158, platformY);\n image(assets[\"platform_right\"], 174, platformY);\n\n // Place object on platform\n image(assets[\"hay_barrel\"], 148, platformY - 18);\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Spritesheet Atlas Unpacker\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"izdb0redti5eb7l5yda9","name":"farm_scene_spritesheet","deleted":false,"id":6674,"created_at":"2024-06-03T19:11:55.163524Z","project_id":1730,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}