Working With Spritesheet

スプライトシートを使ったアニメーションは、絵本アプリやゲームアプリで使用されています.スプライトシートは、一枚のファイルですが、複数の画像によって構成されています。

Andreas Löwのビデオチュートリアル

  • 同じサイズのフレーム(コマ)で構成されたシート
  • 異なるサイズのフレームで構成されたシート

同じサイズ

同じサイズのフレームを並べた画像ファイルとなります。

512×256 pixelsのサイズの8匹のネコ 1024×1024のスプライトシート

いくつかのテクスチャメモリのパフォーマンス向上させるためにサイズが8の倍数になることが望ましいです。例えば,15×15のpixelsフレームを作る代わりに,16×16のサイズで1コマを構成してください。

異なるサイズ

メモリを節約するために,それぞれの画像要素を詰めた状態で、一枚のファイルに配置した状態のシートです。

いくつかの画像を混ぜ合わせた 476×496 のスプライトシート

Texture Packer

このようなスプライトシートは、Texture Packerというツールで作成可能です。必要な画像をドラッグ&ドロップすると,最適化されたスプライトシートが作成されます。

Kwik4では、Corona SDK(image sheet)の形式でスプライトシートを作成してください。

Texture packerの選択欄には、Kwikが存在します。これはKwik3の形式ですので、Kwik4では使用することができません.


Kwik Sprite Sheet Replacement

同じサイズのフレームから構成されたシートと異なるサイズ(Texture Packer)の2つのパターンを解説します。


同じサイズ

スプライトシートに置換されるレイヤーを用意します。ここでは長方形(Shape_1)を描いてみましょう。

フォトショップは境界を足した状態で長方形を作成します。例えば,2pointの境界を持った400×400の長方形は,最終的に 402×402pixelsの画像になります.

長方形をこの蝶々のスプライトシート(butflySprite.png)に置換します。

  • Frame 188 x 188
  • Sheet Width 376 Height 188

長方形の Shape_1 レイヤーを選択した状態で、KwikのSprite Sheet Replacementをクリックします。

ファイル(File)のブラウズボタン(Browse)より、butflySprite.pngを選択します。この例では、butflaySprite.pngは、予め、プロジェクトフォルダ配下のextフォルダに格納してあったものです。

  • File:butflySprite.png

マニュアルエントリー(Manutal entry)のフレーム幅(Frame Width)フレーム縦(Frame Height) シート幅(Sheet Width) シート縦(Sheet Height)に下記の情報を入力します。

  • Frame 188 x 188
  • Sheet Width 376 Height 188

シーケンス(Seqeuences)には、フレーム(コマ)情報を指定します。今回は、アニメーションは2コマの1つのみです。ですので、defaultのシーケンスに、開始フレーム(Start Frame)は1,フレーム数(Frame Count)は2、時間は1秒、ルーブは永遠(forever)を設定しました。

  • Seqeunces
    • Start Frame 1
    • Frame Count 2
    • Length 1 sec
    • Loop forever

最後にCreateボタンをクリックします。Shape_1にスプライトシートが設定されました。


異なるサイズ(Texture Packer)

例えば,一つのシートに4つのアニメーションなしのフレームを持ったとしましょう

この場合に鳥(bird)とネコ(cat)のシーケンスを作成した場合,設定は以下のようになります。

  • Name:bird

    • Start Frame 1
    • Frame Count 1
    • Length 1 sec
  • Name:cat

    • Start Frame 2
    • Frame Count 1

Manual entryを使用せずに、代わりにImport coordinates from external toolsのテキストボックスにTexture Packerのluaファイルのパスを指定します。

    frames = {

        {
            -- bird
            x=2,
            y=2,
            width=191,
            height=222,

            sourceX = 1,
            sourceY = 1,
            sourceWidth = 192,
            sourceHeight = 223
        },
        {
            -- cat
            x=195,
            y=2,
            width=103,
            height=158,

            sourceX = 1,
            sourceY = 0,
            sourceWidth = 104,
            sourceHeight = 158
        },
        {
            -- rabit
            x=300,
            y=154,
            width=163,
            height=98,

            sourceX = 0,
            sourceY = 1,
            sourceWidth = 164,
            sourceHeight = 99
        },
        {
            -- snail
            x=300,
            y=2,
            width=192,
            height=150,

            sourceX = 1,
            sourceY = 1,
            sourceWidth = 193,
            sourceHeight = 151
        },
    },

補足

Kwik4では、レイヤーグループに所属する各レイヤーをそれぞれ pngファイルとして出力可能です。

Settings > Publish のタブを開き、下記のExport each image inside を有効にしてください。

  • Export each image inside group(layer set)

それぞれのpngファイルはbuild4/assets/images/pXXに出力され,XXはページの番号を意味しています.TexturePackerでスプライトシートを作るときに便利です。

Corona Simulatorでデバイス向けのビルドを行うときには、これらのスプライトシートの作成に使ったファイルは余分ですので、予めファイルを削除しておいてください。

Kwik4は SheetInfo tableを返す texture packer luaファイルを Kwik4はサポートしています.texture packerから lua fileを指定してください.

作成したイメージシートは、bulid4の直下に保存することは推奨しません.プロジェクトフォルダーの下に 例えば myAssets/といった名前のフォルダーを作成して、その中に保存してください。

  • Kwik/YOUR_PROJCT/myAssets/page1_sheet.png
  • Kwik/YOUR_PROJCT/myAssets/page1_sheet.lua

パブリッシュされたときに作られる build4/assets/images/*.pngからイメージシートを作る場合、高解像度の @2xのシートをサポートしたい場合は、Texture Packerで@2xのイメージシートも作成してください。pngファイルのみです.luaファイルは共通となりますので、@2x用のluaの設定ファイルは必要ではありません。

追加

  • Kwik/YOUR_PROJCT/myAssets/page1_sheet@2x.png

Kwik Panel > Layer Replacements > Sprite sheet replacement, page1_shet.pngとpage1_sheet.luaをセットしてください。パネルでpage1_sheet@2x.pngを設定する必要はありません.

results matching ""

    No results matching ""