学习如何用pixi.js开发微信游戏(pixi.js教程)

微信小程序开发专栏介绍如何用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中运行时会报告错误

Letcanvas = document。CreateElement ('canvas ')复制代码，因为主机环境Node.js根本不提供内置的全局变量文档。

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

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

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

让{screenwidth，screen height } = wx . getsysteminfosync()复制代码，但是基于pixi.js的渲染引擎会通过以下方式创建舞台并挂载到页面上。

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

引用错误:文档未定义引用错误:窗口未定义为复制代码。所以基本上基于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 =文档。CreateElement ('canvas ')复制代码，但是我们可以用wx.createCanvas和wx.createImage封装一个文档。

const document = { createElement:function(tagName){ tagName = tagName . tolowercase()if(tagName = = = ' canvas '){ return wx。create canvas()} else if(tagname = = = ' Image '){ return wx。createimage ()}}复制代码，然后代码就可以像在浏览器中创建元素一样创建画布和图像了。

Const canvas =文档。createelement ('canvas ')常量Image = document。createimage ('image ')复制代码类似地，如果你想以new image()的方式创建一个Image对象，只需添加下面的代码即可。

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

要求('。/weapp-adapter ')复制代码VarContext = canvas。get Context(“2d”)上下文。Fillstyle =' red '上下文。FillRect (0，0，100，100)此外，Weapp-adapter模拟了以下对象和方法:

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

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上挂载自己封装的类和函数。

gamegulobal . render = function(){//具体方法实现} render()；复制代码2。元素元素构造从“”导入{canvas}。/canvas '/* * * base element */exportclasselement { style = { cursor:null } appendchild(){ } remove child(){ } addevent listener(){ } } export const HTMLCanvasElement = canvas . constructor export const HTMLImageElement = wx . create image()。构造函数导出类htmlvideoelement扩展元素{}复制代码3。文档构造从“”导入{canvas}。/canvas '导入图像自'。/ Image“从导入{element}”。/element' conststack = {}/* *文档适配*/export default { body:new element(' body ')，addeventlistener (type，Handle) {stack微信app下载微信是一款手机通讯软件，支持通过手机网络发送语音消息、视频、图片和文字。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

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

• 8分钟开始微信小程序开发（微信小程序开发教程概述）
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发入门课程)
• 学习如何用pixi.js开发微信游戏(python开发微信游戏)。
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发软件教程)。
• 让微信小程序开发如鱼得水的方法（微信小程序开发详细教程）

本文由主机参考刊发，转载请注明：学习如何用pixi.js开发微信游戏(pixi.js教程) https://zhujicankao.com/122244.html