cocos2dx基礎篇(3)——第一個程序HelloWorld

【本節內容】

       1、程序的基本組成：CCSprite（精靈）、CCLayer（層）、CCScene（場景）、CCDirector（導演）

       2、分析HelloWorld源碼。

【參考文獻】

http://gl.paea.cn/contents/175b392d0558882c.html

一、基本組成

    cocos2d-x引擎主要有六個部分組成，分別為導演(CCDirector)、攝像機(CCCamera)、場景(CCScene)、布景(CCLayer)、精靈(CCSprite)、以及動作(CCAction)六個部分組成。看到這些名詞，第一反應就是好像在拍戲一樣。是的，就是在拍戲。這就是cocos2d-x想要的結果，讓游戲就像拍戲一樣將游戲建立起來。

（1）CCSprite（精靈）

       精靈其實就是我們說的元素。比如一個游戲里的角色、NPC、怪物、物品等，乃至連隨機掠過的鳥、飄過的風，從理論來說，也是精靈。這個很好理解的。

（2）CCLayer（層）

       層在cocos2dx項目里是精靈以外出現的最多的元素。比如一個游戲，你需要背景層，一個精靈要運動，就要單獨一個層，游戲有暫停的頁面，那就來個暫停頁面的層。層就像是一張透明的玻璃一樣，把他們畫上東西，摞在一起，俯視來看，就是一個完整的游戲了。用過PS的就直接理解成PS里的圖層，和那個基本是異曲同工之處。還是不理解的我畫了個圖示一起來看看。

       這是一個完整的圖片。

       這是一個背景層，它只用來顯示背景。

       這個是一個魚層。

       最后我們把這些層摞在一起。。。就成了一個圖。

       背景圖在第 0 層 ， 第 1 層和第 2 層分別都有一條魚。

（3）CCScene（場景）

       如果我們把層理解為玻璃片，那么場景就是一個箱子，我們把玻璃片放在這個箱子里，去組建游戲。一個游戲會有很多的場景，比如，主界面，游戲界面，載入界面等等都是一個場景。

       由此看出，一個場景包含多個層，一個層可能包含多個精靈。

（4）CCDirector（導演）

       就和現實中的導演一樣，這里的導演也是起到指導的作用的，導演在這里負責的就是讓不同的場景切換pushScene、popScene等，同時它也是游戲的核心，控制整個游戲的流程，包括開始，繼續，暫停等。另外，它還控制著屏幕大小，FPS的顯示和隱藏，游戲的進入和退出，關卡場景的切換，以及獲取正在運行的場景等等。

    注意：一般整個游戲只有唯一的一個導演。

（5）相互之間的關系框架如下圖所示

       導演控制場景，場景控制圖層，圖層控制精靈，精靈控制動作。

    由此看出：

        （1）整個游戲一般只有一個導演。

        （2）一個游戲可以由多個場景組成（菜單界面、游戲界面、游戲結束界面等），但是每次導演只能指導一個場景的運作。

        （3）一個場景可以由多個圖層組成（背景層、道具層、英雄層、怪物層等，每個圖層都可以由多個精靈元素組成（標簽、按鈕、菜單等）。

        （4）對于圖層上的每個精靈元素，一般都附帶相應的動作，可以帶多個動作。如揮刀、使用魔法、跑、跳，以及放大、縮小、旋轉等動作。

二、HelloWorld

       我們打開程序下的MyScene.h文件（這個只是我把HelloWorld的名字改掉了而已），我們可以看到以下內容。

       這里，最上面3行都是在引用文件我們就不多說了。然后我們看到的是類的創建。

       當然，這里的MyLayer是個層類，所以直接繼承cocos2d下的CCLayer方法。

       之后我們去看看MyScene.cpp文件。

       創建靜態的場景。

       初始化函數。

       一般情況下，我們大部分的操作都是在初始化函數init()進行編寫的。

       回調函數，退出程序。

三、代碼中的一些困惑

1、setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));

       這里可能大家會郁悶設置關閉的菜單項，我看的的是在右下角啊，X坐標可以理解，為啥Y是20呢？這里要說明的是cocos2dx的零坐標是左下角，而不是其他軟件常用的左上角。

       另外如果有人細心可能就會發現為啥才20呢？那個圖片大約是40像素啊？

這里還要說明的是，cocos2dx的對象坐標起點就是這個對象的正中心點，就是兩條對角線的交叉點。

2、this->addChild(pMenu, 1);

       前面的能看懂，最后的那個“1”是個啥玩意兒啊？

       這個啊，是層內部的Z 坐標。大家回到教程頭部看看那張運行圖，文字是不是在圖片的上面。

       這就是這個參數的作用，數字越大，就越靠上，文字的是“1” 椰子圖片的是“0”，所以文字在椰子圖片上面。

3、一些函數的用法;

CCSize 屏幕大小; height=320 , width=480

CCPoint 坐標點

getVisibleSize()獲得視口（可視區域）的大小，若是DesignResolutionSize跟屏幕尺寸一樣大，則getVisibleSize便是getWinSize。

getVisibleOrigin()獲得可視區域的出發點坐標，在處理相對位置時，確保節點在不同分辨率下的位置一致。

getWinSize()獲取屏幕尺寸大小。

getContentSize()獲得節點原始的大小。只是邏輯尺寸，不是像素

boundingBox()獲得經過縮放和旋轉之后的外框盒大小。

getContentSizeInPixels()獲得的是像素點大小

P.S.像素點和邏輯點關系：邏輯點大小 = 像素大小/contentScaleFactor.

ccp(x,y)是用來創建坐標的; CCPoint

setPosition()設置坐標位置。