rn-sprite is a react native component for creating animations from spritesheets
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src support for later gl react native and fixes Nov 18, 2017
.gitignore support for later gl react native and fixes Nov 18, 2017
README.md Syntax Highlight Code Nov 19, 2017
demo1.gif init Nov 24, 2016
demo2.gif init Nov 24, 2016
package.json keywords Nov 18, 2017
vertical.jpg vertical sprite sheet Nov 25, 2016

README.md

rn-sprite

rn-sprite is a react native component for creating animations from spritesheets for IOS and Android devices

...Spritesheets? ...Animations?

A sprite is a single graphic image that is incorporated into a larger scene so that it appears to be part of the scene. When you put many sprites into a single image, you get a spritesheet like this and this. The process of changing images in quick succession to give the illusion of movement is called animation.

Code:

<Sprite
	sequence={[ 
			0.04, 
			0.125, 0.20815, 0.2913, 0.37445, 0.4576, 
			0.54075, 0.6239, 0.70705, 0.7902, 0.87335, 0.9565,
			0.04,
	]}
	move="vertical"
	loop
	fps={10}
	isPlaying
	source="https://github.com/adhbh/rn-sprite/raw/master/vertical.jpg"
	width={windowWidth}
	height={windowHeight / 2}
	onTouchStart={() => true}
	onTouchMove={() => true}
	onTouchEnd={() => true}
/>
  • Depends on gl-react-native
  • Works on IOS and Android
  • Supports horizontal, vertical and grid spritesheets
  • Play/Pause support
  • Configurable animation speed
  • Touch responsive

props

prop type description required
source string Url of spritesheet image yes
sequence array Array of numbers between 0 and 1 that define the sequence of animation, or, in the case of a sprite grid, an array of pairs of numbers between 0 and 1 yes
loop boolean Repeat the animation when it completes (Default: true) no
fps integer Frames per second (Default: 2) no
isPlaying boolean Play/Pause the animation (Default: true) no
move string For horizontal or vertical spritesheets (Default: horizontal) no
onTouchStart function Function which is called when sprite is touched no
onTouchMove function Function which is called while the user touches and moves the finger on the sprite no
onTouchEnd function Function which is called when touch event gets completed no

Usage

  • Animations in mobile games
  • Replacement for gifs
  • 360-View

Installation

  • Setup RNGLPackage by following this guide for Android and IOS
  • npm install --save rn-sprite

Todo

  • Configurable repeat count for animation
  • Rewind support
  • Got some more ideas? Feel free to raise a PR

License

MIT