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

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

第四回 簡単なプログラムを元にcocos2d jsbの作法を学ぼう

Seasons

第四回 簡単なプログラムを元にcocos2d jsbの作法を学ぼう

今回はサンプルプログラムを改造して、テンプレートが作成する不要なファイルを整理しながら、シンプルなプログラムを書いて、実行してみます。cocos2d jsbにおけるお作法を学んでいきましょう。

テンプレート的なシンプルなプロジェクト作成

新規プロジェクトを作成

例によって、サンプルプロジェクトを作成するところから始めましょう。今回は、JSBBase01というプロジェクトを作成しました。

プロジェクト作成
プロジェクト作成

不要なファイルを削除する

前述の通りサンプルプロジェクトは、CocosBuilderのファイルなど、シンプルなプロジェクトには不要なファイルが含まれています。不要なファイルを削除することでシンプルなプロジェクトを作成することができるため、是非覚えておきましょう。

基本的に不要となるファイルは、Resourcesフォルダ以下に含まれています。

1. CCBフォルダの削除

図のように赤枠で囲ったCCBフォルダをまるごと消しましょう。 CCBフォルダの中には、CocosBuilderで作成した、画面のレイアウトデータやそれに必要なファイルが含まれています。

CCBフォルダ
CCBフォルダ

2. Xcodeプロジェクトファイルの修正

1.で削除したCCBフォルダの登録情報をXcode上から削除します。情報が残ったままでは、ビルド時にエラーになってしまうため、XcodeでJSBBase01プロジェクトを開き、図のようにCCBフォルダを削除します。これによりXcode上でCCBフォルダへの参照がはずれます。

Xcodeからの削除
Xcodeからの削除

3. hello.jsの修正

最後にhello.jsをテキストエディタで開き修正していきます。今回は、ソースコードの量が少ないため、全て掲載します。

    require("jsb.js");

    try {

        director = cc.Director.getInstance();
        winSize = director.getWinSize();
        centerPos = cc.p( winSize.width/2, winSize.height/2 );

        var GameLayer = cc.Layer.extend({

            // Constructor
            ctor:function () {
                this._super();
                this.init();
            }

        });

        function run()
        {
            var scene = cc.Scene.create();
            var layer = new GameLayer();
            scene.addChild( layer );

            director.runWithScene( scene );
        }

        __jsc__.garbageCollect();

        run();

    } catch(e) {log(e);}

修正後のファイルは、こちらからもダウンロードできます。

ビルド&実行

修正が完了したら、Xcodeでビルドして、シミュレーターで動作を確認してみましょう。次のような真っ黒な画面に左下に文字が表示されれば問題ありません。

実行結果
実行結果

もし、表示されない場合は、Xcodeのコンソールにエラーが出ている可能性があります。エラー内容は、すぐに理解できない場合があるため、どうしても分からない場合はFacebook groupなどで筆者まで質問を投げてもらえればと思います。

プログラムの構成

さて、今回のサンプルは、次のようなシンプルな内容で構成されています。

サンプルの構成
サンプルの構成

Sceneクラスがあり、その中にGameLayerをaddChildで追加しているだけです。 cc.Layerというのは、CCLayerのcocos2d jsbにおける標記です。ですのでCCLayerと同じものという理解で問題ありません。

cc.Layer.extendという手続きでCCLayerのサブクラスであるGameLayerを生成し、Sceneに追加しています。

シーンの生成は、cc.Scene.createで生成します。簡単ですね。

この状態のプログラムは、真っ黒なスクリーンが表示される以外は、何も実行されていないため、テンプレートとして活用できます。この状態をzip化して、何か適当なサンプルを作りたい時に利用すると良いでしょう。

サンプルのダウンロード

今回利用したサンプルは、こちらからダウンロードできます。

次回予告

次回は、このテンプレートプログラムにプログラムを追加していきます。その過程でこのテンプレートプログラムに記述されたcocos2d jsbのお作法やルールについて触れていきます。

Cocos2d jsb

記事をリクエストする

関連記事

コメント