Spritesheet

{"name":"Assets Galore 6-12-2024","description":"A template project that contains code to unpack a spritesheet with a JSON atlas","photo":"https://jippity.s3.amazonaws.com/assetGalore.png","view_count":6,"fork_count":1,"expires_at":null,"created_at":"2024-06-12T02:55:55.860413Z","updated_at":"2024-06-12T02:55:55.860415Z","user_id":109,"status":"PUBLIC","parent_id":1634,"id":1844,"user":{"username":"jeremyshi","id":109,"password_hash":null,"updated_at":"2024-06-05T23:12:11.544705Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"b369d20e-97a7-9d13-cbb9-a409de29d69a","created_at":"2024-06-05T23:12:11.544702Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let playerCharacter = null;\nlet availableSkins = ['alienBlue', 'alienGreen', 'alienOrange', 'alienPink', 'alienYellow'];\nlet assets = {};\nlet spriteAtlasPairs = [];\n\n// Define your atlas data here\nlet platformer_atlas = {\n \"frames\": [\n { \"filename\": \"alienBlue\", \"frame\": { \"x\": 0, \"y\": 0, \"w\": 32, \"h\": 32 } },\n { \"filename\": \"alienGreen\", \"frame\": { \"x\": 32, \"y\": 0, \"w\": 32, \"h\": 32 } },\n { \"filename\": \"alienOrange\", \"frame\": { \"x\": 64, \"y\": 0, \"w\": 32, \"h\": 32 } },\n { \"filename\": \"alienPink\", \"frame\": { \"x\": 96, \"y\": 0, \"w\": 32, \"h\": 32 } },\n { \"filename\": \"alienYellow\", \"frame\": { \"x\": 128, \"y\": 0, \"w\": 32, \"h\": 32 } }\n ]\n};\n\nfunction preload() {\n spriteAtlasPairs.push({ spritesheet: loadImage(\"@asset('pixelPlatformerSpritesheet')\"), atlas: platformer_atlas });\n}\n\nfunction setup() {\n createCanvas(1000, 1000);\n for (let pair of spriteAtlasPairs) {\n processSpriteAtlas(pair.spritesheet, pair.atlas);\n }\n initializeCharacterSelection(); // Initialize character selection screen\n}\n\nfunction draw() {\n background(24, 142, 201); // Change to whatever you want; this is a nice blue sky default\n if (!playerCharacter) {\n drawCharacterSelection();\n } else {\n // Draw the chosen character on the screen\n image(assets[playerCharacter], 100, 100);\n }\n}\n\nfunction mousePressed() {\n if (!playerCharacter) {\n selectCharacter(mouseX, mouseY);\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 drawCharacterSelection() {\n let x = 20;\n let y = 20;\n let spacing = 50;\n\n // Draw available character skins\n for (let skin of availableSkins) {\n if (assets.hasOwnProperty(skin)) {\n image(assets[skin], x, y);\n x += spacing;\n }\n }\n}\n\nfunction selectCharacter(mouseX, mouseY) {\n for (let skin of availableSkins) {\n let sprite = assets[skin];\n if (sprite && mouseX >= sprite.x && mouseX <= sprite.x + 32 &&\n mouseY >= sprite.y && mouseY <= sprite.y + 32) { // Check the dimensions of the sprite\n playerCharacter = skin;\n console.log(`Selected character: ${playerCharacter}`);\n break;\n }\n }\n}\n\nfunction initializeCharacterSelection() {\n console.log(\"Character selection initialized\");\n drawCharacterSelection();\n}","style.css":"","index.html":"\n\n\n\n \n \n Spritesheet\n \n\n\n\n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":101273,"input_tokens":null,"id":50675,"project_id":1844,"sender":"human","message":"change the characters to the aliens","created_at":"2024-06-12T03:18:39.900860Z","output_tokens":null},{"deleted":0,"code_id":101273,"input_tokens":null,"id":50676,"project_id":1844,"sender":"ai","message":"Sure, let's change the available characters to the aliens. We already have the sprites for the aliens in the `platformer_atlas`. The current setup already uses these characters, so we don't need to change much.\n\nLet's ensure that we are drawing the characters from the atlas correctly. I'll update the `drawCharacterSelection` function to ensure everything is working as expected.\n\n```javascript\nfunction drawCharacterSelection() {\n let x = 20;\n let y = 20;\n let spacing = 50;\n\n // Draw available character skins\n for (let skin of availableSkins) {\n if (assets.hasOwnProperty(skin)) {\n image(assets[skin], x, y);\n x += spacing;\n }\n }\n}\n```\n\n### Explanation:\n1. **Loop through availableSkins**: Iterate over the available skins.\n2. **Check asset availability**: Ensure that the asset for the skin is available.\n3. **Draw the asset**: Draw the asset at the given position.\n4. **Update position**: Increment the x-coordinate for the next character.","created_at":"2024-06-12T03:18:39.910598Z","output_tokens":null}],"assets":[{"cloudinary_id":"izdb0redti5eb7l5yda9","project_id":1844,"created_at":"2024-06-12T02:55:55.880288Z","deleted":false,"name":"farm_scene_spritesheet","resource_type":"image","id":7307},{"cloudinary_id":"mhozwr4no1qznxqd0usy","project_id":1844,"created_at":"2024-06-12T02:55:55.879159Z","deleted":false,"name":"pixelPlatformerSpritesheet","resource_type":"image","id":7306},{"cloudinary_id":"vkqailifxbo2d72eikhr","project_id":1844,"created_at":"2024-06-12T02:55:55.877993Z","deleted":false,"name":"tinyTown_spritesheet","resource_type":"image","id":7305},{"cloudinary_id":"rvdkeff83ngpsplfduqg","project_id":1844,"created_at":"2024-06-12T02:55:55.876710Z","deleted":false,"name":"platformerFood_spritesheet","resource_type":"image","id":7304},{"cloudinary_id":"zbxkb6cz3hg034f3rs1z","project_id":1844,"created_at":"2024-06-12T02:55:55.875142Z","deleted":false,"name":"urban_sprites","resource_type":"image","id":7303}],"messages_sent":12,"comments":[{"content":"🤯","id":676,"user_id":56,"user":{"username":"mayor25","id":56,"password_hash":null,"updated_at":"2024-02-20T18:38:39.732968Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"e366edd5-a4df-409b-85d7-d591433e3854","created_at":"2024-02-20T18:38:39.732964Z","reset_token":null,"stripe_customer_id":null,"seats":null},"project_id":1844,"created_at":"2024-06-14T22:23:43.962754Z","updated_at":"2024-06-14T22:23:43.962755Z"}],"steps":[{"instruction":"After looking at the available assets, chat with the AI tutor about what kind of project you would like to make. ","title":"Decide on what kind of project to build","created_at":"2024-05-28T22:21:33.722328","project_id":1844,"complete":false,"step_number":1,"updated_at":"2024-06-12T02:55:55.864192","id":9701}]}