Pixi.js学习 （二）创建Pixi应用和stage 源码

Pixi.js是一个强大的2D渲染引擎，用于在Web上创建高性能的图形应用。它使用 WebGL 技术，但隐藏了底层复杂性，提供了一个简洁易用的API。在这个"Pixi.js学习（二）创建Pixi应用和Stage"的主题中，我们将深入探讨如何构建一个基础的Pixi应用，并理解Stage的概念。 让我们从创建Pixi应用开始。在JavaScript中，你需要引入Pixi库，通常通过CDN链接或本地文件引用。一旦库加载完成，你可以创建一个新的`Application`对象，这是启动Pixi应用的关键步骤。`Application`会处理所有初始化工作，包括创建WebGL渲染器、设置渲染尺寸以及添加一个舞台（Stage）。 ```javascript import * as PIXI from 'pixi.js'; const app = new PIXI.Application({width: 800, height: 600}); document.body.appendChild(app.view); ``` 上述代码创建了一个800x600像素的应用，并将其视图添加到HTML文档的body中。`Application`的构造函数接受一个配置对象，可以定制渲染器属性，如透明度、分辨率等。 接下来，我们要讨论的是“Stage”。在Pixi.js中，`Stage`是所有图形内容的顶级容器。所有绘图元素，如精灵（Sprites）、文本、图形（Graphics）等，都必须位于Stage内才能被渲染。在Pixi v5中，`Stage`的概念被替换为`Container`，但它在功能上是相似的，都是作为其他图形对象的容器。 创建一个基本的`Container`，你可以这样做： ```javascript const stage = new PIXI.Container(); app.stage.addChild(stage); ``` 这里，我们创建了一个新的`Container`实例并将其添加到应用的`stage`属性中。`stage.addChild()`方法用于将舞台作为图形层次结构的根节点。 现在，让我们添加一些图形内容。例如，创建一个精灵： ```javascript const sprite = PIXI.Sprite.from('path/to/image.png'); stage.addChild(sprite); ``` 这里，我们使用`PIXI.Sprite.from()`方法加载图像资源并创建一个精灵。然后将精灵添加到舞台上。 Pixi.js还提供了`Text`类用于创建文本元素： ```javascript const text = new PIXI.Text('Hello, Pixi!', { font: '32px Arial', fill: '#ffffff' }); stage.addChild(text); ``` 这段代码创建了一个白色字体的"Hello, Pixi!"文本，字体大小为32像素，使用Arial字体。 你可能希望动画化你的应用。Pixi应用有一个`ticker`系统，允许你在每一帧更新内容。以下是如何添加一个简单的动画： ```javascript let angle = 0; app.ticker.add(() => { angle += 0.1; sprite.rotation = angle; }); ``` 这个例子中，我们每帧更新精灵的旋转角度，创建一个旋转效果。 总结一下，Pixi.js通过提供高效的WebGL渲染和简洁的API，使得创建复杂的2D图形应用变得容易。从创建`Application`开始，理解`Container`（或旧版的`Stage`）的角色，以及如何添加和操作图形元素，是掌握Pixi.js基础的关键。通过练习和实践，你可以利用Pixi.js构建出丰富的互动图形和游戏。在"Day1"的压缩包文件中，可能包含了这个过程的详细代码示例，供你进一步学习和参考。