読者です 読者をやめる 読者になる 読者になる

どこかのだれかへ

職業ゲームプログラマ。気になったニュースのピックアップや開発日記などを書いています。

Photoshopのキーフレームアニメーションからスプライトシートを出力する

開発記 備忘録

現在、2Dゲームを作っているのだけれど(いままでのモデル出力はなんだったんだ!)、キャラクターはUVアニメーションで動かそうと思った。そこでそのためのスプライトシート(またはテクスチャアトラス)をPhotoshopで作ろうとしたが、これがかなり苦戦した。

Photoshopにはキーフレームアニメーションの機能があって、これでレイヤーをぱたぱた切替ながら動きを確認することが出来る。とりあえず手書きでぱぱっと書いて、最後に1枚のテクスチャに並べるぞ!と新規で大きなキャンバスを作って貼り付けてみると、どうもうまくいかない。

元々のデータは64 * 128の背景が透明なキャンバスで書いていたのだが、どうやらコピーすると透明な部分がトリミングされてて、おれは透明な部分含めて、64 * 128で貼り付けたいのに、それが出来ない。

調べてみると、Stack OverFlowにも同じ質問があった。

曰く、「Photoshop的には透明な所=存在しないので、ないものはコピーできないよ!」と書いてある。透明なところはなんか色付けてコピってあとで消せば?みたいなこと言ってるけど、そんなことしたらアンチエイリアス部分の色が残っちゃうしダメじゃん、ということでなんとかならないかと模索した結果、良い感じのスクリプト(JSX)があって、うまくいったのでそれを紹介する。

Photoshop: Sprite Sheet Generator Script | Dr John Wordsworth

とりあえずこれを使えば、キーフレームアニメーションから良い感じにスプライトシートを作成出来た。

実はもう一つ試したけど、そっちはダメだった。

なにはともあれ、だいぶ時間を使ったが作業が進められるのでよかった。アーティストじゃないので知識が無くて、こういったとこにいちいち躓くのが辛い。