記事一覧

Cocos2d解説(1) スプライト

cocos2dのアニメーション周りがけっこうややこしくて理解するのに苦労したので、使い方・・・というよりはどうしてそういう使い方になるのか、といったあたりを 自分で理解する目的も含めまとめてみようと思う次第。
コードは実際に動作してるものを切り取ってきてるわけではないので、間違い多いかも知れません。


■そもそもスプライト

OpenGLで二次元画像を表示しようと思うと、テクスチャ画像読み込み→頂点座標を指定して面を作成→面にテクスチャを貼り付け・・・ということを長々とOpenGL命令で指定する必要があり、さらにそれを移動・拡大・縮小・・・などやろうとすると同じくらい面倒な手続きが延々と必要となる。
cocos2dのスプライトはそのあたりをまとめてやってくれる非常に便利な仕組み。
自分は OpenGL の入門書を開いた時点で挫折したクチなので、これはものすごく助かる。

「テクスチャ」はもともと3D描画でポリゴンの面に貼り付ける画像のことであるが、2D描画の場合も正面向きのポリゴンを作ってそれに画像を貼り付けるという処理を行っているので、同じようにテクスチャと呼ばれる。

スプライトの最も単純な作り方は、


CCSprite* aSprite = [CCSprite spriteWithFile:@"texture.png"];

でOK。この場合、画像の大きさに対応したスプライトができる。これを


[self addChild:aSprite];

などとして現在のシーンに追加すれば描画が完了する。

スプライトは、位置・スケール・アルファ、それにテクスチャ画像への参照と切り出し情報(後述)などを保持しており、これらは変更すればすぐに反映されるので、移動や変形などは簡単に行える。たとえば位置を変えたいなら


aSprite.position = CGPointMake(160, 240); //(*1)

などとすればよい。

*1)CGPointMakeを省略した ccpというマクロが用意されているのでそれを使うとタイプ量を軽減できる。