PIXI.js 学习笔记

安装

npm install pixi.js --save

基础概念

基本使用

import * as PIXI from 'pixi.js'

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution: window.devicePixelRatio || 1,
  antialias: true, // 抗锯齿
})

// 将应用画布添加到DOM中
document.body.appendChild( app.view )

// 创建一个矩形
const rectangle = new PIXI.Graphics()
rectangle.beginFill( 0x66ccff ) // 填充颜色
rectangle.drawRect( 0, 0, 64, 64 ) // 绘制矩形
rectangle.endFill() // 结束绘制

// 将图形添加到舞台
app.stage.addChild( rectangle )

坐标

在 PIXI.js 中的坐标同 html 坐标一致，原点从页面左上方开始

图形 Graphics

将基本形状（如线条，圆形，矩形等）渲染到显示器，并为他们添加样式。页可以使用 Graphics 对象构建图形。

PIXI.js 官方文档：Graphics

Bilibili 视频教程：02-Pixi图形Graphics具体应用

常用图形类型

• drawRec 矩形
• drawRoundedRect 圆角矩形
• drawCircle 圆形
• drawEllipse 椭圆
• drawPolygon 多边形
• arc 圆弧
• moveTo / lineTo 绘制线段

属性与方法

• beginFill 设置填充色
• lineStyle 设置边框
• endFill 绘制结束
• position 位移
• scale 缩放
• rotation 旋转
• pivot 设置图形原点

文字 Text

Bilibili 视频教程：07-PIXI文字与遮罩

const text = new PIXI.Text( 'Hello world!', {
  fontFamily: 'Arail',
  fontSize: 36,
  fill: 0xff0000,
  align: "center"
} )

纹理 Texture

PIXI.js 官方文档：Texture

Bilibili 视频教程：04-PIXI纹理与动画实现

const texture = PIXI.Texture.from( "./image.png" )
const sprite = new PIXI.Sprite( texture )
sprite.anchor.set( 0.5, 0.5 )
sprite.x = app.screen.width / 2
sprite.y = app.screen.height / 2
app.stage.addChild( sprite )

属性与方法

• anchor 原点
• x, y 位置
• scale 缩放
• rotation 旋转
• alpha 不透明度
• mask 遮罩

容器 Container

可将所有元素进行组合

const container = new PIXI.Container()
container.addChild( element )

滤镜 Filter

PIXI 官方文档：Filter

Bilibili 视频教程：08-PIXI滤镜特效

const blurFilter = new PIXI.BlurFilter()
blurFilter.blur = 20
sprite.filters = [ blurFilter ]

基本滤镜

• BlurFilter

扩展滤镜

https://github.com/pixijs/filters

// 安装滤镜
npm install pixi-filters

import { OutlineFilter } from 'pixi-filters'
const outlineFilter = OutlineFilter( 5, 0xffff00 )
sprite.filters = [ outlineFilter ]

交互事件 Events

PIXI.js 官方文档：Events

Bilibili 视频教程：05-PIXI事件交互

sprite.interactive = true;
sprite.on('click', () => {})

资源管理

Bilibili 视频教程：06-PIXI资源管理

// 添加资源
PIXI.Assets.add( 'image1', './image1.png' )
PIXI.Assets.add( 'image2', './image2.png' )
PIXI.Assets.add( 'image3', './image3.png' )

// 异步加载资源
const texturesPromise = PIXI.Assets.load( [ 'image1', 'image2', 'image3' ] )

参考网址

Bilibili 视频教程