ラジウム・クリッカーのブラウザ版を公開しました

2015年6月15日 TOME Leave a comment

こんばんは。

今年2月にCocos2d-JSで制作し、iOS/Androidアプリとしてリリースした「ラジウム・クリッカー」でしたが、せっかく JS で作っていたのでブラウザ版を公開します。

元祖リケジョの星、キュリー夫人になりきってラジウムを抽出しましょう！
インストール不要ですぐ遊べます！

↓ラジウム・クリッカー (ブラウザ版) ↓
http://tomeapp.jp/apps/radiumclicker/

ブラウザ版の特典として、キーボード入力もクリックと見なすようにしておきました！ (^^;

「ブラウザ版があれば、iOS/Android からもブラウザ経由から実行できるから、アプリ版もういらないじゃん！」と思われるかもしれませんが、アプリ版は SpiderMonkey という C++ で JavaScript を解釈するプラットフォームで動作しているので、かなり軽いです。このゲームくらいではあまり差が出ませんが、もっと多くの処理を行いたい場合は、やはりアプリ版をビルドし、使用すべきです。

その辺の紹介も時間があればしてみたいです。

遊び方

マウスまたはキーボードでひたすら石を叩いてください。ただそれだけです。すみません。。。

１万回くらい叩くとノーベル賞がもらえますのでがんばってください。

今後の予定

ソースコードも MITライセンスで~~公開しようと思っています。~~[2015年6月15日追記] ↓GitHub上でソースコードを公開しました！↓
ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

Cocos2d-JS で文字列を表示する

2015年6月11日 TOME Leave a comment

Cocos2d-JS で文字列を表示する方法です。

（「Cocos2d-JS の開発環境を構築する」の手順が完了しているものとして話を進めます）

文字列を表示するには主に２つの方法があります。

LabelTTF クラスを使用する。
LabelBMFont を使用する。

今回は LabelTTF を使用して文字列表示をためしてみます。

./src/app.js に文字列を表示するコードを追加します。

app.js

github に必要な修正がまとめてあります。

https://github.com/shinhirota/cocos2djs-sample/commit/006c62e3d39c9c3c6e8aed786847e340fbc4047f

実行結果

うまくいけば Hello World の上に先ほどの文字列が表示されています！！

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

参考

COCOS2D-X-3.0で改善されたラベル
http://www.cocos2d-x.org/docs/manual/framework/native/v3/label/ja

日本人プログラマーにありがちな１０の間違った英語の読み方

2015年6月10日 TOME 4 comments

今年の３月まで某外資系企業でプログラマーを１０年やらせていただき、いろいろありました。

海外のエンジニアと電話会議やミーティングをやる機会がよくあったのですが、日本でカタカナで覚えた用語がしばしば通じなかったり、向こうがなんか知らない用語を使ってるなあと思ったら実は知っている単語だったりしたことがよくありました。

自戒も含めてまとめてみました。

（※国際的に通じる発音を認識して、海外にも通用する人材に近づくことが本稿の目的です）

以下、多分通じないカタカナ表記を赤、そこそこ通じそうなカタカナ表記を青で書きます

Cocoa

Mac OS X や iOS で使われているフレームワークの名称です。これは「ココ」に近い発音です「ココア」だと思っていて聞き取れず、悔しい思いをしました。

cocoaの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/17035/m0u/

Opaque

不透明度のことです。昔会社の先輩が「オパキュー」と言っていたので、そのように読んでしまっている日本人はいなくもないと思いますが、英語圏では「オペーク」に近い読み方をします。自分はオパキューと言われるとオバケのキャラクターしか思い浮かびません。

opaqueの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/59219/m0u/opaque/

Height

高さのことです。もちろん「ハイト」と読めばだいたい通じます。スペルから判断して「ヘイト」と読んでしまう日本人が多いので要注意です。

heightの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/39780/m0u/height/

Hierarchy

階層構造のことで、日本語では「ヒエラルキー」と書くことが多いとおもいます。日本人と話す時はそれでもよいのですが、英語圏の人の発音をあえてカタカナにすると「ハイアラーキー」のように聞こえました。相手によって使い分けましょう。

hierarchyの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/40332/m0u/Hierarchy/

Tutorial

日本語では「チュートリアル」です。お笑い芸人でそういう名前の人がいた気もしますし。カタカナにはしづらいので、これでいいと思うのですが、英語圏の人がしゃべると、あえてカタカナにするなら「テュトーリアル」のように聞こえます。「テュ」が日本語にないのが問題なんですかね。

tutorialの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/89034/m0u/tutorial/

Ping

ネットワークがつながっているかどうか調べるコマンドです。自分も周りの人も日本では「ピング」と読んでいる人が多いと思いますが、英語圏の人は「ピン」のように言ってました。考えてみると、現在進行形の “-ing” の発音のときは、最後の g はあまり発音しないですが、それと同じことですよね。ピングっていうと某ペンギンのキャラクターのことだと思われるんじゃないですかね？

Github (gif, gimp)

プログラマー界では著名は Git を使用した Web 共有サービスです。自分は「ジットハブ」だと思っていたのですが、「ギットハブ」と読むのが正しいようです。同様なものに画像ファイルの gif, 画像加工ソフトウエアの gimp もありますが、~~それぞれ「ギフ」「ギンプ」が多数派のようです。~~ gif は開発者が「ジフ」だと言っているので「ジフ」、gimp は「ギンプ」が多数派のようです。([2015年6月10日訂正] @nekobata_kaigi さん、ご指摘ありがとうございます)

Github – Wikipedia
http://ja.wikipedia.org/wiki/GitHub

Warning

コンパイルするとよく出てくる「警告」です。日本では「ワーニング」と読む人が（少なくとも自分の周りでは）多いですが、英語圏の人の発音は「ウォーニング」に近いです。「War (戦争)」は「ウォー」って言いますよね？

warningの意味 – 英和辞書 – 英語辞書 – goo辞書 http://dictionary.goo.ne.jp/leaf/ej3/93161/m0u/Warning/

Null

初期化してないポインターがよくこれになって悩まされます。これも日本では「ヌル」と読む人が（少なくとも自分の周りでは）多いですが、英語圏の人の発音は「ナル」に近いです。しかしこれはドイツ語では「ヌル」のように発音するという話もあるので、英語圏でも「ヌル」と言っても通じる気がしてます。ソースは自分です。それに日本人相手に「ナル」とか言うと嫌われる予感がすごくするので、相手によって使い分けると良さそうです。

nullの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/58015/m0u/null/

Matrix

行列のことです。某有名映画のタイトルにもなっているので「マトリックス」と読む日本人が多いと思いますが、英語圏での発音は「メイトリックス」のほうが近いです。これくらいなら時間とともにきづくんですけど、怖いのはこれの複数形が matrices なことで、カタカナにすると「メイトリシーズ」のように聞こえます。これは知らないと何百回聞いても理解できません。

matricesの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/52376/m0u/matrices/

番外編

Width

幅のことです。非常に使用頻度が高いのですが、日本人には絶望的に発音が難しいです。カタカナにするのは無理です。自分はあきらめて「ホリゾンタル　サイズ」とか言い換えることにしてました。

widthの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/94624/m0u/width/

最後に

あくまでケースバイケースで、正しいか間違っているかよりも、通じたか通じなかったかを重視すべきだと思います。

Cocos2d-JS で画像を表示する

2015年6月9日 TOME Leave a comment

Cocos2d-JS で画像を追加する方法です。

（「Cocos2d-JS の開発環境を構築する」の手順が完了しているものとして話を進めます）

例としてこの画像ファイルを表示してみます。

CathyTest.png

画像ファイルを ./res にコピーします。

追加した画像ファイル名は ./src/resource.js を編集し、追加しておきます。

最後に ./src/app.js に画像をスプライトとして表示するコードを追加します。

resource.js

app.js

github に必要な修正がまとめてあります。

https://github.com/shinhirota/cocos2djs-sample/commit/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

実行結果

cocos run コマンドで web アプリとして実行してみます。

$ <strong>cd MyProject</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <span style="color: #0000ff;"><strong>cocos run -p web</strong></span>
<span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">Running command: deploy</span>
<span style="color: #339966;">Deploying mode: debug</span>
<span style="color: #339966;">Running command: run</span>
<span style="color: #339966;">starting application</span>
<span style="color: #339966;">Try start server on 127.0.0.1:8000</span>
<span style="color: #339966;">Serving HTTP on 127.0.0.1, port 8000 ...</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -
  :
  :</span>

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p web

Running command: compile

Building mode: debug

Running command: deploy

Deploying mode: debug

Running command: run

starting application

Try start server on 127.0.0.1:8000

Serving HTTP on 127.0.0.1, port 8000 ...

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -

:

うまくいけば Hello World の上に先ほどのグラフィックが表示されています！！

※ github に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

Cocos2d-x/JS

いまさらながら Eclipse + ADT の Android 開発環境を作る

2015年6月8日 TOME One comment

ちまたでは Android Studio 1.3 が発表され、今後 Android アプリ開発は Google の強力なプッシュにより Android Studio で行うのが主流になっていくと思われます。

そうは言っても、過去の遺産にしばられるのがソフトウェアの常なので、ビルドができるうちは Eclipse + ADT (Android Developer Tools) 勢力も残っていくと思います。

Cocos2d-JS で作成したプロジェクトも、2015年6月の最新版 v3.6.1 でも Eclipse + ADT 用の設定ファイルしか出力しないので、Cococs2d-JS を使うなら、今のところは Eclipse + ADT で行くのが早いです。

使用した環境

OS: Mac OS X 10.10.3
Eclipse: Eclipse Luna Service Release 2 – Version 4.4.2
ADT: 23.0.6

インストール手順

下調べ

バージョン不整合で痛い目を見ないために、まず ADT の公式ページで要件を調べます。

http://developer.android.com/tools/sdk/eclipse-adt.html

2015年3月に ADT 23.0.6 がリリースされており、依存関係は以下のとおり：

Java 7 以降 (Android 5.0 以上のビルドを行う場合)
Android SDK Tools r24.1.2
Eclipse Indigo (Version 3.7.2) 以降

順番に確認し、必要に応じてインストールします。

Java および Android SDK Tools のインストール

こちらの記事「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、コマンドラインベースの Android 開発環境を構築しておいてください。

Eclipse のインストール

以下のページから最新版の Eclipse (2015年6月8日現在 Eclipse Luna – Version 4.4.2) をダウンロードします。いろいろ種類がありますが、Android アプリ開発に必要なものは一番上の Eclipse IDE for Java Developers に含まれています。

https://eclipse.org/downloads/

インストーラーは特に無いので、ダウンロードしたファイル (eclipse-java-luna-SR2-macosx-cocoa-x86_64.tar.gz) をダブルクリックで解凍し、作成される eclipse というディレクトリを丸ごと /Applications に移動させるのがオススメです。

最初の起動時は「インターネットからダウンロードしたファイルは実行できません」と怒られますが、ファインダー上で右クリックメニューから開けば実行できます。

Android Development Tools (ADT) のインストール

http://developer.android.com/sdk/installing/installing-adt.html

ADT は Eclipse のプラグインとして提供されているため、Eclipse 上で追加することができます。

Eclipse を起動し、メニューの [Help]→[Install New Software…] を選びます。

プラグイン管理のウインドウが開くので [Add] を押し、レポジトリを指定します。

公式ページに書かれている “https://dl-ssl.google.com/android/eclipse/” をLocation に指定し、[OK] を押します。

ポップアップが閉じると “Developer Tools” が選べるようになっているので、それを選択して [Next>] を押します。

少し時間がかかって依存性が解決され、実際にインストールされるパッケージのリストが表示されたら再度 [Next>] を押します。

ライセンス情報が表示されたら、内容をすべて理解するのはかなりハードル高いのでどうするかはお任せします。自分は理解せずに “I accept …” を選びました。

そして　[Finish] を押すとインストールが始まります。

もしかしたら　Security Warning が表示されるかもしれませんが、その時どうするかはお任せします。自分はレポジトリの URL が google.com だったので、Google を信じて [OK] で進めてしまいました。

インストールが終わると Eclipse の再起動が求められるので、再起動します。

再起動後、Android SDK の場所を求められるので入力します。「Cocos2d-JS のサンプルを動かしてみる (Android編)」の通り作業してあれば、/opt/android-sdk-macosx がそれになります。

自分の場合ここで何か xml ファイルが読めないようなエラーメッセージが出ましたが、そのまま進めてしまいました。

これでインストールは完了です。

動作テスト

確認として、空の Android アプリを作成して動作させてみます。

Eclipse メニューの [File]→[New]→[Project…] を選びます。

新規プロジェクトウイザードが開始するので [Android]→[Android Application Project] を選んで [Next>] を押します。

アプリ名などを適当に入力します。ここでは「Test」と言う名前のアプリ名／プロジェクト名にしました。SDK のバージョンをなどを聞かれますが、デフォルトのままにして　[Next>] を押します。

Activity をどうするか聞かれるので “Blank Activity” を選んで [Next>] を押します。Activity と言うのは iOS で言うところ View Controller のようなものです。

あとはすべてデフォルトのまま進み、最後に [Finish] を押します。

これで空の Android プロジェクトができたので、実行してみます。左側の Package Explorer で先ほどのアプリ (ここでは “Test”) を選んだ状態で、ツールバーのデバッグアイコンのプルダウンから [Debug As]→[Android Application] を選びます。

うまくいけば、シミュレーター (AVD) が起動し、空のアプリが起動します！！

これで Cocos2d-JS の Android プロジェクトを IDE で開発する準備が整いました！

Cocos2d-JS のサンプルを動かしてみる (Android編)

2015年6月8日 TOME 2 comments

先日 Cocos2d-JS のサンプルを iOS アプリとして実行するやり方を紹介しましたが、今回は Android アプリ編です。

Android は iOS と比較して開発環境を整えるのが大変で、記事の内容もほとんど Android アプリの開発環境設定の話になってしまいました。。(2015年6月8日時点での情報です)

使用した環境

OS: Mac OS X 10.10.3
Cocos2d-JS: v3.6.1

JDK: 1.8.0_31
Android SDK Tools: r24.2
Android: 5.1.1 – API Level 22
Android NDK: r10e
ant: Apache Ant(TM) version 1.9.4

設定手順

Java Development Kit (JDK) の確認

使用中の Mac OS X に Java Development Kit (JDK) がインストールされているかどうか確認します。

ターミナルから javac -version と入力すれば JDK のバージョンが大体わかります。

<span class="s1">$ <span style="color: #0000ff;"><strong>javac -version</strong></span></span>

1	<span class="s1">$ <span style="color: #0000ff;"><strong>javac -version</strong></span></span>

<span class="s1" style="color: #339966;">javac 1.8.0_31</span>

1	<span class="s1" style="color: #339966;">javac 1.8.0_31</span>

この例の場合、Java 8 の JDKがインストールされていることが伺えます。もし javac が使えなかった場合は以下のサイトなどを参考に、最新の JDK をインストールしてください。

MacにJava(JDK)をインストール
http://qiita.com/ryo0301/items/3c9a02e03b4e9a41f576

Android SDK のインストール

Android SDK はいろいろなバージョンの Android 用に用意されているのでバージョン管理が大変そうですが、Android SDK Manager というありがたいものが用意されています。

現在標準的な Android 開発 IDE である Android Studio にはこれが含まれているのですが、Cocos2d-JS のプロジェクトは Android Studio ではなく Eclipse 用の設定ファイルしか含んでいないため、今回は Android Studio を避けます。

以下のページから Mac OS X 用 SDK Tools のパッケージをダウンロード・解凍し、任意の場所に置きます。自分は /opt/android-sdk-macosx に置きました。

https://developer.android.com/sdk/index.html#Other

この中の android というコマンドから、Android SDK Manager を含めていろいろなツールが呼び出せます。android sdk とを実行すると Android SDK Manager を起動できます。

<span class="s1">$ <strong>cd /opt/android-sdk-macosx/tools</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/opt/android-sdk-macosx/tools</span>
$ <span style="color: #0000ff;"><strong>./android sdk</strong></span>

</span>

$ cd /opt/android-sdk-macosx/tools

$ pwd

/opt/android-sdk-macosx/tools

$ ./android sdk

Android SDK Manager の GUI が開いたら、デフォルトでいくつかの SDK が選ばれています。Android M というのは Lollipop の次の Android のことですが、今回は使わないので外すのがおすすめです。

Android Native Development Kit (NDK) のインストール

Cocos2d-JS は Cocos2d-x 上で動作しており、Cocos2d-x は主に C++ で記述されています。ですので Android 上で C++ を動作させるために Android Native Development Kit (NDK) のインストールが必要になります。

https://developer.android.com/ndk/downloads/index.html

Mac OS X 用のパッケージをダウンロードし、任意の場所に解凍します。自分は /opt/android-ndk-r10e にしました。

$ <strong><span style="color: #0000ff;">chmod a+x android-ndk-r10c-darwin-x86_64.bin</span></strong>
$ <span style="color: #0000ff;"><strong>./android-ndk-r10c-darwin-x86_64.bin</strong></span>

<span style="color: #339966;">7-Zip SFX 9.20 Copyright (c) 1999-2010 Igor Pavlov 2010-11-18</span>
<span style="color: #339966;">p7zip Version 9.20 (locale=utf8,Utf16=on,HugeFiles=on,4 CPUs)</span>

<span style="color: #339966;">Processing archive: ./android-ndk-r10e-darwin-x86_64.bin</span>

<span style="color: #339966;">Extracting android-ndk-r10e/prebuilt/darwin-x86_64/bin/2to3</span>
<span style="color: #339966;">Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-c++</span>
<span style="color: #339966;">Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-ld</span>
<span style="color: #339966;">Extracting android-ndk-r10e/sources/cxx-stl/stlport/stlport/
</span> :
 :
(中略)
 :
 :
<span style="color: #339966;">Extracting  android-ndk-r10e/build/awk</span>
<span style="color: #339966;">Extracting  android-ndk-r10e/build</span>
<span style="color: #339966;">Extracting  android-ndk-r10e</span>

<span style="color: #339966;">Everything is Ok</span>
$ <strong><span style="color: #0000ff;">mv android-ndk-r10e /opt</span></strong>
$

$ chmod a+x android-ndk-r10c-darwin-x86_64.bin

$ ./android-ndk-r10c-darwin-x86_64.bin

p7zip Version 9.20 (locale=utf8,Utf16=on,HugeFiles=on,4 CPUs)

Processing archive: ./android-ndk-r10e-darwin-x86_64.bin

Extracting android-ndk-r10e/prebuilt/darwin-x86_64/bin/2to3

Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-c++

Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-ld

Extracting android-ndk-r10e/sources/cxx-stl/stlport/stlport/

:

(中略)

Extracting android-ndk-r10e/build/awk

Extracting android-ndk-r10e/build

Extracting android-ndk-r10e

Everything is Ok

$ mv android-ndk-r10e /opt

antの確認

ant は汎用のビルドコマンドです。(昔でいう make ですかね。。) 最近のMac OS X には含まれていないようなので、もし ant -version と入力してエラーになるようであれば以下のサイトなどを参考に ant をインストールします。

Mac OS X 10.9 ( Mavericks ) に Homebrew で Apache Antをインストールする

http://yoshiweb.net/blog/?itemid=374

Cocos2d-JS に Android SDK, NDK, ant の情報を設定する

最後に「Cocos2d-JS の開発環境を構築する」で使用した setup.py を実行します。前回 Android NDK と SDK の場所は指定しませんでしたが、今回は指定します。青い部分はユーザーからの入力です。

<span style="font-size: 8pt;">$ <span style="color: #0000ff;"><strong>pwd</strong></span></span>
<span style="color: #339966; font-size: 8pt;">/opt/cocos2d-js-v3.6.1</span>
<span style="font-size: 8pt;">$ <span style="color: #0000ff;"><strong>./setup.py</strong> </span></span>

<span style="color: #339966; font-size: 8pt;">Setting up cocos2d-x...</span>
<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable COCOS_CONSOLE_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable COCOS_CONSOLE_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;COCOS_CONSOLE_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt; Add COCOS_CONSOLE_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable NDK_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable NDK_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;NDK_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt;Please enter the path of NDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>/opt/android-ndk-r10e</strong></span></span>
<span style="color: #339966; font-size: 8pt;"> -&gt; Add NDK_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added NDK_ROOT=/opt/android-ndk-r10e</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable ANDROID_SDK_ROOT
  -&gt;Find environment variable ANDROID_SDK_ROOT...
    -&gt;ANDROID_SDK_ROOT not found

  -&gt;Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>/opt/android-sdk-macosx</strong></span>
  -&gt; Add ANDROID_SDK_ROOT environment variable...
    -&gt;Added ANDROID_SDK_ROOT=/opt/android-sdk-macosx
</span>
<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable ANT_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable ANT_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;ANT_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt;Find command ant in system...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Path "/usr/local/bin" was found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt; Add ANT_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added ANT_ROOT=/usr/local/bin</span>


<span style="color: #339966; font-size: 8pt;">A backup file "/Users/hirota/.bash_profile.backup7" is created for "/Users/hirota/.bash_profile".</span>

<span style="color: #339966; font-size: 8pt;">Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect</span>

<span style="font-size: 8pt;">$</span>

$ pwd

/opt/cocos2d-js-v3.6.1

$ ./setup.py

Setting up cocos2d-x...

->Check environment variable COCOS_CONSOLE_ROOT

->Find environment variable COCOS_CONSOLE_ROOT...

->COCOS_CONSOLE_ROOT not found

-> Add COCOS_CONSOLE_ROOT environment variable...

->Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin

->Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"

->Check environment variable NDK_ROOT

->Find environment variable NDK_ROOT...

->NDK_ROOT not found

->Please enter the path of NDK_ROOT (or press Enter to skip):/opt/android-ndk-r10e

-> Add NDK_ROOT environment variable...

->Added NDK_ROOT=/opt/android-ndk-r10e

->Check environment variable ANDROID_SDK_ROOT

->Find environment variable ANDROID_SDK_ROOT...

->ANDROID_SDK_ROOT not found

->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):/opt/android-sdk-macosx

-> Add ANDROID_SDK_ROOT environment variable...

->Added ANDROID_SDK_ROOT=/opt/android-sdk-macosx

->Check environment variable ANT_ROOT

->Find environment variable ANT_ROOT...

->ANT_ROOT not found

->Find command ant in system...

->Path "/usr/local/bin" was found

-> Add ANT_ROOT environment variable...

->Added ANT_ROOT=/usr/local/bin

A backup file "/Users/hirota/.bash_profile.backup7" is created for "/Users/hirota/.bash_profile".

Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect

$

うまくいけば .bash_profile に必要な設定が追加されているはずです。

一度ログインし直して設定を反映させます。これで実行する設定は完了です。

Android Virtual Device (ADV=シミュレーター) の設定

ここではシミュレーターで実行する手順を書きますが、Android アプリをシミュレーターで動かすのは大変なうえ重いので、本格的に開発する場合は Android の実機を用意することを強くお勧めします。

まず Android SDK Tools に含まれている android avd コマンでで Android Virtual Device Manager を起動します。

<span class="s1">$ <strong>cd /opt/android-sdk-macosx/tools</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/opt/android-sdk-macosx/tools</span>
$ <span style="color: #0000ff;"><strong>./android avd</strong></span></span>

$ cd /opt/android-sdk-macosx/tools

$ pwd

/opt/android-sdk-macosx/tools

$ ./android avd

[Device Definitions] を押して定義済みのテンプレートを使います。

[Nexus 4 by Google] を選んで、

このような設定にしました。

CPU を ARM (armeabi-v7a) にしないと動作しなかったので注意してください。どうも NDK が ARM 用のネイティブコードしか生成していないような気がします。（これ CPU が Intel の実機だとどうなるんだろう・・・）

[Android Virtual Devices] のページの戻って、[Start…] ボタンでこの設定の AVD を起動しておきます。自分の環境では起動するまで数分かかったので辛抱強く待ちます。

起動すると以下のようなウインドウが表示されます。

実行

上述の Android シミュレータ (AVD) が起動している状態で Cocos2d-JS プロジェクトのあるディレクトリに行って cocos run -p android と入力します。最初のビルドは数分かかるので辛抱強く待ちます。

$ <span style="color: #0000ff;"><strong>cd MyProject</strong></span>
$ <span style="color: #0000ff;"><strong>pwd</strong></span>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <strong><span style="color: #0000ff;">cocos run -p android</span></strong>
<span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">Android platform not specified, searching a default one...</span>
<span style="color: #339966;">running: '/opt/android-sdk-macosx/tools/android update project -t android-22 -p /My/Test/MyProject/frameworks/runtime-src/proj.android'</span>

<span style="color: #339966;">Updated project.properties</span>
<span style="color: #339966;">Updated local.properties</span>
<span style="color: #339966;">Updated file /My/Test/MyProject/frameworks/runtime-src/proj.android/proguard-project.txt</span>
<span style="color: #339966;">It seems that there are sub-projects. If you want to update them</span>
<span style="color: #339966;">please use the --subprojects parameter.</span>
<span style="color: #339966;">Android platform not specified, searching a default one.
<span style="color: #000000;"> :</span>
<span style="color: #000000;"> :</span>
<span style="color: #000000;">(中略)</span>
<span style="color: #000000;"> : </span>
<span style="color: #000000;"> :</span>
-package:
[apkbuilder] Current build type is different than previous build: forced apkbuilder run.
[apkbuilder] Creating MyProject-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:
 [zipalign] Running zip align on final apk...
 [echo] Debug Package: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/MyProject-debug.apk
[propertyfile] Creating new property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

-post-build:

debug:

BUILD SUCCESSFUL
Total time: 12 seconds
Move apk to /My/Test/MyProject/runtime/android
build succeeded.
Running command: deploy
Deploying mode: debug
installing on device
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb uninstall org.cocos2dx.MyProject'</span>

Failure [DELETE_FAILED_INTERNAL_ERROR]
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb install "/My/Test/MyProject/runtime/android/MyProject-debug.apk"'</span>

1671 KB/s (10044151 bytes in 5.866s)
 pkg: /data/local/tmp/MyProject-debug.apk
Success
Running command: run
starting application
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb shell am start -n "org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity"'</span>

Starting: Intent { cmp=org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity }
<span style="color: #000000;">$</span> 

</span>

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p android

Running command: compile

Building mode: debug

Android platform not specified, searching a default one...

running: '/opt/android-sdk-macosx/tools/android update project -t android-22 -p /My/Test/MyProject/frameworks/runtime-src/proj.android'

Updated project.properties

Updated local.properties

Updated file /My/Test/MyProject/frameworks/runtime-src/proj.android/proguard-project.txt

It seems that there are sub-projects. If you want to update them

please use the --subprojects parameter.

Android platform not specified, searching a default one.

:

(中略)

:

:

-package:

[apkbuilder] Current build type is different than previous build: forced apkbuilder run.

[apkbuilder] Creating MyProject-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:

[zipalign] Running zip align on final apk...

[echo] Debug Package: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/MyProject-debug.apk

[propertyfile] Creating new property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

-post-build:

debug:

BUILD SUCCESSFUL

Total time: 12 seconds

Move apk to /My/Test/MyProject/runtime/android

build succeeded.

Running command: deploy

Deploying mode: debug

installing on device

running: '/opt/android-sdk-macosx/platform-tools/adb uninstall org.cocos2dx.MyProject'

Failure [DELETE_FAILED_INTERNAL_ERROR]

running: '/opt/android-sdk-macosx/platform-tools/adb install "/My/Test/MyProject/runtime/android/MyProject-debug.apk"'

1671 KB/s (10044151 bytes in 5.866s)

pkg: /data/local/tmp/MyProject-debug.apk

Success

Running command: run

starting application

running: '/opt/android-sdk-macosx/platform-tools/adb shell am start -n "org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity"'

Starting: Intent { cmp=org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity }

$

うまくいけば先ほど起動しておいた Android シミュレーター上でサンプルアプリが実行されます！！

ここまであえて Eclipse を使わないで来ましたが、次回は Eclipse を使って開発する方法を紹介しようと思います。

ねずみハンターキャシーの開発に使用したツール

2015年6月6日 TOME Leave a comment

こんにちは。

聞かれてもないですけど自主的に『ねずみハンターキャシー』の開発に使用したツールの紹介をします。音楽と一部のグラフィック以外は個人開発なので、これから小規模のアプリを開発しようと考えている方の参考になれば幸いです。

機材

PC: Macbook Pro 13インチ 2.4GHz Core i5 メモリ8GB SSD 256GB

2014年の前半に買った Macbook Pro で2015年6月現在いまでもストレスなく動作しています。

ツール

Cocos2d-JS

無償の商業利用可能なアプリ開発プラットフォームです。Cocos2d-x に比べてイマイチ普及していませんが、JavaScript でブラウザ、iOS、Android などで動作するアプリが開発できる優れものです。日本語どころか英語の情報も最新のバージョンのものはあまり揃っていませんが、ソースがあるので大抵なんとかなります。

http://www.cocos2d-x.org/products（英語）

http://jp.cocos.com/products (日本語)

WebStorm

有償のWebサイト構築に特化したIDE（統合開発環境）です。IDEといっても自分はテキストエディタと認識しています（使いこなせてないのかな）。

JavaScript のコード補完について、いろいろなソフトを試しましたが WebStorm が一番でした。JavaScript が動的型付けのオブジェクト指向なスクリプト言語なので、コードの補完を実装するのは大変なんだと思いますが、WebStorm はその辺りをうまく実用的なレベルにまで作り込んでくれているようでした。

https://www.jetbrains.com/webstorm (英語サイト)

Tiled

無償の商業利用可能なマップエディタです。TMX形式で出力すれば Cocos2d-JS で読み込みことが可能です。

各ステージの背景は、マップチップを PNG ファイルで作成したものを Tiled で読み込み、TMX ファイルを作成しました。

http://www.mapeditor.org (英語サイト)

Photoshop

説明不要の有償画像加工ツールです。

主にタイトルロゴ、アイコン、スクリーンショット画像の作成に使用しました。

http://www.adobe.com/jp/products/photoshop.html

App Icon template (for Photoshop)

アプリ開発経験がある方はご存知だと思いますが、iOSのアイコンは様々な大きさのものを用意する必要があって、非常に面倒です。

このサイトにあるテンプレートを使うと、必要なサイズのアイコンを一気に作成してくれます！超便利でした！

http://appicontemplate.com/ios7

CLIP STUDIO PAINT PRO

有償のイラスト制作ソフトです。通称クリスタ。グラフィックを専門にされている方にとっては有名どころだと思います。自分はプログラマーなのでよくわかっていませんが。。

LINE スタンプが流行った時に、自分でも描いてみようと思ってクリスタ買ってしまいました。頑張って40枚描いたスタンプはリジェクトされてお蔵入りしましたが、それはまた別のお話。

Mac 用のドットエディターがいいのが見つからなかったので、今回はこれでドット打ちました。正直、ドットを本格的に打つには適していないと思います。Windows では EDGE とか D-Pixed とかあるんですけどね。。

http://www.clipstudio.net

Audacity

無償のオープンソースのサウンドデータ加工ツールです。

今回、効果音は素材サイトで探したり、自分の過去の作品で使用した音を使いまわしたりしましたが、Audacity でいろいろなエフェクトをかけたりトリミングしたり形式変換したりできるので、使いました。

BGMに関しても、ループ再生の際、微妙に無駄な間があったりすると聞き心地を損なうので、Audacity で微調整しました。

http://sourceforge.net/projects/audacity (英語サイト)

Chrome

無償のブラウザです。かなりブラウザとして有名なのですが、実は強力な JavaScript デバッグの機能を持っています。

今回は、Cocos2d-JS の JavaScript 部分の簡単なテスト／デバッグはほとんど Chrome 上で行いました。Chrome 上である程度動作が確認できた後、iOS 上で最終確認を行っていました。

https://www.google.co.jp/chrome/browser/desktop/index.html

MAMP

Webサーバー。Chrome 上で JavaScript を実行させる際に使いました。OS X や Cocos2d-JS 自体に Webサーバー機能が含まれているので、なくてもいいのですが、GUIで制御できるので個人的にはあると便利でした。

有償版もありますが、無償版で十分でした。

https://www.mamp.info/en/

Xcode

iOS アプリを作成するには必須の、Apple 純正の IDE (統合開発環境) です。Cocos2d-JS で動作するプロジェクトを、iOS デバイス／シミュレーター上で動作させるには必要です。

https://developer.apple.com/jp/xcode/downloads

Eclipse + ADT プラグイン

Android アプリ制作に特化した IDE は Eclipse +ADTプラグインか、Android Studio の２択になると思いますが、Cococs2d-JS が生成するプロジェクトに含まれているのは Eclipse 用の設定ファイルなので、Eclipse の方を使用しました。

しかし2015年6月現在、Android Stdio のほうも以前よりかなり使える様になってきているようなので、今から環境をつくるならどちらがよいかわかりません。要確認です。

ADT Plugin for Eclipseのインストール – Android入門　(JavaDrive様のサイト)
http://www.javadrive.jp/android/adt

何か抜けがあるかもしれないですが、思い出したら追加します！

アプリ

Eclipse のワークスペースがどこにあるか調べる方法

2015年6月5日 TOME 7 comments

Eclipse のワークスペースはデフォルトではホームディレクトに workspace という名前のディレクトリが作成されます。

任意の名前のディレクトリを新たなワークスペースとして使えるため、その時の気分によっていろんな名前をつけてしまい、どこにワークスペースを作ったかわからなくなってしまうことがよくあります。少なくとも自分は。

方法１

Eclipse の Preference の [General]→[Startup and Shutdown]→[Workspaces] を開くと “Recent workspaces” として使ったことがあるワークスペースが記録されています。

しかしこの方法だと、その Eclipse が開いたことのあるワークスペースしかリストされません。

方法２

Eclipse はワークスペースとして指定されてディレクトリに “.metadata” という隠しディレクトリを作るので、これを検索します。

ターミナルを開いてワークスペースを置いてありそうな場所（例：ホームディレクトリ）で以下のコマンドを実行します。

<span style="color: #0000ff; font-size: 14pt;"><strong>find . -type d -name .metadata
</strong></span>

1 2	<span style="color: #0000ff; font-size: 14pt;"><strong>find . -type d -name .metadata </strong></span>

自分の環境で実行した例は以下の通りです。

$ <strong>cd /My/Home</strong>
$ <span style="color: #0000ff;"><strong>find . -type d -name .metadata</strong></span>
<span style="color: #339966;">./.android/monitor-workspace/.metadata</span>
<span style="color: #339966;">./Documents/Aptana Studio 3 Workspace/.metadata</span>
<span style="color: #339966;">./Documents/cocos/.metadata</span>
<span style="color: #339966;">./workspace/.metadata</span>
$

$ cd /My/Home

$ find . -type d -name .metadata

./.android/monitor-workspace/.metadata

./Documents/Aptana Studio 3 Workspace/.metadata

./Documents/cocos/.metadata

./workspace/.metadata

ざくざく出てきました。

この方法だとEclipse をベースに作られていると思われる別のツールのワークスペースも出てしまうのが興味深いところです。（Aptana Studio 3, Cocos Code IDE）

時間がかかってもよければルートディレクトリで上記のコマンドを打てば、パーミションがあるところにあるワークスペースはすべて探し出せます。

Cocos2d-JS のサンプルを動かしてみる (iOS編)

2015年6月5日 TOME 2 comments

前回ブラウザ上で Cocos2d-JS を動かしてみたので、今回は iOS アプリとして動かしてみます。

使用した環境

OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1

iOSアプリとして実行する

Cocos2d-JS のプロジェクトを iOS アプリとして実行するには大きく分けて２つの方法があります。

cocos run コマンドを使用する (CUIベース)
Xcode からプロジェクトファイルを開く (GUIベース) – おすすめ

Xcode の様々な機能が利用できる 2. の方法がおすすめです。

方法１：cocos run コマンドを使用する

前回のブラウザ上での実行の際に使用した cocos run コマンドの -p オプションの引数を ios に変えるだけで、ビルド、iOS シミュレーターの起動、アプリの実行まで全部行ってくれます。最初の実行時には cocos2d ライブラリのビルドもあり、数分かかります。

$ <strong>cd MyProject</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <span style="color: #0000ff;"><strong>cocos run -p ios
</strong><span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">building</span>
<span style="color: #ff00ff;">running: 'xcodebuild -project "/My/Test/MyProject/frameworks/runtime-src/proj.ios_mac/MyProject.xcodeproj" -configuration Debug -target "MyProject iOS" -arch i386 -sdk iphonesimulator CONFIGURATION_BUILD_DIR="/My/Test/MyProject/runtime/ios" VALID_ARCHS="i386"'</span>

<span style="color: #339966;">Build settings from command line:</span>
<span style="color: #339966;">    ARCHS = i386</span>
<span style="color: #339966;">    CONFIGURATION_BUILD_DIR = /My/Test/MyProject/runtime/ios</span>
<span style="color: #339966;">    SDKROOT = iphonesimulator8.3</span>
<span style="color: #339966;">    VALID_ARCHS = i386</span>

<span style="color: #33cccc;">=== BUILD TARGET jsbindings iOS OF PROJECT cocos2d_js_bindings WITH CONFIGURATION Debug ===</span>

<span style="color: #339966;">Check dependencies</span>

<span style="color: #339966;">Write auxiliary files</span>
<span style="color: #339966;">/bin/mkdir -p /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build</span>
<span style="color: #339966;">write-file /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build/jsbindings\ iOS-all-non-framework-target-headers.hmap</span>
<span style="color: #339966;">write-file /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build/jsbindings\ iOS.hmap</span>
<span style="color: #339966;">write-file /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build/jsbindings\ iOS-all-target-headers.hmap</span>
<span style="color: #339966;">write-file /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build/jsbindings\ iOS-own-target-headers.hmap</span><strong>

</strong></span> :
 :
(中略)
 :
 :
<span style="color: #339966;">CpResource ios/Icon-58.png /My/Test/MyProject/runtime/ios/MyProject\ iOS.app/Icon-58.png</span>
<span style="color: #339966;"> cd /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac</span>
<span style="color: #339966;"> export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/opt/local/bin:/opt/cocos2d-js-v3.5/tools/cocos2d-console/bin:/opt/local/bin:/opt/local/sbin:/Applications/MAMP/Library/bin/:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Applications/Xcode.app/Contents/Developer/usr/bin/"</span>
<span style="color: #339966;"> builtin-copy -exclude .DS_Store -exclude CVS -exclude .svn -exclude .git -exclude .hg -resolve-src-symlinks /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac/ios/Icon-58.png /My/Test/MyProject/runtime/ios/MyProject\ iOS.app</span>

<span style="color: #339966;">Touch /My/Test/MyProject/runtime/ios/MyProject\ iOS.app</span>
<span style="color: #339966;"> cd /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac</span>
<span style="color: #339966;"> export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/opt/local/bin:/opt/cocos2d-js-v3.5/tools/cocos2d-console/bin:/opt/local/bin:/opt/local/sbin:/Applications/MAMP/Library/bin/:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Applications/Xcode.app/Contents/Developer/usr/bin/"</span>
<span style="color: #339966;"> /usr/bin/touch -c /My/Test/MyProject/runtime/ios/MyProject\ iOS.app</span>

<strong><span style="color: #339966;">** BUILD SUCCEEDED **</span></strong>

<span style="color: #339966;">build succeeded.</span>
<span style="color: #339966;">Running command: deploy</span>
<span style="color: #339966;">Deploying mode: debug</span>
<span style="color: #339966;">Running command: run</span>
<span style="color: #339966;">starting application</span>
<span style="color: #ff00ff;">running: '/opt/cocos2d-js-v3.5/tools/cocos2d-console/plugins/project_run/bin/ios-sim-xcode6 launch "/My/Test/MyProject/runtime/ios/MyProject iOS.app" &amp;'</span>


$

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p ios

Running command: compile

Building mode: debug

building

running: 'xcodebuild -project "/My/Test/MyProject/frameworks/runtime-src/proj.ios_mac/MyProject.xcodeproj" -configuration Debug -target "MyProject iOS" -arch i386 -sdk iphonesimulator CONFIGURATION_BUILD_DIR="/My/Test/MyProject/runtime/ios" VALID_ARCHS="i386"'

Build settings from command line:

ARCHS = i386

CONFIGURATION_BUILD_DIR = /My/Test/MyProject/runtime/ios

SDKROOT = iphonesimulator8.3

VALID_ARCHS = i386

=== BUILD TARGET jsbindings iOS OF PROJECT cocos2d_js_bindings WITH CONFIGURATION Debug ===

Check dependencies

Write auxiliary files

/bin/mkdir -p /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build

write-file /My/Test/MyProject/frameworks/js-bindings/bindings/proj.ios_mac/build/cocos2d_js_bindings.build/Debug-iphonesimulator/jsbindings\ iOS.build/jsbindings\ iOS-all-non-framework-target-headers.hmap

:

(中略)

CpResource ios/Icon-58.png /My/Test/MyProject/runtime/ios/MyProject\ iOS.app/Icon-58.png

cd /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac

export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/opt/local/bin:/opt/cocos2d-js-v3.5/tools/cocos2d-console/bin:/opt/local/bin:/opt/local/sbin:/Applications/MAMP/Library/bin/:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Applications/Xcode.app/Contents/Developer/usr/bin/"

builtin-copy -exclude .DS_Store -exclude CVS -exclude .svn -exclude .git -exclude .hg -resolve-src-symlinks /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac/ios/Icon-58.png /My/Test/MyProject/runtime/ios/MyProject\ iOS.app

Touch /My/Test/MyProject/runtime/ios/MyProject\ iOS.app

cd /My/Test/MyProject/frameworks/runtime-src/proj.ios_mac

/usr/bin/touch -c /My/Test/MyProject/runtime/ios/MyProject\ iOS.app

** BUILD SUCCEEDED **

build succeeded.

Running command: deploy

Deploying mode: debug

Running command: run

starting application

running: '/opt/cocos2d-js-v3.5/tools/cocos2d-console/plugins/project_run/bin/ios-sim-xcode6 launch "/My/Test/MyProject/runtime/ios/MyProject iOS.app" &'

うまくいけば自動的に iOS シミュレーターが起動し、アプリが立ち上がります！！簡単！！

しかしこの方法１は何が行われているのかよく見えないことなどがあり、エキスパート向けの方法だと思います。自分は使っていません。

方法２：Xcodeからプロジェクトファイルを開く

方法２は Xcode を使う方法です。こちらがオススメのやり方です。

./frameworks/runtime-src/proj.ios_mac/<プロジェクト名>.xcodeproj に Xcode で開くことができるプロジェクトファイルがあります。

この .xcodeproj ファイルをダブルクリックなどで開きます。このバージョンの Cocos2d-JS が生成する Xcode のプロジェクトファイルは “Xcode 3.2 compatible” とのことでかなり古い形式のようですが、最新の Xcode 6.3.2 でもこのままビルドはできます。（App Store にアップするにはアイコンの追加などの修正が必要です。)

このプロジェクトは、ビルド対象がデフォルトで “jsbinding iOS” と言うライブラリになっているので、これを自分のプロジェクト名のものに変更します。

また、デバイスは実機を選ぶ場合プロビジョニングなどの設定が必要になるので、とりあえず iPhone 6 シミュレーターなどにしておくと簡単です。

あとは左上の再生ボタンを押して実行します。

問題がなければ選択した iOS デバイス上でサンプルが実行されるはずです！

Cocos2d-x/JS

Cocos2d-JS の開発環境を構築する

2015年6月5日 TOME 3 comments

Cocos2d-JSとは一言で言うと『JavaScript バージョンの Cocos2d-x』です。直接 Cocos2d-x を扱うには C++ でコードを記述する必要がありますが、Cocos2d-JS を使えば大部分のコードは JavaScript で記述することが可能です。

ただし公式ページの記述とは裏腹に、Cocos2d-x のすべての機能が使えるわけではないので注意が必要です。ざっくり言うと、よく使う機能はちゃんとサポートされていますが、あまり使われない機能（例：シーン切り替え時の一部のトランジション）はサポートされてない部分が散見されます。

そうは言っても、スマートフォンだけでなくブラウザ上でも動作することと、事前コンパイルなしにすぐ動作を確認できることなどは大きな魅力です。

今回は Cocos2d-JS で開発を始めるための環境構築の手順についてまとめました。

ダウンロード
インストール＆設定
新規プロジェクト作成
サンプルを実行

使用した環境

OS: Mac OS X 10.10.3
Cocos2d-JS: v3.6.1

ダウンロード

Cocos2d-JS の日本語公式ページから最新版（2015年6月4日時点では v3.6.1) がダウンロードできます。

インストール＆設定

インストーラーは用意されていないので、ダウンロードした zip ファイルを適当な場所に解凍します。あとでパスを通すことになるのでディレクトリ構成の浅い部分に置くのがおすすめです。自分は /opt/cocos2d-js-v3.6.1 に置きました。

ターミナルを開き、パッケージに含まれている setup.py を実行すると、.bash_profile に以下の環境変数の設定が自動で追加されます。

COCOS_CONSOLE_ROOT
PATH

途中 NDK_ROOT と ANDROID_SDK_ROOT を尋ねられるのですが、とりあえずリターンを押しておけば Web アプリの開発は可能です。（Android アプリの開発をする場合は「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、設定してください。）

$ <strong>pwd</strong>
<span style="color: #339966;">/opt/cocos2d-js-v3.6.1</span>
$ <span style="color: #0000ff;"><strong>./setup.py</strong></span>
<span style="color: #339966;">Setting up cocos2d-x...
-&gt;Check environment variable COCOS_CONSOLE_ROOT
-&gt;Find environment variable COCOS_CONSOLE_ROOT...
-&gt;COCOS_CONSOLE_ROOT not found-&gt; Add COCOS_CONSOLE_ROOT environment variable...
-&gt;Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin
-&gt;Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"

-&gt;Check environment variable NDK_ROOT
-&gt;Find environment variable NDK_ROOT...
-&gt;NDK_ROOT not found

-&gt;Please enter the path of NDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>(リターン)</strong></span>
-&gt;Check environment variable ANDROID_SDK_ROOT
-&gt;Find environment variable ANDROID_SDK_ROOT...
-&gt;ANDROID_SDK_ROOT not found

-&gt;Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):</span>

$ pwd

/opt/cocos2d-js-v3.6.1

$ ./setup.py

Setting up cocos2d-x...

->Check environment variable COCOS_CONSOLE_ROOT

->Find environment variable COCOS_CONSOLE_ROOT...

->COCOS_CONSOLE_ROOT not found-> Add COCOS_CONSOLE_ROOT environment variable...

->Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin

->Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"

->Check environment variable NDK_ROOT

->Find environment variable NDK_ROOT...

->NDK_ROOT not found

->Please enter the path of NDK_ROOT (or press Enter to skip):(リターン)

->Check environment variable ANDROID_SDK_ROOT

->Find environment variable ANDROID_SDK_ROOT...

->ANDROID_SDK_ROOT not found

->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):

<span style="color: #339966;"><span style="color: #0000ff;"><strong>(リターン)</strong></span></span>

1	<span style="color: #339966;"><span style="color: #0000ff;"><strong>(リターン)</strong></span></span>

<span style="color: #339966;">-&gt;Check environment variable ANT_ROOT -&gt;Find environment variable ANT_ROOT... -&gt;ANT_ROOT not found -&gt;Find command ant in system... -&gt;Path "/opt/local/bin" was found -&gt; Add ANT_ROOT environment variable... -&gt;Added ANT_ROOT=/opt/local/bin A backup file "/Users/hirota/.bash_profile.backup4" is created for "/Users/hirota/.bash_profile". Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect</span>
$

->Check environment variable ANT_ROOT ->Find environment variable ANT_ROOT... ->ANT_ROOT not found ->Find command ant in system... ->Path "/opt/local/bin" was found -> Add ANT_ROOT environment variable... ->Added ANT_ROOT=/opt/local/bin A backup file "/Users/hirota/.bash_profile.backup4" is created for "/Users/hirota/.bash_profile". Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect

これ以降、新たにターミナルを開けば cocos コマンドが使用できるようになっているはずです。

ただし bash にしか対応していないので csh など他のシェルを使っている方は同等の設定を手動で行う必要があります。
Python のバージョン 2.x が使えることが必要です。最近の OS X には標準で含まれているので特に準備は必要ありません。Python バージョン 3.x 系は未対応とのことなので注意してください。
Android アプリをビルドするには別途必要な設定がありますが、後からでも設定できるので本記事では対象から外します。

新規プロジェクト作成

cocos はコマンドラインから Cocos2d-x/JS のプロジェクトを管理するツールです。ここではサブコマンド cocos new を使用して新規プロジェクトの雛形を作成します。

プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。(PROJECT_NAME は好きな名前に変更してください)

$ <span style="color: #0000ff;"><strong>cocos new -l js <em>PROJECT_NAME</em></strong></span>

1	$ <span style="color: #0000ff;"><strong>cocos new -l js <em>PROJECT_NAME</em></strong></span>

以下は /My/Test という場所に MyProject という名前のプロジェクトを作成した場合の例です。

$ <strong>pwd</strong>
<span style="color: #339966;">/My/Test</span>
$ <strong><span style="color: #0000ff;">cocos new -l js MyProject</span></strong>
<span style="color: #339966;">Running command: new</span>
<span style="color: #339966;">&gt; Copy template into /My/Test/MyProject</span>
<span style="color: #339966;">&gt; Copying cocos2d-html5 files...</span>
<span style="color: #339966;">&gt; Copying files from cocos root directory...</span>
<span style="color: #339966;">&gt; Copying files from template directory...</span>
<span style="color: #339966;">&gt; Copying directory from cocos root directory...</span>
<span style="color: #339966;">&gt; Copying cocos2d-x files...</span>
<span style="color: #339966;">&gt; Rename project name from 'HelloJavascript' to 'MyProject'</span>
<span style="color: #339966;">&gt; Replace the project name from 'HelloJavascript' to 'MyProject'</span>
<span style="color: #339966;">&gt; Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span>
<span style="color: #339966;">&gt; Replace the mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span>
<span style="color: #339966;">&gt; Replace the ios bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span>

$

$ pwd

/My/Test

$ cocos new -l js MyProject

Running command: new

> Copy template into /My/Test/MyProject

> Copying cocos2d-html5 files...

> Copying files from cocos root directory...

> Copying files from template directory...

> Copying directory from cocos root directory...

> Copying cocos2d-x files...

> Rename project name from 'HelloJavascript' to 'MyProject'

> Replace the project name from 'HelloJavascript' to 'MyProject'

> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'

> Replace the mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'

> Replace the ios bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'

サンプルを実行

Cocos2d-JS のプロジェクトは、ブラウザ、iOS、Android などの環境で実行することができます。ここでは一番簡単なブラウザ上での実行を試してみます。

ブラウザ上で実行するには、大きく分けて２つ方法があります。

稼働中のWebサーバー (Apache, MAMPなど) 上に、プロジェクトのファイルをコピーする
cocos run コマンドを使用する (専用の Web サービスを起動します)

ここでは 2. の方法を使います。先ほど作成したプロジェクトのディレクトリに移動して、以下のコマンドを実行するだけです。

$ <strong><span style="color: #0000ff;">cocos run -p web</span></strong>

1	$ <strong><span style="color: #0000ff;">cocos run -p web</span></strong>

以下は、実行結果の例です。

コマンドを実行すると内部でWebサーバーがポート8000を使用して起動します。それと同時にデフォルトのブラウザーが起動しページにアクセスします。

$ <strong>cd MyProject</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <span style="color: #0000ff;"><strong>cocos run -p web</strong></span>
<span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">Running command: deploy</span>
<span style="color: #339966;">Deploying mode: debug</span>
<span style="color: #339966;">Running command: run</span>
<span style="color: #339966;">starting application</span>
<span style="color: #339966;">Try start server on 127.0.0.1:8000</span>
<span style="color: #339966;">Serving HTTP on 127.0.0.1, port 8000 ...</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -
  :
  :

</span>

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p web

Running command: compile

Building mode: debug

Running command: deploy

Deploying mode: debug

Running command: run

starting application

Try start server on 127.0.0.1:8000

Serving HTTP on 127.0.0.1, port 8000 ...

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -

うまくいけば自動的に立ち上がったブラウザ上にHello World のシーンが実行されているはずです！！

Webサーバーは、Control+C で停止させることができます。

Cocos2d-x/JS

« 1 … 7 8 9 10 »