跳至主要内容
版本：v8.x

开始使用

在本部分，我们将构建尽可能简单的 PixiJS 应用程序。在此过程中，我们将逐步介绍如何构建和提供代码。

高级用户​

我们开始之前快速说明一下：此指南面向刚开始使用 PixiJS 的开发者，他们具有较少的基于 JavaScript 的应用程序的开发经验。如果您是一名代码老手，您可能觉得这里的详细级别没有帮助。如果是这样，您可能希望浏览此指南，然后跳转到如何使用 PixiJS 和打包器，例如 webpack 和 npm。

关于 JavaScript 的说明​

最后一点说明。JavaScript 领域目前正在从老式 JavaScript (ES5) 过渡到较新的 ES6。

// ES5
var x = 5;
setTimeout(function() { alert(x); }, 1000);
// ES6
const x = 5;
setTimeout(() => alert(x), 1000);

ES6 在更清晰的语法、更好的变量作用域、本机类支持等方面带来许多主要优势。到目前为止，所有主流浏览器都支持它。因此，我们在这些指南中的示例将使用 ES6。这并不意味着您不能将 PixiJS 与 ES5 程序一起使用！只需要在头脑中将“var”替换为“let/const”，展开较短的函数传递语法，一切都将运行良好。

PixiJS 应用程序的组件​

好的！有了这些说明，让我们开始吧。编写 PixiJS 应用程序只需要几个步骤

  • 创建 HTML 文件
  • 使用 Web 服务器提供文件
  • 加载 PixiJS 库
  • 创建一个 应用程序
  • 将生成的视图添加到 DOM
  • 向舞台添加一张图像
  • 编写一个更新循环

让我们一起了解它们。

HTML 文件​

PixiJS 是一款在网页中运行的 JavaScript 库。因此，我们需要的第一件事是文件中的 HTML。在真实的 PixiJS 应用程序中，你可能希望在现有的复杂页面中嵌入显示内容，或者希望显示区域填满整个页面。对于此演示，我们将创建一个空页面开始

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello PixiJS</h1>
  </body>
</html>

创建一个名为 pixi-test 的新文件夹，然后复制并粘贴此 HTML 到 pixi-test 文件夹中一个名为 index.html 的新文件中。

发布文件​

需要运行 Web 服务器才能使用 PixiJS 进行本地开发。网络浏览器阻止在本地加载的网页上加载本地文件（例如图像和音频文件）。如果你只双击新的 HTML 文件，当你尝试向 PixiJS 舞台添加雪碧时，会收到错误。

运行 web 服务器听起来很复杂且困难，但事实证明有许多简单的 web 服务器可以达到此目的。对于本指南，我们将使用 Mongoose，但你也可以很容易地使用 XAMPP 或 http-server Node.js 软件包 来发布文件。

要使用 Mongoose 开始发布你的页面，请转至 Mongoose 下载页面 并为你的操作系统下载免费服务器。Mongoose 默认为发布运行其中的文件夹中的文件，因此将下载的可执行文件复制到你在上一步创建的文件夹（pixi-test）中。双击可执行文件，告诉你的操作系统你信任该文件可以运行，然后你将拥有一个正在运行的 web 服务器，发布你的新文件夹。

打开你选择的浏览器并在位置栏中输入 http://127.0.0.1:8080 来测试一切是否正常。（Mongoose 默认在 8080 端口上发布文件。）你应该只看到“Hello PixiJS”。如果你在此步骤中收到错误，则表示你未将文件命名为 index.html 或你错误地配置了 Web 服务器。

加载 PixiJS​

好的，我们现在有一个网页，并且我们正在处理它。但是它是空的。下一步是实际加载 PixiJS 库。如果我们要构建一个真正的应用程序，我们希望从 Pixi Github 存储库 下载目标版本的 PixiJS，以便我们的版本不会改变我们的版本。但是对于这个示例应用程序，我们只使用 CDN 版本的 PixiJS。将此行添加到您的 index.html 文件的 <head> 部分

<script src="https://pixijs.download/release/pixi.js"></script>

当您的页面加载就绪时，这将包括最新版本的 PixiJS 的非最小化版本，随时可以使用。我们使用非最小化版本，因为我们在开发中。在生产中，您需要改用 pixi.min.js，该版本经过压缩，可以更快地下载，并排除了在构建项目时有帮助的断言和弃用警告，但下载和运行需要更长时间。

创建应用程序​

如果我们不使用该库，加载该库没有什么好处，因此下一步是启动 PixiJS。首先用脚本标记替换行 <h1>Hello PixiJS</h1>，如下所示

<script type="module">
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 360 });
</script>

我们在这里所做的是添加一个 JavaScript 代码块，并在该代码块中创建一个新的 PIXI.Application 实例。Application 是一款简化了使用 PixiJS 的辅助类。它创建渲染器，创建舞台，并启动一个用于更新的滴答器。在生产中，您几乎肯定会希望自己执行这些步骤以增加自定义和控制 - 我们将在稍后的指南中介绍如何执行此操作。目前，Application 类是开始使用 PixiJS 的完美方式，而无需担心细节。Application 类还具有一个 init 方法，该方法将使用给定的选项初始化该应用程序。此方法是异步的，因此我们使用 await 关键字在 promise 完成后启动我们的逻辑。这是因为 PixiJS 在底层使用了 WebGPU 或 WebGL，而后者 API 是异步的。

将 Canvas 添加到 DOM​

PIXI.Application 类创建渲染器时，它会构建一个 Canvas 元素，它将渲染到该元素上。为了看到我们使用 PixiJS 绘制的内容，我们需要将此 canvas 元素添加到网页的 DOM 中。将以下行追加到您页面的脚本块中

  document.body.appendChild(app.canvas);

这会获取应用程序创建的 canvas（canvas 元素），并将其添加到页面的 body 中。

创建精灵​

到目前为止，我们所做的只是准备工作。我们还没有实际告知 PixiJS 绘制任何内容。让我们通过添加要显示的图片来解决此问题。

在 PixiJS 中绘制图片有很多方法，但最简单的方法是使用Sprite。我们将在后续指南中详细介绍场景图的工作原理，但现在您只需要知道 PixiJS 会呈现Container的层次结构。Sprite 是一种包装加载的图像资源以允许绘制、缩放、旋转等操作的 Container。

在 PixiJS 可以呈现图像之前，需要加载该图像。就像在任何网页中一样，图像加载是异步进行的。我们将在后续指南中详细讨论资源加载。现在，我们可以使用 PIXI.Sprite 类上的辅助方法来为我们处理图像加载

  // load the PNG asynchronously
  await PIXI.Assets.load('sample.png');
  let sprite = PIXI.Sprite.from('sample.png');

在此下载样本 PNG，然后将其保存在 index.html 旁边的 pixi-test 目录中。

向舞台添加 Sprite​

最后，我们需要将我们新的 Sprite 添加到舞台。舞台只是一个 Container，它是场景图的根部。舞台容器的每个子元素都将在每帧进行呈现。通过将我们的 Sprite 添加到舞台，我们告知 PixiJS 的呈现器我们要绘制它。

  app.stage.addChild(sprite);

编写更新循环​

虽然您可以将 PixiJS 用于静态内容，但对于大多数项目，您会希望添加动画。我们的示例应用程序实际上正在运行，以每秒多次相同的位置呈现相同 Sprite。我们只需要做的事情就是每帧更新一次图像的属性即可实现图像移动。为此，我们需要连接到应用程序的计时器。计时器是一个 PixiJS 对象，它在每帧运行一个或多个回调。执行此操作非常容易。将以下内容添加到您的脚本块的结尾

  // Add a variable to count up the seconds our demo has been running
  let elapsed = 0.0;
  // Tell our application's ticker to run a new callback every frame, passing
  // in the amount of time that has passed since the last tick
  app.ticker.add((ticker) => {
    // Add the time to our total elapsed time
    elapsed += ticker.deltaTime;
    // Update the sprite's X position based on the cosine of our elapsed time.  We divide
    // by 50 to slow the animation down a bit...
    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
  });

您需要做的就是调用 app.ticker.add(...)，将回调函数传递给它，然后在该函数中更新您的场景。它将在每帧调用，您可以移动、旋转等等，无论您希望如何驱动项目的动画。

将所有内容整合在一起​

就是这个！最简单的 PixiJS 项目！

以下是所有内容一览。如果您遇到错误，请检查您的文件并确保与之匹配。

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script type="module">
      // Create the application helper and add its render target to the page
      const app = new PIXI.Application();
      await app.init({ width: 640, height: 360 })
      document.body.appendChild(app.canvas);

      // Create the sprite and add it to the stage
      await PIXI.Assets.load('sample.png');
      let sprite = PIXI.Sprite.from('sample.png');
      app.stage.addChild(sprite);

      // Add a ticker callback to move the sprite back and forth
      let elapsed = 0.0;
      app.ticker.add((ticker) => {
        elapsed += ticker.deltaTime;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

一旦您让一切正常工作，下一步就是通读其余基础指南，以更深入地了解所有内容的工作原理。