{"id":15883117,"url":"https://github.com/bfollington/use-spritesheet","last_synced_at":"2025-03-17T14:31:36.093Z","repository":{"id":57388399,"uuid":"431737510","full_name":"bfollington/use-spritesheet","owner":"bfollington","description":"Bringing spritesheets and aseprite intergration to react-three-fiber","archived":false,"fork":false,"pushed_at":"2021-12-06T05:33:33.000Z","size":411,"stargazers_count":24,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-28T00:37:02.206Z","etag":null,"topics":["aseprite","react","react-three-fiber","spritesheet","threejs"],"latest_commit_sha":null,"homepage":"https://use-spritesheet.vercel.app/","language":"TypeScript","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/bfollington.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}},"created_at":"2021-11-25T06:27:20.000Z","updated_at":"2024-10-28T21:46:44.000Z","dependencies_parsed_at":"2022-09-09T16:00:19.089Z","dependency_job_id":null,"html_url":"https://github.com/bfollington/use-spritesheet","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfollington%2Fuse-spritesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfollington%2Fuse-spritesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfollington%2Fuse-spritesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfollington%2Fuse-spritesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bfollington","download_url":"https://codeload.github.com/bfollington/use-spritesheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243864809,"owners_count":20360360,"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":["aseprite","react","react-three-fiber","spritesheet","threejs"],"created_at":"2024-10-06T04:08:34.722Z","updated_at":"2025-03-17T14:31:35.665Z","avatar_url":"https://github.com/bfollington.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"\"\u003e\u003cimg src=\"https://github.com/bfollington/use-spritesheet/blob/main/banner.png?raw=true\" /\u003e\u003c/a\u003e\n\u003cbr /\u003e\n\n[![Version](https://img.shields.io/npm/v/use-spritesheet?style=flat\u0026colorA=000000\u0026colorB=000000)](https://npmjs.com/package/use-spritesheet)\n[![Twitter](https://img.shields.io/twitter/follow/vivavolt?label=%40vivavolt\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026logo=twitter\u0026logoColor=000000)](https://twitter.com/vivavolt)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat\u0026colorA=000000\u0026colorB=000000)](https://blockchain.com/eth/address/0x981e493b795A7a28c43Bf8d7a8E125C419435Fa7)\n![Language](https://img.shields.io/github/languages/top/bfollington/use-spritesheet?style=flat\u0026colorA=000000\u0026colorB=000000)\n![License](https://img.shields.io/github/license/bfollington/use-spritesheet?style=flat\u0026colorA=000000\u0026colorB=000000)\n![Bundle Size](https://img.shields.io/bundlephobia/min/use-spritesheet?style=flat\u0026colorA=000000\u0026colorB=000000)\n[![Build](https://github.com/bfollington/use-spritesheet/workflows/Build/badge.svg)](https://github.com/bfollington/use-spritesheet/actions?query=workflow%3A%22Build%22)\n\n\u003cp\u003e\u003cstrong\u003euse-spritesheet\u003c/strong\u003e is a set of hooks to use pixel art, spritesheets and   \u003ca href=\"https://www.aseprite.org/\"\u003eAseprite\u003c/a\u003e with \u003ca href=\"https://github.com/pmndrs/react-three-fiber\"\u003ereact-three-fiber\u003c/a\u003e in just a few lines of code.\u003c/p\u003e\n  \n\u003cp\u003e\u003ca href=\"https://use-spritesheet.vercel.app/\"\u003e👁 \u0026nbsp;Live Demo\u003c/a\u003e (source in \u003ca href=\"https://github.com/bfollington/use-spritesheet/tree/main/example\"\u003e\u003ccode\u003eexample\u003c/code\u003e\u003c/a\u003e)\u003c/p\u003e\n\n# Installation\n```\nnpm i use-spritesheet\n```\n\n```\nyarn add use-spritesheet\n```\n\n# API\n\n# `usePixelTexture`\n\nA small time-saver if you want crisp pixels on a texture, sets the texture filter to nearest-neighbour and (optionally) enables wrapping.\n\n```tsx\nimport frogSrc from './resources/frog.png';\n\nconst PixelTexture = () =\u003e {\n  const tex = usePixelTexture(frogSrc);\n\n  return (\n    \u003csprite\u003e\n      \u003cspriteMaterial transparent map={tex} /\u003e\n    \u003c/sprite\u003e\n  );\n};\n```\n\n# `useSpritesheet`\n\nPerfect for when you have a spritesheet and want to slice out a single frame to display statically (such as an icon from a icon set).\n\n```tsx\nimport smileySrc from './resources/smiley_idle.png';\n\nconst SpritesheetSingleFrame = () =\u003e {\n  // 1 row\n  // 8 columns\n  // display frame index 2\n  const tex = useSpritesheet(smileySrc, 1, 8, 2);\n\n  return (\n    \u003csprite\u003e\n      \u003cspriteMaterial transparent map={tex} /\u003e\n    \u003c/sprite\u003e\n  );\n};\n```\n\n# `useSpritesheetAnimation`\n\nPlay a series of frames that are baked into a single texture, ideal for particle effects.\n\n```tsx\nimport impSrc from './resources/impo.png';\n\nconst SpritesheetAnimation = ({ paused }: { paused: boolean }) =\u003e {\n  // 100ms per frame\n  // 2 rows\n  // 4 columns\n  const [tex] = useSpritesheetAnimation(impSrc, 100, 2, 4, paused);\n\n  return (\n    \u003csprite\u003e\n      \u003cspriteMaterial transparent map={tex} /\u003e\n    \u003c/sprite\u003e\n  );\n};\n```\n\n# `useAsepriteAnimation`\n\nImport a texture + `json` file exported from [Aseprite](https://www.aseprite.org/), select which animation to play and control playback speed.\n\n```tsx\nimport gremlin from \"./resources/bomber.png\";\nimport gremlinJson from \"./resources/bomber.json\";\n\nexport const AsepriteAnimation = ({\n  animation = \"idle\",\n  paused,\n}: any) =\u003e {\n  const [texture] = useAseprite(\n    gremlin,\n    gremlinJson as AsepriteJson,\n    animation, // Changing this parameter automatically switches animations\n    paused\n  );\n\n  return (\n    \u003csprite\u003e\n      \u003cspriteMaterial transparent map={texture} /\u003e\n    \u003c/sprite\u003e\n  );\n};\n\n```\n\n## Running this repo\n\nWe make use of `yarn` [workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) to develop the example alongside the library itself.\n\n### Bootstrap\n\n```\nyarn\n```\n\n### Running the examples\n\n```\ncd use-spritesheet\nyarn build\ncd ../example\nyarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfollington%2Fuse-spritesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbfollington%2Fuse-spritesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfollington%2Fuse-spritesheet/lists"}