了解如何用pixi.js开发微信游戏(pixijs微信游戏)

微信小程序开发专栏介绍如何用pixi.js 开发微信游戏

1.使用PixiJS渲染引擎微信游戏是不同于浏览器的JavaScript运行环境，没有BOM和DOM API。然而，pixi.js使用JavaScript结合其他HTML5技术来显示媒体，创建动画或管理交互式图像。这取决于浏览器提供的BOM和DOM API。所以如果想在微信游戏中使用pixi.js，就需要对引擎进行改造。不过小游戏提供了对Canvas 2d和WebGL 1.0大部分功能的支持。有关支持，请参见RenderingContext，pixi.js。它可以自动检测是使用WebGL还是Canvas来创建图形。无论是哪种引擎，游戏最后做的大部分事情都是随着用户的交互来更新屏幕和播放声音。小游戏的开发语言是JavaScript，需要在引擎底层通过JavaScript调用画图API和音频API。一段JavaScript代码在运行时可以调用的API取决于主机环境。我们最常用的console.log甚至不是JavaScript语言核心的一部分，而是由浏览器的宿主环境提供的。常见的托管环境有browser、Node.js等。有浏览器BOM和DOM API，Node.js没有；Node.js有fs、net等Node.js的核心模块提供的文件和网络API，但是浏览器没有这些模块。例如，以下代码可以在浏览器中正常运行，但在Node.js中运行时会报告错误

let canvas = document . createelement( # 39；画布 # 39；)复制代码是因为Node.js的宿主环境根本不提供内置的全局变量文档。

错误:文档未定义。副本代码游戏的运行环境是与浏览器不同的主机环境。提供的不是BOM和DOM API，而是wx API。通过wx API，开发者可以调用Native提供的绘图、音视频、网络、文件等能力。如果要创建画布，需要调用wx.createCanvas()

let canvas = wx . create canvas()let context = canvas . get context( # 39；2d # 39)复制代码。如果要创建一个音频对象，需要调用wx.createInnerAudioContext()

audio = wx . createinneraudicontext()//src地址仅供演示，并不真实存在。audio.src = # 39bgm.mp3 # 39Audio.play()复制代码。如果想得到屏幕的宽度和高度，需要调用wx.getSystemInfoSync()

设{屏幕宽度，屏幕高度} = wx。getsysteminfosync()复制代码，但是基于pixi.js呈现引擎将创建舞台，并以下列方式将其安装到页面上

document . body . appendchild(app . view)；此时复制代码会导致错误。如前所述，小游戏的主机环境根本不提供浏览器内置的两个全局变量document和window。因为小游戏环境和浏览器是不同的主机环境。

错误:文档未定义引用错误:窗口未定义为复制代码。所以基本上基于pixi.js开发的小游戏是不能直接转移到小游戏上使用的，因为pixi.js的实现可能或多或少会用到BOM、DOM等浏览器环境特有的API。只有修改pixi.js，把对BOM和DOM API的调用改为对wx API的调用，才能在小游戏环境下运行。但是，我们不能更改pixi.js的代码，也不能直接修改API的实现。还有一种适配方式，就是在渲染引擎和游戏逻辑代码之间增加一个模拟BOM和DOM API的适配层，我们称之为Adapter。这个适配层全局模拟了引擎将通过wx API访问的窗口和文档对象的属性和方法，这样引擎就不会感觉到环境的不同。适配器是用户代码，不是基本库的一部分。关于适配器的介绍，请参见教程适配器。

2.适配器适配器1。weapp -适配游戏的运行环境是iOS上的JavaScriptCore和Android上的V8，两者都没有BOM和DOM，也没有全局的文档和窗口对象。所以，当你想用DOM API创建Canvas、Image等元素时，就会产生错误。

const canvas = document . createelement( # 39；画布 # 39；)复制代码，但是我们可以用wx.createCanvas和wx.createImage封装一个文档。

const document = { createElement:function(tagName){ tagName = tagName . tolowercase()if(tagName = = = # 39；画布 # 39；){ return wx . create canvas()} else if(tagName = = = # 39；图像 # 39；){returnwx.createImage ()}}复制代码。此时，代码可以像在浏览器中创建元素一样创建画布和图像。

const canvas = document . createelement( # 39；画布 # 39；)const image = document . create image( # 39；图像 # 39；)复制代码。同样，如果您想以new Image()的方式创建一个Image对象，只需添加下面的代码。

函数image(){ return wx . create image()}复制代码这些用wx API模拟BOM和DOM的代码组成的库称为适配器。顾名思义，这是在小游戏运行环境下，基于浏览器环境为游戏引擎做的一个适配层，让游戏引擎在调用DOM API和访问DOM属性时不会产生错误。适配器是一个抽象的代码层，并不是指小游戏的第三方库。每个开发人员可以根据自己的项目需求实现相应的适配器。一款名为weapp-adapter的适配器官方实现提供了完整的源代码，供开发者使用和参考。* *适配器下载地址weapp -Adapter . zipweapp -Adapter会提前调用wx.createCanvas()创建一个上层屏幕画布，并将其暴露为全局变量Canvas。

要求( # 39；。/weapp -适配器 # 39；)var context = canvas . get context( # 39；2d # 39)context.fillStyle = # 39红色 # 39；Context.fillRect(0，0，100，100)复制代码此外，weapp-adapter还模拟了以下对象和方法:

文档。CreateElement画布。addevent listener LocalStorageAudioImageWebSocketXMLHttpRequest等等...需要强调的是，weapp -适配器对浏览器环境的模拟还远未完成，只是模拟了游戏引擎可能访问的属性和方法，并不能保证所有游戏引擎都能通过weapp -适配器流畅无缝地访问小游戏。直接向开发者提供weapp-adapter，更多的是供参考。开发者可以根据需要扩展weapp-adapter，以适应自己项目中使用的游戏引擎。

2.pix i-适配器游戏基础库只提供wx.createCanvas、wx.createImage等wx API，以及SetTimeout/SetInterval/request animation frame等常用JS方法。

1.全局对象窗口对象是浏览器环境中的全局对象。小游戏运行环境中没有BOM API，所以没有窗口对象。但是小游戏提供了全局对象GameGlobal，所有全局定义的变量都是GameGlobal的属性。

console . log(game global . setTimeout = = = setTimeout)；console . log(game global . requestAnimationFrame = = = requestAnimationFrame)；复制代码。以上代码执行结果均为真。开发者可以根据需要在GameGlobal上挂载他们封装的类和函数。

game . render = function(){//具体方法实现} render()；复制代码2。从 # 39；构造导入{canvas}的元素element；。/canvas # 39；/* * * Base Element */export class Element { style = { cursor:null } appendChild(){ } remove child(){ } addevent listener(){ } remove event listener(){ } } export const HTMLCanvasElement = canvas . constructor export const HTMLImageElement = wx . create image()。构造函数导出类htmlvideoelement扩展元素{}复制代码3。文档构造从 # 39；导入{ Canvas }；。/canvas # 39；从 # 39；。/Image # 39；从 # 39；导入{ Element };。/element # 39；const stack = { }/* * * document adaptation */export default { body:new element( # 39；正文 # 39；)，addEventListener(type，handle){ stack[type]= stack[type]| |[]stack[type]。push(handle) }，removeEventListener(type，handle){ if(stack[type] ； 堆栈[类型]。length) { const i = stack[type]。indexOf(句柄)I！= = -1 ； 堆栈[类型]。splice(i) } }，dispatch(ev){ const queue = stack[ev . type]queue ； queue . foreach(handle = gt；handle(ev)) }，createElement(tag){ switch(tag){ case # 39；画布 # 39；:{ return new Canvas()} case # 39；img # 39:{RETURN NEW IMAGE ()}默认:{RETURN NEW ELEMENT ()}}复制代码4。统一条目导入{noop}从 # 39；。/util # 39；从 # 39；。/Image # 39；从 # 39；导入{ canvas };。/canvas # 39；导入位置来自 # 39；。/location # 39；从 # 39；导入文档；。/document # 39；从 # 39；导入WebSocket。/web socket # 39；从 # 39；。/导航员 # 39；从 # 39；。/touch event # 39；从 # 39；导入XMLDocument。/XML document # 39；从 # 39；。/local storage # 39；从 # 39；导入XMLHttpRequest。/XMLHttpRequest # 39；从 # 39；导入{ Element，HTMLCanvasElement，HTMLImageElement，HTMLVideoElement }。/element # 39；const { platform } = wx . getsysteminfosync()game Global . canvas = canvas//全局画布canvas。addeventlistener = document。addeventlistenercanvas。removeeventlistener = if不能在document.removeEventListener//模拟器的挂载窗口上修改(platform = = = # 39devtools # 39){ object . define properties(window，{ Image: {value: Image}，Element: {value: Element}，ontouchstart: {value: noop}，WebSocket: {value: WebSocket}，addEventListener: {value: noop}，TouchEvent: {value: TouchEvent}，XML Document:{ value:XML Document }，local storage:{ value:local storage }，XMLHttpRequest:{ value:XMLHttpRequest }，html video Element:{ value:html video Element }，html Image Element:{ value:html Image Element }，htmldesc | | desc . configurable){ object . define property(window . document，key，{ value:document[key]})} } else { game global。Image = Image game global . window = game global game global . ontouchstart = noop game global . document = document game global . location = location game global。web socket = web socket game global . navigator = navigator game globaltouch event = touch event game global . addevent listener = noop game global。XML document = XML document game global . removeeventlistener = noop game global . local storage = local storage game global。XMLHttpRequest = XMLHt TP request game global。HTMLImageElement = HTMLImageElement game global。html video element = html video element game global。HTMLCanvasElement = HTMLCanvasEle Gamegolobal。webglrenderingcontext = game global。webglrenderingcontext || {}}复制代码的思路是引入一个通用的适配器来尝试运行，然后一个一个的解决问题。

以上是学习如何用pixi.js开发微信游戏的详细内容更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 学习如何用pixi.js开发微信游戏(pixi.js教程)
• 学习如何用pixi.js开发微信游戏(python开发微信游戏)。
• 基于微信开发工具的微信游戏介绍（微信游戏开发）
• 基于微信开发工具的微信游戏介绍(如何开发一款微信游戏)

本文由主机参考刊发，转载请注明：了解如何用pixi.js开发微信游戏(pixijs微信游戏) https://zhujicankao.com/81986.html