【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
【h5-egret】如何快速开发一个小游戏的更多相关文章
- DirectX游戏开发——从一个小游戏開始
本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/26364129 写在前面:自 ...
- 使用Laya引擎开发微信小游戏(上)
本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- 使用Laya引擎开发微信小游戏
在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一 ...
- 使用PixiJS做一个小游戏
PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...
- 如何快速开发一个支持高效、高并发的分布式ID生成器
ID生成器是指能产生不重复ID服务的程序,在后台开发过程中,尤其是分布式服务.微服务程序开发过程中,经常会用到,例如,为用户的每个请求产生一个唯一ID.为每个消息产生一个ID等等,ID生成器也是进行无 ...
- Pygame:编写一个小游戏 标签: pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)
大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...
- Python开发转盘小游戏
Python开发转盘小游戏 Python 一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他 ...
- 教你用webgl快速创建一个小世界
收录待用,修改转载已取得腾讯云授权 作者:TAT.vorshen Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成 ...
随机推荐
- While reading xxx.png pngcrush caught libpng error: Not a PNG file..
While reading /XXX/XXX/XXX/img1.png pngcrush caught libpng error: Not a PNG filCould not find file: ...
- 苹果宣布首批HomeKit智能家居设备将在6月上市
凤凰科技讯 北京时间5月15日消息,据<华尔街日报>网络版报道,苹果周四宣布,首批支持其HomeKit平台的智能家居设备将在下月上市.这一消息的发布也驳斥了关于该苹果家庭自动化软件平台将推 ...
- sql Truncate 与 delete的区别
Truncate 语法 TRUNCATE TABLE [ { database_name .[ schema_name ] . | schema_name . } ] table_na ...
- 配置Rip的认证
实验拓扑图 PS:我做实验使用的是DynamipsDUI模拟器,并且加载的是真实的ios镜像(c3745-advipservicesk9-mz.124-3c.bin) 1. 配置路由器R1 2. ...
- iOS开发中的那些小技巧
前言:今天在写代码的过程中遇到一个需要修改系统navigationBar的背景色,我起初用的是barTintColor去修改但是防不住系统点击按钮的时候会有一个渲染高亮的效果,调了好久没有达到自己想要 ...
- 在windows下使用linux的开发环境
windows下做开发确实有些不方便,比如python.ruby什么的都要自己装,不过这还是小事情.有一次想安装node-sass,windows下报错缺少MSBuild什么的,可能需要装一个vs解决 ...
- Windows下安装GnuRadio最简单的方法(没有之一)
作者在Windows XP SP3 32位下亲测通过,理论上Win7也没问题. 1. 如果系统中安装有Python,请先把Python卸载. 2. 下载安装Python(x,y) 2.7.5.0, 下 ...
- CPU卡及NFC供应商
1.苏州市民卡供应商 北京握奇数据/watchdata 2.苏州市民卡手表 苏州连爱/linklove公司 3.NFC供应商 英飞凌/Infelion, NXP,复旦微电子, 4.什么是CPU卡? C ...
- 从malloc中窥探Linux内存分配策略
malloc函数是C/C++中常用内存分配库函数,本篇文章将以Linux平台上的malloc为剖析对象,深入了解分配一块内存的旅程. malloc入门 使用malloc,需要包含头文 ...
- 一款功能强大的iphone购物应用源码
一款功能强大的iphone购物应用源码,这款应用源码比较完整的,并且还支持信用卡支付服务等功能的,基本实现了我们常用的购物应用功能了,实现商品的基本展示功能,还具有完整的用户管理,以及完整的购物流程等 ...