1. 程式人生 > >cocos2d-x 3.0遊戲實例學習筆記《卡牌塔防》第一步---開始界面&關卡選擇

cocos2d-x 3.0遊戲實例學習筆記《卡牌塔防》第一步---開始界面&關卡選擇

cocos2d-x 版本號 blog evel nbsp 不同 null menuitem obj

/* 說明:

**1.本次遊戲實例是《cocos2d-x遊戲開發之旅》上的最後一個遊戲,這裏用3.0重寫並做下筆記

**2.我也問過木頭本人啦。他說:隨便寫,第一別全然照搬代碼;第二能夠說明是學習筆記---好人技術分享

**3.這裏用cocos2d-x 3.0版本號重寫,非常多地方不同。可是從重寫過程中也非常好的學習了cocos2d-x

*/

***每一步相應的全部代碼以及用到的資源都會打包在最後給出

***為避免代碼過多。每一步的代碼都做了標記--一看就曉得是第幾步實現的避免出錯改不回去(難不成還用Git?)

***能夠依據設計思路(好吧,那名字太高大上。

實際就是這一步要幹啥)先自己實現---cocos2d-x本來就是如此,同樣的功能有很多不同實現方法;先自己折騰是蠻不錯的。

***為了方便移植到手機上,對於每一步都進行編譯android測試;由於非常多時候代碼在win32下能夠,編譯就會出錯,給出的代碼會是測試過後的。

start:先新建一個project

本次筆記內容:

1、效果預覽

2、設計思路&問題註意

3、實現代碼&具體解釋

4、總結&下節預覽

一:效果圖

依照前面的第0步的知識點&設計思路裏面的主設計思路。先完畢MainScene到關卡選擇&編輯界面的處理

技術分享

技術分享

二:設計思路&問題註意

MainScene 載入一個背景, 兩個選擇菜單。

編輯button先無論;

開始button時候,進行關卡選擇GameLvlChooseScene

關卡選擇button也先不實現

-(好吧,這是什麽爛設計思路。。無聊。。。

)可是。這裏我們會遇到一個坐標的小問題--代碼中解釋吧

三:實現代碼+解析

好吧。事實上這麽簡單的代碼。。還是貼上吧

MainScene:

#ifndef __MainScene__H__
#define __MainScene__H__

#include "cocos2d.h"
USING_NS_CC;

class MainScene : public Layer{
public:
	MainScene();
	~MainScene();
	CREATE_FUNC(MainScene);
	virtual bool init();

	static Scene* createScene();

private:
	//**1**選擇菜單
	void chooseMenu();

	//**1**兩個選擇菜單的回調函數
	void editorScene(Ref* pSender);
	void startGame(Ref* pSender);
};/**/

#endif
#include "MainScene.h"

MainScene::MainScene(){
}
MainScene::~MainScene(){
}

Scene* MainScene::createScene(){
	auto scene = Scene::create();

	auto layer = MainScene::create();

	scene->addChild(layer);

	return scene;
}

bool MainScene::init(){
	auto visibleSize = Director::getInstance()->getVisibleSize();
	
	auto BG = Sprite::create("game/MainSceneBG.jpg");
	BG->setPosition(visibleSize.width/2,visibleSize.height/2);
	BG->setOpacity(200); //設置透明度。看起來更像背景->_->
	this->addChild(BG);
	
	chooseMenu();

	return true;
}

void MainScene::chooseMenu(){
	auto visibleSize = Director::getInstance()->getVisibleSize();
	
	const char* norImg = "Button/choose_btn_nor.png";
	const char* lightImg = "Button/choose_btn_light.png";
	
	//**1**---------開始--------------------------------
	auto title = Label::create("Start","Arial",35);
	title->setPosition(ccp(60, 60));
	auto startItem = MenuItemImage::create(norImg, lightImg, CC_CALLBACK_1(MainScene::startGame,this));
	startItem->addChild(title);

	//**1**---------編輯場景----------------------------
    title = Label::create("Editor","Arial",35);
	title->setPosition(ccp(60, 60));
	auto editorItem = MenuItemImage::create(norImg, lightImg, CC_CALLBACK_1(MainScene::editorScene,this));
	editorItem->addChild(title);
	
	//**1**菜單
	auto menu = CCMenu::create(startItem, editorItem, nullptr);
	//**1**依照一列放置
	menu->alignItemsVerticallyWithPadding(20);
	menu->setPosition(ccp(visibleSize.width / 2, visibleSize.height / 2));

	this->addChild(menu);
	
}

void MainScene::startGame(Ref* pSender){
	CCLOG("startGame");
	//auto scene = GameLvlChoose::createScene();
	//Director::getInstance()->replaceScene(scene);
}

void MainScene::editorScene(Ref* pSender){
	CCLOG("EditorScene");
}
沒啥好解釋的。可是註意兩個問題

1、一個小小的坐標問題:chooseMenu 裏面,我們對於一個菜單單項。要加一個Label。也就是在button圖片中加入的Start之類的文字Label,這樣你就知道這個button是幹嘛的啦。

我們須要把Label的位置 放在ccp(60,60)。

why?那是由於我們須要把Label addChild到菜單單項裏面去。son 的放置位置是相對於parent來的。你若不setPosition,那麽默認的就是(0,0)。相對於parent 放在 0,0 位置是個什麽意思呢?看圖:

技術分享

那麽,打開資源圖片,發現button圖片是 130*130的。所以應該把Label放在(60,60)。關於這個問題後面還會用到。須要註意

2、關於Scene和Layer的關系。依照新建的project來看。HelloWorld裏面。是一個Scene裏面放了一個層,它的處理方式是HelloWorld是繼承自Layer,它是一個Layer,僅僅只是,我們在這個層裏,有一個createScene 方法來創建而且返回Scene。 createScene裏面HelloWorld::create();然後調用virtual bool init 函數,創建這個層,增加scene裏面,返回scene;這裏的MainScene比較簡單;也是這麽做的。對於後面有的地方,一個Scene裏面有多個Layer,那麽能夠分離出來

-------------------------------------------------------------------------------------------------

然後我們在AppDelegate.cpp中 改動scene;同一時候這裏先

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLView::create("My Game");
	glview->setFrameSize(800,450);<span style="color:#ff0000;">//------------------Win32下先set----------------------</span>
        director->setOpenGLView(glview);
    }
	
	glview->setDesignResolutionSize(800,450,ResolutionPolicy::SHOW_ALL);//屏幕自適應
    /*..........省略.....................*/
    return true;
}

好吧。到上面一步能夠F5測試,button之後,能夠看到回調對應函數輸出

然後增加關卡選擇Scene

#ifndef __GameLvlChoose__H__
#define __GameLvlChoose__H__

#include "cocos2d.h"
USING_NS_CC;

class GameLvlChoose : public Layer{
public:
	GameLvlChoose();
	~GameLvlChoose();
	virtual bool init();
	CREATE_FUNC(GameLvlChoose);

	static Scene* createScene();

private:
	//--1--在init裏面加入菜單,這裏是回調函數
    void level_1(Ref* pSender);
    void level_2(Ref* pSender);
    void level_3(Ref* pSender);

	//--1--依據不同級別createLabel。菜單標簽
	Label* createLevelLab(const char* sLvl);

	int _level;
};/**/

#endif
.cpp

#include "GameLvlChoose.h"

GameLvlChoose::GameLvlChoose(){
	_level = 1;
}
GameLvlChoose::~GameLvlChoose(){
}

Scene* GameLvlChoose::createScene(){
	Scene* scene = Scene::create();

	auto layer = GameLvlChoose::create();

	scene->addChild(layer);

	return scene;
}

bool GameLvlChoose::init(){
	auto visibleSize = Director::getInstance()->getVisibleSize();
	
	//**1**-------- 創建關卡選則菜單 ------------------------------
	const char* norImg = "Button/choose_btn_nor.png";
	const char* lightImg = "Button/choose_btn_light.png";
	
	//Lv_1
	auto level_1_Item = MenuItemImage::create(norImg, lightImg, CC_CALLBACK_1(GameLvlChoose::level_1,this));
	level_1_Item->addChild(createLevelLab("1"));
	
	//Lv_2
	auto level_2_Item = MenuItemImage::create(norImg, lightImg, CC_CALLBACK_1(GameLvlChoose::level_2,this));
	level_2_Item->addChild(createLevelLab("2"));
	
	//Lv_3
	auto level_3_Item = MenuItemImage::create(norImg, lightImg, CC_CALLBACK_1(GameLvlChoose::level_3,this));
	level_3_Item->addChild(createLevelLab("3"));
	
	//**1**菜單
	auto menu = CCMenu::create(level_1_Item, level_2_Item, level_3_Item, nullptr);
	//**1**依照一行放置
	menu->alignItemsHorizontallyWithPadding(20);
	menu->setPosition(ccp(visibleSize.width / 2, visibleSize.height / 2));

	this->addChild(menu);

	return true;
}

Label* GameLvlChoose::createLevelLab(const char* sLvl) {
	auto level_lab = Label::create(sLvl, "Arial", 60);
	level_lab->setColor(Color3B::RED);
	level_lab->setPosition(ccp(60, 60));

	return level_lab;
}

void GameLvlChoose::level_1(CCObject* pSender) {
	CCLOG("111111");
	_level = 1;
}

void GameLvlChoose::level_2(CCObject* pSender) {
	CCLOG("222222");
	_level = 2;
}

void GameLvlChoose::level_3(CCObject* pSender) {
	CCLOG("333333");
	_level = 3;
}
之後能夠,在MainScene裏面的StartGame函數裏面,切換場景

四:小結&下次預覽

小結:沒啥好說的。。。

下次我們要開始實現編輯Scene啦。我們能夠自由編輯每一級別關卡的怪物行走路線以及能夠放英雄的炮臺位置

------------------------------------------------------

代碼&資源

------------------------------------------------------
個人愚昧觀點。歡迎指正與討論-------

cocos2d-x 3.0遊戲實例學習筆記《卡牌塔防》第一步---開始界面&amp;關卡選擇