KCLAB

2011-12-23

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

  • cocos2d Advent Calendar 2011について。

cocos2d Advent Calendar 2011 : ATND

http://atnd.org/events/22814

  • 前日の記事。

xionchannel@software: coco2d Advent Calendar 2011 22日目: Tiledの使い方講座

http://xionchannel.blogspot.com/2011/12/coco2d-advent-calendar-2011-22-tiled.html

2回目の記事です。

前回に引続きCocos3dでサンプルを作ってみました。

今回は画面をタッチして3Dオブジェクトを検出する処理を中心に扱っています。

ダウンロードはgithubから。

KCSampleCC3TouchCube

http://github.com/kclab/KCSampleCC3TouchCube/zipball/master

起動すると画面中央にcubeをひとつ表示します。

f:id:Kanta:20111224230406p:image


cubeをタッチするとタッチした側面にさらにcubeが追加されます。

f:id:Kanta:20111224230407p:image


cubeを画面に表示する。

KCSampleCC3TouchCubeWorldのinitializeWorldでカメラとライトの設定が完了したら

cubeをひとつ生成してCC3Nodeツリーに追加します。

KCSampleCC3TouchCubeWorld

-(void) initializeWorld {
  ...

  CC3Node* firstCube = [self cubuTouchableSide];
  self.nodeCenter = firstCube;
  [self addChild:firstCube];
}

cubuTouchableSideメソッドでcubeの生成します。

KCSampleCC3TouchCubeWorld

- (CC3Node*)cubuTouchableSide {
  
  CC3Node* node = [CC3Node nodeWithName:@"nodeCenter"];
  node.location = cc3v(0.0, 0.0, 0.0);
  //node.rotation = cc3v(-30.0, 45.0, 0.0);
  
  CGFloat lengthOnSide = LENGTH_ON_SIDE_FOR_CUBE;
  CGFloat lengthOnSideHalf = lengthOnSide / 2;
  CGSize rectSize = CGSizeMake(lengthOnSide, lengthOnSide);
  
  // Front.
  {
    CC3PlaneNode* planeNode = [CC3PlaneNode nodeWithName:NODE_NAME_FRONT];
    [planeNode populateAsCenteredRectangleWithSize:rectSize];
    planeNode.color = ccYELLOW;
    planeNode.location = cc3v(0.0, 0.0, lengthOnSideHalf);
    planeNode.rotation = cc3v(0.0, 0.0, 0.0);
    planeNode.isTouchEnabled = YES;
    [node addChild:planeNode];
  }

  ...
}

大きさを持たないnodeを中心に6枚のPlaneNodeを貼りあわせて作成します。

各planeノードのisTouchEnabledを有効にするとそのノードはタッチしたときに検出可能になります。



タッチでcubeを検出する。

タッチしたノードを検出するためには、前回の「Cocos3dをさわってみた」でも解説したように、

CC3Layerを継承したKCSampleCC3TouchCubeLayerのisTouchEnabledを有効にします。

KCSampleCC3TouchCubeLayer

-(void) initializeControls {
  self.isTouchEnabled = YES;
}

次にKCSampleCC3TouchCubeWorldのメソッド-(void) nodeSelected...をオーバライドします。

KCSampleCC3TouchCubeWorld

-(void) nodeSelected: (CC3Node*) aNode byTouchEvent: (uint) touchType at: (CGPoint) touchPoint {
  LogDebug();
  LogInfo(@"You selected %@ at %@, or %@ in 2D.", aNode,
          NSStringFromCC3Vector(aNode ? aNode.globalLocation : kCC3VectorZero),
          NSStringFromCC3Vector(aNode ? [activeCamera projectNode: aNode] : kCC3VectorZero));
  
  LogDebug(@"touchPoint => %@", NSStringFromCGPoint(touchPoint));
  
  if ([aNode.name isEqualToString:NODE_NAME_FRONT]) {
    LogDebug(@"TAG_FRONT");
    CC3Node* aCube = [self cubuTouchableSide];
    aCube.location = cc3v(0.0, 0.0, LENGTH_ON_SIDE_FOR_CUBE);
    [aNode.parent addChild:aCube];

  ...

画面をタッチした場所にcubeが存在する場合、上記のメソッドが呼ばれます。

その後ノード生成時に登録した名前でcubeのどの側面か判別して側面に隣り合わせになるようにcubeをさらに追加しています。 

このように、Cocos3dではCC3NodeのオブジェクトのisTouchEnabledプロパティを有効にして、

"- (void) nodeSelected..."をオーバライドするだけで簡単に3D空間のオブジェクトを選択することができます。



次の記事

xionchannel@software: coco2d Advent Calendar 2011 24日目: オーバートップレイヤーのすすめ

http://xionchannel.blogspot.com/2011/12/coco2d-advent-calendar-2011-24.html

2011-12-20

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 さんが16日にCocos3d+Bulletの記事で導入方法を記述されているので合わせて参照ください。

myb design :: blog :: cocos3d+Bulletで物理シミュレーション (導入編) #cocos2d_2011_adcal

http://www.mybdesign.com/blog/2011/12/000044.html

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

  • 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の項目が追加されていれば完了です。

f:id:Kanta:20111221015251p:image

またこれにより、ダウンロードした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

f:id:Kanta:20111221015252p:image

水中のなかをゆらゆらブラウザ(の画像)がゆれているイメージです。

(※「っぽい」ものなのでオリジナルから程遠いです)


コードの解説

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インスタンス変数を持ち、3次元オブジェクトは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

2011-06-27

[][][] Cocos2d勉強会参加メモ

またまた久しぶりに更新。

もう先週になってしまいましたが、Cocos2dの勉強会に参加してきました。復習を兼ねて関連リンクをまとめてます。


ATND。参加者たくさん。

(実際の参加者何人くらいだったんだろう?)

cocos2d勉強会 : ATND

http://atnd.org/events/16032


主催の畑さんスライド。

6月20日サイバーエージェント様で開催されたcocos2d勉強会発表スライドを公開 - Seasons.NET

http://d.hatena.ne.jp/Seasons/20110621/1308673810

ボリュームたっぷりな上、Keynoteのアニメーションがかなり凝ってます。


次に@emorinsさんの発表で、CCSpriteに衝突判定を加えるカテゴリの紹介でした。ソースも公開されています。

emorins/CCCollision - GitHub

https://github.com/emorins/CCCollision


最後は坂本さん。

サラッとした発表なのに内容はかなり濃かったです。

cocos2d + 非同期

http://www.slideshare.net/sakamotokazuki/cocos2d-8383668

ループ処理、垂直同期信号、非同期処理と超々重要な内容でした。(ブラウン管の仕組みはまんがサイエンスを読んでやっとイメージできるようになったレベル)


当日の雰囲気はTogetterから。

Togetter - 「cocos2d勉強会(2011/6/20)まとめ」

http://togetter.com/li/151941

以前から疑問だった、Ricardo Quesadaさん(coco2d for iPhoneのMain Contributor)の読み方。

http://twitter.com/hkato193/status/82793280290570240

アルゼンチンの方なのでスペイン語になるんですね。

(ロバートはロベルトとか。ケサーダは全くわかりませんでした)


懇親会ではお久しぶりの方々にお会いできたり、@ajinotatakiさんに次の作品を見せてもらったり。

xionchannel@software: 新作予告!HungryMaster

http://xionchannel.blogspot.com/2011/06/hungrymaster.html


あとCocos2d繋がりで、先日こういったUstがあったようです。(リアルタイムでは見れなかった。)

Ustream.tv: ユーザー kawazust: かわずと!第20回『iPhoneゲーム開発入門』, かわずと!第20回. その他

http://www.ustream.tv/recorded/15605720

まだ全部みてないけど、冒頭のスライドで結構お腹いっぱい。(某QBを見たあとおもむろにDeveloper契約のpdfを取り出す)


で、先日Cocos2d本ゲット。

cocos2dで作る iPhone&iPadゲームプログラミング

http://amazon.jp/dp/4844330411

技術資料をあたるときはできるだけオリジナルを参照するようにしているけど、大半が英語なのでやっぱり日本語で読めるのはありがたいです。

時間作って久しぶりに読書会っぽいのやりたいな〜。

2010-12-05

[]第2回ベンチャー・カフェ「エンジニアは、サービスデザインにどう貢献できるか」に参加してきました。

またまた久しぶりの更新。生きてますよ。

先日、 ベンチャー・カフェというイベントに参加してきました。

かなぶんユーザつながりの @uchagi76 さんが主催されているということくらいで

あまり予備知識無しで参加したのですが、とても楽しかったです。

イベントのプログラムはこちらを。

ベンチャー・カフェ

http://venturecafe.jp/program.html

ATND

第2回ベンチャー・カフェ 「エンジニアは、サービスデザインにどう貢献できるか」 : ATND

http://atnd.org/events/9954


イベントは2部構成になっていて第1位部はスピーチ。

主にWebサービスを開発している会社さんで分業または協業をどのように実践しているのかお話されました。

どのスピーチも具体的でとても興味深い中、ヌーラボさんのコラボレーションを促進する仕組みが特に印象に残りました。

バックグラウンドの異なるメンバーが集まる研修では、まずはじめにお互いを知ることがとても重要なのですが

そのレクレーションとして一緒に歴史年表をつくるそうです。

そこに書きこむ内容は社会一般の歴史的なイベントや事件と一緒に所属する会社や組織の出来事、

そして個人プライベートな出来事を書きあわせていくとのことでした。 (もちろんだせる範囲で)

そうするとこれまでの流れから現在のメンバーの出会いにいたるまでが必然に感じてくるそうです。

実際にやってみないと実感としてはわからないと思いますが、

歴史という時間軸を意識して、相互の情報を共有することがポイントかな〜と。

また、一部のスピーカーの方々にインタビューもされているのでこちらを参照してから参加するとスピーチの内容をより楽しく聞けるかも。

ユニークベンチャー発見! - 株式会社F-Quest

http://www.f-quest.com/fquest/tag/%E3%83%A6%E3%83%8B%E3%83%BC%E3%82%AF%E4%BC%81%E6%A5%AD%E7%99%BA%E8%A6%8B%EF%BC%81-621


第2部はワールドカフェでした。話には聞いたことはあったのですが

実際に体験するのははじめてで、これまた大変楽してく時間がすぎるのがあっという間でした。

詳細なやりかたは前回のイベントリポートにもあるのでそちらと見ていただくとして、ちょっと面白いルールがありました。

話し合いの終了時間になったら司会者が手をあげて、それに気づいた人は次々に手をあげていって全員手をあげたら終了というもので私も議論に熱中して司会の進行に気づかないケースによく直面していたのですが、ちょっとした工夫で結構効果的でした。

第1回開催レポートはこちら。

http://venturecafe.jp/report.html

短時間にたくさんの刺激を受け手、書き足りないことがまだまだありますが、

ワールドカフェは、オープンスペースやアンカンファレンスといった

参加型イベントに通じるものがあると思いました。

イベントの開催運営はとても大変だと思いますが、次回があったらまた参加したいと思います。


で、最後に告知です。

12月9日に三鷹pgcafeの忘年会やります。

[第77回]三鷹プログラマーズカフェ忘年会ナイト[12/9] : ATND

http://atnd.org/events/9866

まだ会場に余裕がありますので是非ご参加ください。

三鷹pgcafeって何?って方はこちらを。

pgcafe - プログラマーズカフェ

http://pgcafe.net/

2010-02-26