PIXI入门系列之基本使用(上篇)

2024-04-27 19:12
文章标签 使用 入门 系列 基本 pixi

本文主要是介绍PIXI入门系列之基本使用(上篇)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在之前文章PIXI开篇中对于PIXI的定位以及历史进行了说明，相信对PIXI整体有了一定的认知，本篇是入门系列的第二篇，本篇文章主要介绍相关PIXI API的具体使用以及一些关键知识点，相关的细节性还是需要结合PIXI API文档来具体查看。PIXI版本是v8.1.0。

基础入门

import { Application, Assets, Sprite } from "./pixi.js";const initStage = async () => {// 创建应用const app = new Application();// 初始化应用逻辑await app.init({ width: 640, height: 360 });// 挂载到HTML DOM上document.body.appendChild(app.canvas);// 加载图片资源并且创建精灵元素await Assets.load("./bunny.png");const sprite = Sprite.from("./bunny.png");// 添加到stage中app.stage.addChild(sprite);// 应用ticker实现动画let elapsed = 0.0;app.ticker.add((ticker) => {elapsed += ticker.deltaTime;sprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;});
};
initStage();

上面是一个非常简单的PIXI案例，逻辑很简单就是创建Sprite元素添加到应用Application中，然后水平方向实现往返动画。

从上面代码逻辑中实际上可以知道很多信息：

  • 使用Application类创建应用实例，使用Assets加载图片，使用Sprite创建精灵元素
  • 应用实例的stage属性可以添加元素从而构成父子关系
  • 应用实例的ticker属性可以添加回调函数从而实现动画逻辑，回调函数就是每一帧逻辑，从而知道ticker内部是使用requestAnimationFrame来实现的
  • 应用实例的canvas属性就对应着一个canvas DOM对象，可以知道PIXI内部会创建canvas HTMLElement

结合上面的简单案例以及官网的细节，这里提炼下PIXI相关的思想以及相关API：

  • 图形元素：构成场景的内容元素，在PIXI中一个图形元素通常也是一个可渲染对象，可以是Sprite（精灵）、Text（文本）、Graphics（图形）、Container（容器）、Mesh（网格模型）等
  • 场景图：一系列可渲染对象构成场景图，而场景图是树结构从而构成元素之间的父子关系，即图形元素类似于容器可以添加子元素，从而构成一个场景树
  • 资源管理：使用Assets实现本地资源的加载管理

PIXI中可渲染对象表示可以被PIXI渲染呈现出来的对象，对于可渲染对象中的Sprite和Mesh，这里简单说明下：

  • Mesh表示网格模型，在3D中几何物体是依据网格模型创建的，顶点数据+材质数据构成物体，纹理可以应用到Mesh上
  • Sprite表示精灵模型，在3D中精灵模型就是一个二维平面，这个平面无法翻转始终面向屏幕，纹理可以应用到Sprite上

PIXI的定位是渲染2D内容，虽然是WebGL实现，但由于底层封装所以暴露出来的一些3D知识不是太多，如果有3D知识基础，那么理解PIXI中纹理Texture、Sprite、Mesh就会非常容易。这里只需要记得PIXI渲染的是2D视觉内容，在PIXI中Mesh、Sprite都是平面，其他摄像机以及投影等3D概念不需要了解。

Container

Container类代表着容器，在PIXI中它是非常重要的类，它主要提供容器以及显示对象的功能：

  • 容器功能意味着一个Container可以添加其他子对象，从而实现分组功能
  • 显示对象功能是指PIXI中可以控制是否渲染或显示某个图形元素

Container的基本使用如下：

const group = new PIXI.Container()
group.addChild(new PIXI.Sprite.from('./bunny.png'))

在PIXI中Container的属性有：

  • 位置属性：position
  • 角度属性：angle（角度）、rotation（弧度）
  • 变换属性：rotate、scale、skew、pivot（中心位置，相当于transform-origin）
  • 显示属性：renderable（可渲染）、visible（可见）
  • 透明度：alpha
const container = new Container();
container.position.set(4,4);

上面只是Container基础使用，实际上Container是非常复杂的，还涉及到交互事件、矩阵等其他属性或方法。

Sprite & Spritesheet

Sprite是PIXI中最常见的可渲染对象，每个 Sprite 都包含要绘制的纹理Texture，纹理可以简单的看成图片，在PIXI中纹理可以来源于图片或者视频。

Sprite的基本使用如下：

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const bunnySprite = new Sprite(texture);app.stage.addChild(bunnySprite);

需要注意的是：Sprite必须设置纹理属性，实际上Sprite还有其他的属性：

  • Sprite继承自Container，所以也可以设置对应的位置、角度等属性
  • Sprite的属性anchor，它表示锚点，用于设置渲染、缩放等变换的中心点

在PIXI中纹理的加载可以通过两种API方式实现，除了上面的Assets方式，PIXI提供Texture类来实现：

const sameTexture = Texture.from('assets/image.png');

在PIXI中Sprite按照功能有多个分类：

  • Sprite：基础精灵
  • TilingSprite：平铺精灵，渲染平铺图像的快速方法
  • AnimatedSprite：动画精灵，应用多个纹理从而实现动画效果

Spritesheet表示精灵表，Spritesheet 的基本思想是将一系列图片打包成单个图片，跟踪每个源图片的最终位置，并将该组合图片用作生成的 Sprite的纹理，是优化项目的关键工具，具体使用查看PIXI官网。

Graphics & GraphicsContext

Graphics是一个复杂的图形类，它实现PIXI图形的创建，可以实现线、矩形、圆、椭圆、弧线、贝塞尔曲线等图形。

Graphics类的基本使用如下：

const obj = new Graphics().rect(0, 0, 200, 100).fill(0xff0000);app.stage.addChild(obj);

图形类提供了一系列的绘制方法，可以类比Canvas API来熟悉，两者有很多相似的地方。

在PIXI中还可以使用GraphicsContext来创建图形，GraphicsContext表示图形上下文，也可以实现相关图形的创建。GraphicsContext主要的应用场景是共享同样的绘制指令从而生成多个Graphices。

const circleContext = new GraphicsContext().circle(100, 100, 50).fill('red')const circle1 = new Graphics(circleContext)
const circle2 = new Graphics(circleContext)

Graphices本质上就是图形上下文来提供的图形绘制命令，原理和Canvas API相同，即Graphices提供context属性，只不过可以省略简写而已

const circleGraphics = new Graphics()circleGraphics.context.circle(100, 100, 50).fill('red')
文字Text

在PIXI中文字绘制有三种方式：

  • Text：静态文本，很好地控制文本的样式，适用少量文本
  • BitmapText：动态文本，占用内存低，适合大量文本
  • HTMLText：使用HTML渲染文本
const basicText = new Text({ text: 'Basic text in pixi' });const bitmapFontText = new BitmapText({text: 'bitmap fonts are supported!\nWoo yay!',style: {fontFamily: 'Desyrel',fontSize: 55,align: 'left',},
});const htmlText = new HTMLText({text: 'Hello Pixi!',style: {fontFamily: 'Arial',fontSize: 24,fill: 0xff1010,align: 'center',}
});
Assets

Assets提供基于Promise的资源管理方案，在PIXI中使用Assets可以加载常见格式的文件，例如json、图片、字体文件等。

Assets是一个单例的全局对象，无需实例化，具体使用如下：

const bunny = await Assets.load('bunny.png');

Assets实际上是PIXI封装好的方案，通常情况下使用改API就足够了，但是在PIXI中对于资源管理需要知道的是：

  • Loader：加载器，资源的加载都是通过其来实现的
  • BackgroundLoader：后台加载器，允许资源的加载在后台进行

Assets底层就是通过Loader来实现的，其他一些更加具体的可以查看PIXI API文档。

Ticker

Ticker提供在下一个请求的动画帧上执行的逻辑，可以实现循环渲染，实际上Ticker底层是基于requestAnimationFrame来实现的。

Ticker的基本使用如下：

const ticker = new Ticker()
ticker.add(() => {})// 或者关闭自动开始，手动控制渲染
ticker.autoStart = false
ticker.stop();
const animate = (time) => {ticker.update(time);renderer.render(stage);requestAnimationFrame(animate);
};
animate(performance.now());

Ticker的使用很简单，具体的内部实现后续源码系列会进行详细说明。

事件Events

在PIXI中事件系统支持Pointer、Mouse、Touch事件类型，任何派生自Container的对象都可以设置对应的EventMode从而成为可交互的对象

通常情况下可渲染对象（例如Container、Sprite）都可以注册相关事件，具体如下：

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const sprite = Sprite.from(texture);
// 设置事件模式
sprite.eventMode = 'static';
sprite.on('click', (event) => {
});

这里需要注意的是eventMode，在PIXI中事件模式的值按照是否响应事件分为两类：

  • 不响应事件：none、passive、auto
  • 响应事件：static、dynamic

不同值代表着不同的处理逻辑，详细的说明需要结合源码来梳理，这里只需要知道通常情况下使用static就行。

在PIXI中EventEmitter API是事件系统的基础，而Container继承了EventEmitter，所以派生自Container的都可以应用事件，所以在PIXI中常见的类实例基本上都可以应用事件。

Application

想要在PIXI渲染出一个最小场景，需要哪些必须的处理逻辑呢？具体如下：

  • 一个渲染器，用于具体的渲染工作
  • 一个场景图，表示场景中视觉元素

在PIXI中可以使用相关API来创建渲染器，具体如下：

  • WebGLRenderer：webGL渲染器
  • WebGPURenderer：webGPU渲染器
  • autoDetectRendere：自动根据当前浏览器支持情况选择合适的渲染器

所以最小化场景的渲染处理逻辑如下：

// 创建场景容器
const stage = new Container();// 创建渲染器
const renderer = await autoDetectRenderer({width: 600,height: 800
});
// 挂载canvas dom
document.body.appendChild(renderer.canvas);
// 使用渲染器渲染场景
renderer.render(stage)

为了避免繁琐的处理逻辑，PIXI提供Application API来便捷实现场景的渲染，Application类会自动创建渲染器、Ticker实例和根Container

const app = new Application();
// Application需要通过调用init方法来实例化，相关参数的传递也是在此进行
await app.init({ background: "#1099bb", resizeTo: window });
document.body.appendChild(app.canvas);

通常情况下，开发者无需自己创建对应的渲染器，渲染器涉及到WebGL/WebGPU的相关知识，相对来说是比较复杂的。

这里简要说明下Application的实例属性：

  • canvas：获取canvas dom
  • renderer：获取渲染器对象
  • stage：获取根容器
  • ticker：获取ticker实例对象

遮罩Mask

在PIXI中提供遮罩功能mask，所谓的遮罩实际上是用指定形状的图层遮盖图形元素从而实现对应的效果，在CSS中也提供了相关属性。在PIXI中遮罩的使用非常简单，基本上常见的可渲染对象都有一个mask属性，该属性的值可以是Graphics或Sprite，具体使用如下：

const container = new Container();
const thing = new Graphics();container.mask = thing// 遮罩对象也需要被添加到场景中
app.stage.addChild(thing, container)

总结

本篇文章熟悉PIXI基本API的使用，主要介绍了Application、Container、Sprite、Graphics、Text、Ticker、Assets、事件系统Events、遮罩Mask，对于PIXI API的介绍使用必然无法做到面面俱到，具体细节需要结合官网文档。

实际上PIXI中还有纹理Texture、滤镜Fliter、Mesh和Shader，由于涉及到3D的一些概念，所以打算单独开一篇文章去较为详细的介绍下。

这篇关于PIXI入门系列之基本使用(上篇)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/941305。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
基本知识点

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入，读取速度会加快（但是在字符串的题里面和容易出现问题） 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器，指向键值>= key的第一个元素。 iterator upper_bou
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2