README
Otacon React Component
The Otacon animated sprite from Metal Gear Solid 2 as a React component. You can see the original animations in the video. Contributions are very welcome!
Installation & Usage
npm install react-otacon
import Otacon, { AnimationTypes } from 'react-otacon';
<Otacon animation={AnimationTypes.thumb} />
The png-file is part of the package. It needs to be packed by an appropriate loader. I recommend file-loader. The further process of dealing with that is discussed in issue #6.
PropTypes
Otacon.propTypes = {
// the different animations
animation: PropTypes.oneOf([
'idle',
'appear',
'laugh',
'blink',
'think',
'pocket',
'thumb',
'sick',
'angry',
]),
// loop the animation or play to end and stop
loop: PropTypes.bool,
// called when the animation is at its last frame
onAnimationEnd: PropTypes.func,
};
Otacon.defaultProps = {
animation: 'idle',
loop: true,
onAnimationEnd: () => {},
};
Examples
The state is completely handled by the container. The Otacon component will not change its animation state. You can find the live examples on the project page.
Code | Result |
---|---|
<Otacon animation="laugh" /> |
|
<Otacon animation="thumb" /> |
|
<Otacon animation="angry" /> |
|
<Otacon animation="sick" /> |
|
<Otacon animation="appear" /> |
Resources
The spritesheet is taken from The Spriters Resource.
The component boilerplate is based on one from survivejs.