ゲームプログラマ志望が福岡で叫ぶ 『絶望』 -12ページ目

ゲームプログラマ志望が福岡で叫ぶ 『絶望』

プログラマーになりたい!!!!! あ、風のうわさで聞いた最近若者で流行っているトゥイッターなるものを始めてみました (・ト・) @toshi_desu_yo

そ れ は 漢 の 象 徴 ・ ・ ・



だれが短小や!!《゚Д゚》
あけおめぇええええええええええ!!!!!

遊びすぎて久しぶりにプログラムをしたら全く身に入らずに若干どころか結構焦っている僕です(; ・`д・´)


前回の記事も下書きしたまま途中だ・・・

なぁーんか最近まただらけがキテるな・・



【2013年】来ましたね!

へび年らしいですね。へび年。。
蛇のようににゅるりと女性を絡めとっていきたいです。



今年の目標は・・・・




  集中

これだわ・・・

家でいると勉強をしない時間を過ごす日々が多く、
仕事とはまた別の自分のスキルが全く上がらないのでどうしたものか。。

ということになっています。


自分の甘えにはほんんんんんっとうに参ります・・・(´;ω;`)



2013年は仕事とかそんなものの前に人間性をあげようと思います!

本もいっぱい読みたいですね!





頑張る!



後、
 太ったからダイエットも頑張る( ´)Д(`)

本当にビビった・・・ 正月太り寒波到来わろ・・・わろ・・・・



29日 : 飲み会 → 30日 : 飲み会 → 年末 : 飲み会 → 正月 : 飲み会  → 2日 : 飲み会 → 旅行 : 料理食い過ぎ

こんなの続けてたら誰だって太るっちゅうねん(´・ω:;.:... 



なんかおかしい! なにかおかしいよ!!!!






・・・

年末辺りから正月にかけてやったことを数回に分けて書いていきます!

まず


==============================
● イルミネーション見に行ったった!
==============================



これは前に写真を載せましたが、、、
広島でイルミネーションを見ました!(`・ω・´)


いいもんですねイルミネーション・・・

漢の中の漢、、豪傑のトンジと呼ばれた僕でさえ感動を覚えてしまいましたよ。







しっかし・・・

安定のカップル率・・



( ゚Д゚)<氏ね!





==============================
● 友人たちと年末の飲み会
==============================

友人5人と飲み会にいった後カラオケに行きました!

昔からなんですが、カラオケで朝までっていうのが  






   無 理。

正直途中で眠くなります。


朝まで歌える人たちは羨ましい...。


というか毎回僕は飲み会で飲みまくってテンションMAXでカラオケに行き、

[ 最初はしゃぎすぎ → 途中は死ぬ ]  

というパターンだからだと思います。


飲み会にしろカラオケにしろペース配分は守ろう。
ということですね(´・ω・`)



こんな僕も




   社☆会☆人

はい・・・ すこしは社会人らしい行動をしたいです・・・




かっこいい写真があった。 ↓



俺かっKEEEEEEEEEEEEEEEEEE!!!!!!!!!!!

FOOOOOOOOO!!!!




はい。





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


最後に、実家に帰ったので我が家のBOSS

キング・オブ・キング。


世界の支配者の神々しい威圧感バリバリの豪傑なる写真を載せて今日はこのへんで。

















こっっっっっわっ!!!!!!!!!!!!
((((;゚Д゚))))ガクガクブルブル



【結論】
タダ酒ウマすぎて辛い・・・(´∀`*)

暇なので 華麗に雅やかにブログを更新しようと思います。




今回は前回のポリゴンに画像をペタ~リと貼り付けてやろうという算段です。


OpenGL ESで画像を描画する流れとしては



【画像読み込み】 
    ↓
【テクスチャに画像を貼り付け】
    ↓
【ポリゴンにテクスチャを貼り付け】


という感じになります。



画像とはお馴染みの jpgpng ファイル形式のこと。
そのままの状態ではOpenGL ESでは使用できないのでOpenGL ES のテクスチャに貼り付けます。


そして作成したテクスチャをポリゴンに貼り付けることで画面に現れる仕掛けになっています。





早速テクスチャを作成しみようとぉ~~~ 思います。



前回はViewControllerにてポリゴンを描画したので

画像の読み込み、テクスチャの作成、描画もViewControllerにて行うことにします。




まずは描画したい画像をプロジェクトに追加。
形式、大きさは適当で。。



わたくしはわたくしが5分という長時間をかけて描いた超大作の一品

『アーボッ子さん (32歳♀)』
を描画します。


【アーボッ子.png  320x480pix 】

アーボッ子

完璧な出来栄えに自分でさえ足がすくんだわ・・・




プロジェクトに画像を追加する時、
ちゃんと Copy ・・・ にはチェックを入れてプロジェクト内に画像を複製する。



追加した。
※名前は日本語でもok です。





次に、

ViewController.hテクスチャを保持する変数を記述。



#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
/** 画面のフレッシュレートと同期する為のクラス **/
    CADisplayLink* mpDisplayLink;

/** 描画する? **/
bool mIsDraw;

/** テクスチャ **/
GLuint mTexture;

}


/**
* スイッチが押された
*/
- (IBAction)PressedSwitch:(id)sender;

/**
*  ゲームループ
*/
- ( void )GameLoop;


@end




いつものごとく GLuint とは、ただの unsigned int なので
コイツ自体がテクスチャを持つわけではありません。

こいつが持っている識別子をたどることでテクスチャ領域にたどり着くことが出来るわけです。





ここからテクスチャを作成していく流れになります。


テクスチャを作成するのは一回でいいので
ViewController.m ViewDidLoad 関数に記述していきます。


--------------------------------
① 画像の読み込み。
--------------------------------

これは UIImage を使わせてもらいます。

UIImageとはiPhoneプログラムでお馴染みの、画像を保持してくれる変数の型。



/** テクスチャを作成する **/
// 画像の読み込み
UIImage* pImage = [ UIImage imageNamed:@"アーボッ子.png" ];




これで アーボッ子さんが pImage に保持されました。 簡単ですね。




--------------------------------
② 画像サイズを貰う
--------------------------------

こちらも簡単にできており、 UIImage の size を取得するだけでおkです。




ViewController.h


/** 読み込んだ画像の大きさ **/
CGSize mImageSize;


追加して、
 先ほどの読み込みの記述の下に



// サイズを調べてみる
mImageSize = pImage.size;


を書く。

これだけで画像の幅高さが取得できます。





このサイズを利用してテクスチャを作成するわけなのですが


ここで鉄の掟が。


-------------------------------------------------------------------------------------------------------------------------
  テクスチャは2のべき乗でなければならない。 
-------------------------------------------------------------------------------------------------------------------------

この掟によりテクスチャを生成するときは


2, 4, 8, 16, 32, 64, 128, 256, 512,・・・・

という決められたサイズでしか生成できません。




今回のアーボッ子さんの大きさは 「320 x 480 」
2のべき乗ではありません。



普通ならば2のべき乗で作ってから読み込ませるのが定石ではありますが、

2のべき乗な都合のいい画像なんてそうそう転がっていませんし、
 面 倒 くさい( ゚д゚ )



ならばプログラムで対処してやればいいじゃん。 ということです。





読み込んだ画像をプログラムで
2のべき乗の画像に作り直し,そこからテクスチャを生成すれば

無問題
です。





--------------------------------
③ 画像を作り替える
--------------------------------

ViewController.h
に変数を追加。



/** テクスチャの大きさ **/
CGSize mTexSize;



こちらはテクスチャの大きさ( 2のべき乗 )を保持します。


.m の方で初期化。


// サイズを調べてみる
// 【注意】 : テクスチャは2のべき乗じゃないと作成できない!
mTexSize = mImageSize = pImage.size;




読み込んだ画像サイズが元々から2のべき乗である可能性は大いにあるので、
画像サイズが2のべき乗かどうか調べてみます。


そのための関数を作成 ↓
ViewController.m の上の方にでも書いて置く。

/**
* 引数が2のべき乗か調べる。
*/
static bool IsPowerOfTwo( int x )
{
   return ( x & ( x - 1 ) ) == 0;
}




中で行なっていることは、

引数
引数の数から - 1した数とをビット演算( AND )して
その結果が 0 ならば true を、 それ以外ならば false を返すようにしています。




2のべき乗を2進数で見てみると、



と、桁が1つずつ増えていく形になっています。



この法則と、
 両方のビットが1の時、1を出力するANDの性質を使うことで

引数が2のべき乗なのか調べます。



試しに 32 が 2のべき乗かどうか上記の方法でを調べてみます。





見事に 0 になりました。

自分と自分の - 1の数のAND演算で 0 になるのは 2のべき乗だけです。



これで引数が2のべき乗か、
そうでないかを調べることが出来ます。




で、画像サイズが2のべき乗ではなかった時

このままではテクスチャを作成することは出来ません。




仕方ないので

自分のサイズより大きく、一番近い2のべき乗で
画像を作りなおしてからテクスチャを作成します。




まずは作りなおすサイズを調べる。
こちらはふつ~に2を掛け合わせて行き、元の画像サイズより大きくなった時点での数を返す関数を作ります。


/**
* 引数より上で一番近い2のべき乗を計算する
*/
static int Exponent( int num )
{
   int r = 2;
   while ( num > r )
       r *= 2;
   return r;
}



アーボッ子さん( 320 x 480 )では幅高さどちらも2のべき乗ではないので、

サイズを計算で求め( 512x512 )の画像を作成することになります。





↓ 今までの処理


/** テクスチャを作成する **/
// 画像の読み込み
UIImage* pImage = [ UIImage imageNamed:@"アーボッ子.png" ];

// サイズを調べてみる
// 【注意】 : テクスチャは2のべき乗じゃないと作成できない!
mTexSize = mImageSize = pImage.size;

// 2のべき乗?
if ( !IsPowerOfTwo( mImageSize.width ) )
mTexSize.width = Exponent( mImageSize.width );
if ( !IsPowerOfTwo( mImageSize.height ) )
mTexSize.height = Exponent( mImageSize.height );



これで mImageSize には画像本来のサイズが、
mTexSizeには2のべき乗のサイズが格納されます。




これを使い、
テクスチャ用に新しく2のべき乗で画像を作り直します。




iPhoneはこういう時に便利な関数、 CGBitmapContextCreate があります。

これは指定したサイズのビットマップ画像をメモリ上に作成してくれる超絶有り難い関数です。




使い方としては、
まず、2のべき乗画像サイズ分のメモリを取ります。


1ピクセルあたり "RGBA = 4バイト" 必要になる
ので
【 幅 x 高さ x 4 = 画像データサイズ 】となります。

アーボッ子さんでは 512x512x4 = 1,048,576 バイト



次に
   ビットマップグラフィックスコンテキストを作成。



コンテキストとはOpenGL ES 初期化の時にも登場しましたが、
描画に必要な情報を保持してくれるありがたい入れ物です。


今回は ビットマップ専用のコンテキストを作成し、ビットマップに必要な情報を保持してもらいます。

先ほどのメモリをビットマップグラフィクコンテキスト作成時に指定します。




そしてこのコンテキストに対して画像を描画をすると

先ほど取得したメモリにピクセル情報が格納されます。




そのピクセル情報をテクスチャに貼り付けるわけです。




コンテキストに画像を描画するのは CGContextDrawImage という関数です。

UIImageが持っている画像情報を、指定したコンテキストに描画します。



今回の描画コンテキストはビットマップコンテキストなので
指定した範囲のビットマップにUIImageをぺたりとします

範囲はアーボッ子さんの画像サイズです。


// ビットマップのデータを用意する
// 1ピクセルあたりRGBA = 4バイト必要
GLubyte* pImageData = ( GLubyte* )calloc( mTexSize.width * mTexSize.height * 4, sizeof( GLubyte ) );


//
描画先のグラフィックスコンテキストを作成
CGColorSpaceRef pColor = CGImageGetColorSpace( pImage.CGImage );

CGContextRef pImageContext = CGBitmapContextCreate( pImageData, mTexSize.width, mTexSize.height, 8, mTexSize.width * 4, pColor, kCGImageAlphaPremultipliedLast );


//
コンテキストに書き込み = ビットマップに書き込み
CGContextDrawImage( pImageContext, CGRectMake( 0, 0, mImageSize.width, mImageSize.height ), pImage.CGImage );


//
いらないものを削除する
CGContextRelease( pImageContext );
CGColorSpaceRelease( pColor );



==================================================
calloc malloc と同じ。 しかしコチラはメモリを全て0で初期化してくれる。
pImage.CGImage  UIImageのままでは細かい操作が出来ないので、
 UIImageが持っているCGImageという画像情報を使用します。

==================================================


これで2のべき乗サイズで画像を作りなおせた・・・・・




とおもいきや、
ここで問題があります!



実は CGImage, bitmap にも座標系が存在し、これを正しく補強してあげなければ
描画位置がおかしくなってしまいます。




CGImage, bitmap 双方とも座標系は左下が原点.....









なのでそのまま bitmap に CGImage を描画すると



左下によったビットマップ画像が出来上がる
という恐ろしゅうことになります。


望んでいるのは左上にアーボッ子さんがよった画像です。
これではテクスチャに貼り付けても座標指定がめんどくさいです。





ならばということで CTM という iPhoneの救済処置を使います。


これは指定したコンテキストの原点を色々変更してくれる機能で

今回であればビットマップコンテキストの原点を少し上にあげてやれば問題無さそうです。




これを行うCTMが
 

『CGContextTranslateCTM』 関数。
指定したコンテキストの原点の位置を平行移動します。



今回であれば上の空白を埋めたいので、

Y 方向へ  512( bitmapの高さ ) - 320( CGImageの高さ ) = 192( 差分 )  ずらします。


// 左下からになってしまうため
CGContextTranslateCTM( pImageContext, 0.0, mTexSize.height - mImageSize.height );




これでアーボッ子さんが左上によった2のべき乗の画像が作成できました



============================================

【本当に左上になったのかどうか確かめたい場合。。】

画像を描画したコンテキストを UIImage に変換し、
デスクトップにでも画像作っちゃいましょう。


CGImageRef pdI = CGBitmapContextCreateImage( pImageContext );
UIImage* pTes = [UIImage imageWithCGImage:pdI ];
NSData *data = UIImagePNGRepresentation( pTes );

NSString
*filePath = [NSString stringWithFormat:@"/Users/  **ここはユーザー名**  /DeskTop/アーボッ子Test.png" ];

if
( [data writeToFile:filePath atomically:YES] )
    NSLog(@"生成されたよ。");
else
    NSLog(@"なにかおかしいっすよ。");



これを CGContextDrawImage の下にでも噛ませてやることで
UIImage から png 画像が簡単にデスクトップにできちゃいます。 

============================================




あとはコレをテクスチャに貼り付けて
さらにポリゴンにテクスチャを張り付ければ画面に出てくれるはずです。









長くなった・・・


↓ ViewController の今回書いた分

【 (URL) 20121227_ブログ.txt


(URL)・・・次回!!!
【技術ブログ】


前回 OpenGL ESの初期化をひと通り書いてみたわけです。

X-Codeに用意されている OpenGL ESテンプレートから作成したので xib が最初から付いています。



前回、ViewController.xibの view に 自分で作成したOpenGL ESのView( MainGLView )とを関連付けたので、
もちのろん xib が使えます。




ViewController が読み込まれた時に MainGLView が読み込まれ、
ViewContoroller に管理される。

デフォルトの設定では画面に表示されるのはViewContorllerのVIew、つまりMainGLView。




---------------------------
手順↓
---------


【ViewController.xib】から MainGLView と関連付けたViewの上にド派手にスイッチを配置。






X-Codeの上にあるスーツみたいなボタンをクリック

【VIewController.h】 を右側に出す。





おいたスイッチの上に【control】を押しながらクリック。

青色の線が出てくるので 右側に出した ViewController.h の所まで持っていく。


※↓はすでに作成してあります





出てきたダイアログの

Connection から 今回はボタンを押された時に入ってきてくれる関数を作成したいので 【Action】を選択。



名前は適当ぉ!




これでスイッチが押された時に自動的に入ってきてくれる関数が自動的に ViewCtonroller.h ViewController.m の両方に作成された。






後は適当な変数をちょろろっっと作成してこの関数の中でぱぱっっとすると。



完成




---------【ON】---------





---------【OFF】---------






xibがあると OpenGL ES + iPhone 独自の機能を組み合わせたゲームも容易に作成できます。

ボタンとかはプログラム上でも作成できるので別にxibはいらないんですけどね。


でも視覚的にUIを配置できるのは中々に強いのではないかと。
特にチームで開発するときは。。


UIを色々配置できるってだけでゲームアプリ制作の妄想が膨らみます。(*´Д`)ハァハァ
(僕は)



次は
画像をポリゴンに貼る作業を書いていこうと思います。





はぁ~~~ やっぱり仕事が無いと超気持ちいいw

ブログ書けるのが至福です( ゚д゚ )




今回のプロジェクトを放置してみる ↓

【 (URL)OpenGLES_Test2 】

こんなかの、
   OpenGLES_Test2.zip

をクリックして 上の 【ファイル】 → 【ダウンロード】 からオナシャス!!


くぅ~~~りすますぅが ことしも やぁ~てくるぅ~~~~♪

タラ ドンドコドン♪ タラ ドンドコドン♪



(`・ω・´)(´・ω・`)(`・ω・´)(´・ω・`)(`・ω・´)(´・ω・`)






右でまるで後ろに佇む光る白鳥のように華麗に舞を踊っているのが僕です。


白鳥のように白鳥過ぎて後ろの白鳥と白鳥がつかないぐらい白鳥ですね^^








しぼりたて・・・//////////







ケーキ(゚д゚)ウマー





天神はカップルだらけ・・・

思いたくなくても思っちゃいますよね・・・



お前ら暇か    と。



他人に精を出すのならばもっと自分の為に頑張れや!!

なぁーにがクリスマスですかねぇ!?




あんなもんただの

子供の頃はサンタに胸がときめき一喜一憂、その日一日はチキンやケーキをいくら食べても許され、
次の日には枕元にそっとプレゼントが置いてあり希望と夢が溢れかえり光り輝くイベント。

大人になれば日本全体が祝福してくれる盛り上げムード満載の恋人との距離が一度に縮まる最高の日。


じゃねぇ-か!! 




(´;ω;`)ウッ…





俺は自分でケーキを買い、自分でろうそくを立て、自分でケーキを切り、自分でケーキを食い、自分で皿洗いをし、次の日は仕事。



っかぁー!
クリスマスさいこうだわぁー!!! FOOOOOOOO!! (^ω^)





結論?
 ないよ