位图纹理位图的使用需要纹理的支持,在Egret中,默认隐藏了纹理的操作,所有操作均针对于显示对象进行。但位图的显示依然基于纹理。在显示一张图片时, 需要使用 Bitmap 类,这是egret中的图片类,而纹理则来自于所加载的资源图片。通常情况下,用单张图片作为纹理,游戏中也会大量使用纹理集来进行渲染。

1.创建​使用 Bitmap 类创建图片对象,代码如下:

img: egret.Bitmap = new egret.Bitmap();此时得到一个位图对象,将它添加到显示列表中,还不会看到任何内容。因为该位图对象仅仅是一个“空对象”,还没有为它指定任何的纹理。

给该位图对象指定一个纹理,在画面中显示出渲染的文件。

指定纹理的方式是设置 Bitmap 中的 texture 属性。

img.texture = RES.getRes("图片ID");2.资源配置​上面一行代码为位图添加纹理,它有一个输入参数:"图片ID"。

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

下面是一个标准的资源配置文件:

{ "resources": [ {"name":"bgImage","type":"image","url":"assets/bg.jpg"}, {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"}, {"name":"description","type":"json","url":"config/description.json"} ], "groups": [ {"name":"preload","keys":"bgImage,egretIcon"} ]}在一个json资源配置文件中,应该包含两大部分,一个是组,另一个是资源。

2.1.资源​资源包含在“resources”中,游戏中所有使用到的资源都应包含在此。每一个资源拥有三个属性。

name:对应资源的唯一ID编号type:资源类型url:当前资源的路径2.2.组​组包含在“groups”中,组的概念是将不同的资源分类,当逻辑启动加载后,可以选择以组为单位进行加载。

3.示例​示例代码如下:

class BitmapTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private async onAddToStage(event: egret.Event) { RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this); await RES.loadConfig("resource/default.res.json", "resource/"); await RES.loadGroup("preload"); } private onGroupComplete() { const img: egret.Bitmap = new egret.Bitmap(); img.texture = RES.getRes("bgImage"); this.addChild(img); }}编译运行后,效果如下图:

3.其他方式创建位图​3.1 您还可以通过其他方式创建位图,例如 base64​let str64 = "iVBORw0KGgoAAAANSUhEUgAAAHM...";egret.BitmapData.create("base64", str64, (bitmapData) => { let texture = new egret.Texture(); texture.bitmapData = bitmapData; let bmp = new egret.Bitmap(texture); this.addChild(bmp);});示例demo