cocos2d-JS　事始め

開発環境の構築

2014/7/11@a_ofuji

自己紹介• 有限会社クリエイターズプライム　代表twitter　：　@a_ofuji

モバイルゲームの企画／開発をやっています。昔：ｉアプリ／ S！アプリ／ FlashLite今： iPhone/Androidアプリ開発

祝！ cocos2-JS3.0 RCリリース！

• ７／４にリリースされました。※現在 RC２★JSC対応！ソースをバイナリ化する jsc形式に対応しました！以前の煩雑な手順無しでcocosコマンドだけで出来るようです。

バージョンについて• Cocos2d-JSは最新が 3.0RC２です。• v２系は 2.2.3が Cocos2d-JSとして DL可能です。• 主に最新の 3.0について扱います。

Cocos2d-JSのインストール／セットアップ

★ダウンロードCocos2d-JS本体／ AndroidSDK／ NDK／ ANT／ Python 2.7.6

★setup.pyの実行ターミナルにてダウンロードした Cocos2d-JSのフォルダ内で実行それぞれ関連する SDKのパスを聞かれるので、設定。環境設定ファイルが作成される（既にある物は自動でバックアップ）環境設定ファイルを実行して更新ーーー以上！公式情報： http://www.cocos2d-x.org/docs/manual/framework/html5/v2/cocos-console/en

ターミナルはよく使うので Dockに置いてます。

必要な物：　mac＆ Xcode　事前準備：インストール一式　

プロジェクトの作成

★cocosコマンドターミナルにて cocosコマンドを実行してプロジェクトの作成から実行、リリースビルドまで色々できます。

プロジェクトの作成cocos new -p jp.vgame.mokumoku01 -l js mokumoku01

-p ：パッケージ名の指定　逆ドメイン .プロジェクト名

-l ：言語の指定。当然 js！

プロジェクト名：mokumoku01

専用のワークスペースを作っておくといいかも。

/user/cocos2d-JS_project/

∟mokumoku01

∟YourGame

プロジェクトの実行プロジェクトフォルダへ移動cd mokumoku01プロジェクトの実行cocos run -p ios

-pオプションでプラットフォームを指定できます。web ：ブラウザにて実行ios ： iosシュミレータandroid：実機もしくはシュミレータ

←実行中はターミナルにて　出力も確認できます。

動いたかな〜？・次に何をやるか。敢えてCocosBuilderを勧めます！

・簡単にシーンを作成し、画面遷移！・入門に最適　　　　

・どこに情報があるか。公式サンプル js-test！実機で動かしてソースを確認！

・実は２系と書き方がかなり変わった！詳しくはwebで！https://github.com/cocos2d/cocos2d-js/blob/master/docs/upgrade-guide-from-2.x-to-3.0beta.md

Xcodeでの開発

ログ出力エリア：JSからは

cc.log（ "mes"）；で出力可能

ソースコード編集エリアボタンが押されたら実行する処理cc.logを追加

CocosBuilder①シーンや UIを手軽に作る事が出来ます。プログラムとの連携方法も簡単です。

ボタンの状態毎の画像を設定

ボタンが押されたら呼ばれる所（セレクター）

を書く

CCMenu->CCMenuImage(on/off/dis) Selectorの設定

CocosBuilder②配置済みのオブジェクトに名前を付けて、ソースからアクセスできます。

ここに名前を設定Doc root var 固定

ここにデフォルト値を設定

★美少女アニメーションを作ってみた　 by　 CocosBuilder　デモ

★CocosIDEってどんな感じ？　○：ソース更新即反映　○：ブレイクポイント　×：デバッグ用ランタイム上で動く

★JSでも使える GUI関連ツール群

CocosBuilderSpriteHelper／ GlyphDesigner／ ParticleDesignerCocoStudio／ Spine

〜オマケ情報〜