遮挡排序与透明度

使用前需要安装渲染器

安装

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

参数

sortableChildren: boolean

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

zIndex: number

渲染顺序,zIndex 越大在上面

alpha: number

透明度