egret接vivo小游戏

其他 2018-12-06 03:24:01 阅读次数: 0
版权声明：文章均是博主原创，如需转载，请在文章开头注明出处和署名！ https://blog.csdn.net/shirln/article/details/84838902

推荐阅读：

环境搭建

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

在手机上安装调试器，vivo小游戏引擎即可扫码调试。

猜你喜欢

转载自blog.csdn.net/shirln/article/details/84838902
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022