2. 程式人生 > >egret接vivo小遊戲

egret接vivo小遊戲

阿新 • • 發佈：2018-12-06

推薦閱讀：

環境搭建

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小遊戲引擎即可掃碼除錯。

相關推薦

egret接vivo小遊戲

推薦閱讀：  我的CSDN  我的部落格園  QQ群：704621321 環境搭建 1.在vivo開發者平臺建立公司賬號。進入“管理中心”，選擇“vivo小遊戲”，“建立vivo

使用Python開發一個超級簡單的接水果小遊戲，零基礎也可以學會

python 遊戲 有趣 零基礎 編程 Pylash項目地址創建項目這樣的話我們的項目就創建好了，然後只用往Main.py裏填寫代碼運行即可。編寫Hello World小程序編寫遊戲有以上對pylash的小小了解，我們接下來可以開始編寫遊戲了。首先我們把第四行以後所有代碼刪除。引入所需全局

Egret微信小遊戲轉發、分享等功能實現

http://bbs.egret.com/thread-50904-1-1.html 這是官方教程的實現。 1. 需要在Platform.ts裡呼叫platform.js介面。 2. 在Main.ts通過Platform.ts呼叫執行函式 。 3. 在 platform.js寫相對應的邏

Egret微信小遊戲好友排行榜教程

https://mp.weixin.qq.com/s/kYIdnHv-C5KuR9snekPNBg https://mp.weixin.qq.com/s/PA2sfcGxNfix7sJ8ysy9AA 官方文件。 https://www.jianshu.com/p/600543c4be

C語言完成成語接龍小遊戲

用C語言實現成語接龍小遊戲（新手上路，大神勿噴） 1、首先需要找到一個成語庫（從網上下載即可，儲存為.txt檔案） 2、整體思路如下 由於要用的成語儲存在檔案裡，一邊用一邊讀取會降低程式碼的效率，所以我們首先建立一個二維動態陣列，將檔案裡的成語讀取到二維數組裡。首先讓使用者輸入第一個成

Egret -- Egret 微信小遊戲API呼叫

在Egret中是可以直接呼叫微信小遊戲的API的，Egret中添加了平臺程式碼，可以呼叫各個平臺API。 該章效果如下： 一、新建工程會發現在src資料夾中會包含一個Platform.ts的檔案，如果沒有請建立。 /** * 平臺數據介面。 *

C語言做的接雞蛋小遊戲（附原始碼註釋）【原創】

//以下是接雞蛋小遊戲原始碼  。建議在VS中執行除錯！ /* 標頭檔案 */ # include <windows.h> # include <stdlib.h> # include <stdio.h> # include

Egret微信小遊戲登入授權

getUserInfo(left, bottom) { return new Promise((resolve, reject) => { let sysInfo = wx.getSystemInfoSync(); let sdkVersion

egret微信小遊戲在本地使用者檔案目錄下建立檔案並讀取內容

Platform.ts新增 declare interface Platform { getUserInfo(): Promise<any>; login(): Promise<any> getFileData(fi

unity3D 接雞蛋小遊戲

public class EggScore : MonoBehaviour {     public int score;     // Use this for initialization     void Start () {         score=0;   

Egret之微信小遊戲初體驗

Egret 微信 小遊戲 一 : 首先介紹2個命令: ①:發布小遊戲 egret public --target wxgame ②:用微信開發者工具打開 egret run --target wxgame 二 : 步驟 ① : 使用egret 5.1.2及其以上的版本創建一個EUI的遊戲項目我使用

Egret之微信小遊戲基礎Bug修復

Egret 微信小遊戲 小遊戲 問題 基礎 一 : 第三方類庫未定義如 : smallLib類庫 解決方案: 找到wxgame.ts , 在onFile方法中加入 if(filename == "libs/modules/smallLib/smallLib.j

Egret 生成 自帶EUI 的微信小遊戲 踩坑！

end custom 點擊 ati gre faq commonjs require IE 1. 首先，再次被網上一大堆屎一樣的資料搞得浪費了我一天時間。各種坑。 2. 本文先講一種正確的方式，然後再列舉坑。 去www.egret.com下載最新的引擎，我的最新版

白鷺引擎egret打包成微信小遊戲

1、匯入專案以後開啟檔案egretproperties.json修改target 下面的current的web為wxgame r   然後點開打包   在這裡填寫微信小遊戲id以及命名，打包成功以後，即可用微信開發者工具來允許，如果報錯請把縮放模式改成f

egret釋出到微信小遊戲的一些坑

2018年11月14日 11:18:39 yohoj 閱讀數：7 標籤： egret

接入微信小遊戲的開放資料域的釋出步驟

一、開啟主域專案，在 選單欄 - 專案 中開啟構建釋出面板，選擇 Wechat Game 平臺，填入 [開放資料域程式碼目錄]。該目錄是開放資料域構建後所在的路徑，並且這個路徑需要放在主域構建目錄下。然後點選 構建。 該步驟會幫使用者自動配置到主域專案 build -> wech

Egret exml在微信小遊戲這塊兒的坑

知識點： 微信小遊戲不支援eval等方法動態呼叫js指令碼 egret自定義元件暴露在全域性，但是導成微信小遊戲工程的時候必須要將類掛載到window上，可以在srcipts/wxgame/wxgam

謀哥：社交小遊戲App將是下一個金礦!

最重要的 感覺 接口 產品 one 這樣的 現在 廣告 port 【謀哥每天一原創幹貨，第四十五篇】 移動互聯網的機會是許多的。誰先做誰的機會就更大，所以把握時機很重要。現在的App市場，各個分類的App已經多得眼花。也就是所謂的紅海一片。 那麽。在移動浪潮下。是不是還

PHP之連接mysql小練習

eset logs int echo mod reg title htm cal mysql　Test.sql 1 -- phpMyAdmin SQL Dump 2 -- version 4.6.6 3 -- https://www.phpmyadmin.net/

js-->貪吃蛇小遊戲,能成功玩

function 小遊戲 absolute images 貪吃蛇 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>貪吃蛇小遊戲</tit