今天打开电脑,收到一封Andreas Loew发来的邮件,并给我发来了TexturePacker3.0和PhysicsEditor的License, 很是感动了一番,这两个工具可是我期待以久的,可惜现在资金有限,一直没舍得买,为了感谢Andreas Loew的慷慨,我以后得多写几篇这个工具的使用心得。
我目前从事前端开发工作,从毕业到现在,经历过很多公司,基本都是创业型的公司,这些公司在前端开发方面基本没有什么经验积累,当然进来的开发人页也没什么大牛之类的人物,今天只说css部分,其实我很早看到过各大网站都在使用css sprite技术,但当时我以为是用ps布局的,当时觉得这玩意用在css中,要是图片位置经常调整是多么恐怖的事件啊,后来发现有一工具compass可以将小图片生成一张大图,但由于没有可视化界面,在项目组中推广有点难度,有幸我们还有强大的TexturePacker这个工具,其实这工具使用相当简单,下面我就用一示例演示下生成css sprite步骤。(csdn什么时候开始不能直接粘贴图片了,,shit !).
1,首先打开工具,界面很清晰,
2,点击add sprite图标:,添加图片路径,所有图片名都会显示在右边的Sprite列表中。
看看中间区域,是不是大图已经自动排列好了:
是的,还为了节省空间,有些图还自动旋转了,有木有,如果你不想旋转,取消息Allow rotation
这个选项就可以了,有很多参数可以调整,大家就根据自己的需要调整吧,下面我们展开Data Format下拉列表,选择css。
3,发布,点击, 在弹出对话框中,填写文件名及路径
4,保存,点击Save.
最终生成的css文件内容如下 :
/* ----------------------------------------------------
created with http://www.texturepacker.com
----------------------------------------------------
$TexturePacker:SmartUpdate:c58e626cab159453a4bc8a32e4c44838$
----------------------------------------------------
usage: <span class="{-spritename-} sprite"></span>
replace {-spritename-} with the sprite you like to use
*/
.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(sprite_css.png);}
.shockedface2_empty {width:40px; height:40px; background-position: -86px -2px}
.shockedface2_full {width:40px; height:40px; background-position: -44px -48px}
.shockedface2_half {width:40px; height:40px; background-position: -2px -48px}
.wolfSpiderThumb {width:44px; height:44px; background-position: -2px -2px}
上面还列出了使用方法,作者做得真是细心啊,到此,我们就完成了css sprite的生成工作,怎么样,简单吧,赶紧下载一个试试吧:下载地址:
---------------------------------------------------------------------------
http://www.codeandweb.com/texturepacker - The sprite sheet creator turns chaos into order
http://www.codeandweb.com/physicseditor - Edit your physics shapes with ease
http://twitter.com/CodeAndWeb - Follow me on Twitter
---------------------------------------------------------------------------