前回は、画面上にキャノンを配置した。キャノンを配置したからには、砲弾を撃たなくてはいけない。今回は、敵めがけて砲弾を撃ってみよう。 弾道の角度を求める 砲弾を撃つために必要な情報を考えてみよう。まず前提として、砲弾はキャノンから敵に向かって一直線に撃つものとする。ということは、砲弾を発射するタイミングでの、キャノンの位置と敵の位置が分かれば、充分なはずだ。砲弾の初期位置はキャノンの座標になり、そこからステップ毎に敵に近づけていく。 では、1ステップにおける砲弾の位置の増加分はどうやって計算するのだろうか。このときに必要となるのが、キャノンと敵との間の角度である。角度の計算は、今回の場合は2点の座標が分かっているので、アークタンジェントを使う。角度さえ分かってしまえば、sinおよびcosを使って、増加分を計算することができるはずだ。 この計算式を実装したソースコードを紹介しよう。ここでは、c

前回は、敵を動かすところまで説明した。今回は、味方であるキャノンを配置しよう。 タッチイベントの取得 敵は道に沿って攻め上がってくるので、これをキャノンを使って迎え撃つのがタワーディフェンスゲームの基本だ。キャノンをうまく配置することがゲームの中心になる。キャノンの配置位置は、やはりiPhoneらしく、画面をタッチすることで決定するべきだろう。そこで、OpenGLを使ったアプリでのタッチイベントの取り扱い方を説明しよう。 iPhoneアプリでは、タッチイベントはUIViewクラスで受け取る。touchesBegan:withEvent:、touchesMoved:withEvent:、touchesEnded:withEvent:といったメソッドが用意されているので、これらを上書きすることでタッチイベントをトリガーとした処理を行なうことができる。今回のアプリではEAGLViewクラスがある

いよいよ敵キャラクタを動かしてみよう。このゲームでは道に沿って敵が攻めてくるので、まずは道の設定を行おう。 道の設定 タワーディフェンスゲームでは、画面に引かれた道に沿って敵が攻めてくる。道が曲がりくねっていれば、それだけ攻撃機会も多くなり、プレイヤー側が有利になる。 今回のアプリでは、道はあらかじめ背景画像に描き込んである。この道に沿わせるためには、別途道についての情報を定義しておく必要があるだろう。 道のための設定として、道の始点と終点、および曲がるポイントを記述しよう。ポイントの位置は次の画像のようになる。座標は、このアプリが使っているOpenGLの座標系にあわせてある。 これらの点を、配列として保持することにしよう。 List 3. // 道の曲がるポイント GLfloat roadPoints[] = { 0.52f, -1.6f, 0.52f, -0.75f, -0.69f,

前回は、画像ファイルを読み込んでOpenGLのテクスチャとし、背景を描くところまで説明した。今回は、キャラクタを描いてみることにしよう。また、アニメーションのための準備も行なっておく。 キャラクタのための画像 まず、キャラクタのための画像を用意しよう。今回作ろうとしているゲームはタワーディフェンスものなので、攻めて来る敵、味方である砲台、砲台から発射される弾、などが必要となる。敵は歩きながら攻めて来るので、数パターンの画像が必要になるだろう。 そのような画像が用意できたとして、それをどのようにアプリ側に渡すべきだろうか。一つのやり方は、キャラクタの画像を1つずつ別ファイルとして保存することである。確かにこのやり方もある。だがこの方法だと、あるキャラクタのあるパターンごとにOpenGLテクスチャを作成することになる。テクスチャ番号の管理が必要になるし、大量のテクスチャ生成によるパフォーマンス

前回はOpenGL環境のセットアップまで行った。これでようやく絵を描く準備が整ったことになる。今回は、いよいよ実際に画面に絵を表示させてみよう。まずはゲームの背景画像を描いてみる。 テクスチャの作成 OpenGLを使って絵を描く場合は、画像ファイルを読み込んで、これをテクスチャとして利用することになる。画像ファイルを読み込むところまではCocoaやCore GraphicsのAPIを使い、テクスチャを作成するところはOpenGLの関数を使うことになるだろう。 早速だが、そのような動作を行うソースコードを紹介しよう。loadTextureName:texture:と名付けたメソッドだ。このメソッドは、引き数を2つとる。第1引き数は、読み込む画像ファイルの名前だ。これは、プロジェクトに直で追加されていることを想定している。第2引き数は、作成されたテクスチャの名前となる。GLuintのポインタで

ゲームプログラミングの解説を続けていこう。前回は、描画フレームワークとしてOpenGLを使うということを解説した。今回は、OpenGLプログラミングの入り口となる箇所の説明をする。 OpenGLテンプレートの構成とOpenGL ESのバージョン OpenGLプログラミングを行うために、Xcodeのプロジェクトテンプレートから「OpenGL ES Application」を選択するところまでが、前回の内容だった。まずは、このプロジェクトにどのようなクラスがあるか、説明しよう。 現在のテンプレートだと、含まれているクラスのうちOpenGLに関するものは、3つだ。EAGLViewクラスと、ES1Rendererクラス、ES2Rendererクラスだ。 EAGLViewクラスは、UIViewクラスを継承している。従って、通常のCocoaのビュー階層に、このクラスを追加することができる。このクラスの

今回からは、iPhoneで動作するゲームアプリの作り方を解説しよう。ゲームでは、ユーテリティ系のソフトとは段違いの高いパフォーマンスでのグラフィック描画が求められる。そのために、画面描画にはOpenGLを用いることになる。その辺りから解説を行なっていこう。 題材として取り上げるゲームは、タワーディフェンスゲームだ。 タワーディフェンスゲームとは タワーディフェンスは、リアルタイムストラテジーゲームの一種となる。マップ内にタワーがあり、それを侵略してくる敵から防衛するのが目的となる。敵は一定数が連続で攻め込んできて、これをウェーブと呼ぶ。敵を迎撃するために、砲台を各所に配置するのだが、これには資源が必要となる。限られた資源で、いかに敵のウェーブをいかに効率よく撃破するか。これがゲームのポイントとなる。 タワーディフェンスゲームの元祖と言われているのが、FlashゲームであるRoman San

WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、 iPhone の OpenGL で Render to Texture を実現する方法をご紹介したいと思います。 Render to Texture とは、その名のとおりテクスチャに別のシーンをレンダリングして、それを本来のシーン内で再利用する技術です。ゲームなどで周りの風景が（動いているキャラクターなども含めて）物体に写り込んでいるのを見たことはないで

texturetool 独特のオプションを中心に、以下でその機能を詳しくご説明します。 圧縮率の選択 PVRTC 形式では、圧縮率は 1/8 か 1/16 に固定されており、 PNG や JPEG のように画像によって圧縮率が変化することはありません。これは主にハードウェアによる展開とランダムアクセスの効率を優先した結果でしょう。 どちらの圧縮率を使用するかはオプションで指定でき、 --bits-per-pixel-4 なら 1/8 、 --bits-per-pixel-2 なら 1/16 になります。指定がない場合はデフォルトで 1/8 が採用されます。とうぜん 1/8 の方が画質は良いので、画質とサイズのどちらを優先するかで選択してください。 圧縮誤差の処理方式の選択 圧縮率と同様に、圧縮誤差の処理方式も 2 種類から選べます。 RGB の各チャンネルに誤差を均等に分散する --cha

WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 最近 iPhone を買った勢いで iPhone プログラミングを始めました。これまでも iPod touch があったのでその気になればできたのですが、 Objective-C や Cocoa を覚えるのが面倒くさくて手を出していませんでした。しかし、 iPhone を使っているうちに面白い題材に気付いたのです。そう、 OpenGL です。 実は私は数年前までは