【h5-egret】如何快速开发一个小游戏

1.环境搭建

安装教程传送门: 传送门

安装包下载:传送门

一键安装完成

打开cmd验证是否完成:输入命令:egret,如安装正确的则如下图所示

如果显示未配置环境变量,找到修复安装。点击修复安装后Egret 会帮你修复被破坏的环境变量和命令行程序

1.png

MAC:

大体的流程与win下无大差别

2.创建项目

WIN(Mac类似):

不懂得请戳: 传送门

1.创建一个我们需要使用的项目的文件夹,比如我在F盘创建一个code文件夹

2.使用cmd进入到code文件夹目录下,如图所示

3.命令 egret create 项目名,创建项目

2.png

在生成的项目文件夹中我们会看到四个子文件夹

3.png

3.开发

1.先跑起来

1.开发工具:WebStorm

2.编译运行:使用webstorm导入刚才创建的项目,点击左下角的Terminal,集成的cmd就可以再webstorm内使用了。

输入:egret build 项目名,就可以编译了。编译完成后,输入:egret startserver 项目名,运行项目。

如果您的目录处于当前项目目录下,可以直接使用egret build命令进行编译,使用run来运行。

然后会自动弹出网页。默认的例子如图,成功运行。

4.png

2.项目开始之前的准备

1.打开Main.ts文件,将createGameScene中的内容全部删除,并将createGameScene方法后边的所有方法删除

2.导入自己要使用的资源,放入resource\assets下,然后在resource.json下,参照之前的模式配置一下即可

3.开始自己的项目开发

现在,我们来做一个超级玛丽撞金币的小游戏: 例子传送门

加载图片到场景:

官方自带的例子帮忙封装好了一个方法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;

然后把背景给弄起来,看图:

5.png

现在可以其他静态显示的图都创建出来,如图所示:

6.png

这样,我们的整个游戏界面就出来了

2.开启主角mario的点击事件

设置对象可以点击:mario.touchEnabled=true;

注册点击事件:

mario.addEventListener( egret.TouchEvent.TOUCH_TAP, this.startAnimation, this );

参数分别是:事件类型,回调函数,还有回调的对象。事件的类型如图所示:

7.png

然后我们要让主角跳跃起来,我这边做一个模拟跳跃的效果,设置y轴来让他跳跃起来。然后我们要用到一个叫做缓动动画的东西:

8.png
egret.Tween.removeTweens(this._mario);
var tw = egret.Tween.get(this._mario,{loop:false});

缓动的效果也很多:

9.png
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;
}

来个效果图:

10.png

3.计时和分数

开启一个定时器(单位毫秒):

11.png
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秒内,点击多少次。效果如图所示:

12.png
13.png

4.编译发布

编译:在Terminal里面先编译一次,egret build,修改改都需要编译一次,因为他需要把ts转换成js。

发布:命令egret publish,然后就会自动编译了,在对应文件夹就可以找到发布版,如图所示:

14.png

将launcher、resource、index.html拷贝到服务器上就OK了。

一个简单的小游戏就这么完成了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,272评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,140评论 25 709
  • 大家好我叫王云汉,今天上一年级了,在一年级一班,我认识了好多的小朋友,还有两位老师,今天在教室里玩了好多的游戏,我很高兴
    王云汉1阅读 1,121评论 0 0
  • 清明节,默默的念了遍逝去的身边的亲人们,如果真有天堂,那愿天堂的你们快乐,如果真有保佑,那希望在你们力所能及的...
    蓝莫潇骁阅读 4,077评论 0 7
  • 如果你不给他有伤害你的机会,那他又怎么会有机会爱你呢?一旦你给了他爱你的机会,那同时也赋予了他伤害你的能力。聪明如...
    我是那个听故事的人阅读 1,333评论 0 0

友情链接更多精彩内容