{"id":14964060,"url":"https://github.com/colbydude/phaser-3-palette-swapping-example","last_synced_at":"2025-10-25T03:31:22.891Z","repository":{"id":82422661,"uuid":"126405130","full_name":"Colbydude/phaser-3-palette-swapping-example","owner":"Colbydude","description":"Example of using palette swapping on a spritesheet in Phaser 3.","archived":true,"fork":false,"pushed_at":"2024-05-30T06:58:34.000Z","size":17,"stargazers_count":41,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-01T21:44:43.109Z","etag":null,"topics":["html5-game-development","palette-swapping","phaser","phaser3","phaser3-example","phaserjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Colbydude.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-22T23:06:02.000Z","updated_at":"2024-12-11T09:37:16.000Z","dependencies_parsed_at":"2024-09-13T20:54:31.028Z","dependency_job_id":null,"html_url":"https://github.com/Colbydude/phaser-3-palette-swapping-example","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":0.2727272727272727,"last_synced_commit":"a9adaf8e8a8d31cf88f23f08e5f57f350198edc5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Colbydude%2Fphaser-3-palette-swapping-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Colbydude%2Fphaser-3-palette-swapping-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Colbydude%2Fphaser-3-palette-swapping-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Colbydude%2Fphaser-3-palette-swapping-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Colbydude","download_url":"https://codeload.github.com/Colbydude/phaser-3-palette-swapping-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238075306,"owners_count":19412309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html5-game-development","palette-swapping","phaser","phaser3","phaser3-example","phaserjs"],"created_at":"2024-09-24T13:32:31.811Z","updated_at":"2025-10-25T03:31:22.538Z","avatar_url":"https://github.com/Colbydude.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phaser 3 Palette Swapping Example\n\nExample of using palette swapping on a spritesheet in Phaser 3.\n\n## How It Works\nThis initial idea came from this article:  \nhttp://laxvikinggames.blogspot.com/2015/01/build-dynamic-texture-atlas-in-phaser.html\n\nThe palette swapping in this example is achieved by taking an image that contains palette data then going through a spritesheet and switching the matching pixels from the original palette to the new palette.\n\nOur \"palette data\" image is a small image consisting of each unique color we want to replace and their replacements. Each color is a single pixel, and each row represents an individual palette.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/fcyEzy4.jpg\" alt=\"Palette Example\"\u003e\u003c/p\u003e\n\nWe then define a config containing the relevant information for creating the necessary spritesheets and animations after the palette swapping is performed.\n\n```js\nvar animConfig = {\n    paletteKey: 'link-palette',                         // Palette file we're referencing.\n    paletteNames: ['green', 'red', 'blue', 'purple'],   // Names for each palette to build out the names for the atlas.\n    spriteSheet: {                                      // Spritesheet we're manipulating.\n        key: 'link',\n        frameWidth: 32,                                 // NOTE: Potential drawback. All frames are the same size.\n        frameHeight: 32\n    },\n    animations: [                                       // Animation data.\n        {key: 'walk-down', frameRate: 15, startFrame: 0, endFrame: 9},\n        {key: 'walk-left', frameRate: 15, startFrame: 10, endFrame: 19},\n        {key: 'walk-up', frameRate: 15, startFrame: 20, endFrame: 29}\n    ]\n};\n```\n\nOnce the spritesheets and animations have been built, we can then use them in our game as we need!\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/vfJbHYp.gif\" alt=\"Demonstration\"\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbydude%2Fphaser-3-palette-swapping-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolbydude%2Fphaser-3-palette-swapping-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbydude%2Fphaser-3-palette-swapping-example/lists"}