Cocos2d-JS で画像を表示する

img-cocos2djs

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

 


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

img-cocos2djs

先日 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 を使って開発する方法を紹介しようと思います。


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

img-cocos2djs

前回 ブラウザ上で 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 の開発環境を構築する

img-cocos2djs

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 で停止させることができます。


Cocos2d-JS でアプリをリリースしました

img-cocos2djs

こんにちは。

2015年の2月になりますが、『ラジウム・クリッカー』というアプリを iOS版/Android版同時にリリースしました。使用したプラットフォームは Cocos2d-JS です。

screen568x568 screen568x568-1

その数年前 iOSのアプリはいくつか作成した経験がありましたが、Androidの開発経験はなく、次のアプリはAndroid版も同時にリリースしたいと考えていました。

そのためのプラットフォームは何にすべきか数日かけて検討したところ、Cocos2d-xUnity というプラットフォームがよく使用されていて、自分の目的に適していそうなことがわかりました。
 img-cocos2dx  imgres

さらに調べたところ Cocos2d-x の拡張版の Cocos2d-JS というものが存在し、それを使うと JavaScript というスクリプト言語でアプリが開発でき、さらにブラウザ上でも動作するとのことでした。スクリプト言語でアプリが開発できるというのは非常に魅力的で、早速使用してみました。

使ってみると、資料が少なかったりバージョンによる差異が激しくて古い情報が役に立たなかったりといろいろ苦労はありましたが、確かに JavaScript で記述したアプリがブラウザでも iOS でも Android でも動作しました。

その後、紆余曲折あり、アプリリリースまでこぎつけましたが、何しろ資料が少なく、主にソースコードを解析したりして、なかなか苦労しました。

その時学んだ Cocos2d-JS の基本を、これからまとめていこうと思っています。これから Cocos2d-JS でアプリを開発しようと考えている方の助けになれば幸いです。

※ちなみに2015年4月にリリースした『ねずみハンター キャシー』というアプリも Cocos2d-JS で開発しました。

 

 


1 2