react-otacon

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

1. npm install react-otacon

2. import Otacon, { AnimationTypes } from 'react-otacon';

3. <Otacon animation={AnimationTypes.thumb} />

4. 

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.