2013年3月21日木曜日

cocos2d: 静止系スプライトはピクセルパーフェクトに気をつけよう

Photoshopなどでテクスチャー素材を作成した時はくっきりしているのに、実機に表示してみると「もや」って見えるという経験があるかもしれません。
そんな時は、ピクセルパーフェクトを疑ってみましょう。

動きもののスプライトの場合は、あまり気になることは無いですが、ボタンなどの常に静止しているスプライトの場合は、ピクセルパーフェクトになっていないと目立ちます。


ピクセルパーフェクトとは?

ここで言うピクセルパーフェクトとは、テクスチャーの1ピクセルが、実機ディスプレイの1ピクセルにフィットしている事を指します。

ぼやける原因

cocos2dのCCSpriteは、デフォルトでanchorPointが(0.5,0.5)になっていますが、このままの設定でテクスチャーが、幅、高さのどちらかが奇数になっていた場合、ぼやけて表示されてしまいます。

こんな感じのコードがあったとします。
CCSprite *sprite = [CCSprite spriteWithFile:@"Button.png"];
sprite.position = ccp(160,240);  // 画面中心
[self addChild:sprite];
差し当たって何の問題も無いように見えますが、Button.pngのテクスチャーの縦か横サイズが奇数だとピクセルパーフェクトになりません。

spriteのanchrPoint初期値が(0.5,0.5)だからです。奇数サイズを0.5で掛けると必ず0.5ピクセル分の端数がでてしまい、これがぼやける原因となります。

ぼやけ対策

これを修正するには、表示座標を0.5ピクセルずらせば解決します。
てっとり早いのは、奇数幅のテクスチャーを作らない事です。例えば91ピクセル幅のテクスチャーがあった場合、1ピクセル幅の透明部分を追加して92ピクセルにしてしまう方法です。

そうも行かない場合は、マクロを使って自動で補正させてしまうのも良いでしょう。
以下のようなマクロを作っておきます。
// ピクセルパーフェクト用ccpマクロ anchorPointが(0.5,0.5)のCCSprite専用
#define center_perfect(cx,cy,sp) (CGPointMake(cx+((int)sp.textureRect.size.width%2 ? 0.5f : 0),cy+((int)sp.textureRect.size.height%2 ? 0.5f : 0)))

使用例は以下の通りです。
CCSprite *sprite = [CCSprite spriteWithFile:@"Button.png"];
sprite.position = center_perfect(160,240,sprite);  // 画面中心
[self addChild:sprite];
こうしておけば、Button.pngのテクスチャーサイズが奇数だろうが偶数だろうが、気にする必要はありません。

但し、spriteのanchorPointが(0.5,0.5)である事と、スプライトが移動しない事を前提としてお使いください。

関連記事

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...