PIXI学习历程 -- 持续更新
发布时间
阅读量：
阅读量
开头先贴上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
AI写代码2. 为了方便查看当前用什么渲染，可以在接下来的js中写：
<script>
var type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type);
</script>
AI写代码在浏览器打开就能在控制台看到
3. 开始创建舞台
var app = new PIXI.Application({
width: 750, // 舞台宽度
height: H, // 舞台高度
backgroundColor: 0xffffff, // 舞台背景颜色十六进制
transparent: false, // 舞台是否透明
legacy: true, // 兼容防止闪烁具体看官方文档
resolution: 2 // 分辨率，默认是1
});
AI写代码然后插入dom
var view = document.getElementById('app');
view.appendChild(app.view);
AI写代码创建一个容器
var stage = app.stage;
AI写代码添加断续器，可以把它理解为不停自动刷新页面的方法
app.ticker.add(callback); // callback为刷新回调函数，名字可自定
function callback() {
}
AI写代码4. 然后一个基本的画面就出来了！
添加事件需要给对应的容器修改属性
xxx.buttonMode = true;
xxx.interactive = true;
全部评论 (0)
还没有任何评论哟~