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

こんばんは。

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

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

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

Screen Shot 2015-06-15 at 12.46.22 AM

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

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

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

遊び方

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

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

今後の予定

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

 

 

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

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

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

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

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

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

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

app.js

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

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

実行結果

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

Screen Shot 2015-06-10 at 8.58.30 PM

※ 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

 

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

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

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

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

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

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

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 で画像を表示する

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

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

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

CathyTestCathyTest.png

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

Screen Shot 2015-06-09 at 9.36.13 AM

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

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

a

 

resource.js

app.js

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

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

実行結果

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

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

Screen Shot 2015-06-09 at 11.45.25 AM

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

 

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

ちまたでは 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

Screen Shot 2015-06-07 at 1.30.16 PM

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/

Screen Shot 2015-06-08 at 4.44.12 PMインストーラーは特に無いので、ダウンロードしたファイル (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…] を選びます。

Screen Shot 2015-06-08 at 6.48.45 PM

プラグイン管理のウインドウが開くので [Add] を押し、レポジトリを指定します。Screen Shot 2015-06-08 at 6.50.47 PM

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

Screen Shot 2015-06-08 at 6.51.24 PM

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

Screen Shot 2015-06-08 at 6.52.03 PM

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

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

Screen Shot 2015-06-08 at 7.03.13 PM

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

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

Screen Shot 2015-06-08 at 7.07.57 PM

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

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

Screen Shot 2015-06-08 at 7.10.20 PM

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

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

動作テスト

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

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

Screen Shot 2015-06-08 at 7.21.32 PM

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

Screen Shot 2015-06-08 at 7.22.16 PM

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

Screen Shot 2015-06-08 at 7.22.32 PM

Activity をどうするか聞かれるので “Blank Activity” を選んで [Next>] を押します。Activity と言うのは iOS で言うところ View Controller のようなものです。Screen Shot 2015-06-08 at 7.23.06 PM

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

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

Screen Shot 2015-06-08 at 7.25.56 PM

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

Screen Shot 2015-06-08 at 7.31.03 PM

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

 

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

先日 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 のバージョンが大体わかります。

この例の場合、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

Screen Shot 2015-06-07 at 2.08.50 PM

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

Screen Shot 2015-06-07 at 2.48.19 PM

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 にしました。

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 の場所は指定しませんでしたが、今回は指定します。青い部分はユーザーからの入力です。

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

Screen Shot 2015-06-07 at 5.04.28 PM

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

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

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

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

 

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

[Nexus 4 by Google] を選んで、

 

Screen Shot 2015-06-08 at 12.36.30 PM

 

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

Screen Shot 2015-06-08 at 12.45.45 PM

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

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

StartAVD

 

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

Screen Shot 2015-06-07 at 5.52.23 PM

実行

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

 

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

Screen Shot 2015-06-08 at 12.25.45 PM

 

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

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

こんにちは。

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

機材

PC: Macbook Pro 13インチ 2.4GHz Core i5 メモリ8GB SSD 256GB
Screen Shot 2015-06-06 at 10.34.08 AM

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といっても自分はテキストエディタと認識しています(使いこなせてないのかな)。

Screen Shot 2015-06-06 at 12.18.46 PM

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

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

Tiled

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

Screen Shot 2015-06-06 at 12.21.50 PM

各ステージの背景は、マップチップを 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 デバッグの機能を持っています。

Screen Shot 2015-06-06 at 12.28.13 PM

今回は、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 の2択になると思いますが、Cococs2d-JS が生成するプロジェクトに含まれているのは Eclipse 用の設定ファイルなので、Eclipse の方を使用しました。

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

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

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

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

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

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

方法1

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

Screen Shot 2015-06-05 at 7.11.06 PM Screen Shot 2015-06-05 at 7.13.45 PM

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

方法2

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

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

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

ざくざく出てきました。

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

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

 

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

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

使用した環境

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

 

iOSアプリとして実行する

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

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

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

方法1:cocos run コマンドを使用する

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

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

Screen Shot 2015-06-05 at 1.37.29 PM

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

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

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

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

Screen Shot 2015-06-05 at 1.56.09 PM

 

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

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

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

screenshot

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

Screen Shot 2015-06-05 at 2.42.35 PM

 

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

 

 

 

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

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) がダウンロードできます。Screen Shot 2015-06-04 at 12.01.59 PM

インストール&設定

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

Screen Shot 2015-06-09 at 8.25.27 AM

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

  • COCOS_CONSOLE_ROOT
  • PATH

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

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

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

新規プロジェクト作成

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

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

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

サンプルを実行

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

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

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

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

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

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

 

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

Screen Shot 2015-06-08 at 2.44.40 PM

 

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

1 7 8 9 10