PIXI学习历程 -- 持续更新

最新推荐文章于 2025-07-02 22:17:20 发布

原创最新推荐文章于 2025-07-02 22:17:20 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pixi #javascript

本文记录了作者学习使用PIXI.js的过程，这是一个基于webGL的前端游戏引擎，能自动适配浏览器的渲染方式。作者创建了一个基本的HTML文件，引入资源并创建舞台，通过设置容器和交互模式，成功实现了一个简单的画面，并讨论了添加事件监听的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开头先贴上PIXI官方文档入门到制作小游戏过程链接：https://github.com/Zainking/learningPixi ；

以下是个人自我摸索的过程，有好的建议和错误欢迎指出~~

目前使用PIXI 4.8.2版本：

PIXI是一个使用到webGL技术的前端游戏引擎，会自动判别当前浏览器是否支持webGL，如果不支持自动转为canvas渲染。经过简单测试兼容性，流畅度还未遇到大的兼容问题（可能是我还入得深，相信接下来会遇到各种各样得坑）！

正文

1. 首先创建一个基本html文件，引入各种自身需要的资源文件和必须的官方下载的pixi.js文件，关于mata什么的按自身需求添加，在body新建一个dom，准备用来装舞台

<body>
    <div id="app"></div>
</body

2. 为了方便查看当前用什么渲染，可以在接下来的js中写：

<script>
    var type = "WebGL"
    if (!PIXI.utils.isWebGLSupported()) {
      type = "canvas"
    }
    PIXI.utils.sayHello(type);
</script>

在浏览器打开就能在控制台看到

3. 开始创建舞台

var app = new PIXI.Application({
   width: 750, // 舞台宽度
   height: H, // 舞台高度
   backgroundColor: 0xffffff, // 舞台背景颜色十六进制
   transparent: false, // 舞台是否透明
   legacy: true, // 兼容防止闪烁具体看官方文档
   resolution: 2 // 分辨率，默认是1
});

然后插入dom

var view = document.getElementById('app');
view.appendChild(app.view);

创建一个容器

var stage = app.stage;

添加断续器，可以把它理解为不停自动刷新页面的方法

app.ticker.add(callback); // callback为刷新回调函数，名字可自定

function callback() {

}

4. 然后一个基本的画面就出来了！

添加事件需要给对应的容器修改属性

xxx.buttonMode = true;

xxx.interactive = true;