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