TexturePacker操作方法

最新推荐文章于 2024-09-14 07:49:01 发布

cooper_ma

最新推荐文章于 2024-09-14 07:49:01 发布

阅读量4.3k

点赞数

分类专栏： AS3 文章标签： AS3 as3 Starling TexturePacker

AS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不动手做一下就永远不能真正的理解。

1、首先，我们需要一个TexturePacker，http://www.codeandweb.com/texturepacker

2、把图片全拖进去即可，然后publish，生成一张图片和一个xml文件

当然，这里的配置表不是最后我们想要的，我们需要每张贴图的偏移以及最大位图的偏移以及宽高，那么好，写段代码转换它一下就可以了

3、转换配置表，主要代码如下：

 
 private function startAnalyze(data:ByteArray):void
 {
    var xml:XML = new XML(data);
    
    var minX:int = int.MAX_VALUE;
    var minY:int = int.MAX_VALUE;
    var maxX:int = int.MIN_VALUE;
    var maxY:int = int.MIN_VALUE;
    
    var frameW:int;
    var frameH:int;
    
    var spriteList:XMLList = xml.sprite;
    var len:int = spriteList.length();
    for (var i:int = 0; i < len; i++)
    {
        minX = Math.min(minX, spriteList[i].@oX);
        minY = Math.min(minY, spriteList[i].@oY);
        maxX = Math.max(maxX, int(spriteList[i].@oX) + int(spriteList[i].@w));
        maxY = Math.max(maxY, int(spriteList[i].@oY) + int(spriteList[i].@h));
        frameW = spriteList[i].@oW;
        frameH = spriteList[i].@oH;
    }
    
    var maxWidth:int = maxX - minX;
    var maxHeight:int = maxY - minY;
    var maxRectX:int = minX - frameW / 2;
    var maxRectY:int = minY - frameH / 2;
    
    var textureData:TextureData = new TextureData();
    textureData.imagePath = xml.@imagePath;
    textureData.x = maxRectX;
    textureData.y = maxRectY;
    textureData.width = maxWidth;
    textureData.height = maxHeight;
    
    for (var k:int = 0; k < len; k++)
    {
        var spriteData:SpriteData = new SpriteData();
        
        spriteData.name = spriteList[k].@n;
        spriteData.x = spriteList[k].@x;
        spriteData.y = spriteList[k].@y;
        spriteData.width = spriteList[k].@w;
        spriteData.height = spriteList[k].@h;
        spriteData.offsetX = spriteList[k].@oX - minX;
        spriteData.offsetY = spriteList[k].@oY - minY;
        
        textureData.spriteVec.push(spriteData);
    }
    
    var exportXml:XML = textureData.export();
    
    var file:FileReference = new FileReference();
    file.save(exportXml, "test.xml");
    textField.text = "已保存";
 } 

好了，最后转换成功的配置表：

准备工作就到此为止了，接下来我们需要http://blog.flexwiz.net/spritesheet-animation-in-as3/

下载anim包，它的是json格式，我们使用xml格式，所以修改一下转换成AnimTextureSheet的代码

public static function fromSparrowXml(texture:BitmapData, sheetData:XML, name:String=null):AnimTextureSheet
{
var tileSheet:AnimTextureSheet= new AnimTextureSheet();
tileSheet.mTextureSheet = texture;
tileSheet.name = name;

var src:XMLList = sheetData.sprite;
var aniFrames:Dictionary = new Dictionary();
aniFrames["all"] = [];
var animData:Array = [];

var maxRect:Rectangle = new Rectangle(sheetData.@x, sheetData.@y, sheetData.@width, sheetData.@height);
tileSheet.frameNames = new Vector.<String>(src.length());
for(var i:int = 0; i < src.length(); i++)
{
var node:XML = src[i];

var rcFrame:Rectangle= new Rectangle(node.@x, node.@y, node.@width, node.@height);
tileSheet.texRegions[i] = rcFrame;

tileSheet.offsets[i] = new Point(node.@offsetX, node.@offsetY);
tileSheet.frameNames[i] = node.@name.toString();

var str:String = node.@name.toString();
var idx:int = str.lastIndexOf("_");
var ani:String = str.slice(0, idx);
if(!aniFrames[ani])
{
aniFrames[ani] = [];
}
aniFrames[ani].push(i);
aniFrames["all"].push(i);
}

tileSheet.mFrameRect = maxRect;
tileSheet.AniFrames = aniFrames;

return tileSheet;
}

好了，现在写个test类开始测试吧，写个简单的加载器把png和xml文件加载进来（当然你可以嵌入...）

package anim
{
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

import fw.anim.AnimSprite;
import fw.anim.AnimTextureSheet;
import fw.utils.Stats;

[SWF(backgroundColor="#000000", frameRate="30")]
public class AnimSpriteTest extends Sprite
{
public static var appStage:Stage;
private var bitmapData:BitmapData;
private var xml:XML;

public function AnimSpriteTest()
{
init();
}

private function init():void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
appStage = this.stage;

var fps:Stats = new Stats();
addChild(fps);

// 假设这就是游戏中的每个格子
graphics.lineStyle(2, 0xffffff);
graphics.drawRect(100, 100, 48, 32);

SimpleLoader.getInstance.addRequest("files/test.png", "testPng", SimpleLoadItem.IMAGE);
SimpleLoader.getInstance.addRequest("files/test.xml", "testXml", SimpleLoadItem.XML);

SimpleLoader.getInstance.addEventListener(SimpleEvent.ALL_COMPLETE, load_OnComplete);
SimpleLoader.getInstance.start();
}

private function load_OnComplete(e:SimpleEvent):void
{
var bitmapData:BitmapData = SimpleReader.getImage("testPng").bitmapData;
var xml:XML = SimpleReader.getXml("testXml");

var animTextureSheet:AnimTextureSheet = AnimTextureSheet.fromSparrowXml(bitmapData, xml);
var animSprite:AnimSprite = new AnimSprite(animTextureSheet);
addChild(animSprite);
animSprite.x = 124 + animTextureSheet.maxRect.x;
animSprite.y = 116 + animTextureSheet.maxRect.y;

var frame:Array = animTextureSheet.AniFrames["loli01_3_0"];
animSprite.addSequence("1", frame, 480, true);
animSprite.play("1", true);
}
}
}