えったんブログ

30過ぎてえったんってどうなのよ、と思いつつ
なんとなく続ける夫婦えったん&marchのブログ
<< 訂正 :: main :: iPhone/iPadのHTMLのinputタグでJavaScriptのonChangeイベントが効かないんですけど >>

よく分かってない人がgoogle先生と一緒につくるはじめてのBox2D #cocos2d_2011_adcal

 @yoichinejiさん主催のcocos2d Advent Calendar 2011、17日目の記事です。
 前日の記事: cocos3d+Bulletで物理シミュレーション (導入編) (@mybさん)

「天の上の神は、賢者の知恵のすべてを収め
我々民へ知識として与えるであろう」
(グ・グレカス 紀元前23年〜)

 遠い昔の人が予言したように、現代技術の進歩によりgoogle先生に問えば、何でも答えが返ってくる素晴らしい時代を迎えている。
 たとえばあなたがWindows98ユーザーで、長年愛用していたW11Hのガラケーをやっと今年、スマホの潮流に乗り遅れまいと必死にiPhone4Sを入手したとする。

 そしてAppStoreを見て、
もうどうにでもなーれExcellent」などを見て驚愕するだろう。

    「こんなんでいいのかよ!Σ(゚д゚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さん)
iPhone -
2011.12.17 Saturday :: comments (8) :: trackbacks (0)

「よく分かってない人がgoogle先生と一緒につくるはじめてのBox2D #cocos2d_2011_adcal」の評価です。


Comments

oybqknf

http://www.tarvisioscacchi.it/661-adidas-scarpe-superstar-argento.html
http://www.kristiinakoskentola.nl/658-nike-roshe-run-heren.html
http://www.whitneymcveigh.co.uk/zoom-nike-price-499.php
http://www.tarvisioscacchi.it/784-adidas-gazelle-blu-e-gialle.html
http://www.aletourist.nu/442-vans-ayakkab??賊-fiyatlar??賊-ucuz.htm

<a href=http://www.sjoraddningsbatar.se/833-vans-kvinnor.php>Vans Kvinnor</a>
<a href=http://www.frbk.se/ny-yankees-keps-tjej.html>Ny Yankees Keps Tjej</a>
<a href=http://www.zonnigemuziek.nl/366-kobe-nike.htm>Kobe Nike</a>
<a href=http://www.tarvisioscacchi.it/990-adidas-superstar-bianche-e-nere-uomo.html>Adidas Superstar Bianche E Nere Uomo</a>
<a href=http://www.nocnsfsportconventie.nl/315-adidas-nmd-xr1-knit.php>Adidas Nmd Xr1 Knit</a>
Curtisgeni :: 2017/03/24 01:22 AM
丐仂仍??从仂 亟仂于仂仍??仆仂 亳??仗仂仍??亰仂于舒???????? 仗仂仄亠??亠仆亳亠.
????亟亠 于?? 亰舒于????舒从舒亠??亠, <a href=http://textile-inet.ru/raznoe/chehly-dlya-matrac>textile-inet.ru</a> 仂弍亠亟舒亠??亠 亳 ??亢亳仆舒亠??亠 于 ????仂仍仂于仂亶,
亞仂????亳仆仂亶 仍亳弍仂 于 从仂仄仆舒??亠, ??仂 ??亞仂仍仂从 亟仍?? 从????仆亠, 从仂??仂??仂亠
仂弍????仆仂 仂??于仂亟亳?????? 仗??亠亟 仗亳??舒仆亳亠, 弍????亢??舒亰仆??亶 亟仂亰于仂仍亠仆仂 弍??亟亠?? 仂??亟舒???? 仂从仂仍仂 仂仗??????
仂亟仆?? ????仄弍??, 亠??仍亳 仗??亠亟 <a href=http://textile-inet.ru/raznoe/chehly-dlya-matrac>textile-inet.ru</a> 仗仂????亟仂仄仂亠??仆???? 仄舒??亳仆??.
????仂亟??仄舒亶??亠, 亞亟亠 ??舒亰仄亠????亳?????? ??仂仍仂亟亳仍??仆亳从,
亞仂??舒亰亟仂 从仂仆??亠仆仂 仂弍仆舒????亢亳于舒???????? 亠亞仂 亟于亠????舒 ??? 亳 仆亠仗??亠仄亠仆仆仂 仗??亳仄亳??亠 ????仂
于仂 于仆亳仄舒仆亳亠 弍?????? 仗仍舒仆亳??仂于从亠 从????仆亳.
RobertGus :: 2017/03/22 08:33 PM
iymbuij

http://www.mag3.fr/chemise-ralph-lauren-solde-355
http://www.larbalaise.fr/852-nike-free-trainer-5.0-homme
http://www.jobof.fr/saucony-shadow-6000-beige-772.aspx
http://www.ifko-pub.fr/914-vans-old-skool-holographique.html
http://www.i-bm.fr/adidas-tech-super-w-chaussures-mode-sneakers-femme-740.html

<a href=http://www.julieherry.fr/933-nike-presto-port??息-femme.html>Nike Presto Port??息 Femme</a>
<a href=http://www.julieherry.fr/786-nike-presto-noir-gris.html>Nike Presto Noir Gris</a>
<a href=http://www.yoahm.fr/air-max-90-femme-noir-628>Air Max 90 Femme Noir</a>
<a href=http://www.yoahm.fr/air-max-90-blanches-femme-113>Air Max 90 Blanches Femme</a>
<a href=http://www.larbalaise.fr/832-nike-free-run-5.0-taille-39>Nike Free Run 5.0 Taille 39</a>
EugeneTam :: 2017/03/22 05:40 AM
tartness insult theatricalism jumps yajnopavita imitationistrestructuringnonreversed
<a href="http://www.neveline.com.br/wbj9l4e-Canada-Goose-Timber-Jacket---Womens-TorchMid-Grey">Canada Goose Timber Jacket - Women's Torch/Mid Grey</a> <a href="http://www.mundoceramico.com.br/mg0uls5-enfant-en-bas-??蔵ge-nike-shox-9c">enfant en bas ??蔵ge nike shox 9c</a> <a href="http://www.catedral.com.br/m6fhz9k-nike-huarache-blanc-noir-et-gris">nike huarache blanc noir et gris</a> <a href="http://www.marcelorosset.com.br/y80xnd9-canada-goose-hybridge-lite-coat-womens">canada goose hybridge lite coat womens</a> <a href="http://www.apoema.com.br/28jz8ec-canada-goose-v">canada goose v</a> <a href="http://www.catedral.com.br/ivgbqs2-nfl-Chicago-Bears-Pernell-McPhee-Jerseys-Wholesale">nfl Chicago Bears Pernell McPhee Jerseys Wholesale</a> <a href="http://probosquechapultepec.org/ta8qfew-canada-goose-jacket-retail-store">canada goose jacket retail store</a>
cheap canada goose outlet 2013 " target="_blank">vennmi133 :: 2016/11/11 12:17 AM
albertustaler spudder unsleepy phosphorous
<a href="http://www.fundicionmoreno.com/yr033pf-veste-canada-goose-impermeable">veste canada goose impermeable</a> <a href="http://www.bruck.com.br/rwa3kxn-canada-goose-citadel-takki">canada goose citadel takki</a> <a href="http://legadoarte.com.br/ppx2r0a-leg-cheap-canada-goose-expedition-parka-for-women-in-spirit">cheap canada goose expedition parka for women in spirit</a> <a href="http://texiglass.com.br/cs41a25-tex-Mens-Pittsburgh-Steelers-Martavis-Bryant-10-Black-Stitched-Elite-NFL-Jersey">Men's Pittsburgh Steelers Martavis Bryant #10 Black Stitched Elite NFL Jersey</a> <a href="http://www.bioleve.com.br/g3xxnfv-NFL-Jersey但?????s-Pro-Line-Mens-New-Orleans-Saints-Luke-McCown-Team-Color-NFL-Jersey">NFL Jersey但?????s Pro Line Men's New Orleans Saints Luke McCown Team Color NFL Jersey</a> uncreditmudsling
nfl San Francisco 49ers Joe Staley GAME Jerseys " target="_blank">haggsd111 :: 2016/11/05 06:04 PM
textually stigmal jumillite mediaevalize
<a href="http://www.sorvetegostoso.com.br/p7bobo8-alternative-to-canada-goose-parka">alternative to canada goose parka</a> <a href="http://codem1.com/094gi62-christian-louboutin-leather-studded-boots">christian louboutin leather studded boots</a> <a href="http://www.unimespagropecuaria.com.br/m0zsqzj-Nike-JR-Tiempo-Rio-II-IC-Couleur-Noir-Pointure-31.0">Nike JR Tiempo Rio II IC Couleur: Noir Pointure: 31.0</a> <a href="http://www.sagradovampirico.org/i62wlbv-Womens-Canada-Goose但????? Camp-Slim-Fit-Hooded-Packable-Down-Jacket">Women's Canada Goose但????? 'Camp' Slim Fit Hooded Packable Down Jacket</a> <a href="http://www.unidesignrio.com.br/bxohbv3-canada-goose-outlet-regina">canada goose outlet regina</a> undermeasuredfeazed
Kansas City Chiefs Mega Oval Fixed 2 Hitch Cover " target="_blank">wtvvvu709 :: 2016/11/02 06:47 AM
募集他人による袋 <a href=http://www.k-world.jp/editor/skin/coach2014-5.php>coach 財布</a>
財布受信軍団は若くてダイナミックです <a href=http://www.karendo.net/editor/skin/coach2014-6.php>コーチ バッグ</a>
安い袋それが異なると感じ <a href=http://www.aimono-konbu.com/editor/skin/coach2014-7.php>コーチ 福袋 レディース</a>
安いバッグは防塵エンジンを持っていた <a href=http://www.otona-blouse.com/editor/coach2014-8.php>コーチ 長財布 人気</a>
<a href=http://art-factory1999.com/wp-content/coach2014-9.php>コーチ アウトレット ワイケレ</a> <a href=http://www.s-bio.net/editor/coach2014-10.php>コーチ バッグ 斜めがけ</a>
Michaelmuri :: 2014/01/20 09:34 PM
お久しぶりです。
?なことがたくさんありますが、勉強しますね。
ヒシダ :: 2011/12/18 10:51 AM

Comment Form

Trackbacks