一、纹理

在 PixiJS 中，纹理是显示对象使用的核心资源之一。纹理表示用于填充屏幕上某个区域的像素源。

1. 纹理生命周期

源图像 --> 加载器 --> 基本纹理 --> 纹理

2. 使用

<script setup>
// 1.导入pixi
import * as PIXI from 'pixi.js'; 
// 2.创建应用
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution:window.devicePixelRatio || 1, //设备像素比
});
// 应用画布加到dom中
1. document.body.appendChild(app.view)
// 创建纹理
const texture = PIXI.Texture.from('./texture/sample.png')
//创建一个精灵 在精灵上创建纹理
const spirte = new PIXI.Sprite(texture);
//设置精灵的锚点(让资源的中心在屏幕中心)
spirte.anchor.set(0.5, 0.5);
// 设置精灵的位置 开始是左上角居中
spirte.x = app.screen.width / 2;
spirte.y = app.screen.height / 2;
//设置精灵旋转45°
spirte.rotation = Math.PI / 4;
//设置精灵的缩放
spirte.scale.set(2, 2);
//设置精灵的透明度
spirte.alpha = 0.5;
app.stage.addChild(spirte);
//创建一个容器，让动画动起来
//tricker实现动画，回调函数让每帧动起来
app.ticker.add((delta) => {
  //delta 两帧之间有时间差
  spirte.rotation += 0.01 * delta;
})
</script>

在不停旋转，没有动态图

二、事件交互

pixi事件 API 文档 (pixijs.download)

//为精灵添加交互事件
spirte.interactive = true;   //必须先设置为true
spirte.on('click', () => {
  console.log('click')
})
spirte.on('pointerenter', () => {
  spirte.alpha = 1;     //鼠标移入透明度为1
})
spirte.on('pointerout', () => {
  spirte.alpha = 0.5;   //鼠标移出透明度为1
})

三、资源管理（多张图）

3.1 第一种方法

<script setup>
import * as PIXI from "pixi.js";
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1, //设备像素比
});
document.body.appendChild(app.view);

// 1. 添加资源
PIXI.Assets.add("sample", "./texture/sample.png");
PIXI.Assets.add("sample1", "./texture/sample1.png");
PIXI.Assets.add("logo", "./texture/logo.png");

// 2. 异步加载资源
const texturepro = PIXI.Assets.load(["sample", "sample1","logo"], (progress) =>{
  console.log('加载完成',progress)
});

// 3. 加载完成后创建精灵
texturepro.then((textures) => {
  // 3.1 创建容器
  const container = new PIXI.Container();
  const spirte = new PIXI.Sprite(textures.jian);
  spirte.anchor.set(0.5, 0.5);
  spirte.x = app.screen.width / 2;
  spirte.y = app.screen.height / 2;
  spirte.rotation = Math.PI / 4;  //旋转
  spirte.scale.set(2, 2);  //缩小
  spirte.alpha = 0.5;  //透明度
  spirte.blendMode = PIXI.BLEND_MODES.ADD;  //混合模式
  spirte.interactive = true;  //交互
  spirte.buttonMode = true;  //鼠标样式
  spirte.on('pointerdown', () => {
    console.log('pointerdown');
  })
  container.addChild(spirte);
  // 创建精灵2
  const spirte2 = new PIXI.Sprite(textures.mujian);
  container.addChild(spirte2);
  app.stage.addChild(container);
});
</script>

3.2 第二种方法（一次性加入多个）

<script setup>
// 1.导入pixi
import * as PIXI from "pixi.js";
// 2.创建应用
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1, //设备像素比
});
// 应用画布加到dom中
document.body.appendChild(app.view);

//添加场景1的资源
PIXI.Assets.addBundle({
  sample: './texture/sample.png',
  sample1: './texture/sample1.png',
  logo: './texture/logo.png',
})

// 2. 异步加载资源
const texturepro = PIXI.Assets.loadBundle('scene1', (progress) =>{
  console.log('加载完成',progress)
});
// 3. 加载完成后创建精灵
texturepro.then((textures) => {
  // 创建容器
  const container = new PIXI.Container();
  const spirte = new PIXI.Sprite(textures.simple);
  spirte.anchor.set(0.5, 0.5);
  spirte.x = app.screen.width / 2;
  spirte.y = app.screen.height / 2;
  spirte.rotation = Math.PI / 4;  //旋转
  spirte.scale.set(1, 1);  //缩小
  spirte.alpha = 1;  //透明度
  spirte.blendMode = PIXI.BLEND_MODES.ADD;  //混合模式
  spirte.interactive = true;  //交互
  spirte.buttonMode = true;  //鼠标样式
  spirte.on('pointerdown', () => {
    console.log('pointerdown');
  })
  container.addChild(spirte);
  // 创建精灵2
  const spirte2 = new PIXI.Sprite(textures.logo);
  container.addChild(spirte2);
  app.stage.addChild(container);
});
</script>

四、文字及遮罩

<script setup>
import * as PIXI from "pixi.js";
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xff66cc,
  resolution: window.devicePixelRatio || 1, //设备像素比
});
document.body.appendChild(app.view);

//显示hello world文字
const text = new PIXI.Text('hello world', {
  fontFamily: 'Arial',
  fontSize: 100,
  fill: 0xff0000,
  align:'center'
})
// 设置文字位置
text.x = app.screen.width / 2;
text.y = app.screen.height / 2;
// 设置文字锚点
text.anchor.set(0.5);
// 创建一个精灵
const texture = PIXI.Sprite.from('./texture/logo.png');   //vue的logo
//用精灵铺满整个屏幕
texture.width = app.screen.width;
texture.height = app.screen.height;
texture.mask = text;
//用文字作为遮罩
app.stage.addChild(texture);
</script>

五、滤镜

5.1 模糊滤镜

<script setup>
import * as PIXI from "pixi.js";
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1, //设备像素比
});
// 应用画布加到dom中
document.body.appendChild(app.view);
// 创建一个精灵
const texture = PIXI.Texture.from('./texture/logo.png');
const spirit = new PIXI.Sprite(texture);
//设置精灵的位置
spirit.x = app.screen.width / 2;
spirit.y = app.screen.height / 2;
spirit.anchor.set(0.5);
app.stage.addChild(spirit);
//创建模糊滤镜
const blurFilter = new PIXI.BlurFilter();
// 设置滤镜模糊程度
blurFilter.blur = 20;
// 将模糊滤镜加载到精灵滤镜上
spirit.filters = [blurFilter];
</script>

添加事件

// 监听鼠标是否进入
spirit.interactive = true;
spirit.on('pointerover', () => {
  blurFilter.blur = 0;
})
spirit.on('pointerout', () => {
  blurFilter.blur = 20;
})

5.2 发光滤镜

发光滤镜在pixi-filters库中

安装

yarn add pixi-filters

导入

import {OutlineFilter} from "pixi-filters";

使用

<script setup>
import * as PIXI from "pixi.js";
import {OutlineFilter} from "pixi-filters";
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1, //设备像素比
});
document.body.appendChild(app.view);

// 创建一个精灵
const texture = PIXI.Texture.from('./texture/logo.png');
const spirit = new PIXI.Sprite(texture);
//设置精灵的位置
spirit.x = app.screen.width / 2;
spirit.y = app.screen.height / 2;
spirit.anchor.set(0.5);
app.stage.addChild(spirit);
//创建滤镜
const blurFilter = new PIXI.BlurFilter();
// 设置滤镜模糊程度
blurFilter.blur = 20;
//创建轮廓滤镜
const outlineFilter = new OutlineFilter(5, 0xffff00);  //轮廓宽度，轮廓颜色
//轮廓滤镜加到精灵上
spirit.filters = [outlineFilter];
</script>

5.3 轮廓滤镜

同上，需要pixi-filters库

const glowFilter = new GlowFilter({
  distance: 50,  // 虚化强度
  outerStrength: 5,  // 实强度
  innerStrength: 0,  //
  color: 0xff0000,  //颜色
  quality:0.5,    //
})
spirit.filters = [glowFilter,outlineFilter];

[pixi] 纹理，事件交互，文字，滤镜

一、 纹理

1. 纹理生命周期

2. 使用

二、 事件交互

三、资源管理（多张图）

3.1 第一种方法

3.2 第二种方法（一次性加入多个）

四、文字及遮罩

五、滤镜

5.1 模糊滤镜

5.2 发光滤镜

5.3 轮廓滤镜

一、纹理

二、事件交互