Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから

16,027 views

Published on

デブサミ2014 セション 13-C-1 発表資料

Published in: Technology
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,027
On SlideShare
0
From Embeds
0
Number of Embeds
1,505
Actions
Shares
0
Downloads
84
Comments
0
Likes
42
Embeds 0
No embeds

No notes for slide

Cocos2d-x によるスマートフォンアプリ開発のこれまでとこれから

  1. 1. Cocos2d-x によるスマートフォンアプリ開発 のこれまでとこれから 株式会社シュハリ! 代表取締役 松浦 晃洋 セションID: 13-C-1! #devsumiC
  2. 2. 自己紹介 • 松浦 晃洋! • 株式会社シュハリ 代表取締役! • Cocos2d-x 開発のレシピ執筆 • • @syuhari! facebook.com/syuhari
  3. 3. 今日のゴール • Cocos2d-x とは何かを知ってもらう • Cocos2d-x での開発を選択肢に入れてもらう • Cocos2d-x って何かイイねって思ってもらう
  4. 4. Cocos2d-x とは?
  5. 5. Cocos2d-x 知っていますか?
  6. 6. Cocos2d-x 使っていますか?
  7. 7. Cocos2d-x
  8. 8. Cocos2d-x
  9. 9. C++ Resources JNI Objective-C Java Xcode ant Eclipse ipa apk
  10. 10. ゲームフレームワーク • Unity • Cocos2d-x • 他にも多数あります • やりたいことが出来れば別に何使っても構わない!
  11. 11. Cocos2d-x の利点 • マルチプラットフォーム開発 • オープンソース • • • ゲームエンジン内で何をしているか分かる いざとなれば自分でカスタマイズ 海外、国内のコミュニティが活発
  12. 12. Cocos2d-x の事例
  13. 13. BADLAND
  14. 14. ドラゴンクエストモンスターズ スーパーライト
  15. 15. 三国志パズル大戦
  16. 16. ブレイブフロンティア
  17. 17. Flappy Bird
  18. 18. 海外での Cocos2d-x
  19. 19. 海外での Cocos2d-x • 中国、台湾など東南アジアでの普及率はトップ • • MicroSoft が技術的に協力している • • ランキングの7割くらいが Cocos2d-x を利用 Windows8, WindowsPhone8 ゲーム以外にもテレビのセットボックスとして利 用されている
  20. 20. Cocos2d-x 開発の! これまで
  21. 21. スマほん
  22. 22. リズムタップ
  23. 23. リズムオンステージ
  24. 24. Cocos2d-x 利用した結果 • App Store, Google Play へほぼ同時期にリリース • 教育系アプリで約2年で600万ダウンロード • 国内の知育アプリのシェアNo.1
  25. 25. 実際にどんな感じ?
  26. 26. 実装例1! ! 簡易3Dを表示する
  27. 27. • CCNode 毎にカメラがある • 通常はのっぺりした 2D になるように
 カメラが調整されている • このカメラの位置などを調整できる
  28. 28. 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);
  29. 29. 実装例2 ! 指でなぞったラインを描画する! 画像を切り取って表示する
  30. 30. • CCMotionStreak クラス • 画像をカラーエフェクトかけて描画 •   ⇐ 描画している画像はこれ • 指定した n 秒後にフェードアウト
  31. 31. 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); }
  32. 32. • 物理オブジェクトを放物線上に飛ばす • 指で切られたら、物理オブジェクトを2分 割して、テクスチャも2分割 • 分割後の物理オブジェクトにそれぞれ違う 運動エネルギーを与えて、散るようにする
  33. 33. 実装例3! ! 指で線を描き物理エンジン で動かす
  34. 34. • CCTouchMoved で指でなぞった軌跡を保存 • CCTouchEnded で指でなぞった軌跡に沿って
 小さい物理オブジェクトを多数作成 • それを繋げてひとつの物理オブジェクトにする • なぞった軌跡でラインを描画してテクスチャを 作成し、物理オブジェクトに貼り付ける
  35. 35. 指で描いている最中 (CCTouchMoved) 指で描くのが終了 (CCTouchEnded) 物理オブジェクトの塊に テクスチャを貼り付ける
  36. 36. Cocos2d-x を利用すれば! 簡単に実装できる!
  37. 37. Cocos2d-x のこれから
  38. 38. Cocos2d-x Ver.3 • 現在ベータ版がリリース • クラスのプレフィックスが取れ、
 ネームスペースを採用
  39. 39. レンダリングの高速化
  40. 40. C++ 開発者がより親しみやすく • Objective-C パターンから C++ パターンへ • C++11 対応 • ラムダ、std::function, std::thread など
  41. 41. 開発効率のアップ • ビジュアルエディタ • • CocoStudio ボーンアニメーション • DragonBones
  42. 42. DragonBones • オープンソース • Flash のエクステンション • Bone Animation • C++, JavaScript どちらでも利用可能
  43. 43. JavaScript Binding • JavaScript と C++ のメソッド名が一致 • JavaScript でネイティブアプリが作れる • ビルド時間短縮で開発効率アップ • SpiderMonkey で動作
  44. 44. その他 • 通信処理の強化 • イベントディスパッチャーが描画順 • GUI の強化 • フォントアトラスのキャッシュ • 標準ツールの充実 • cocos2d-console • プロジェクトクリエイター
  45. 45. プロジェクトクリエイター
  46. 46. まとめ
  47. 47. 今日のゴール • Cocos2d-x とは何かを知ってもらう • Cocos2d-x での開発を選択肢に入れてもらう • Cocos2d-x って何かイイねって思ってもらう
  48. 48. Action! • Cocos2d-x 未経験者 • 簡単なゲームを作ってみよう! • コミュニティに参加! • • facebook : cocos2d-x.jp Cocos2d-x 経験者 • コミュニティを一緒に盛り上げましょう!
  49. 49. Cocos2d-x で一緒に ゲームを作りましょう! • • @syuhari! facebook.com/syuhari

×