【h5-egret】如何快速开发一个小游戏
1.环境搭建
安装教程传送门：http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=207&terms1_id=20&terms2_id=22
安装包下载：http://www.egret.com/egretengine
一键安装完成。
打开cmd验证是否完成：输入命令：egret，如安装正确的则如下图所示。
如果显示未配置环境变量，找到修复安装。点击修复安装后Egret 会帮你修复被破坏的环境变量和命令行程序。
MAC：
大体的流程与win下无大差别。
2.创建项目
WIN（Mac类似）:
不懂得请戳: http://edn.egret.com/cn/index.php?g=&m=article&a=index&id=211&terms1_id=20&terms2_id=23
1.创建一个我们需要使用的项目的文件夹，比如我在F盘创建一个code文件夹。
2.使用cmd进入到code文件夹目录下，如图所示：
3.命令 egret create 项目名，创建项目。
在生成的项目文件夹中我们会看到四个子文件夹。
3.开发
1.先跑起来。
1.开发工具：WebStorm
2.编译运行：使用webstorm导入刚才创建的项目，点击左下角的Terminal，集成的cmd就可以再webstorm内使用了。
输入：egret build 项目名，就可以编译了。编译完成后，输入：egret startserver 项目名，运行项目。
如果您的目录处于当前项目目录下，可以直接使用egret build命令进行编译，使用run来运行。
然后会自动弹出网页。默认的例子如图，成功运行。
、
2.项目开始之前的准备
1.打开Main.ts文件，将createGameScene中的内容全部删除，并将createGameScene方法后边的所有方法删除。
2.导入自己要使用的资源，放入resource\assets下，然后在resource.json下，参照之前的模式配置一下即可。
3.开始自己的项目开发
现在，我们来做一个超级玛丽撞金币的小游戏。例子传送门：http://iamedison.sinaapp.com/
1.加载图片到场景
官方自带的例子帮忙封装好了一个方法createBitmapByName(name:string)来创建bitmap对象，直接使用会方便省事。
参数是resource.json下配置好的图片名称，直接传入即可。
创建背景来作为例子：
var bg: egret.Bitmap =this.createBitmapByName("bgImage"); this.addChild(sky);
然后我们可以设置他的宽度和高度以及x,y值来调整需要的效果:
this.stage.stageWidth 是屏幕可看见的宽度
var stageW: number = this.stage.stageWidth; var stageH: number = this.stage.stageHeight; sky.width = stageW; sky.height = stageH; sky.x = 0; sky.y = 0;
然后把背景给弄起来，看图：
现在可以其他静态显示的图都创建出来，如图所示：
这样，我们的整个游戏界面就出来了。
2.开启主角mario的点击事件
设置对象可以点击：mario.touchEnabled=true;
注册点击事件：
mario.addEventListener( egret.TouchEvent.TOUCH_TAP, this.startAnimation, this );
参数分别是：事件类型，回调函数，还有回调的对象。事件的类型如图所示：
然后我们要让主角跳跃起来，我这边做一个模拟跳跃的效果，设置y轴来让他跳跃起来。然后我们要用到一个叫做缓动动画的东西：
egret.Tween.removeTweens(this._mario); var tw = egret.Tween.get(this._mario,{loop:false});
缓动的效果也很多：
var easeObj = egret.Ease.sineOut; tw.to({x:stageW / 2 - 20,y:stageH / 2 - 90},20,easeObj).wait(20) .to({x:stageW / 2 - 20,y:stageH / 2 - 70},20,easeObj).wait(20);
上面代码做的就是y轴上移然后再下移（这边的原点是在左上角的），跳跃的效果就出来了。
然后我们可以用类似的原理来处理撞击石头出金币的效果，加上一个石头移动的缓动动画，再加上一个金币出现的缓动动画。
金币移动到点之后触发回调函数，移除金币：tw2.call(this.complete, this,[coin]);
private complete(coin:egret.Bitmap) { this.removeChild(coin); coin = null; }
来个效果图：
3.计时和分数
开启一个定时器（单位毫秒）：
var timer:egret.Timer = new egret.Timer(1000,10);timer.addEventListener(egret.TimerEvent.TIMER,this.timerFunc,this);timer.start();
创建文本：
var colorLabel: egret.TextField = new egret.TextField(); colorLabel.textColor = 0xffffff; colorLabel.textAlign = "center"; colorLabel.text = "0"; colorLabel.size = 20; this.addChild(colorLabel);
然后统计10秒内，点击多少次。效果如图所示：
4.编译发布
编译：在Terminal里面先编译一次，egret build，修改改都需要编译一次，因为他需要把ts转换成js。
发布：命令egret publish，然后就会自动编译了，在对应文件夹就可以找到发布版，如图所示：
将launcher、resource、index.html拷贝到服务器上就OK了。
一个简单的小游戏就这么完成了。
MT.Team
