Cocos2d-x ハンズオン勉強会 株式会社TKS2 清水友晶
Cocos2d-x ハンズオン勉強会
株式会社TKS2 清水友晶
� 株式会社TKS2 http://tks2.net
� スマートフォンアプリ開発 (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
清水 友晶
もうすぐ出版されます!
入�門編
CCOOMMIINNGG SSOOOONN
応用編
CCOOMMIINNGG SSOOOONN
おやこでスマほん � 株式会社スマートエデュケーション
� http://cocos2d-x.jp
� cocos2d-x開発元Chukong Technologies社公認
� cocos2d-xのための自由なコミュニティー
� 入門者から上級者まで誰でもOK!!ぜひご参加を!
� cocos2d-xに関することなら何でも投稿できます!!
� https://www.facebook.com/groups/152840204871454/
� 4/20 cocos2d-xハンズオン勉強会
� 5/15 shinjuku.cocos2d-x初心者ハンズオン ~MacでiOSアプリを作る開発環境を整えよう!~
� 5/17 cocos2d-x公開講座 in 鹿児島
� 5/18 cocos2d-x実践講座 in 鹿児島
� 5/22 第8回 shinjuku.cocos2d-x
� 6/M shinjuku.cocos2d-x初心者ハンズオン ~MacでAndroidアプリを作る開発環境を整えよう!~
� 6/M 第9回 shinjuku.cocos2d-x
� 7/M shinjuku.cocos2d-x初心者ハンズオン ~WindowsでAndroidアプリを作る開発環境を整えよう!~
目次 � cocos2d-xの紹介 � iOS向け開発環境の構築方法
� かんたんな利用方法の説明
� Android向け開発環境の構築方法
� ゲームを作ってみよう! � 画像表示 � 画面タップ処理 � ボタン配置 � 永続データ
� 開発を簡単にするツール
cocos2d-xの紹介 � 2Dゲームフレームワーク
� オープンソース(MITライセンス)
� マルチプラットフォーム開発 � Android, iOS, …(7種類) � Win32, Mac, Linux
� 開発言語 … C++, Lua, Javascript
� どんなことができるのか? èTestCPPを見てみましょう
cocos2d-xで作るメリット � オープンソース(MITライセンス)
� 無償 � ソース公開
� クロスプラットフォーム開発 � 開発期間の短縮 � 資産の有効活用
� 効率化 � 画像処理のパフォーマンスアップ
� 各OSのフレームワークを詳しく知らなくてもアプリを作成することができる
cocos2d-xに関する情報収集 � Google検索
� 2012年10月 � "cocos2d-x" … 851,000件 � "cocos2d-x 日本語" … 9,960件
� 2013年4月 � "cocos2d-x" … 1,170,000件 � "cocos2d-x 日本語" … 26,000件
� cocos2d-x Wikiが充実 http://www.cocos2d-x.org/projects/cocos2d-x/wiki
� cocos2d-x.jp community https://www.facebook.com/groups/152840204871454/
� cocos2d-xに関する書籍出版
iOS向け開発環境を整える � cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download
� 任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2
iOS向け開発環境を整える � Mac App StoreよりXcodeダウンロード
iOSの開発環境を整える � project-creatorによるプロジェクト作成 cocos2d-2.1rc0-x-2.1.2/tools/project-creator/create_project.py � ディレクトリ移動
cd cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ � create_project.py実行
./create_project.py -project MyProject -package net.tks2.myproject -language cpp
� オプション � -project … プロジェクト名 � -packege … パッケージ名 � -language … 言語(cpp, lua, javascript)
� cocos2d-2.1rc0-x-2.1.2/projectsにプロジェクトが作成される
iOSの開発環境を整える � Xcodeでプロジェクトを読込む
� cocos2d-2.1rc0-x-2.1.2/projects/MyProject/proj.ios/MyProject.xcodeproj
� アプリ起動 � Product > Run
テンプレートプロジェクトから学ぶ � プロジェクトには次のディレクトリがある
� Classes èソースファイルを格納
� Resources è画像・音声などのリソースファイルを格納
� 最初に用意されているクラスは次の2つ � AppDelegateクラス � HelloWorldクラス
テンプレートプロジェクトから学ぶ � AppDelegateには次のメソッドがある
� applicationDidFinishLaunching() � アプリ起動時に処理され、アプリのセッティングを行う � 最初のシーンを呼び出す
� applicationDidEnterBackground() � アプリがスリープする時に処理され、アプリの停止を行う
� applicationWillEnterForeground() � アプリ復帰時に処理され、アプリの再開を行う
テンプレートプロジェクトから学ぶ � HelloWorldScene.cppファイルのpSpriteをさわってみる � 位置変更
pSprite->setPosition( ccp(0, 0) ); � 拡大・縮小
pSprite->setScale(2.0f); � 回転
pSprite->setRotation(90.0f); � アンカーポイント
pSprite->setAnchorPoint( ccp(0, 0) ); � 透過
pSprite->setOpacity(127);
テンプレートプロジェクトから学ぶ � オブジェクトを移動させてみる 2秒で画面右端へ移動する
CCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2) ); pSprite->runAction(move);
テンプレートプロジェクトから学ぶ � CCAction http://www.cocos2d-x.org/reference/native-cpp/dd/d89/classcocos2d_1_1_c_c_finite_time_action.html � 移動
CCMoveTo, CCMoveBy � 回転
CCRotateTo, CCRotateBy � フェードイン・フェードアウト
CCFadeIn, CCFadeOut
今後の勉強方法について � cocos2d-x Wikiを調べる http://www.cocos2d-x.org/projects/cocos2d-x/wiki
� cocos2d-x Referenceを調べる � TestCppで調べる � ググってみる � cocos2d-x フォーラムで質問する � cocos2d-x.jp communityで質問する
Android向け開発環境を整える � cocos2d-xインストール
� Android SDK + Eclipseインストール
� Android NDKインストール
� ADT(Eclipse)の設定
� プロジェクト作成
� Android実機転送
Android向け開発環境を整える � cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download
� 任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2
Android向け開発環境を整える � Android SDK + Eclipseダウンロード http://developer.android.com/sdk/
� 任意のディレクトリへ展開 /Users/Sumomo/adt-bundle-mac
Android向け開発環境を整える � SDK Manager起動 Window > Android SDK Manager Android 2.2 (API 8) > SDK Platform
Android向け開発環境を整える � Android NDKダウンロード http://developer.android.com/tools/sdk/ndk/
� 任意のディレクトリへ展開 /Users/Sumomo/android-ndk-r8e
Android向け開発環境を整える � Eclipseの設定
� Eclipse起動 � ADT(Eclipse) > 環境設定
� General > Workspace > Linked Resources � COCOS2DX è cocos2dxのディレクトリ
� C/C++ > Build > Environment � NDK_ROOT è Android NDKのディレクトリ
� libcocos2dxプロジェクトのインポート � File > New > Project
cocos2d-2.1rc0-x-2.1.2/cocos2dx/platform/android/java
Android向け開発環境を整える � project-creatorによるプロジェクト作成 cocos2d-2.1rc0-x-2.1.2/tools/project-creator/create_project.py � ディレクトリ移動
cd cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ � create_project.py実行
./create_project.py -project MyProject -package net.tks2.myproject -language cpp
� オプション � -project … プロジェクト名 � -packege … パッケージ名 � -language … 言語(cpp, lua, javascript)
� cocos2d-2.1rc0-x-2.1.2/projectsにプロジェクトが作成される
Android向け開発環境を整える � Eclipseでプロジェクトを読込む
� File > New > Project � Android > Android Project from Existing Code � cocos2d-2.1rc0-x-2.1.2/projects/MyProject/proj.android
� Android実機転送 � Run > Run
ゲームを作ってみよう! � 1から25まで順番にタップするカードゲーム
ゲームを作ってみよう!
� カードのダウンロードは http://tks2.net/other/cards.zip
� iOSシミュレータ (Retina 3.5-inch)
ゲームを作ってみよう!
� まずはカードの配置 https://gist.github.com/4239354
ゲームを作ってみよう!
� カードのタップ https://gist.github.com/4239351
ゲームを作ってみよう!
� 時間表示 https://gist.github.com/4239350
ゲームを作ってみよう!
� ハイスコア表示 https://gist.github.com/4239338
ゲームを作ってみよう!
� ゲームリトライ https://gist.github.com/4238817
� 完成!!
開発をかんたんにするツール ツール名 Win Mac
CocosBuilder OSS - ○ LevelHelper $24.99 - ○ spine $55.00 ○ ○ Super Animation Converter Free - ○ TexturePacker ¥3,019 ○ ○ zwoptex $15.00 - ○ SpriteHelper $19.99 - ○ PhysicsEditor ¥2,011 ○ ○ GlyphDesigner ¥3,600 - ○ ParticleDesigner ¥1,340 - ○ Tiled Map Editor Donate ○ ○
CocosBuilder � オープンソース(MIT)
� レイヤー作成 � 複数アニメーションの作成
� デザイナーがレイアウトを調整できる
� マルチレゾリューション対応が可能
http://cocosbuilder.com
LevelHelper � レイヤー作成
� 物理エンジンの適用が可能
� パラレックス作成
� 画像をパスに沿って移動することが可能
� シミュレータ上で直ぐに確認
spine � アニメーション作成
� Boneを複数連結させることでスムーズなアニメーションを作成する
� ランタイムはオープンソース(BSD)
http://esotericsoftware.com
Super Animation Converter � Adobe Flashで作成されたswfファイルを、cocos2d-xで読込める形式(sam)に変換する
� 複数アニメーションの作成
https://github.com/raymondlu/super-animation-samples
TexturePacker � テクスチャアトラス作成
� 条件によっては無料で利用可能
http://www.codeandweb.com/texturepacker
zwoptex � テクスチャアトラス作成
http://www.zwopple.com/zwoptex/
SpriteHelper � テクスチャアトラス作成
� 物理エンジンで利用可能なシェイプを作成
� フレームアニメーション作成
� LevelHelperと連携可能
http://www.gamedevhelper.com/spritehelper/
PhysicsEditor � 物理エンジンで利用可能なシェイプを作成
� 条件によっては無料で利用可能
http://www.codeandweb.com/physicseditor
GlyphDesigner � ビットマップフォント作成
� グラデーション
� アウトライン
� シャドウ
� 日本語可
http://www.71squared.com/glyphdesigner
ParticleDesigner � パーティクル作成
� 30以上のパラメータをGUIで編集
� 公開されているパーティクルを利用可能
� ビューアで確認
http://www.71squared.com/particledesigner
Tiled Map Editor � タイルマップ作成
� 正面から見た四角
� 斜めから見たひし形
http://www.mapeditor.org
おわり
� ありがとうございました