FC2ブログ

Entries

cocos2d RetinaDisplayアプリの作り方

iPhone 2D ゲーム用ライブラリ、cocos2d のプログラミングガイド日本語訳。

今回は 「Retina Display」アプリの作り方についてです。

iPhone4 以降では、Retina Display が有効となっていて、ゲームも出来れば高解像度にしたいですよねぇ。

cocos2d では 「ポイント」という概念を導入して、そのあたりを簡単にできるようにしてくれています。

クールなゲームを作るためにぜひとも身につけておきたいところです。

------------------------------------
cocos2dプログラミングガイド
RetinaDisplayアプリの作り方

<目次
これを読むべきひと

このガイドは、RetinaDisplay 上で高解像度のゲームを作りたく、一方で以前の低解像度ディスプレイ iPhones/iPods もサポートしたい方向けです。

このガイドは、cocos2d v0.99.5-rc0 以降のバージョンで有効で、それより前では有効ではありません。

cocos2d での RetinaDisplay
はじめに

すべての cocos2d API はポイントを使用するようになりました。以前のバージョンは、ピクセルを使用していました。

cocos2d v0.99.4 で RetinaDisplay をサポートしましたが、API がピクセルを使用していたため、デバイスによってふたつの異なる位置情報を使用する必要がありました。

例えば、右上隅のスプライトの位置を表すためには、以下のようにしなければいけませんでした:


しかし、v0.99.5-rc0 (とそれ以降) では、こんな風にするだけです:


ポイント対ピクセル
ピクセルとはなんでしょう。ピクセルとは、ウィキペディアによると:http://ja.wikipedia.org/wiki/Pixel

ピクセルとポイントの違いは、ポイントでは論理的な座標空間が使用され、ピクセルではデバイスの座標空間が使用されるというところです。

例:
Device Points Pixels
iPhone 3GSとそれ以前※1 480×320 480×320
iPhone4低解像度モード※2 480×320 480×320
iPhone4高解像度モード※2 480×320 960×640
iPad 1と2 1024×768 1024×768
iPad 3 1024×768 2048×1536
Mac W x H W x H


※1:iPod touch の第三世代以前のデバイスも同様
※2:iPod touch の第四世代のデバイスも同様

iPhone4 で高解像度モードが有効の場合、1ポイントは4ピクセル(2×2ピクセル)で、低解像度モードの場合は、1ポイントは1ピクセルです。


ポイント単位のAPI
前にも言いましたが、v0.99.5ではAPIはポイント単位です。その意味は:

これは、設定用のメソッドでも有効です。


など・・・。メソッドやプロパティの名前が「InPixels」で終わっている場合は必ずピクセル単位のメソッドで、接尾辞がない場合は、ポイント単位です。


ポイントを使うとき、ピクセルを使うとき
すべての時間の95%はポイントを使用したいと思うでしょうが、ピクセルのAPIを使いたいと感じる特別な場合もあるかもしれません。

cocos2dのいくつかの複雑なオブジェクトはピクセル API を使用します。例えば、「CCSprite」、「CCTMXLayer」、「CCLabelBMFont」など。

それで、複雑なオブジェクトを開発している場合はピクセル API を使用する必要があるでしょう。特に、データファイルを解析する必要がある場合は、ピクセル単位の値を持ちます。


接尾辞「-hd」
ほとんどの場合、iPhone 3GS以前のデバイスでは低解像度の画像、iPhone 4以降では高解像度の画像を使いたいと思うでしょう。

Apple は 「@2x」という接尾辞を使いますが、cocos2d ではいくつかの非互換性問題で、その拡張子は使いません。かわりに cocos2d では、「-hd」という接尾辞を使用します。

別の接尾辞を使用したい場合は、ccConfig.h というファイルを編集する事によって可能です。


警告:「@2x」という接尾次の使用はおすすめしません。アップルはこれらの画像を特別に扱うので、cocos2d アプリケーションのバグの原因になる可能性があります

「Default@2x.png」という画像は唯一の例外です。cocos2d は起動時にはまだロードされていないため、起動時の高解像度画像として使用するために、この画像を使用できます。

cocos2d によって開かれるファイル(画像ファイル、設定ファイル、スプライトシートなど)は、CCFileUtils クラスを使用して開かれます。

RetinaDisplay が有効化されているとき、このクラスは「-hd」ファイルを代わりに開こうと試みます。そのファイルが見つからない場合は、もともと要求されたファイルを開きます。

例:RetinaDisplay モードが有効の時に「sprite.png」を開こうとした場合、以下の処理が行われます:
1.「sprite.png」のフルパスを取得します。 → 「/Volumes/XXX/sprite.png」
2.アプリケーションは Retina ディスプレイモードでしょうか?もし違えば、そのままフルパス名を返却します。もしそうなら、ステップ3に進みます。
3.「sprite.png」は接尾辞「-hd」を持っていますか?
4.今回の場合は、その答えは「いいえ」です。そこで、「-hd」を「sprite.png」に付与してみます。 → 「sprite-hd.png」
5.HD の画像 (「/Volumes/XXX/sprite-hd.png」)は存在しますか?
6.存在する場合はそれが使用され、存在しない場合は、HD ではない画像が使用されます。

同様の例:「sprites-hd.plist」を開こうとした場合:
1.「sprite-hd.png」のフルパスを取得します。 → 「/Volumes/XXX/sprite-hd.png」
2.アプリケーションは Retina ディスプレイモードでしょうか? もし違えば、そのままフルパス名を返却します。もしそうなら、ステップ3に進みます。
3.「sprites-hd.plist」は接尾辞「-hd」を持っていますか?
4.はい、そこで、このファイルを使用します。

おわかりのとおり、接尾辞「-hd」はどんなファイルでも有効です:画像(.png, .gif, .bmpなど)、TMXファイル(.tmx, .png)、BMFontファイル(.fnt, .png)、スプライトシート(.plist, .png)。

v0.99.5-rc0 の cocos2d では接尾辞「-ipad」のような他の接尾辞はサポートしていませんが、近い将来サポートする予定です。

メモ:retina モードを有効にした場合、コンパイラは、接尾辞「-hd」の画像ファイル(image-hd.png) と通常のファイル (image.png)の2つを画像のソースとして要求します。

Retina Display モードを有効化
iPhone4 上で高解像度画像を使用したい時にのみ RetinaDisplay モードを有効化すべきです。iPhone4 は低解像度モードでも動作するということを心に留めておいてください。



CCNode の詳細

CCNode
・position はポイント単位
・positionInPixels はピクセル単位
・contentSize はポイント単位
・contentSizeInPixels はピクセル単位
・boundingBox はポイント単位
・boundingBoxInPixels はピクセル単位

CCLabelAtlas
この API はポイント単位です:
 ・+(id) labelWithString:(NSString*) string charMapFile: (NSString*) charmapfile itemWidth:(int)w itemHeight:(int)h startCharMap:(char)c;

幅と高さはポイント単位であることを意味します。それで、RetinaDisplay モードが有効の時にこのメソッドを呼び出した場合は、-hd 画像を用意しておかなければいけません

ImageMagick を使用して「擬似」高解像度画像を作成する手っ取り早い方法は:

警告:ラスターイメージ(ドット絵)をスケールアップすべきではありません。高質の画像は得られません。上記の例は、ゲームを素早くテストできるようにするために手っ取り早く -hd 画像を作るためのものです。

CCLabelBMFont
API はポイント単位ですので、低解像度と高解像度のバージョンを持ちたいのであれば、Hiero などのお気に入りの BMFont エディタで 2x ファイルを作成する必要があります。

例:times32.fnt (と times32.png)(フォントサイズが 32 の Times New Romanフォント)と呼ばれている低解像度のBMFont ファイルを持っている場合は、次のことを擦る必要があります:
1.フォントサイズが 64 の Times New Roman ファイルを作成してください。
2.このファイルを、times32-hd.fnt(と times32-hd.png)という名前で保存してください。

これで、真の高解像度フォントが作成できます。

TMX マップ
API はポイント単位です。高解像度バージョンを作成したい場合は、以下のようにします:
1.map.tmx を map-hd.tmx にコピーします。
2.「map-hd.tmx」を編集してtilewidth や tileheight、spacing、margin などのタイルセット情報ないのサイズやスペーシングを 2 倍します。
3.それから、タイルセット画像の高解像度バージョンを作成する必要があります。

map.tmx のサンプル:

map-hd.tmx のサンプル:

ImageMagick を使用して「擬似」高解像度画像を作成する手っ取り早い方法は:

警告:ラスターイメージ(ドット絵)をスケールアップすべきではありません。高質の画像は得られません。上記の例は、ゲームを素早くテストできるようにするために手っ取り早く -hd 画像を作るためのものです。

スプライトシート (Zwoptex / TexturePacker / .plist)
高解像度スプライトを使用するときは、もう一度ファイル(.plist and .png)を生成すべきです。

例:以下のような 4 つの低解像度画像で spritesheet.plist と spritesheet.pngfiles を生成した場合:
1.sprite1.png
2.sprite2.png
3.sprite3.png
4.sprite4.png

これら 4 つの画像の高解像度バージョンを作成する必要があります。ただし、それらの名前を変更すべきではありません。かわりに、以下のように高解像度ファイルを別ディレクトリに配置したりすべきです。


それから、「hd_sprites」サブディレクトリに配置されたスプライトから spritesheet-hd.plist と spritesheet-hd.png を生成する必要があります。

警告:ラスターイメージ(ドット絵)をスケールアップすべきではありません。高質の画像は得られません。上記の例は、ゲームを素早くテストできるようにするために手っ取り早く -hd 画像を作るためのものです。

スプライト
API はポイント単位です。
1.-(id) initWithFile:(NSString*)filename rect:(CGRect)rect;
2.rect プロパティはポイント単位です。
3.ただし rectInPixels プロパティはピクセル単位です。

それで、このメソッドを使用する場合は、「-hd」画像があるかどうかを確かめましょう。さもないと、スプライトの見た目が悪くなってしまいます。

ImageMagick を使用して「擬似」高解像度画像を作成する手っ取り早い方法は:

警告:ラスターイメージ(ドット絵)をスケールアップすべきではありません。高質の画像は得られません。上記の例は、ゲームを素早くテストできるようにするために手っ取り早く -hd 画像を作るためのものです。

------------------------------------

今回も、翻訳長かったです。

ただ、長いだけあって、いろいろと勉強になりました。

高解像度バージョンでゲーム作るぞ!!

スポンサーサイト



スポンサード リンク

Appendix

出演ゲーム

みやちかんたろうの大冒険

↑インストールはこちらから
予告編

21面デモ

ステージ作成

検索フォーム

訪問者

Apple製品紹介

Apple MacBook Air 1.6GHz 13.3インチ MB003J/A

中古価格
¥59,800から
(2013/1/24 06:45時点)

QRコード

QR

メールフォーム

名前:
メール:
件名:
本文:

Extra

プロフィール

みやちかんたろう

Author:みやちかんたろう
種別:きいろいねこ
年齢:10歳
性別:オス
趣味:昆虫採集
twitter:@gatsupport

※このサイトはリンクフリーです。ご自由にリンクしてください。相互リンクもじゃんじゃん募集中です!!

最新記事

最新コメント

最新トラックバック

月別アーカイブ