せっかく『Project Language』に『JavaScript』を選択しているので、Cocosプロジェクトの『HTML5パッケージ』を作成に挑戦しました。
うまく作成できれば、Web上でデモ等を公開することができます。
目次
『Cocosプロジェクト』の『HTML5パッケージ』を作成（失敗）
『Cocos Studio 2』で『HelloCocos』プロジェクトを読み込む
『Cocosを試してみました。 - モーリーのメモ』の最終段階まで作成した『HelloCocos』プロジェクトを使用します。
1.『Cocos Studio 2』を起動し、アプリケーションメニューの『File』-『Open Project』をクリック
2."/Documents/CocosProjects/HelloCocos/HelloCocos.ccs"を選択し、『OK』をクリック
『HTML5パッケージ』の作成
1.アプリケーションメニューの『Project』-『Publish and Package...』をクリック
2.『Publish and Package』ウインドウで、以下のように選択し、『OK』をクリック
- 『Pacage』を選択
- 『Package Type』で『HTML5』にのみチェック
下記のようなエラーが出力され、プロジェクトのパッケージ作成に失敗してしまいました。
『ANT_ROOT not defined. Please define it in your environment.（ANT_ROOTが定義されていません。あなたの環境で定義して下さい。）』とあるので、ANT_ROOTを定義します。
ANT_ROOTの定義
ANT_ROOTのパスの確認
現在、有効になっているantのパスを確認します。
1.Macの『ターミナル』を起動（『アプリケーション』-『ユーティリティ』-『ターミナル』）
2.『ターミナル』で次のコマンドを実行し、antの各種情報を表示
ant -diagnostics
3.『ターミナル』で⌘（commandキー）+Fを押し、"ant.home"を検索
4.検索結果の"ant.home"に続くパスをコピー
- "ant.home"のパスの最後に"/bin"を加えたのが『ANT_ROOT』のパスです。
- 図の例だと"/Applications/Cocos/tools/ant/bin"となります。
『.bash_profile』に『ANT_ROOT』を設定
『Finder』の隠しファイル・フォルダを表示
1.『ターミナル』で次のコマンドを実行し、隠しファイル・フォルダを表示
defaults write com.apple.finder AppleShowAllFiles TRUE
2.『ターミナル』で次のコマンドを実行し、『Finder』を再起動
killall Finder
『.bash_profile』の編集
1.『Finder』で『/Users/（ユーザー名）/.bash_profile』を右クリックし、『このアプリケーションで開く』-『テキストエディット』をクリック
2.『.bash_profile』の下記の部分に先ほど調べた『ANT_ROOT』のパスを入力
# Add environment variable ANT_ROOT for cocos2d-x export ANT_ROOT=/Applications/Cocos/tools/ant/bin export PATH=$ANT_ROOT:$PATH
3.『テキストエディット』で『.bash_profile』を保存
『Finder』の隠しファイル・フォルダを非表示に戻す
1.『ターミナル』で次のコマンドを実行し、隠しファイル・フォルダを表示
defaults write com.apple.finder AppleShowAllFiles FALSE
2.『ターミナル』で次のコマンドを実行し、『Finder』を再起動
killall Finder
『setup.py』を実行
2.『ターミナル』で次のコマンドを実行し、『setup.py』を実行
/Applications/Cocos/frameworks/cocos2d-x-3.7.1/setup.py
3.『ターミナル』に『ANT_ROOT』に関して、次のように表示されることを確認
->Check environment variable ANT_ROOT
->Search for environment variable ANT_ROOT...
->ANT_ROOT is found : /Applications/Cocos/tools/ant/bin
『Cocos Studio 2』の『ANT』パスの確認（設定）
1.『Cocos Studio 2』のアプリケーションメニューの『Cocos Studio』-『Preferences...』をクリック
2.『Preferences』画面の左で『Platform』をクリックし、『Android Path』の『ANT』に設定されたパスが合っていることを確認（異なる場合は設定）
再度『Cocosプロジェクト』の『HTML5パッケージ』を作成（また失敗）
上記の操作で、『ANT_ROOT』が定義された"はず"なので再び作成に挑戦します。
1.アプリケーションメニューの『Project』-『Publish and Package...』をクリック
2.『Publish and Package』ウインドウで、以下のように選択し、『OK』をクリック
- 『Pacage』を選択
- 『Package Type』で『HTML5』にのみチェック
最初と同じエラー（『ANT_ROOT not defined. Please define it in your environment.』）が出力され、再びプロジェクトのパッケージ作成に失敗してしまいました。
ここで、手詰まりになってしまったので、ひとまずこの方法は諦めました。
コマンドラインからの『Cocosプロジェクト』の『HTML5パッケージ』を作成（成功）
コマンドラインから『HTML5パッケージ』を作成できるようなので、この方法を試します。
1.『ターミナル』で次のコマンドを実行
cocos run -s ~/CocosProjects/HelloCocos -p web -m release
- 『-s』オプション：『Cocosプロジェクト』のパスを指定
- 『-p』オプション：プラットフォーム（ios | android | web）を指定
- 『-m』オプション：モード（debug | release）を指定
ログに『BUILD SUCCESSFUL』との表示があり、アプリが起動しました。
"実行セット"は、プロジェクトフォルダ内の『publish/html5』の中にビルドされました。
こちらはすんなりと作成されました。
以上です。
