依赖结构

先看整体组织方式，rollup打包，lerna组织多个包，其它的暂时不用注意。

npm run build直接编译，没有什么多余的操作，打包出来的代码大概42k行，比three要多很多，当然，里边的注释也很多。

用lerna-dependency-graph看看依赖

  1. npx lerna-dependency-graph -o graph.gvz

依赖很复杂，只关注核心部分，经过亿点点筛选，最终得到：
image.png
这是不涉及要绘制的内容的最精简架构，如果要添加内容，需要加入graphics, sprite等包

看名字以及包里的大致注释，大概描述下：

  • 基础配置：constants，settings
  • 基础工具：utils，math，runner（事件系统，不知道为啥取这名字），ticker（循环执行系统）
  • display：抽象的显示对象，container之类的东西
  • core：核心渲染器，应该是整个库的核心
  • app：用户接口，整合renderer等东西，比较简单

最小示例

紧接着，写个最简demo测试下：https://github.com/brickmaker/pixi-demo
用rollup-starter-app搭建，基本代码：

  1. import { Application } from "@pixi/app";
  2. import { TickerPlugin } from "@pixi/ticker";
  3. import { Sprite } from "@pixi/sprite";
  4. import { Renderer, BatchRenderer } from "@pixi/core";
  6. Application.registerPlugin(TickerPlugin);
  7. Renderer.registerPlugin("batch", BatchRenderer);
  9. const app = new Application({
  10.   width: 500,
  11.   height: 500,
  12.   backgroundColor: 0xeeeeee,
  13. });
  14. document.body.appendChild(app.view);
  16. // sprite
  17. const bunny = Sprite.from("./test.png");
  19. // center the sprite's anchor point
  20. bunny.anchor.set(0.5);
  22. // move the sprite to the center of the screen
  23. bunny.x = app.screen.width / 2;
  24. bunny.y = app.screen.height / 2;
  26. app.stage.addChild(bunny);

有几个注意点：

rullup需要进行一点配置才能用，需要加入preferBuiltins: false

{
  ...
  plugins: [
        resolve({
            preferBuiltins: false
        }), // tells Rollup how to find date-fns in node_modules
        commonjs(), // converts date-fns to ES modules
    ...
    ]
  ...
}

直接安装对应的依赖，然后写代码，会什么都画不出来，而且会报错，因为没有完整组装Application和Renderer：

Application.registerPlugin(TickerPlugin);
Renderer.registerPlugin("batch", BatchRenderer);

这部分代码在bundles/pixi.js/src/index.ts中，这是pixi.js真正的顶层入口

为了测试绘制的正确，用了Sprite绘制一个图片，Sprite比graphic应该更简单一点，先拿它来测试

整个最小示例只包含pixi的10个包，打包出来的代码20k，比原来少了一半多，至少更清楚了！

下一步

好，现在明确要看的内容了：

  1. 看app部分的代码，了解整体的接口，以及组织方式
  2. 看ticker和runner两个小模块，搞懂pixi的实现有什么特别的地方
  3. 简单过下display部分，看看抽象对象如何组织
  4. 专注core部分的代码，再展开分析

Misc

npm-run-all, run-s, run-p
再也不用自己手动用unix的&&命令了，更靠谱

lerna-dependency-graph
分析lerna包的神器，可以清楚看到依赖，配合graphviz online，直接生成依赖图