基于 CDN 开发

基于 CDN 开发，我们推荐使用 start-demo-with-cdn，这个脚手架使用了 Webpack 的 Externals 能力，将 Eva.js 包用 CDN 的方式引入。

介绍

如果希望通过 CDN 的形式引入 Eva.js，可以使用 unpkg/jsdelivr 进行引入。

以下是 @eva/eva.js 的引入方案

unpkg：

  1. <script src="https://unpkg.com/browse/@eva/eva.js@1.x/dist/EVA.min.js"></script>

jsdelivr：

  1. <script src="https://cdn.jsdelivr.net/npm/@eva/eva.js@1.x/dist/EVA.min.js"></script>

dist目录下提供了压缩版本和调试版本。去掉.min使用调试版本

unpkg：

  1. <script src="https://unpkg.com/browse/@eva/eva.js@1.x/dist/EVA.js"></script>

jsdelivr：

  1. <script src="https://cdn.jsdelivr.net/npm/@eva/eva.js@1.x/dist/EVA.js"></script>

如需引入不同版本的Eva.js，详情请进入unpkg 官网 / jsdelivr 官网查看方案

插件的使用

Eva.js 的每个插件都是一个 npm 包，所以每个插件都需要引入一个cdn文件

例如：图片插件

unpkg：

  1. <script src="https://cdn.jsdelivr.net/npm/@eva/plugin-renderer-img@1.x/dist/EVA.plugin.renderer.img.js"></script>

jsdelivr：

  1. <script src="https://cdn.jsdelivr.net/npm/@eva/plugin-renderer-img@1.x/dist/EVA.plugin.renderer.img.js"></script>

渲染

Eva.js v1.x 版本的渲染是由 PixiJS 提供的，所以需要先引入 PixiJS cdn。 目前使用的是pixi4.x的版本

  1. <script src="https://unpkg.com/pixi.js@4.8.9/dist/pixi.min.js"></script>

Eva.js v1.x 的渲染需要一层adapter支持，所以也需要引入renderer-adapter

  1. <script src="//unpkg.com/@eva/renderer-adapter@1.1.x/dist/EVA.rendererAdapter.min.js"></script>

所以渲染一张图片完整所需要的cdn文件有：

  1. <canvas id="canvas" style="width: 100%;height: auto"></canvas>
  3. <script src="https://unpkg.com/@eva/eva.js@1.x/dist/EVA.min.js"></script>
  4. <script src="https://unpkg.com/pixi.js@4.8.9/dist/pixi.min.js"></script>
  5. <script src="https://unpkg.com/@eva/renderer-adapter@1.x/dist/EVA.rendererAdapter.min.js"></script>
  6. <script src="https://unpkg.com/@eva/plugin-renderer@1.x/dist/EVA.plugin.renderer.min.js"></script>
  7. <script src="https://unpkg.com/@eva/plugin-renderer-img@1.x/dist/EVA.plugin.renderer.img.min.js"></script></head>

编码

使用 CDN 开发时，我们把 Eva.js 的各个变量和类挂在了window上面。 先举个简单的例子，我们假设已经引入了图片所需要的 CDN 文件

  1. const { Game, GameObject, resource, RESOURCE_TYPE } = EVA;
  2. const { RendererSystem } = EVA.plugin.renderer;
  3. const { Img, ImgSystem } = EVA.plugin.renderer.img;
  4. resource.addResource([
  5.   {
  6.     name: 'imageName',
  7.     type: RESOURCE_TYPE.IMAGE,
  8.     src: {
  9.       image: {
  10.         type: 'png',
  11.         url:
  12.           'https:////gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',
  13.       },
  14.     },
  15.     preload: true,
  16.   },
  17. ]);
  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. });
  30. const image = new GameObject('image', {
  31.   size: { width: 300, height: 300 },
  32.   origin: { x: 0, y: 0 },
  33.   position: {
  34.     x: 100,
  35.     y: 100,
  36.   }
  37. });
  39. image.addComponent(
  40.   new Img({
  41.     resource: 'imageName',
  42.   }),
  43. );
  45. game.scene.addChild(image);

规则

我们可以发现，变量挂载的规则和npm包名的规则类似，其中 @eva/eva.js 对应的是 EVA 其余插件也的都挂载到了 EVA 变量上

例如:

@eva/plugin-transition -> EVA.plugin.transition

@eva/plugin-renderer -> EVA.plugin.renderer

@eva/plugin-renderer-img -> EVA.plugin.renderer.img

@eva/plugin-renderer-sprite -> EVA.plugin.renderer.sprite

我们可以看到，其实把 - 变成了 .

组件名字中有连字符的，例如 nine-patch / sprite-animation / tiling-sprite 我们把组件名写成了驼峰的形式

@eva/plugin-renderer-nine-patch -> EVA.plugin.renderer.ninePatch

@eva/plugin-renderer-sprite-animation -> EVA.plugin.renderer.spriteAnimation

@eva/plugin-renderer-tiling-sprite -> EVA.plugin.renderer.tilingSprite

EvaX 组件最为特殊

@eva/plugin-evax -> EVA.plugin.EVAX

转换方法

可以通过以下方法进行转换

  1. function transform(pkgName) {
  2.   if (pkgName === '@eva/eva.js') {
  3.       return 'EVA';
  4.   } else if (pkgName === '@eva/plugin-evax') {
  5.       return 'EVA.plugin.EVAX'
  6.   } else if (pkgName.indexOf('@eva/plugin') === 0) {
  7.       let name = pkgName.substring(12);
  8.       name = name.replace('-', '.')
  9.       const [a, b] = name.split('-')
  10.       if (b) {
  11.         name = a+b[0].toUpperCase()+b.substring(1)
  12.       }
  13.       return `EVA.plugin.${name}`;
  14.   }
  15. }
  17. console.log(transform('@eva/eva.js'))
  18. console.log(transform('@eva/plugin-transition'))
  19. console.log(transform('@eva/plugin-renderer'))
  20. console.log(transform('@eva/plugin-renderer-img'))
  21. console.log(transform('@eva/plugin-renderer-sprite-animation'))
  22. console.log(transform('@eva/plugin-renderer-tiling-sprite'))
  23. console.log(transform('@eva/plugin-evax'))