Google+ もご覧ください
ユーザーアイコン

cocos2d javascript bindingsでマルチプラットフォーム開発

第三回 サンプルアプリケーションの実行と解説

Seasons

第三回 サンプルアプリケーションの実行と解説

前回は、プロジェクトをcocos2d jsbの環境構築と新規プロジェクトの作成まで解説しました。今回は、実際に新規プロジェクトで生成されたコードをビルドして、動作を確認してみましょう。

利用するcocos2dシリーズは、前回告知の通り、cocos2d-xを利用します。

cocos2d-x jsb新規プロジェクトを作成する

前回の手順を参考にcocos2d-x jsbの新規プロジェクトを作成します。今回作成するサンプルプロジェクトの名前は、JSBSample01としました。

作成後Finderには、以下のような構成でファイルとフォルダが出力されていると思います。

出力される内容
出力される内容

JSBSample01.xcodeprojをダブルクリックして、プロジェクトを立ち上げます。

cocos2d-x jsb新規プロジェクトをビルドする

作成したプロジェクトは、すぐに実行可能なサンプルが実装された状態になっています。

Xcodeの表示
Xcodeの表示

Xcode左上のプルダウンから、iPhone Simulatorを選択した後(デフォルトでそうなるはずですがもし実機が選択されていた場合は変更)、メニューのProduct -> Buildからビルドを行います(ショートカットコマンドでも問題ありません)。

警告はいくつか表示されますが、ビルドは無事完了すると思います。ビルド完了後は、メニューのProduct -> Runで実行[^1]してみましょう。次のような画面が表示されるはずです。

iOSシミュレータでの実行結果
iOSシミュレータでの実行結果

動作デモ動画は次のようになります。

サンプルアプリの解説

サンプルアプリケーションは、次のような画面遷移が実装されています。

サンプルアプリケーションの画面遷移
サンプルアプリケーションの画面遷移

実際に操作してみるとわかるように、cocos2dで一般的な画面遷移方法やラベルといったものが利用できていますね。これがcocos2d jsbの魅力の一つでもあります。jsbだからといって使えないものがあってはいけないcocos2dのものが全て利用できること、これがcocos2d jsbを開発する上での大事なポイントになっています。

サンプルコードの解説

cocos2d-xのサンプルプログラムは、cocos2d-iphone版のjsbサンプルと比べるCocosBuilderとの連携まで含まれており少々複雑になっています。

CocosBuilderとは?

ここで初めてでてきたCocosBuilderについて触れておきましょう。

CocosBuilderとは、cocos2dで画面レイアウトを作成し、そのままcocos2dで読み込める形式で出力してくれるツールです。

無償で公開されており、ソースコードもgithubから手に入れることが出来ます。

CocosBuilderの使い方などについては今回は触れませんが、今後の連載で少しづつ触れていきたいと思っています。

興味のある方は、以下のような入門記事も公開されているのでチェックしてみてください。

CocosBuilder入門

次のページでは生成されたhello.jsについて解説します。

Cocos2d jsb

記事をリクエストする

関連記事

コメント