注：那個(gè)，秉著敬業(yè)愛業(yè)的精神，代碼我會(huì)盡量解釋清楚和一些路上撿的心得體會(huì)外加一堆廢話(這段也是廢話!!!)。如果沒有解釋的，那是我也沒看懂，(╯3╰)，百度去吧。倒是感覺這代碼注釋過多也是影響了代碼的可見度，so如有影響，直接參照源代碼。(這尼瑪HelloWorld也要注釋？額~~請(qǐng)輕噴)

一、材料準(zhǔn)備
http://download.csdn.net/detail/dyyaries/6014343
這個(gè)是我在百度的時(shí)候找到的素材，微信飛機(jī)大戰(zhàn)。百度真方便！！！真心慷慨，這不是做廣告！嘿嘿，別動(dòng)手，別~~~。
因?yàn)檫@個(gè)游戲比較簡(jiǎn)單，適合新手練手，所以拿他來開刀是再好不過了。當(dāng)然里面許多素材是不需要的，實(shí)現(xiàn)基本的游戲邏輯只需要幾張圖片就夠了，用到哪些后面有提及。
打開項(xiàng)目文件夾，把需要用到的游戲圖片資源導(dǎo)入游戲項(xiàng)目根目錄下的Resourse文件夾中。注：游戲里要用到的資源是默認(rèn)從這里開始為根目錄去讀取的，比如Resourse下有一張simple.png的圖片，到時(shí)候可以在項(xiàng)目中直接讀取資源路徑”simple.png”即可。
二、 屏幕大小調(diào)節(jié)
下面就需要我們調(diào)戲，啊不是調(diào)試和編寫我們的代碼了。
先打開vs2012，這個(gè)是我當(dāng)前的IDE，依次點(diǎn)擊文件->打開->項(xiàng)目/解決方案，打開游戲項(xiàng)目的proj.win32下的planegame.sln即可以導(dǎo)入游戲項(xiàng)目到vs 2012中。
打飛機(jī)當(dāng)然是豎屏了才有感覺，在AppDelagate那里修改下窗口的屬性，調(diào)整游戲窗口的大小。
打開src目錄下的AppDelegate，src目錄是我們游戲代碼存放的地方，在applicationDidFinishLaunching()的如下位置添加如下代碼
glview = GLViewImpl::create(“飛機(jī)大戰(zhàn)”); //這里是修改后的窗口左上角顯示的標(biāo)題

glview->setFrameSize(480,800); //添加的代碼 director->setOpenGLView(glview);

現(xiàn)在可以跑下看看窗口改變的效果。
三、 背景圖片與滾動(dòng)
打開HelloWorldScene.cpp。
以下段落可以略過。
注意，這個(gè)是我們游戲的第一個(gè)場(chǎng)景，Cocos2d引擎幫我們封裝了許多邏輯，以至于我們只需關(guān)注我們的游戲場(chǎng)景和處理邏輯。其實(shí)游戲的開始是從win32下的main.cpp里面的APIENTRY _tWinMain方法開始，這是個(gè)宏，其實(shí)就是c++語言的main方法，他定義了AppDelegate的一個(gè)對(duì)象，隨后他會(huì)初始化AppDelegate的父類Application然后把他本身的指針給了父類的一個(gè)父類自身變量，這樣做的目的是為了隨后調(diào)用AppDelegate的applicationDidFinishLaunching()方法，這個(gè)是我們可以接觸到用來初始化游戲窗口初始化導(dǎo)演類，還有初始化我們的第一個(gè)場(chǎng)景HelloWorld。最后main方法執(zhí)行到了Application::getInstance()->run()，這里面封裝的是我們游戲的循環(huán)和渲染等等邏輯。這時(shí)候我們的游戲已經(jīng)跑起來了。這個(gè)就是簡(jiǎn)單的游戲啟動(dòng)過程。更加深層的代碼有興趣可以去研究研究源碼，這也是開源帶來的好處。
打開HelloWorldScene.cpp，刪除原有的創(chuàng)建菜單和背景的代碼，再添加如下代碼：

//背景精靈auto bg1 = Sprite::create("background.png");

//注意，Vec2是cocos2d的數(shù)據(jù)結(jié)構(gòu)，里面包含兩個(gè)float型的數(shù)據(jù)，分別用來表示x軸和y軸。
//setPosition是設(shè)置精靈的相對(duì)屏幕的位置（也就是世界坐標(biāo)）。當(dāng)前這兩個(gè)參數(shù)表示設(shè)置精靈在屏幕的寬度一半，高度為零的位置，即屏幕最下方的中間位置。cocos2d是以O(shè)penGl的坐標(biāo)的右手坐標(biāo)為標(biāo)準(zhǔn)，屏幕的左下方為原點(diǎn)。visibleSize.width和height是屏幕的寬高，
bg1->setPosition(Vec2(origin.x + visibleSize.width/2,0));
//注意這里的錨點(diǎn)設(shè)置，為了圖片永遠(yuǎn)在屏幕中間，x軸必須設(shè)置為0.5，其中的意思就是這個(gè)精靈向左移動(dòng)精靈的一半寬度，y軸則是向下
bg1->setAnchorPoint(Vec2(0.5,0));
bg1->setTag(101); //設(shè)置Tag，以后可以通過這個(gè)標(biāo)簽找到這個(gè)精靈，以便對(duì)這個(gè)精靈進(jìn)行操作。
this->addChild(bg1,0); //將背景精靈添加到層中。可以認(rèn)為是當(dāng)前的屏幕。其中的0是設(shè)置可見優(yōu)先權(quán)，數(shù)值越小優(yōu)先權(quán)越小，即當(dāng)如果有其他的精靈的優(yōu)先權(quán)比他大時(shí)，他會(huì)被遮擋住的。

//第二張背景圖，是跟在第一張的上面，無縫連接，兩張圖形成不間斷的地圖滾動(dòng) ,getContentSize是獲取精靈的size其中有它的寬度和高度。

auto bg2 = Sprite::create("background.png"); bg2->setPosition(Vec2(origin.x + visibleSize.width/2, bg1->getPositionY()+bg1->getContentSize().height)); bg2->setAnchorPoint(Vec2(0.5,0)); bg2->setTag(102); this->addChild(bg2,0);

為什么有兩個(gè)一樣的背景精靈呢？這個(gè)是為了滾動(dòng)地圖設(shè)定的。
先在HelloWorldScene.h文件中聲明定時(shí)器的回調(diào)方法。添加如下代碼:
void backgroundMove(float f); //定時(shí)器回調(diào)的背景滾動(dòng)方法
然后在HelloWorldScene.cpp中定義他。

void HelloWorld::backgroundMove(float f) //背景滾動(dòng)的回調(diào)方法 {//背景滾動(dòng)邏輯auto bg1 = this->getChildByTag(101);auto bg2 = this->getChildByTag(102);//當(dāng)?shù)诙垐D片退出屏幕時(shí)，把第一張圖片設(shè)置到屏幕中，由于我的背景圖片的高度是大于屏幕的高度的，所以判斷邏輯要復(fù)雜點(diǎn)if(bg2 -> getPositionY() + bg2->getContentSize().height <= Director::getInstance()->getVisibleSize().height){bg1->setPositionY(-bg1->getContentSize().height + Director::getInstance()->getVisibleSize().height);}bg1->setPositionY(bg1->getPositionY()-3);bg2->setPositionY(bg1->getPositionY()+bg1->getContentSize().height); }

背景滾動(dòng)邏輯第一次接觸也是件麻煩事，下面一張圖告訴你。下面的圖表示的邏輯也是上面的回調(diào)方法的實(shí)現(xiàn)。

游戲一開始是①狀態(tài)，定時(shí)器會(huì)不斷得修改背景精靈一和背景精靈二的坐標(biāo)，當(dāng)兩者的坐標(biāo)到達(dá)②的狀態(tài)時(shí)，修改兩者的坐標(biāo)到③狀態(tài)，其實(shí)也就是回到了游戲剛開始的狀態(tài)①，然后就是你看到的無限背景滾動(dòng)的效果了。注意背景圖片的高度比屏幕小時(shí)兩張圖片就不足以做到以上效果了，該如何做呢，自己斟酌斟酌。不過這里的邏輯容易想清楚，但是其中的坐標(biāo)計(jì)算也不是件頭疼的事。
最后，啟動(dòng)定時(shí)器，在添加兩個(gè)背景精靈下面添加如下代碼：
//背景滾動(dòng)的定時(shí)器,0.01執(zhí)行一次傳入的函數(shù)
this->schedule(schedule_selector(HelloWorld::backgroundMove),0.01); 這里寫代碼片
好，背景滾動(dòng)大功告成。跑一下看看效果如何吧。
四、 游戲菜單項(xiàng)
現(xiàn)在這個(gè)項(xiàng)目還比較簡(jiǎn)單，只有簡(jiǎn)單的開始游戲、退出游戲這兩個(gè)選項(xiàng)，玩過游戲的都知道還有游戲設(shè)置啊、關(guān)于啊幫助啊這些。
首先在HelloWorldScene.h中聲明兩個(gè)回調(diào)方法，這兩個(gè)方法是在點(diǎn)擊兩菜單項(xiàng)時(shí)觸發(fā)的函數(shù)。
添加如下代碼：

// 菜單項(xiàng)的回調(diào)方法void menuCloseCallback(cocos2d::Ref* pSender); //這個(gè)是系統(tǒng)默認(rèn)寫好的下面的才是新添加的。void menuStartCallback(cocos2d::Ref* pSender); //參數(shù)什么的先不用去了解，循規(guī)蹈矩再去創(chuàng)新。

創(chuàng)建如下的菜單項(xiàng)：
//這個(gè)是開始游戲菜單項(xiàng)，其中的”game_start.png”, “game_start2.png”是讀取本地資源，作為未點(diǎn)擊前和點(diǎn)擊之后的顯示圖片。
// HelloWorld::menuStartCallback是他的回調(diào)函數(shù)，即點(diǎn)擊這個(gè)菜單項(xiàng)的時(shí)候會(huì)執(zhí)行該函數(shù)

auto startItem = MenuItemImage::create( "game_start.png", "game_start2.png", CC_CALLBACK_1(HelloWorld::menuStartCallback, this)); startItem->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y)); //這個(gè)是結(jié)束游戲菜單項(xiàng)auto closeItem = MenuItemImage::create( "game_exit.png", "game_exit2.png",CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));closeItem->setPosition(Vec2(origin.x + visibleSize.width/2 ,visibleSize.height/2 + origin.y - startItem->getContentSize().height));//把菜單項(xiàng)添加到菜單精靈中auto menu = Menu::create(startItem,closeItem, NULL);menu->setPosition(Vec2::ZERO);//把菜單精靈添加到當(dāng)前的層中this->addChild(menu,1);

下面是回調(diào)函數(shù)的實(shí)現(xiàn)
結(jié)束游戲的回調(diào)函數(shù)就直接調(diào)用創(chuàng)建時(shí)默認(rèn)生成的。

void HelloWorld::menuStartCallback(Ref* pSender) {//開始游戲 }

好，菜單項(xiàng)搞定，編譯運(yùn)行下，是不是發(fā)現(xiàn)有兩個(gè)菜單項(xiàng)在屏幕中間了！！！點(diǎn)擊退出還可以退出游戲。不過開始游戲邏輯還沒寫。呵呵，小有成就是吧。好我們繼續(xù)。
五、蠢蠢欲動(dòng)的飛機(jī)
為了體現(xiàn)出我們的飛機(jī)饑渴難耐啊不，是迫不及待想直搗敵人基地的雄姿，我們給他一個(gè)動(dòng)畫展示，展示它飛翔的雄姿。
添加如下代碼：

//添加飛機(jī)auto plane = Sprite::create("hero1.png");plane->setPosition(visibleSize.width/2+origin.x,200);this->addChild(plane);

//飛機(jī)添加幀動(dòng)畫，添加格式如下，別問我為什么，呵呵。
Animation * animation = Animation::create();
//本來是通過一張緩存圖片去獲取的，這樣性能比較好。不過方便起見，so~~~。
//其中的Rect(0,0,102,126)聰明人都可以看出是讀取圖片資源的矩形區(qū)域的紋理。什么？你看不懂？呵呵。什么？紋理是什么？呵呵。

SpriteFrame * spriteFrame1 = SpriteFrame::create("hero1.png",Rect(0,0,102,126)); SpriteFrame * spriteFrame2 = SpriteFrame::create("hero2.png",Rect(0,0,102,126)); animation->addSpriteFrame(spriteFrame1);animation->addSpriteFrame(spriteFrame2);animation->setDelayPerUnit(0.15f); //兩張圖片交互播放的間隔Animate * animate = Animate::create(animation);plane->runAction(RepeatForever::create(animate)); //開始執(zhí)行動(dòng)畫

動(dòng)畫的執(zhí)行是以精靈為單位，即可以為精靈添加動(dòng)畫，創(chuàng)建完動(dòng)畫，只要讓精靈執(zhí)行這個(gè)動(dòng)作即可。如果執(zhí)行完畢后，必須使用下面代碼移除動(dòng)畫
sprite->stopAllActions(); //停止所有動(dòng)畫，應(yīng)該是清除了動(dòng)畫的內(nèi)存。
Animate 是繼承了Ref，所以的他的內(nèi)存的cocos2d框架自動(dòng)回收的，我們不用自動(dòng)釋放他。但是如果不需要時(shí)也要手動(dòng)停止它。因?yàn)槲覀儺?dāng)前的飛機(jī)精靈動(dòng)畫是在當(dāng)前場(chǎng)景無限存活，不需手動(dòng)停止它，當(dāng)我們切換到開始游戲啟動(dòng)另一個(gè)場(chǎng)景時(shí)，它會(huì)自動(dòng)清除內(nèi)存，吧。為什么這么沒自信，這是我猜的。嘿嘿，別沖動(dòng)別沖動(dòng)，有話好好說。

ok，飛機(jī)動(dòng)畫創(chuàng)建成功，啟動(dòng)運(yùn)行一下吧。是不是看到小飛機(jī)的飛翔在天空中的雄姿了？？？

2-6 最終界面
如圖：

素材：素材
源碼：源碼1

總結(jié)

以上是生活随笔為你收集整理的Cocos2d-x 3.x学习笔记：猩先生带你打飞机(二)素材准备与游戏菜单场景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。