图片 Image

Image 组件为 GameObject 提供了使用过图片的能力,可以将 resource 加载的图片添加到 GameObject 上展示出来。使用前需要安装渲染器

Demo

安装

使用 NPM

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

在浏览器中

  1. <script src="https://unpkg.com/@eva/plugin-renderer-img@1.1.x/dist/EVA.plugin.renderer.img.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. // 添加图片资源
  5. resource.addResource([
  6. {
  7. name: 'imageName',
  8. type: RESOURCE_TYPE.IMAGE,
  9. src: {
  10. image: {
  11. type: 'png',
  12. url: 'https://gw.alicdn.com/imgextra/i1/O1CN01376pu91tylcmKqXIt_!!6000000005971-2-tps-658-1152.png'
  13. }
  14. },
  15. preload: true
  16. }
  17. ])
  18. // 创建 game,添加渲染器
  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. ]
  28. })
  29. // 创建 game object
  30. const image = new GameObject('image', {
  31. size: { width: 750, height: 1319 },
  32. origin: { x: 0, y: 0 },
  33. position: {
  34. x: 0,
  35. y: -319
  36. },
  37. anchor: {
  38. x: 0,
  39. y: 0
  40. }
  41. })
  42. // 为 game object 添加 Image Component
  43. image.addComponent(
  44. new Img({
  45. resource: 'imageName'
  46. })
  47. )

参数

resource: String

资源名,这里的资源名对应的是调用 resource.addResource 传入的资源信息中的资源名。