Bitmap texture of Egret 2D(9)

Create a picture object

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

At this point you get a bitmap object, add it to the display list, and you won't see anything yet. Because the bitmap object is just a "null object", no texture has been assigned to it yet.

assign texture

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

After creating the picture object, assign the texture, and then add it to the display list to see the picture on the interface.

There is also a way to load images:

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

Resource configuration

The above line of code adds a texture to the bitmap, which has one input parameter: "image ID".

All loaded resources will have a unique ID, which is mostly taken from the image file name, and some resources will define some other IDs. The organization of these images is described by a json file.

The json file is the default.res.json file in the project root directory resource

Loading of resources

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);
    }
}

Jiugongge

Usually, some rounded rectangles or rectangles with irregular edges are used for the aesthetics of the game screen. In games, these graphics are often stretched, and the stretched graphics will be deformed. In order to keep the edges from being deformed by stretching, you can use "nine squares". One of the pictures below is deformed after being pulled up, what should I do?

In the above figure, the rounded rectangle is divided into 9 areas by four dashed lines, of which four areas (area numbers 1, 3, 7, and 9 in the figure) contain the four rounded corners of the rounded rectangle. When stretching the image, areas 1, 3, 7, and 9 are not stretched, areas 2 and 8 are only stretched horizontally, areas 4 and 6 are only stretched vertically, and areas 5 are stretched both horizontally and vertically.

The property that sets the nine-square grid is the scale9Grid property in the Bitmap class .

The following is a complete sample code. In this example, two Bitmap objects are placed, and the width of both Bitmap objects is set to 2 times the original. One of them adds Jiugongge data, and the other does not add Jiugongge data.

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);

In the above code, an object of type Rectangle is created. This object is used to store Jiugongge data. Four parameters are filled in during initialization.

30: The width value of area 1.
31: Height value of area 1
40: Width value of area 2
41: Height value of area 4

When setting the width and height of the nine palaces, try to use integers, otherwise some browsers may appear "black lines".

Error handling:

Under normal circumstances, the width and height of the nine-square grid area are smaller than the width and height of the picture, and the position is inside the picture. If the set nine-square grid position or width and height are abnormal, the following error will be reported:

Warning #1018: The 9-grid setting is wrong

Specifically, the correct nine-square grid setting is:

x + w < image width;
y + h < image height;

Among them, x and y are the positions of the nine-square grid, and w and h are the width and height of the nine-square grid. Where x, y, w, h should be greater than or equal to 0.

how the texture is filled

There are two ways to fill a bitmap,

Stretch image to fill area
Repeat image to fill area

Stretch image fill:

Stretch padding is to set the width and height of the image

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

Repeat image fill:

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);

Use of texture sets

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

Play frame animation:

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

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

Screenshot function

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