Pixi.js 极简入门：亲手打造你的第一个小游戏
2024-02-20 15:14:01
Pixi.js，一个轻量且高效的 2D WebGL 渲染引擎，在游戏开发领域备受青睐。它的出现，让开发者能够轻松创建流畅且视觉震撼的游戏体验。为了让你快速上手 Pixi.js，我将带领你从零开始，一步步打造一个简单的小游戏，让你亲身体验 Pixi.js 的强大魅力。
入门：创建画布
游戏开发的第一步，就是创建画布（Canvas）。在 Pixi.js 中，我们可以使用 PIXI.Application 类来创建画布和渲染器。
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
});
document.body.appendChild(app.view);
这段代码创建了一个 800x600 的画布，并将其背景色设置为蓝色。app.view 即为画布元素，我们将其添加到文档的 <body> 中。
创建精灵：游戏的主角
游戏中，精灵（Sprite）是构成场景的基本元素。每个精灵代表一个视觉对象，可以是图像、文本或其他自定义图形。对于我们的游戏，我们将创建一个代表玩家角色的精灵。
const player = new PIXI.Sprite(PIXI.Texture.from('player.png'));
player.x = app.screen.width / 2;
player.y = app.screen.height / 2;
player.anchor.set(0.5);
app.stage.addChild(player);
这段代码加载了 player.png 图像作为精灵的纹理，并将其添加到舞台（app.stage）。我们还设置了精灵的位置和锚点，锚点决定了精灵的旋转和缩放中心。
添加交互：让游戏动起来
为了让游戏动起来，我们需要添加交互。我们将使用键盘事件来控制玩家角色的移动。
const speed = 5;
document.addEventListener('keydown', (e) => {
switch (e.keyCode) {
case 37: // left
player.x -= speed;
break;
case 38: // up
player.y -= speed;
break;
case 39: // right
player.x += speed;
break;
case 40: // down
player.y += speed;
break;
}
});
这段代码监听键盘事件，当按下方向键时，相应移动玩家角色的位置。speed 变量控制了移动速度。
游戏主循环：让世界运转
游戏主循环是让游戏持续运行的核心。在 Pixi.js 中，主循环由 app.ticker.add() 方法提供。
app.ticker.add((delta) => {
// 这里放游戏逻辑
});
主循环会在每帧调用传递的回调函数，在其中我们可以编写游戏逻辑。
添加敌人：增加挑战性
为了增加游戏难度，我们可以添加敌人。我们将创建一个代表敌人的精灵，并让它随机移动。
const enemy = new PIXI.Sprite(PIXI.Texture.from('enemy.png'));
enemy.x = Math.random() * app.screen.width;
enemy.y = Math.random() * app.screen.height;
enemy.anchor.set(0.5);
app.stage.addChild(enemy);
// 敌人移动逻辑
enemy.vx = Math.random() * 2 - 1;
enemy.vy = Math.random() * 2 - 1;
这段代码创建了敌人精灵，并使其在画布中随机出现。我们还设置了敌人的初始速度。
碰撞检测：决定胜负
碰撞检测是游戏中至关重要的部分。我们将使用 Pixi.js 内置的 hitTestRectangle() 方法来检测玩家和敌人的碰撞。
// 碰撞检测
app.ticker.add((delta) => {
if (player.hitTestRectangle(enemy)) {
// 碰撞发生，游戏结束
}
});
这段代码在主循环中添加了碰撞检测逻辑。如果玩家和敌人碰撞，游戏结束。
拓展你的游戏：无限可能
以上代码只是一个简单的游戏框架。你可以在此基础上拓展你的游戏，添加更多的元素，例如关卡、得分系统或其他敌人。Pixi.js 提供了丰富的 API，让你可以创建出各种类型的游戏。
结语
通过这个简单的游戏教程，你已经了解了 Pixi.js 的基本概念和用法。从创建画布到添加交互，再到碰撞检测，你掌握了构建游戏的核心技能。现在，你可以放飞想象，使用 Pixi.js 创造属于自己的游戏世界。
