pixijs H5游戏开发入门（一）安装开发环境

时间：

分类：

pixijs

字数：

922 字

时长：

大约需要 3 分钟

次数：

0 人阅读

本系列文章

本文编写时的系统环境与版本

系统： Windows 10
pixijs 版本： v7.3.2

pixijs 文档地址： https://pixijs.download/v7.3.2/docs/index.html

游戏开发必备工具

  • 必须 http 服务器，原因浏览器安全策略限制，一些 http 请求不能通过 file 协议发起，以下各种 http 服务器任选其一，本文使用 nginx。
    1. nodejs （需要自己编写http服务或者使用webpack dev server）
    2. nginx https://nginx.org/
    3. apache https://httpd.apache.org/
    4. vscode 插件 Live Server 等

安装 nginx 服务器

本文不使用 webpack 等打包工具，使用 http 服务器进行开发学习。

nginx 安装可参考此文章 Windows 10 安装 nginx http 服务器

下载 pixijs

下载地址：https://github.com/pixijs/pixijs/releases/tag/v7.3.2

pixijs 几个版本区别

  • .mjs 文件是 ECMAScript 模块，支持采用 import/export 语法来进行导入和导出。
  • .min 是压缩后的JS文件，可直接在生产环境使用。
  • pixi.js 常规版本，能在 chrome 、 edge 、 firefox 等现代浏览器运行。
  • pixi-legacy.js 是可以在旧/低性能浏览器上使用的 Pixi.js 的备用版本，支持有限的 WebGL。
  • webworker.js 支持 web worker 使用。

本文使用 pixi.js 进行入门学习，浏览器下载地址https://pixijs.download/v7.3.2/pixi.js，ctrl+s直接保存为 js 文件。

nginx 新建项目文件

在nginx 安装位置下的 html 目录中创建一个 pixi 目录，用于存放相关学习示例。

将下载的 js 文件拷贝进去，再新建一个 html 文件，完成后的目录应该是这样：

在 example-01.html 中新增内容

实现一个 Hello World：

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入门示例01</title>
  <script src="./js/pixi.js"></script>
  <style>
    * {margin:0;padding:0}
  </style>
</head>
<body>
  <script>
    // 从全局对象 PIXI 解构出需要的属性
    const {Application, TextStyle, Text} = PIXI
    // 创建一个 pixi 实例
    let app = new Application({
      width: 256,
      height: 256
    });
    // 创建一个文本样式对象
    let style = new TextStyle({
      fontSize: 24,
      fill: "#FFF"
    });
    // 使用上面的文本样式新建一个文本对象
    let message = new Text("Hello World", style);
    app.stage.addChild(message);

    // 插入到 body 中
    document.body.appendChild(app.view);
  </script>
</body>
</html>

如果你的代码也存放于 nginx html 目录中，那么可以使用 http://localhost/pixi/example-01.html 访问。

如上所示，一个简单的入门程序已经完成，本例中实现了文本绘制~~~

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-22/js-pixi-install/

如果您觉得文章不错，可以点击文章中的广告支持一下！