本文主要收集楼主在学习 pixijs 过程中所用到的资料文档以及遇到的一些问题,方便日后查看。
阅读此文是默认已经对 pixijs 有了基本的了解。
简述
PixiJS 的核心是一个渲染系统,它使用 WebGL(或可选的 Canvas)来显示图片和其他 2D 视觉内容。 它提供了完整的场景图(要渲染的对象的层次结构),并提供交互支持以支持处理单击和触摸事件。 它是现代 HTML5 世界中 Flash 的自然替代品,但提供了超出 Flash 所能实现的更好的性能和像素级效果。 它非常适合在线游戏、教育内容、互动广告、数据可视化...... 任何复杂图形非常重要的基于 Web 的应用。 与 Cordova 和 Electron 等技术相结合,PixiJS 应用可以作为移动和桌面应用分发到浏览器之外。
中文文档
pixi中文文档(推荐)
pixi中文文档(比较老旧仅做参考)
官方文档
已解决问题
已下记录已解决的pixijs使用中的一些问题。
手机端渲染模糊
我们主要使用 resolution
和 autoDensity
来解决手机端显示渲染模糊问题,实测有效。
let app = new PIXI.Application({
resolution: window.devicePixelRatio || 2, // 设置分辨率系数
autoDensity: true, // 自动调整大小
antialias: true,//开启抗锯齿
forceWebGL: true, // 强制使用 WebGL
});
使用 AnimatedSprite 中途更换动画
使用 textures
属性我们可以直接更换原对象动画帧。
let animated = createAnimatedTexture(1,13,"");
let animated_sprite = new PIXI.AnimatedSprite(animated);
animated = createAnimatedTexture(14,28,"");
animated_sprite.textures = animated
人物自动寻路
我们主要使用传统的astar寻路算法通过矩阵方式标记最优路线进项自动寻路。