iPhoneアプリ開発、その(108)　プリキュアっぽい

　例の自習サンプルサイトにあるlesson09を移植してみますた。
　表示されたとき、思わず叫んじゃったよ。

イエス、プリキュア5！！

　いや、まあ、叫びはしませんでしたが、心の中で音楽は流れたな。
　オリジナルソースのサイトでは

　テクスチャマップにラインティングやブレンディング、OpenGLの基本を学び終わった君たちを、もう一皮むいちゃうレッスンだよ。ビットマップを三次元空間で動かしちゃうサンプルだ、目ん玉ひんむいてよく読みやがれ、ヤーハー！
　白黒諧調ビットマップでファンシーなカラーを表現する方法とか学んでね。

　て感じの説明がついてます（すんごく適当な和訳）。

　ま、以下の画像を色を変えながら表示させるんだけど、

諧調だけ利用するので色がついてない。

　このサンプルから

　1、ブレンド指定する事で互いの星の色を混ざり合わせる方法。
　2、平面を3次元空間で回転させた場合に、平面自体が傾いた
　　　状態になるのをふせぎ、正面を向けたままにする方法。

　が学習できます。ま、1の方は学習済みなわけですが、2は初めてですな。

　今回、処理自体に集中できるように


	Stars

　というクラスを用意しました。
　クラスの作り方は「iPhoneアプリ開発、その(40)」を参照してね。最新のSDK 3.0のものとは見た目が微妙～に違うけど、基本は同じだから。
　あと、


	loadImageFile

　も、esUtils.h/mというファイルを作って別ファイルにしてます。作り方は選択するテンプレートが「C and C++」になるだけで特にStarsと変わりません。import使いたかったんでesUtils.cじゃなくesUtils.mにしちゃった。

　呼び出し側のEAGLViewではinitWithCoderメソッドで


	stars = [[[Stars alloc] init] retain];

　としてdrawViewメソッドで


	[stars draw];

　とやってます。今回はブレンド使うのでZバッファは使いません。
　EAGLViewの変更はそんなとこ。

　ということで、Starsクラスの説明
　まず、以下の属性を持つ星情報を、欲しい数だけ用意します。


typedef struct SStarRec {
	int r, g, b;		//	色、0～255
	GLfloat dist;		//	原点からの距離
	GLfloat angle;	//	XY平面上の回転角
} SStarRec;

　この情報と全星情報に影響する


	tilt

　変数によって、一つの平面

　は


	1、distによるx座標の平行移動
	2、angleによるy軸回転
	3、tiltによるx軸回転

　というように移動させられます。

1、distによるx座標の平行移動

2、angleによるy軸回転

3、tiltによるx軸回転

　ただ～し、このままだと視点からはテクスチャを表示する平面が傾いた状態になるわけで、これを事前に


	angleによるy軸回転
	tiltによるx軸回転

　に対して、平面を逆回転しておくことで、移動後は平面が真正面に向くようになっているというものです。今回は新しいAPIは使わないので概要を説明するだけです。詳しくはソース読んでね。注釈付けときました。

一般にいうビルボードという技法ですな。

　で、この平面を描画する際に


	glEnable(GL_BLEND);
	glBlendFunc(GL_SRC_ALPHA, GL_ONE);

　が作用して、星が互いに重なって明るくなる状態が表現されるというわけです。
　あとは各星情報のdist、angleを適当に変更する事でグルグル星が移動するようになる。

　tilt変数を90から0に変えると以下のようになるんだよね。これもカッチョいい。

この時は、NUM＝10、twinkle = FALSEが無難。あんまり多いとただの白い線になっちゃうからね。

　画像を変えてみるなり、glBlendFuncを変えてみるなり、いろいろいじってみてください。
　ではでは。

------------
サンプルプロジェクト：es12.zip

iPhoneアプリ開発、その(108) プリキュアっぽい

iPhoneアプリ開発、その(108)　プリキュアっぽい