モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

HTML5パッケージの作成

 せっかく『Project Language』に『JavaScript』を選択しているので、Cocosプロジェクトの『HTML5パッケージ』を作成に挑戦しました。
 うまく作成できれば、Web上でデモ等を公開することができます。

『Cocosプロジェクト』の『HTML5パッケージ』を作成(失敗)

『Cocos Studio 2』で『HelloCocos』プロジェクトを読み込む

 『Cocosを試してみました。 - モーリーのメモ』の最終段階まで作成した『HelloCocos』プロジェクトを使用します。
1.『Cocos Studio 2』を起動し、アプリケーションメニューの『File』-『Open Project』をクリック
f:id:mmorley:20150908144332p:plain
2."/Documents/CocosProjects/HelloCocos/HelloCocos.ccs"を選択し、『OK』をクリック

HTML5パッケージ』の作成

1.アプリケーションメニューの『Project』-『Publish and Package...』をクリック
2.『Publish and Package』ウインドウで、以下のように選択し、『OK』をクリック

  • 『Pacage』を選択
  • 『Package Type』で『HTML5』にのみチェック

 下記のようなエラーが出力され、プロジェクトのパッケージ作成に失敗してしまいました。
f:id:mmorley:20150909205231p:plain
『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"を検索
f:id:mmorley:20150911220148p:plain
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』の中にビルドされました。
 こちらはすんなりと作成されました。

以上です。

あとがき

 『Cocos Studio 2』による『HTML5パッケージ』の作成は、力及ばず失敗しました。
 結果失敗していますので、ここに書いた『ANT_ROOTの定義』の方法は間違っているかもしれません。(『.setup.py』を走らせた結果は良さそうなのですが。)
 『HTML5パッケージ』は、他にコマンドラインから作成する方法があり、そちらは無事成功しました。
 なんとか作成する手段は確保出来ました。

広告を非表示にする