遮挡排序与透明度

使用前需要安装渲染器

安装

使用 NPM

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-render

在浏览器中

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

使用

  1. import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { Img, ImgSystem } from '@eva/plugin-renderer-img'
  4. import { Render, RenderSystem } from '@eva/plugin-renderer-render'
  5. import { Transition, TransitionSystem } from '@eva/plugin-transition'
  7. resource.addResource([
  8.   {
  9.     name: 'heart',
  10.     type: RESOURCE_TYPE.IMAGE,
  11.     src: {
  12.       image: {
  13.         type: 'png',
  14.         url: 'https://gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
  15.       }
  16.     },
  17.     preload: false
  18.   }
  19. ])
  21. const game = new Game({
  22.   systems: [
  23.     new RendererSystem({
  24.       canvas: document.querySelector('#canvas'),
  25.       width: 750,
  26.       height: 1000
  27.     }),
  28.     new ImgSystem(),
  29.     new RenderSystem(),
  30.     new TransitionSystem()
  31.   ]
  32. })
  34. const image = new GameObject('image', {
  35.   size: { width: 200, height: 200 },
  36.   origin: { x: 0, y: 0 },
  37.   position: {
  38.     x: 300,
  39.     y: 400
  40.   },
  41.   anchor: {
  42.     x: 0,
  43.     y: 0
  44.   }
  45. })
  46. const img = image.addComponent(
  47.   new Img({
  48.     resource: 'heart'
  49.   })
  50. )
  52. const render = image.addComponent(
  53.   new Render({
  54.     alpha: 0.5
  55.   })
  56. )
  58. const animation = image.addComponent(new Transition())
  59. animation.group = {
  60.   idle: [
  61.     {
  62.       name: 'alpha',
  63.       component: render,
  64.       values: [
  65.         {
  66.           time: 0,
  67.           value: 1,
  68.           tween: 'ease-out'
  69.         },
  70.         {
  71.           time: 1000,
  72.           value: 0,
  73.           tween: 'ease-in'
  74.         },
  75.         {
  76.           time: 2000,
  77.           value: 1
  78.         }
  79.       ]
  80.     }
  81.   ]
  82. }
  84. animation.play('idle', Infinity)
  86. game.scene.addChild(image)

参数

sortableChildren: boolean

如果需要使用 zIndex 排序，需要在父级的 Render 组件上设置 sortableChildren

zIndex: number

渲染顺序，zIndex 越大在上面

alpha: number

透明度