2013年05月11日

TexturePacker その1 @ Mac

ライセンスを頂いてから風邪で寝込んでいたため、紹介記事が遅くなってしまいました。取りあえず、出来る事の紹介かな。

まずは、TexturePackerの話の前に、何故にこの手のツールが必要なのかって事から。

ウェブページの制作で言えば、少し前まで画像中心で作られたサイトの場合、Fireworksなどを使って画像を細切れ(スライス)して作る事が頻繁に行われていました。スライスしてテーブルで再構築する事で、レイアウトがし易くなったなど、HTML 3から4くらいまでは標準的な作り方でした。しかし、そもそもこの手法は苦肉の策で生まれた方法で、ファイル数が増え、当然サーバーとのファイルのやり取りも増えます。無駄が多くなる事もしばしば。近年、CSSの進化とブラウザの対応状況が変化した事で、CSSスプライトと言われる手法が定番化。複数の画像をまとめて送るので、ブラウザからのファイルリクエストは1回で済みます。サイトのアイコンなどを上手くまとめればトータルでのファイルサイズ自体も小さくなります。ただ、この手法、既にあるアイコン画像をまとめてしまうと、管理が面倒だったり、ゼロからまとめて画像を作るとしても、スタイルシートを書く必要があったり、ちょっと面倒。そんな場合に便利なツールがTexturePackerです。もっと便利な場面としては、アイコン集から必要なアイコンだけを持って来て使用するモノをまとめる時だったりします。CSSスプライト目的で新規で作るならばまとめた状態を想定して作りますからね。

使い方としては、TexturePackerの作業画面の右側にあるSpritesと書かれてある所に、画像をドラッグ&ドロップするだけ。あとは勝手に並べてくれます。細かく指定も出来ますが、細かな事を気にしない場合は十分だと思います。

その他、指定をする必要がある所は、左のパネルにあるアウトプットのデータフォーマット等に成ります。スタイルシートとして使いたい場合は、CSSですが、LESSやSASSに対応しているので、それらを使っている人はそちらの指定も出来ます。

試しにfamfamfam.com:のSilk Iconsを使って書き出してみました。手元に有ったバージョンのモノでアイコンが1000個。読み込んだままでレイアウトすると、画像が大きくなるので、余白は0にしました。その状態でPNGへ書き出すと512 x 512のサイズになり。PNG OPT LEVELをなしで、ファイルサイズとしては425K程でした。PNG OPT LEVELが7だと393K程度でした。ここまで多くのアイコンを一度に使う事は無いので極端な例で、ファイルサイズが少々大きいですが、サイズを小さくするツールを使うなどすればもっと小さく出来ます。Compress PNG Images Onlineだと85Kくらいになったので、このくらいだったら、1サイトで使うアイコン全部が入っているならば十分でしょう。って言うか1000個も使わないよね。

書き出したCSSファイルの内容としては以下の様な感じに成ります。

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(icons.png);}

.accept {width:16px; height:16px; background-position: -496px -416px}
.add {width:16px; height:16px; background-position: -480px -416px}
.anchor {width:16px; height:16px; background-position: -464px -416px}
.application {width:16px; height:16px; background-position: -448px -416px}
.application_add {width:16px; height:16px; background-position: -432px -416px}
.application_cascade {width:16px; height:16px; background-position: -416px -496px}

ファイル数が多いのでまだまだ続きますが、基本的にファイル名がクラス名に成ります。ちなみにファイル名は以下の様な感じです。

accept.png
add.png
anchor.png
application_add.png
application_cascade.png

ウェブサイト設計の命名規則と合わない場合は、事前にファイル名を変更しておくと良いと思います。

取りあえず簡単な使い方紹介でしたが、まだまだ機能的には色々有るので、何回かに続く予定。

興味がある人は以下のサイトからダウンロードして使ってみて下さい。フル機能は有料ですが、試用出来るので試して便利だと思ったら買うと良いのではないかと思います。

TexturePacker - Create Sprite Sheets for your game!
>>関連リンク

今回記事で登場したアイコンとPNGの圧縮サービスは以下の所です。

famfamfam.com: Silk Icons
>>関連リンク

Compress PNG Images Online
>>関連リンク

閲覧数: 2346 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト