备案控制台
开发者社区 开发与运维 文章 正文

egret接vivo小游戏

2022-11-09 300
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： egret接vivo小游戏
推荐阅读：

环境搭建

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小游戏引擎即可扫码调试。

文章标签：
JavaScript
移动开发
开发者
爱上游戏开发
目录
相关文章
chinar-yunxi
|
图形学
Unity 3D游戏-消消乐（三消类）教程和源码
Unity 消消乐教程和源码 本文提供全流程，中文翻译。Chinar坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） ...
chinar-yunxi
5336 0
热烈的马
|
5月前
|
vr&ar 图形学
【Unity 3D】VR飞机起飞喷火游戏案例实战（附源码和演示视频 超详细）
【Unity 3D】VR飞机起飞喷火游戏案例实战（附源码和演示视频 超详细）
热烈的马
61 0
爱上游戏开发
|
移动开发 JavaScript API
egret接4399平台
egret接4399平台
爱上游戏开发
512 0
egret接4399平台
李一花
|
前端开发 JavaScript iOS开发
一入前端深似海，从此红尘是路人系列第十二弹之移动端模拟IOS虚拟按钮效果
用过苹果的大家都知道，苹果公司做了一个虚拟按钮，让页面上的挂件可被拖拽并吸附到屏幕边框处，降低挂件对用户的干扰。该效果如果用JavaScript进行实现又该如何实现呢，接下来我将分享给大家。首先上一张效果图
李一花
1671 0
行者武松
吐槽M1是耻辱，发布会放烟雾弹，老罗的单口相声还是比坚果Pro好看
行者武松
1254 0
lancel0t
|
人工智能 图形学
Unity3D手机斗地主游戏开发实战（04）_出牌判断大小
之前我们实现了叫地主、玩家和电脑自动出牌主要功能，但是还有个问题，出牌的时候，没有有效性检查和比较牌力大小。比如说，出牌3,4,5，目前是可以出牌的，然后下家可以出任何牌如3,6,9。 问题1：出牌检查有效性，就是出牌类型判断，像单张、对子、顺子、炸弹等等类型； 问题2：上家出牌后，下家再出牌的时候，要判断当前牌力是否大于上家的牌力； 那本篇我们主要解决以上2个问题。
lancel0t
1038 0
lancel0t
|
图形学
Unity3D手机斗地主游戏开发实战（03）_地主牌显示和出牌逻辑
Hi，之前有同学说要我把源码发出来，那我就把半成品源码的链接放在每篇文件的最后，有兴趣的话可以查阅参考，有问题可以跟我私信，也可以关注我的个人公众号，互相交流嘛。当然，代码也是在不断的持续改进中~ 上期我们实现了叫地主功能，不过遗留了一个小功能：叫地主完成以后，要显示地主的3张牌，这期首先弥补这块的功能； 接着我们要进入开发出牌逻辑的开发阶段，好了，废话不多说，继续我们斗地主开发之旅~ 地主牌的显示 我们在玩家界面的顶部中间位置，放置一个新的GameObject，命名为BidCards，用来记录3张地主牌的显示位置。
lancel0t
1844 0
lancel0t
|
图形学 索引
Unity3D手机斗地主游戏开发实战（02）_叫地主功能实现
大体思路 前面我们实现了点击开始游戏按钮，系统依次给玩家发牌的逻辑和动画，并展示当前的手牌。这期我们继续实现接下来的功能--叫地主。 1.首先这两天，学习了DOTween，这是一个强大的Unity动画插件，大家可以参考：DOTween官方文档，个人感觉DOTween还是比较好用的。
lancel0t
1160 0
lancel0t
|
图形学 索引
Unity3D手机斗地主游戏开发实战（01）_发牌功能实现
园子荒废多年，闲来无事，用Unity3D来尝试做一个简单的小游戏，一方面是对最近研究的Unity3D有点总结，一方面跟广大的园友相互学习和提高。话不多说，进入正题~ 创建项目 1.创建Unity2017的2D项目，暂且叫做ChinesePoker吧，就用自带的UGUI来编辑UI， 目前只导入iTween插件，用来方便控制动画效果。
lancel0t
1838 0
技术mix呢
|
Web App开发 图形学
Unity3D手游-横版ACT游戏完整源代码下载
技术mix呢
2436 0