Spritesheet

{"name":"[TEMPLATE] Assets Galore","description":"A template project that contains code to unpack a spritesheet with a JSON atlas","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-05-28 at 10.28.06 AM.png","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-05-31T15:56:06.623888Z","updated_at":"2024-05-31T15:56:06.623891Z","user_id":60,"status":"PUBLIC","parent_id":1634,"id":1690,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"/* NEXT STEPS:\nIdea 1: Decide what kind of project you are going to make! Discuss in the chat with your Jippity AI tutor. Then...\nIdea 2: Decide which assets to use in your project. Remove the atlas variable and the spriteAtlasPairs.push() calls\n in the preload() function for any assets you are not going to use!\n You can see the spritesheets in the top right 'Assets' tab by clicking 'Browse My Assets'\n*/\n\n// ASSETS GALORE! TEMPLATE\n// ————— by Kristen and Jacob —————\n// Assets by Kenney, etc etc add more here\n// Block Letters: Jean Lambert Salvatori from Pixabay\n// Using LeshyLabs Spritesheet Tool https://www.leshylabs.com/apps/sstool/ in \"JSON-TP-Array\" format\n\nlet assets = {};\n\nlet spriteAtlasPairs = []; // Initialize as an empty array\n\nlet farm_scene_atlas = { \"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 } };\nlet candy_atlas = { \"frames\": [{ \"filename\": \"lollipop_red\", \"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\": \"lollipop_yellow\", \"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\": \"donut\", \"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\": \"pinkPlatform_single\", \"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\": \"pinkPlatform_left\", \"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\": \"pinkPlatform_right\", \"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\": \"pinkPlatform_middle\", \"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 } }], \"meta\": { \"app\": \"https://www.leshylabs.com/apps/sstool/\", \"version\": \"Leshy SpriteSheet Tool v0.8.4\", \"image\": \"candySpritesheet.png\", \"size\": { \"w\": 56, \"h\": 56 }, \"scale\": 1 } };\nlet blockLetters_atlas = { \"frames\": [{ \"filename\": \"A\", \"frame\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"B\", \"frame\": { \"x\": 0, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"C\", \"frame\": { \"x\": 161, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"D\", \"frame\": { \"x\": 161, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"E\", \"frame\": { \"x\": 0, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"F\", \"frame\": { \"x\": 161, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"G\", \"frame\": { \"x\": 322, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"H\", \"frame\": { \"x\": 322, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"I\", \"frame\": { \"x\": 322, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"J\", \"frame\": { \"x\": 0, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"K\", \"frame\": { \"x\": 161, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"L\", \"frame\": { \"x\": 322, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"M\", \"frame\": { \"x\": 483, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"N\", \"frame\": { \"x\": 483, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"O\", \"frame\": { \"x\": 483, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"P\", \"frame\": { \"x\": 483, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"Q\", \"frame\": { \"x\": 0, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"R\", \"frame\": { \"x\": 161, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"S\", \"frame\": { \"x\": 322, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"T\", \"frame\": { \"x\": 483, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"U\", \"frame\": { \"x\": 644, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"V\", \"frame\": { \"x\": 644, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"W\", \"frame\": { \"x\": 644, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"X\", \"frame\": { \"x\": 644, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"Y\", \"frame\": { \"x\": 644, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"Z\", \"frame\": { \"x\": 0, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"dollar\", \"frame\": { \"x\": 161, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"0\", \"frame\": { \"x\": 322, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"1\", \"frame\": { \"x\": 483, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"2\", \"frame\": { \"x\": 644, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"3\", \"frame\": { \"x\": 805, \"y\": 0, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"4\", \"frame\": { \"x\": 805, \"y\": 161, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"5\", \"frame\": { \"x\": 805, \"y\": 322, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"6\", \"frame\": { \"x\": 805, \"y\": 483, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"7\", \"frame\": { \"x\": 805, \"y\": 644, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"8\", \"frame\": { \"x\": 805, \"y\": 805, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"9\", \"frame\": { \"x\": 0, \"y\": 966, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"colon\", \"frame\": { \"x\": 161, \"y\": 966, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"question\", \"frame\": { \"x\": 322, \"y\": 966, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }, { \"filename\": \"exclamation\", \"frame\": { \"x\": 483, \"y\": 966, \"w\": 160, \"h\": 160 }, \"rotated\": false, \"trimmed\": false, \"spriteSourceSize\": { \"x\": 0, \"y\": 0, \"w\": 160, \"h\": 160 }, \"sourceSize\": { \"w\": 160, \"h\": 160 } }], \"meta\": { \"app\": \"https://www.leshylabs.com/apps/sstool/\", \"version\": \"Leshy SpriteSheet Tool v0.8.4\", \"image\": \"blockLetters.png\", \"size\": { \"w\": 965, \"h\": 1126 }, \"scale\": 1 } }\n\nfunction preload() {\n spriteAtlasPairs.push({ spritesheet: loadImage(\"@asset('farm_scene_spritesheet')\"), atlas: farm_scene_atlas });\n spriteAtlasPairs.push({ spritesheet: loadImage(\"@asset('candySpritesheet')\"), atlas: candy_atlas });\n //spriteAtlasPairs.push({ spritesheet: loadImage(\"@asset('pixelPlatformerSpritesheet')\"), atlas: platformer_atlas });\n spriteAtlasPairs.push({ spritesheet: loadImage(\"@asset('blockLetters')\"), atlas: blockLetters_atlas })\n\n}\n\nfunction setup() {\n createCanvas(800, 800);\n for (let pair of spriteAtlasPairs) {\n processSpriteAtlas(pair.spritesheet, pair.atlas);\n }\n}\n\n// This function does the work of slicing up the spritesheet based on the JSON data\nfunction processSpriteAtlas(spritesheet, atlas) {\n let frames = atlas.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 }\n}\n\nfunction draw() {\n background(24, 142, 201); // Change to whatever you want; this is a nice blue sky default\n drawAllSprites(); // Comment this line when you're ready to build your project\n}\n\n// Draws all the sprites to the screen for your viewing\nfunction drawAllSprites() {\n let x = 20; // Starting x and y coordinates 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 assets[key].x = x; // Save x position to the sprite object\n assets[key].y = y; // Save y position to the sprite object\n assets[key].key = key; // Save key to the sprite object for identification\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// Click on a sprite from the drawAllSprites() method in code editing mode to log the sprite name\nfunction mousePressed() {\n for (let key in assets) {\n if (assets.hasOwnProperty(key)) {\n let sprite = assets[key];\n if (mouseX >= sprite.x && mouseX <= sprite.x + sprite.width &&\n mouseY >= sprite.y && mouseY <= sprite.y + sprite.height) {\n console.log(`Clicked on ${sprite.key}`);\n }\n }\n }\n}\n","style.css":"","index.html":"\n\n\n\n \n \n Spritesheet\n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[{"name":"blockLetters","cloudinary_id":"nhbiixm47vewyzqm6zyz","resource_type":"image","id":6212,"project_id":1690,"created_at":"2024-05-31T16:34:15.812906Z","deleted":false},{"name":"farm_scene_spritesheet","cloudinary_id":"izdb0redti5eb7l5yda9","resource_type":"image","id":6210,"project_id":1690,"created_at":"2024-05-31T15:56:06.639229Z","deleted":false},{"name":"candySpritesheet","cloudinary_id":"kow7pdbzebxorkjihuoq","resource_type":"image","id":6209,"project_id":1690,"created_at":"2024-05-31T15:56:06.637770Z","deleted":false},{"name":"pixelPlatformerSpritesheet","cloudinary_id":"mhozwr4no1qznxqd0usy","resource_type":"image","id":6208,"project_id":1690,"created_at":"2024-05-31T15:56:06.636180Z","deleted":false}],"messages_sent":4,"comments":[],"steps":[{"step_number":1,"complete":false,"updated_at":"2024-05-31T15:56:06.627917","id":9303,"title":"Decide on what kind of project to build","instruction":"After looking at the available assets, chat with the AI tutor about what kind of project you would like to make. ","created_at":"2024-05-28T22:21:33.722328","project_id":1690}]}