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