Pixi.js 完全初学者教程

Published on 11 Jul, 2024 | ~31 min read

发布于 11 Jul, 2024 | ~31 min read

In this tutorial, we will explore a variety of the fundamental aspects of Pixi.js, including creating and adding components to the canvas, implementing animations, capturing pointer events, and using the Assets package to manage assets such as spritesheets, fonts, and JSON files, among many other features.

在本教程中，我们将探索 Pixi.js 的各种基本方面，包括创建并将组件添加到画布、实现动画、捕获指针事件，以及使用 Assets 包来管理诸如 spritesheets、字体和 JSON 文件等资产，以及许多其他功能。

Before we dive in, I want to emphasize that Pixi.js leverages WebGL/WebGPU for high-performance 2D rendering in web applications. So if you're interested in understanding the connection between WebGL/WebGPU and libraries like Pixi.js, Three.js, and Babylon.js, I recommend checking out this brief overview.

在深入之前，我想强调 Pixi.js 利用 WebGL/WebGPU 在 Web 应用中实现高性能 2D 渲染。所以如果你对理解 WebGL/WebGPU 与 Pixi.js、Three.js 和 Babylon.js 等库之间的联系感兴趣，我推荐查看这个 简要概述。

First things first, create a new folder and open it in your code editor.

首先，创建一个新文件夹并在您的代码编辑器中打开它。

Next, open a new terminal by selecting Terminal in the menu bar (assuming you're using VSCode), then choose New Terminal. After that, type the following command: npm init -y.

接下来，通过在菜单栏中选择 Terminal（假设您使用的是 VSCode）打开一个新终端，然后选择 New Terminal。之后，输入以下命令：npm init -y。

Now, we have two methods for using Pixi.js. The first method is to include the library via a CDN link. The second method is to install it locally and use a bundler to import it into the project.

现在，我们有两种使用 Pixi.js 的方法。第一种方法是通过 CDN 链接包含库。第二种方法是在本地安装它并使用打包器将其导入项目。

Personally, I prefer the second option, so that’s the one I will choose for this tutorial.

就我个人而言，我更喜欢第二种选项，因此这是本教程中我将选择的那一个。

That said, we'll use Vite as our bundler. To install it, enter the following command in your terminal: npm install vite --save-dev.

尽管如此，我们将使用 Vite 作为我们的打包工具。要安装它，请在终端中输入以下命令： npm install vite --save-dev。

Next, we need to install Pixi.js. To do that, run this command: npm install pixi.js.

接下来，我们需要安装 Pixi.js。为此，运行此命令： npm install pixi.js。

The next step is to create an ...