pixijs H5游戏开发入门（十）无限地图场景

时间：

分类：

pixijs

字数：

736 字

时长：

大约需要 3 分钟

次数：

0 人阅读

本系列文章

本文编写时 pixijs 版本： v7.3.2

效果

使用的API

示例效果主要利用 PIXI.TilingSprite 绘制地图，PIXI.Ticker 用于控制动画。

代码

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pixijs入门示例 无限地图</title>
  <script src="https://pixijs.download/v7.3.2/pixi.js"></script>
  <style>
    * {margin:0;padding:0}
    body { display: flex; justify-content: center; align-items: center; background-color: #000000; }
    canvas { background-color: #222222; }
  </style>
</head>
<body>
  <canvas id="game-canvas" width="512" height="384"></canvas>
  <script>
    async function init() {
      const width = document.getElementById("game-canvas").width;
      const height = document.getElementById("game-canvas").height;


      // 创建一个 pixi 实例
      let app = new PIXI.Application({
        antialias: true, // 消除锯齿
        width,
        height,
        view: document.getElementById("game-canvas"),
      });

      // 插入到 body 中
      document.body.appendChild(app.view);

      // autoDetectRenderer() 函数的作用是: 设置舞台要想要呈现的画布宽度和高度，以及对画布本身的引用。它返回 WebGLRenderer 或 PIXI.CanvasRenderer 的一个实例
      /* const renderer = PIXI.autoDetectRenderer({
        width,
        height,
        view: document.getElementById("game-canvas")
      }); */

      PIXI.Assets.add([
        {alias: 'far', src: './example-far.png'},
        {alias: 'mid', src: 'example-mid.png'},
      ]);
      await PIXI.Assets.load(["far", 'mid']);

      const stage = new PIXI.Container();

      const farTexture = PIXI.Assets.get("far");
      const far = new PIXI.TilingSprite(farTexture, farTexture.baseTexture.width, farTexture.baseTexture.height);
      far.position.x = 0;
      far.position.y = 0;
      far.tilePosition.x = 0; // 插入此行
      far.tilePosition.y = 0; // 插入此行
      stage.addChild(far);

      const midTexture = PIXI.Assets.get("mid");
      const mid = new PIXI.TilingSprite(midTexture, midTexture.baseTexture.width, midTexture.baseTexture.height);
      mid.position.x = 0;
      mid.position.y = 128;
      mid.tilePosition.x = 0; // 插入此行
      mid.tilePosition.y = 0; // 插入此行
      stage.addChild(mid);

      app.stage.addChild(stage);

      /* renderer.render(stage);

      function update() {
        far.tilePosition.x -= 0.128;
        mid.tilePosition.x -= 0.64;

        renderer.render(stage);

        requestAnimationFrame(update);
      }
      
      requestAnimationFrame(update); */
      app.ticker.add(() => {
        far.tilePosition.x -= 0.128;
        mid.tilePosition.x -= 0.64;
      });
    }
    init();
  </script>
</body>
</html>

代码中注释部分表示，可以使用 PIXI.autoDetectRenderer 完成舞台创建，不过需要注意： PIXI.autoDetectRenderer 创建舞台需要使用 requestAnimationFrame 方法实现动画！

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

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