pixi.js 微信小游戏 入手

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