html5使用TexturePacker生成的SpriteSheet

最新推荐文章于 2024-09-05 08:24:13 发布

arterta

最新推荐文章于 2024-09-05 08:24:13 发布

阅读量1k

点赞数

分类专栏： javascript html5 脚本

本文链接：https://blog.csdn.net/lifachuan/article/details/10077019

版权

本文介绍了如何在HTML5项目中结合TexturePacker工具，利用生成的XML配置文件创建并加载SpriteSheet。通过一个实际的小例子，展示了在学习HTML5过程中，将Spritesheet应用到项目中的具体步骤。

摘要由CSDN通过智能技术生成

之前使用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="