Skip to main content

快速入门

¥Quick Start

在线试用 PixiJS​

¥Try PixiJS Online

  • 要快速体验 PixiJS，你可以直接在我们的 PixiJS 游乐场 中尝试。

    ¥To quickly get a taste of PixiJS, you can try it directly in our PixiJS Playground.

创建新项目​

¥Creating a New Project

先决条件

  • 熟悉命令行并对 JavaScript 有基本的了解。

    ¥Familiarity with the command line and a basic understanding of JavaScript.

  • 安装 Node.js v20.0 或更高版本。

    ¥Install Node.js v20.0 or higher.

在本节中，我们将介绍如何在本地机器上搭建 PixiJS 应用。创建的项目将使用预配置的构建设置，让你快速开始 PixiJS 开发。

¥In this section, we will introduce how to scaffold a PixiJS application on your local machine. The created project will use a pre-configured build setup, allowing you to quickly get started with PixiJS development.

确保当前工作目录是你想要创建项目的位置。在终端中运行以下命令：

¥Make sure your current working directory is where you want to create your project. Run the following command in your terminal:

npm create pixi.js@latest
Screenshot from terminal

此命令将安装并执行 PixiJS Create CLI，并开始构建你的项目。系统将提示你通过选择各种选项来配置项目，包括选择用于设置项目的模板类型。主要有两种类型的模板可供选择：

¥This command will install and execute the PixiJS Create CLI and begin scaffolding your project. You will be prompted to configure your project by selecting various options, including selecting a template type for setting up your project. There are two main types of templates to choose from:

Creation templates are tailored for specific platforms and include additional configurations and dependencies to streamline development for a particular use case. These templates are more opinionated and are perfect for beginners or those looking for a ready-to-go setup.

Bundler Templates​

Bundler templates are general templates designed to scaffold a PixiJS project with a specific bundler. They include the necessary configurations and dependencies but leave the project structure flexible, making them ideal for experienced developers who prefer more control.

We recommended using the Vite + PixiJS template for most projects when using bundler templates, as it provides a modern and fast setup for PixiJS applications with minimal configuration.

选择所需的模板后，脚手架工具将使用所选配置创建一个新的项目目录。导航到项目目录并安装依赖：

¥After selecting your desired template, the scaffolding tool will create a new project directory with the chosen configuration. Navigate to the project directory and install the dependencies:

cd <your-project-name>
npm install
npm run dev

你还可以将 PixiJS 添加到现有项目中：

¥You can also add PixiJS to an existing project:

npm install pixi.js

用法​

¥Usage

设置好项目后，以下是一个简单的 PixiJS 入门示例：

¥Once you've set up your project, here's a simple example to get started with PixiJS:


警告

如果使用 Vite，你仍然需要将代码封装在异步函数中。在生产环境中构建时，使用 PixiJS 的顶层 await 会出现问题。

¥If using Vite you still need to wrap your code in an async function. There is an issue when using top level await with PixiJS when building for production.

已知此问题会影响 Vite <=6.0.6。Vite 的未来版本可能会解决此问题。

¥This issue is known to affect Vite <=6.0.6. Future versions of Vite may resolve this issue.