圖集Atlas是游戲開(kāi)發(fā)中常用的一種美術(shù)資源，通過(guò)工具將多張圖片合并成一張大圖，并通過(guò).atlas或.json等格式的文件存放原始圖片資源信息。

游戲中使用多張圖片合成的圖集資源作為美術(shù)資源的優(yōu)勢(shì)

• 優(yōu)化內(nèi)存：合成圖集時(shí)會(huì)去除每張圖片圖片周圍的空白區(qū)域，加上可以在整體上實(shí)施優(yōu)化，合成圖集后可減少游戲包體和內(nèi)存占用。
• 減少CPU運(yùn)算：多個(gè)Sprite精靈渲染的是來(lái)自同一張圖集圖片時(shí)，這些Sprite可以使用同一個(gè)渲染批次來(lái)處理，大大減少了CPU的運(yùn)算時(shí)間，提高運(yùn)行效率。

圖集格式

LayaAir IDE支持對(duì)PNG和JPG兩種資源格式打包為圖集，圖集打包的原始資源推薦使用PNG，因?yàn)镴PG的體積會(huì)較大。需要注意的是，PNG原始資源的位深度不能超過(guò)32，否則打包出來(lái)的圖集會(huì)出現(xiàn)花屏。另外，PNG與JPG資源不能是其它格式資源重命名所產(chǎn)生的PNG和JPG格式。

Laya圖集文件區(qū)別

.atlas和.json文件都是PNG圖集的配置信息文件，最早期LayaAir引擎默認(rèn)使用JSON作為圖集配置信息的格式，后來(lái)為了優(yōu)化引擎的使用，默認(rèn)修改為了.atlas，為了兼容舊版本，生成圖集的時(shí)候可選擇兩種格式。使用時(shí)這兩種后綴的區(qū)別在于：

.atlas是Laya特有的圖集格式，僅用于圖集，在加載.atlas時(shí)無(wú)需填寫(xiě)類型和加載普通單圖方式一樣，更為方方便，是推薦的圖集加載方式。

Laya.loader.load(
  "./res/atlas/ui.atlas", 
  Laya.Handler.create(this, onLoaded)
);

.json是一種兼容第三方的圖集配置方式，由于.json文件應(yīng)用廣泛，不僅可以用于圖集，所以為了是被是否為圖集配置信息，在加載.json文件的圖集配置時(shí)，需要填寫(xiě)類型以進(jìn)行區(qū)分。

Laya.loader.load(
  [{url:"./res/atlas/ui.json", type:Laya.Loader.ATLAS}],
  Laya.Handler.create(this, this.onLoaded)
);

圖集打包

LayaAir IDE中打包圖集的方式有兩種，分別是使用LayaAir IDE的圖集打包工具和資源管理器內(nèi)自動(dòng)打包圖集。

手動(dòng)打包圖集

LayaAir IDE中的【圖集打包工具】會(huì)將每個(gè)目錄打包為一個(gè)圖集，特效類動(dòng)畫(huà)因?yàn)槊總€(gè)特效幀數(shù)量不多可以將多個(gè)特效組合到一張圖集資源并存放在一個(gè)目錄內(nèi)。通過(guò)LayaAir IDE對(duì)圖集打包后，會(huì)生成三個(gè)文件分別是.atlas、.json、.png文件。動(dòng)畫(huà)類Animation通過(guò)加載.atlas或.json文件獲取圖像資源，建議使用.atlas文件，因?yàn)樵谑褂脮r(shí)無(wú)需加入類型設(shè)置。對(duì)于動(dòng)畫(huà)圖集資源需要注意的是，針對(duì)幀數(shù)較多的動(dòng)畫(huà)建議一套圖片一個(gè)資源在命名上根據(jù)動(dòng)作名稱_幀序號(hào)的方式命名。

【圖集打包工具】位于設(shè)計(jì)模式 > 菜單 > 工具 > 圖集打包。

圖集打包工具

如何手動(dòng)打包圖集呢？

存放在資源管理器目錄laya/assets目錄下的所有圖片資源，在使用快捷鍵F12或Ctrl+F12導(dǎo)出時(shí)，會(huì)自動(dòng)根據(jù)當(dāng)前目錄名打包為圖集。

進(jìn)入設(shè)計(jì)模式，按F12導(dǎo)出，此時(shí)IDE會(huì)將資源Assets（對(duì)應(yīng)laya/assets目錄）中的圖片打包成圖集，打包后的圖集會(huì)保存到發(fā)布目錄的bin/res/atlas目錄下，圖集會(huì)同時(shí)生成.png和.atlas（JSON）文件。

當(dāng)用戶手動(dòng)刪除了圖集文件但并未刪除原始資源文件時(shí)，如果原始資源文件沒(méi)有發(fā)生改變，直接使用F12是無(wú)法重新導(dǎo)出圖集文件的。此時(shí)，可以通過(guò)Ctrl+F12清理并導(dǎo)出?；蛘咧苯訉D集文件刪除后再使用F12導(dǎo)出，即可正常導(dǎo)出圖集。

如何修改默認(rèn)的圖集打包后的導(dǎo)出位置呢？

如果想要修改圖集默認(rèn)的導(dǎo)出目錄，可以在【設(shè)計(jì)模式】下按快捷鍵F9進(jìn)入【項(xiàng)目設(shè)置】，在【項(xiàng)目設(shè)置】面板的【圖集設(shè)置】的【資源發(fā)布目錄】選項(xiàng)中修改圖集導(dǎo)出路徑。同時(shí)可以設(shè)置圖集的最大寬高，以及不準(zhǔn)備打包的單圖寬高限制等。

進(jìn)入設(shè)計(jì)模式，按F9彈出項(xiàng)目設(shè)置，選中圖集設(shè)置。

圖集設(shè)置

如何將未使用的圖片資源不打包到圖集內(nèi)呢？

在【資源管理器】中如果存在沒(méi)有在項(xiàng)目場(chǎng)景中使用的圖片，可以通過(guò)【菜單】中的【導(dǎo)出】選擇-發(fā)布（不打包未使用的資源）】功能。將未使用的資源不打包到圖集中，以減少圖集的大小。這種打包方式由于需要遍歷所有資源的使用狀態(tài)，會(huì)導(dǎo)致打包速度緩慢，因此只有在發(fā)布線上版本的時(shí)候才會(huì)使用到。

導(dǎo)出

如何將單張圖片資源不打包到圖集內(nèi)呢？

在【設(shè)計(jì)模式】的【資源管理器】中選中目標(biāo)圖片資源，左鍵雙擊或右鍵選擇【設(shè)置默認(rèn)屬性】。

設(shè)置默認(rèn)屬性

在彈出的【資源屬性設(shè)置】面板中選擇下方的【打包類型】中的【不打包】選項(xiàng)，選中的圖片資源就不i會(huì)被打包到圖集中。

不打包

如何使用圖集資源中指定的圖片呢？

例如：項(xiàng)目中如果用到圖集中的資源則需要預(yù)加載圖集資源，然后設(shè)置圖片的皮膚skin屬性值為 [原小圖目錄名稱/原小圖資源名.png]，從圖集中取出小圖資源其實(shí)就是圖集打包前對(duì)應(yīng)的目錄與資源名稱和路徑。

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        this.ATLAS_PATH = "./res/atlas/avatar.atlas";
        Laya.loader.load(this.ATLAS_PATH, Laya.Handler.create(this, function(){
            let image = new Laya.Image();
            image.skin = "avatar/avatar1.png";
            Laya.stage.addChild(image);
        }));
    }
}
//啟動(dòng)
new Test();

自動(dòng)打包圖集

• Laya會(huì)將小于512*512的圖片打入自動(dòng)大圖集中，如果圖片被打入自動(dòng)圖集中，圖片的內(nèi)存就會(huì)交由Laya自動(dòng)處理，開(kāi)發(fā)者不能手工刪除。
• Laya最多能生成6張2048*2048的自動(dòng)圖集，3D為2張，可通過(guò)AtlasResourceManager.maxTextureCount設(shè)置。
• 使用自動(dòng)圖集可以減少drawcall，缺點(diǎn)是部分資源釋放不了，只有當(dāng)自動(dòng)圖集全部被占滿時(shí)才能釋放部分資源。

若不想將圖片打入自動(dòng)圖集，有三種方法實(shí)現(xiàn)：

1. 獲取到圖片的紋理 texture 關(guān)閉合并到圖集的開(kāi)關(guān)

let texture = Laya.loader.getRes(url);//獲取圖片的紋理
texture.bitmap.enableMergeInAtlas = false;//關(guān)閉合并到圖集

2. 關(guān)閉自動(dòng)圖集功能

Config.atlasEnable = false;

laya.webgl.atlas.AtlasResourceManagerAtlasResourceManager._disable();

3. 設(shè)置圖集限制大小

//大圖合計(jì)管理器
// laya.webgl.atlas.AtlasResourceManager
//設(shè)置進(jìn)入大圖合集的最大尺寸
laya.webgl.atlas.AtlasResourceManager.atlasLimitWidth = 256;
laya.webgl.atlas.AtlasResourceManager.atlasLimitHeight = 256;

動(dòng)畫(huà)基類

Laya提供的Animation動(dòng)畫(huà)類使用多種動(dòng)畫(huà)資源生成游戲動(dòng)畫(huà)，使用LayaAir IDE創(chuàng)建時(shí)間軸動(dòng)畫(huà)的方式生成文件后綴名為.ani的動(dòng)畫(huà)資源，也可以使用圖集打包動(dòng)畫(huà)幀圖片的方式，創(chuàng)建文件名為.atlas的圖集資源，然后賦給動(dòng)畫(huà)類去加載使用。

Animation動(dòng)畫(huà)類繼承自AnimationBase動(dòng)畫(huà)基類，動(dòng)畫(huà)基類提供了基礎(chǔ)的動(dòng)畫(huà)播放控制方法和幀標(biāo)簽事件等相關(guān)功能。動(dòng)畫(huà)基類可以被繼承，但不能直接被實(shí)例化，因?yàn)閯?dòng)畫(huà)基類中的部分方法需要子類去實(shí)現(xiàn)。

動(dòng)畫(huà)基類AnimationBase提供了兩個(gè)子類，分別是Animation動(dòng)畫(huà)類和FrameAnimation幀動(dòng)畫(huà)類。

動(dòng)畫(huà)播放順序wrapMode分為三種

• AnimationBase.POSITIVE:number = 0 默認(rèn)正序播放
• AnimationBase.WRAP_REVERSE:number = 1 倒序或逆序播放
• AnimationBase.WRAP_PINGPONG:number = 2 pingpong播放即按指定順序播放完結(jié)尾后，若要繼續(xù)播放則會(huì)改變播放順序。

動(dòng)畫(huà)播放的幀間隔毫秒時(shí)間interval默認(rèn)值依賴于Config.animationInterval = 50選項(xiàng)，通過(guò)配置Config.animationInterval選項(xiàng)可以修改默認(rèn)動(dòng)畫(huà)幀的間隔毫秒數(shù)。如果想要為某動(dòng)畫(huà)設(shè)置獨(dú)立的幀間隔時(shí)間，可以使用set interval。需要注意的是如果動(dòng)畫(huà)正在播放，設(shè)置interval后會(huì)重置幀循環(huán)定時(shí)器的起始時(shí)間為當(dāng)前時(shí)間，也就是說(shuō)，如果頻繁的設(shè)置interval將會(huì)導(dǎo)致動(dòng)畫(huà)幀更新的時(shí)間間隔比預(yù)想的要慢，甚至?xí)桓隆?/p>

動(dòng)畫(huà)類

創(chuàng)建動(dòng)畫(huà)Animation類的實(shí)例

let ani = new Laya.Animation();

Animation類是Graphics動(dòng)畫(huà)類，其實(shí)現(xiàn)是基于Graphics的動(dòng)畫(huà)創(chuàng)建、播放和控制的接口。Animation類使用了動(dòng)畫(huà)模板緩存池，以一定的內(nèi)存開(kāi)銷來(lái)節(jié)省CPU開(kāi)銷。當(dāng)相同的動(dòng)畫(huà)模板被多次重復(fù)使用時(shí)，相比每次都創(chuàng)建新的動(dòng)畫(huà)模板，使用動(dòng)畫(huà)模板池只需創(chuàng)建一次，緩存之后可以多次使用，從而節(jié)省了動(dòng)畫(huà)模板創(chuàng)建的開(kāi)銷。動(dòng)畫(huà)模板緩存池是以key-value鍵值對(duì)的形式進(jìn)行存儲(chǔ)，鍵名key可以自定義，也可以從指定的配置文件中讀取。鍵值value是對(duì)應(yīng)的動(dòng)畫(huà)模板，是一個(gè)Graphics對(duì)象數(shù)組，每個(gè)Graphics對(duì)象對(duì)應(yīng)著一個(gè)幀圖像，動(dòng)畫(huà)的播放實(shí)際上是定時(shí)切換Graphics對(duì)象。