(URL)前回の続き！！
OpenGL ES の初期化コードは終わったので、
実際に ViewController に描画処理を書いていく(｀・ω・´)
・
・
・
・
OpenGL ES の素晴らしき点は、 前回の初期化コードで言うと
BeginScene から EndScene の間だったらどこでも描画処理を書いて良い所です。
CoreGraphics みたいに drawRect 関数のみ とかではないので色々と応用がききます。
今回は ViewController にゲームループを記述して描画処理を書いてみます。
ViewController.h に 必要な変数と関数を書く
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
/** 画面のフレッシュレートと同期する為のクラス **/
CADisplayLink* mpDisplayLink;
}
/**
* ゲームループ
*/
- ( void )GameLoop;
@end
@interface ViewController : UIViewController
{
/** 画面のフレッシュレートと同期する為のクラス **/
CADisplayLink* mpDisplayLink;
}
/**
* ゲームループ
*/
- ( void )GameLoop;
@end
次に ViewController.m の ViewDidLoad に ゲームループをしてもらうようにする
/**
* MainGLView が呼び出された。
*/
- (void)viewDidLoad
{
[super viewDidLoad];
/** スクリーンと同期する **/
// ループ
mpDisplayLink = [ [ UIScreen mainScreen ] displayLinkWithTarget:self selector:@selector( GameLoop ) ];
[ mpDisplayLink addToRunLoop:[ NSRunLoop currentRunLoop ] forMode:NSDefaultRunLoopMode ];
}
CADisplayLink の displayLinkWithTarget に、 "誰の" "どの関数？" を指定して作成し、
addToRunLoop 関数で "ループしてください。" としてやれば
自動的に永遠と
デバイスに最適なループ関数を作ってくれます。
※だいたい60FPS だったと思います。
その間にもタッチイベント等のiPhone機能の取得は可能。
上の例では GameLoop 関数が ぐるぐる呼び出されるようになりました。
※今回は明確にFPSを決めずに描画します。
次に書く描画処理はまた別にでも詳しく書いてみようと思います(｀・ω・´)
今回はコードのみです。
でも大体何やってるかはわかると思います。
今回は 正四角形を描画しています。
まず、
OpenGL ESでは三角形が基本の形になりまして、
三角形を12個描画すれば立方体ができ、
頂点を沢山増やせば球体も、
人間モデルさえも描画できます。
誰がなんて言おうともスライムです（本気）
11ポリゴンです。 その名もヌライムですねー
某 FFさんとかで聞く
『3万ポリゴンのモデルや！！！』
俺 :『 ( ﾟдﾟ)! 』 ・・・よくわからん・・・・。
というのは ”3万個三角形を書いて作られたモデル” ということですね。
三角形１つ作る為には頂点が３つ必要です。
頂点を3つ繋げて指定された色でその中を塗りつぶすわけです。 これで三角形。
今回は四角形を描画したい、四角形を三角形で表すには..
【 三角形を2つ書けばいい 】
しかも
その２つの三角形の頂点の内、２つは同じ座標です。
わざわざ 6個頂点を作って描画してもいいのですが、
無駄なことが嫌いなプログラマさんは
========================
前回の三角形に使用した２つの頂点と新しく指定した頂点１つを使用して
次の三角形を作るようにすることができます。
========================
上の画像では、
頂点1, 2, 3 で１つのポリゴンを描画して、
頂点2, 3, 6 でもう一つポリゴンを描画する。 → 頂点は4つで済む。無駄がない
その ”前回の2個の頂点と新しい頂点１つを使用して三角形を描画する方法”
それが TRIANGLE_STRIP と呼ばれる描画方法です。
今回はこれを描画するときに指定します。
そして頂点の色も一緒に設定します。
RGB は 赤、緑、青
A は アルファと言われ、透明色です。
1.0 が最高で 0.0 がその色は全くありません。
Aを0.0にすると見えなくなり、0.5にすると半透明になります。
上記の描画コードを入れた ViewController.m はこんなかんじになります ↓
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import <GLKit/GLKit.h>
#import "MainGLView.h"
@implementation ViewController
/**
* MainGLView が呼び出された。
*/
- (void)viewDidLoad
{
[super viewDidLoad];
#import <QuartzCore/QuartzCore.h>
#import <GLKit/GLKit.h>
#import "MainGLView.h"
@implementation ViewController
/**
* MainGLView が呼び出された。
*/
- (void)viewDidLoad
{
[super viewDidLoad];
/** スクリーンと同期する **/
// ループ
// ループ
mpDisplayLink = [ [ UIScreen mainScreen ] displayLinkWithTarget:self selector:@selector( GameLoop ) ];
[ mpDisplayLink addToRunLoop:[ NSRunLoop currentRunLoop ] forMode:NSDefaultRunLoopMode ];
}
/**
* ゲームループ
*/
- ( void )GameLoop
{
/** 描画準備 **/
// self.view = MainGLView
[ ( MainGLView* )self.view BeginScene ];
/** ここで描画処理 **/
// 頂点座標 頂点情報が４つしかない！
const GLfloat vertics[] =
{
50.0f, 50.0f, // 左上
270.0f, 50.0f, // 右上
50.0f, 270.0f, // 左下
270.0f, 270.0f, // 右下
};
// 頂点色
// 頂点が4つなので色も4つ
const GLfloat colors[] =
}
/**
* ゲームループ
*/
- ( void )GameLoop
{
/** 描画準備 **/
// self.view = MainGLView
[ ( MainGLView* )self.view BeginScene ];
/** ここで描画処理 **/
// 頂点座標 頂点情報が４つしかない！
const GLfloat vertics[] =
{
50.0f, 50.0f, // 左上
270.0f, 50.0f, // 右上
50.0f, 270.0f, // 左下
270.0f, 270.0f, // 右下
};
// 頂点色
// 頂点が4つなので色も4つ
const GLfloat colors[] =
{
// R, G, B, A の順番
1.0f, 0.0f, 0.0f, 1.0f, // 左上
0.0f, 1.0f, 0.0f, 1.0f, // 右上
0.0f, 0.0f, 1.0f, 1.0f, // 左下
1.0f, 0.0f, 1.0f, 1.0f, // 右下
};
/** 頂点情報をOpenGL ESに教える **/
// glVertexPointer( 頂点データのサイズ, データの型, オフセット値（配列の何番目からデータを読み込むか）, 座標 )
glVertexPointer( 2, GL_FLOAT, 0, vertics );
/** 頂点座標の配列をセットしたことを OpenGL に教える **/
glEnableClientState( GL_VERTEX_ARRAY );
/** 頂点色も同じ **/
glColorPointer( 4, GL_FLOAT, 0, colors );
glEnableClientState( GL_COLOR_ARRAY );
/** GL_TRIANGLE_STRIP で描画する **/
// glDrawArrays( 頂点をつないでいくルール, オフセット値, 描画する頂点の数 )
glDrawArrays( GL_TRIANGLE_STRIP, 0, 4 );
/** 描画終了 **/
[ ( MainGLView* )self.view EndScene ];
}
@end
これで頂点４つで四角形が描画されます。
また、
頂点を 描画したい三角形の数 x 3 個作成し、
最初3個の頂点情報で三角形１つ描画、次の頂点情報３個で三角形１つ描画、次の・・・ としていく場合には
GL_TRIANGLES
を指定するとよろしいです。
実際、 GL_TRIANGLES のほうが頭を悩まさずに様々な図形を作成できるので楽です。
そのかわりデータ量を食うというだけ。
他にもいろいろな描画方法があります。
割愛！
と、言うわけで ポリゴンを2つ作成した結果が ↓
ちゃんと思い通りになっとる！！！ (｀・ω・´)
色もちゃんとグラデーションしてくれてますね！
画像を描画したい場合は、これに画像をぺたぺたと貼り付けるだけでOKです。
画像の貼り方は次にでも....
最初は難しく思いますが、意外に単純です。
3Dだとまた座標系が増えてめんどくさくなりますが2Dではこんなものです。
OpenGL ESを使った高速描画で
ゲームにスリルを与えましょう！！(｀・ω・´)
そしてOpenGL ES 使ってるという高揚感で気持ちよくなりましょう。
以上！！！！
今回のプロジェクトを放置してみる ↓
【 (URL)OpenGLES_Test1 】
こんなかの、
OpenGLES_Test1.zip
をクリックして 上の 【ファイル】 → 【ダウンロード】 からオナシャス！！