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• 中国、台湾など東南アジアでの普及率はトップ

• ランキングの７割くらいが Cocos2d-x を利用

• MicroSoft が技術的に協力している

• Windows8, WindowsPhone8

• ゲーム以外にもテレビのセットボックスとして利用されている

Cocos2d-x 開発の!これまで

スマほん

リズムタップ

リズムオンステージ

• App Store, Google Play へほぼ同時期にリリース

• 教育系アプリで約２年で６００万ダウンロード

• 国内の知育アプリのシェアNo.1

Cocos2d-x 利用した結果

実際にどんな感じ？

実装例１!!

簡易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);

実装例２ !

指でなぞったラインを描画する!画像を切り取って表示する

• 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分割

• 分割後の物理オブジェクトにそれぞれ違う運動エネルギーを与えて、散るようにする

実装例３!!

指で線を描き物理エンジンで動かす

• 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