帧动画

帧动画是由多张连续的图片按照一定的时间间隔播放的动画，通常会将图片合并到一张图片里面，然后通过 JSON 来描述图片的位置以及播放的顺序。

Eva.js 的帧动画底层是 pixi.js spriteAnimation 实现的，因此在 Eva.js 中可以使用 spriteAnimation 支持的雪碧图生成工具导出的素材，比如 TexturePacker。

安装

使用 NPM

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

在浏览器中

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

使用

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

参数

resource string

资源名，需要通过 resource.addResource 预加载。

speed number

每张图片播放的间隔时间，单位 ms。

方法

play(times)

播放动画，默认自动播放。times 参数为播放次数，默认是无限次

stop()

停止播放。

事件

frameChange 每帧图片变换

loop 每次循环

complete 播放完成