cocos2d Advent Calendar 2011 20日目　「Cocos3dをさわってみた。」 #cocos2d_2011_adca

深刻な記事不足とのことで終盤になって参加です。

2011年技術系Advent Calendarについて。

2011年の技術系Advent Calendarを電子出版で提供しませんか？ | Gihyo Digital Publishing
https://gihyo.jp/dp/information/operation/201111/2801

cocos2d Advent Calendar 2011について。

cocos2d Advent Calendar 2011 : ATND
http://atnd.org/events/22814

前日の記事。

myb design :: blog :: cocos3d+Bulletで物理シミュレーション (実装編) #cocos2d_2011_adcal
http://www.mybdesign.com/blog/2011/12/000045.html

Cocos3dの概要

Cocos3dはBill Hollingsさんが作成中の3Dアプリ開発用のフレームワークです。
同じく2Dアプリ開発用のフレームワーク、Cocos2d for iPhoneを拡張する形で構成されています。
ライセンスはMIT、現在の最新バージョンは0.6.5です。
Cocos3dには3DCGソフト(Blender、3ds Max、Cheetah3D等)で作成したモデルデータを取り込んだり(前日の記事、19日目の@mybさんの記事に変換方法が載っています)、Cocos2Dのノードと混在できたりたくさんの機能が提供されています。
この記事ではその機能のほんの一部にふれてみたいと思います。

cocos3d « The Brenwill Workshop
http://brenwill.com/cocos3d/

Cocos3dの導入

すでに @myb さんが１６日にCocos3d+Bulletの記事で導入方法を記述されているので合わせて参照ください。

myb design :: blog :: cocos3d+Bulletで物理シミュレーション (導入編) #cocos2d_2011_adcal
http://www.mybdesign.com/blog/2011/12/000044.html

ダウンロードするファイルは２つ。(カッコの数字は今回使用したバージョン)

coco2dのプロジェクトファイル(1.0.1)

http://www.cocos2d-iphone.org/download

coco3dのプロジェクトファイル(0.6.5)

http://brenwill.com/cocos3d-whats-new/

ダウンロードしたファイルをそれぞれ展開します。
Cocos3dのプロジェクトに含まれる "install-cocos3d.sh" スクリプトを実行するとCocos3d用のテンプレートプロジェクトがインストールされます。
展開したCocos3dのプロジェクトにはCocos2d関連のファイルはないのでスクリプトの引数にCocos2dプロジェクトのパスを指定することでコピーされます。

> ./install-cocos3d.sh -u -2 "../cocos2d-iphone-1.0.1"

Xcodeの新規プロジェクト作成画面でCocos3の項目が追加されていれば完了です。

またこれにより、ダウンロードしたXcodeプロジェクトに含まれるデモプログラム、
CC3DemoMashUp、CC3Demo3DTiles、CC3Performanceを実行することができるようになります。

サンプルアプリ

テンプレートプロジェクトを下地になんとなくEdBrowserっぽいものを作ってみました。

EdBrowser
http://d.hatena.ne.jp/re_shikajiro/20080913/1221334928

プロジェクトファイルはgithubからダウンロードできます。

Downloads for kclab's KCSampleCC3 - GitHub
http://github.com/kclab/KCSampleCC3/zipball/master

水中のなかをゆらゆらブラウザ(の画像)がゆれているイメージです。
（※「っぽい」ものなのでオリジナルから程遠いです）

コードの解説

Cocos3dはあくまでCoco2dの拡張機能なので、Cocos2のSceneが前提になります。
CC3LayerはCCLayerを継承したもので通常のCCNodeとして使用でき、例えばCCNodeのツリーにそのまま追加することができます。

CC3Layer* cc3Layer = [CC3Layer node];
[scene addChild:cc3Layer];
http://brenwill.com/docs/cocos3d/0.6.5/api/interface_c_c3_layer.html

CC3Layerはcc3Worldインスタンス変数を持ち、３次元オブジェクトはcc3World以下で管理されます。

サンプルアプリではCC3LayerとCC3Worldをそれぞれ継承したクラスを使用しています。
アプリの初期化過程で、

CC3Layer* cc3Layer = [KCSampleCC3Layer layerWithColor: ccc4(30, 144, 255, 255)];

cc3Layer.cc3World = [KCSampleCC3World world];

でCC3LayerとCC3Worldを生成して紐付けてます。

画面の構成はKCSampleCC3WorldクラスのinitializeWorldメソッドで実行しています。
画像を表示する板は

CC3PlaneNode* planeNode = [CC3PlaneNode nodeWithName: ...

で生成しています。(使用にはCC3PlaneNode.hのimportが必要です)
CC3PlaneNodeはCocos2dのNodeと同様にアクションを使用することができます。
ここでは画像を上下にゆらすアクションを追加しています。

CCRepeatForever* repeatForever = [CCRepeatForever actionWithAction:seq];
[planeNode runAction:repeatForever];

CC3Layerにもエフェクトを追加しています。

id effect = [CCRepeatForever actionWithAction:[CCShaky3D actionWithRange:1 shakeZ:YES grid:ccg(15,10) duration:10]];
[cc3Layer runAction:effect];

画面をタッチして上下にスライドすると画面の手間と奥に移動します。
左右にスライドすると画面も左右にスライドします。

タッチイベントはCCLayerと同様に

cc3Layer.isTouchEnabled = YES;

を有効にして ccTouchBegan:... 等のメソッドを実装すれば簡単に取得できます。
タッチイベント取得後は指の移動量に応じてカメラの座標を動かすようにしています。

self.cam.location = cc3v(self.cam.location.x , self.cam.location.y, self.cam.location.z - 5);

以上かけあしでしたが、「Cocos3dのさわってみた。」でした。
次の21日目は、

普通のiOSからcocos2dを使ってみる - cocos2d覚書
http://sites.google.com/site/cocos2dtiledmapd/home/hutuunoioskaracocos2dwo-tukattemiru