Cocos2d-html5の各種オブジェクトの使い方

Cocos2d-html5ではゲームの構成要素として下記のような階層構造をもっています。
各機能ごとにSceneとLayerを作成し、
その上にゲームを構成するキャラクターやUIをNodeとして重ねていく事でゲームを作成します。

Director

ゲーム１つに対して１個しか存在しない。ゲーム全体の管理を行う。

Scene

メニュー、ゲーム画面、アイテム管理、ランキングなど
ゲームの大枠を構成する要素をSceneを作成し、切り替えて管理する。
またはLevel1,Level2..などステージを作る場合にも
Sceneを作成し、切り替えて作る。

var scene = cc.Scene.create();

Layer

各Sceneに対して作られる薄い膜。
同じSceneに対して役割ごとに複数のレイヤーを作る事が可能。
例えばキャラクターを設置するMapLayerとUIを設置するUILayerなど。

var GameLayer = cc.Layer.extend({});

空のNode

this.mapNode = cc.Node.create();

画像

var ship = cc.Sprite.create("res/hoge.png");

画像を切り抜いて使う

//(x,y)=(50,50)から(幅、高)=(120,120)を切り抜いて使う
this.sprite = cc.Sprite.create("hoge.png",cc.rect(50 ,50 ,120, 120));

テキスト

var text = cc.LabelTTF.create("aaa","Arial",20);

var drawnode = cc.DrawNode.create();
this.addChild(drawnode);
drawnode.drawDot( cc.p(100,100), 90, cc.c4f( 1, 0, 0, 1) );

矩形

var rectBase = cc.LayerColor.create(cc.c4b(0,0,0,255),100,100);

スプライトアニメーション

texturePacker素材をCocos2d-html5で動作させる
http://d.hatena.ne.jp/oggata/20140327/1395896104

ボタン

//create buttons
var cancelButton = cc.MenuItemImage.create(
    s_CancelButtonNormal,
    s_CancelButtonSelected,
    this.menuTapped,this);
buttonItem.setTag(0);
buttonItem.setPosition(100,100);

var startButton = cc.MenuItemImage.create(
    s_StartButtonNormal,
    s_StartButtonSelected,
    this.menuTapped,this);
buttonItem.setTag(1);
buttonItem.setPosition(200,100);

this.menu = cc.Menu.create(cancelButton,startButton);
this.addChild(this.menu);

//create tapped function
menuTapped:function(sender){
    switch(sender.getTag()){
        case 0:
            cc.log("cancel button pressed");
            break;
        case 1:
            cc.log("start button pressed");
            break;
    }
}