遮挡排序与透明度

      使用前需要安装渲染器

      安装

      使用 NPM

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

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-renderer-render@1.2.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

      透明度

      ,