adhbh / rn-sprite

rn-sprite is a react native component for creating animations from spritesheets

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

rn-sprite's Issues

Not compatible with gl-react-native > 2.42.3

Hi there. I've debugged an issue I've had and aren't able to get this working with gl-react-native 2.43.0 or 2.47.0. I don't have time right now to see why so I've pinned my version below that. Branch here https://github.com/queenvictoria/rn-sprite/tree/pin-version

There have been a couple of releases in the last 10 days that I'll look in to what may have changed when I get a minute.

get an error

i get error like this

when set the source to
https://drive.google.com/uc?export=view&id=0B3JNAIQPmPatYVFoT2xLaEE1bms

what should i do ? and what is the proper way of providing good image(in term of dimension and size) ?

iwanna use your library to display product in 360 degree so can you add support to display them like this jquery library spritespin ???

thank you in advance

Is this project still works?

Hi adhbh, i wan to try this repo, but I can't make it works, it loads the jpg your provided but cannot show the image, wondering is this repo still works? and also about the speed in iOS and Android, can the sprite is playing smoothly while click/scrolling other UI e.g.: list view, buttons?

How to update current frame?

Hi there. Thank you for the project!

I am trying to use onTouchMove to update the frame number of the sprite. Currently I've got something like this but I'm a bit lost as to how to bind to the frame number inside the library. Any tips?

        <Sprite
          sequence = { sequence }
          move = { move }
          rows = { rows }
          cols = { columns }
          loop = { true }
          fps = { 15 }
          current = { this.state.current }            // <---
          isPlaying = { false }
          source = { source }
          width = { 360 }
          height = { 668 }
          onTouchStart = { () => {
            this.setState({message: "onTouchStart"})
            return true;
          } }
          onTouchMove = { (evt) => {                    // <---
            // X and Y are relative to the top left
            let x = evt.nativeEvent.locationX;
            let y = evt.nativeEvent.locationY;
            let _x = x/360*100;
            let _y = y/668*100;
            this.setState({position: `x: ${Math.round(_x)}% y: ${Math.round(_y)}%`});
            this.setState({message:JSON.stringify(Object.keys(evt))})
            this.setState({current: 0})
          } }
          onTouchEnd = { (evt) => true }
        />

Need Help! How to generate the sequence

Hello, I am new to react native and sprite sheet animation, I need a help for generating the sequence for a sprite sheet. Please tell me how to generate the sequence for a sprite sheet.