Your SlideShare is downloading. ×
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

㉟cocos2d-x勉強会:簡単なアプリをつくってみよう

2,389

Published on

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

No Downloads
Views
Total Views
2,389
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. cocos2d-x勉強会 ㉟簡単なアプリをつくってみよう
  • 2. はじめに •  macのみで、Windowsの解説はしません。Windowsは、 Cygwinとかも入れないとダメみたい。 •  cocos2d-xは、色々な言語が使えますがcppを想定して います。
  • 3. GUIじゃないから面倒だよね>< プロジェクトの作成
  • 4. プロジェクトの作成① •  cocos2d-xでは、コマンドプロンプトからプロジェクト を作成します。iPhone/Android両方で利用できるプロ ジェクトが作成されるので便利です。 •  LaunchPadを開いて、「その他」→「ターミナル」を 起動します。 •  よくつかうので、Dockに追加しておくといいでしょう。
  • 5. プロジェクトの作成② •  「/Users/tonosamart/cocos/cocos2d-x-2.2/tools/ project-creator/create_project.py」を実行します。 •  まずは、フォルダを移動します。 –  cd cocos/cocos2d-x-2.2/tools/project-creator •  次に、プロジェクト名、パッケージ名、プログラム言語 をパラメータに指定してプログラムを実行します。 –  ./create_project.py -project Sound -package com.tonosamart.test -language cpp •  上手く行けば、cocos2d-x-2.2の下のprojectsの下にプ ロジェクト名でフォルダが出来ます。
  • 6. プロジェクトの作成③ tonosamart-mac-2: tonosamart$ cd cocos/cocos2d-x-2.2/tools/ project-creator tonosamart-mac-2:project-creator tonosamart$ ./create_project.py project Sound -package com.tonosamart.test -language cpp proj.ios : Done! proj.android : Done! proj.win32 : Done! proj.winrt : Done! proj.wp8 : Done! proj.mac : Done! proj.blackberry : Done! proj.linux : Done! proj.marmalade : Done! New project has been created in this path: /Users/tonosamart/ cocos/cocos2d-x-2.2/projects/Sound Have Fun!
  • 7. プロジェクトの作成④ •  プロジェクトの中身は右図の様な 構成になっています。 •  Classesフォルダにプログラムを おいて、Resourcesフォルダに画 像などのリソースを配置します。 •  proj.iosなどのフォルダがそれぞ れのOSごとにできます。この フォルダを用いてOS毎にビルド などを行います。
  • 8. まずはAndroidから Androidで動かす
  • 9. Androidで動かす① •  「File」→「New」→「Project」を選択 •  ダイアログが出るので「Android」→「Android Project from Existing Code」を選んで「Next」
  • 10. Androidで動かす② •  ダイアログが出るので、Root Directoryで「/Users/ tonosamart/cocos/cocos2d-x-2.2/cocos2dx/ platform/android/java」を選択 •  Projectsに表示されたら「Finish」を押す ※うまくいくと、 Package Explorerに、libcocos2dxが追加される
  • 11. Androidで動かす③ •  もう一回同じ手順で、「/Users/tonosamart/cocos/ cocos2d-x-2.2/projects/Sound/proj.android」を追 加する ※あとは、通常のAndroid同様、実機などで 実行できます。 ※Eclipse外で変更を加えた場合は、「File」 →「Refresh」を忘れずに行って下さい。 ※ブレイクポイントは使えません。不便><
  • 12. Androidで動かす④ •  エミュレータで動かす場合は、 「Use Host GPU」にチェッ クを入れる必要があります。
  • 13. シュミレーターが速いのがうれしい iPhoneで動かす
  • 14. iPhoneで動かす① •  proj.iosに.xcodeprojがあるのでxcodeで開けばOK
  • 15. iPhoneで動かす② •  下記のwarningがでた場合は、Perform Changesで設 定を変更
  • 16. iPhoneで動かす③ •  あとは通常のプロジェクト同様、エミュレータや実機で 動かせます! ※Androidと違いブレイクポイントが使えます
  • 17. Androidがめんどくさい>< プロジェクトへのファイル追加
  • 18. プロジェクトへのファイル追加 •  プロジェクトにファイルを追加するには、手順を追う必 要があります。 •  プログラムは、Classesフォルダ、画像はResourcesに おく必要があるからです。 •  Xcodeで配置した後に、Androidで読み込ませる方法が 楽なのでそれを説明します!
  • 19. Classの追加(iPhone)① •  メニューからFile→New→Fileを選びます。 •  C and C++で、C++ Classを選んで 「Next」を押します。
  • 20. Classの追加(iPhone)② •  名前をSoundScene.cppにして、保存先をClassesにし てCreateしてください。
  • 21. Classの追加(Android) •  jniの中にあるAndroid.mkを開きます。 •  LOCAL_SRC_FILESに、 SoundScene.cppを追加します。
  • 22. Resourceの追加(iPhone)① •  画像や音楽などをXcodeのResourcesフォ ルダにドラック&ドロップします。 •  ダイアログが出るので、図のようになってい るのを確認してFinishを押します。
  • 23. Resourcesの追加(iPhone)② •  Resourcesに追加されていることを確認します。 •  フォルダを追加した場合青くなります。 •  念のため右クリックメニューの「Show in Finder」で、Resourcesフォルダの中に物理的に 格納されていることを確認して下さい。
  • 24. Resourceの追加(Android) •  Project→Cleanをすると、assetsの中に ファイルがコピーされます。(このとき、毎 回assetsフォルダの中身は削除されるので注 意して下さい。)
  • 25. とりあえず簡単なものを キャラクターを表示してみる
  • 26. キャラクターを表示してみる •  SoundSceneを改造していきましょう。とりあえず、単 純なひな形のようなものを作ります。 •  画像は、imagesにはいってるやつを使います。 •  もともとプロジェクトを作った時に入っている HelloWorldSceneを参考にしながら作りましょう!
  • 27. AppDelegate.cpp pDirector->setOpenGLView(pEGLView); // ResolutionSize(visibleSize)の設定 CCEGLView::sharedOpenGLView()>setDesignResolutionSize(480, 320, kResolutionShowAll); // ファイルパスと scale を設定 std::vector<std::string> searchPaths; searchPaths.push_back("images"); pDirector->setContentScaleFactor(2.0f); CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths); // turn on display FPS
  • 28. SoundScene.h #ifndef __Test__SoundScene__ #define __Test__SoundScene__ #include "cocos2d.h" class SoundScene : public cocos2d::CCLayer{ public: virtual bool init(); static cocos2d::CCScene* scene(); CREATE_FUNC(SoundScene); }; #endif /* defined(__Test__SoundScene__) */
  • 29. SoundScene.cpp① #include "SoundScene.h USING_NS_CC; CCScene* SoundScene::scene(){ CCScene *scene = CCScene::create(); SoundScene *layer = SoundScene::create(); scene->addChild(layer); return scene; } bool SoundScene::init(){ if(!CCLayer::init()){ return false; }
  • 30. SoundScene.cpp② CCSize frameSize = CCEGLView::sharedOpenGLView()>getFrameSize(); CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); CCSprite* pBgSprite = CCSprite::create("bg.png"); pBgSprite->setPosition(ccp(visibleSize.width/2, visibleSize.height/2)); this->addChild(pBgSprite, 0);
  • 31. SoundScene.cpp③ CCSprite* pTolemorouSprite = CCSprite::create("tolemorou.png"); pTolemorouSprite->setPosition(ccp(240, 120)); this->addChild(pTolemorouSprite, 1); return true; }
  • 32. SoundSceneを呼び出す •  AppDelegate.cppのHelloWorldSceneを SoundSceneに置き換えます。 •  これで、SoundSceneが起動時に呼ばれ るようになります。
  • 33. できた! •  こんなかんじ
  • 34. かいせつ •  CCDirector::sharedDirector()->getVisibleSize()で画 面のサイズが取得できます。
  • 35. 音楽に挑戦 BGMをならしてみる
  • 36. Resourceの追加 •  音楽をXcodeのResourcesフォルダにド ラック&ドロップします。 •  ダイアログが出るので、図のようになってい るのを確認してFinishを押します。
  • 37. 音楽のフォーマット •  cocos2d-xではいろいろなフォーマット が使えます。MP3やWAVであればiPhone とAndroidどちらでも使えます! •  でも、MP3はライセンス料がかかるし、 WAVは容量が大きい>< •  今回は端末を判定して、cafとoggを鳴ら しわけます。
  • 38. MP3のライセンス料(参考) iOSとAndroidOSそれぞれにアプリを出した場合 OS毎に5,000個までは無償 販売数100, 000以下 $2,500一括払い 販売数100,000以上 1アプリ毎に$0.75 ※アプリ本体無料+アプリ内の広告による収入あり、アプリ本体無料 +アプリ内課金(機能解除等)による収入ありでもライセンス料は必 要とのこと ※あくまで参考数値です。条件等でも変わるようなので確認してみて 下さい。
  • 39. SoundScene.cpp① #include "SimpleAudioEngine.h" using namespace CocosDenshion;
  • 40. SoundScene.cpp② SimpleAudioEngine::sharedEngine()->setBackgroundMusicVolume(0.5); TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform(); if (platform == kTargetIphone ¦¦ platform == kTargetIpad){ SimpleAudioEngine::sharedEngine()>preloadBackgroundMusic("sounds/caf/bgm.caf"); SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/ caf/bgm.caf", true); }else{ SimpleAudioEngine::sharedEngine()>preloadBackgroundMusic("sounds/ogg/bgm.ogg"); SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/ ogg/bgm.ogg", true); } CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
  • 41. できた! •  おとがなった
  • 42. かいせつ •  CCApplication::sharedApplication()>getTargetPlatform()を使うと、どの端末を使っている かを判定できます。 •  iPhone,iPadの場合は.caf、それ以外(Android)の場 合は.oggを再生します。 •  音楽のファイルはResourcesのフォルダからの相対パス で指定します。 •  今回は、Resourcesの中にsoundsフォルダを作って、 その中にcafのフォルダを作ったので、 sounds/caf/ bgm.caf のように指定します。
  • 43. MENU+効果音 効果音をならしてみる
  • 44. SoundScene.h CREATE_FUNC(SoundScene); void cbMenuButton1(CCObject *pSender); }; #endif /* defined(__Test__SoundScene__) */
  • 45. SoundScene.cpp① SimpleAudioEngine::sharedEngine()>setBackgroundMusicVolume(0.5); SimpleAudioEngine::sharedEngine()->setEffectsVolume(0.5); TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform(); if (platform == kTargetIphone ¦¦ platform == kTargetIpad){
  • 46. SoundScene.cpp② SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("sounds/ caf/bgm.caf"); SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/caf/ bgm.caf", true); SimpleAudioEngine::sharedEngine()->preloadEffect("sounds/ogg/ shot.caf"); }else{ SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("sounds/ ogg/bgm.ogg"); SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/ogg/ bgm.ogg", true); SimpleAudioEngine::sharedEngine()->preloadEffect("sounds/ogg/ shot.ogg"); }
  • 47. SoundScene.cpp③ this->addChild(pTolemorouSprite, 1); CCMenuItemImage *pButton1 = CCMenuItemImage::create( "balloon.png", "balloon_pressed.png", this, menu_selector(SoundScene::cbMenuButton1) ); pButton1->setPosition(ccp(360, 220));
  • 48. SoundScene.cpp④ CCMenu *pMenu = CCMenu::create(pButton1, NULL); pMenu->setPosition(CCPointZero); this->addChild(pMenu); return true;
  • 49. SoundScene.cpp⑤ void SoundScene::cbMenuButton1(CCObject *pSender){ TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform(); if (platform == kTargetIphone ¦¦ platform == kTargetIpad){ SimpleAudioEngine::sharedEngine()->playEffect("sounds/caf/ shot.caf"); }else{ SimpleAudioEngine::sharedEngine()->playEffect("sounds/ogg/ shot.ogg"); } }
  • 50. できた! •  おとがなった
  • 51. かいせつ •  CCMenuItemImageで、メニューアイテム(今回の場合 はボタン)を作成 •  CCMenu::createで、メニューアイテムが含まれたメ ニューを作成 •  ボタンが押されたら、cbMenuButton1がよばれる •  preloadEffectをさいしょにやっておく(読み込みだけ しておいて高速化する)
  • 52. まとめ •  簡単なcocos2d-xの使い方がわかった!
  • 53. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! •  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします! h"ps://www.facebook.com/TonosamaLabo  
  • 54. 「もくもく」勉強会 •  毎週木曜日に、「もくもく」勉強会やってます! •  場所は新宿!facebookページからお申し込みください! h"ps://www.facebook.com/TonosamaLabo  
  • 55. おわり 主催(共同開催): 株式会社 gooya
 http://www.gooya.co.jp/ メドレー株式会社
 http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
 http://www.facebook.com/tonosamart

×