TexturePacker生成画像の表示メモ。

TexturePackerを使って、右画像のように、複数画像を配置した透過PNG画像と、plistの二ファイルを生成してもらい、Resourcesに登録した。

が、どうやってtextureから表示して良いか分からず、色々調べるも、古い情報などが多く、実装に時間がちょっとかかったので、メモ。



以下のように、

１：まず、CCSpriteFrameCacheをsharedSpriteFrameCacheでつくる。

２：次に、cacheにspriteFramesWithFile:でplistファイルを追加。

３：そして、spriteにspriteWithSpriteFrameName:で、PNGファイル名を記述。

       CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache]; 

       [cache addSpriteFramesWithFile:@"spriteAtlas.plist"];

       CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"sprite.png"];

        sprite.position=ccp(100,100);

        [self addChild:sprite];

これで、無事表示されました。

Kobold2d　2.0.4、Cocos2d 2.0 にて。

透過PNGは「アルファチャンネルを選択」

透過PNG画像をFireworksで作成して、以下のような白い部分が周辺に残った。

青い方は残り、赤い方はない。

どうしてか、調べてみると、

「インデックス透明カラー」にした場合、白い枠が残るとわかり、

「アルファチャンネル」を選択すると大丈夫だった。

透過PNGは「アルファチャンネルを選択」が、肝要の様子。

はい、綺麗になりました。

iPhone、iPadの画面サイズ。

iPhone、iPadの画面サイズについて、良くまとめられているページがあったので、メモ。

http://program.station.ez-net.jp/special/handbook/objective-c/iphone/ui/layout.asp

Retina対応も、していかなくては。

Retina対応画像ファイルのポイント メモ

IB上できれいに写っているのに、Retinaディスプレイでは画像がぼやけていたので、
「そういえば２倍にしなきゃいけないんだったっけな」と思い、検索。

http://design.kayac.com/topics/2010/09/post-30.php
ここによくまとめてくださっている記事がありました。

要するに
”icon@2x.png”
のように、@2xをつけると、Retina対応になる仕様でした。
例えば57x57pxのアイコンが3GSまでのものなら、114x114pxのものをつくり、@2xを名前に付ける、と。

IBを使わない場合は分かりませんが、各画像に@2xを挿入した解像度縦横二倍の画像をおなじresourcesフォルダに入れておいたら、自動的にRetina対応してくれました。

：：：：：：：：：：：：：：：：：：：：：：：：：

一つ失敗したのですが、
最初、
@x2と書いて、高解像度版がRetinaに反映されずしばし悩みました。
よく調べてみると、@2xが正解でした。（２がxの前）
ちょっと間違えやすいですね。

それからは、「＠２倍（2x)」と口で唱えながら、２倍画像ファイル名制作しています（笑）。

初めての方はお気をつけを。