rn-sprite-sheet - GitLite

KO | EN

gitlite — search

#python #ai #go #android #rust #linux #docker #windows #kubernetes #awesome-list #security #pytorch #ios #openai

rn-sprite-sheet

(★ 156)

A sprite sheet animation library for React Native

File Explorer

Download Latest Version (.zip)

- App-test.js
- - BUCK
  - build.gradle
  - build_defs.bzl
  - proguard-rules.pro
- - BUCK
  - debug.keystore.properties
- build.gradle
- gradle.properties
- gradlew
- gradlew.bat
- settings.gradle
- - AppDelegate.h
  - AppDelegate.m
  - Info.plist
  - main.m
- - Info.plist
- - Info.plist
- - project.pbxproj
- - Info.plist
  - RNSpriteSheetTests.m
- - monster.png
  - mummy.png
- Example.js
- SpriteSheet.js
.buckconfig
.flowconfig
.gitattributes
.gitignore
.prettierrc
.watchmanconfig
app.json
babel.config.js
index.d.ts
index.js
metro.config.js
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/mileung/rn-sprite-sheet

Downloads the entire project code from GitHub to your computer.

cd rn-sprite-sheet

Moves into the project folder you just downloaded.

2. Gradle (Java/Kotlin)

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
JDK (Java) Required to build and run Java/Kotlin projects.
Gradle If the repo includes gradlew (Gradle Wrapper), you don't need to install Gradle separately.

cd android/app

This project's files live in a subfolder, so move into it first.

./gradlew build

Builds the project using Gradle.

✅ A BUILD SUCCESSFUL message means it worked. The output is created under build/.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

🚨 I don't have time to maintain this package. I am open to PRs. 🚨

# rn-sprite-sheet

A sprite sheet animation library for React Native

![demo](https://media.giphy.com/media/xjyRCqzjQhyoartPCq/giphy.gif)

### Install

`npm install --save rn-sprite-sheet`

### Import

`import SpriteSheet from 'rn-sprite-sheet';`

### Usage

1.  Create ref for SpriteSheet
2.  Set the source using `require()` for local asset images or using `{ uri: <image's url>, width: <image's width>, height: <image's height> }` for network images
3.  Specify the columns and rows (each frame must be the same size)
4.  Create animations object (each key is an animation name and their value should be an array of frame indexes)
5.  Play an animation by calling the play method on a SpriteSheet reference and pass it a config object with at least a type property

### Example

```javascript
<SpriteSheet
  ref={ref => (this.mummy = ref)}
  source={require('./assets/mummy.png')}
  columns={9}
  rows={6}
  // height={200} // set either, none, but not both
  // width={200}
  // frameHeight={50} // manually set size of your sprite
  // frameWidth={50} // overrides auto calculation of frame size based on height, width, columns, and rows.
  // offsetX={0}
  // offsetY={0}
  imageStyle={{ marginTop: -1 }}
  animations={{
    walk: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
    appear: Array.from({ length: 15 }, (v, i) => i + 18),
    die: Array.from({ length: 21 }, (v, i) => i + 33),
  }}
/>;
// ...
play = config => this.mummy.play(config);
```

### Methods

_To be called on a SpriteSheet reference_

```javascript
play({
  type, // (required) name of the animation (name is specified as a key in the animation prop)
  fps = 24, // frames per second
  loop = false, // if true, replays animation after it finishes
  resetAfterFinish = false, // if true, the animation will reset back to the first frame when finished; else will remain on the last frame when finished
  onFinish = () => {} // called when the animation finishes; will not work when loop === true
})

stop(callback) // stop at current frame

reset(callback) // stop and go to first frame
```

### Props

```javascript
static propTypes = {
  source: sourcePropType.isRequired // source must be required
  columns: PropTypes.number.isRequired,
  rows: PropTypes.number.isRequired,
  animations: PropTypes.object.isRequired, // see example
  viewStyle: stylePropType, // styles for the sprite sheet container
  imageStyle: stylePropType, // styles for the sprite sheet
  height: PropTypes.number, // set either height, width, or none,
  width: PropTypes.number, // but not both height and width
  onLoad: PropTypes.func,
  frameWidth: PropTypes.func, // overrides sprite size calculation based on height,width,rows,columns props
  frameHeight: PropTypes.func, // both frameWidth and frameHeight must be set or neither
  offsetX: PropTypes.func, // used with frameWidth/frameHeight to adjust offset of first frame
  offsetY: PropTypes.func
};

static defaultPropTypes = {
  columns: 1,
  rows: 1,
  animations: {}
};
```

### Sprite sheet image specifications

When generating a sprite sheet image to use with rn-sprite-sheet, ensure that the frames are all of the same dimensions, and that the overall image size is exactly the height of all rows and the width of all columns. Depending on the tool you use to generate your sprite sheet image, you may need to crop the source image.