PixiJs基础使用

asuka613

已于 2024-01-15 11:25:46 修改

阅读量604

点赞数

分类专栏：前端知识散记文章标签：前端 javascript

于 2023-10-09 17:42:11 首次发布

本文链接：https://blog.csdn.net/qq_45645848/article/details/133710190

版权

前端知识散记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、参考

1.Tutorial | PixiJS

2.Pixi.js中文网

二、搭建环境

1.创建文件夹learn-pixi，执行npm init -y项目初始化，生成package.json

mkdir learn-pixi
cd learn-pixi
npm init -y

2.安装依赖

npm i pixi.js -save
npm i parcel-bundler -save-dev

3.根目录创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>learn-pixi</title>
</head>
<body>
  <script src="./src/index.js"></script>
</body>
</html>

4.根目录创建src目录，新建src/index.js

import * as PIXI from "pixi.js";

//创建 PixiJS 画布
const app = new PIXI.Application({
  background: "lightblue",
  resizeTo: window //大小占满窗口，也可以通过width和height设置具体值
});

//将其视图添加到 DOM
document.body.appendChild(app.view);

//使用 PIXI.Sprite 类上的辅助方法来处理图像加载
const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png')

//通过将精灵添加到舞台，我们告诉 PixiJS 的渲染器我们想要绘制它。
app.stage.addChild(bunny)

//设置 Sprite 的锚点并定位它，使其位于中心。
bunny.anchor.set(0.5)  //精灵向左向上移动自身一半
bunny.x = app.screen.width / 2
bunny.y = app.screen.height / 2

//调用app.ticker.add(...)，向其传递一个回调函数，然后在该函数中更新您的场景。每一帧都会调用它，可以移动、旋转等任何您想要驱动项目动画的方式。
app.ticker.add((delta) => {
    bunny.rotation += 0.1 * delta;
});

5.修改package.json

"scripts": {
  "dev": "parcel index.html -p 8080",
  "build": "parcel build index.html"
}

6.运行npm run dev，访问 http://localhost:8080/ 即可看到效果

三、说明

1.在使用Pixi.js时，需要在根项目目录中运行Web服务器，这是因为Pixi.js是一个用于创建交互式图形和游戏的JavaScript库，它使用了WebGL或Canvas来渲染图形。当在本地开发环境中使用Pixi.js时，浏览器会限制从本地文件系统（file://）加载资源文件，例如图像、音频或其他外部文件。这是出于安全考虑的限制，以防止恶意脚本访问用户的文件系统。意味着Pixi.js应用程序需要在浏览器中运行。运行Web服务器的方法有很多种，可以使用现有的工具，如Node.js的http-server模块、Python的http.server模块或其他各种轻量级的HTTP服务器。这些服务器可以将项目目录作为根目录，并提供HTTP访问，能够在浏览器中加载和运行Pixi.js应用程序。

2.并不是所有引入第三方JavaScript库都需要运行Web服务器。运行Web服务器的情况通常适用于需要在浏览器环境中加载和运行的库，特别是涉及跨域访问或需要从服务器加载资源的库。

以下是一些常见情况，可能需要运行Web服务器：

使用AJAX或Fetch进行跨域请求：如果JavaScript库需要从不同的域名或端口加载数据，浏览器的同源策略将会限制跨域请求。在这种情况下，需要在服务器上设置适当的CORS（跨域资源共享）头部，或者使用代理服务器来处理跨域请求。
加载外部资源文件：如果JavaScript库需要加载外部资源文件，例如图像、音频、字体等，浏览器的安全策略会限制从本地文件系统（file://）加载这些资源。在这种情况下，需要运行Web服务器，以便通过HTTP协议从服务器加载这些资源文件。
模块加载器或构建工具：某些JavaScript库使用模块加载器（如RequireJS、SystemJS）或构建工具（如Webpack、Parcel）来管理依赖关系和打包文件。这些工具通常需要在Web服务器环境中运行，以便正确解析和加载模块或打包后的文件。

3.使用Parcel Bundler可以方便地构建和运行Pixi.js应用程序，而无需单独运行一个Web服务器。Parcel Bundler会自动处理依赖关系和文件转换，并通过内置的开发服务器提供您的应用程序。

四、基本使用

1.Basic

1.1 Container 容器

在PixiJS中，Container是一个容器对象，用于组织和管理显示对象（DisplayObject）。你可以将其他显示对象添加到Container中，从而形成一个层次结构，并对它们进行统一的操作。以下是一些关于Container的使用方法：

创建Container：

const container = new PIXI.Container();

添加、移除显示对象：

const sprite = new PIXI.Sprite(texture);
container.addChild(sprite);//添加
container.removeChild(sprite);//移除

获取子对象：

//获取子对象数量
const numChildren = container.children.length;
container.children.forEach(child => {
  // 对每个子对象进行操作
});

注意：Container本身也是一个显示对象，所以你可以将一个Container添加到另一个Container中，从而创建更复杂的层次结构。

1.2 Transparent Background 透明背景

待补充。。。

1.3 Tinting 着色

1.4 Cache As Bitmap 位图缓存

1.5 Particle Container 粒子容器

1.6 Blend Modes 混合模式

1.7 Simple Plane 简单平面

2.Advanced

2.1 slots

2.2 Scratch Card

2.3 Star Warp

2.4 Mouse Trail

2.5 Screen Shot

2.6 Collision Detection

2.7 Spinners