看这个名词“纹理集”，很容易让人想到的是很多“纹理”的集合的意思。也的确如此。不过，在这里，将很多纹理放在一张图片上，然后，分成一块块。给出宽高，以及x，y坐标。最后，被Starling的TextureAtlas使用。
这个时候，我会想。在GPU渲染里，纹理的宽高都必须是2的n次方。所以，你给出纹理素材的时候，最好宽高也是2的n次方。不一定要是矩形。如果不是呢，Starling会自动为你创建一个接近该宽高的2的n次方的纹理。这样会增加内存的消耗。也有可能使得你想达到的效果达不到。比如有缺口或啥的。所以，明白要2的n次方是很有必要的。
纹理集从何而来，纹理集 = 纹理 + 配置XML

我们之所以要准备纹理，是因为纹理要被使用。他才有价值。在Starling中，Image和Texture的关系就相当于flash中的Bitmap和BitmapData之前的关系。真的很类似呀。所以，你准备的纹理，可以被Image用到。当然，其他的对象也是会用到的。

因为刚接触Starling，很多都还不熟悉。所以，在这里。为了纹理的复用和方便使用。我封装了一个类，SourceAtlas.as。它负责获取纹理，生出纹理，然会公开被调用获取。为了方便，在这里我使用静态。

为了演示，我先贴出纹理图的jpg图片。


再贴出配置xml文件。这里，我仅仅配置了第一个区域的背景图片。

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath='../../../../assets/images/01.png'>
     <SubTexture name='bg' x='2'  y='2' width='256' height='256'/>
</TextureAtlas>

 

最后，贴出封装的类，SourceAtlas.as。

package com.vini123.game
{
    import starling.textures.Texture;
    import starling.textures.TextureAtlas;
    
    /**
     * @author vini123
     * @email lichking_lin86@qq.com
     * @weixin vinifly
     * @date 2014-4-25 下午20:03:05
     * 
     */
    
    public class SourceAtlas
    {
        [Embed(source = "../../../../assets/images/01.png")]
        private var AtlasImage:Class;
        
        [Embed(source = "../../../../assets/config/all.xml" , mimeType= "application/octet-stream")]
        public static const  AtlasXml:Class;
        
        private var _textureAtlas:TextureAtlas;
        
        private static var _instance:SourceAtlas;
        
        public function SourceAtlas()
        {
                
        }
        
        public static function get instance():SourceAtlas
        {
            if(!_instance)
            {
                _instance = new SourceAtlas();
            }
            return _instance;
        }
        
        public function Init():void
        {
            var texture:Texture = Texture.fromBitmap(new AtlasImage());
            var xml:XML = new XML(new AtlasXml());
            _textureAtlas = new TextureAtlas(texture , xml);
        }
        
        public function getTexture(textureName:String):Texture
        {
            return _textureAtlas.getTexture(textureName);
        }
        
        public function dispose():void
        {
            _textureAtlas.dispose();
        }
    }
}

 

如何使用纹理集呢？通过公开方法，getTexture。

package com.vini123.game
{
    import starling.display.Image;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.textures.Texture;
    
    
    /**
     * @author vini123
     * @email lichking_lin86@qq.com
     * @weixin vinifly
     * @date 2014-4-25 下午20:47:00
     * 
     */
    
    public class Game extends Sprite
    {
        private var _bg:Image;
        
        public function Game()
        {
            addEventListener(Event.ADDED_TO_STAGE , addStageHandler);
        }
        
        private function addStageHandler(e:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE , addStageHandler);
            Init();
        }
        
        private function Init():void
        {
            SourceAtlas.instance.Init();
            var source:Texture =  SourceAtlas.instance.getTexture("bg"); 
            _bg = new Image(source);
            addChild(_bg);
        }
    }
}

 

到这里，基本算完了。可是，还有很多问题的。比如我想背景平铺。这里完成不了啦。。。