這次使用 Krasi Wasilev 的 Cowboy with revolver
http://opengameart.org/content/cowboy-with-revolver
下載後，原始圖片是
接著使用 ShoeBox 工具來產生 css sprite 檔
http://renderhjs.net/shoebox/
ShoeBox 需要安裝 AIR
執行後是這樣
由於我們下載的圖片已經是 sprite 了，所以我們先使用工具拆解出原圖。
將圖片拖曳到 Extract Sprites 上
我們要將產生出來的圖片，使用 shoebox 做成 Sprite，同時產生 css 檔案。
但是 shoebox 預設不是產生 css 檔案，所以我們先在 Sprite Sheet 按下滑鼠右鍵，
在 Template 選擇 CSS
到這裡我們就有圖片來源及 css 檔案了。
接著使用 html 使用 css 檔案
<!doctype html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sprites.css">
</head>
<body>
<div>
<img class="slice01_01" src="img_trans.gif">
</div>
</body>
</html>
成果如下：
DEMO 網頁
參考來源：
w3schools
http://www.w3schools.com/css/css_image_sprites.asp
shoebox
http://renderhjs.net/shoebox/
OpenGameArt
http://opengameart.org/
沒有留言:
張貼留言