かんたんな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

清水 友晶

おやこでスマほん �  株式会社スマートエデュケーション

�  http://cocos2d-x.jp

�  cocos2d-x開発元Chukong Technologies社公認

�  cocos2d-xのための自由なコミュニティー

�  入門者から上級者まで誰でもOK!!ぜひご参加を!

�  cocos2d-xに関することなら何でも投稿できます!!

�  https://www.facebook.com/groups/152840204871454/

�  4/10 shinjuku.cocos2d-x初心者ハンズオン 　　　　～WindowsでAndroidアプリを作ろう！～

�  4/11 第4回XPFゲーム開発ツール勉強会

�  4/17 第7回 shinjuku.cocos2d-x

�  4/20 cocos2d-xハンズオン勉強会

�  5/15 shinjuku.cocos2d-x初心者ハンズオン 　　　　～MacでiOSアプリを作ろう！～

�  5/22 第8回 shinjuku.cocos2d-x

�  6/M shinjuku.cocos2d-x初心者ハンズオン 　　　　～MacでAndroidアプリを作ろう！～

�  6/M 第9回 shinjuku.cocos2d-x

目次 �  cocos2d-xの紹介

�  cocos2d-xに関する情報収集

�  cocos2d for iPhoneからのかんたんな移植

�  かんたんな開発環境構築

�  開発をかんたんにするツール

cocos2d-xの紹介 �  2Dゲームフレームワーク

�  オープンソース（MITライセンス）

�  マルチプラットフォーム開発 �  Android, iOS, …（7種類） �  Win32, Mac, Linux

�  開発言語 … C++, Lua, Javascript

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に関する書籍出版

cocos2d for iPhoneからの かんたんな移植

�  同じクラス名が用意されている �  CCSpriteクラス

�  cocos2d for iPhone CCSprite *bg = [CCSprite spriteWithFile:@"bg.png"];

�  cocos2d-x CCSprite* bg = CCSprite::create("bg.png");

�  CCLabelTTFクラス �  cocos2d for iPhone CCLabelTTF* label = [CCLabelTTF labelWithString:@“Hello World" fontName:@"Marker Felt" fontSize:64];

�  cocos2d-x CCLabelTTF* label = CCLabelTTF::create("Hello World”, "Marker Felt”, 64);

cocos2d for iPhoneからの かんたんな移植

�  cocoaに似たクラス・構造体が用意されている �  CCString(NSString)クラス

�  cocos2d for iPhone NSString* hello = [NSString stringWithFormat:@”Hello%d”, 123];

�  cocos2d-x CCString* hello = CCString::createWithFormat(”Hello%d”, 123);

�  CCSize(CGSize)構造体 �  cocos2d for iPhone CGSize size = [[CCDirector sharedDirector] winSize];

�  cocos2d-x CCSize size = CCDirector::sharedDirector->getWinSize();

かんたんな開発環境構築 �  クロスプラットフォーム開発用プロジェクトの作成が1コマンドで作成可能 �  project-creator

�  Android �  BlackBerry �  iOS �  Linux �  Mac �  Marmalade �  Win32

�  すぐに開発可能なプロジェクトが生成される

開発をかんたんにするツール ツール名 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

おわり

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