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>

源文件下載地址：下載