アニメーションとスプライトシート_html/css_WEB-ITnose

スプライトは単一のグラフィック画像です。画面上で移動したり、引き伸ばしたり、回転したり、歪めたり、フェードさせたり、色合いを変えたりすることができます。

スプライトシート とは、スプライトを 1 つのテクスチャ ファイルに集めたものです。これにより、指定した期間にわたってスプライトの表示フレームを順番に変更することで、単一のスプライトをアニメーション化することが簡単になります。映画のリールと同じように、スプライトシートは動きの錯覚を作成できます。

スプライトをスプライトシートに詰め込む利点は、ゲームに必要なテクスチャ メモリを実際に最適化できることです。スプライトの周囲の余分なスペースは、テクスチャから自動的にトリミングされ、実際のスプライトにロードされるときに再適用できます。スプライトに回転を適用すると、より多くのスプライトがテクスチャにきちんと収まるようになります。圧縮画像形式を使用すると、ゲームの速度と効率をさらに向上させることができます。これらのスプライトがどれほど密集しているかわかりますか?

この章では、忍者スプライトシートを作成し、それをゲームで使用する方法を学びます。

忍者

スプライトシートは、どのスプライト フレームを含めるかを決定します。プラットフォーマーの場合、必要なのは忍者が右に走ったりジャンプしたりするフレームだけです。 X 平面上で右向きのスプライトを反転して、左向きのスプライトを作成できます。

ランニング フレームには、ninja-running-e0000.png から ninja-running-e0007.png を使用します。ジャンプフレームの場合は、ninja-sidekick-e0000.png から ninja-sidekick-e0012.png までです。いくつかのスタンディング フレームも追加します: ninja-stopped0000.png から ninja-stopped0003.png まで。

3 層のアート

最近では、SD、HD、HDR の 3 層のアート アセットを作成するのに役立ちます。 (HD Retina)。 SD アセットは、画面解像度 480x320 の iPhone 3GS などの古いデバイスに使用されます。 HD アセットは、1024x768 の第 1 世代 iPad など、画面幅が 959 ピクセルを超えるデバイスに使用されます。 HDR アセットは、画面幅 >= 2000 ピクセル程度のデバイス、つまり 2048x1536 の iPad 3 に使用されます。

これほど多くのアート ファイルを作成するにはどうすればよいでしょうか?簡単。最高の解像度 (HDR) でアートを作成し、スプライトシート メーカーにそれを下位層 (SD および HD) 用にスケールダウンさせるだけです。

オリジナルの SD 忍者を HDR 解像度にスケールアップし、少しの解像度を使用することで、メディアンブラーを使用すると、見栄えの良い HDR スプライトを作成できます。

強化したいすべてのスプライトを含むフォルダーを作成し、それらをすべて一度に処理する Photoshop ドロップレットを作成しました。

ドロップレットは、カラー範囲を使用して茶色の背景色を削除し、次に別のカラー範囲を使用して影を削除します。次に、ドロップレットは、Bicubic Smoother 画像リサンプリングを使用して画像のサイズを 400% に設定します。最後に、3 ピクセルのノイズ >中央値が適用され、ファイルが保存されて閉じます。

完成した HDR ninja スプライトの zip ファイルは次のとおりです。

スプライトシート メーカー

スプライトシート メーカーは、スプライトのグループを取得し、それらをまとめてパックします。このチュートリアルでは、Texture Packer を使用します。または、Zwoptex を使用することもできます。

TexturePacker を開き、[フォルダーの追加] ボタンをクリックして、Ninja-HDR フォルダーを選択します。これにより、すべての Ninja スプライトがシートに追加されます。

次に、最適なテクスチャが作成されるようにスプライトシートを設定し、公開します。

スプライトシート設定

スプライトシートは、テクスチャ ファイルとデータファイル。テクスチャ ファイルは画像 (.png など) で、データ ファイルはテクスチャに含まれる各スプライト フレームに関する情報を含むプロパティ リスト (.plist) です。

TexturePacker にテクスチャ ファイルとデータ ファイルをエクスポートする場所を指示しましょう。データファイルの横にあるフォルダー/「...」ボタンをクリックし、保存したいフォルダーを参照するだけです。ゲームのアート アセット層には SD、HD、HDR フォルダーを作成する必要があることに注意してください。したがって、「HDR」という名前のフォルダーを作成し、「Ninja」というファイル名で保存します。

TexturePacker は、拡張子 .plist を自動的に追加して、Ninja.plist を作成し、Ninja.png テクスチャ ファイルも設定します。

ただし、PNG テクスチャ形式は非圧縮です。テクスチャの読み込みを高速化し、メモリ消費量を減らすために、「zlib 圧縮 PVR」(.pvr.ccz) 形式を使用します。 [テクスチャ形式]ドロップダウンから選択します。 TexturePacker の古いバージョンでは、コード内で PVRImagesHavePremultipliedAlpha:YES を設定することについて警告が表示される場合があります。 [無視] をクリックするだけです。

スプライト シートがテクスチャとしてロードされるときに消費するメモリ量を確認してください。この数値は TexturePacker ウィンドウの右下に表示されます。 「サイズ: 1024x1024 RAM: 4096 kB」のようなメッセージが表示されます。テクスチャ メモリの使用量を削減できるかどうか見てみましょう。

画像形式

テクスチャ形式の下に画像形式があることがわかります。デフォルトは RGBA8888 で、チャンネルあたり 8 ビット x 4 チャンネル (赤、緑、青、アルファ) を使用します。

[画像形式] ドロップダウンを開いて、他のオプションをいくつか試してください。各形式がスプライトシートのメモリ使用量にどのような影響を与えるかを観察してください。プレビューが変更され、ゲーム内でおおよそどのように見えるかが表示されます。

画像形式を RGBA8888 から変更すると、画質が少し低下し始める可能性があります。よりメモリ最適化された画像形式を使用しながら、再び正しく表示されるようにするには、いくつかのディザリング オプションを試してください。

画像形式を RGBA4444 に設定し、ディザリングを FloydSteinberg+Alpha に設定します。これらにより、RGBA8888 とほぼ同等の見栄えを保ちながら、半分のメモリを使用するテクスチャが得られます。サイズインジケーターには、「サイズ: 1024x1024 RAM: 2048 kB」のようなものが表示されます。

他の設定はすべてデフォルトで適切なはずです。自由に遊んで、スプライトシートがどのように影響を受けるかを見てください。

スプライトシートの公開

設定が完了したら、[公開] アイコンをクリックします。これにより、HDR/Ninja.pvr.ccz および HDR/Ninja.plist スプライトシート ファイルが保存されます。しかし、SD バージョンと HD バージョンはどうですか?

AutoSD ボタンをクリックして、「cocos2d-X HDR/HD/SD」プリセットを適用します。次に、データファイルとテクスチャファイルの「HDR」を「{v}」に置き換えます。 [パブリッシュ] に移動すると、HD フォルダーに 0.5 スケール シートが自動的に作成され、SD フォルダーに 0.25 スケール シートが作成されます。

これで、適切なサイズの Ninja.pvr.ccz を含む SD、HD、および HDR フォルダーが作成されました。

最終的な TexturePacker ファイルは次のようになります:

Cocos2d-X でスプライトシートを使用する

それでは、Cocos2d-X でスプライトシートを使用するにはどうすればよいでしょうか?最初に行う必要があるのは、テクスチャ ファイルをロードし、スプライト フレームをキャッシュすることです:

// set the appropriate resource directory for this deviceFileUtils::getInstance()->addSearchResolutionsOrder("HD");// load and cache the texture and sprite framesauto cacher = SpriteFrameCache::getInstance();cacher->addSpriteFramesWithFile("Ninja.plist");

スプライト フレームの 1 つを使用してスプライトを作成する方法は次のとおりです:

Sprite* someSprite = new Sprite;someSprite->initWithSpriteFrameName("ninja-stopped0000.png");

スプライト フレームの 1 つを個別に取得するには:

// get the sprite frameSpriteFrame* frame =  cacher->getSpriteFrameByName("ninja-sidekick-e0007.png");// set someSprite's display framesomeSprite->setSpriteFrame(frame);

アニメーションを再生するには:

#include <iomanip>// load all the animation frames into an arrayconst int kNumberOfFrames = 13;Vector<SpriteFrame*> frames;for (int i = 0; i < kNumberOfFrames; i++){  stringstream ss;  ss << "ninja-sidekick-e" << setfill('0') << setw(4) << i << ".png";  frames.pushBack(cacher->getSpriteFrameByName(ss.str()));}// play the animationAnimation* anim = new Animation;anim->initWithSpriteFrames(frames, 0.05f);someSprite->runAction(Animate::create(anim));

コード例は以上です。 SpriteFrame で他に何ができるかを確認したい場合は、Xcode を開き、Command キーを押しながら SpriteFrame をクリックしてください。 SpriteFrame クラスのインターフェースに移動し、そこで方法論を熟読できます。

結論

この章は以上です。

質問はありますか?以下にコメントを残してください。新しい章がリリースされたときに通知を受け取るように登録することもできます。