Learn iPhone, iOS, Objective-c, Swift, cocos2dx, Unity and ….?

iOSやAndroid開発でのエラー解決法や便利tipsのメモ

RSS Feed

TexturePackerについて – SpriteSheetを使うメリット –

0 Comments
Posted by Kuro on 2013/03/18

TexturePackerのSupportページをくまなく読むと、フリーライセンスがもらえるということがこっそり書いてあります。
ブロガーが対象で、直近の5エントリでゲーム開発やアートに関連する記事を書いているなどの条件付きです。

普段は会社の共有PCで使っているのですが、せっかくなのでフリーライセンスの申請をしてみました。
休日にもかかわらず数時間で返信が来て、TexturePackerとPhysicsEditorのフリーライセンスをいただきました。
購入する場合はセットで3,930円掛かります。(TexturePacker単体は1,963円)
機能制限ありの無料版があるのでまずはそちらで試してみるとよいと思います。

メールには「強制ではないけれど、お返しとしてTexturePackerについて書いてくれると嬉しいなぁ」という一文が当然ながら含まれていました。

公式サイトに載っているSpriteSheetについての動画が分かりやすくておもしろかったので日本語に翻訳して紹介することにしました。

SpriteSheets – TheMovie – Part 1

SpriteSheets – TheMovie – Part 1 by Code’n’Web

Sprite Sheets Essential facts every game developer should know

スプライトシート -すべてのゲーム開発者が知るべき事実-

Look at this game scene – it’s composed from different graphical objects – there are flowers, trees, clouds, and PixelGuy. All these movable game objects are called sprites.

このゲームシーンを見てください。別々の描画オブジェクトで構成されています。花や木や雲、そしてピクセル人間。これらの動かすことができるオブジェクトはすべてスプライトと呼ばれます。

Let‘s now have a look at a particular sprite. A sprite is represented as a rectangular image with a certain width and height in pixels. Our sprite here has a size of 140 x 140 pixels.

では、ひとつのスプライトに注目してみましょう。ある一定のピクセル幅と高さを持った四角形の画像としてスプライトは表されます。このスプライトは140*140ピクセルの大きさです。

For each pixel, some amount of memory is required to store its color. The exact amount depends on the color depth – which is by default 32-bit – and thus consumes 4 bytes. So the complete memory usage of PixelGuy is 140 x 140 x 4 which is 76kB.

ひとつひとつのピクセルは色を持つためにそれぞれメモリを必要とします。正確なメモリの量は色深度によります。デフォルトでは32bit、つまり4bytes消費します。ピクセル人間の総メモリ使用量は140*140*4の76kbになります。

Depending on your graphics hardware you might only be able to use particular sizes for your sprites – e.g. a power of 2 or even worse – squared sprites.

使っているグラフィックスハードウェアによっては特定のサイズでしかスプライトを扱えない場合があります。例えば2のべき乗数だったり、さらに酷い場合は2乗数だったりします。

For this a sprite must be padded with additional unused pixels to match the hardware‘s constraints. To meet this requirement, PixelGuy‘s sprite must be extended to 256 x 256 pixels. This increases the memory usage – now consuming 256kB – which is more than three times the size of the original sprite.

このようなハードウェアの制約に合わせるために、スプライトを使いもしないピクセルで埋め合わせなくてはなりません。この要件に合わせるためには、ピクセル人間スプライトを256*256ピクセルに拡大しなくてはなりません。これによってメモリ使用量は256kbに増加します。これは元のサイズに比べて3倍以上の数値です。

Not much for a single sprite, I must admit – but imagine creating a game with many objects, characters, and animation phases. You might easily end up with hundreds of sprites – each of them wasting precious resources.

確かにひとつのスプライトで見ると大したことはないかもしれません。しかし、たくさんのオブジェクト、キャラクター、アニメーションで作るゲームを考えてみてください。すぐにスプライトの数が数百なんてことになるでしょう。そして、それぞれが貴重なリソースを消費しています。

But what if you could use the wasted memory after all? Imagine packing another sprite into that space!

The result is called a sprite sheet!

Now only the complete sheet has to meet the hardware constraints. As you see, the memory usage is now much lower than it would be using individual sprites.

でも、もし無駄に消費するメモリをやっぱり使えるとしたらどうでしょう。他のスプライトをそのスペースに詰め込むことを想像してみてください。

その結果できたものがスプライトシートなのです!

これによって、ハードウェアの制約に従わなくてはならないのは全体のシートだけということになります。見ての通り、個々のスプライトを使う場合と比べてメモリ使用量は遥かに少なくなりました。

But there’s still more we can do! Let‘s squeeze out the transparent parts of the sprites, packing them even tighter. In our example we have now reduced the memory by another 50%!

しかし、これで終わりではないのです!さらにきつく詰めて、スプライトの透明な部分を絞り出してしまいましょう。この例ではメモリの使用量がさらに50%も削減されました!

But wait! There’s even more we can do – if memory is scarce. In a standard 32-bit color format, each color channel and the transparency is represented by 8 bits – totaling 4 bytes for each pixel. We can reduce the color depth to 16-bit by squeezing out some colors. The quality of the reduction can be improved by applying dithering. The result reduces memory usage by 50%!

ちょっと待って下さい!もしメモリが不足しているなら、まだまだできることがあります。通常の32-bitカラーフォーマットでは、それぞれの色と透明度を8bitsで表します。1ピクセルごとに4bytesです。いくつかの色を絞りだすことで色深度を16-bitすることができます。削減後の画質はディザリングを適用することで向上させることができます。この結果メモリ使用量は50%減少しました!

In the first part, you saw how sprite sheets can help you reduce memory usage for your game. In the second part, you are going to learn how the performance of your game can be increased with sprite sheets.

パート1ではスプライトシートがどのようにしてゲームのメモリ使用量削減に貢献しているのかを見ました。パート2ではスプライトシートを使うことでどのようにしてゲームのパフォーマンスを向上させることができるのかを学んでいきます。

SpriteSheets – TheMovie – Part 2

SpriteSheets – TheMovie – Part 2 by Code’n’Web

Sprite Sheets Essential facts every game developer should know

スプライトシート -すべてのゲーム開発者が知るべき事実-

In the second part you are going to learn how the performance of your game can be increased with sprite sheets.

パート2ではスプライトシートを使うことでどのようにしてゲームのパフォーマンスを向上させることができるのかを学びます。

Let me introduce OpenGL.

まずはOpenGLを紹介します。

He is the artist painting of your game scene and where is called a frame buffer.

彼はゲームシーンとフレームバッファーと呼ばれる場所を描く画家です。

The other important component is of course the game itself.

もうひとつの重要な要素はもちろんゲーム自身です。

Let’s look at what happen if you use individual sprites instead of a sprite sheet.

スプライトシートではなくスプライトを個別に使う場合に何が起こるのかを見ていきましょう。

First the game needs to tell OpenGL which sprite to paint.

まずゲームはOpenGLにどのスプライトを描くのかを伝える必要があります。

Next it needs to tell OpenGL which part of the sprite to draw.

次にスプライトのどの部分を描くのかも伝える必要があります。

And finally it needs to tell him Where on the frame to draw the sprite.

最後にフレームのどこにスプライトを描くのかを伝える必要があります。

With this information OpenGL starts drawing the scene.

この情報をもとにOpenGLはシーンを描きはじめます。

But while he is busy the game has to wait until the next commands can be processed.

しかし、OpenGLが忙しくしているのに対し、ゲームは次のコマンドが処理できるようになるまで待たなくてはなりません。

This procedure is now repeated until all sprites are drawn.

この一連のやり取りはすべてのスプライトが描画されるまで繰り返されます。

Faster this happens the higher the frame rate your game is in the end.

つまり、この処理が速いほどゲームのフレームレートも高くなるのです。

As you can see there is a lot of communication overhead going on between the game and OpenGL.

これまで見てきたように、ゲームとOpenGLのあいだには多くのコミュニケーション費用が発生しています。

Obviously this is not an ideal solution.

これが理想の方法でないことは明らかです。

A better solution is to use a sprite sheet like the one we created in the example before.

より良い方法は、前の例で作成したようなスプライトシートを使うことです。

For this we need an additional module in the game called sprite batch or sprite atlas.

そのためには、スプライトバッチやスプライトアトラスと呼ばれる追加モジュールがゲームに必要になります。

This module collects all the data required to draw the sprites.

このモジュールはスプライトを描画するために必要なすべての情報をひとまとめにします。

Our reference to the sprite sheet, a list of source coordinates which contains the parts of the sheet to be copied from, a list of destination coordinates where the sprites have to be placed on the scene.

スプライトシートへの参照、これからシーンに描き写すスプライトシートの各パーツを含む描画元の座標リスト、シーン上でスプライトが描画される位置の座標リストです。

Now the communication between the game and OpenGL is quite simple.

これでゲームとOpenGLのあいだのコミュニケーションはかなりシンプルになりました。

Set the sprite sheet, set the source coordinate list, set the destination coordinate list.

スプライトシート、変換元の座標リスト、描画先の座標リストを用意するだけです。

That’s it. OpenGL can now draw the scene without further interruption and the game can attend to other tasks like handling players input and calculating collisions and objects movement.

こうして、OpenGLは余計にゲームを中断させることなくシーンを描画できるようになり、ゲームはプレイヤーの入力処理やオブジェクトの移動、衝突判定処理のような仕事に集中することができるようになりました。

As you can see using sprite sheets has a big win.

これで、スプライトシートを使うとどれだけいいことがあるのか分かってもらえたかと思います。

They help reduce memory consumption, they speed up the drawing process and they help to keep the frame rate high.

スプライトシートは、メモリ使用量を減らし、描画処理速度を上げ、フレームレートを高く保つことを手助けしてくれます。

Start using sprite sheets now.

さあ、スプライトシートを使いはじめましょう。

Visit codeandweb.com/texturepacker.

codeandweb.com/texturepackerでお待ちしております。

スポンサードリンク


Filed under cocos2d, Programming
Tagged as ,
You can leave a comment, or trackback from your own site.

0 Comments

コメントを残す

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

Pingbacks / Trackbacks

スポンサードリンク

Popular Posts