前日の記事: cocos3d+Bulletで物理シミュレーション (導入編) (@mybさん)
「天の上の神は、賢者の知恵のすべてを収め
我々民へ知識として与えるであろう」
(グ・グレカス 紀元前23年〜)
遠い昔の人が予言したように、現代技術の進歩によりgoogle先生に問えば、何でも答えが返ってくる素晴らしい時代を迎えている。
たとえばあなたがWindows98ユーザーで、長年愛用していたW11Hのガラケーをやっと今年、スマホの潮流に乗り遅れまいと必死にiPhone4Sを入手したとする。
そしてAppStoreを見て、
「もうどうにでもなーれExcellent」や「美少女ブラ外しPutti!」を見て驚愕するだろう。
「こんなんでいいのかよ！Σ（ﾟдﾟlll）」
そしてその場の勢いで、自分だって昔ベーシックなんかをちょっといじったことあるからできるんじゃね？っと、起動に45秒かかるIE6を開き
「iPhone アプリ 開発 必要なもの」
とgoogle先生に問うだろう。
すぐさま明確な答えが返ってくるはずだ。Macが必要であると。そして、
「iphone アプリ 開発 mac はじめて 購入」
と問えば開発に的確なマシンを揃えてくれる。
「iphone アプリ 開発 ソフト」
と問えばXcodeが必要なこと、自分の端末への転送はデベロッパー登録が必要なことまで諭してくれる。
「iphone アプリ 開発 デベロッパー登録 方法」「iphone xcode ダウンロード インストール 方法」
とスムーズに進め、学生時代の夢であった
「iphone アプリ ゲーム 開発 方法 簡単に」
ではcocos2dの存在を知る。そして、
「iphone cocos2d インストール 方法」
でスタートラインに立つのであった。
本項では、そんなよく分かってない人がgoogle先生と一緒にはじめの一歩を踏み出して、下記動画のようなBox2Dアプリを作る過程を解説する。
新規プロジェクト→テンプレート作成
まずは、愛機MacでXcode4を起動しよう。ここまでのノリでインストールは完了してあるはずだ。
もし起動方法が分からなければ
「Xcode4 起動 方法」とググればいい。
そして、下記のように[File]→[New]→[New Project]で新しいプロジェクトを作成しよう。
続いて今回の目的であるBox2Dテンプレートを選択する。
「cocos2d_box2d」を選び→[Next]
プロジェクトのProduct Nameなどを入れろと言われるので画面のように入力しよう。
Product Name : HelloBox2D
Company Identifier : 任意
そして[Next]を押す。
プロジェクトファイルの保存先を選ぼう。筆者の場合は「ホーム→iPhone→MyProjects」にしているが、どこでもOK。
そして[Create]を押すと、しばらく時間がかかった後ファイルが作成され次の画面へと遷移する。
まずはこのテンプレート作成した状態でどんな感じか見てみよう。
Xcode画面左上の[Run]ボタンを押す。
へ〜。
画面をタップする度に、A,B,C,Dのうちどれかのボックスがランダムに画面に現れる。しかもそれぞれ重力や当たり判定が存在する物理世界の上に成り立っている。これが物理エンジンBox2Dの威力なのだ。あ、Box2Dというのは物理エンジンなのだそうだ、知らなかった？なら
「Box2Dとは」とググれ。
なんかすごいねーハハハハ・・・。これで満足してしまうのが日々仕事に忙殺される者たちの宿命。本当はここからなのだ。躊躇なく次の一歩をぜひ踏み出してほしい。ちなみに著者はその一歩まで15か月を要した・・・。
と、ここで「目的」のアプリへ到達するための必要な作業を洗い出してみよう。
この「目的」というのは重要なことで、こと習得を目的としたプログラミングでは、目的を見失い結局何も得るものなかったということになりかねない。目的(＝このプロジェクトの完成図)を明確に、時には企画書をパワポで作るなり、手書きで画面遷移を描いておくなり、和紙に墨汁で書き壁に貼っておくなりすると良い。
今回は上記テンプレートから以下のような目的を掲げてみた。
・画像は4つもいらない、オリジナル画像を1枚で
・タップして出現させるのをやめる
・その代わり起動時に50個ブオェっと出す
・画像をドラッグして動かせるようにする
それでは、順を追ってチャレンジして行こう。
画像を変える
まずこのシンプルなアルファベットが記載されたボックスを変えてみたい。これは画像だ。画像はファイルとしてどこかにある。あきらめない、どこかに必ず存在する。
Finderを開き、先ほどプロジェクトを保存したフォルダへ移り、その中をプレビューしながらひとつひとつ丁寧に捜し求めてみよう。
おお、ここだ。Resourcesの中にあった。blocks.png。Resourcesフォルダ？なんだそりゃ。
「Xcode Resourcesフォルダとは」
ふむふむなんか画像と音とか入れる「素材フォルダ」みたいなものだと認識しよう。
この画像、2x2にマス目にA,B,C,Dと4つのブロックが描かれている。大きさは64ピクセルx64ピクセルなので、1ブロックあたり32ピクセルx32ピクセルだ。今回はオリジナル画像1枚で良いので32ピクセルx32ピクセルの画像を1ファイル用意すればよいと見当を付けた。
さぁオリジナルの画像を用意しよう。
・・・はい、そこ挫折しない！
こうやって誰かのツイッターアイコンでも○クってくればいいのだ。
面倒？
ここからダウンロード
これを上記のようにblocks.pngと同じResourcesフォルダの中へ収納する。
さらにそれをXcode左側の「Project Navigator」の「Resourcesグループ」の中へドラッグ＆ドロップして登録する。
「Choose options...」というウィンドウが出たら、「Destination」はチェックなし、「Folders」は「Create groups...」をチェックして[Finish]ボタンを押す。
さて、リソースにぶちこんだだけだとただの自己満足になってしまう。プログラマーはコードを書いてなんぼ。華麗に"blocks"を"neji"に変えてしまおうではないか！
・・・どうする？。いきなりテンプレートが吐き出した大量のソースコードを漁っても頭が痛くなるだけだ・・・。
そうならないうちに「検索」のワザを身に着けてしまおう。Xcode画面左上ら辺にある虫眼鏡ボタンを押して「Search Navigator」へ切り替える。
「Find」横のテキストボックスへ捜し求めるキーワード"blocks.png"を入力してエンターキー。
すぐさますぐ下に検索結果が表示されるはずだ。検索結果をクリックすれば該当の箇所にジャンプしてくれる、おお、あった。ハケーン。
何も考えずにここは"blocks.png"を"neji.png"に変えてしまおう。
なにやらその直前に「Set up sprite」と書いてある。「スプライト？」なにそれ炭酸飲料？
「cocos2d スプライトとは」
ふむふむ何やら画像やキャラクターを表示するためのものらしい。これは重要そうなので、覚えておこう。
と、ここでそのスプライトなのだがA,B,C,Dと4つのブロックを表示していたところを"neji.png"ひとつのみにしなければならない。
"neji.png"に変更した直後のソースコードを嫌々ながら眺めてみると
[self addNewSprite...]
と書いてある箇所があった。直訳すると「新しいスプライトを追加する・・・」これは非常にアヤシイ。
ここでさらに新しい検索ワザを使う「それってどこよ？」ワザである。やり方は簡単だ、[command]キーを押しながら「それってどこよ？」部分をクリックすれば良い。やってみよう。
おりゃっ！
おお！？ぶっとんだ。
ここはどうやらその「addNewSprite...」ということを実際にやってるところらしい。この中身をちょっと頑張って見てみる。すぐ直下にめぼしい箇所があるのだ。よく分からないけどそういうことだ、きっと。
"RANDOM..."という箇所でA,B,C,Dのどれを選ぶかランダムに指定しているのだと思う。さらにそのランダムなやつを"CGRectMake(...."の中で32ピクセルx32ピクセルの幅と高さで切り出しているはずだ。
目星ついたところでこの辺をいろいろいじってみれば良い。何事もトライ＆エラーだ。安室奈美恵もそう諭えてくれた。いじってはエラーないか確認して[Run]して目的の動作をするか、何度も繰り返すのが良い。
まずランダムなところはもういらないのでコメントアウトしてしまう。切り出しは画像の左上から32ピクセルx32ピクセルを一箇所のみで良いわけだ。そんな感じで小一時間で以下のような回答に到達する。
// int idx = (CCRANDOM_0_1() > .5 ? 0:1);
// int idy = (CCRANDOM_0_1() > .5 ? 0:1);
CCSprite *sprite = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(0,0,32,32)];
[Run]してみると見事にアルファベットさんたちは姿を消し"neji.png"がお目見えした！いいぞ！！ねじ！
次は画面タップを司る部分を直していこう。
勝手にブオェっと出現させる
先ほどの「addNewSprite...」というのを呼べばスプライトが画面に追加されるということが分かった。きっと画面をタップしたときも「addNewSprite...」を呼び出しているから次々と新しいスプライトを出現することができているはずだ。
「addNewSprite...」の部分をダブルクリックして選び、[検索]してみよう。
ふむふむ複数箇所が該当されリストアップされてきた。核心の部分へ触れるためにひとつひとつクリックして様子を窺ってみると良い。
一番下の検索結果をクリックすると目的の箇所が表示される。確かに「addNewSprite...」を呼んでいる。さらにその直前には
・・・TouchesEnded・・・
と書かれている。「タッチが終わったとき」→「スプライトを追加する」という流れだと直感する。なるほどスゲー！
消してしまおう。
一歩戻って、そういえば、はじめに"neji.png"と書き換えた箇所でも「addNewSprite...」していた。ここで一回呼んでいるので50回呼ぶことにしちゃえばいいんじゃね？
とこのように修正する。
for (int i=0; i<50; i++) {
[self addNewSpriteWithCoords:ccp(screenSize.width/2, screenSize.height/2)];
}
実行してみよう。
ブオェ！！と50個出た。オーケー。
google先生に助けてもらいながらドラッグを実装
ここから本項のキモであるコピペワザが炸裂するぞ！google先生召還！！
「cocos2d box2d ドラッグ スプライト」
・・・どう？ある？？orz
もしかしてこのブログでてきたりするんじゃね？orz
・・・もうだめぽ。
======== 糸冬 了 =======
いや、挫折しない。こういうときは伝家の宝刀、目から鱗のワザをキメル！
・・・エイゴでググる。
「cocos2d box2d grabbing sprite」
いや「ドラッグ」を英訳したら「drag」じゃね？というツッコミは自販機の下にしまっておこう。目ぼしい検索結果をひとつひとつクリックしてトライ＆エラーの時間だ。なんかそれっぽいソースコードがあったらコピペしてみる。たまにJavaScriptのソースコードをコピペしてしまったりするかもしれないが気にしない。
「動けばいい」
ただその目標に向かって邁進するのみだ。そしていつしかそのものズバリを発見する、さすがgoogle先生。
さあ、この素晴らしい回答へジャンプ！
リンク切れの時のために一応コピペ。
世界中で同じ悩みを抱えてる者のための質問コーナーとなってるサイトが数多くある。このサイトもそうだろう。流れとしては、
質問者の質問→動かないソースコード→回答者の回答→動くソースコード→質問者の賞賛と謝辞
という風になっていると思う。「動かないソースコード」を誤ってコピペすると質問者と同じ悩みを抱えることとなるので、そこは頑張って探索してみよう。
「Cool」アメリカ人がこういってる。他に「Awesome」とか言ったりすることもある。この直前がクールなコードということだ。
さあコピペ祭りを始めよう！
「Have this somewhere in your interface:」と言われているので、HelloWorldLayer.hの上記の箇所へコピペ。なんかそういうことらしい。
「defined this macro」と書いてあるので、HelloWorldLayer.mの上の方にコピペ。
「In your init method」と書いてあるので、HelloWorldLayer.mのinit {....}のお尻のとこにコピペ。
「And then the big blob of code that does it all:」と書いてあるので、HelloWorldLayer.mのまーこの辺にコピペ。
次は、
You will also need this file included as it's required for the query callback:
QueryCallback.h
と書いてあり、なんか作らなきゃいけないそうで、なんか大変そうだけど挫けずやってみる。
「Project Navigator」の「HelloBox2D」グループを右クリックして、「New File...」
「iOS」の「C and C++」を選び、「Header File」アイコンを選択し、[Next]
名前は間違えず"QueryCallBack.h"と入力し、保存場所を他の.h/.mがあるところへ。[Create]ボタンを押す。
ブラウザに戻ってコピ〜。
Xcodeに戻って、"QueryCallBack.h"の中身を全部消して、全部ペースト。
できた！[Run]！
ギャーダメダエラッてる！？
ここでまたトライ＆エラーなのだが、いろいろまたググったりして自分で修復できそうなエラーであるかないかと格闘する。今回の場合は、
"HelloWorldLayer.mm"の頭で、
#import "QueryCallBack.h"
と差し込めばオーケーだった。・・・ふう〜。
気を取り直して[Run]。
完成！！
ちゃんと指でねじさんたちをドラッグしてはじいたりすればぶち飛ばたり、持ったままコロコロ動かしたりすることができたはずだ。しかもスプライト同士は互いに当たり判定ができていて他のにぶつけたらちゃんとそれも吹っ飛んでくれる。
「我々の勝利である！！Σ（ﾟдﾟlll）」
・・・とこのように、国内外の賢者たちの知恵を借りてトライ＆エラーを繰り返して目的に向かって一歩ずつ進んでいくと、ゆるゆりシェイクユーみたいなアプリが出来るよ、というお話でした。
以上、お疲れ！
次の記事: ゲームを作るなら効果音、声、BGMも必要だよね (@aoi68kさん) ]]>
