Sprite animation

Sprite animation is an animation played by multiple consecutive pictures at a certain time interval. The pictures are usually merged into one picture, and then the position of the picture and the order of playback are described through JSON.

The bottom layer of the sprite animation of Eva.js is realized by pixi.js spriteAnimation. Therefore, in Eva.js, you can use the materials exported by the sprite animation tool supported by spriteAnimation, such as [TexturePacker](https://www.codeandweb.com/texturepacker how-to-create-sprite-sheets-and-animations-with-pixijs5).

Install

With NPM

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-sprite-animation

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-renderer-sprite-animation@1.2.x/dist/EVA.plugin.renderer.spriteAnimation.min.js"></script>

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {SpriteAnimation, SpriteAnimationSystem} from '@eva/plugin-renderer-sprite-animation'
  4. resource.addResource([
  5. {
  6. name:'fruit',
  7. type: RESOURCE_TYPE.SPRITE_ANIMATION,
  8. src: {
  9. image: {
  10. type:'png',
  11. url:'https://gw.alicdn.com/bao/uploaded/TB15pMkkrsTMeJjSszhXXcGCFXa-377-1070.png'
  12. },
  13. json: {
  14. type:'json',
  15. url:'https://gw.alicdn.com/mt/TB1qCvumsyYBuNkSnfoXXcWgVXa.json'
  16. }
  17. },
  18. preload: false
  19. }
  20. ])
  21. const game = new Game({
  22. systems: [
  23. new RendererSystem({
  24. canvas: document.querySelector('#canvas'),
  25. width: 750,
  26. height: 1000
  27. }),
  28. new SpriteAnimationSystem()
  29. ]
  30. })
  31. const cut = new GameObject('cut', {
  32. position: {x: 225, y: 400 },
  33. size: {width: 300, height: 200 },
  34. origin: {x: 0, y: 0}
  35. })
  36. const frame = cut.addComponent(
  37. new SpriteAnimation({
  38. resource:'fruit',
  39. speed: 100
  40. })
  41. )
  42. frame.play()
  43. game.scene.addChild(cut)

Options

resource string

Resource name, which needs to be preloaded by resource.addResource.

speed number

The interval time for each picture to be played, in ms.

autoPlay boolean

Playing at component be added.

forwards boolean

Stop at last frame when animation over.

Methods

play(times)

Play animation, automatically play by default, times is the number of loops, default is Infinity.

stop()

Stop play.

gotoAndPlay(frameNumber)

Goes to a specific frame and begins playing the SpriteAnimation.

gotoAndStop(frameNumber)

Stops the SpriteAnimation and goes to a specific frame.

Property

currentFrame number

totalFrames number

Events

frameChange

loop

complete