Development based on CDN

Based on CDN development, we recommend using start-demo-with-cdn, this scaffolding uses the Externals capabilities of Webpack, and Eva. The js package is introduced by way of CDN.

Introduce

If you want to import Eva.js in the form of CDN, you can use unpkg/jsdelivr to import it.

The following is the introduction plan of @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>

A compressed version and a debug version are provided in the dist directory. Remove the .min and use the debug version

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>

If you need to introduce different versions of Eva.js, please go to unpkg official website / jsdelivr official website to view the plan for details

Use of plugins

Each plug-in of Eva.js is an npm package, so each plug-in needs to introduce a cdn file

For example: image plugin

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>

Render

The rendering of Eva.js v1.x version is provided by PixiJS, so you need to introduce PixiJS cdn first. Currently using the version of pixi4.x

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

The rendering of Eva.js v1.x requires a layer of adapter support, so it also needs to introduce renderer-adapter

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

So the cdn files needed to render a complete picture are:

  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>

Encoding

When developing with CDN, we hung the variables and classes of Eva.js on the window. Let’s take a simple example. Let’s assume that the CDN files needed for the image have been introduced.

  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);

rule

We can find that the rules for variable mounting are similar to those for npm package names, where @eva/eva.js corresponds to EVA The rest of the plugins are also mounted on the EVA variable

For example:

@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

As we can see, in fact, - has become .

There are hyphens in the component name, such as nine-patch / sprite-animation / tiling-sprite We write the component name in camel case

@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 components are the most special

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

Conversion method

Can be converted by the following methods

  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'))