Photoshopで簡易的にスプライトシートを作るスクリプトとアニメーション


sakura

今はJSXと言うといろいろ意味があって大変ですね…。というわけで、PhotoshopScript(JSX)です。

動画を連番のPNGなどに変換したうえで、それを1つにまとめたスプライトシートを作成するときなどに役立ちます。

Flash(Animate)を使えば、最近のものであればスプライトシート書き出しができるんですが、

  • Flash(Animate)をわざわざ起動したくない
  • いちいちFlash(Animate)に読み込ませると重いし時間もかかる

ということで、単に並べるだけならPhotoshopのScriptでいいのではと思い、作成しました。

サンプル

同じサイズで配置するだけなので、非常に単純です。

使う際は以下のようにしてください。

  • Photoshopを開く
  • メニューの「ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」
  • 動画を連番画像に変換したものを読み込み
  • 全部読み込み終えたら「ファイル」→「スクリプト」→「参照」で上記スクリプトを読み込んで実行(もちろん、PhotoshopのScriptフォルダに入れてもOK)
  • 列数を入力すると、自動で計算してタイル状に並べます。

動画ファイルを画像の連番にする際は、AdobeMediaEncoderCCが楽だと思います。(プリセットを変更して、書き出し形式をPNGにすると連番画像になる)

画像の連番を直接読み込むより、ファイルの数が減るため、読み込みが高速になります。

ただし、以下の欠点があります。

画像サイズが大きいため、ブラウザによっては表示されない場合がある(特にPNGの場合)
iOS等で画像サイズが勝手に縮小されてしまう場合がある(JPGの場合 : メモリ量による)

IEの場合 :
IEの画像サイズ制限|よらノート

iOSについてはこちら :
iOS上のブラウザでの画像サイズ制限。 – freefielder.jp

iOSの場合、上記の様に大きい画像が変換された場合、画像そのもののサイズが変わってしまいます。この時、background-sizeを指定していないと、処理そのものがおかしくなりかねないので、指定したほうが良いと思います。

また、Androidで大きい画像ファイルを大量に扱っていると、突然重くなることがあります。使用しているメモリ量等にもよると思われるので、「どのくらい」というのが難しいですが、2000px × 2000pxのスプライトシートを8個くらいでカクカクすると思います。テストしてみた感じだと、画像の容量ではなく、画像のサイズのほうに影響を受けるようなので、iOSと同じように何らかの画像サイズの制限があるのかもしれません。

Gifアニメにしてみたら、小さいとそれほど目立たないかな、とも思って試してみたんですが、普通に書き出したらそれなりに目につく感じだったので、求められる動画のクオリティ次第ではありますが、クオリティを維持するならばこの方法は使えない、という印象でした。それよりは、上記方法を使いつつ、FPSを落とすなりしたほうが、綺麗な映像にはなりそうです。本当は動画がそのまま使えるのがいいのでしょうが、自動再生ができないので…。

GIFアニメバージョン

sakura

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です