白鹭解析html5,Egret白鹭Protobuf 静态解析使用
protobufjs有3中使用方式，实时解析方式、json解析方式、静态代码方式(事先导出proto的js文件)。
那么三种方式，可想而知，静态代码执行速度最快，并且可以直接访问到proto中定义的字段，不需要用字符串来传字段名字。网络传输的时候加解码出来的都是对象。
proto文件看一下
// awesome.proto
package awesomepackage;
syntax = "proto3";
message AwesomeMessage {
string awesome_field = 1; // becomes awesomeField
}
有个专门的工具链接可以把.proto文件导出.js文件以及对应的.d.ts文件。
首先安装Node.js
然后，安装protobufjs：
npm install protobufjs
装完以后，可以用命令导出.js文件和.d.ts文件
$> pbjs -t static-module -w commonjs -o xxxx.js xxxxx.proto
$> pbts -o xxxxx.d.ts xxxxx.js
第一行导出js文件，第二行把导出的js生成对应的.d.ts文件，这样就可以在TS代码中调用了。
-t -static-module参数，表示选的是静态代码模式。
-w commonjs表示用什么标准来输出js代码。支持default，es6 需要可以在git上查看类型
这里就使用commonjs来进行操作
image.png
转完以后可以看到js和.d.ts文件
接下来导入进egret
image.png
这个是protobuf的目录 bundles 就是刚刚转码的
library是protobuf的支持包~(这里改了个名字)
protocol.min.js是我自己用uglifyjs命令行工具自动生成的，uglifyjs也是nodejs提供的一个模块，感兴趣的可以去搜一下，能压缩不少。
将文件目录这么放就ojbk了。
image.png
tsconfig文件
image.png
egretProperties.json文件
image.png
本以为这样就可以跑起来了 但是还是报错了 转换的proto文件 是有问题的
接下来我们进行proto转出文件的修改
首先看.d.ts文件
这是原版文件
import * as $protobuf from "protobufjs";
/** Namespace awesomepackage. */
export namespace awesomepackage {
/** Properties of an AwesomeMessage. */
interface IAwesomeMessage {
/** AwesomeMessage awesomeField */
awesomeField?: (string|null);
}
/** Represents an AwesomeMessage. */
class AwesomeMessage implements IAwesomeMessage {
/**
* Constructs a new AwesomeMessage.
* @param [properties] Properties to set
*/
constructor(properties?: awesomepackage.IAwesomeMessage);
/** AwesomeMessage awesomeField. */
public awesomeField: string;
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @param [properties] Properties to set
* @returns AwesomeMessage instance
*/
public static create(properties?: awesomepackage.IAwesomeMessage): awesomepackage.AwesomeMessage;
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encode(message: awesomepackage.IAwesomeMessage, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encodeDelimited(message: awesomepackage.IAwesomeMessage, writer?: $protobuf.Writer): $protobuf.Writer;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @param reader Reader or buffer to decode from
* @param [length] Message length if known beforehand
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
public static decode(reader: ($protobuf.Reader|Uint8Array), length?: number): awesomepackage.AwesomeMessage;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @param reader Reader or buffer to decode from
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
public static decodeDelimited(reader: ($protobuf.Reader|Uint8Array)): awesomepackage.AwesomeMessage;
/**
* Verifies an AwesomeMessage message.
* @param message Plain object to verify
* @returns `null` if valid, otherwise the reason why it is not
*/
public static verify(message: { [k: string]: any }): (string|null);
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @param object Plain object
* @returns AwesomeMessage
*/
public static fromObject(object: { [k: string]: any }): awesomepackage.AwesomeMessage;
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @param message AwesomeMessage
* @param [options] Conversion options
* @returns Plain object
*/
public static toObject(message: awesomepackage.AwesomeMessage, options?: $protobuf.IConversionOptions): { [k: string]: any };
/**
* Converts this AwesomeMessage to JSON.
* @returns JSON object
*/
public toJSON(): { [k: string]: any };
}
}
改动后 第一句 type Long = protobuf.Long;替换 全局搜索 $protobuf替换为protobuf
type Long = protobuf.Long;
/** Namespace awesomepackage. */
declare namespace awesomepackage {
/** Properties of an AwesomeMessage. */
interface IAwesomeMessage {
/** AwesomeMessage awesomeField */
awesomeField?: (string|null);
}
/** Represents an AwesomeMessage. */
class AwesomeMessage implements IAwesomeMessage {
/**
* Constructs a new AwesomeMessage.
* @param [properties] Properties to set
*/
constructor(properties?: awesomepackage.IAwesomeMessage);
/** AwesomeMessage awesomeField. */
public awesomeField: string;
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @param [properties] Properties to set
* @returns AwesomeMessage instance
*/
public static create(properties?: awesomepackage.IAwesomeMessage): awesomepackage.AwesomeMessage;
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encode(message: awesomepackage.IAwesomeMessage, writer?: protobuf.Writer): protobuf.Writer;
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @param message AwesomeMessage message or plain object to encode
* @param [writer] Writer to encode to
* @returns Writer
*/
public static encodeDelimited(message: awesomepackage.IAwesomeMessage, writer?: protobuf.Writer): protobuf.Writer;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @param reader Reader or buffer to decode from
* @param [length] Message length if known beforehand
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {protobuf.util.ProtocolError} If required fields are missing
*/
public static decode(reader: (protobuf.Reader|Uint8Array), length?: number): awesomepackage.AwesomeMessage;
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @param reader Reader or buffer to decode from
* @returns AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {protobuf.util.ProtocolError} If required fields are missing
*/
public static decodeDelimited(reader: (protobuf.Reader|Uint8Array)): awesomepackage.AwesomeMessage;
/**
* Verifies an AwesomeMessage message.
* @param message Plain object to verify
* @returns `null` if valid, otherwise the reason why it is not
*/
public static verify(message: { [k: string]: any }): (string|null);
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @param object Plain object
* @returns AwesomeMessage
*/
public static fromObject(object: { [k: string]: any }): awesomepackage.AwesomeMessage;
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @param message AwesomeMessage
* @param [options] Conversion options
* @returns Plain object
*/
public static toObject(message: awesomepackage.AwesomeMessage, options?: protobuf.IConversionOptions): { [k: string]: any };
/**
* Converts this AwesomeMessage to JSON.
* @returns JSON object
*/
public toJSON(): { [k: string]: any };
}
}
接下来是js文件 直接看改的吧 把require 删除 直接改成头上两句 底部export去掉 就好了
var $protobuf = window.protobuf;
$protobuf.roots.default=window;
// Common aliases
var $Reader = $protobuf.Reader, $Writer = $protobuf.Writer, $util = $protobuf.util;
// Exported root namespace
var $root = $protobuf.roots["default"] || ($protobuf.roots["default"] = {});
$root.awesomepackage = (function() {
/**
* Namespace awesomepackage.
* @exports awesomepackage
* @namespace
*/
var awesomepackage = {};
awesomepackage.AwesomeMessage = (function() {
/**
* Properties of an AwesomeMessage.
* @memberof awesomepackage
* @interface IAwesomeMessage
* @property {string|null} [awesomeField] AwesomeMessage awesomeField
*/
/**
* Constructs a new AwesomeMessage.
* @memberof awesomepackage
* @classdesc Represents an AwesomeMessage.
* @implements IAwesomeMessage
* @constructor
* @param {awesomepackage.IAwesomeMessage=} [properties] Properties to set
*/
function AwesomeMessage(properties) {
if (properties)
for (var keys = Object.keys(properties), i = 0; i < keys.length; ++i)
if (properties[keys[i]] != null)
this[keys[i]] = properties[keys[i]];
}
/**
* AwesomeMessage awesomeField.
* @member {string} awesomeField
* @memberof awesomepackage.AwesomeMessage
* @instance
*/
AwesomeMessage.prototype.awesomeField = "";
/**
* Creates a new AwesomeMessage instance using the specified properties.
* @function create
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage=} [properties] Properties to set
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage instance
*/
AwesomeMessage.create = function create(properties) {
return new AwesomeMessage(properties);
};
/**
* Encodes the specified AwesomeMessage message. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @function encode
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage} message AwesomeMessage message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
AwesomeMessage.encode = function encode(message, writer) {
if (!writer)
writer = $Writer.create();
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
writer.uint32(/* id 1, wireType 2 =*/10).string(message.awesomeField);
return writer;
};
/**
* Encodes the specified AwesomeMessage message, length delimited. Does not implicitly {@link awesomepackage.AwesomeMessage.verify|verify} messages.
* @function encodeDelimited
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.IAwesomeMessage} message AwesomeMessage message or plain object to encode
* @param {$protobuf.Writer} [writer] Writer to encode to
* @returns {$protobuf.Writer} Writer
*/
AwesomeMessage.encodeDelimited = function encodeDelimited(message, writer) {
return this.encode(message, writer).ldelim();
};
/**
* Decodes an AwesomeMessage message from the specified reader or buffer.
* @function decode
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @param {number} [length] Message length if known beforehand
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
AwesomeMessage.decode = function decode(reader, length) {
if (!(reader instanceof $Reader))
reader = $Reader.create(reader);
var end = length === undefined ? reader.len : reader.pos + length, message = new $root.awesomepackage.AwesomeMessage();
while (reader.pos < end) {
var tag = reader.uint32();
switch (tag >>> 3) {
case 1:
message.awesomeField = reader.string();
break;
default:
reader.skipType(tag & 7);
break;
}
}
return message;
};
/**
* Decodes an AwesomeMessage message from the specified reader or buffer, length delimited.
* @function decodeDelimited
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {$protobuf.Reader|Uint8Array} reader Reader or buffer to decode from
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
* @throws {Error} If the payload is not a reader or valid buffer
* @throws {$protobuf.util.ProtocolError} If required fields are missing
*/
AwesomeMessage.decodeDelimited = function decodeDelimited(reader) {
if (!(reader instanceof $Reader))
reader = new $Reader(reader);
return this.decode(reader, reader.uint32());
};
/**
* Verifies an AwesomeMessage message.
* @function verify
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {Object.} message Plain object to verify
* @returns {string|null} `null` if valid, otherwise the reason why it is not
*/
AwesomeMessage.verify = function verify(message) {
if (typeof message !== "object" || message === null)
return "object expected";
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
if (!$util.isString(message.awesomeField))
return "awesomeField: string expected";
return null;
};
/**
* Creates an AwesomeMessage message from a plain object. Also converts values to their respective internal types.
* @function fromObject
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {Object.} object Plain object
* @returns {awesomepackage.AwesomeMessage} AwesomeMessage
*/
AwesomeMessage.fromObject = function fromObject(object) {
if (object instanceof $root.awesomepackage.AwesomeMessage)
return object;
var message = new $root.awesomepackage.AwesomeMessage();
if (object.awesomeField != null)
message.awesomeField = String(object.awesomeField);
return message;
};
/**
* Creates a plain object from an AwesomeMessage message. Also converts values to other types if specified.
* @function toObject
* @memberof awesomepackage.AwesomeMessage
* @static
* @param {awesomepackage.AwesomeMessage} message AwesomeMessage
* @param {$protobuf.IConversionOptions} [options] Conversion options
* @returns {Object.} Plain object
*/
AwesomeMessage.toObject = function toObject(message, options) {
if (!options)
options = {};
var object = {};
if (options.defaults)
object.awesomeField = "";
if (message.awesomeField != null && message.hasOwnProperty("awesomeField"))
object.awesomeField = message.awesomeField;
return object;
};
/**
* Converts this AwesomeMessage to JSON.
* @function toJSON
* @memberof awesomepackage.AwesomeMessage
* @instance
* @returns {Object.} JSON object
*/
AwesomeMessage.prototype.toJSON = function toJSON() {
return this.constructor.toObject(this, $protobuf.util.toJSONOptions);
};
return AwesomeMessage;
})();
return awesomepackage;
})();
接下来时白鹭引擎的使用
let ptest=new awesomepackage.AwesomeMessage();
console.log(ptest);
awesomepackage是你 proto文件 package 的包 proto在上面可以看一下
取到包名下面的AwesomeMessage 这个你可以在.d.ts里面看到的 就获取到了 生成的这个对象
然后你就可以在这个对象上操作
比如
ptest.awesome_field="protobuf"
赋值 传输的时候就可以使用对象ptest传输。
很感谢带着梦想去旅行这位老哥的教导~~
白鹭解析html5,Egret白鹭Protobuf 静态解析使用相关推荐
- rgret白鹭 开发html游戏,白鹭推HTML5首款生态产品Egret Runtime
原标题:白鹭推HTML5首款生态产品Egret Runtime 随着HTML5标准定稿掀起的热潮,白鹭时代14年11月主办"HTML5移动游戏大会",微信开放HTML5分享接口引得 ...
- 白鹭发布html5,白鹭Egret Engine 1.5发布 HTML5游戏性能大幅提升
近日,白鹭时代发布了最新一代的Egret Engine 1.5移动游戏引擎,其中备受行业关注的全新物理系统与WebSocket,随着新版引擎的发布与开发者见面.全新的Egret Engine 1.5不 ...
- 白鹭引擎（Egret Engine ）
什么是白鹭引擎 Egret引擎是一个开源免费的游戏框架,用于构建二维游戏.演示程序和其他图形界面交互应用等.Egret使用TypeScript脚本语言开发.当游戏完成最终的打包后,可以将程序转换为HT ...
- egret白鹭引擎RES资源管理模块，资源动态加载失效BUG，加载卡死BUG，完整解决方案与超详细调试漏洞过程
我是千里马,是一位软件工程师,最近几天完成了用户中心全套内容设计和游戏中大大小小的各种bug处理解决,准备开始游戏的正式填充,突然想起来还有两件抛之脑后的事情没有做.因为之前一直都是忙碌大方向内容设计 ...
- Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
- as3转换为html5,AS3和HTML5 - 使用正则表达式将字符串解析为数组
我一直在寻找和使用RegEx一段时间,并试图找到我可以应用于AS3和HTML5的解决方案.AS3和HTML5 - 使用正则表达式将字符串解析为数组 我有一个自定义用户输入部分,256个字符,他们可以自 ...
- Protobuf数据格式解析
Protobuf数据格式解析 Protobuf是Google开源的一款类似于Json,XML数据交换格式,其内部数据是纯二进制格式,不依赖于语言和平台,具有简单,数据量小,快速等优点.目前用于序列化与 ...
- Egret白鹭H5开发-围住神经猫
前言 今年9月份跳槽从Android转向前端H5网页和H5小游戏开发,一开始自己学习用Canvas做了拼图.贪吃蛇大作战等小游戏,在公司边学习边用phaser写了个手势识别的小游戏,现在公司想尝试转型 ...
- egret(白鹭引擎) 学习历程（二）
昨日因个人原因没能及时更新,今天补上!!!! 上接上一篇文章 三:资源配置 1: 在onConfigComplete的最后,有一行加载资源组的代码: RES.loadGroup("prelo ...
最新文章
- Gamma校正及其OpenCV实现
- 第四讲：debugging simulation mismatches
- Spring 文件上传功能
- linux socket recv函数如何判断收完一包_linux 下经典 IO 复用模型 epoll 的使用
- 用SQL中的isnull函数注意了
- android显示网络gif图片
- python 文件复制中出现 Python3之由通用字符名称“\u202A”表示的字符不能在当前代码页中表示出来
- java和C#的相同之处笔记
- 【298天】每日项目总结系列036（2017.11.30）
- 究竟是谁弄脏了我们的世界
- ImageJ java 调用_用ImageJ快速分析和处理图像
- 【Python学习笔记】复习sql主键外键索引
- 利用uniapp实现手机摇一摇H5项目
- telnet指令输入账户密码后出现“句柄无效”无法连接的问题
- 《区块链+》读书感想
- 包邮送30本Python技术书
- 多旋翼无人机技术发展浅析
- 题解 SP2916 【GSS5 - Can you answer these queries V】
- python k折交叉验证,python中sklearnk折交叉验证
- 安卓性能测试（四）：耗电量（功耗计算）