https://github.com/bfollington/use-spritesheet

Bringing spritesheets and aseprite intergration to react-three-fiber
https://github.com/bfollington/use-spritesheet

aseprite react react-three-fiber spritesheet threejs

Last synced: 3 months ago
JSON representation

Bringing spritesheets and aseprite intergration to react-three-fiber

• Host: GitHub
• URL: https://github.com/bfollington/use-spritesheet
• Owner: bfollington
• Created: 2021-11-25T06:27:20.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-06T05:33:33.000Z (about 3 years ago)
• Last Synced: 2024-10-07T04:08:30.020Z (4 months ago)
• Topics: aseprite, react, react-three-fiber, spritesheet, threejs
• Language: TypeScript
• Homepage: https://use-spritesheet.vercel.app/
• Size: 401 KB
• Stars: 23
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        





[![Version](https://img.shields.io/npm/v/use-spritesheet?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/use-spritesheet)

[![Twitter](https://img.shields.io/twitter/follow/vivavolt?label=%40vivavolt&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/vivavolt)

[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x981e493b795A7a28c43Bf8d7a8E125C419435Fa7)

![Language](https://img.shields.io/github/languages/top/bfollington/use-spritesheet?style=flat&colorA=000000&colorB=000000)

![License](https://img.shields.io/github/license/bfollington/use-spritesheet?style=flat&colorA=000000&colorB=000000)

![Bundle Size](https://img.shields.io/bundlephobia/min/use-spritesheet?style=flat&colorA=000000&colorB=000000)

[![Build](https://github.com/bfollington/use-spritesheet/workflows/Build/badge.svg)](https://github.com/bfollington/use-spritesheet/actions?query=workflow%3A%22Build%22)

use-spritesheet is a set of hooks to use pixel art, spritesheets and   Aseprite with react-three-fiber in just a few lines of code.

  

👁  Live Demo (source in example)


# Installation

```

npm i use-spritesheet

```

```

yarn add use-spritesheet

```

# API

# `usePixelTexture`

A small time-saver if you want crisp pixels on a texture, sets the texture filter to nearest-neighbour and (optionally) enables wrapping.

```tsx

import frogSrc from './resources/frog.png';

const PixelTexture = () => {

  const tex = usePixelTexture(frogSrc);

  return (

    

      

    

  );

};

```

# `useSpritesheet`

Perfect 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).

```tsx

import smileySrc from './resources/smiley_idle.png';

const SpritesheetSingleFrame = () => {

  // 1 row

  // 8 columns

  // display frame index 2

  const tex = useSpritesheet(smileySrc, 1, 8, 2);

  return (

    

      

    

  );

};

```

# `useSpritesheetAnimation`

Play a series of frames that are baked into a single texture, ideal for particle effects.

```tsx

import impSrc from './resources/impo.png';

const SpritesheetAnimation = ({ paused }: { paused: boolean }) => {

  // 100ms per frame

  // 2 rows

  // 4 columns

  const [tex] = useSpritesheetAnimation(impSrc, 100, 2, 4, paused);

  return (

    

      

    

  );

};

```

# `useAsepriteAnimation`

Import a texture + `json` file exported from [Aseprite](https://www.aseprite.org/), select which animation to play and control playback speed.

```tsx

import gremlin from "./resources/bomber.png";

import gremlinJson from "./resources/bomber.json";

export const AsepriteAnimation = ({

  animation = "idle",

  paused,

}: any) => {

  const [texture] = useAseprite(

    gremlin,

    gremlinJson as AsepriteJson,

    animation, // Changing this parameter automatically switches animations

    paused

  );

  return (

    

      

    

  );

};

```

## Running this repo

We make use of `yarn` [workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) to develop the example alongside the library itself.

### Bootstrap

```

yarn

```

### Running the examples

```

cd use-spritesheet

yarn build

cd ../example

yarn start

```