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 画像を作るためのものです。

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

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

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

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

続きを読む

スポンサーサイト



スポンサード リンク

cocos2d 描画と更新の巻

iPhone 2D ゲーム用ライブラリ cocos2d プログラミングガイドの、描画と更新を日本語訳してみました。

描画のタイミングや、ノードの更新のタイミングを理解しましょう

--------------------------------
cocos2dプログラミングガイド
描画と更新を理解する

<目次
描画と更新

他のゲームエンジンと同様に、描画と更新にはふたつの異なる方法があります。

描画

それぞれのノードは描画メソッドを持ちます。このメソッドは、フレーム毎に呼び出されます。このメソッドの目的は、ノードの描画、ただそれだけで、それ以上でもそれ以下でもありません。このメソッド内で、ivars を更新すべきではありません。

CCNode は、空の描画メソッドを持ちます。

カスタムノードを使用する場合は、描画メソッドをオーバーライドする必要がでてくると思います。以下の OpenGL のステートを描画メソッド呼び出し前にあらかじめ設定しても、なんの意味もありません:

・glEnableClientState(GL_VERTEX_ARRAY)
・glEnableClientState(GL_COLOR_ARRAY)
・glEnableClientState(GL_TEXTURE_COORD_ARRAY)
・glEnable(GL_TEXTURE_2D)

重要:これらのステートを有効・無効にする必要がある場合は、それらを復元する必要があります。
例:


更新
デフォルトでは、それぞれのノードは更新メソッドを持っていません。ノードのステートを更新する必要がある場合は、コールバック関数をスケジューリングしてください。

CCNode のスケジューリングメソッドを呼び出してスケジューリングすることをおすすめします。NSTimer の使用はおすすめしません。

CCNode はタイマーのために以下のメソッドを持っています:

・scheduleUpdate
・scheduleUpdateWithPriority:(int)priority
・scheduleSelector:(SEL)selector
・scheduleSelector:(SEL)selector interval:(float)interval

上記メソッドの特性:

・スケジュールされたコールバック関数は、そのノードが「ステージ上(on stage)」にあって、そのノードが動作中のノードの一部である場合にのみ呼び出されます。
・スケジュールされたコールバック関数は、ディレクターが停止している場合は呼び出されません。
・これらのメソッド内でいかなる描画も行うべきではありません。
・これらは、引数としてデルタタイム(delta time)を受け取ります。

scheduleUpdate
scheduleUpdate かつ/または scheduleUpdateWithPriority はコールバック関数をスケジュールするお勧めする方法です。(v0.99.3 から有効)

これらのメソッドを呼ぶと、Update メソッドが「delta time」を引数として、フレームごとに呼び出されるようになります。

scheduleUpdate は scheduleUpdateWithPriority:0 と指定したときと同じです。

例:

scheduleSelector と比べると、少しだけ速く、消費するメモリが少しだけ少ないので、scheduleSelector ではなくて scheduleUpdate を使ってみましょう。


scheduleSelector
scheduleSelector:(SEL)selector はコールバック関数をスケジュールする「古い」方法です。インターバル(interval)を指定してコールバックをスケジュールできますが、優先順位は指定できません。

interval==0 を指定する場合また、interval を使用しない場合はスケジュールしたコールバックはフレームごとに呼び出されます。

例:

コールバック関数の呼び出しを止めるには、以下のようにします:

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

久々に翻訳が短かった。

Node クラスを定義すると、draw は 呼び出されるけど、update は自分で呼び出しをスケジュールしてあげないといけないんですね。

デートをするときは、お食事は自動的に行くけど、その後はきちんとスケジュールしておかないといけないのと似ています。

似てないか・・・。

スポンサード リンク

cocos2d パーティクルデザイナを使ってみた

iPhone 2D ゲームライブラリ cocos2d のデモプロジェクト内で、一番自分が興味を持ったのは、パーティクルでした。

例えば、みやちかんたろうの大冒険だと、ちかん君のヒゲの効果とかにこのパーティクルを使えば、すごくかっこいいヒゲカッターが実現できたと思うし、ヒゲがあたった時なんかもすごくかっこよくなるはずです。

雨や雪なんかもふらせるようですし、もう、期待は膨らむいっぽうです。

ということで、cocos2d プログラミングガイド「パーティクル」に出てきた、パーティクルデザイナを使ってみようと思います。

ダウンロード
まずは、パーティクルデザイナのウェブサイトへアクセスします。
201302180001_s.png

さすがにおしゃれですね。
右下に、Free Download というのがあるので、迷わずクリック。

201302180002.png
ダウンロードされて展開されました。

ParticleEmitterDemo っていうのは、Xcode の プロジェクトみたいです。後ほど、Xcode で開いてみたいと思います。

起動
ParticleDesigner.app をダブルタップして起動してみましょう。
201302180003.png

なんかすごいのが起動した。

Unregistered っておもいっきり書いてありますね。。。プログラミングガイドによると、登録しないと保存ができないらしいです。

後ろの一覧をポチポチすると、それぞれのパーティクルが手前の iPhone に表示されます。いや、ワクワクします。

Mega Jump とかみたいなのが、簡単に作れちゃいそうですね。っていうか、これを使ってるんでしょうね。(未確認)

すげー、下の方にスクロールしてみたけど、めちゃくちゃいっぱいある。なんだこれは。世の中には知らないことがまだいっぱいある。まだ死ねない。

買う、絶対買う。

201302180004.png
と思ったけど、1340円かぁ・・・。2011年頃の記事には7.9ドルって書いてあったのに・・・。円高!?衝動買いするにはちょっぴり高価ですね。

ということで購入前に、機能を調べてみることにします。

なんだかよくわかりませんが、右上の 「Emitter Config」っていうところを押してみます。

201302180005.png

ポチッとな。


201302180006.png
設定画面らしきものが出てきました。

きっとこのパラメータをいじると、いろんなパーティクルになるのでしょう。

ものはためし、いっこずつ、いじってみます。基にするのは、現在たまたま表示されている「water」にしたいと思います。


Max Particles(最大粒子)

パーティクルの最大数を制御するようです。

1000だとこれくらい。

201302180007.png


100だとこれくらい。

201302180008.png

ちなみに実際は、粒子が動いててとても綺麗ですから。ぜひともダウンロードしてみてくださいね。


Lifespan(生存期間)とLifespan Variance(生存期間のゆらぎ)
パーティクルの生存期間を指定するようです。Variance は分散って意味ですが、「ゆらぎ」っていったほうがぴったりくるような気がします。

XX Variance っていうのは、XX で設定した値からのゆらぎ、つまり、XX の値が 1 で Variance が 0.5 だったとしたら、XX は 1 〜 1.5 の範囲でゆらぐんだと思います。いや、0.5〜1.5かな?

その揺らぎ方は、Variance っていうくらいだから平方偏差に従うんでしょうかね。

まずわかりやすいように、Lifespan Variance を 0 にしてみました。

201302190001.png

ゆらぎがなくなったので、すべてのパーティクルが同じ生存期間で消えてしまうので、丸く見えるようになりました。この時の Lifespan の値は、0.461 です。

Lifespan の値を大きくすると、

201302190002.png

パーティクルの密度が低くなって、縦長になりました。存在するパーティクルの数は、Max Particles で指定したパーティクルの数で、生存期間が短いと、消えては発生するプロセスが短いスパンで行われるため、パーティクルの密度が高くなりますが、生存期間が長いと、消えるまでの時間が長くなり、発生点からより遠いところにいくまで消えないため、パーティクルの密度が低くなります。

ですので、高い密度で長いパーティクルを作りたい場合は、Max Particles の数を大きくし、Lifespan を大きくすればいいということですね。


開始サイズ(Start Size)とゆらぎ(Start Size Variance)
終了サイズ(Finish Size)とゆらぎ(Finish Size Variance)
パーティクルが発生したときのサイズと消えるときのサイズとそのゆらぎを指定するようです。

201302190003.png

上の画像は、
Start Size : 25
Start Size Variance : 0
Finish Size : 0
Finish Size Variance : 0

を指定した場合のパーティクルです。大きなパーティクルが最後にはとても小さくなって消えていく効果が作れます。

開始と終了の値を逆にしてみると、
Start Size : 0
Start Size Variance : 0
Finish Size : 25
Finish Size Variance : 0

201302190004.png

小さかったパーティクルが消滅の時は大きくなっているという効果が得られます。


放出角度(Particle Emit Angle)とゆらぎ(Particle Emit Angle Variance)
パーティクルが放出される際の角度を指定します。0 を指定すると、

201302190005.png

真右に向かって放出されます。Variance には 0 を指定しています。

次に、120 を指定してみると、

201302190006.png

左斜め上に放出されます。右から始まって、反時計回りに360まで指定できるようです。

次に、Variance に 90 を指定してみます。(見やすいように、Particle のサイズを調節しました。)

201302190007.png

上下に90度パーティクルが広がりました。 ±90度ゆらいでます。


回転開始(Rotation Start)とゆらぎ(Rotation Start Variance)
回転終了(Rotation End)とゆらぎ(Rotation End Variance)
これは、パーティクルの回転を指定するようです。

今使っているパーティクルは 丸 なので、回転されてもさっぱりわかりませんので、星の奴に変えてみました。
201302190008.png

201302190009.png

くるくる回ってます。静止画では伝わらないと思いますが・・・。


背景色(Background Color)
文字通り、背景色を変更します。特筆すべきことはありませぬ。


放出種別(Emit Type):重力(Gravity)
重力を表した動きでございます。

そうそう、そういえば昨日、リンゴの木を見ていたら、リンゴが木からぽとりと落ちるのを見ました。

リンゴが地面に落ちた時、リンゴがぱかりと2つに割れて、中からリンゴ太郎が出てきました。

その時ふと思ったのです。この男の子は、重力なんじゃないかって。

期間(Duration)
パーティクルを放出する期間です。-1 を指定すると永久に放出されるようです。プログラミングガイドの kCCParticleDurationInfinity が -1 なのでしょう。0.1 とかを指定すると、一瞬で放出が止まってしまいます。

静止画じゃ無理があるので、実際にやってみてください。


重力設定(Gravity Configuration)
Emitter Type を重力にした場合の設定です。

速さ(Speed)とゆらぎ(Speed Variance)
放出速度を指定するようです。50 を指定すると、こんな感じです。

201302190010.png

放出する際の速度が遅いため、重力に引っ張られています。自由落下で初速度を横向きにした場合の諸速度が小さい時をイメージすると分かりやすいかもしれません。

速度を大きくしてみると・・・

201302190011.png

300 に設定してみました。かなり広がりました。初速度が大きいので、その分横に広がります。


重力X(Gravity X)と重力Y(Gravity Y)

これは重力の向きですね。地球では重力は上から下へ向かっていますが、このデザイナでは重力の向きを操ることができるようです。

X:1000、Y:1000 を指定してみました。

201302190012.png

重力が、左下から右上の向きになりました。メテオチックですね。

放出加速度(Radial Acceleration)とゆらぎ(Variance)
放出の際のパーティクルの加速度を指定するようです。負の値の場合は減速するようです。

201302190013.png

-250 を指定してみました。確かに減速しています。


接線方向加速度(Tangential Acceleration)とゆらぎ(Variance)
これは接線方向の加速度を指定するようです。指定すると回転しているようにみえます。

201302200001.png

上記は、Tangential Acceleration を 1000、Gravity を両方 0 に設定した時です。

静止画では伝わりづらいですが、左回りにくるくる回りながら外向きに放出されています。

以上で、Gravity の設定は終わりです。


放出種別(Emit Type):半径(Radial)
Radial は直訳すると半径という意味です。
201302200002.png

Max Radius で指定した半径からパーティクルが内側に向かって放出されるようです。

最大半径(Max Radius)とゆらぎ(Max Radius Variance)
最小半径(Min Radius)
最大半径は、パーティクルを内向きに放出する開始地点の中心からの距離です。大きくすると、単純に円が大きくなります。小さくすると小さくなります。

最小半径は、パーティクルの到達地点の中心からの距離です。これを 0 以上に指定すると、ドーナツのようになります。最大半径から内向きに放出されて、最小半径で消滅するからです。

201302200003.png


角度毎秒(Deg. Per Second)とゆらぎ(Deg. Per Second Variance)
一秒間に回転する角度を指定するようです。

中心に向かって回転しながらパーティクルが進みます。

201302200004.png

上記は、Deg. Per Second を 100 に指定してみました。左回転をしながら中心に吸い込まれていっています。

以上で、Radius の設定は終わりです。


あとは、場所とか色とか、わかりやすい設定値ばっかりですね。

作ってみて実際に Xcode 上で動かしてみたいんですが、購入しないと保存できません。。

おさいふと相談してみます。


スポンサード リンク

cocos2d パーティクル

iPhone 2D ゲーム用ライブラリ cocos2d のプログラミングガイドを日本語訳しながら読んでいます。

今回は、パーティクル。日本語では「粒子」とかそういった意味です。

cocos2d のデモを見ましたが、これすごいですね。

すごい効果をゲームにつくり込むことができます。

これを駆使すれば、スマートでクールなゲームがじゃんじゃん作成できると思います。

ここで実際にパーティクルデザイナを使用してみています。イメージがわきにくい方は是非最初にみてみてください。

では読んでいきましょう!

--------------------------------
cocos2dプログラミングガイド
パーティクル(Particles)

<目次
パーティクル(Particles)の使い方

パーティクル(Particles)
パーティクルシステムとは?
Wikipedia: パーティクルシステム

cocos2d でのパーティクルシステム

ポイント(Point) 対 クワッド(Quad)
cocos2d には、2種類のパーティクルシステムがあります:クワッド(Quad)とポイント(Point)パーティクルシステムです。
・CCParticleSystemQuad
・CCParticleSystemPoint

CCParticleSystemQuad は CCParticleSystemPoint ではサポートされていない以下の追加機能があります。
・回転(spinning)パーティクル:パーティクルは軸の周りを回転することができます。CCParticleSystemPoint ではこのプロパティは無視されます。
・パーティクルはいかなるサイズも指定可能です。CCParticleSystemPoint では、サイズが 64 より大きい場合は、64 として扱われます。
・全システムで scale プロパティを使用して測定されます。

パフォーマンスの比較
API docs より
・初代、第二世代iPhoneでは:CCParticleSystemQuad はほんのちょころびっとだけ CCParticleSystemPoint より遅い
・第三世代iPhoneとiPadでは:CCParticleSystemQuad は CCParticleSystemPoint よりとても速い
・CCParticleSystemQuad は CCParticleSystemPoint よりも RAM と GPU メモリを消費する

ポイントパーティクルシステムの構築
ポイントパーティクルシステム(Point Particle System)を構築するためには:

クアッドパーティクルシステム(Quad Particle System)の構築
クアッドパーティクルシステムを構築するためには:


重力(Gravity) 対 半径(Radius)モード
v0.99.3 から、半径(Radius)モードが新規に追加されました。それ以前では重力(Gravity)モードが呼ばれます。

重力(Gravity)モード
以下のプロパティは重力(Gravity)モードでのみ有効です。
・gravity (CGPointで指定)。パーティクルシステムの重力を指定。
・speed(floatで指定)。パーティクルが放出される際のスピード
・speedVar(floatで指定)。速さの自由度(variance)。
・tangencialAccel(floatで指定)。パーティクルの接線方向の加速度(tangential acceleration)
・radialAccel(floatで指定)。パーティクルの放射加速度(radial acceleration)
・radialAccelVar(floatで指定)。放射加速度の自由度(variance)

重力(Gravity)モード(デフォルト)でパーティクルを設定するには、以下のようにしてください:

半径(Radius)モード
※v0.99.3 以降で有効

以下のプロパティは半径(Radius)モードでのみ有効です。
・startRadius(floatで指定)。パーティクルの開始半径。
・startRadiusVar(floatで指定)。開始半径の自由度。
・endRadius(floatで指定)。パーティクルの終了半径。開始半径 == 終了半径 としたい場合は、kCCParticleStartRadiusEqualToEndRadius を使用する。
・endRadiusVar(floatで指定)。終了半径の自由度 。
・rotatePerSecond(floatで指定)。最初の位置の回りを一秒間に回転する角度
・rotatePerSecondVar(floatで指定)。角度の自由度。

半径(Radius)モードでパーティクルを設定するには、以下のようにしてください:

すべてのモードで共通のプロパティ
パーティクルの共通プロパティ:
・startSize:パーティクルの開始ピクセルサイズ。
・startSizeVar
・endSize: 開始サイズ == 終了サイズとしたい場合は、kCCParticleStartSizeEqualToEndSize を使用。
・endSizeVar
・startColor (cColor4Fで指定)
・startColorVar (ccColor4Fで指定)
・endColor (ccColor4Fで指定)
・endColorVar (ccColor4Fで指定)
・startSpin。CCParticleSystemQuadでのみ使用される。
・startSpinVar。CCParticleSystemQuad でのみ使用される。
・endSpin。CCParticleSystemQuad でのみ使用される。
・endSpinVar。CCParticleSystemQuad でのみ使用される。
・life: パーティクルの生存時間(秒)。
・lifeVar:
・angle: (floatで指定). パーティクルの開始角度。
・angleVar
・positon: (CGPointで指定)
・posVar
・centerOfGravity (CGPointで指定)

システムでの共通プロパティ:
・emissionRate (floatで指定).。一秒間に放出されるパーティクル数。
・duration (floatで指定).。パーティクルシステムの生存期間(life プロパティとは異なる)。無期限の場合は kCCParticleDurationInfinity。
・blendFunc (ccBlendFuncで指定). システムで使用するための OpenGL のブレンディング関数 (blending function)。
・positionType (tCCPositionTypeで指定). パーティクルを自由動作させるには、kCCPositionTypeFree(デフォルト値)を指定。グループで移動させるには kCCPositionTypeGrouped を指定。
・texture (CCTexture2Dで指定). パーティクルで使用されるテクスチャ。



cocos2d では実行時にカスタマイズ可能な定義済みのパーティクルが同封されています。定義済みパーティクルの一覧:
・CCParticleFire: ポイントパーティクルシステム。重力モード使用。
・CCParticleFireworks: ポイントパーティクルシステム。重力モード使用。
・CCParticleSun:ポイントパーティクルシステム。重力モード使用。
・CCParticleGalaxy:ポイントパーティクルシステム。重力モード使用。
・CCParticleFlower:ポイントパーティクルシステム。重力モード使用。
・CCParticleMeteor:ポイントパーティクルシステム。重力モード使用。
・CCParticleSpiral: ポイントパーティクルシステム。重力モード使用。
・CCParticleExplosion:ポイントパーティクルシステム。重力モード使用。
・CCParticleSmoke:ポイントパーティクルシステム。重力モード使用。
・CCParticleSnow:ポイントパーティクルシステム。重力モード使用。
・CCParticleRain:ポイントパーティクルシステム。重力モード使用。


パーティクルデザイナ

パーティクルデザイナ(Particle Designer)の使用

パーティクルデザイナはビジュアルにパーティクルを作成できるツールです


パーティクルデザイナを使用するためには:
1.パーティクルデザイナをダウンロードして、ユーザ登録してください。(ユーザ登録しない場合は、パーティクルの保存ができません。)
2.テクスチャの保存の際は「cocos2d (plist)」フォーマットを使用してください。(テクスチャは埋め込んでも埋めこまなくても良い。cocos2d は両方共サポートしています。)



パーティクルデザイナで作成したパーティクルを読み込むためには:


cocos2d と パーティクルデザイナ 間での相違

cocos2d はパーティクルデザイナのすべての機能をサポートしていますが、パーティクルデザイナは cocos2d の機能のすべてをサポートしていません。

cocos2d のみでサポートされている:共通
・startSpin / startSpinVar :クワッド使用時のみ
・endSpin / endSpinVar :クワッド使用時のみ

cocos2d のみでサポートされている:重力(Gravity)モード
・tangentiallAccel / tangentialAccelVar: cocos2d でのみサポート
・radialAccel / radialAccelVar: cocos2d でのみサポート

cocos2d のみでサポートされている:半径(Radius)モード
cocos2d はパーティクルデザイナから半径モードをコピーし、そして少しだけ拡張しました。

パーティクルデザイナは以下の3つのプロパティを使用します。
・maxRadius
・maxRadiusVariance
・minRaidus

そして、cocos2d はこれらほかの値を使用します。
・startRadius
・startRadiusVar
・endRadius
・endRadiusVar

cocos2d はパーティクルデザイナの振る舞いをエミュレートし、そして少しだけ実現性のある以下のようなことを提供します:
・半径(Radius)の変化(variance)を 0 または負(内側から外側へ増える)に設定可能。


Particle Mint

Particle Mint の使用

Particle Mint はiPhone や iPad 上で動作するビジュアルにパーティクルを作成可能なもうひとつのツールです。App Storeからダウンロード可能です。



Patricle Mint で作成したパーティクルを使用するためには:
1.パーティクルシステムを保存して送信するためにアプリを購入してください。
2.作成したパーティクルシステムを自分自身にメールし、そしてメール内の説明のとおりにします。実際には、Xcodeプロジェクトに Particle Factory クラスを追加し、パーティクルシステムを構築する static メソッドを挿入します。

Particle Mint で作成したパーティクルを読み込むには:
・Particle Factory クラスとテクスチャをプロジェクトにインポートします。
・以下のコードを使用します:

サポートされている機能

Particle Mint は、cocos2d-1.0-rc3 をベースとしています。ですので、すべてのパーティクルシステムの機能をサポートしており、デバイス上で真のパフォーマンスが得られます。

-----------------------------------
この、パーティクルってすごいですね。

いろんな効果にどんどん使っていきたいと思います。

パーティクルデザイナを実際にいじってみています。是非こちらも参照ください。
スポンサード リンク

cocos2d タイル化マップ

iPhone 用ゲーム作成ライブラリ cocos2d のプログラミングガイドを日本語に訳しながら読んでいます。

今回は、マップの使い方

このあたりを自分で実装するととても面倒臭いんです。

みやちかんたろうの大冒険の際はとても苦労しました。

そのあたりが簡単に実現できるのではという期待のもと、読み進めていきたいと思います。

--------------------------------
cocos2dプログラミングガイド
タイル化マップ

<目次
タイル化マップの作り方と使い方

タイル化マップ

cocos2d では、タイル化マップを作成するのにふたつの方法があります。

TMX Tile Map フォーマット(新しい、より柔軟、お勧め)と、PGU Tile Map フォーマット(古い、お勧めしない)です。

TMX Tile Map フォーマット
cocos2d は、Tiled で作成されたマップをサポートしています。

Tiled には、ふたつのバージョンがあります:
・Mac OS X、Windows 、Linux上で動作する java アプリケーション。
・java バージョンのほとんどの機能をサポートする QT(ネイティブ)アプリケーション。これを書いている時の QT バージョン 0.40 は六角形マップをサポートしていません。

以下のページでは、 Tiled を使ったマップの作成方法が説明されています。
Creating a single map with Tiled

cocos2d は以下の TMX マップをサポートしています:
・志向(Orientation)
 ・直行座標(Orthogonal)マップ
 ・等角図(Isometric)マップ
 ・六角形(Hexagonal)マップ (角が左右、角が上下はサポートされていません。おそらく Tiled も同様です。)
・タイル(Tiles)
 ・埋め込みタイル(Embedded tiles)はサポートされていません。(埋め込み画像によるタイルセットなど)
 ・埋め込みタイルセット(embedded tilesets)のみサポートされています。(タイルセットは埋め込まれていますが、画像は埋めこまれていません。)
 ・ひとつのレイヤーにひとつのタイルセットのみがサポートされています。
・レイヤー
 ・好きなだけレイヤーをもてます。
 ・それぞれのレイヤーは CCTMXLayer によって内部的に表現されます。(CCTMXLayer は CCSpriteSheet のサブクラスです。)
 ・それぞれのタイルは CCSprite によって表現されます。(CCtxLayer がその親となります。)
・オブジェクトグループ
 ・タイル化オブジェクトグループも同様にサポートされています。


外部イメージでの埋め込みタイルセットの作成方法
cocos2d はタイルセット内の埋め込み画像をサポートしていません。(ただし、チップセットの中に埋め込まれたタイルセットは必要です。)かわりに、スプライトシート画像(AKA: Texture Atlas)を自分自身で作成する必要があります。

Tiled の設定
Tiled に埋め込みイメージでタイルセットを保存しないように設定しましょう。

一度だけ Tiled で以下を行ってください。
・Edit → Preferences → Saving
・レイヤーオプション(Layer Options)
 ・バイナリエンコーディングの使用(Use binary encoding):ON(cocos2d は、text エンコーディングをサポートしていません。)
 ・圧縮レイヤーデータ(Compress layer data):ON(非圧縮データもサポートしてます。)
・タイルセットオプション(Tileset Options)
 ・画像の埋め込み(Embed images)(PNG):OFF(埋め込み画像はサポートしていません。)



メモ:新規にマップを作成する際は、マップサイズとは、マップのピクセルサイズではなく、縦と横のタイル数を指します。iPhone がサポートするマップのサイズには制限があります。(ユーザコメント:44px ×44px のタイルを 100×100 にした場合は動作しましたが、400×200は画面が真っ黒になり動作しませんでしたとさ。)


タイルセットが埋めこまれているか確かめる
マップ用のタイルセットはマップファイルに埋め込まれていなければなりません。
Tiled 内でこれはタイルセットマネージャによって操作されます(Tilesets → Tileset Manager でアクセス)。
タイルセットリスト内のタイルセット名の右のカラム内の「(Embedded)」を見てみてください。パス文字列の代わりにリスト内の行を選択し右側の埋め込みアイコン(Embed icon)を選択してください。埋め込みタイルセットに変換してくれます。

別のツールを使っているか、自分自身で確かめたい場合は、テキストまたはXMLエディタで、拡張子 .tmx のファイルを開き ノードを確認して下さい。ファイル名が指定された SOURCE プロパティが存在する場合は cocos2d-iPhone では動作しない外部のタイルセットです。


スプライトシートの作成
便利な画像詰め込みツールが幾つかあります。
mkatlas.pl コマンドラインベースのテクスチャアトラス作成ツール (cocos2dに同封されてます) (無料)
Packer ビジュアルなテクスチャアトラス作成ツール (無料)
Image Magic コマンドラインベースのユーティリティ (無料)
zwoptex ビジュアルなテクスチャアトラス作成ツール (無料と商用)
TexturePacker グラフィカルなUI + コマンドライン (無料と商用)

これらのツールは個々の画像からスプライトシートを作成します。

スプライトシートの制限
・最大サイズ:iPhone 3GS 以降 2048×2048、それ以前 1024×1024
・タイルはすべて同じサイズでなければならない

オプション:
・マージン(margin):余白内のピクセル内の空間
・スペーシング(spacing):タイル間のピクセル内の空間

マージンが2、スペーシングが2をおすすめします。

スプライトシートの変な線が出るのを修正(spritesheet artifact fixer)
マップを移動させたときに、タイルの境界に変な線が出た場合は、このツールでなおしましょう。※この線はシュミレーターでは発生せず、iPhone デバイスでのみ発生します。

「spritesheet-artifact-fixer」は cocos2d に同封されたスプライトシートを修正するためのちょっとしたツールです。

その原理は、タイルの境界をスペーシング・マージンピクセルにコピーすることです。理論上は、スペーシング・マージンピクセルは描画されませんが、実際にはごくたまに、特にアンチエイリアスされたテクスチャや 3D プロジェクションを使用している場合に描画されることがあります。

このツールの使い方:

同様に、TexturePacker の 「–extrude」機能を使用もできます。


座標(Coordinates)とGID
座標(Coordinates)
64×32 のマップのタイルで使用される座標システム(Coordinates system)は:
・(0,0):左上隅
・(63,31):右下隅



GID
タイルの GID は、そのグローバルな識別子(Global IDentifier) です。この値は、1から始まりタイルの数までの unsigned int 値です。



5個の別のタイルがあった場合は、
・Tile 0 の GID は 1
・Tile 1 の GID は 2
・Tile 2 の GID は 3
というふうになります。

GID 0 は空のタイルを表すために使われます。


TMXノードの作り方

デフォルトのすべてのタイルはエイリアスされています。アンチエイリアスタイルを作成したい場合は以下のようにします:

すべての例は:
tests/TileMapTest.m


タイルの取得・追加・削除・変更方法

座業を指定してタイル(CCSprite)を取得する方法:

座業を指定してタイルの GID を取得する方法:

座業を指定して新規のタイルの GID を設定する方法:

座業を指定してタイルを削除する方法:

レイヤーをイテレート(iterate)する


Z オーダーとデプスバッファ(depth buffer)
※v0.99.1 以降で有効な情報です
※等角図と直交座標のみで有効で、六角形マップでは無効な情報です

ゲーム内で、スプライトの Y 座標によって(直交座標マップと等角図マップの両方で同様) 、スプライトをどれかのタイルの前か後ろに配置したい場合は、2つのオプションが使用できます:
・OpenGL ES のデプスバッファ(depth buffer)を使用
・複数の TMX レイヤーと Zオーダーを使用

デプスバッファ(depth buffer)を使用
このオプションは、OpenGL ES のデプスバッファを使用します。それで、まず最初に、Zバッファ(z-buffer)と2Dプロジェクション(2D projection)を作成しなければなりません。

2つの TMX レイヤーでマップを作成することもとても重要です。
・背景用レイヤー。草原とか
・前景用レイヤー。林とか



草原レイヤーはスプライトの後ろ側になります。そのため、その頂点Z座標は可能なかぎり小さくすべきです。例えば -1000 等。林レイヤーはタイルで違った頂点Z座標をセットすべきです。上の方のタイルより下の方のタイルのZ座標を大きく設定しましょう。

この設定を行う方法は以下のとおりです:
1.タイルを開きます
2.背景レイヤーを選択します。(草原等)
3.Tiled → Layer → Layer Properties
4.cc_vertexz = -1000 を追加
5.前景レイヤーを選択します。(林等)
6.Tiled → Layer → Layer Properties
7.cc_vertexz = automatic を追加

もう一つ重要なことは、GL_ALPHA_TEST を有効にしてスプライトを描画することです。
例:


質問:cc_vertexz はどのように動きますか?
回答:cc_vertexz は 「automatic」という文字か整数値の文字を指定できます。
・値に数値(正または負)を指定した場合、その数値は指定されたレイヤー上のすべてのタイルに、指定したvertexZが適用されます。
・値に「automatic」を指定した場合は、タイルの一行目の vertexZ の値が -1、次の行が -2 といった具合になります。

唯一やらなければならないことは、Y の位置によって vertexZ を変更することです。
例:

サンプルの動作に関しては、TileMapTest.m を参照ください。

質問:cc_alpha_func は使用すべきですか?
回答:cc_alpha_func の値は cc_vertexz=automatic の時にのみ使用されます。デフォルトでの値は 0 です。この値は、GL_GREATER を設定した関数を使用してタイルを描画するために使用されます。CCTMXLayer がタイルを描画する方法は以下のとおりです:



例:

等角図での頂点 Z の例。「林」と「草原」の2つのレイヤーを持つ。「林」レイヤーは cc_vertex=automatic が設定されている。「草原」レイヤーには、cc_vertexz=-1000 が設定してある。


直角座標 での頂点 Z の例。「林」と「草原」の2つのレイヤーを持つ。「林」レイヤーは cc_vertexz=automatic と cc_alpha_func=0.5 を使用している。「草原」レイヤーには、cc_vertexz=-1000 が設定してある。


複数の TMX レイヤーと Zオーダーを使用
マップのそれぞれのレイヤーは、自動的に自分自身の Z オーダーの値を設定するため、TMX エディタ内にレイヤー属性を追加する必要はありません。TMXMap の子ノードとしてスプライトを追加することで、マップオブジェクトのレイヤー内にそのスプライトを動的に配置することができます。

動作の例はここを参照:TileMapTest.m


スクリーンショット

3D プロジェクションとアンチエイリアスタイルを使用した直交座標マップ。タイルは、spritesheet-fixer ツールで修正してある。3D プロジェクションとアンチエイリアスタイルを使用してても、変な線は現れない。


直交座標マップ。マップのタイルサイズはタイルより小さい。


2D プロジェクションとエイリアスタイルを使用した等角図マップ。


2D プロジェクションとエイリアスタイルを使用した六角形マップ。頂点は左右。上下頂点はサポートされていない。

PGU タイルマップフォーマット
PGU タイルマップも使用可能です。

このフォーマットは柔軟性がなく(サイズの制限がある)、エディターにいくつかのバグがあると思われるため、このフォーマットはおすすめしません。昔作ったゲームで使用しているのであれば使用の継続は可能ですが、その使用はおすすめしません。

代わりに TMX タイルマップの使用をおすすめします。

このフォーマットに関するいくつかの記事:
read/write in TileMapAtlas
How to use the PGU tile editor
Plugin to generate PGU maps with the Tiled editor


-----------------------------------------
長かった。この翻訳は長かった。
でも、ゲームの肝となる部分ですね。
いろんなエディタが用意されていて、かなり簡単にマップが作成できそうな予感がします。

早く実際に使ってみたいです。

続きを読む

スポンサード リンク

cocos2d ラベルとフォントの巻

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

今回は、ラベルとフォントに関する内容です。

スプライトとかと違って地味だけど、ゲームの見た目を左右するかなり重要なファクターですので、しっかり学んでおきたいところです。

--------------------------------
cocos2dプログラミングガイド
ラベルとフォント

<目次
ラベルとフォント

はじめに
cocos2d は、TTF(True Type Fonts)ラベルとテクスチャアトラスラベルの両方をサポートしています。

(cocos2d Version .7+ 以上で、ラベルは add: ではなく addChild: でレイヤーに追加される(例:[self addChild:myLabel];)ことを覚えておいてください。)

TTF ラベルのメリット・デメリット:
・メリット:TTF フォントのすべてのメリットをサポート(サイズやカーニングなど)
・メリット:簡単に使用可能。外部エディタが不要
・デメリット:新規のテクスチャが作成されるため、作成や更新の処理が大変遅い

テクスチャアトラスラベルのメリット・デメリット
・メリット:新規のテクスチャを作成しないので、作成や更新が大変早い
・メリット:フォントのカスタマイズが可能(影付き、傾き、ぼかしなど)
・デメリット:外部エディタが必要。AngelCode / Hiero editor, GIMP / Photoshopなど


ラベルオブジェクト


ラベルの作成:簡単な方法
CCLabel オブジェクトを使用することにより簡単にラベルを作成できます。
例:

fontName は、使用されるフォント名です。

TTF のカスタムファイルを使用することもできます。.ttf ファイルをプロジェクトに追加するだけです。TTF カスタムファイルの例:

・cocos2d は FontLabel ライブラリの使用を試みるフォントの読み込みを試みます。
・それが失敗した場合は、UIFont クラスを使用します。

重要:OpenGL テクスチャのサイズはフォントサイズとフォント名を基に自動的に計算されます。

ラベルの作成:複雑な方法
以下の API を使用することでテクスチャを作成可能です。

この方法を使用する場合は、使用される OpenGL テクスチャの大きさを渡すべきです。テクスチャの大きさが十分でない場合は、ラベルの一部のみが描画されます。
alignment に指定可能な値:
・UITextAlignmentLeft (左寄せ)
・UITextAlignmentCenter (中央揃え)
・UITextAlignmentRight (右寄せ)

CCLabelProtocol プロトコルで実装されたあらゆるオブジェクトと同様に、setString メソッドでラベルを更新できます。
例:

重要:setString を呼び出した場合は常に新規の OpenGL テクスチャが作成されます。これは、setString は 新規の CCLabel を構築するのと同じくらい遅いことを意味します。頻繁に更新する必要がある場合は、CCLabel を使用せずに、かわりに CCLabelAtlas か CCBitmapFontAtlas を使用してください。


色のパラメータを呼び出すことで簡単にフォントの色を以下のように変更できます。

ccc3 色の例:

白 - (255,255,255)

黒 - (0,0,0)

青 - (0,0,255)

緑- (0,255,0)

赤 - (255,0,0)

灰色 – (84,84,84)

茶色 – (165,42,42)

ピンク – (255,192,203)

紫 – (160,32,240)

黄色 – (255,255,0)

金 – (255,215,0)

文字の位置
anchorPoint プロパティを使って文字の位置を変更することができます。


テクスチャアトラス ラベル
テクスチャアトラスラベルを基にした2種類のラベルがあります。
・CCLabelBMFont
・CCLabelAtlas

CCLabelBMFont


はじめに
CCLabelBMFont は高速にラベルを作成するおすすめの方法です。それは、
・エディタでビットマップ(画像)をカスタマイズ可能
・ペナルティ無しにラベルを更新・初期化可能
・とても自由度が高い。CCSpriteのようにラベルのそれぞれの文字を取り扱うことができる
・カーニングがサポートされている

CCLabelBMFont ラベルはラベルを作成するために Angel Code Font フォーマットを解析します。この種のラベルを作成するために、以下のエディタを使用できます:
http://www.n4te.com/hiero/hiero.jnlp (java version)
http://slick.cokeandcode.com/demos/hiero.jnlp (java version)
http://www.angelcode.com/products/bmfont/ (windows only)
http://glyphdesigner.71squared.com/ (Mac only)
http://www.bmglyph.com (Mac only)
http://tinyfont.com (Mac only)

Java エディタ 対 Windows エディタ
・Windows エディタはオフィシャルな Angel Code エディタです。
・Java エディタ: Mac 上で動作
・Java エディタ: 影付き、傾斜、ぼかしのような追加機能付き

CCLabelBMFont の作成
CCLabelBMFont オブジェクト構築のために必要なこと:

フォントは固定サイズなので、どのフォントサイズが必要か注意深く考える必要があります。

バラバラのフォントをそれぞれのサイズで持つことは、テクスチャが使用するメモリの量のために非効率です。この場合、別のサイズにするのに適切な大きなフォントでサイズを小さくしたフォントを作成することが有効です。ラベルは単なる CCNode なので、適切な大きさにすることができるのです。

それぞれの文字の操作
CCLabelBMFont は CCSpriteSheet のサブクラスなので、それぞれの文字を CCSprite として扱うことができます。

1番目の文字は tag = 0 、2番目の文字は tag = 1 で、といった具合に追加されます。
例:

ラベルアトラス
はじめに
CCLabelAtlas は、cocos2d に実装された最初の高速ラベルでした。しかし、CCBitmapFontAtlas にとって変わられました。

CCLabelAtlas は後方互換のために残されているだけなので、かわりに CCBitmapFontAtlas をご使用ください。

ラベルアトラスの作成
・charMapFile はすべての文字を含む画像ファイルです。それぞれの文字はASCII 値によって整列している必要があり、最大256文字となっています。
・itemWidth は文字のピクセル幅です。
・itemHeight は文字のピクセル高です。
・startCharMap はマップの最初の文字です。

ラベルアトラスとビットマップフォントアトラスの更新
CCLabelProtocol プロトコルを実装するあらゆるオブジェクトと同様に、setString メソッドで文字列を更新可能です。

CCLabelAtlas または CCBitmapFontAtlas の更新もまたペナルティーが無いということは特筆すべき点です。

ラベルアトラスとビットマップフォントアトラスの配置
anchorPoint プロパティで文字の配置を変更できます。
例:

---------------------------------
ゲームを作るときは、点数や残機などでラベルを使わないといけないので、

このあたりのこともしっかり把握しておきたいところですね。


スポンサード リンク

cocos2d スプライトの巻

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

今回は、スプライトについて。スプライトは、直訳すると「妖精」っていう意味で、画面上の小さなキャラクタを高速に合成表示するための技術的な仕組みのことだそうです。

早速読んでいきましょう!

--------------------------------
cocos2d プログラミングガイド
スプライト

<目次

スプライトの使い方

スプライトの作成と追加方法
スプライトの簡単なご紹介

スプライトを作成する別の方法
画像から

画像の rect から

スプライトフレームから


スプライトシート
1枚のスプライトシートはひとつの大きなファイルに詰め込まれたスプライトの集合体です。

スプライトシートにより多くのスプライトを詰め込むことにより、消費メモリを少なくできます。

cocos2d 用のスプライトシートを作成する3つの方法があります。

均一に並んだスプライトシート


この種のスプライトシートはメタデータが定義されていません。すべてのスプライトは同じサイズである必要があります。さもないと、それぞれのスプライトがどの位置にあるかを知ることができないからです。

この種のスプライトシートは最適化されていないので、無駄なスペースがあります。iOS ではメモリは大変大切なリソースなので、この方法でスプライトシートを作成することはおすすめできません。

ツール:
Sprite Packer (Free)
ImageMagick (Free)


mkatlas.pl
mkatlas.pl は cocos2d に同封されているスクリプトで、これを使ってスプライト rect を作成できます。

このツールは使用されていないスペースの最適化を行ない、ムダのない方法でスプライトを詰め込みます。

このツールはヘッダファイル .h の中にメタデータを生成します。

mkatlas.pl (Free)


上級スプライトシート


この種のスプライトシートは mkatlas.pl と同様に、スプライトシートの空間を最大限に利用するために、スプライトの順番を入れ替えたり、回転させたりして無駄な空間を最適化します。

スプライトの位置、名前を含むメタデータ(.plist)を構築します。

スプライトシートを作成する場合は、この方法をおすすめします。

zwoptex flash (Free)
zwoptex (Commercial)
TexturePacker (Free, Advanced features commercial)
Sprite Master (Commercial)

CCSpriteFrameCache でこの種のスプライトシートを読み込むことが可能です。


CCSpriteFrameCache の使い方



スプライトのサブクラスの定義方法
CCSprite のサブクラスを定義したい場合は、「initWithTexture:rect:」メソッドを実装する必要があります。

例:


-----------------------------------------
このスプライトシートって便利ですね。

アニメーションの調査の時にツールの調査もしましたが、あの時に、ちかん君が横になったりしたのは、最適化していたんですね。

たしかに、フレーム名さえ決まってれば、どの場所にどんなかたちで配置されていたとしても名前でアクセスできるし、開発中に画像がどんどん増えたとしても名前でアクセスできるので場所は全然どこにあっても問題ないってことなんですね。

いやいや、自分で実装するより何百倍も便利ですなぁ・・・。

スポンサード リンク

cocos2d 動作:アニメーション を調べるの巻その2

続きです。

cocos2d 動作:アニメーション を調べるの巻その1はこちら

plist を作れるソフトウェアを見てみるパート2

前回は Zwoptex がどんなものなのか見てみました。

今回は、もう一つの、プログラミングガイド 動作:アニメーションに書いてあったソフト、TexturePacker を使ってみます。

Zwoptexでも十分だったんですが、せっかく紹介してあったし、いろいろお好みもあるかもしれないし、色んなものを試してみたいのでやっぱり見てみます。

で、リンクをクリックすると、ウェブサイトのトップページへ移動します。

201302100001_s.png

「20秒で最適化されたスプライトシートは君のものだ

 1.スプライトをドロップしてくれ
   PNG、PSD、SWFやフォルダーごと

 2.エクスポート先を選ぶんだ
   沢山のゲームフレームワークを枠を超えてサポートしている

 3.発行をおしてね
   画像とデータファイルを作成だ」

早速ダウンロードしてみます。下の方にスクロールするとDownloadできそうなところがありますね。

201302100002.png

Mac だけじゃなくて、Windows や Ubuntu 版もあるんですね。もちろん、MacOS のところをタップします。

ダウンロードが終わったら、TexturePacker-3.0.7.dmg をダブルタップ。

ライセンスに Agreement したら、Mac のいつもの画面が出てきます。

201302100003.png

Applications にドラッグドロップして、インストールしたら起動してみます。

201302100004.png

一週間、試用期間があるみたいっす。

せっかく試用期間があるみたいなので、なんかよくわからないですが、Test Proモードで起動します。1週間後のことはその時考えましょう。

201302100005_s.png

矢印の先、右側の白いところにファイルをドロップするみたいっす。
(※モヤモヤさまぁず見ながら書いてます。大江アナ卒業・・・涙)

201302100006.png

なんかつめこまれてしまったっす。

左側の TextureSettings でいろいろ設定できるみたいっす。

以下の設定をしました。

Output
- Data file: /Users/matsuo/Documents/Cocos2dTest/Misc/chikan_walk2.plist
- Texture file: (Data file を入力すると自動で設定された)

Geometry
- Max size X: 512 Y: 512

Layout
- Algorithm: Basic
- Sort by: Name
- Order: Ascending
- Border padding: 0
- Shape padding: 0

201302100007.png

並んだ並んだ。ちかん君が。

Publish をタップすると…

201302100008.png

でけたでけた。

201302100009.png

Zwoptex で作ったのと同じようなものができました。

こちらも簡単に、スプライトシートが作成できもうした。

どちらも使いやすいですね。



だいたいわかった

翻訳中は何がなにやらよくわかりませんでしたが、実際にふれてみるとよくわかりました。

連続画像を何とかして作成したら、スプライトシートという、PNG と plist でできたものを作成し、それを cocos2d の CCSpriteBatchNode と CCSpriteFrameCache で読み込んだら、spriteWithSpriteFrameName を使って plist 内のフレーム名でスプライトを作成するってことですね。

ってことで、テストコードを実行してみると・・・

201302100010.png

child1 って定義されてたオバケちゃんがちっちゃく表示されてますね。

やっぱり子供だったんですね。

で、なんで名前が gif になってたかの謎も解けました。

僕の場合は画像を Tiff で用意してそれをスプライトシートにしたから PNG の中が Tiff って言う名前になっていました。おばけちゃんたちは Gif で用意したんでしょうね。

いろいろと謎が溶けてすっきりすっきり。

では、プログラミングガイドの参照に戻りたいと思います。

スポンサード リンク

cocos2d 動作:アニメーション を調べるの巻その1

自分の英語能力の限界なのかはたまた

現在(いま)という時代(とき)が悪いのか

iPhone 2D ゲーム作成ライブラリ cocos2d プログラミングガイドの「cocos2d 動作:アニメーション」を訳していてあまりにもイメージが出来なさ過ぎたので、cocos2d 初心者ガイドレッスン1の巻 でダウンロードしたcocos2dのプロジェクト内にあるテストコードで調べてみようと思う。

百聞は一見にしかずですな。


どこにあるのか探す

まずは、cocos2d-ios.xcodeproj を Xcode から開きます。ここで使用している Xcode は 4.5.2 です。

cocos2d 動作:アニメーション」内の スプライトシートの使用方法というところがおそらく一番の手がかりだとおもわれますのでこれに沿ったかたちで調査してみます。

まずは CCSpriteBatchNode を構築する必要がありますとのことなので、それをプロジェクト内から探してみましょう。

CCSpriteBatchNode というだけあって、おそらく SpriteTest 内にあるのではないかとあたりをつけて、とりあえず Scheme を SpriteTest にして実行してみます。

※実行の方法は「cocos2dのデモプロジェクトをいじってみるの巻」あたりを参照ください

みどり色の右矢印をクリックすると



おお、いきなりありました。ちょっとみきれてますが、CCSpriteBatchNode でしょう。

オッサンが赤くなってる。。

赤いオッサンとしばらくたわむれたら、早速ソースコードの調査をしましょう。



ソースコードを見てみる

Schema 名とファイル名は対応しているとのことでしたよね。覚えていますか?

SpriteTest.m を Xcode で開いて、CCSpriteBatchNode を検索してみます。

探してみるといっぱいあるのでどれにしようか迷ってしまいます。

そこで、手順では CCSpriteBatchNode のあとに CCSpriteFrameCache を使用するということだったので、それも一緒に使っているところを探してみましょう。

SpriteBatchNodeReorderOneChild の -(id) init 関数内に見つかりました。

201302090002.png

animations/ghosts.png という PNG を読み込んでるみたいです。

Flash やら Photoshop で 連続画像へエクスポートします、って訳しましたが、実際の画像を見てみないとどんなものやらサッパリわかりませんよね。

画像ファイルは Resources フォルダに配置されているはずなので、その下の animations の ghosts.png を開いてみます。

ghosts.png
きゃーーーー!!


あー、ビックした。予想外です。連続画像ではないですねこれは。

でもせっかくなので、見てみます。

まず、画像サイズは 256×256 ですね。右と下に画像の余白があります。

OpenGL ES 1.1 は 2の階乗の大きさしか読み込めなかったからこのサイズなのでしょうか。

最新の cocos2d は OpenGL ES 2 ベースだから、今となっては大丈夫でしょうけれども。

次に、CCSpriteFrameCache で指定している、animations/ghosts.plist を見てみます。

プログラミングガイドによると、このファイルは、画像の中のフレームの範囲を定義するファイルのようです。

おそらくこのオバケ4人組の範囲を定義しているんでしょう。

201302090003.png

まず、texture っていうところで画像の幅と高さを指定していますね。

frames でそれぞれの画像の範囲を定義しているようです。

child1.gif、father.gif、sister1.gif、sister2.gif の四つが定義されています。ガイドによるとこの **.gif っていうのは、ただのフレームの名前で画像が存在する必要はない、とのことなので何でもいいんでしょうが、何故、PNG なのに GIF なんでしょうね。そのうちわかるかもしれませんし、わからないかもしれません。

中の X座標とか Y座標とかを見てみると、左から
child1.gif
father.gif
sister1.gif
sister2.gif

と定義されているようです。

child = 子供 ????

201302090004.png

( ゚д゚) ・・・
 
(つд⊂)ゴシゴシ
 
(;゚д゚) ・・・
 
(つд⊂)ゴシゴシゴシ
  _, ._
(;゚ Д゚) …!?

あれ?座標って右からだっけ・・・。うーんこっちも子供じゃないなぁ。

「細かいことが気になってしまう僕の悪い癖なんです。」と言いたいところですが、先に進みましょう。



plist を作れるソフトウェアを見てみる

plist には、なんやらいろんな項目があって、自分で設定するのは難しそうです。

プログラミングガイドの動作:アニメーション で、3つほどソフトが紹介されてました。

Mac 用のバイナリ(商用)Flash版(無料)がある Zwoptex と、基本機能は無料で使える TexturePacker でしたね。

まずは、Zwoptex を見てみよう。

201302090005_s.png

「Zwoptex で、ちょっとだけのクリックでスプライトシートを作ろう!スンゴイ機能とスーパーターボチャージャーなアルゴリズムとビックリするほどエレガントなインターフェースでスプライトシートが簡単に作れちゃうぜぇ!ワイルドだろぉ〜。」

なんだかとってもすごそうですね。

201302090006.png

おねだんは 15ドル かぁ・・・。

よし、無料のも見てみよう。Flash 版をクリックだ。

201302090007.png

「おおっと!君の探してるものを見つけることができなかった。」

リンク切れ…だと…‥。ざわ…ざわ…。

スミマセン。ちゃんと確認すればよかったっす。

で、もう一回、ウェブサイトをよく見てみると、

201302090008_20130209231211.png


あったぁ〜!!右下に、「↓ Flash Version」ってかいてある。

ポチッとな。

201302090009.png

「Zwoptex.html」をSafariでひらくと画面が表示されたので、「File」→「Import Images」でイメージをインポートしてみると・・・。

201302090012.png


TIFF はだめなんですね。 ファイル自体が選択できませんでした。PNG のみ OK のようです。

なんかいろいろ調べてると、バイナリ版も無料で使えるという書き込みが多数。

そこで最初に戻って Mac 版の Zwoptex をダウンロードして起動してみる。

201302090011.png

おー! Flash 版っとは安定感が違う。(※個人的な感想です)

これが無料で使えるといいなぁ。

早速、ファイルを読み込んでみる。左上の Import を選択すると、

201302090013.png

おお、Tiff もいけそうですね。最終的には PNG にするんだろうから PNG でもいいんだろうけど手持ちが Tiff しかなかったので Tiff にこだわった感じになってしまってます。

Open をタップ。
(※Mac Book Air のタッチパット使ってるので、正確にはクリックではなくタップですね。以後気をつけます)

201302090014.png

あれ?5個選択したのに一個だけ?っと思ったら、重なっているみたいですね。

201302090015.png

これを並べて、PNGにエクスポートすると、plist とかもできるんでしょう。

で、並べてみようとしたのですが、これが意外にめんどくさい。なんか1ビットずれたりとか、イライラしてきたぁ!

と思ってよく見ると、「layout」っていうのがあります。その中に、「Algorithm」っていうのもあります。

そこで、僕は、このWebサイトのホーム画面の説明を思い出しました。

「スンゴイ機能とスーパーターボチャージャーなアルゴリズムとビックリするほどエレガントなインターフェースでスプライトシートが簡単に作れちゃうぜぇ!ワイルドだろぉ〜。」

スーパーターボチャージャーでエレガントなソフトが、こんなちまちました作業を要求するわけがない!

物は試し、タップしてみました。すると・・・。



うごいたー!!すごい・・・。すごすぎる。科学の発展は素晴らしい。

これはたしかに、スーパーターボチャージャーでビックリするほどエレガントでした!!

Layout をタップすると、上からニュッてパネルが出てきてカウントダウンが始まります。

お金を払わないと、操作のたびに 3秒間かかるっていう仕様みたいです。こんな素晴らしい機能なら余裕で待てます。(感動したなら金を払えよな・・・。)

ただ、なんか隙間が開いたりしているので、このままだと嫌です。

そこで、Layout ってところを見てみます。

Algorithm:
 - Basic
 - Shelf
 - Tree
 - Max Rect

っていうアルゴリズムがあるみたいです。

説明が見当たりませんので、適当に使っていきたいと思います。

設定を、Basic、Name、Ascending に設定して、Bordar Padding と Sprite Spacing を 0px にすると、お好みの並びになるようなので、それで並べてみました。

サイズも 512px × 512px にしました。

201302090016.png

Background の Opacity を 0% にしておかないと背景が透過しないような気がするので、そう設定してみましょう。

そして、トンカチマークの Publish をタップ。

201302090017.png

「発行時の警告
発行は、発行設定内にある発行先によって設定したすべてのファイルパスを置換します。それによってデータを失う可能性があります。
□2度とこのメッセージを表示しない」

とのことなので、Publish Settings で設定を確認。

201302090018.png

変更したところ:
Texture
- Save To File: chikan_walk$(FORMAT_EXTENSION)

Coordinates
- Save To File: chikan_walk$(FORMAT_EXTENSION)
- Format: cocos2d(.plist)

であらためて、Publish をタップして、発行すると、エラーが出ます。

Zwoptex のプロジェクトを保存しておかないと、発行先のパスがわからないみたいですね。

なので、「File」→「Save as」でプロジェクトを保存して、

あらためて、Publish。。。。

成功したようです。保存先を見てみると。

201302090019.png

できとるできとる。

201302090020.png

これで、plist とそれの元になる画像の作り方もわかりました。

まとめると、
1.まず、アニメーション用の画像をひとつずつ用意します。
2.Zwoptex で取り込んで並べます。
3.Publish します。

という、3つのステップで完成ですね!!

ちょっと長くなってきたので、続きは次回としたいと思います。

cocos2d 動作:アニメーション を調べるの巻その2>>

スポンサード リンク

cocos2d 動作:アニメーション を日本語訳の巻

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

今回はアニメーションについて。

実際にガイドの内容の調査もしてみましたので、こちらをご覧あれ。
--------------------------------
cocos2d プログラミングガイド

<目次
アニメーション

スプライトとスプライトバッチノードの扱い

Flash(CS4) でのアニメーションと連続画像のエクスポート

Flash は、特にキャラクターアニメーションの様な2次元アニメーションでは明らかに動作が重くなります。

アニメーションが所有するそれぞれの.fla ファイルにアニメーションを作ってください。そして、メインのタイムラインで確実に動作させてください。

メインのタイムラインでエンター(リターン)キーを押した際にアニメーションが動作するのであれば、連続画像にエクスポートする準備ができているということです。

File → Export → Export Movie とたどってください。フォーマットを 連続する PNG 画像に変換し、保存を押して連続画像を作成しましょう。

Photoshop でのアニメーションと連続画像へのエクスポート

最近のバージョンのPhotoshopであれば、アニメーションを作成するのに適しています。古いバージョンはアニメーションを作成するのに Image Ready というプログラムが必要な場合があります。

ツールバーで Window → Animate とたどると、アニメーションツールバーがあります。

ここでアニメーションを作ることができ、スプライトシートにエクスポートできます。

アニメーションが完成したら、File → Export → Render to Video とたどってください。

ファイルオプションで、「連続画像」のチェックを外し、ファイルフォーマットとして PNG を使用してください。

それから、レンダーオプションでアルファチャネルに Straight - Unmatted を設定してください。

出力先を選び、render を押下して、作成したアニメーションから連続画像を作成してください。

スプライトシートの作成

スプライトシートと .plist 作成のためのツールの使用

Zwoptex は、画像からスプライトシートを作成できるソフトウェアです。

このソフトは、ダウンロード可能な商用版の Mac OS 用バイナリだけではなく、無料のFlash アプリもあります。

TexturePacker はもうひとつの別のツールで、Mac OS と Windows で使用可能です。基本機能は無料で、拡張機能は商用ライセンスが必要です。

これら3つのツールはテクスチャの空間をより良く使用させるために、画像を自動的にアレンジする機能があります。他にもスプライトをトリムしたり回転したりできます。

さあ、テクスチャと座標(plist)をエクスポートしましょう。そしてそれらをプロジェクトに追加しましょう。

シートを作成するもうひとつの方法は、cocos2d のツールフォルダにある mkatlas.pl を使用することです。

スプライトシートの使用方法

CCSpriteBatchNode
すべてのフレームのための実際の画像を持つ CCSpriteBatchNode オブジェクトを構築する必要があります。

このオブジェクト自身では何も描画しないとしても、シーンに追加します。描画パイプラインに組み込むために必要なのです。

例:
        // バッチノードの構築 -- 必要に応じて小さく分割するための
// ひとつの大きな画像を指定
CCSpriteBatchNode *batch = [CCSpriteBatchNode batchNodeWithFile:@"grossini.png" capacity:50];
 
// バッチノードを親に追加します。(それ自身は何も描画しませんが、
// 描画パイプラインに組み込むために必要です。)
[self addChild:batch];


CCSpriteFrameCache

次に、どのフレーム名がフレームの範囲と一致するかを記録する CCSpriteFrameCache シングルトンを使用する必要があります。

例:
        // スプライトのフレーム(スプライトシート内のイメージに沿って 
// 定義された名前付きの四角形の集まり)の読み込み。
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"grossini.plist"];


フレームの表示方法
いったんスプライトシートとフレームが読み込まれ、スプライトシートがシーンに追加されると、「spriteWithSpriteFrameName」という便利なメソッドを使用することによりそれらのフレームを使ってスプライトを構築することができ、そしてスプライトシートの子ノードとして追加することができます。

        // 最後に、フレームキャッシュ内の名前を使ってスプライトを構築します。
sprite1 = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"];
 
// シートの子ノードとしてスプライトを追加します。どこからイメージデータを取得するかを知らせるためです。
[sheet addChild:sprite1];


後でスプライトが表示する画像を変更したい場合は、以下のように、共有フレームキャッシュから新しいフレームを取得し、スプライトに設定します。

    CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"grossini_dance_02.png"];
[sprite1 setDisplayFrame:frame];


重要:ここでのフレーム名とはXMLファイル内の任意の文字列のことで、ファイル名のことではありません。元の画像名をフレーム名として使用することはよくありますが、必須ではありません。上記の例の中では、「grossini_dance_02.png」という画像はプロジェクト内に不要です。

簡単な例
スプライトテストのコード:
		CGSize s = [[CCDirector sharedDirector] winSize];
// 重要:
// スプライトフレームはキャッシュされ Retain されます。
// [[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames]; を呼び出すまでリリースしないようにしてください。
// を呼び出すまでリリースしないようにしてください。
// メモ:
// .png and .plist は同じ名前でなければなりません。
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"animations/grossini.plist"];
//
// スプライトを使用したアニメーション
//
CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"]; //"grossini_dance_01.png" comes from your .plist file
sprite.position = ccp( s.width/2-80, s.height/2);
 
CCSpriteBatchNode *batchNode = [CCSpriteBatchNode batchNodeWithFile:@"animations/grossini.png"];
[batchNode addChild:sprite];
[self addChild:batchNode];
 
 
NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 1; i < 15; i++) {
 
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"grossini_dance_%02d.png",i]];
[animFrames addObject:frame];
}
CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];
[sprite runAction:[CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO] ]];



以下のコードを dealloc に必ず記述してください。メモリリークが発生してしまいます。

dealloc のコード:
-(void) dealloc
{
[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
[super dealloc];
}


ひとつの大きなスプライトシート(最大 以前のデバイス:1024×1024、iPhone4とiPad:2048×2048)にアニメーションを設定すると、より良いパフォーマンスが得られます。ツールは自動的にそのようにしてくれます。

----------------------------------
最初に書きましたが、実際にガイドの内容の調査もしてみましたので、こちらをご覧あれ。

スポンサード リンク

cocos2d 動作:特殊アクション を日本語訳の巻

iPhone の 2Dアクションゲームを簡易に開発できるライブラリ、cocos2d のプログラミングガイドを日本語訳しています。

今回は、特殊なアクション。

こういうのを頭の片隅に入れながら作成すると、ここでこれだ!!ってなるんでしょうね。

------------------------------------
cocos2d プログラミングガイド

<目次
特殊アクション

CallFunc / CallBlock 関連 Action

CallFunc

CCCallFunc アクションを使うと、アクションからメソッドを呼び出すことができるようになります。

連続アクションの最後に有効に使用することができます。

例:
id actionTo = [CCMoveTo actionWithDuration: 2 position: ccp(s.width-40, s.height-40)];
id actionBy = [CCMoveBy actionWithDuration: 2 position: ccp(80,80)];
id actionCallFunc = [CCCallFunc actionWithTarget:self selector:@selector(doATask)];
 
id actionSequence = [CCSequence actions: actionTo, actionBy, actionCallFunc, nil];
 
-(void) doATask
{
//何かしらのコード
}


CallFuncN と CallFuncND アクション

CCCallFunc には、2種類のアクションがあります。CCCallFuncN と CCCallFuncND です。

CCCallFuncN は引数としてノードを取ります。CCCallFuncND はノードとデータのポインタを取ります。

id actionCallFuncN = [CCCallFuncN actionWithTarget:self selector:@selector(doATaskN:)]; // make sure you notice the trailing :
id actionCallFuncND = [CCCallFuncND actionWithTarget:self selector:@selector(doATaskND:data:) data:pointerToSomeData];
 
- (void) doATaskN: (id)node
{
//何かしらのコード
}
 
- (void) doATaskND: (id)node data:(void*)d
{
//何かしらのコード
}


CallBlock / CallBlockN

v0.99.2 から有効

// BCA は Block Copy Autorelease の略で cocos2d のマクロです
 
// CCCallBlock (引数なし)
id blockAction = [CCCallBlock actionWithBlock:BCA(^{
[label setString:@"Called Block!"];
})];
 
// CCCallBlockN (引数としてノードを渡す)
void (^block)(CCNode*) = BCA(^(CCNode *n) {
// ノードで一般的な処理を行う
CCLOG(@"called block for %@", n);
});
id blockAction2 = [CCCallBlockN actionWithBlock:block]


CCFollow

v0.99.2 から有効

『カメラ」をシュミレートします。フォローされたノードが中心になります。

// create an sprite
id sprite = [CCSprite xxxx];
 
[self addChild:sprite];
 
[self runAction: [CCFollow actionWithTarget:sprite worldBoundary:CGRectMake(0, 0, (winSize.width*2)-100, winSize.height)]];


CCPropertyAction

v0.99.2 から有効

Objective-C のすべてのクラスのどんなプロパティも変更できる、「包括的な(generic)」アクションです。

 // rotation プロパティを 0 から −270 へ、2秒間かけて変更します。それから、逆回りします。
id rot = [CCPropertyAction actionWithDuration:2 key:@"rotation" from:0 to:-270];
id rot_back = [rot reverse];
id rot_seq = [CCSequence actions:rot, rot_back, nil];


-------------------------
うーん、英語が少ない。

次行ってみましょう!
スポンサード リンク

cocos2d 動作:効果 を日本語訳の巻

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

今回は、いろいろな効果に関して訳してみました。

これを使用することにより、いろんな場面での効果的な効果が実現できて

ゲームの表現がより深くなることでしょうね。

では、読んでみましょう。

------------------------------
<目次
効果

はじめに

効果(Effects)は、特別なアクションです。透過、位置、回転、サイズといった普通のプロパティを変更する代わりに、グリッドを変更します。

グリッドは格子のようなもので、正方形や長方形の連なりを形づくる、互いに交差した線のつながりです。

この特別なアクションは、にいかなる CCNode オブジェクト(CCLayer、CCScene、CCSpriteなど)をグリッド内に描写します。そして、頂点を動かすことによりグリッドを変化させることができます。

タイル化されたグリッド(tiled grid) と、タイル化されていないグリッド(non-tiled grid) の2種類のグリッドがあります。タイル化されたグリッド(tiled grid) は個別のタイルからなり、タイル化されていないグリッド(non-tiled grid) は頂点からなる、という違いがあります。



グリッドは行と列の2つの次元を持ちますが、それぞれの頂点は3つの次元、x、y、z を持ちます。

それで、タイル化された3次元グリッド(tiled-grid-3D grid)または3次元グリッド(grid-3D grid) を変化させる事により、2次元または3次元効果を作り出すことができます。

どのように動作するのか

スクリーンのそれぞれのフレームはテクスチャ(FBO)内に描写されます。

このテクスチャは頂点配列に変換され、そしてこの頂点配列(グリッド)はグリッドの効果によって変換されます。最終的に頂点座標はスクリーンに描写されます。

内部動作のさらなる詳細は、以下を参照してください。

タイル化されたグリッド(tiled grid):CCTiledGrid3D and CCTiledGrid3DAction
タイル化されていないグリッド(non-tiled grid):CCGrid3D and CCGrid3DAction

例えば、このような画像を描画するシーンやレイヤーがあったとします。



CCRipple3D アクションを使用するとこのように画像を変換することができます。

線で表された画像を見るとわかると思いますが、これは32×24のます目のタイル化されていない(すべてのグリッドがつながっている)グリッドを使用しています。



また、CCFadeOutTRTiles アクションを使用するとこのように画像を変換することができます。

線で表された画像を見るとわかると思いますが、これは16×12のます目のタイル化された(すべてのタイルはバラバラにできる)グリッドを使用しています。



3次元動作

末尾に 3D と付いたアクションは、グリッドの Z 座標を変更することにより3次元の視覚効果を生み出すことを意味します。

3D アクションを使用する場合、物体の奥行き情報を保持するためのバッファ(depth buffer)を使用すると思います。

以下の呼び出しにより簡単に設定できます。

// 注意:この関数は、最初のシーンを開始する前の、一番最初に呼び出してください。
// 24 ビット奥行き情報保持用バッファを構築
// openGL の z オーダー が考慮されることを意味します
[[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];


そして、いくつかの状況で RGBA8888 ピクセルフォーマット も使用すると思います。

これにより透過の効果を得ることが可能です。

// 注意: この関数は、最初のシーンを開始する前の、一番最初に呼び出してください。
// 透過用のバッファのためにこのピクセルフォーマットを使用します
[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];


グリッド効果の索引

以下の CCGrid3DAction アクションが使用可能です。

CCFlipX3D
CCFlipY3D
CCLens3D
CCLiquid
CCRipple3D
CCShaky3D
CCTwirl
CCWaves
CCWaves3D

以下の CCTiledGrid3DAction アクションが使用可能です。

CCFadeOutBLTiles
CCFadeOutTRTiles
CCFadeOutUpTiles
CCFadeOutDownTiles
CCJumpTiles3D
CCShakyTiles3D
CCShatteredTiles3D
CCShuffleTiles
CCSplitCols
CCSplitRows
CCTurnOffTiles
CCWavesTiles3D

使用例

いくつかの使用例を示します。

// スプライト1 上で、波の動作を実行
id waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal:YES vertical:NO grid:ccg(15,10) duration:5];
[sprite1 runAction: [CCRepeatForever actionWithAction: waves]];
 
// そして、スプライト2上で Shaky3D アクションを実行
id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];
[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];
スポンサード リンク

cocos2d 動作:加減速(Ease) を日本語訳の巻

iPhone の 2D ゲームを簡単に作れるライブラリ、cocos2d のプログラミングガイド日本語訳。

今回は Ease アクションというアクションですね。

加速度を変えることによってアクションに深みを出すことができるようです。

シューティングゲームの敵キャラとかに適用するといいかもしれませんね。

では読んでみましょう。

※Ease って緩やかにとかいう意味なんですが、加速度を変えるアクションみたいなので、加減速アクションと名づけてみました。異論は認めます。

------------------------------------
<目次
動作:加減速(Ease)

加減速(Ease)動作は内部アクションの時間を変化させる特別な構成アクションです。

Flash 開発では、Tweening や Easing と呼ばれるアクションです。


このアクションは、内部アクションの速さを、実行する期間を変えずに変化させます。

内部アクションが5秒動作を続けるのであれば、5秒間、動作が続きます。

Ease 動作は、線形的に時間を変化させます。



たとえば、これらのアクションは、内部アクションを加速したり減速したりできます。

これらのアクションは3つの種類に分類できます。

インアクション:アクションの開始時に加速します。
アウトアクション:アクションの終了時に加速します。
インアウトアクション:アクションの開始時と終了時に加速します。

さらなる情報は下記のサイトでご参照ください。

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
http://www.robertpenner.com/easing/easing_demo.html

加減速(Ease)アクション



内部アクションを以下の式で加速します。

-(void) update:(ccTime) t
{
[inner update: powf(t,rate)];
}


バリエーション:
CCEaseIn: 開始時に加速
CCEaseOut: 終了時に加速
CCEaseInOut: 開始および終了時に加速

引数「rate」は加速度を表します。
The rate argument indicates the acceleration rate.

Example:
// acceleration at the beginning
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseIn actionWithAction:action rate:2];
[sprite runAction: ease];
 
// acceleration at the end
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseOut actionWithAction:action rate:2];
[sprite runAction: ease];
 
// acceleration at the beginning / end
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseInOut actionWithAction:action rate:2];
[sprite runAction: ease];


加減速指数関数(EaseExponential)アクション



使用可能な指数関数アクションは以下です:

CCEaseExponentialIn
CCEaseExponentialOut
CCEaseExponentialInOut

例:
id scaleAction = [CCScaleTo actionWithDuration:2.5 scale:.8];
id easeAction = [CCEaseExponentialIn actionWithAction:scaleAction];
[label runAction: easeAction];


加減速Sin関数(EaseSin)アクション



使用可能なSin関数アクションは以下です:

CCEaseSineIn
CCEaseSineOut
CCEaseSineInOut

例:
// Sine at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineIn actionWithAction:move];
[sprite runAction:action];
 
// Sine at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineOut actionWithAction:move];
[sprite runAction:action];
 
// Sine at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineInOut actionWithAction:move];
[sprite runAction:action];


加減速弾性(EaseElastic)アクション



このアクションは、ゴムの伸び縮み(弾性)動作をシュミレートする時間変化をおこないます。

弾性アクションは1より大きく0より小さい時間値を使用するため、内部アクションはこの特別な値に対応すべきです。

いくつかの値は一度以上誘発される(この関数は全単射ではない)ので、もう一度言いますが、内部アクションはこう言った値に対応すべきです。

CCMoveBy や CCScaleBy や CCRotateBy といった単純なアクションは 加減速弾性(EaseElastic)アクションと一緒に動作できますが、CCSequence や CCSpawn アクションでは予期しない結果となるでしょう。

使用可能な弾性アクションは以下です:
CCEaseElasticIn
CCEaseElasticOut
CCEaseElasticInOut

例:
// 'period' is how elastic is the action.
// recommended values: between 0.3 and 0.45
 
// Elastic at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticIn actionWithAction:move period:0.3f];
[sprite runAction: action];
 
// Elastic at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticOut actionWithAction:move period:0.3f];
[sprite runAction: action];
 
// Elastic at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticInOut actionWithAction:move period:0.3f];
[sprite runAction: action];


加減速バウンス(EaseBounce)アクション

加減速バウンス(EaseBounce)アクションは、ボールのバウンド動作をシュミレートします。

いくつかの時間値は一度以上誘発される(このアクションは全単射ではない)ので、内部アクションはこの値に対応すべきです。

CCMoveBy や CCScaleBy や CCRotateBy といった単純なアクションは 加減速バウンス(EaseBounce)アクションと一緒に動作できますが、CCSequence や CCSpawn アクションでは予期しない結果となるでしょう。

使用可能なバウンスアクションは以下です:
CCEaseBounceIn
CCEaseBounceOut
CCEaseBounceInOut

例:
// Bounce at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceIn actionWithAction:move];
[sprite runAction: action];
 
// Bounce at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceOut actionWithAction:move];
[sprite runAction: action];
 
// Bounce at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceInOut actionWithAction:move];
[sprite runAction: action];


加減速バック(EaseBack)アクション



いくつかの時間値は一度以上誘発される(このアクションは全単射ではない)ので、内部アクションはこの値に対応すべきです。

CCMoveBy や CCScaleBy や CCRotateBy といった単純なアクションは 加減速バウンス(EaseBack)アクションと一緒に動作できますが、CCSequence や CCSpawn アクションでは予期しない結果となるでしょう。

使用可能なバックアクションは以下です:

CCEaseBackIn
CCEaseBackOut
CCEaseBackInOut

例:
// Back at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackIn actionWithAction:move];
[sprite runAction: action];
 
// Back at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackOut actionWithAction:move];
[sprite runAction: action];
 
// Back at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackInOut actionWithAction:move];
[sprite runAction: action];


動作:速度

速度(Speed)アクション

CCSpeed アクションは内部アクションの期間を変更します。


id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCSpeed actionWithAction: move speed:1.0f]; // no speed modification
 
// but you can modify the speed later
[action setSpeed: 2.5f]; // speed is 2.5 faster
 
[action setSpeed: 0.5f]; // speed is 0.5 faster (it means 2 times slower)


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

みやちかんたろうの大冒険にでてくるバーンマンは Sin 関数で動作しています。

CCEaseSinXX を使えば実現できるのかなぁ。どうなのかなぁ。という感じですね。

あと、振幅とかはどう指定するんでしょうか。

謎が深まってきました。実際に動かしてみないとわかんないんで、

後ほどやってみますね。
スポンサード リンク

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

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

最新記事

最新コメント

最新トラックバック

月別アーカイブ