2015年09月23日

Cocos2d-JS > DESIGN AND MAKE YOUR GAMEPLAY SCENE

原文はこちらです。

イントロダクション

このチュートリアルでは、あなたはゲームプレーシーンの設計と構築方法を学びます。どんなゲームも何種類かのゲームプレーシーンを必要とします。このチュートリアルは、ゲームプレーシーンの一般的なシナリオを示します。

前回のチュートリアルから、我々は特定のシーンのロジックを分離するために異なるレイヤを使うことができることを知っています。

以下に我々のゲームプレーシーンの最終的な結果を置きます:

幾つかのビル付きの背景があり、我々のヒーローと幾つかの HUD(ヘッドアップディスプレイ)要素が現在のゲームについての統計情報を見せるために存在します。我々はゲームプレーシーンを3つのパートに分割します:背景レイヤ、アニメーションレイヤ、そして状態レイヤです。

背景レイヤ

基本的に、どんなゲームも何枚かのソートされた背景を必要とします。時には背景は全くの静止画像であり、それはスクリーン全体を覆います。他の場合には、あなたは一定速度あるいは変化する速度で動くための背景レイヤを欲しくなるかもしれません。時には背景は我々にパララックスエフェクトさえ見せてくれます -- 異なるレイヤが様々な速度で動き、最も近いレイヤがより速く動き、最も遠いレイヤが遅く動くことで、オブジェクトが近いのか遠いのかを模擬的に示すものです。

最近のチュートリアルにて、我々はタイルドマップを紹介し、それはパララックスな背景を構築するのに非常に有益でした。このチュートリアルでは、物事をシンプルに保つために、我々はシンプルな静止した画像をゲームの背景を表現するために使います。

注記:

我々は、我々のゲームのヒーローが走るエフェクトを模倣するために背景を動かすことができ、ヒーローをスクリーンの中心に保ったままにします。我々は多くのそのようなトリックを我々の開発プロセスを通して見ていきます。

アニメーションレイヤ(ゲームプレーレイヤ)

アニメーションレイヤは、アニメーションしたり、衝突判定したり、その他のゲームロジックといった全てのゲーム要素を含みます。このレイヤは時にはまたゲームプレーレイヤとも呼ばれます。あなたはあなたが付けたいような名前を選ぶことができます。このレイヤにて、我々は、我々のゲームプレーのキーとなるパートを構成していきます。概して、我々はゲームオブジェクト、レベル生成器(それはまたレベルマネージャとも呼ばれます)、異なるゲームオブジェクト間での衝突判定を設計し、そしてプレーがゲームに勝ったか負けたかをチェックします。

セオリーに従えば、我々はこのレイヤを更に小さいレイヤに分割する必要はありません。我々はコンポジションとデリゲーションを物事を適切に扱うために使うことができます。

状態レイヤ(HUD レイヤ)

ビデオゲームにおいて、HUD(ヘッドアップディスプレイ)は、情報がゲームのユーザインタフェースの一部としてプレイヤーにビジュアル的に伝えられるための方法です。近代航空機で使われているヘッドアップディスプレイからその名前を取っています。

HUD はしばしば、メインキャラクタのヘルス、アイテム、そしてゲームの進度(スコアやレベルのような)を含んだ情報の幾つかを同時に表示するために使われます。あなたは HUD 上の更なる情報のためにこのリンクを参照することができます。

物事をよりシンプルにするために、我々はこの情報を状態レイヤと呼ばれる分離したレイヤに置きます。なぜならこれらのアイテムは常に他のゲーム要素の上に表示され、それらを分離したレイヤに置くことは、我々のライフを、Zオーダ表示問題について注意することなくより容易にしてくれます。

アクションにおけるコーディング

準備

2つの画像(★★PlayBG.png★★及び runner.png)を res ディレクトリに追加することによって始めましょう。

前のチュートリアルにて、我々は resource.js にて全てのリソース変数を追加しました。2つ多くの画像が追加されたので、resource.js もまた以下のように変更されるべきです:

var res = {
    helloBG_png : "res/helloBG.png",
    start_n_png : "res/start_n.png",
    start_s_png : "res/start_s.png",
    PlayBG_png  : "res/PlayBG.png",
    runner_png  : "res/runner.png"
};

var g_resources = [
    //画像
    res.helloBG_png,
    res.start_n_png,
    res.start_s_png,
    res.PlayBG_png,
    res.runner_png
];

ここで我々は PlayBG_png 及び runner_png と命名された2つのグローバル変数を追加しました。これで我々が他の js ファイルにあるスプライトを作成したくなったら、われは容易にこれらの変数にアクセスできます。

我々は4つの JavaScript ファイルを追加しようとしています:PlayScene.js, AnimationLayer.js, BackgroundLayer.js 及び StatusLayer.js です。我々は Cocos2d-x エンジンに、ゲームがスタートした時にこれらのファイルをロードするように伝える必要があります。我々はこのことを、新しいソースファイルに気付けるように project.json を変更することによって行います:

 "jsList" : [
        "src/resource.js",
        "src/app.js",
        "src/AnimationLayer.js",
        "src/BackgroundLayer.js",
        "src/PlayScene.js",
        "src/StatusLayer.js"
    ]

将来的には、あなたが新しい JavaScript ファイルをあなたのゲームに追加する度に、あなたは属性 jsList を変更し、より多くのソースコードファイルのパスを配列の最後に追加すべきです。

最後に、我々は、我々が最初の MenuScene にてボタンをクリックした時に PlayScene を表示させるべきです。以下にコードの抜粋を置きます:

    //これはメニューがクリックされた時のコールバックです。
    onPlay : function(){
        cc.log("==onplay clicked");
        cc.director.runScene(new PlayScene());
    }

PlayScene(PlayScene.js) のコーディング

背景レイヤ、アニメーションレイヤ、そして状態レイヤは異なるオーダで表示されるべきです。我々は、addChild メソッドを呼ぶときに明示的にオーダを指定することもできますし、あるいはそれらを PlayScene の子供として正しい順序で追加することもできます。このチュートリアルでは、我々はそれらを正しいオーダで追加します。

ここに PlayScene のコードの抜粋を置きます:

var PlayScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        //3つのレイヤを正しいオーダで追加します。
        this.addChild(new BackgroundLayer());
        this.addChild(new AnimationLayer());
        this.addChild(new StatusLayer());
    }
});

BackgroundLayer(BackgroundLayer.js)のコーディング

ここに我々の背景画像を置きます:

ここにコードの抜粋を置きます:

var BackgroundLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        this.init();
    },

    init:function () {
        this._super();
        var winsize = cc.director.getWinSize();

        //背景画像を作成し、それをスクリーンの中心に位置付けます。
        var centerPos = cc.p(winsize.width / 2, winsize.height / 2);
        var spriteBG = new cc.Sprite(res.PlayBG_png);
        spriteBG.setPosition(centerPos);
        this.addChild(spriteBG);
    }
});

AnimationLayer(AnimationLayer.js)のコーディング

ここに我々のメインキャラクタを置きます:

このセクションでは、我々はヒーローにアクションを実行させます。我々は MoveTo アクションをスプライト上で (80,85) から (300,85) に2秒で動かすために実行します。

ここに AnimationLayer のコードの抜粋を置きます:

var AnimationLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        this.init();
    },
    init:function () {
        this._super();

        //ヒーローのスプライトを作成します。
        var spriteRunner = new cc.Sprite(res.runner_png);
        spriteRunner.attr({x: 80, y: 85});

        //ムーブアクションを作成します。
        var actionTo = new cc.MoveTo(2, cc.p(300, 85));
        spriteRunner.runAction(new cc.Sequence(actionTo));
        this.addChild(spriteRunner);
    }
});

StatusLayer(StatusLayer.js)のコーディング

このセクションでは、我々は2つのインジケータを追加します:コインの量のインジケータと距離のインジケータです。両方のインジケータは、Cocos2d-html5 におけるラベルです。ラベルは HUD 情報をプレイヤーに表示させるのに非常に有益で、ラベルを作成したり使用したりするコードは、cocos2d フレームワークのおかげで非常に容易です。

ここに我々がレイヤをセットアップする必要があるコードの抜粋を置きます:

var StatusLayer = cc.Layer.extend({
    labelCoin:null,
    labelMeter:null,
    coins:0,

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

    init:function () {
        this._super();

        var winsize = cc.director.getWinSize();

        this.labelCoin = new cc.LabelTTF("Coins:0", "Helvetica", 20);
        this.labelCoin.setColor(cc.color(0,0,0));//black color
        this.labelCoin.setPosition(cc.p(70, winsize.height - 20));
        this.addChild(this.labelCoin);

        this.labelMeter = new cc.LabelTTF("0M", "Helvetica", 20);
        this.labelMeter.setPosition(cc.p(winsize.width - 70, winsize.height - 20));
        this.addChild(this.labelMeter);
    }
});

我々は新しい cc.LabelTTF をテキストラベルを作成するために使うことができます。最初のパラメータは表示されるテキストであり、2番目のパラメータはフォントファミリーであり、3番目パラメータはフォントサイズです。我々はまた LabelTTF の setColor 関数をラベルの色を設定するためにも使うことができます。cc.color(0,0,0) は 色が黒であることを表現します。

要約

このチュートリアルでは、我々はまたゲームシーンを異なるレイヤに分割しました。それぞれのレイヤはそれ自身のロジックと責任を持ちます。あなたはここでプロジェクト全体をダウンロードできます。

コードとロジックはそれほど簡単ではないので、我々は詳細の全てをカバーしませんでした。もし質問や提案があれば、我々に押せてください、我々はあなたをサポートするために最善を尽くします。

ここから進むのは

次のチュートリアルでは、あなたはランナー上でのアニメーションの実行方法と、小さなスプライトをスプライトシートにまとめる方法を学びます。あなたはまた、TexturePacker と命名された素晴らしいツールをも紹介されます。

posted by cbbandtqb at 03:17| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

2015年09月21日

Cocos2d-JS > MAKING YOUR FIRST GAME SCENE

原文はこちらです。

あなたのゲームに対する最初のシーンを作成する前に、あなたは幾つかの基本的な Cocos2d の概念に精通するべきです。もしあなたが既にこれらの概念に通じているなら、あなたは次のセクションヘスキップすることができます。

基本的な概念

Cocos2d ゲームにおいて、全ての要素はノードです。ゲームというものは、大概3種類のノードによって構築されています:

  • シーン
  • レイヤ
  • スプライト

差し当たって、我々はこのゲームにおいてレイヤにフォーカスしますが、シーンとスプライトについての詳細はここで見ることができます。

レイヤ

cc.Layer は cc.Node であり、cc.Node はそれ自身がどのように描かれるか、プレイヤーが背後にある他のレイヤが見えるように半透明になるかもしれないかを把握しています。cc.Layer は、あなたのゲームの見た目や振る舞いを定義するのにとても役立ち、あなたの期待にリーチするように cc.Layer のサブクラスを取り扱うには多くの時間を要します。

複雑なアプリはあなたにカスタマイズされた cc.Layer サブクラスを要求しますが、Cocos2d は幾つかの事前定義されたレイヤを提供しています。幾つかの例は、cc.Menu (シンプルなメニューレイヤ), cc.ColorLayer (ベタで着色されたレイヤ), そして cc.LayerMultiplex (その子供を多重化させて、ある一時点では1つだけを有効化し一方で他を無効化するレイヤ)を含みます。

レイヤは、cc.Sprite, cc.Label, そして更に他の cc.Layer オブジェクトを含んで、子供として任意の cc.Node を含むかもしれません。なぜなら、レイヤは cc.Nodeのサブクラスであるため、それらは手動もしくは cc.Action を使うことによって変形され得ます。

座標系

Cocos2d-JS は、OpenGL と同じ座標系を使っており、それはいわゆる"時計回りデカルト座標系"です。それはゲーム業界ではポピュラーですが、ウェブページデザインで使われる伝統的な左上の座標系とは異なります。

座標系についてのより詳細については、ここから見つけることができます。

アンカーポイント

アンカーポイントはオブジェクトの位置決めと回転の両方のために使われます。アンカーポイントの座標は相対座標です。例えば、位置(0, 0)、我々が常にそれを Cocos2d-x において cc.p(0 , 0) として定義している位置にあるアンカーポイントは、オブジェクトの左下の点に一致し、一方で cc.p(0.5, 0.5) はオブジェクトの中心に一致します。オブジェクトの位置設定をすると、オブジェクトは、アンカーポイントが setPosition() 呼び出しで指定された座標になるように位置付けられます。

プロパティは Cocos2d-JS v3.0 では属性として設定できます。

例えば、このスプライトは cc.p(0, 0) となるアンカーポイントを持ち、cc.p(0,0) となる位置を持ちます:

 // スプライトを作成
    var sprite = new cc.Sprite ( "bottomleft.png" ) ;
    sprite.attr({
            x: 0,
            y: 0,
            anchorX: 0,
            anchorY: 0
        });
    this.addChild ( sprite ) ;

アクション

アクションについてのより詳細については、ここから見つけることができます。

cc.MoveBy アクションを使ったスプライトの移動例:

// スプライトを50ピクセル右に、更に10ピクセル上に、2秒かけて移動
sprite.runAction(new cc.MoveBy(2, cc.p(50, 10)));

アニメーション

アニメーションについてのより詳細については、ここから見つけることができます。

アニメーション再生例:

 var animation = new cc.Animation ( ) ;

 for ( var i = 1 ; i < 15 ; i ++ ) {
    var frameName = "res/Images/grossini_dance_" + ( ( i < 10 ) ? ( "0" + i ) : i ) + ".png" ;
    animation.addSpriteFrameWithFile ( frameName ) ;
 }

 animation.setDelayPerUnit ( 2.8 / 14 ) ;
 animation.setRestoreOriginalFrame ( true ) ;
 var action = new cc.Animate ( animation ) ;
 sprite.runAction ( new cc.Sequence( action, action.reverse ( ) ) ) ;

スケジューラ及びタイマのコールバック

スケジューラ及びタイマのコールバックのより詳細については、ここから見つけることができます。

イベントマネージャ

Cocos2d-JS v3.0 は、ユーザイベントに応答するための新しいメカニズムに移行しました。

基礎:

  • イベントリスナはあなたのイベント処理コードをカプセル化します。
  • イベントマネージャはユーザイベントのリスナを管理します。
  • イベントオブジェクトはイベントについての情報を含みます。

イベントに応答するために、あなたはまず cc.EventListener を生成しなければなりません。5つの異なった種類のイベントリスナがあります。

  • cc.EventListenerTouch - タッチイベントに応答
  • cc.EventListenerKeyboard - キーボードイベントに応答
  • cc.EventListenerAcceleration - 加速度計イベントに応答
  • cc.EventListenMouse - マウスイベントに応答
  • cc.EventListenerCustom - カスタムイベントに応答

そして、あなたのイベント処理コードをイベントリスナ上の適切なコールバックにアタッチして下さい(例えば、EventListenerTouch リスナに対して onTouchBegan、あるいはキーボードイベントリスナに対して onKeyPressed)。

次に、あなたのイベントリスナを cc.eventManager に登録して下さい。

イベントが発生すると(例えば、ユーザがスクリーンにタッチしたり、キーボードを打ったり)、cc.eventManagerイベントオブジェクト(例えば、EventTouch, EventKeyboard)を、適切なイベントリスナ群にあなたのコールバックを呼び出すことで配信します。それぞれのイベントオブジェクトはイベントについての情報を含みます(例えば、タッチが発生した座標)。

より詳細についてはイベントマネージャを参照して下さい。

ゲームシーンの作成

前回のチュートリアルにて、我々は Cocos2d-JS ゲームの実行パスを分析してきました。我々の最初のゲームシーンは、main.js の cc.game.onStart 関数の中でロードされます。以下に、実際の仕掛けを行うコードの断片を置きます:

cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //リソースのロード
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};

ここで、我々は cc.LoaderScene を、我々のゲームのリソースをプリロードするために使い、全てのリソースをダウンロード後、ディレクトリは我々の最初のシーンを実行します。

注記:

cc.game は実際のゲームオブジェクトであり、それはゲームのコンフィグを初期化し、ゲームを起動します。

クリーンアップ作業

我々が我々自身のシーンを作れるようになる前に、我々は諸々をクリーンアップする必要があります。

app.js のクリーンアップ

このプロセスは非常にシンプルです。まず最初に、我々はapp.js の全てのコンテンツを削除すべきであり、なぜなら我々はそれをスクラッチから書き直すためです。

2番目に、我々は main.js の以下の行を変更します:

cc.director.runScene(new HelloWorldScene());

下記のように変更します:

cc.director.runScene(new MenuScene());

ゲームが開始すると、我々は MenuScene を実行させたくなり、それは HelloWorldScene の置き換えを定義したものになります。

最後に、我々は我々のシーンのリソースを追加し、容易なアクセスのために幾つかのリソース変数を定義すべきです。

resource.js を開き、そのコンテンツを以下のように変更して下さい:

var res = {
    helloBG_png : "res/helloBG.png",
    start_n_png : "res/start_n.png",
    start_s_png : "res/start_s.png"
};

var g_resources = [
    //画像
    res.helloBG_png,
    res.start_n_png,
    res.start_s_png
];

あなたの最初のシーンである MenuScene の定義

app.js を開き、MenuLayer の定義を始めて下さい:

var MenuLayer = cc.Layer.extend({
    ctor : function(){
        //1. スーパークラスの ctor 関数の呼び出し
        this._super();
    },
    init:function(){
        //スーパークラスの super 関数の呼び出し
        this._super();

        //2. あなたのゲームキャンバスのスクリーンサイズの取得
        var winsize = cc.director.getWinSize();

        //3. 中心点の計算
        var centerpos = cc.p(winsize.width / 2, winsize.height / 2);

        //4. 背景画像の作成及びスクリーンの中心にその位置を設定
        var spritebg = new cc.Sprite(res.helloBG_png);
        spritebg.setPosition(centerpos);
        this.addChild(spritebg);

        //5.
        cc.MenuItemFont.setFontSize(60);

        //6. メニューの作成及びそれに対する onPlay イベントコールバックの割り当て
        var menuItemPlay = new cc.MenuItemSprite(
            new cc.Sprite(res.start_n_png), // 通常状態の画像
            new cc.Sprite(res.start_s_png), // 選択状態の画像
            this.onPlay, this);
        var menu = new cc.Menu(menuItemPlay);  //7. メニューの作成
        menu.setPosition(centerpos);
        this.addChild(menu);
    },

    onPlay : function(){
        cc.log("==onplay clicked");
    }
});

1から6の全ての詳細を見ていきましょう:

  1. そのスーパークラスの init 関数を呼び出します。
  2. あなたのゲームのスクリーンサイズを取得します。
  3. あなたのスクリーンの中心点を計算し、その中心点は背景画像の中心に使われます。
  4. ファイル名を使って背景画像を作成し、その位置をスクリーンの中心に設定します。それから、スプライトを MenuLayer に子供として追加します。
  5. MenuItemFont の setFontSize 関数をフォントサイズを調整するために呼び出します。この例では使われませんが、もしあなたが MenuItemFont をメニューアイテムを作成するために使いたいなら、それはメニューアイテムのラベルのサイズに影響します。
  6. 2つの画像でメニューを作成し、1つは通常状態のために、もう1つは選択状態のためとなります。それからメニューの位置がスクリーンの中心に設定されます。最後に、メニューが現在のレイヤに追加されます。

我々はまたメニューシーンも定義すべきです:

var MenuScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MenuLayer();
        layer.init();
        this.addChild(layer);
    }
});

MenuScene の作成プロセスは非常の単純です。あなたは cc.Scene から派生した変更を定義しました。あなたは符号拡張を思い出すべきで、それは外部クラスに対して使われます。

シーンが作成されたら、onEnter 関数が定義されるべきです。それは MenuLayer をその子供のように定義します。我々はまた onEnter 関数の代わりに ctor 関数を定義することができます。onEnter 関数は、ctor 関数の後に呼び出されます。

要約

このチュートリアルでは、あなたは Cocos2d-JS ゲームのプログラミングの基礎的な概念を紹介されました。あなたはまたあなたの最初のゲームシーンのセットアップ方法の詳細化された説明も与えられた。我々はあなたが楽しんだことを期待しています!関連するサンプルプロジェクトは、ここからダウンロードできます。それはユーザパートを含むだけで、フレームワークを含みません。あなたはそれらを Cocos2d-JS テンプレートの一致するパートにに置き換えるために使えるでしょう。

ここから進むのは

次の章では、様々なゲームのレイヤでゲームシーンを定義する方法や、これらのレイヤをデザインする方法、そっしてそれぞれのレイヤの責任が何であるかを学びます。

posted by cbbandtqb at 18:32| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

2015年09月19日

Cocos2d-JS > HELLO WORLD OF COCOS2D-JS

原文はこちらです。

このチュートリアルでは、スクラッチからの新しい Cocos2d-JS プロジェクトの設定方法を学びます。我々は Cocos2d-JS のディレクトリ構造の簡単な記述で始めたいと思います。

Cocos2d-JS ディレクトリ構造

ここに Cocos2d-JS のディレクトリ構造があります:

図1

ディレクトリ構造の理解

ディレクトリ構造は、3つのパートに分割することができます:

パート1:フォルダに関連付けられたエンジン

  • frameworks ディレクトリ:Cocos2d-html5 エンジン及び Cocos2d-x JavaScript バインディングをホストします。
    • html5 ディレクトリ:エンジンコアモジュール、オーディオモジュール、外部の物理ライブラリ、CocosBuilder Reader、CocoStudio Reader、その他のモジュールといったような、Cocos2d-html5 の全てのエンジンモジュールを保持します。
    • js-bindings ディレクトリ:Cocos2d-x エンジン、バイディングのプロジェクトファイル、及び、外部の事前にビルドされた SpiderMonkey ライブラリをホストします。エクスポートされた API は JS で書かれており、ベースモジュールは C++ で実装されています。それらは、iOS, android, Mac, win32 などのようなネイティブプラットフォーム上で実行させることができます。

パート2:テスト、サンプルゲーム及びテンプレート

  • template ディレクトリ:新しい Cocos2d-JS プロジェクトを作成するために使われます。それは、HTML5 プロジェクトとネイティブプロジェクトをデフォルトで含みます。それは新しいを作成するために cocos コンソールによって使われます。
  • samples ディレクトリ:Cocos2d-JS の全てのテストを含みます。それはまた、プレー可能なサンプルゲームである MoonWarriors も含みます。テストとゲームの全ては、cocos コンソールによって立ち上げることができ、ウェブもしくはネイティブプラットフォーム上で JavaScript バインディングで実行することができます。

パート3:その他

  • README 幾つかの Cocos2d-JS の紹介を含みます。
  • LICENSE Cocos2d-JS のライセンスは MIT です。Cocos2d-html5 及び Cocos2d-x のライセンスについての更なる詳細を入手するためにエンジンルートフォルダ下の license フォルダを参照できます。
  • tools ディレクトリ:cocos コンソールツールとバインディングジェネレータを含みます。template フォルダは build.xml を含み、それはクロージャコンパイラのためのコンフィグファイルであり、Ant を経由して1つのファイルにあなたのゲームをパッケージできます。
  • build ディレクトリ:ビルトインサンプルのためのプロジェクトファイルを含みます。
  • docs ディレクトリ:JavaScript コーディングスタイルガイド及びリリースノートを含みます。
  • CHANGELOG 全てのバージョンの変更された情報を含みます。
  • setup.py 開発環境セットアップのための python スクリプト

ビルトインされた例の概観

あなたの Cocos2d-JS 開発環境をうまくダウンロードしてコンフィグしたら、ビルトインされた例をざっと見ることを強くお勧めします。これらは Cocos2d-JS の機能の90%以上をカバーします。それはまたあなたが今のところ入手できる最良の学習教材でもあります。

テストの概観

Cocos2d-JS/samples/js-tests ディレクトリに行き、cocos コンソールを使ってテストを実行して下さい。

    cocos run -p web

あなたは全ての Cocos2d-JS のビルトインされたテストを見ることができます。ここにスクリーンショットがあります:

図2

テストはあなたにとって最良の学習教材です。テストは Cocos2d-html5 のほとんど全ての機能を示しています。あなたはこれらのテストファイルをいじることもできるし、あなたがウェブページをリフレッシュすればすぐに結果を見ることになります。Cocos2d-html5 のテイストを味わうには、最初に膨大なドキュメントを読むよりも、この方法の方が良いでしょう。

あなたはまたテストを iOS, Android もしくは Mac 上で実行することができます。

    cocos run -p ios|android|mac

サンプルゲームの概観

Cocos2d-JS に同梱された完全なゲームサンプルがあります。ソースコードの全ては、完全にフリーでオープンです。この章では、サンプルゲームの MoonWarrior を概観していきます。

MoonWarrior

js-moonwariors ディレクトリのルートに移り、cocos コンソールを使って立ち上げて下さい。

    cocos run -p web|ios|android|mac

それは縦スクロールのシューティングゲームです。このゲームサンプルでは、多くの有益なゲームテクニックが適用されており、タイルマップ、アニメーション、パララックスバックグラウンドなどが含まれています。ここにスクリーンショットがあり、より詳しい情報のためにはソースコードに入って行くこともできます:

図3

Parkour プロジェクトのセットアップ

Parkour プロジェクトを作成することにしましょう。このプロジェクトは、楽しい Parkour ゲームになるように、これからのチュートリアルを通して発展させていきます。

プロジェクトのスケルトンの作成

前に述べたように、あなたは新しいプロジェクトを特定の名前で作成することができます。あなたのワークスペースに移動して、以下のコマンドを使って Parkour プロジェクトを作成するために cocos コンソールを使います:

    cocos new Parkour -l js

ここで WebStorm を開き、Parkour ディレクトリを開きます。プロジェクトナビゲータが、以下のように見えるはずです:

図4

WebStorm で index.html を右クリックし、Debug 'index.html' を選びます。Chrome が自動的に(訳注:起動します)。あなたはうまく新規プロジェクトをセットアップしました。おめでとう!ブラウザのアドレスは以下のようになっています:

http://localhost:63342/Parkour/index.html

あなたは、クラシックな Hello World のスクリーンショットを見ておくべきでしょう:

図5

サンプルゲームのテンプレートコードの分析

テンプレートは我々に多くの物事をもたらしますが、我々はまだそれについて何も知りません。

テンプレートプログラムのメインの入り口は何になるのでしょう?それらのファイルはどのようにを構成されているのでしょうか?サンプルアプリにあるそれぞれのファイルは何をするのでしょう?このセクションでは、これらのトピックが説明されていきます。

プロジェクトの全てのファイルの概観

まず最初に、全てのファイルと、以前にも示した図4のディレクトリ構造を見ていきましょう。

図4では、我々は以下を見ることができます:

  • res ディレクトリ。それはあなたのプロジェクトによって必要とされる全てのリソースファイルを含んでいます。現時点では、幾つかのサンプル画像が含まれているだけです。もしあなたが、あなたのゲームのためのメタファイルや、素晴らしいゲームミュージックを追加したければ、それらをこのフォルダに置くべきです。あなたはそれぞれのファイルに適切な名前を選ぶべきです。
  • src フォルダ。それはあなたの実際のゲームロジックの全てを含みます。もしあなたのゲームが数百の JavaScript ソースファイルから構成されているなら、あなたはそれらをサブフォルダを使って小さな塊に構成したくなるかもしれません。現時点では、我々のテンプレートは2つの JavaScript ソースファイルを持っています。app.js ファイルは最初のシーンのコードを含んでいます。resource.js ファイルはリソースのためのグローバル変数を幾つか含んでいます。
  • index.html ファイルは、HTML5 ベースのウェブアプリの入り口です。それは HTML5 コンパチフォーマットです。それは、ビューポイントやフルスクリーンパラメータの設定のような幾つかのメタデータを定義します。
  • project.json ファイルは、我々のプロジェクトのためのコンフィグファイルです。詳細については、project.json を参照して下さい。
  • main.js は、あなたの最初のゲームシーンを作成し、それをブラウザに表示するための場所です。あなたはまた解像度ポリシーを定義し、あなたのリソースをプリロードすることもできます。

これであなたはそれらのファイルとフォルダが何のためのものか分かったので、ソースコードと実行パスを理解できるようにでしょう。

プロジェクトの実行パスの分析

プログラムの実行パスを知ることは非常に重要です。

我々のプロジェクトでは、ゲームはブラウザに index.html からロードされます。それからそれは、frameworks/Cocos2d-html5/CCBoot.js に移されます。このファイルにおいて、project.json ファイルからプロジェクトコンフィグをロードしようとします。

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}

project.json からのこのコード片の中に、engineDir と実行名付けられたオブジェクトのプロパティがあり、それは以下のプログラムの実行パスを決定するためのキーポイントとなります。デフォルトの場合において、我々は engineDir を指定します。

main.js ファイルは、frameworks/Cocos2d-html5/CCBoot.js ファイルに後でロードされ、コンフィグを初期化し、モジュールと我々の project.json ファイルにおける jsList によって指定される全ての JavaScript ファイルをロードします。

プロジェクトの僅かな微調整の実施

我々が実際にリアルなコーディングを実施する前に、幾つかの小さな微調整を行い、我々の手を汚さなければなりません。

あなたのゲームスクリーンの左隅にある FPS の隠蔽

このセクションは、僅かに小さな些細なことかもしれません。我々は、project.json にて showFPS プロパティをに変更することによって、これを達成することができます。

以下にコードがあります:

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : false,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/Cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}

このオブジェクトのプロパティを変更することによって微調整することができる多くの物事があります。以下に、それぞれのプロパティの意図をまとめた表があります:

プロパティ名オプション説明
debugMode0, 1, 2, 3, 4, 5, 60: 全てクローズ 1: 情報レベル 2: 警告レベル3: エラーレベル 4: ウェブページ付きの情報レベル 5: ウェブページ付きの警告レベル 6: ウェブページ付きのエラーレベル
showFPS真または偽FPS 可視化のトグル
id"gameCanvas"frameRate で cocos2d を実行させるための dom 要素
frameRate24以上の正の数値で、通常30から60の間 あなたのゲームのフレームレートに合わせて下さい。
renderMode0, 1, 2RenderMode を選んで下さい:0(デフォルト), 1(Canvas のみ), 2(WebGL のみ)
engineDirあなたのプロジェクトに関連付けられたエンジンディレクトリ エンジンコードのディレクトリを指定して下さい。
modulesエンジンモジュール あなたは modules を使ってあなたのエンジンをカスタマイズすることができます。モジュール名は moduleConfig.json 中にあり、それは frameorks/Cocos2d-html5 ディレクトリのルートに置かれています。
jsListあなたのゲームのソースコードのリスト app.js の後にあなた自身のファイルリストを追加して下さい。

デザインの解像度サイズの変更

現在、Cocos2d-JS は、ウェブブラウザのフルスクリーンをゲームキャンバスとして使います。我々は手動でキャンバスサイズをさらに変更する必要はありません。我々は、我々のゲームを、JavaScript バインディングテクニックを使って iOS 及び Android 上でシームレスに実行させるように解像度サイズを選ぶことについて注意を払う必要があります。我々はデザイン解像度サイズを480*320に変更すべきです。(訳注:あなたの)main.js を開き、cc.game.onStart 関数の中で解像度サイズを480✕320に変更して下さい。

あなたはまた、解像度ポリシーを SHOW_ALL に変更すべきです:

    cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);

もしあなたが、なぜあなたがこのようにすべきか興味があれば、より詳細については Resolution Policy Design for Cocos2d-html5 を参照して下さい。

要約

このチュートリアルでは、我々はディレクトリ構造と、Cocos2d-JS のサンプルゲームだけでなくビルトインされたテストについて話をしてきました。我々はまた、Cocos2d-JS によって提供されるテンプレートに基づいた、我々の最初のプロジェクトも作成しました。最後のパートでは、我々はファイルとテンプレートのコードの構造を見ました。

ここから進むのは?

次のチュートリアルでは、あなたはあなたのゲームのメインメニューのシーンをどのようにセットアップするのかを学びます。我々は Cocos2d-JS で更にコーディングしていきます。

posted by cbbandtqb at 01:02| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。