皆さん、こんにちは。
OPTPiX SpriteStudio 開発マネージャの遠藤です。
今回の記事ではスプライトシート(SSCE)レンダリングの活用方法をご紹介します。
はじめに
SpriteStudio のスプライトシート(SSCE)レンダリング機能は、アニメーションの各フレームの画像を敷き詰めた、いわゆるスプライトシートを作成する機能です。
スプライトシートの例
上記のようなスプライトシートの画像ファイルと、画像のどの範囲に何番目のフレームの絵が配置されているか、といった情報が保存されたSSCEファイルとパターンを並べてコマアニメ化したSSAEファイルを作成します。
スプライトシート生成との違い
Ver.6 以前のSpriteStudio が搭載していた「スプライトシート生成」機能と異なる点は、出力できる情報ファイルの形式にあります。
Ver.6 のスプライトシート生成ウィンドウ
「スプライトシート生成」機能では Cocos2d-x v2 と Corona SDK のという2つゲームエンジン専用のファイルにのみ対応していました。
この2つのゲームエンジンは近年の SpriteStudio ではほとんど使われることがなく、プレイヤープログラムも既にメンテナンスを終了しています。
このため Ver.7 では上記のような特定のゲームエンジン専用のものではなく SpriteStudio のセルマップを作成し、既存の SpriteStudio および SpriteStudio Player で再利用できるようにしました。
一度、レンダリングしたものを再利用することで従来できなかったことが可能になります。
特定のゲームエンジン向けの情報ファイルを出力してほしい!という方はヘルプセンターよりお問い合わせください。
スプライトシート(SSCE) の用途
では、具体的にどういったことが可能になるのか、以下に列挙します。
- 新機能を使ったアニメーションを、新機能対応前のバージョンの SpriteStudio 及び Player で再現
- アニメーション全体にパーツカラー、シェーダー、半透明化(重なり部分が透けない)を適用
- Player プログラムの描画負荷を軽減
といった用途が考えられます。
それぞれ説明していきます。
1. 新機能を使ったアニメーションを「新機能対応以前の」バージョンの SpriteStudio 及び Player で再現
スプライトシート(SSCE) で出力されるアニメーションデータには、参照セル、X/Y座標、非表示キーしか含まれません。
このため、Ver.4~5 も含めたほとんど全てのバージョンの SpriteStudio および Player プログラムで読み込み、再生させることができます。
また例えば、シェーダーやマスクといった描画表現を拡張する機能に対応していないプレイヤーにおいても、それらの機能が適用された状態で再生させることができます。
2. アニメーション全体にパーツカラー、シェーダー、半透明化(重なり部分が透けない)を適用
パーツカラー、シェーダー、頂点変形などはパーツ単位でのみ指定が可能なものです。
不透明度は子孫パーツに継承することでまとめて半透明にすることが出来ますが、関節部分などパーツが重なり合った場所が透けてしまう問題があります。
例)パーツが重なった領域は背後のパーツが透けてしまう
これに対してスプライトシート(SSCE) ではアニメーション全体がレンダリングによってセルに落とし込まれるため、全体に一律で変化を加えることが出来ます。
例)全体に対して半透明化
同様にアニメーション全体に対してシェーダーを適用することも出来ます。
例)全体に「ステップ」シェーダーを適用
3. Player プログラムの描画負荷を軽減
1つの通常パーツのみを対象にテクスチャの参照位置を移動する参照セルの動作のみになるため、キーフレーム値の補間計算が発生せず、パーツの数が多いほど座標計算などに要する処理がなくなる分、かなり高速に処理することができます。
アニメーションの表示サイズに比べてパーツ数が多い、キーの曲線補間が多いような構造の場合、検討の余地があるかもしれません。
画像サイズに注意
フレーム単位で画像化して並べていくため、レンダリングの画像サイズ、総フレーム数に比例して画像ファイルが肥大化していきます。
このため、尺が短いワンショットアニメーション、低解像度が許容されるエフェクト、ピクセルアートシミュレーション機能を活用して意図的に低解像度化したアニメーション等に適していると言えます。
まとめ
以上、スプライトシート(SSCE)レンダリングの活用案をいくつかご紹介しました。
ご意見、ご要望をお待ちしております!
上記以外の使い方、アイデアなどお持ちの方は是非、お問い合わせページよりお知らせいただけると開発メンバー一同、大変嬉しく思います。
また、もう一歩、これが出来れば便利になるのに、、といったご意見、ご要望などもお待ちしております!
詳しい使い方について
スプライトシート(SSCE)レンダリングの使い方についてはユーザーガイドを参考にしてみてください。
今後も意外と知られていない機能、活用例などをご紹介していきたいと思います。
ここまでお読みいただき有難うございました!