PIXI学习历程 -- 持续更新

最新推荐文章于 2024-07-16 16:49:46 发布

GEVAS

最新推荐文章于 2024-07-16 16:49:46 发布

阅读量1.6k

点赞数

文章标签： pixi javascript

本文链接：https://blog.csdn.net/qq_30068989/article/details/85158424

版权

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

摘要由CSDN通过智能技术生成

开头先贴上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>

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

关注