【移动应用开发技术】怎么用pixi.js开发微信小游戏

【移动应用开发技术】怎么用pixi.js开发微信小游戏

这篇文章给大家分享的是有关怎么用pixi.js开发微信小游戏的内容。在下觉得挺实用的，因此分享给大家做个参考。一起跟随在下过来看看吧。1.使用PixiJS渲染引擎微信小游戏是一个不同于浏览器的JavaScript运行环境，没有BOM和DOMAPI。然而pixi.js是用JavaScript结合其他HTML5技术来显示媒体，创建动画或管理交互式图像。是依赖浏览器提供的BOM和DOMAPI的。所以如果要在微信小游戏中使用pixi.js，需要对引擎进行改造。不过小游戏提供了对大部分Canvas2d和WebGL1.0特性的支持，支持情况参见RenderingContext，pixi.js它能自动侦测使用WebGL还是Canvas来创建图形。无论是怎样的引擎，最终在游戏运行时所做的大部分事情都是随着用户的交互更新画面和播放声音。小游戏的开发语言是JavaScript，那么在引擎的底层就需要通过JavaScript调用绘制API和音频API。一段JavaScript代码在运行时可以调用的API是依赖于宿主环境的。我们最常用的console.log甚至都不是JavaScript语言核心的一部分，而是浏览器这个宿主环境提供的。常见的宿主环境有浏览器、Node.js等。浏览器有BOM和DOMAPI，而Node.js则没有；Node.js有fs、net等Node.js核心模块提供的文件、网络API，而浏览器则不具备这些模块。例如，下面这段在浏览器中可以正常运行的代码，在Node.js中运行就会报错。letcanvas=document.createElement('canvas')复制代码因为Node.js这个宿主环境根本没有提供document这个内置的全局变量。ReferenceError:documentisnotdefined复制代码小游戏的运行环境是一个不同于浏览器的宿主环境，没有提供BOM和DOMAPI，提供的是wxAPI。通过wxAPI，开发者可以调用Native提供的绘制、音视频、网络、文件等能力。如果你想创建画布，你需要调用wx.createCanvas()letcanvas=wx.createCanvas()letcontext=canvas.getContext('2d')复制代码如果你想创建一个音频对象，你需要调用wx.createInnerAudioContext()letaudio=wx.createInnerAudioContext()//src地址仅作演示，并不真实存在audio.src='bgm.mp3'audio.play()复制代码如果你想获取屏幕的宽高，你需要调用wx.getSystemInfoSync()let{screenWidth,screenHeight}=wx.getSystemInfoSync()复制代码但是基于pixi.js渲染引擎会通过以下方式去创建stage并挂载到页面document.body.appendChild(app.view);复制代码此时会产生错误，理由如前文所述，小游戏这个宿主环境根本没有提供document和window这两个在浏览器中内置的全局变量。因为小游戏环境是一个不同于浏览器的宿主环境。ReferenceError:documentisnotdefinedReferenceError:windowisnotdefined复制代码所以，基本上基于pixi.js开发的小游戏，都不能直接迁移到小游戏中使用，因为pixi.js的实现可能或多或少都用到了BOM和DOM这些浏览器环境特有的API。只有对pixi.js进行改造，将对BOM和DOMAPI的调用改成wxAPI的调用，才能运行在小游戏环境中。但是pixi.js的代码我们不能改变，也没办法直接去修改API的实现，还有一种适配方式，即在渲染引擎和游戏逻辑代码之间加一层模拟BOM和DOMAPI的适配层，我们称之为Adapter。这层适配层在全局通过wxAPI模拟了引擎会访问到的那部分window和document对象的属性和方法，使引擎感受不到环境的差异。Adapter是用户代码，不是基础库的一部分。关于Adapter的介绍，参见教程Adapter。2.Adapter适配器1.weapp-adapter小游戏的运行环境在iOS上是JavaScriptCore，在Android上是V8，都是没有BOM和DOM的运行环境，没有全局的document和window对象。因此当你希望使用DOMAPI来创建Canvas和Image等元素的时候，会引发错误。constcanvas=document.createElement('canvas')复制代码但是我们可以使用wx.createCanvas和wx.createImage来封装一个document。constdocument={createElement:function(tagName){

tagName=tagName.toLowerCase()if(tagName==='canvas'){returnwx.createCanvas()

}elseif(tagName==='image'){returnwx.createImage()

}

}

}复制代码这时代码就可以像在浏览器中创建元素一样创建Canvas和Image了。constcanvas=document.createElement('canvas')constimage=document.createImage('image')复制代码同样，如果想实现newImage()的方式创建Image对象，只须添加如下代码。functionImage(){returnwx.createImage()

}复制代码这些使用wxAPI模拟BOM和DOM的代码组成的库称之为Adapter。顾名思义，这是对基于浏览器环境的游戏引擎在小游戏运行环境下的一层适配层，使游戏引擎在调用DOMAPI和访问DOM属性时不会产生错误。Adapter是一个抽象的代码层，并不特指某一个适配小游戏的第三方库，每位开发者都可以根据自己的项目需要实现相应的Adapter。官方实现了一个Adapter名为weapp-adapter，并提供了完整的源码，供开发者使用和参考。**Adapter下载地址weapp-adapter.zipweapp-adapter会预先调用wx.createCanvas()创建一个上屏Canvas，并暴露为一个全局变量canvas。require('./weapp-adapter')varcontext=canvas.getContext('2d')

context.fillStyle='red'context.fillRect(0,0,100,100)复制代码除此之外weapp-adapter还模拟了以下对象和方法：需要强调的是，weapp-adapter对浏览器环境的模拟是远不完整的，仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟，也不保证所有游戏引擎都能通过weapp-adapter顺利无缝接入小游戏。直接将weapp-adapter提供给开发者，更多地是作为参考，开发者可以根据需要在weapp-adapter的基础上进行扩展，以适配自己项目使用的游戏引擎。2.pixi-adapter小游戏基础库只提供wx.createCanvas和wx.createImage等wxAPI以及setTimeout/setInterval/requestAnimationFrame等常用的JS方法。window对象是浏览器环境下的全局对象。小游戏运行环境中没有BOMAPI，因此没有window对象。但是小游戏提供了全局对象GameGlobal，所有全局定义的变量都是GameGlobal的属性。console.log(GameGlobal.setTimeout===setTimeout);console.log(GameGlobal.requestAnimationFrame===requestAnimationFrame);复制代码以上代码执行结果均为true。开发者可以根据需要把自己封装的类和函数挂载到GameGlobal上。GameGlobal.render=function(){//具体的方法实现}

render();复制代码import{canvas}from'./canvas'/**

*BaseElement

*/exportclassElement{

style={cursor:null}appendChild(){}removeChild(){}addEventListener(){}removeEventListener(){}

}exportconstHTMLCanvasElement=canvas.constructorexportconstHTMLImageElement=wx.createImage().constructorexportclassHTMLVideoElementextendsElement{

}复制代码import{Canvas}from'./canvas'importImagefrom'./Image'import{Element}from'./element'conststack={}/**

*document适配

*/exportdefault{body:newElement('body'),addEventListener(type,handle){

stack[type]=stack[type]||[]

stack[type].push(handle)

},removeEventListener(type,handle){if(stack[type]&&stack[type].length){consti=stack[type].indexOf(handle)

i!==-1&&stack[type].splice(i)

}

},dispatch(ev){constqueue=stack[ev.type]

queue&&queue.forEach(handle=>handle(ev))

},createElement(tag){switch(tag){case'canvas':{returnnewCanvas()

}case'img':{returnnewImage()

}default:{returnnewElement()

}

}

}

}复制代码import{noop}from'./util'importImagefrom'./Image'import{canvas}from'./canvas'importlocationfrom'./location'importdocumentfrom'./document'importWebSocketfrom'./WebSocket'importnavigatorfrom'./navigator'importTouchEventfrom'./TouchEvent'importXMLDocumentfrom'./XMLDocument'importlocalStoragefrom'./localStorage'importXMLHttpRequestfrom'./XMLHttpRequest'import{Element,HTMLCanvasElement,HTMLImageElement,HTMLVideoElement}from'./element'const{platform}=wx.getSystemInfoSync()

GameGlobal.canvas=canvas//全局canvascanvas.addEventListener=document.addEventListener

canvas.removeEventListener=document.removeEventListener//模拟器挂载window上不能修改if(platform==='devtools'){Object.defineProperties(window,{Image:{value:Image},Element:{value:Element},ontouchstart:{value:noop},WebSocket:{value:WebSocket},addEventListener:{value:noop},TouchEvent:{value:TouchEvent},XMLDocument:{value:XMLDocument},localStorage:{value:localStorage},XMLHttpRequest:{value:XMLHttpRequest},HTMLVideoElement:{value:HTMLVideoElement},HTMLImageElement:{value:HTMLImageElement},HTMLCanvasElement:{value:HTMLCanvasElement},

})//挂载document

for(constkeyindocument){constdesc=Object.getOwnPropertyDescriptor(window.document,key)if(!desc||desc.configurable){Object.defineProperty(window.document,key,{value:document[key]})

}

}

}else{

GameGlobal.Image=Image

GameGlobal.window=GameGlobal

GameGlobal.ontouchstart=noop

Game