Cocos2d-x公開講座 in 鹿児島

Cocos2d-x公開講座~基本講義&お試しハンズオン~

株式会社TKS2 清水友晶

in 鹿児島

清水友晶• 株式会社TKS2スマートフォンアプリ開発(iOS, Android, Windows Phone 8)　Webコンテンツ開発

• Cocos2d-xへの開発参加Cocos2d-xを利用したアプリ開発講演活動執筆活動

• Twitter: tks2shimizu

• Blog: http://tks2.net/memo

• SlideShare: http://www.slideshare.net/doraemonsss

• Facebook: http://www.facebook.com/doraemonsss

http://tks2.net/memo

http://tks2.net/memo

http://www.slideshare.net/doraemonsss

http://www.slideshare.net/doraemonsss

http://www.facebook.com/doraemonsss

http://www.facebook.com/doraemonsss

販売台数比較

http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1



プラットフォームのシェア




時間別トラフィック




Angry Birds vs Nintendo DS




フリーミアムモデル




収益Top200アプリ中ゲームが70%




これらから判ること• スマートフォン・タブレットは今後もしばらくは伸び続ける

• PCは仕事で利用、一般的にはスマートフォン・タブレットが利用される

• 無料アプリでアプリ内課金を行うフリーミアムモデルが主流

• ゲームアプリの課金率が高い

• まだしばらくは、スマートフォン・タブレット向けゲームで稼ぐことができる

と言うことは・・・

もう少し詳細に• スマートフォン・タブレット向けOSに対して、日本ではAndroid, iOSが主流

• できれば両OSに対応したゲームアプリを開発できることが望ましい

• AndroidとiOSのアプリをそれぞれ開発するには、実装に2倍の工数が掛かってしまう・・・

• 1ソースでAndroidとiOSの開発ができれば効率が良い

• クロスプラットフォーム開発が可能なゲームプラットフォームがあれば良いけど、そんなのあるの？

クロスプラットフォーム開発可能なツール・フレームワーク

• Cocos2d-x

• Unity

• Corona SDK

• Moai

• Gilderos

• Game Salad

• JS / HTML5 framework

• Titanium Mobile

• Phone Gap

Cocos2d-x

•2Dゲームフレームワーク•オープンソース(MIT)

•高速処理•メモリ周りの処理は不要•ゲームエンジンを修正可能•入門者から熟練者まで

Cocos2d-xでどんなアプリが作れるの？• Cocos2d-xに使用例が紹介されている

http://www.cocos2d-x.org/projects/cocos2d-x/apps



Cocos2d-xでどんなアプリが作れるの？• スマートエデュケーションおやこでスマほん(Android, iOS)AWS「スタートアップチャレンジ」優勝IVS 2012 Fall Kyoto 「Launch Pad」優勝

• オープンソース

• MITライセンス

• 2Dゲームフレームワーク

• Python

• Windows, Mac, Linux

Cocos2d

http://en.wikipedia.org/wiki/Cocos2d






• Objective-C

• iOS, Mac OS X

Cocos2d for iPhone







• C++, Lua, Javascript

• マルチプラットフォーム

Cocos2d-x




Cocos2d-x対応プラットフォーム

http://www.cocos2d-x.org/projects/cocos2d-x/wiki



開発環境

• Android, iOS対応のアプリを開発する際の開発環境例

• Mac OS X　

• Xcode (iOS向けアプリ開発)

• Eclipse (Android向けアプリ開発)

Cocos2d-xをさわってみよう

Xcodeのインストール

• Mac App StoreからXcodeをダウンロード&インストール

Cocos2d-xのダウンロード

• Cocos2d-xの最新バージョンをダウンロード(ハンズオンは基本的に最新バージョンを用いて行います)

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download



Cocos2d-xを解凍する• ダウンロードしたzipファイルを任意のディレクトリに解凍します

• ハンズオンではユーザのホームディレクトリへの解凍をオススメします（解凍した場所を忘れなければどこでもいいんです）

• ユーザ名がsumomoの場合、　/Users/sumomoへ解凍し　/Users/sumomo/cocos2d-2.1beta3-x-2.1.0となります

テンプレートのインストール• ターミナル.app起動

• cocos2d-2.1beta3-x-2.1.0のディレクトリへ移動

• install-templates-xcode.shの実行　　　強制インストールの場合

アプリケーション > ユーティリティ > ターミナル

cd cocos2d-2.1beta3-x-2.1.0

./install-templates-xcode.sh -u

./install-templates-xcode.sh -u -f

テンプレートのインストールに成功!

• テンプレートのインストールに成功した場合は、次のようなログが見られます

テンプレートのインストールに失敗する...• テンプレートのインストールに失敗する場合は、テンプレートの権限をチェックしてみましょう

• 所有者が別の人になっている場合は、所有者を変更しましょう(変更しても問題ないか管理者に確認して下さい)

cd /Users/tomoaki/Library/Developer/Xcode/Templatesls -al

chown -R tomoaki cocos2d-x

新規プロジェクトの作成• Xcode起動

• 新規プロジェクトの作成cocos2dxを選択

• Product Name:HelloWorld　

• 保存先: ホームディレクトリ(/Users/Sumomo)

Hello World

• 作成されたプロジェクトをRun

ソースをいじってみよう

表示する文字を変更する• HelloWorldScene.cppを選択

• 54行目の”Hello World”を好きな文字に変更しよう

背景を動かしてみよう• 背景は66行目のpSpriteにて表示している

• pSpriteに対して命令することで背景を動かすことができる

• 位置変更

• 拡大・縮小

• 回転

• アンカーポイント

• 透過

背景を動かしてみようpSprite->setPosition( ccp(0, 0) );

pSprite->setScale(2.0f);

pSprite->setRotation(90.0f);

pSprite->setAnchorPoint( ccp(0, 0) );

pSprite->setOpacity(127);

別の画像に変更してみよう• Resourcesディレクトリに画像を配置する

• Xcode上に読み込む

• ソースの修正

HelloWorld/Resources/cat.png

CCSprite* pSprite = CCSprite::create("cat.png");

http://tks2.net/cat.png



Cocos2d-xの仕組み

• 基本的なクラス

• CCDirector ... アプリの中心

• CCScene ... シーン(画面)

• CCLayer ... シーン中のレイヤー

• CCSprite ... シーン中の画像など

Cocos2d-xの仕組み• プロジェクトには次のディレクトリがある

• Classes

• Resources

• 最初に用意されているクラスは次の2つ

• AppDelegate

• HelloWorldScene

Cocos2d-xの仕組み• AppDelegateには次の関数がある

• applicationDidFinishLaunching()

• アプリ起動時に処理され、アプリのセッティングを行う

• 最初のシーンを呼び出す

• applicationDidEnterBackground()

• アプリがスリープする時に処理され、アプリの停止を行う

• applicationWillEnterForeground()

• アプリ復帰時に処理され、アプリの再開を行う

CCActionを使ってみよう!

• オブジェクトを移動させてみる2秒で画面右端へ移動する

CCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2));

pSprite->runAction(move);


• CCAction

• 移動CCMoveTo, CCMoveBy

• 回転CCRotateTo, CCRotateBy

• フェードイン・フェードアウトCCFadeIn, CCFadeOut

http://www.cocos2d-x.org/reference/native-cpp/d7/d12/classcocos2d_1_1_c_c_action.html






• 連続アクションを実行(同じアクション)CCRepeat, CCRepeatForever

• 連続アクションを実行(異なるアクション)CCSequence

• アクションを同時に実行CCSpawn

CCActionを使ってみよう!• 指定時間待つ

CCDelayTime

• メソッドを呼ぶCCCallFunc,CCCallFuncN,CCCallFuncND,CCCallFuncO

• イージングを利用するCCEase~

新しいシーンを表示しよう！• シーンの表示は、CCDirectorクラスが担当する

• replaceSceneメソッド

• pushSceneメソッド

• popSceneメソッド

• 画面遷移してみよう！CCScene* pScene = HelloWorld::scene();

CCDirector::sharedDirector()->replaceScene(pScene);

格好いい画面遷移を！

• CCTransitionScene

• クロスフェードCCTransitionCrossFade

• フリップCCTransitionFlipX, CCTransitionFlipY

• ページめくりCCTransitionPageTurn

http://www.cocos2d-x.org/reference/native-cpp/d1/dc8/classcocos2d_1_1_c_c_transition_scene.html





Cocos2d-xについてもっと知りたい！

• Cocos2d-x実践講座 in 鹿児島～少人数で実際にアプリ作りを体験してみよう!～

• 1/19(土) 13:00~17:00

• http://atnd.org/events/35243

http://atnd.org/events/35243

http://atnd.org/events/35243

Cocos2d-x公開講座 in 鹿児島

Technology

Transcript of Cocos2d-x公開講座 in 鹿児島