cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第一步---開始界面&关卡选择

Posted 2020-09-28 liguangsunls

/* 说明：

**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啦。我们能够自由编辑每一级别关卡的怪物行走路线以及能够放英雄的炮台位置

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

代码&资源

------------------------------------------------------
个人愚昧观点。欢迎指正与讨论-------