基礎的cocos2d-x概念
cocos2d-x的核心概念包括Scene,Sprite,Menu以及Action對象。
讓我們看看下面這幅圖：
這張圖雖然簡單卻包含了一個遊戲中的大部分元素。
我們能夠看到圖片(Sprites)，文字(Labels)，以及菜單(Menu）。
Director
我們在使用cocos2d-x的API的時候，會經常與一個叫做Director的類打交道。我們可以把它看作電影裏的導演，而我們就是製片人，讓它做啥就做啥。我們經常會用這個類來完成場景的切換，他是一個單例類，所以我們能夠在任何地方非常方便的使用他。
這是典型的遊戲流程圖，我們用Director來控制整個流程。
Scene
在我們的遊戲中會有很多個場景，比如主菜單界面，選擇關卡界面，遊戲界面等，那麼我們用什麼東西來將他們分別組織好呢，答案就是Scene類了。想想看我們的常玩的遊戲中是不是都有很多場景呢？
Scene Graph
我們用一種叫做Scene Graph的數據結構來組織我們的場景。Scene Graph用樹這種數據結構來管理我們的Node對象。
聽起來貌似是什麼難以理解的東西。可能您會問既然cocos2d-x已經爲我們處理了所有的繁重的工作，爲毛我還要理解這個技術的細節？因爲這會讓我們對場景中
的物體是如何顯示出來的有一個清晰的認識。
一旦我們在遊戲中添加node,sprite或者aniamtion的時候，我們當然希望他能夠直接顯示出來，以便我們確認我們確實是正確添加了我們需要的對象。不過有時候，我們添加的對象並不一定會顯示出來，他們有可能會被場景中的其他的物體遮住了。那要怎麼調整才能看到我們添加的東西呢？
這個Scene Graph是一種樹形結構，那麼我們是按照一種什麼樣的順序去遍歷這棵樹上的節點的呢？我們使用中序遍歷的方式來遍歷的，具體的順序如下圖：
我們從虛線的方塊那頭開始，直到箭頭的那頭。順序靠前的節點先渲染，順序靠後的節點後渲染，也就是說，後渲染的物體會遮住先渲染的物體。在實際使用API的過程中，我們會使用一個叫做z-order的變量來控制渲染的先後順序，z-order值越小則越先被渲染。
比如：我們可以將上面的那個場景分成若干個對象，如下：
start game的開始遊戲菜單最先顯示，然後是3個小怪，然後是那個水平臺，最後是遊戲的logo。
在實際的API使用過程中，我們通常會使用一個叫做addChild()的API來構造我們的scene graph。
在c++代碼中：
scene->addChild(title_node, -2);在js代碼中：
scene.addChild(title_node, -2);第一個參數是我們要添加到scene graph中的對象，第二個參數就是我們設定的z-order數值。
Sprite
所有的遊戲都是有sprite的，那麼什麼是Sprite呢？通常他會是一張圖片。當然你可能會將所有的圖片都認爲是sprite，但是隻有動的圖片才能是sprite，不動的只能算是一個node。
像下面這張圖說明的那樣：
通常我們用如下的方式來使用一個Sprite：
c++
// This is how to create a sprite
auto mySprite = Sprite::create("mysprite.png");
// this is how to change the properties of the sprite
mySprite->setPosition(Vec2(500, 0));
mySprite->setRotation(40);
mySprite->setScale(2.0); // sets both the scale of the X and Y axis uniformly
mySprite->setAnchorPoint(Vec2(0, 0));js
// This is how to create a sprite
var mySprite = new cc.Sprite(res.mySprite_png);
// this is how to change the properties of the sprite
mySprite.setPosition(cc._p(500, 0));
mySprite.setRotation(40);
mySprite.setScale(2.0); // sets both the scale of the X and Y axis uniformly
mySprite.setAnchorPoint(cc._p(0, 0));我們用create函數來創建一個sprite，然後用setPosition()來設定他的位置，用setRotation()來設定他的旋轉角度，用setScale()來設定他的縮放，用setAnchorPoint()來設定他的錨點。
啥是錨點呢，錨點就是設定sprite位置時的參考點，設置縮放時的縮放中心點，設置旋轉時的旋轉中心點。如圖：
如果錨點的值爲(0,0)說明我們將Sprite的左下角作爲設定位置的基準點，而(1,1)則是將sprite的右上角作爲設定位置時的基準點。這三張圖其實向setPosition()傳入的都是一樣的值，只是sprite的錨點不同，所以就有了不同的表現。
Action
爲了讓sprite動起來， 我們還得爲他加上Action這種對象纔行。
c++
auto mySprite = Sprite::create("Blue_Front1.png");
// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
auto moveBy = MoveBy::create(2, Vec2(50,10));
mySprite->runAction(moveBy);
// Move a sprite to a specific location over 2 seconds.
auto moveTo = MoveTo::create(2, Vec2(50,10));
mySprite->runAction(moveTo);js
var mySprite = new cc.Sprite(res.mySprite_png);
// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
var moveBy = new cc.MoveBy(2, cc._p(50,10));
mySprite.runAction(moveBy);
// Move a sprite to a specific location over 2 seconds.
var moveTo = new cc.MoveTo(2, cc._p(50,10));
mySprite.runAction(moveTo);這裏有兩種類型的action，一種是moveTo另一種是moveBy。moveTo的意思是讓我們的sprite移動到moveTo設定的位置，而moveBy的可以讓我們移動moveBy中設定的x的距離和y的距離。
Squences and Spawns
這兩個類，前者讓我們的action按順序執行，後者會融合我們的action，讓他們一通執行。
c++
auto mySprite = Node::create();
// move to point 50,10 over 2 seconds
auto moveTo1 = MoveTo::create(2, Vec2(50,10));
// move from current position by 100,10 over 2 seconds
auto moveBy1 = MoveBy::create(2, Vec2(100,10));
// move to point 150,10 over 2 seconds
auto moveTo2 = MoveTo::create(2, Vec2(150,10));
// create a delay
auto delay = DelayTime::create(1);js
var mySprite = new cc.Node();
// move to point 50,10 over 2 seconds
var moveTo1 = new cc.MoveTo(2, cc._p(50,10));
// move from current position by 100,10 over 2 seconds
var moveBy1 = new cc.MoveBy(2, cc._p(100,10));
// move to point 150,10 over 2 seconds
var moveTo2 = new cc.MoveTo(2, cc._p(150,10));
// create a delay
var delay = new cc.DelayTime(1);Parent Child Relationship
如果一個物體是另一個物體的子物體，那麼父物體的運動會影響子物體的運動，反之，子物體的運動並不會影響父物體的運動，而這種父子關係是通過addChild建立起來的。
如圖，白色和灰色的怪物是藍色怪物的子物體，我們使用setRotation()來改變藍色怪物的角度，那麼就會變成下面這樣。
