Egret社区
本帖最后由 A闪 于 2014-8-1 18:26 编辑

感谢 guoshaorui会员热心的为大家编写这套Egret入门教程,经过 guoshaorui 的同意转载这套教程。
该教程原始地址:点击访问
guoshaorui 的微博: http://www.weibo.com/guoshaorui


在上一篇教程我们创建和运行了Hello World,下面我们以这个项目为基础做“深加工”,逐步了解Egret框架的各个组成部分。

创建自己的类:

我们来改写一下HelloEgret项目,融入我们自己的代码。请使用您自己钟爱的开发工具,这里使用WebStorm。打开WebStorm,创建一个项目,目录指向{egret_workspace} ,创建完成后,可以看到类似下面的结构:
workspace.png
项目遵循一个特定的结构,结构简单说明如下:
workspace    // 您的工作目录
  |-- your_project  // 您的项目
        |-- src // 源码放在这里
             |--GameApp.ts // 作为游戏的入口类,实现游戏逻辑
             |--LoadingUI.ts // 实现Loading效果
        |-- resource // 这里放资源,比如图片声音之类的
        |-- libs // egret库文件,也可以放其它的库
        |-- launcher // 入口
              |-- index.html 启动文件
              |-- release.html 使用publish命令后,用这个启动
        |-- bin-debug // 编译后的代码目录
        |-- egretProperties.json //文档类的配置

然后我们创建一个TypeScript类文件,命名为Demo2.ts,然后把下面的代码粘贴进去:
  1. class Demo2 extends egret.DisplayObjectContainer {
  2.     /**构造函数*/
  3.     public constructor() {
  4.         super();
  5.         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
  6.     }
  7.     /**游戏启动后,会自动执行此方法*/
  8.     public startGame():void {
  9.         alert("hello!");
  10.     }
  11. }
复制代码
然后打开egretProperties.json,将"GameApp"修改为"Demo2",这样就可以将我们自己的类作为入口类。
  1. "document_class" : "Demo2"
复制代码
使用命令行编译项目:
  1. 使用命令行编译项目:
复制代码
当然您也可以进入到项目中,再使用命令行编译项目:
  1. cd HelloEgret
  2. egret build
复制代码

浏览器观察最终结果,当然页面上什么都没有,只是咣当弹出一个"hello!"而已,这就证明我们的修改起作用了。
使用纹理和位图:
继续改写代码,显示一个简单的位图。和在Flash中开发类似,首先您需要做的是变量定义,这里我们定义类的成员变量(不了解TypeScript语法?可以先学习N神的这篇教程总结):
  1. /**测试用位图*/
  2. private logo:egret.Bitmap;
复制代码
要使用外部资源,就要引入加载机制。想想我们在Flash里是怎么做的?没错,用Loader或URLLoader。Egret中也提供了Loader的类似实现,即:RES.ResourceLoader。(注意ResourceLoader的命名空间是RES,而不是egret)。但Egret的封装更“上层”一些,您甚至都无需直接接触ResourceLoader这个类,而是直接使用Egret提供的,结合外部配置文件的资源管理和加载方式。

首先打开项目目录下的resource/resource.json文件,这个您可以认为就是资源的配置文件,里面定义了resource目录下资源的名称和对应的url,甚至可以把资源划分成若干个group,这样来实现分批加载。
  1. {
  2. "resources":
  3.     [
  4.         {"name":"bgImage","type":"image","url":"assets/bg.jpg"},
  5.         {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"},
  6.     ],

  7. "groups":
  8.     [
  9.         {"name":"preload","keys":"bgImage,egretIcon"},
  10.     ]
  11. }
复制代码
我们来创建一个"demo2"的group,把egretIcon配置进来:
  1. {"name":"demo2","keys":"egretIcon"},
复制代码
然后回到Demo2中,我们使用RES模块,加载配置文件和对应的一组资源:
  1. //使用资源管理器加载资源
  2. RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
  3. RES.loadConfig("resource/resource.json","resource/");
  4. RES.loadGroup("demo2");
复制代码
loadConfig的第二个参数用于指定资源根目录。 另外务必注意this关键词不可以省略,这是和Flash不一样的地方,在Flash中我们允许省略this关键词。 真实项目中可能有很多资源,我们可以在游戏启动之前先做加载,加载完毕后再进行游戏的初始化。

在onResourceLoadComplete方法里,我们完成位图的创建和显示。代码如下:
  1. var stage = egret.MainContext.instance.stage;//获取Stage引用
  2. this.logo = new egret.Bitmap();//创建位图
  3. this.logo.texture = RES.getRes("egretIcon");//设置纹理
  4. stage.addChild(this.logo);//添加到显示列表
复制代码
完整代码:
  1. class Demo2 extends egret.DisplayObjectContainer {

  2.     /**测试用的位图*/
  3.     private logo:egret.Bitmap;

  4.     public constructor() {
  5.         super();
  6.         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
  7.     }

  8.     /**游戏启动后,会自动执行此方法*/
  9.     public startGame():void {
  10.         this.loadResource();
  11.     }
  12.     /**加载所需资源*/
  13.     private loadResource():void {
  14.         //使用资源管理器加载资源
  15.         RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
  16.         RES.loadConfig("resource/resource.json","resource/");
  17.         RES.loadGroup("demo2");
  18.     }
  19.     /**加载完毕后即可使用*/
  20.     private onResourceLoadComplete(event:RES.ResourceEvent):void {
  21.         this.logo = new egret.Bitmap();//创建位图
  22.         this.logo.texture = RES.getRes("egretIcon");//设置纹理
  23.         this.addChild(this.logo);//添加到显示列表
  24.     }
  25. }
复制代码
编译项目,顺利的话,您就能看到一个Egret的LOGO显示在屏幕上。
简单动画:
然后我们使用Tween来让sky这个位图做一些运动,并将运动实现封装在一个方法内部,代码如下:
  1. private startAnimation():void {
  2.     var tw = egret.Tween.get(this.logo);
  3.     tw.to({x:280,y:0},500).to({x:280,y:300},500).to({x:0,y:300},500).to({x:0,y:0},500);
  4.     tw.call(this.startAnimation, this);
  5. }
复制代码
上面的代码可能初看有些费解,但您只要了解Tween的特性,就容易理解这些代码。Tween的执行是串行的,方法执行后,返回自身,这样4个to相连,其实就是依次执行4次to方法。留意坐标您会发现,这个动画过程就是让位图先运动到右上角,然后到右下角,左下角,最终回到原点。最后又调用了一次call,含义是动画完成后,调用startAnimation方法。是不是明白了,其实就是产生循环调用的结果,动画会一直执行下去。

改写onResourceLoadComplete方法,最后一行增加this.startAnimation()调用,这样当资源加载完毕,对象创建成功后,就开始执行动画。
最后使用命令行编译项目,再复习一下:
  1. egret build HelloEgret
复制代码
打开浏览器观看最终结果,可以看到一个简单的位图动画:
egret_animation.gif
本图效果仅供参考,实际效果是很流畅的,这里为了方便展示,转成了GIF并作了降帧处理
您还可以尝试修改位图的几个属性,来了解主要特性和用法:
  1. this.logo.touchEnabled = true;//可点击
  2. this.logo.width = this.logo.height = 10;//设置尺寸
  3. this.logo.scaleX = this.logo.scaleY = 0.5;//设置缩放
  4. this.logo.rotation = 45;//旋转
  5. this.logo.skewX = 45;//斜切
  6. this.logo.anchorX = 0.5;//设置中心点的位置,实现围绕中心旋转
  7. this.logo.anchorY = 0.5;//同上
复制代码

精灵表单:
说到位图,还有一种很常用的情况就是利用“精灵表单”,即spritesheet,这种方式可以让我们把若干张小图集合到一张大图上,这样对资源加载,控制,减少请求数等方面都很有益处。制作spritesheet的工具也有很多,比如知名度很高的TexturePacker,Flash CS6也增加了对spritesheet的支持,工具上萝卜青菜,各有所爱,您可以选择适合自己的工具。在Egret框架中当然也可以使用spritesheet,让我们来看一下使用方式:
首先拷贝官网实例资源目录下的两个文件:icons.json和icons.png,将这两个文件复制到HelloEgret项目的resource/assets目录下面。
打开icons.json,可以看到对内部图片分割的描述:
  1. {"file":"icons.png","frames":{"activity_1":{"x":158,"y":313,"w":75,"h":75} ...
复制代码
这样我们就可以根据这个描述文件,获取整张图的一个小块作为某个位图的纹理。首先要做的还是配置资源文件:
  1. {
  2. "resources":
  3.     [
  4.         {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"},
  5.         {"name":"icons","type":"sheet","url":"assets/icons.json"}
  6.     ],

  7. "groups":
  8.     [
  9.         {"name":"demo2","keys":"egretIcon,icons"}
  10.     ]
  11. }
复制代码
然后使用"点"语法,根据名称获取SpriteSheet的一个元素:
  1. var bitmap = new egret.Bitmap();
  2. bitmap.texture = RES.getRes("icons.activity_10");//从精灵表中获取某一项
  3. bitmap.x = 100;
  4. bitmap.y = 100;
  5. this.addChild(bitmap);
复制代码
重新编译项目,检查效果吧。

另外,如果觉得先加载,后使用的代码显得繁琐,可以使用:RES.getResAsync()。这个方法允许您异步加载一个资源,然后在回调函数中处理。示意:
  1. RES.getResAsync("icons",this.iconsLoadedComplete,this)
复制代码

已经有第三方开发者提供了支持egret格式的精灵表单制作工具,点击这里下载:
九宫格:
在处理UI的时候,您应该用过九宫格吧?比如做一个有圆角按钮,我们只提供一种背景图片,但按钮在不同的场景下会有不同的尺寸,假如我们不加优化,那可能会得到下面的结果:
scale9_1.png
而九宫格则可以解决这个问题。九宫格并不神秘,它是使用网格将图像划分为9个区域,如下图所示,我用数字1-9标出了对应的区域,其中标红色的区域是不需要缩放的,而标蓝色的区域则是需要缩放的区域。
scale9_2.png
在Egret中,我们只需要用egret.Rectangle定义出蓝色区域的位置即可,示意代码:
  1. var texture = RES.getRes("button_png");
  2. var scale9Grid = new egret.Rectangle(7, 7, 46, 46);
  3. var scaleBitmap = new egret.Bitmap(texture);
  4. scaleBitmap.scale9Grid = scale9Grid;
复制代码
这样妈妈再也不用担心我的图片失真了

分享到 :
4 人收藏


------------------------------

45 个回复

倒序浏览
nickro  登堂入室 | 2014-9-30 16:19:52
指出个错误,资源JSON文件里最后的大括号是不需要逗号的

点评

我是初学。学习这个显示 Bitmap 例子时,位图不能显示。甚至复制帖子的代码页显示不了。后来删掉这个逗号就可以显示了。  发表于 2015-5-18 01:59
ztxxxx  初学乍练 | 2014-8-6 11:40:59
本帖最后由 ztxxxx 于 2014-8-6 11:43 编辑

为什么我的mac编译出来没有logo图片,但是自己draw一个色块,舞台就能显示?我同事的windows尝试了,他的竟然可以编译出来logo图片。求指教!
恋爱物鱼  初学乍练 | 2014-8-19 23:01:33
你好,我是新手,对于教程中精灵表单这一部分,我不知道该怎么去写,请问可以告诉我教程中的方法在代码中是如何体现的吗?谢谢啦
A闪  社区管理员 | 2014-8-20 10:24:42
恋爱物鱼 发表于 2014-8-19 23:01
你好,我是新手,对于教程中精灵表单这一部分,我不知道该怎么去写,请问可以告诉我教程中的方法在代码中是 ...

http://docs.egret-labs.org/post/manual/bitmap/textures.html  可以看这篇文档
NNGG  初学乍练 | 2014-8-20 12:01:11
好贴,学习了~
恋爱物鱼  初学乍练 | 2014-8-20 12:36:02
本帖最后由 恋爱物鱼 于 2014-8-20 12:52 编辑

你好,我看了你给我的链接,可是我的位图还是无法正常显示,可以帮我看一下我的代码写的有问题吗?src/Demo1.ts

  1. class Demo1 extends egret.DisplayObjectContainer {

  2.     /**测试用的位图*/
  3.     private logo:egret.Bitmap;

  4.     public constructor() {
  5.         super();
  6.         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
  7.     }

  8.     /**游戏启动后,会自动执行此方法*/
  9.     public startGame():void {
  10.         alert("hello!");
  11.         this.loadResource();
  12.     }
  13.     /**加载所需资源*/
  14.     private loadResource():void {
  15.         //使用资源管理器加载资源
  16.         RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
  17.         RES.loadConfig("resource/resource.json","resource/");
  18.         RES.loadGroup("demo1");
  19.     }
  20.     /**加载完毕后即可使用*/
  21.     private onResourceLoadComplete(event:RES.ResourceEvent):void {
  22.         this.logo = new egret.Bitmap();//创建位图
  23.         this.logo.texture = RES.getRes("egretIcon");//设置纹理
  24.         this.addChild(this.logo);//添加到显示列表
  25.         this.startAnimation();
  26.     }

  27.     /**增加动画*/
  28.     private startAnimation():void {
  29.         var tw = egret.Tween.get(this.logo);
  30.         tw.to({x:280,y:0},500).to({x:280,y:300},500).to({x:0,y:300},500).to({x:0,y:0},500);
  31.         tw.call(this.startAnimation, this);
  32.         this.logo.touchEnabled = true;//可点击
  33.         this.logo.width = this.logo.height = 200;//设置尺寸
  34.         this.logo.scaleX = this.logo.scaleY = 0.5;//设置缩放
  35.         this.logo.rotation = 45;//旋转
  36.         this.logo.skewX = 45;//斜切
  37.         this.logo.anchorX = 0.5;//设置中心点的位置,实现围绕中心旋转
  38.         this.logo.anchorY = 0.5;//同上
  39.     }
  40.     /**精灵表单*/
  41.     private onGroupComp(){
  42.         var bitmap = new egret.Bitmap();
  43.         bitmap.texture = RES.getRes("icons.activity_10");//从精灵表中获取某一项
  44.         bitmap.x = 100;
  45.         bitmap.y = 100;
  46.         this.addChild(bitmap);

  47.     }
  48. }
复制代码
/config/resource.json
  1. {
  2. "resources":
  3.         [
  4.         {"name":"bgImage","type":"image","url":"assets/bg.jpg"},
  5.         {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"},
  6.         {"name":"description","type":"json","url":"config/description.json"},
  7.         {"name":"icons","type":"sheet","url":"assets/icons.json"}
  8.         ],

  9. "groups":
  10.         [
  11.         {"name":"preload","keys":"bgImage,egretIcon"},
  12.         {"name":"demo1","keys":"egretIcon,icons"}
  13.         ]
  14. }
复制代码

resource/assets/icons.json与resource/assets/icons.png都已经存在,编译后本地运行,没有位图出现,请问我的问题出在哪里呢?谢谢啦egretProperties.json文件
  1. {
  2.     "document_class": "Demo1",
  3.     "modules": [
  4.         {
  5.             "name": "core"
  6.         }
  7.     ],
  8.     "native": {
  9.         "path_ignore": [
  10.             "libs"
  11.         ]
  12.     },
  13.     "egret_version":"1.0.4"
  14. }
复制代码





恋爱物鱼  初学乍练 | 2014-8-20 13:14:35
A闪 发表于 2014-8-20 10:24
http://docs.egret-labs.org/post/manual/bitmap/textures.html  可以看这篇文档

你好,我在github上找到了源码,总之谢谢你了,给你添麻烦了!
风云·  初学乍练 | 2014-8-30 02:25:16
课上都有讲过
hyjhappy  登堂入室 | 2014-11-13 11:40:28
每天都学习一下!~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部