基于 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.<span class="hljs-subst">${name}</span>;
      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’))
      ,