cocos2d-xハンズオン勉強会 in 名古屋

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

おわり

�  ありがとうございました

cocos2d-xハンズオン勉強会 in 名古屋

Technology

Transcript of cocos2d-xハンズオン勉強会 in 名古屋