PixiJS -岩石教程

主要特点和功能

高性能: 基于 WebGL 提供高性能的 2D 渲染，同时支持 Canvas 作为回退。
跨平台支持: 兼容主流浏览器和设备，适用于各种 web 和移动平台。
丰富的图形功能: 支持精灵、文本、图形、动画、滤镜等多种图形操作。
易于使用: 提供简单直观的 API，使得开发变得轻松愉快。
强大的社区支持: 拥有活跃的开发者社区和丰富的第三方插件。
灵活的架构: 可以方便地与其他库和框架集成使用。
可扩展性: 支持插件和自定义渲染器，可以扩展其功能。
高级渲染特性: 支持遮罩、混合模式、粒子系统等高级渲染特性。
资源管理: 内置资源加载和管理系统，支持多种资源格式。
文本渲染: 支持多种字体和文本样式，可以渲染高质量的文本。

安装

可以通过 npm 或直接引入 CDN 链接来使用 PixiJS：

使用 npm 安装

npm install pixi.js

引入 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.0/pixi.min.js"></script>

基本用法

以下是一个基本的示例，展示了如何创建一个 PixiJS 应用并绘制一个精灵：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PixiJS Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.0/pixi.min.js"></script>
</head>
<body>
  <script>
    // 创建一个 PixiJS 应用
    const app = new PIXI.Application({ width: 800, height: 600 });
    document.body.appendChild(app.view);
    
    // 加载资源
    app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png').load((loader, resources) => {
      // 创建一个精灵
      const bunny = new PIXI.Sprite(resources.bunny.texture);
      
      // 设置精灵位置
      bunny.x = app.renderer.width / 2;
      bunny.y = app.renderer.height / 2;
      
      // 设置精灵锚点
      bunny.anchor.set(0.5);
      
      // 添加精灵到舞台
      app.stage.addChild(bunny);
      
      // 添加动画
      app.ticker.add((delta) => {
        bunny.rotation += 0.01 * delta;
      });
    });
  </script>
</body>
</html>

高级用法

动画

PixiJS 提供了丰富的动画支持，可以轻松创建复杂的动画效果。

// 创建一个 PixiJS 应用
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// 加载资源
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png').load((loader, resources) => {
  // 创建一个精灵
  const bunny = new PIXI.Sprite(resources.bunny.texture);
  bunny.anchor.set(0.5);
  bunny.x = app.renderer.width / 2;
  bunny.y = app.renderer.height / 2;
  app.stage.addChild(bunny);
  
  // 添加动画
  app.ticker.add((delta) => {
    bunny.rotation += 0.1 * delta;
    bunny.scale.x = 1 + 0.5 * Math.sin(app.ticker.lastTime / 100);
    bunny.scale.y = 1 + 0.5 * Math.cos(app.ticker.lastTime / 100);
  });
});

过滤器和效果

PixiJS 提供了多种内置的滤镜和效果，可以轻松添加各种视觉效果。

// 创建一个 PixiJS 应用
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// 加载资源
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png').load((loader, resources) => {
  // 创建一个精灵
  const bunny = new PIXI.Sprite(resources.bunny.texture);
  bunny.anchor.set(0.5);
  bunny.x = app.renderer.width / 2;
  bunny.y = app.renderer.height / 2;
  app.stage.addChild(bunny);
  
  // 添加模糊滤镜
  const blurFilter = new PIXI.filters.BlurFilter();
  blurFilter.blur = 5;
  bunny.filters = [blurFilter];
});

自定义渲染器

PixiJS 允许开发者创建自定义渲染器，以实现特定需求。

// 自定义渲染器示例
class CustomRenderer extends PIXI.ObjectRenderer {
  constructor(renderer) {
    super(renderer);
  }

  start() {
    // 初始化渲染器
  }

  flush() {
    // 刷新渲染器
  }

  render(element) {
    // 渲染元素
  }

  destroy() {
    // 销毁渲染器
  }
}

PIXI.Renderer.registerPlugin('custom', CustomRenderer);

常用 API 说明

PIXI.Application

PIXI.Application(options): 创建一个新的应用实例。
- options.width (number): 画布的宽度。
- options.height (number): 画布的高度。
- options.view (HTMLCanvasElement): 用于渲染的画布元素。
- options.transparent (boolean): 画布是否透明。
- options.backgroundColor (number): 画布的背景颜色。

PIXI.Sprite

PIXI.Sprite(texture): 创建一个新的精灵对象。
- texture (PIXI.Texture): 精灵使用的纹理。
sprite.anchor: 设置精灵的锚点。
sprite.x: 设置精灵的 x 坐标。
sprite.y: 设置精灵的 y 坐标。
sprite.rotation: 设置精灵的旋转角度。
sprite.scale: 设置精灵的缩放比例。

PIXI.Loader

PIXI.Loader(): 创建一个新的资源加载器实例。
loader.add(name, url): 添加要加载的资源。
loader.load(callback): 开始加载资源，加载完成后调用回调函数。

PIXI.filters

PIXI.filters.BlurFilter: 模糊滤镜。
- blur (number): 模糊程度。

官方资源

官方网站: pixijs.com
GitHub 仓库: github.com/pixijs/pixi.js
文档: pixijs.com/docs
教程: pixijs.com/tutorials
示例: pixijs.com/examples

PixiJS 是一个功能强大且易于使用的 2D 渲染引擎，通过简单的 API 提供高性能的图形和动画功能。无论是游戏开发、数据可视化还是交互式应用，PixiJS 都是一个理想的选择。