Egret 2D(9)之位图纹理

创建图片对象

var batman:egret.Bitmap =new egret.Bitmap();

此时得到一个位图对象，将它添加到显示列表中，还不会看到任何内容。因为该位图对象仅仅是一个“空对象”，还没有为它指定任何的纹理。

指定纹理

//指定纹理
img.texture = RES.getRes("图片ID");

创建图片对象后指定纹理，然后再添加到显示列表后才能在界面上看到图片。

还有一种加载图片写法:

var batman:egret.Bitmap =new egret.Bitmap( RES.getRes('bg_jpg'));
batman.width=100;
batman.height=100;
this.addChild( batman );

资源配置

上面一行代码为位图添加纹理，它有一个输入参数：”图片ID”。

所有加载的资源都会有一个唯一ID，这个ID绝大部分取自图片文件名称，也有一些资源会定义一些其他的ID。这些图片的组织方式都是由一个json文件描述的。

json文件是在项目根目录resource下的default.res.json这个文件

资源的加载

class BitmapTest extends egret.DisplayObjectContainer{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
   
    private onAddToStage(event:egret.Event) {
        //加载资源
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
        RES.loadGroup("preload");
    }
    private onGroupComplete()
    {
        //加载位图
        var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("bgImage");
        this.addChild(img);
    }
}

九宫格

通常情况下为了游戏画面中的美观程度，会使用一些圆角矩形或者边缘不规则的矩形。在游戏中，经常会对这些图形进行拉伸，那么拉伸后的图形会发生变形。为了让边缘不会因为拉伸而变形，可以使用“九宫格”。下图一个图片拉升后变形了，怎么办？

上图中，用四条虚线将圆角矩形分割为9个区域，其中四个区域(图中区域编号1，3，7，9)包含了圆角矩形的四个圆角。拉伸图像时，1，3，7，9区域不拉伸，2，8区域仅横向拉伸，4，6区域仅纵向拉伸，5区域横向纵向都拉伸。

设置九宫格的属性是 Bitmap 类中的 scale9Grid 属性。

下面是一个完整的示例代码，这个示例中，放置两个 Bitmap 对象，两个 Bitmap 对象都将 width 设置为原来的2倍。其中一个添加九宫格数据，另外一个不添加九宫格数据。

var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.width *= 2;
        this.addChild(img);
        var img2:egret.Bitmap = new egret.Bitmap();
        img2.texture = RES.getRes("box");
        var rect:egret.Rectangle = new egret.Rectangle(30,31,40,41);
        img2.scale9Grid =rect;
        img2.width *= 2;
        img2.y = 150;
        this.addChild(img2);

上面的代码中，创建了一个类型为 Rectangle 的对象。该对象用来存放九宫格数据。初始化时填入了四个参数。

30：区域1 的宽度值。
31：区域1 的高度值
40：区域2 的宽度值
41：区域4 的高度值

设置九宫宽高的时候尽量使用整数，否则有些浏览器可能会出现“黑线”。

错误处理：

在正常情况下，九宫格区域的宽度和高度要小于图片的宽度和高度，位置在图片内部。如果设置的九宫格位置或者宽度和高度异常的情况下会报如下错误：

Warning #1018: 9宫格设置错误

具体来讲正确的九宫格设置为:

x + w < 图片宽度;
y + h < 图片高度;

其中x和y是设置九宫格的位置，w和h为设置九宫格的宽和高。其中 x,y,w,h 应大于等于 0。

纹理的填充方式

位图的填充方式有两种，

拉伸图像以填充区域
重复图像以填充区域

拉伸图像填充：

拉伸填充就是设置图片的宽高

 var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.width *= 2;
        img.height *= 3;
        this.addChild(img);

重复图像填充：

img.fillMode = egret.BitmapFillMode.REPEAT

 var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.fillMode = egret.BitmapFillMode.REPEAT;
        img.width *= 2;
        img.height *= 3;
        this.addChild(img);

纹理集的使用

http://developer.egret.com/cn/github/egret-docs/Engine2D/bitmapTexture/useTexture/index.html

http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/manual/index.html

播放帧动画:

http://developer.egret.com/cn/github/egret-docs/extension/game/movieClip/index.html

http://developer.egret.com/cn/apidoc/index/name/egret.MovieClip

截屏功能

http://developer.egret.com/cn/github/egret-docs/Engine2D/bitmapTexture/screenshots/index.html