cocos2d-x公開講座(3/22) cocos2d-x実践講座(3/23)

in 鹿児島 株式会社TKS2 清水友晶

清水 友晶 �  株式会社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://cocos2d-x.jp

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

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

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

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

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

�  3/22 cocos2d-x公開講座 in 鹿児島

�  3/23 cocos2d-x実践講座 in 鹿児島

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

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

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

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

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

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

目次 �  3/22(金)

�  cocos2d-xの紹介 �  WindowsでAndroidアプリを作成する方法の紹介

�  CocosBuilderの紹介 �  CocosBuilderをさわってみよう！

�  3/23(土) �  CocosBuilderでアプリをつくろう！

cocos2d-xの紹介

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

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

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

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

�  どんなことができるのか？ èTestCPPを見てみましょう

WindowsでAndroidアプリを作成する方法の紹介

cocos2d-xの開発環境を整える �  cocos2d-xインストール �  Android SDK + Eclipseインストール �  Android NDKインストール �  Cygwinインストール �  Javaインストール

�  pythonインストール �  Eclipseの設定 �  プロジェクト作成 �  Android実機転送

cocos2d-xの開発環境を整える �  cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download

�  任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2

cocos2d-xの開発環境を整える �  Android SDK + Eclipseダウンロード http://developer.android.com/sdk/

�  任意のディレクトリへ展開 C:¥adt-bundle-windows

cocos2d-xの開発環境を整える �  Android NDKダウンロード http://developer.android.com/tools/sdk/ndk/

�  任意のディレクトリへ展開 C:¥android-ndk-r8d

cocos2d-xの開発環境を整える �  Cygwinダウンロード http://cygwin.com/install.html setup.exeのリンクをクリックするとダウンロード可

cocos2d-xの開発環境を整える �  Cygwinインストール

�  基本的には手順通り �  パッケージに「make」を選択する

cocos2d-xの開発環境を整える �  Javaダウンロード http://www.oracle.com/technetwork/java/javase/downloads/index.html

�  Javaインストール

cocos2d-xの開発環境を整える �  Pythonダウンロード http://www.python.org/download/

�  Pythonインストール

cocos2d-xの開発環境を整える �  環境変数の設定

�  「PATH」の追加 �  Cygwinのパス

/cygdrive/c/cygwin/bin �  Javaのパス

C:¥Program Files¥Java¥jre7¥bin �  pythonのパス

C:¥Python27

�  Cygwinの設定 �  C:¥cygwin¥etc¥fstabに次の1行を追加

none /cygdrive cygdrive binary,noacl,posix=0,user 0 0

cocos2d-xの開発環境を整える �  Eclipseの設定

�  Eclipse起動 �  ADT(Eclipse) > 環境設定

�  General > Workspace > Linked Resources �  COCOS2DX è cocos2dxのディレクトリ

�  C/C++ > Build > Environment �  NDK_ROOT è Android NDKのディレクトリ �  CYGWIN è nodosfilewarning

�  libcocos2dxプロジェクトのインポート �  File > New > Project

cocos2d-2.1rc0-x-2.1.2/cocos2dx/platform/android/java

cocos2d-xの開発環境を整える �  SDK Manager起動 C:¥adt-bundle-windows/SDK Manager.exe �  オススメ è Android 2.2 (API 8) ‒ SDK Platform

cocos2d-xの開発環境を整える �  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にプロジェクトが作成される

cocos2d-xの開発環境を整える �  Eclipseでプロジェクトを読込む

�  File > New > Project �  Android > Android Project from Existing Code

�  Android実機転送 �  Run > Run

CocosBuilderの紹介

CocosBuilderとは �  http://cocosbuilder.com �  cocos2dのレイアウトやアニメーションをGUIで調整可能

�  オープンソース(MITライセンス)

�  最新版CocosBuilder 3.0 Alpha �  JSB(Javascript bindings)の機能が大幅に追加 �  CocosPlayer (for JSB) �  cocos2d-xやcocos2d-iphoneでも利用可能

�  cocos2d-xではCCBReaderクラスを利用して連携可能

�  初心者向けの主な情報源 �  CocosBuilder User Guide �  cocos2d-xサンプル「TestCpp」

CocosBuilderのデモ �  TestCppにCocosBuilderのデモがあります。

�  CocosBuilderプロジェクト �  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj

�  iOS用プロジェクト �  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/proj.ios/TestCpp.xcodeproj

CocosBuilderをさわってみよう

CocosBuilderの使い方1 �  基本設定

�  プロジェクトの作成 �  デフォルトではJSB向けの設定になっている

ècocos2d-x向けの設定に変更 �  出力設定 �  解像度追加・変更

�  表示設定 �  解像度変更 �  見た目の変更

cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj

CocosBuilderの使い方2 �  リソース追加

�  画像・テクスチャアトラス �  パーティクル

�  クラス追加 �  画像の調整

�  アニメーション編集 �  タイムラインの追加

�  スティッキーノート追加

CocosBuilderのアニメーションをさわってみよう

�  次のネコ画像を使って、アニメーションを楽しもう！ http://tks2.net/nyanrun/images.zip

CocosBuilderでアプリを作ろう！

簡単なゲームを作ってみる

簡単なゲームを作ってみる �  タップしてネコを走らせるゲームを作ります

�  単純すぎてゴメンなさい。。。

�  でも基本的な機能は全部盛り込んでいます �  CocosBuilderファイルの作成 �  ボタンタップイベントの取得 �  他のオブジェクトの取得 �  複数アニメーションの設定

�  時間の都合上、解像度480 x 320のみの説明とします �  CocosBuilderとcocos2d-xのマルチレゾリューションサポートを利用して簡単に対応できますが、いろいろと罠が潜んでいます。詳細については執筆中の本にて書く予定です。

�  http://tks2.net/nyanrun/images.zip

(1) CocosBuilderで画面を作成 �  CocosBuilderプロジェクトの作成

�  cocos2d-x向けの設定 �  リソースの追加 �  画像の配置

�  bg1.png … Pos(%)x=0:y=100, Anc x=0.0:y=1.0 �  bg2.png … Pos(%)x=0:y= 25, Anc x=0.0:y=0.5 �  bg3.png … Pos(%)x=0:y= 0, Anc x=0.0:y=0.0 �  cat_normal.png … Pos(%)x=25:y=35, Anc x=0.5:y=0.5

�  Xcodeプロジェクトの作成 �  リソースの追加（含ccbiファイル） �  AppDelegate.cpp

(2) タップイベントを取得 �  CocosBuilderプロジェクトの編集

�  ボタンの配置 �  CCMenu … Pos x=0:y=0, Size(%)x=100.0:y=100.0

�  CCMenuItemImage … Pos(%) x=40:y=15 Selector:tappedLeftFoot Target:Document root

�  CCMenuItemImage … Pos(%) x=60:y=15 Selector:tappedRightFoot Target:Document root

�  レイヤー編集 �  CCLayer … Custom Class:GameLayer

�  Xcodeプロジェクトの編集 �  GameLayerLoader.h �  GameLayer.h �  GameLayer.cpp �  AppDelegate.cpp

Normal

Selected Disabled

(3) 他オブジェクトを取得 �  CocosBuilderプロジェクトの編集

�  背景編集 �  bg1.png … Doc root var: mBg1 �  bg2.png … Doc root var: mBg2 �  bg3.png … Doc root var: mBg3 �  cat_normal.png … Tag: 1

�  Xcodeプロジェクトの編集 �  GameLayer.h �  GameLayer.cpp

(4) 基本アニメーション �  CocosBuilderプロジェクトの編集

�  ネコ編集(後で必要なので、今のうちに編集) �  CCNode … Pos(%) x=25:y=35, Size W=72:H=123, Anc x=0.50:y=0.50, Tag:1 �  cat … Pos(%) x=50:y=25, Anc x=0.50:y=0.25

�  タイムライン編集 �  cat … Default Timeline (duration 00:00:20)

�  00:00:00 … Rotation = 3 �  00:00:10 … Rotation = -3 �  00:00:20 … Rotation = 3 �  Chained Timeline … Default Timeline

(5) 複数アニメーション �  CocosBuilderプロジェクトの編集

�  タイムライン編集 (詳細は後述) �  Leftfoot (duration 00:00:10) �  Rightfoot (duration 00:00:10) �  Tumble �  Normal �  Goal (duration 00:00:15)

�  Xcodeプロジェクトの編集 �  GameLayer.h �  GameLayer.cpp �  AppDelegate.cpp

(5) 複数アニメーション �  Leftfoot

�  00:00:00 … Sprite frame: cat_leftfoot.png �  00:00:00 … Position: (%) x=50:y=25 �  00:00:05 … Position: (%) x=50:y=27 �  00:00:10 … Position: (%) x=50:y=25

�  Rightfoot �  00:00:00 … Sprite frame: cat_rightfoot.png �  00:00:00 … Position: (%) x=50:y=25 �  00:00:05 … Position: (%) x=50:y=27 �  00:00:10 … Position: (%) x=50:y=25

(5) 複数アニメーション �  Tumble

�  00:00:00 … Sprite frame: cat_tumble.png �  00:00:00 … Rotation: 90.0

�  Goal �  00:00:00 … Sprite frame: cat_goal.png �  00:00:00 … Position: (%) x=50:y=25 �  00:00:05 … Position: (%) x=50:y=33 �  00:00:10 … Sprite frame: cat_goal.png �  00:00:10 … Position: (%) x=50:y=25 �  00:00:11 … Sprite frame: cat_normal.png �  Chained Timeline … Goal

(6) 時間・距離・リロード �  CocosBuilderプロジェクトの編集

�  ラベル追加 �  時間 … Doc root var: mTime �  距離 … Doc root var: mDistance

�  ボタン追加 �  リロードボタン … Selector:tappedReset

Target:Document root �  左足ボタン … Doc root var: mLeftButton �  右足ボタン … Doc root var: mRightButton

�  Xcodeプロジェクトの編集 �  GameLayer.h �  GameLayer.cpp

Normal

Selected Disabled

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