pixi.js游戏开发
基本要素
-
资源(resource)
-
游戏阶段(gameStatus)
-
游戏循环(gameLoop)
-
用户输入(userInput)
资源
监听
const _handle = handle.bind(this);
if (name === 'start') this.loader.onStart.add(_handle);
if (name === 'progress') this.loader.onProgress.add(_handle);
if (name === 'error') this.loader.onError.add(_handle);
if (name === 'complete') this.loader.onComplete.add(_handle);
适配
app.view 将canvas元素作为视口，app.stage 作为画布
画布大小：如 750 * 1600（2倍图像）
像素比：resolution: 2 像素值放大2倍
canvas：width: 100% 宽度占满，高度按画布比例自适应
交互
键盘控制 新增键盘事件，添加指定键各状态的处理
检测
输入两个sprite，计算二者中心点距离，判断是否碰撞
function hitTestRectangle(sprite1, sprite2) {
var halfWidthSprite1 = sprite1.width / 2;
var halfHeightSprite1 = sprite1.height / 2;
var halfWidthSprite2 = sprite2.width / 2;
var halfHeightSprite2 = sprite2.height / 2;
var centerPoint1X = sprite1.x + halfWidthSprite1;
var centerPoint1Y = sprite1.y + halfHeightSprite1;
var centerPoint2X = sprite2.x + halfWidthSprite2;
var centerPoint2Y = sprite2.y + halfHeightSprite2;
var pointDistanceX = Math.abs(centerPoint1X - centerPoint2X);
var pointDistanceY = Math.abs(centerPoint1Y - centerPoint2Y);
if (pointDistanceX >= halfWidthSprite1 + halfWidthSprite2) return false;
if (pointDistanceY >= halfHeightSprite1 + halfHeightSprite2) return false;
return true;
}
对象池
-
创建对象并放入对象池
-
定义回收时机，调用复用对象
-
修改回收对象放入对象池，实现复用
周边插件
particle-emitter 粒子
PIXI Sound 音频播放
pixi-spine 骨骼动画
gsap 强大的js动画库，内部提供了PixiPlugin支持
Phaser
https://www.phaser-china.com/
https://phaser.io/tutorials/making-your-first-phaser-3-game-chinese/part2
