推荐阅读：
环境搭建
1.在vivo开发者平台创建公司账号。进入“管理中心”，选择“vivo小游戏”，“创建vivo小游戏”，设置小游戏基本属性，注意包名必须按对方的要求填写。
2.进入vivo小游戏开发文档，按照说明安装环境，这里简要介绍下流程：
a.进入官网安装Node.js6.0以上版本。
b.进入CMD命令窗口：win+r,输入cmd；
安装qgame-toolkit，输入：
npm install -g qgame-toolkit查看qgame-toolkit版本信息，输入：
qgame -V新建项目，使用qgame init ，例如项目名称为test输入：
qgame init test此时文件目录如下：
切换test项目的根路径，输入：
cd test安装依赖node_modules，输入：
npm install注意：上面命令必须在根目录下执行
此时文件目录如下：
接入项目
方法一：egert项目直接接vivo小游戏
1.在test项目的根目录下创建两个新文件夹，分别命名为：engine和config。
2.在engine中创建新文件夹，命名为：src
3.将egret项目打包为h5包，版本号为1.0.0（可根据实际情况填)，复制bin-release\web\1.0.0路径下的js,resource两个文件到engine目录下。
4.复制附件中的qgame-adapter.js到engine\src目录下。
5.复制egert项目中libs\modules\egret目录下的egret.web.js和egret.js到engine\js目录下，并修改egret.web.js里对应的下面方法：
//搜索对应方法，覆盖此方法
(1)
WebHttpRequest.prototype.getXHR = function () {
if(qg) {
return {};
}else {
if (window["XMLHttpRequest"]) {
return new window["XMLHttpRequest"]();
}
else {
return new ActiveXObject("MSXML2.XMLHTTP");
}
}
};
(2)
WebHttpRequest.prototype.open = function (url, method) {
if (method === void 0) { method = "GET"; }
this._url = url;
this._method = method;
if (this._xhr) {
this._xhr.abort();
this._xhr = null;
}
this._xhr = this.getXHR(); //new XMLHttpRequest();
if (!qg) {
this._xhr.onreadystatechange = this.onReadyStateChange.bind(this);
this._xhr.onprogress = this.updateProgress.bind(this);
this._xhr.open(this._method, this._url, true);
}
};
(3)
WebHttpRequest.prototype.send = function (data) {
if (this._responseType != null) {
this._xhr.responseType = this._responseType;
}
if (this._withCredentials != null) {
this._xhr.withCredentials = this._withCredentials;
}
if (this.headerObj) {
for (var key in this.headerObj) {
this._xhr.setRequestHeader(key, this.headerObj[key]);
}
}
if (qg) {
this.onReadyStateChange();
}
else {
this._xhr.send(data);
}
};
(4)
WebHttpRequest.prototype.onReadyStateChange = function () {
var xhr = this._xhr;
if (qg) {
var self = this;
if (this.responseType === 'arraybuffer') {
qg.readFile({
uri: this._url,
encoding: 'binary',
success: function (data) {
xhr.response = data.text;
self.dispatchEventWith(egret.Event.COMPLETE);
},
fail: function (data, code) {
console.log(`handling fail, code = ${code}`)
}
})
}
else if (this.responseType === 'blob') {
qg.readFile({
uri: this._url,
encoding: 'binary',
success: function (data) {
xhr.response = new Blob([data.text]);
self.dispatchEventWith(egret.Event.COMPLETE);
},
fail: function (data, code) {
console.log(`handling fail, code = ${code}`)
}
})
}
else {
qg.readFile({
uri: this._url,
encoding: 'utf8',
success: function (data) {
xhr.responseText = data.text;
self.dispatchEventWith(egret.Event.COMPLETE);
},
fail: function (data, code) {
console.log(`handling fail, code = ${code}`)
}
})
}
}
else {
if (xhr.readyState == 4) {
var ioError_1 = (xhr.status >= 400 || xhr.status == 0);
var url_1 = this._url;
var self_1 = this;
window.setTimeout(function () {
if (ioError_1) {
if (true && !self_1.hasEventListener(egret.IOErrorEvent.IO_ERROR)) {
egret.$error(1011, url_1);
}
self_1.dispatchEventWith(egret.IOErrorEvent.IO_ERROR);
}
else {
self_1.dispatchEventWith(egret.Event.COMPLETE);
}
}, 0);
}
}
};
(5)
WebPlayer.prototype.init = function (container, options) {
var option;
//修改代码开始（注意:scaleMode,contentWidth,contentHeight根据需求修改）
if (qg) {
option = JSON.parse(
`{"entryClassName": "Main",
"scaleMode": "fixedWidth",
"frameRate": 60,
"contentWidth": 480,
"contentHeight": 720,
"orientation": "auto",
"maxTouches": 2,
"textureScaleFactor": 1,
"showPaintRect": false,
"showFPS": true,
"fpsStyles": {
"x": "0",
"y": "0",
"size": "12",
"textColor": "0xffffff",
"bgAlpha": "0.9"
},
"showLog": false,
"logFilter": null
}`);
} else {
option = this.readOption(container, options);
}
var stage = new egret.Stage();
stage.$screen = this;
stage.$scaleMode = option.scaleMode;
stage.$orientation = option.orientation;
stage.$maxTouches = option.maxTouches;
stage.frameRate = option.frameRate;
stage.textureScaleFactor = option.textureScaleFactor;
var buffer = new egret.sys.RenderBuffer(undefined, undefined, true);
var canvas = buffer.surface;
this.attachCanvas(container, canvas);
var webTouch = new web.WebTouchHandler(stage, canvas);
var player = new egret.sys.Player(buffer, stage, option.entryClassName);
egret.lifecycle.stage = stage;
egret.lifecycle.addLifecycleListener(web.WebLifeCycleHandler);
var webInput = new web.HTMLInput();
if (option.showFPS || option.showLog) {
if (!egret.nativeRender) {
player.displayFPS(option.showFPS, option.showLog, option.logFilter, option.fpsStyles);
}
}
this.playerOption = option;
this.container = container;
this.canvas = canvas;
this.stage = stage;
this.player = player;
this.webTouchHandler = webTouch;
this.webInput = webInput;
egret.web.$cacheTextAdapter(webInput, stage, container, canvas);
this.updateScreenSize();
this.updateMaxTouches();
player.start();
};
(6)
/**
* 获取指定区域的像素
*/
CanvasRenderBuffer.prototype.getPixels = function (x, y, width, height) {
if (width === void 0) {
width = 1;
}
if (height === void 0) {
height = 1;
}
//适配处理（只修改了这里）
if (qg) {
return this.context.getImageData(x, y, width, height);
} else {
return this.context.getImageData(x, y, width, height).data;
}
};修改egret.js里对应的如下方法方法：
//搜索对应方法，覆盖此方法
(1)
Graphics.prototype.$hitTest = function (stageX, stageY) {
var target = this.$targetDisplay;
var m = target.$getInvertedConcatenatedMatrix();
var localX = m.a * stageX + m.c * stageY + m.tx;
var localY = m.b * stageX + m.d * stageY + m.ty;
var buffer = egret.sys.canvasHitTestBuffer;
buffer.resize(3, 3);
var node = this.$renderNode;
var matrix = egret.Matrix.create();
matrix.identity();
matrix.translate(1 - localX, 1 - localY);
egret.sys.canvasRenderer.drawNodeToBuffer(node, buffer, matrix, true);
egret.Matrix.release(matrix);
try {
var data = buffer.getPixels(1, 1);
if (qg) {
//适配处理，data做判断空值，避免报错，（只修改了这里）
if (!data || data[3] === 0) {
return null;
}
} else {
if (data[3] === 0) {
return null;
}
}
}
catch (e) {
throw new Error(egret.sys.tr(1039));
}
return target;
};6.打开test\src下的game.js，配置js模块如下（根据egret项目中manifest.json配置）：
require("src/qgame-adapter.js");
require("js/egret.js");
require("js/egret.web.js");
require("js/game.min_45aa06f6.js");
require("js/tween.min_6c5a88f9.js");
require("js/assetsmanager.min_74d9c0de.js");
require("js/promise.min_83a6a5d.js");
require("js/main.min_4316d7e6.js");
随后复制index.html中的下列代码到上术代码下：
//index.html
egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor:function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}});7.复制附件中的webpack.config.js到test\config目录下，并参照下面代码修改：
module.exports = {
postHook: function(webpackConf, options){
// 设置externals
webpackConf.externals = Object.assign(webpackConf.externals || {}, {
"js/egret.js":"commonjs js/egret.js",
"js/egret.web.js":"commonjs js/egret.web.js",
"js/game.min_45aa06f6.js":"commonjs js/game.min_45aa06f6.js",
"js/tween.min_6c5a88f9.js":"commonjs js/tween.min_6c5a88f9.js",
"js/assetsmanager.min_74d9c0de.js":"commonjs js/assetsmanager.min_74d9c0de.js",
"js/promise.min_83a6a5d.js":"commonjs js/promise.min_83a6a5d.js",
"js/main.min_4316d7e6.js":"commonjs js/main.min_4316d7e6.js",
"src/qgame-adapter.js":"commonjs src/qgame-adapter.js"})
// copy engine文件
mkdirsSync(outputPath)
copyEngineFile()
}
}方法二：打包成微信小游戏接入
1.将egert项目打包成微信小游戏。
2.在test项目的根目录下创建两个新文件夹，分别命名为：engine和config。
3.将微信项目中的js，resource，manifest.js，platform.js，weapp-adapter.js复制到engine目录下。
4.使用微信小游戏下的game.js替换test\src\game.js，并参照下面代码修改：
window.wx = qg;
require('qgame-adapter.js');
if(window.mainCanvas){
window['canvas']=window.mainCanvas;
}
window["shareCanvas"] = {};
require('manifest.js');
require('egret.wxgame.js');
// 启动微信小游戏本地缓存，如果开发者不需要此功能，只需注释即可
// 只有使用 assetsmanager 的项目可以使用
// if(window.RES && RES.processor) {
// require('library/image.js');
// require('library/text.js');
// require('library/sound.js');
// require('library/binary.js');
// }5.复制附件中的webpack.config.js到test\config目录下，并参照下面代码修改：
module.exports = {
postHook: function(webpackConf, options){
// 设置externals
webpackConf.externals = Object.assign(webpackConf.externals || {}, {
"manifest.js":"commonjs manifest.js",
"egret.wxgame.js":"commonjs egret.wxgame.js",
"qgame-adapter.js":"commonjs qgame-adapter.js"})
// copy engine文件
mkdirsSync(outputPath)
copyEngineFile()
}
}6.复制附件中的egret.wxgame.js到test\engine目录下。
7.复制附件中的egret.js到test\engine\js下，并修改test\engine\js\egret.js中Graphics.prototype.$hitTest方法如下：
Graphics.prototype.$hitTest = function (stageX, stageY) {
var target = this.$targetDisplay;
var m = target.$getInvertedConcatenatedMatrix();
var localX = m.a * stageX + m.c * stageY + m.tx;
var localY = m.b * stageX + m.d * stageY + m.ty;
var buffer = egret.sys.canvasHitTestBuffer;
buffer.resize(3, 3);
var node = this.$renderNode;
var matrix = egret.Matrix.create();
matrix.identity();
matrix.translate(1 - localX, 1 - localY);
egret.sys.canvasRenderer.drawNodeToBuffer(node, buffer, matrix, true);
egret.Matrix.release(matrix);
try {
var data = buffer.getPixels(1, 1);
if (qg) {
//适配处理，data做判断空值，避免报错，（只修改了这里）
if (!data || data[3] === 0) {
return null;
}
} else {
if (data[3] === 0) {
return null;
}
}
}
catch (e) {
throw new Error(egret.sys.tr(1039));
}
return target;
};8.复制附件中的qgame-adapter.js到test\engine目录下。
编译调试
手动编译项目:win+r，输入cmd
切换到工程根目录：
cd text编译项目，输入：
npm run build正确编译结果如下：
启动HTTP服务器,输入：
npm run server
