cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから
DESCRIPTION
デブサミ2014 セション 13-C-1 発表資料TRANSCRIPT
![Page 1: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/1.jpg)
Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから
セションID: 13-C-1!#devsumiC
株式会社シュハリ!代表取締役 松浦 晃洋
![Page 2: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/2.jpg)
自己紹介• 松浦 晃洋!• 株式会社シュハリ 代表取締役!• Cocos2d-x 開発のレシピ執筆
• @syuhari!
• facebook.com/syuhari
![Page 3: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/3.jpg)
• Cocos2d-x とは何かを知ってもらう
• Cocos2d-x での開発を選択肢に入れてもらう
• Cocos2d-x って何かイイねって思ってもらう
今日のゴール
![Page 4: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/4.jpg)
Cocos2d-x とは?
![Page 5: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/5.jpg)
Cocos2d-x 知っていますか?
![Page 6: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/6.jpg)
Cocos2d-x 使っていますか?
![Page 7: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/7.jpg)
Cocos2d-x
![Page 8: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/8.jpg)
Cocos2d-x
![Page 9: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/9.jpg)
ResourcesC++
Objective-C Java
ant EclipseXcode
ipa apk
JNI
![Page 10: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/10.jpg)
ゲームフレームワーク
• Unity
• Cocos2d-x
• 他にも多数あります
• やりたいことが出来れば別に何使っても構わない!
![Page 11: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/11.jpg)
Cocos2d-x の利点• マルチプラットフォーム開発
• オープンソース
• ゲームエンジン内で何をしているか分かる
• いざとなれば自分でカスタマイズ
• 海外、国内のコミュニティが活発
![Page 12: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/12.jpg)
Cocos2d-x の事例
![Page 13: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/13.jpg)
BADLAND
![Page 14: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/14.jpg)
ドラゴンクエストモンスターズ スーパーライト
![Page 15: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/15.jpg)
三国志パズル大戦
![Page 16: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/16.jpg)
ブレイブフロンティア
![Page 17: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/17.jpg)
Flappy Bird
![Page 18: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/18.jpg)
海外での Cocos2d-x
![Page 19: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/19.jpg)
海外での Cocos2d-x• 中国、台湾など東南アジアでの普及率はトップ
• ランキングの7割くらいが Cocos2d-x を利用
• MicroSoft が技術的に協力している
• Windows8, WindowsPhone8
• ゲーム以外にもテレビのセットボックスとして利用されている
![Page 20: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/20.jpg)
Cocos2d-x 開発の!これまで
![Page 21: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/21.jpg)
スマほん
![Page 22: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/22.jpg)
リズムタップ
![Page 23: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/23.jpg)
リズムオンステージ
![Page 24: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/24.jpg)
• App Store, Google Play へほぼ同時期にリリース
• 教育系アプリで約2年で600万ダウンロード
• 国内の知育アプリのシェアNo.1
Cocos2d-x 利用した結果
![Page 25: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/25.jpg)
実際にどんな感じ?
![Page 26: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/26.jpg)
実装例1!!
簡易3Dを表示する
![Page 27: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/27.jpg)
![Page 28: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/28.jpg)
• CCNode 毎にカメラがある
• 通常はのっぺりした 2D になるようにカメラが調整されている
• このカメラの位置などを調整できる
![Page 29: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/29.jpg)
![Page 30: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/30.jpg)
![Page 31: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/31.jpg)
![Page 32: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/32.jpg)
CCSize size = CCDirector::sharedDirector()->getWinSize(); !// スクロールするスプライト生成 CCSprite* pSprite = CCSprite::create("script.png"); this->addChild(pSprite, 0); !// カメラ位置変更 float x=0, y=0, z=0; this->getCamera()->getCenterXYZ(&x, &y, &z); this->getCamera()->setCenterXYZ(x, y+0.0000003, z); !// スクロール処理 CCMoveBy* move = CCMoveBy::create(30.0f,
ccp(0, pSprite->getContentSize().height + size.height)); pSprite->runAction(move);
![Page 33: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/33.jpg)
![Page 34: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/34.jpg)
実装例2 !
指でなぞったラインを描画する!画像を切り取って表示する
![Page 35: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/35.jpg)
![Page 36: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/36.jpg)
• CCMotionStreak クラス
• 画像をカラーエフェクトかけて描画 • ⇐ 描画している画像はこれ
• 指定した n 秒後にフェードアウト
![Page 37: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/37.jpg)
bool Recipe39::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent) { this->removeChildByTag(MOTION_STREAK_TAG, true); // CCMotionStreak のインスタンスを生成 CCPoint point = this->convertTouchToNodeSpace(pTouch); CCMotionStreak* pStreak =
CCMotionStreak::create(0.5f, 1.0f, 10.0f, ccc3(255, 255, 0), "line.png");
pStreak->setPosition(point); this->addChild(pStreak, 5, MOTION_STREAK_TAG); return true; } !void Recipe39::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent) { // CCMotionStreak のインスタンスをタップした通りに動かす CCPoint point = this->convertTouchToNodeSpace(pTouch); CCMotionStreak* pStreak =
(CCMotionStreak*)this->getChildByTag(MOTION_STREAK_TAG); pStreak->setPosition(point); }
![Page 38: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/38.jpg)
• 物理オブジェクトを放物線上に飛ばす • 指で切られたら、物理オブジェクトを2分割して、テクスチャも2分割
• 分割後の物理オブジェクトにそれぞれ違う運動エネルギーを与えて、散るようにする
![Page 39: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/39.jpg)
![Page 40: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/40.jpg)
実装例3!!
指で線を描き物理エンジンで動かす
![Page 41: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/41.jpg)
![Page 42: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/42.jpg)
• CCTouchMoved で指でなぞった軌跡を保存
• CCTouchEnded で指でなぞった軌跡に沿って小さい物理オブジェクトを多数作成
• それを繋げてひとつの物理オブジェクトにする • なぞった軌跡でラインを描画してテクスチャを作成し、物理オブジェクトに貼り付ける
![Page 43: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/43.jpg)
指で描いている最中 (CCTouchMoved)
指で描くのが終了 (CCTouchEnded)
物理オブジェクトの塊に テクスチャを貼り付ける
![Page 44: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/44.jpg)
![Page 45: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/45.jpg)
Cocos2d-x を利用すれば!簡単に実装できる!
![Page 46: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/46.jpg)
Cocos2d-x のこれから
![Page 47: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/47.jpg)
Cocos2d-x Ver.3
• 現在ベータ版がリリース
• クラスのプレフィックスが取れ、ネームスペースを採用
![Page 48: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/48.jpg)
レンダリングの高速化
![Page 49: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/49.jpg)
• Objective-C パターンから C++ パターンへ
• C++11 対応
• ラムダ、std::function, std::thread など
C++ 開発者がより親しみやすく
![Page 50: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/50.jpg)
• ビジュアルエディタ
• CocoStudio
• ボーンアニメーション
• DragonBones
開発効率のアップ
![Page 51: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/51.jpg)
![Page 52: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/52.jpg)
![Page 53: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/53.jpg)
• オープンソース
• Flash のエクステンション
• Bone Animation
• C++, JavaScript どちらでも利用可能
DragonBones
![Page 54: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/54.jpg)
• JavaScript と C++ のメソッド名が一致
• JavaScript でネイティブアプリが作れる
• ビルド時間短縮で開発効率アップ
• SpiderMonkey で動作
JavaScript Binding
![Page 55: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/55.jpg)
• 通信処理の強化
• イベントディスパッチャーが描画順
• GUI の強化
• フォントアトラスのキャッシュ
• 標準ツールの充実
• cocos2d-console
• プロジェクトクリエイター
その他
![Page 56: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/56.jpg)
プロジェクトクリエイター
![Page 57: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/57.jpg)
まとめ
![Page 58: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/58.jpg)
• Cocos2d-x とは何かを知ってもらう
• Cocos2d-x での開発を選択肢に入れてもらう
• Cocos2d-x って何かイイねって思ってもらう
今日のゴール
![Page 59: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/59.jpg)
Action!• Cocos2d-x 未経験者
• 簡単なゲームを作ってみよう!
• コミュニティに参加!
• facebook : cocos2d-x.jp
• Cocos2d-x 経験者
• コミュニティを一緒に盛り上げましょう!
![Page 60: Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから](https://reader034.vdocuments.net/reader034/viewer/2022042601/5463cde1af79596f338b461b/html5/thumbnails/60.jpg)
Cocos2d-x で一緒にゲームを作りましょう!
• @syuhari!
• facebook.com/syuhari