pixi是什么?一款h5游戏引擎
- 优点:简单简洁性能第一
- 缺点:大多数用的国产三大引擎,pixi资料少,工具少,
- 为什么学,学习老外的先进处理方式。对比国内的三大框架，你就知道和老外的差距不是一丁点
用pixi开发小游戏行吗?
行.但要简单处理下
下载官网上的 weapp-adapter.js 找到 var TouchEvent = function TouchEvent(type); 此行的后面添加 window.TouchEvent = TouchEvent; 因为这是window事件,必须全局化
另外还需要对weapp-adapter的ajax做下处理
function _triggerEvent(type) {
if (typeof this['on' + type] === 'function') {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
this['on' + type].apply(this, args);
}
// TODO 添加事件
if (this.listener[type + "__bubble__"]) {
let fun = this.listener[type + "__bubble__"];
fun.apply(this);
}
if (this.listener[type]) {
let fun = this.listener[type];
fun.apply(this);
}
}
function _changeReadyState(readyState) {
this.readyState = readyState;
_triggerEvent.call(this, 'readystatechange');
}
var XMLHttpRequest = function () {
// TODO 没法模拟 HEADERS_RECEIVED 和 LOADING 两个状态
function XMLHttpRequest() {
_classCallCheck(this, XMLHttpRequest);
this.onabort = null;
this.onerror = null;
this.onload = null;
this.onloadstart = null;
this.onprogress = null;
this.ontimeout = null;
this.onloadend = null;
this.onreadystatechange = null;
this.readyState = 0;
this.response = null;
this.responseText = null;
this.responseType = '';
this.responseXML = null;
this.status = 0;
this.statusText = '';
this.upload = {};
this.withCredentials = false;
this.listener = {};
_requestHeader.set(this, {
'content-type': 'application/x-www-form-urlencoded'
});
_responseHeader.set(this, {});
}
/*
* TODO 这一批事件应该是在 XMLHttpRequestEventTarget.prototype 上面的
*/
_createClass(XMLHttpRequest, [{
key:'addEventListener',
value: function addEventListener(type, fun, bubble) {
var listener = this.listener;
if (bubble) {
listener[type + "__bubble__"] = fun;
} else {
listener[type] = fun;
}
}
},
{
key:'removeEventListener',
value: function removeEventListener(type, fun, bubble) {
var listener = this.listener;
if (bubble) {
delete listener[type + "__bubble__"];
} else {
delete listener[type];
}
}
},
game.js
import './weapp-adapter'
import * as PIXI from './pixi.min'
const {pixelRatio, windowWidth, windowHeight} = wx.getSystemInfoSync();
let app = new PIXI.Application({
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
view: canvas
});
// 因为在微信小游戏里canvas肯定是全屏的，所以映射起来就很简单暴力
// 可以有两种修改
app.renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => {
point.x = x * pixelRatio
point.y = y * pixelRatio
}
PIXI.interaction.InteractionManager.prototype.mapPositionToPoint = (point, x, y) => {
point.x = x * pixelRatio
point.y = y * pixelRatio
}
-----后面就可以写逻辑了
就这三招,pixi.js小游戏轻轻松松搞定!!!
https://developers.weixin.qq.com/minigame/dev/tutorial/base/adapter.html 官网上下载的原生的
pixi.js用的是4.8.2 当前最新的。
我是honghong, pixi.js开发小游戏一点问题都没有.
如果问题请留言, 大家一起探讨. qq群:881784257