好久没更新博客了，以前很多都不会，所以常常写博客总结，倒是现在有点点经验了就懒了。在过去的几个月里，在canvas游戏框架方面，撸过了CreateJS，玩得了Egret，又学过PIXI.js。在移动前端方面，尤其是小游戏开始有一点点小经验了。但只是小经验，为什么说是小经验？
　　首先，深度不足，虽然用得最熟最多的白鹭，可是习惯了JavaScript，对TypeScript的OOP编程掌握得还不够；其次，对Egret等游戏框架了解的广度还不够，还有相当部分用法没用到。虽然能够应付朋友圈里传播的大多数的H5小游戏，可是还有很大的进步空间。尤其是欠缺重度游戏以及性能方面的处理。所以，不论是一般的Web前端方面，还是H5游戏方面，我都要继续努力学习了。不足错漏之处，恳请大家多多指点。
什么是Egret？
　　Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。
　　关于这个引擎和工具方面的介绍，我就不多说了，以下是白鹭的下载地址，咋们直接从安装完成后讲起。
　　Egret官网：
准备阶段：
　　首先，安装完egret engine后在桌面打开这个logo，双击后你能看到以下引擎界面：
　　如果你已经下载最新版，那就直接使用最新版本就好，假如从别的地方拷到了不同版本的项目，那就必须打开这个界面再安装不同的引擎版本，以打开其他人不同版本的代码。
　　接下来点击工具按钮，从界面上我们可以看到很多工具，但是做H5小游戏常用的只有Egret Wing、Texture Merger等，部分人可能需要做重游或者native app的，可能需要其他的工具，但这里不作介绍。没用过哈哈哈~~
　　继续选择下载，由于我这里都已经下载安装好了，所以界面上显示已安装，这里比较简单就不详说了。
使用阶段：
　　在以上工具都准备后，在engine界面或者桌面图标点击打开Egret Wing，会看到以下画面：
　　Wing可以理解为专门使用TypeScript开发白鹭项目的IDE了，以后我们使用egret过程中，会一直跟这个界面打交道。
　　好，现在我们先创建一个项目，我先建一个游戏项目，置于其他界面有什么区别呢，可以自行新建试试。EUI是主要做交互界面的，空项目是没有配置好相关需要的代码以及功能模块的，例如做缓动效果的Tween和加载的RES等等，所以为了方便，我们一般直接新建游戏项目。
然后进入下一步：
　　在这里，你需要配置游戏界面的大小，视频模式以及旋转设置。尺寸直接是设计图宽高，而视口我们一般会选择showALL（显示全部内容，不变形但会在留白），
　　网上也有一部分人开发的时候用fixedWidth（适配宽度，高度不足时会隐藏底下部分，适用于只有一些动画在上方，且下方是无关重要的背景时）。
　　还有一些人（例如我有时候）会用到百分百满屏的exacFit，设计师弄一个适中的尺寸，然后按照这种模式铺满全屏，有少数很宽或很长的屏幕会有一点变形，但是不影响游戏体验与界面。但是不好的地方是PC或pad打开会变形。
选择完之后，我们点击完成。打开新建的项目目录：
　　src是TypeScript源码目录，bin-debug是调试环境编译出来的js，libs是文件包的引用目录，template主要是app用到的runtime；
　　resource是我们项目中的资源路径，一般我们把图片音频等素材放置asset目录下，json等配置文件放置config目录下，default.res.json是我们用于加载资源的json配置文件，一般不修改名字，后面会讲到怎么使用。
　　egretProperties是我们这个项目的一些配置记录信息，一般我们不需要动它。而index.html就是我们游戏的主界面文件。
　　打开index.html
　　我们可以看到游戏界面所需的js，都自动生成并引用好了。这一部分我们不需要也不能手动去修改。
　　但是你可以在style标签中修改背景色或者在div属性值中修改配置参数，如渲染的帧率（一般我们设成60，如果是计算量大的，我们再适当降低），在这里我们可以重新修改刚刚新建游戏时的适配模式、宽高、旋转等；
　　将data-show-fps和data-show-log设成true，我们就可以看到游戏运行的实时帧率了。
　　帧率可以检测游戏运行的流畅度（性能），渲染数量越多，同时计算量越大，性能就越差，掉帧就越多。所以帧率越高，则表示性能越好，流畅度高。
　　另外，在底部，我们还能看到一个egret.runEgret({})的运行方法，在这里，你可以修改egret的渲染模式，默认是"webgl"。但是如果你需要用到跨域图片资源或者有大量的图片和文字，你最好还是使用"canvas"模式，避免跨域报错和性能问题。
&　　明天更新第二篇，敬请期待。
&　　转载请，谢谢。
阅读(...) 评论()egret微信小游戏转发与分享
做微信小游戏的转发与分享，会牵扯到平台之间的数据调用，那个就要用到egret wing里的Platform.ts文件（平台数据接口）
* 平台数据接口。
* 由于每款游戏通常需要发布到多个平台上，所以提取出一个统一的接口用于开发者获取平台数据信息
* 推荐开发者通过这种方式封装平台逻辑，以保证整体结构的稳定
* 由于不同平台的接口形式各有不同，白鹭推荐开发者将所有接口封装为基于 Promise 的异步形式
参考微信小游戏开发API：
点击右上角按钮，会弹出菜单，菜单中的“转发”选项默认不展示。通过
可动态显示、隐藏这个选项。
首先在Platform.ts声明转发方法,并在DebugPlatform中异步实现，这里只是声明这个方法，根据自己的具体要求在不同的类中调用此方法，具体实现要在微信开发者Platfor.js文件中，咱们一一介绍。
声明与调用转发方法:(这里只是一个空架子没有实体意义)
declare interface Platform {
getUserInfo(): Promise&any&;
login(): Promise&any&
//转发菜单
showShareMenu(): Promise&any&;
class DebugPlatform implements Platform {
async getUserInfo() {
return { nickName: "username" }
async login() {
//被动分享
async showShareMenu() {
在Main.ts中调用
private async runGame() {
//转发分享
await platform.showShareMenu();
发布微信小游戏，在wing终端输入egret run --target wxgame
打开微信开发者工具里的Platform.js文件,你会发现此文件夹和wing中的Platform.ts文件里的方法一一对应，现在只需要实现刚才声明的方法就可以了
showShareMenu() {
return new Promise((resolve, reject)=&{
wx.showShareMenu({
withShareTicket:true
wx.onShareAppMessage(function(){
title: '我是被动转发转发',
imageUrl: "resource/assets/test.jpg"
点击右上角按钮，会弹出菜单，点击菜单中的“转发”就可以转发啦。大功告成。
与转发类似，你只需要在wing调用的时候给一个按钮事件去调用这个方法
//主动分享按钮事件
private share() {
console.log("分享");
platform.shareAppMessage();
Platform.ts中
//主动发送,按钮触发
shareAppMessage() {
return new Promise((resolve,reject)=&{
wx.shareAppMessage({
title:"我要转发",
imageUrl: "http://pic.qiantucdn.com/58pic/22/06/55/57b2d98e109c6_1024.jpg!/fw/1024/watermark/url/L2ltYWdlcy93YXRlcm1hcmsvZGF0dS5wbmc=/repeat/true/crop/0x",
大功告成，转发和分享这样就做好了。
每周学一点 egret（9）：分享
微信小游戏小程序分享没反应onShareAppMessage回调函数
微信小游戏教程（三） 新手教程
egret exml在微信小游戏这块儿的坑
白鹭引擎的微信分享接口
Egret -- Egret 微信小游戏分享（wx.shareAppMessage）
Egret -- Egret 微信小游戏API调用
用cocos creator做微信小游戏截屏
【egret】 egret游戏中添加“长按识别二维码”
深入理解使用白鹭引擎开发微信小游戏的构建机制
没有更多推荐了，　　在上一篇文章中着重介绍了H5小游戏开发的起步阶段，如Wing面板的使用，素材的处理，类的说明等等，那么今天主要是涉及到场景的创建，loading的修改等等的代码编写。
　　对于这一节，我在讲解的过程中会使用到众多的类或对象，对于它们的具体用法，建议查看白鹭官方文档。
　　文档地址：
修改Loading
　　上一节我们讲到即将创建场景createGameScene()的时候就结束了，这一节在我们正常创建场景之前，我们先修改一下loading页的效果。毕竟它是最先进入我们视野的页面。
　　如果你还有印象，应该记得我提过LoadingUI的实例化的地方，并添加到stage。
　　为了修改loading效果，我们先打开LoadingUI.ts，我们可以看到在loading实例化之后，会执行createView()方法。
　　为了将文本居中，将textField的宽度改成舞台的宽度640，利用center实现水平居中。同时将y轴调到适当的位置500。
　　因为RES.ResourceEvent事件只能返回当前已加载数和加载总数两个参数，所以为了把加载进度更加直观一点，我们一般写成百分比的形式。
　　设置进度的代码如下：
public setProgress(current, total):void {
var num = Math.floor(current / total * 100);
this.textField.text = num.toString() + " %";
创建游戏场景
　　保存loadingUI.ts的修改后，接下来我们打开Main.ts，并进入到createGameScene()方法。
　　为了方便后面的调用，我先创建一个初始化数据的方法。
* 创建游戏场景
* Create a game scene
private createGameScene():void {
this.init();
* 初始化游戏数据和场景
* initial game data
private SW://舞台宽
private SH://舞台高
private SCORE:number = 0;//分数
private init():void{
this.SW = this.stage.stageW
this.SH = this.stage.stageH
//利用白鹭预设的创建bitmap方法创建背景图片
var bg = this.createBitmapByName("bg_game_jpg");
//并首先添加到舞台底部
this.stage.addChild(bg);
　　执行初始化方法后，保存并刷新浏览器就可以看到以下效果啦。一个基本的场景就出来了。
　　接下来，我们将头部的素材的提取出来，另建一个方法用于创建数据栏。
* 创建分数栏
* create score container
private TF_socre: egret.TextF
private createScore(): void {
//为方便管理与设置，把分数栏独立于一个容器内
var cont = new egret.DisplayObjectContainer(),
bg = this.createBitmapByName("bg_top_png"),
title = this.createBitmapByName("txt_score_png"),
txt = new egret.TextField();
//添加的顺序影响层级
cont.addChild(bg);
cont.addChild(title);
cont.addChild(txt);
//整个分数容器在设计图中的位置
cont.x = 40;
cont.y = 22;
//标题和分数在分数栏内部的位置
title.x = 36;
title.y = 54;
txt.x = 100;
txt.y = 51;
//限制文本的区域
txt.width = 110;
txt.height = 32;
//定义颜色、水平与垂直居中、字体大小，初始字符、加粗等
txt.textColor = 0xffdb15;
txt.textAlign = "center";
txt.verticalAlign = "middle";
txt.size = 24;
txt.text = "0";
txt.bold = true;
//将分数TextField实例引用到Main类下的内部属性值，方便其他方法调用并修改分数值
this.TF_socre =
this.stage.addChild(cont);
　　大同小异，创建时间栏的方法如下。
* 创建时间栏
* create time container
private TF_time: egret.TextF
private createTime(): void {
var cont = new egret.DisplayObjectContainer(),
bg = this.createBitmapByName("bg_top_png"),
title = this.createBitmapByName("txt_time_png"),
txt = new egret.TextField();
cont.addChild(bg);
cont.addChild(title);
cont.addChild(txt);
cont.x = 352;
cont.y = 22;
title.x = 36;
title.y = 54;
txt.x = 100;
txt.y = 51;
txt.width = 110;
txt.height = 32;
txt.textColor = 0xffdb15;
txt.textAlign = "center";
txt.verticalAlign = "middle";
txt.size = 24;
txt.text = "0 S";
txt.bold = true;
this.TF_time =
this.stage.addChild(cont);
创建时间栏方法
　　创建以上方法后，并在init()方法内通过this.createScore()和this.createTime()调用，刷新浏览器可看到以下变化。
&　　PS：时间关系，原本本文打算写更多的，但是为了保证延续性，先发这部分了。
　　接下来将继续更新第四篇，敬请期待。
&　　转载请，谢谢。
阅读(...) 评论()}