html5使用TexturePacker生成的SpriteSheet

之前使用Texturepacker 生成的Spritesheet很是顺手，所以现在在学习html5的时候，不自然的就像试一下html5和Texturepacker的结合，写了个小例子。

首先，使用Texturepacker生成的配置文件选择为xml.



生成的xml格式如下：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with TexturePacker http://www.codeandweb.com/texturepacker--> <!--Format:
n  => name of the sprite
x  => sprite x pos in texture
y  => sprite y pos in texture
w  => sprite width (may be trimmed)
h  => sprite height (may be trimmed)
oX => sprite's x-corner offset (only available if trimmed)
oY => sprite's y-corner offset (only available if trimmed)
oW => sprite's original width (only available if trimmed)
oH => sprite's original height (only available if trimmed)
r => 'y' only set if sprite is rotated
-->
<TextureAtlas imagePath="attack.png" width="256" height="256">
<sprite n="AttackBB/00101.png" x="2" y="2" w="28" h="76" oX="235" oY="187" oW="512" oH="512"/>
<sprite n="AttackBB/00102.png" x="2" y="142" w="40" h="56" oX="238" oY="206" oW="512" oH="512"/>
<sprite n="AttackBB/00103.png" x="32" y="2" w="36" h="60" oX="235" oY="207" oW="512" oH="512"/>
<sprite n="AttackBB/00104.png" x="182" y="98" w="28" h="44" oX="243" oY="223" oW="512" oH="512"/>
<sprite n="AttackBB/00105.png" x="212" y="140" w="40" h="42" oX="244" oY="225" oW="512" oH="512"/>
<sprite n="AttackBB/00106.png" x="162" y="144" w="36" h="42" oX="244" oY="225" oW="512" oH="512"/>
<sprite n="AttackBB/00107.png" x="218" y="48" w="36" h="42" oX="244" oY="224" oW="512" oH="512"/>
<sprite n="AttackBB/00108.png" x="88" y="54" w="30" h="50" oX="238" oY="214" oW="512" oH="512"/>
<sprite n="AttackRR/00101.png" x="2" y="80" w="52" h="60" oX="217" oY="202" oW="512" oH="512"/>
<sprite n="AttackRR/00102.png" x="2" y="200" w="52" h="52" oX="222" oY="210" oW="512" oH="512"/>
<sprite n="AttackRR/00103.png" x="70" y="2" w="50" h="50" oX="229" oY="212" oW="512" oH="512"/>
<sprite n="AttackRR/00104.png" x="152" y="2" w="64" h="46" oX="240" oY="215" oW="512" oH="512"/>
<sprite n="AttackRR/00105.png" x="216" y="92" w="38" h="46" oX="241" oY="215" oW="512" oH="512"/>
<sprite n="AttackRR/00106.png" x="218" y="2" w="36" h="44" oX="242" oY="217" oW="512" oH="512"/>
<sprite n="AttackRR/00107.png" x="182" y="50" w="32" h="46" oX="241" oY="215" oW="512" oH="512"/>
<sprite n="AttackRR/00108.png" x="150" y="54" w="30" h="48" oX="244" oY="213" oW="512" oH="512"/>
<sprite n="AttackTT/00101.png" x="122" y="2" w="28" h="50" oX="245" oY="211" oW="512" oH="512"/>
<sprite n="AttackTT/00102.png" x="44" y="142" w="40" h="52" oX="230" oY="209" oW="512" oH="512"/>
<sprite n="AttackTT/00103.png" x="56" y="196" w="36" h="52" oX="236" oY="208" oW="512" oH="512"/>
<sprite n="AttackTT/00104.png" x="120" y="54" w="28" h="50" oX="236" oY="210" oW="512" oH="512"/>
<sprite n="AttackTT/00105.png" x="94" y="170" w="42" h="48" oX="222" oY="212" oW="512" oH="512"/>
<sprite n="AttackTT/00106.png" x="124" y="106" w="36" h="48" oX="228" oY="212" oW="512" oH="512"/>
<sprite n="AttackTT/00107.png" x="86" y="118" w="36" h="50" oX="228" oY="212" oW="512" oH="512"/>
<sprite n="AttackTT/00108.png" x="56" y="64" w="30" h="52" oX="239" oY="210" oW="512" oH="512"/>
</TextureAtlas>

ok，资源准备好了。

下面是一个简单的xml加载js脚本

var XmlLoader = function(){};

XmlLoader.prototype.loadXML = function(file)
{
xmlDoc = null;
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(file);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load(file);
}
catch(e)
{
try //Google Chrome
{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",file,false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
}
catch(e)
{
error=e.message;
}
}
}
return xmlDoc;
}

一个简易的Sprite。

var Sprite=function(){};
this.frames = [];
var currentFrame = 0;
Sprite.prototype.update=function()
{
if(this.frames.length > 0)
{
if(currentFrame >= this.frames.length)
{
currentFrame = 0;
}

var obj = this.frames[currentFrame];

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(obj.img, obj.sx, obj.sy, obj.swidth, obj.sheight, obj.x, obj.y, obj.swidth, obj.sheight);

currentFrame = currentFrame + 1;
}
}

一个简单的计时器

var schedulePool=[];
var timer=function(){};

timer.prototype.start=function()
{
setInterval(this.run, 100);
}

timer.prototype.run=function()
{
var len = schedulePool.length;
for(var i = 0; i < len; i++)
{
schedulePool[i].update();
}
}

timer.prototype.addItem=function(item)
{
if(item!=null)
{
if(schedulePool.indexOf(item) == -1)
{
schedulePool.push(item);
}
}
}

timer.prototype.removeItem = function(item)
{
if(item)
{
var i = schedulePool.indexOf(item);
if(i != -1)
{
schedulePool.splice(i, 1);
}
}
}

入口文件

/**加载有TexturePacker生成的配置文件*/
var loader = new XmlLoader();
var xml = loader.loadXML("assets/attack.xml");

var root = xml.getElementsByTagName("TextureAtlas");
var path=root[0].getAttribute("imagePath");/**TexturePacker生成的png文件名称*/

var img = new Image();
img.src = "assets/" + path;
/**加载png文件*/
img.onload = function()
{
var members = xml.getElementsByTagName("sprite");
var memberCount = members.length;
var frames = [];
//生成序列帧
for(var i=0; i < memberCount; i++)
{
var obj = {};
obj.img = img;
obj.sx= members[i].getAttribute("x");
obj.sy= members[i].getAttribute("y");
obj.swidth= members[i].getAttribute("w");
obj.sheight= members[i].getAttribute("h");
obj.x = members[i].getAttribute("oX");
obj.y = members[i].getAttribute("oY");
frames.push(obj);
}
//计时器
var tk = new timer();
tk.start();
//简易的测试元件
var s = new Sprite();
s.frames = frames;
tk.addItem(s);
}

html 文件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div>
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
<script src="XmlLoader.js"></script>
<script src="Sprite.js"></script>
<script src="Timer.js"></script>
<script src="main.js"></script>
</body>
</html>

源文件下载地址：下载