CSSスプライトをやってみて思ったこと
ブラウザゲーや半ネイティブ半ブラウザみたいなゲームを作ってると、読み込みの速さが課題に上がることはよくあります（その分の予算や工数確保サれることは少ないですが）。
で、ならばと画像加工ソフト使って勝手にCSSスプライトやってみたのですが、やってみて色々と気がつくところがあったのでまとめます。
CSSスプライトって何？
こちらがよくまとまってます。ゲーム作ってる人は割りと馴染みのある手法だったり（ドット絵配布サイトとか見るとイメージつかみやすいかと）。
CSSスプライトの利点
- 複数の画像がまとまることでHTTPリクエストが減り、ページの読み込み速度が向上する
- 個々の画像サイズが小さかったりほぼ共通の色調の画像だった場合、ひとまとめにすることで個々の画像の合計よりファイルサイズが減ることが多い
- 画像ファイルが散らばらない（個人的に嬉しい）
画像ファイルが小さいと、データの転送にかかる時間より通信にかかるコストが出かかったりします。
またソシャゲは見た目や訴求の問題で特にかく画像パーツが多いので、どんなにディレクトリやファイル名工夫しても何がなんだかよくわからなくなることが多いのですが、それが多少なりとも解消されるのも嬉しい。
CSSスプライトの欠点
- 画像作るのがめんどくさい
- デザインの変更があった場合に大変
デザイナーさんに納品して貰う前に全体のページデザインを共有してもらいスプライト化できそうな部分は予めそのように作ってもらうことができればベストですが、まあできた試しがないので依頼し直すか自分で勝手に作るかの2択です。私は自分でちまちま作りました。
で、面倒くささが身にしみました。この面倒くささを補完するツールやサービスはあるのですそれを使えば多少はマシになるかもしれません。が、それとは別の問題もあります。
ソシャゲ特有？の問題点
更新頻度が高い、動的な要素が多い
ソシャゲはリリースしただけでは意味がなく、日々修正や改善の手が加えられていきます。先週と今週でページのデザインが一新、なんてこともありえます。
そんな時に画像をまとめてCSS書きなおしてーとかやってると死にます（リソースが十分あれば違うんでしょうけど）。
また、ユーザーの状態や時刻によって動的に切り替わる部分まで1枚の画像にまとめると不要なときには余計な容量読み込むことになるのであまり変わらない、なんてこともありえます（キャッシュを期待するのもありですが、端末ごとにキャッシュサイズが異なるのでAndroidだとびみょい）。
現状の方針
ここまで書いておいてなんですが無理をしないこと。これに尽きると思います。
- スプライトとしてまとめる画像は項目やパーツごと（いつでもその部分だけ捨てられるように）
- 動的な部分はすっぱり諦める（動的に切り替わる部分ほど目立たせたい部分だったりするので変更激しいですし）
可能な範囲で、日々の更新に支障がでないよう工夫して、けど速度を求める。このへんのバランス感覚を磨きながらちょっとずつ工夫するしかないですね、というオチ。
