Pixi.js的基本使用(1)--精灵与舞台

一如彷徨
2,356 阅读5分钟

Pixi简介

  • Pixi 是一个非常快的 2D sprite 渲染引擎

  • Pixi 的用途：

    • 显示、动画和管理交互式图形
    • 制作游戏和应用程序

  • 创建任何交互式应用，包括手机应用

  • Pixi 的特征：

    • 支持 WebGL 渲染，渲染性能高
    • 支持 canvas 渲染(当设备不支持 WebGL 时)
    • 简单易用的 API，附带很多封装的模块
    • 支持完整的鼠标和移动端 touch 事件
    • 与其他插件或框架无缝集成

  • Pixi 的劣势：

    • 不支持 3D
    • 不适合做复杂的游戏

搭建Pixi

  • 安装 PixiJS
 npm i pixi.js@6.0.4

  • 引入 PixiJS，并测试 Pixi 是否正常

    • 若控制台显示 PixiJS 6.0.4 - * WebGL * http://www.pixijs.com/ ♥♥♥ 则正常
 import * as PIXI from "pixi.js";
 ​
 export default {
   mounted() {
     PIXI.utils.sayHello("WebGL");
   },
 };

image-20230202120604916.png

基本概念

  • Application： 最基本的单元，根据配置创建对应的画布，并自动选择使用 Canvas 或 WebGL 渲染图形
  • renderer： 渲染器，显示场景图形并将其绘制到屏幕上，默认渲染器是基于 WebGL 的
  • Texture： 纹理，显示对象使用的核心资源之一，用于填充屏幕上某个区域的像素源，提高 WebGL 的渲染效率
  • Sprite： 精灵，一个特殊的图像，可以设置其位置、大小等属，也可通过图片、纹理等方式创建，并将其加入到相应的场景中
  • Loader： 资源预加载使用，由于音频、图片等文件大多数为异步资源，加载需一定时间，所以需要使用loader 将资源加载，然后再渲染页面
  • Container： 用于创建场景图形的主显示对象，要显示的可渲染对象树，如精灵、图形和文本
  • Ticker： 提供基于时钟的周期性回调
  • Interaction： 使对象可点击，触发悬停事件等

使用Pixi

  • 使用 Pixi 上的 Application 对象，创建一个矩形显示区域，并将生成的 canvas 挂载

    • PIXI.Application会自动选择使用 Canvas 或 WebGL 来渲染图形，取决于浏览器支持情况
 <div id="app" ref="pixi"></div>

 export default {
   data() {
     return {
       app: null,
     };
   },
   
   mounted() {
     this.initApp(); // 初始化pixi应用
   },
 ​
   methods: {
     initApp() {
       if (this.pixiApp) return;
       this.app =  new PIXI.Application({
         width: 600, // 宽
         height: 600, // 高
         backgroundAlpha: 1, // 背景不透明
         backgroundColor: 0xcd0000, // 画布的背景颜色
         antialias: true, // 开启抗锯齿
         resolution: 1, // 像素比
         forceCanvas: false, // 不强制使用canvas
       });
       this.$refs.pixi.appendChild(this.app.view); // 挂载生成的画布
     },
   },
 };

renderer对象

  • renderer 即为 Pixi 的渲染器，可以按照下列方法修改渲染器的属性
 // 修改渲染器背景颜色
 this.app.renderer.backgroundColor = 0x4ce65e;
 ​
 // 修改渲染器的宽度/高度
 this.app.renderer.view.width = 200
 this.app.renderer.view.height = 500
 ​
 // 确保画布的大小调整到与分辨率匹配
 this.app.renderer.autoResize = true; 
 ​
 // 重新设置宽高
 this.app.renderer.resize(512, 512);  
  • 让画布填充整个窗口，应用 CSS 样式
 this.app.renderer.view.style.position = "absolute";
  // 虽然absolute可以块状化，但是此处不设置block的话，display则为空
 this.app.renderer.view.style.display = "block";
 this.app.renderer.autoResize = true;
 // 让其与屏幕一样大小
 this.app.renderer.resize(window.innerWidth, window.innerHeight);

精灵与舞台

舞台： app.stage

  • 任何要在渲染器中可见的东西都必须添加到 Pixi 的stage（舞台）中
  • stage 舞台就是 Pixi 的 Container 对象

image-20230202174401878.png

  • stage对象是场景中所有可见事物的根容器，在stage里放的任何东西都会在画布上渲染出来

  • stage具有与任何其他 Container对象相同的属性和方法，但是 stage 的宽高是只读的，不涉及画布大小

  • 精灵： PIXI.Sprite

    • 一种特殊图像对象，可以控制它们的位置、大小和其他属性

    • 需要通过 PIXI.Sprite() 类创建，创建的方法有三种：

      • 通过单个图像文件
      • 通过 雪碧图
      • 通过 纹理贴图
     let sprite = new PIXI.Sprite();

加载图像到纹理缓存

  • 由于 Pixi 使用 WebGL 在 GPU 上渲染图像，图像需要转换为 GPU 可处理的东西，为保证快速高效，Pixi 使用 textureCache（纹理缓存）来存储和引用精灵所需的纹理
  • texture（纹理）名称： 引用图像的文件的路径
  • 转换纹理需要使用 PIXI.Loader.shared，其本质也是 Loader 对象，使用其 add 函数加载图片资源
 loader.add("figure", require("@/assets/images/figure.png")); // 加载图片资源
  • 待图片加载完成后，会调用 loader 的 load 回调，其中创建精灵所需的资源是在 resources 参数中
 loader.load((loader, resources) => {
   PIXI.utils.clearTextureCache(); // 清除纹理缓存
   textureMap.myTexture = resources.figure.texture;
 });
  • 完整函数
 loadResource() {
   const textureMap = {};
   const imgUrl = require("@/assets/images/figure.png");
   const loader = PIXI.Loader.shared;
   loader.reset(); // 有缓存，需要重置loader
   loader.add(imgUrl); // 加载图片资源
   return new Promise((resolve) => {
     loader.load((loader, resources) => {
       PIXI.utils.clearTextureCache(); // 清除纹理缓存
       textureMap.myTexture = resources[imgUrl].texture;
       resolve(textureMap);
     });
   });
 },
  • 创建精灵，并将精灵添加到舞台中方
 // initAPP函数
 const textures = await this.loadResource(); // 加载资源
 const mySprite = new PIXI.Sprite(textures.myTexture); // 创建精灵
 app.stage.addChild(mySprite); // 将精灵添加到舞台
  • 代码运行后，精灵正常显示

image-20230203113020772.png

  • 让精灵消失的两种方式
 app.stage.removeChild(mySprite) // 删除精灵
 ​
 mySprite.visible = false; // 将精灵的visible属性设置为false，使其消失

监控加载进度

  • Pixi 的加载器有一个特殊的 progress 事件，它调用一个自定义函数，该函数在每次加载资源时运行
 loader.onProgress.add((loader, resource) => {
   console.log("loading");
 });
  • 每加载一个文件时，都会输出一次 loading

image-20230203123303271.png

  • resource 对象的其他属性

    • resource.error： 加载文件时发生的任何可能的错误
    • resource.data： 资源的 HTML 元素
    • resource.extension： 文件的扩展名
    • resource.progressChunk： 资源加载量

加载器的更多用法

  • Pixi 的 loader 具有丰富的特性和可配置性，加载器的链式方法 add 有4个基本参数

    • name： 加载的资源的名称

    • url： 资源的路径(必须)

    • options： 加载配置项

      • options.crossOrigin： 请求是否跨域
      • options.loadType： 如何加载资源，默认值是 Resource.LOAD_TYPE.XHR
      • options.xhrType： 使用 XHR 时应如何解析加载的数据，默认值是Resource.XHR_RESPONSE_TYPE.DEFAULT

    • callback： 资源完成加载时的回调

 loader.add(name, url, option, callback)
  • 对象形式语法
 loader.add({name:'', url:''},()=>{}) // 对象+回调方式
 ​
 loader.add({name:'', url:'', onComplete:()=>{}}, crossOrigin: true) // 对象形式
  • 传递由数组和 url 组成的数组
 loader.add([url1, url2, url3])
avatar
文章
阅读
粉丝