Cocos2dx教程专栏(一) 一切从一个游戏菜单开始:

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了Cocos2dx教程专栏(一) 一切从一个游戏菜单开始:，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
学了cocos2dx不久，许多知识还是不是很懂，呵呵，至少cocos2dx的API函数没懂多少。但是这个时候就不要绝望，应该先做一个让自己可以小玩一下的游戏。
这个教程我把cocos2d中自带的打飞机游戏MoonWarriors(月球战士)这个游戏从js版转化为c++版，讲解如何制作一个2D游戏。
一切从一个游戏菜单开始。
（一）环境配置
我简单地说一下配置cocosdx文件:
1.从官网上下载coccs2dx，解压出来就是一个文件
2.下载vs2012
3.下载python,并且配置python环境变量，具体怎么配置参考以下的博文:
（二）创建游戏工程:
接下来要创建一个工程MyMoonWarriors:
1.依次打开cocos2d-x-2.2.2->tools->project-creator
2.在project-creator目录下按住shift+鼠标右键，选择在此处打开命令窗口，输入命令:

python create_project.py -project MyMoonWarriors-package org.MyMoonWarriors.game -language cpp
输入完以后，有如下效果就说明成功了:
这个时候工程文件的位置在cocos2d-x-2.2.2->projects->MyMoonWarriors
好！创建完文件以后就是迈向游戏制作的第一步！！
（三）创建游戏菜单:
1.放置资源文件:
当然，做游戏首先要有大量的图片资源，所以首先我们打开工程文件MyMoonWarriors的所在位置，会发现会如下的文件夹:选中Resources文件夹，把游戏需要的图片等资源都放置在这里
这个资源文件还是蛮难找的，找不到也没有关系，我把它上传了。请读者在这个链接下载资源文件，然后把它拷贝进去:
游戏资源
2.开始写代码：
依次打开MyMoonWarriors->proj.win32->MyMoonWarriors.sln（因为我们是在windows下写代码，所以上面那些 其他文件夹如proj.andorid、proj.ios等等不用管它，后面会慢慢讲）

打开后效果如上，我们要在最后一个写代码（上面那4个都是cocos2dx带的库文件，代码中经常要用到上面的API函数）
3.如何写代码:
打开MyMoonWarriors会发现我们不知如何下手，以前写的控制台程序对开发一个游戏来讲，简直是小巫见大巫，瞬间感觉以前多牛逼都是扯淡了。不过不要担忧，以前学的都是非常有用的。

首先，我们要记住C++面向对象的一个思想：先把功能写成一个个函数或者类，然后在main函数中调用这些功能函数或类等让代码生成程序运行起来！
在写游戏也是这样，我们大部分都是在Classes这个文件夹添加各种游戏类（比如主角，敌人，菜单类，主角管理，敌人管理等等），然后在win32中的main.cpp中调用这些游戏对象来运行
上面的这些经验对一个游戏开发初学者来说，都是十分宝贵的经验。接下来我们开始尝试创建一个游戏菜单，效果如下:
分析一下这个界面效果:很明显，它是一个由背景 logo 菜单项三个部分组成的一个菜单界面...
好，开始写代码:
1.创建一个类StartMenu:
创建方法是在工程文件夹里面创建StartMenu.cpp和StartMenu.h，然后拷贝复制到VS2012中的classes文件夹下(= =疑问来了，为什么不直接在VS2012下直接创建文件？我试过了，如果直接创建，在工程文件夹会显示不出来，所以只能用这样一个稍微复杂的方法，以后创建文件都这样创建)

2.在StartMenu.h中写如下功能类(代码我加了注释了，不懂的可以多看看或者手动度娘一下):
#ifndef __StartMenu_H__
#define __StartMenu_H__

class StartMenu:publiccocos2d::CCLayer
{
public :
staticcocos2d::CCScene *scene();//创建菜单场景
virtualboolinit();//初始化菜单类的成员变量
voidmenuCallback(CCObject *pSender);//回调函数，这个在点击菜单项的时候会用到回调机制，调用该函数
CREATE_FUNC( StartMenu);//这个函数有点麻烦，就暂时当作是一个自动释放内存的函数（很重要，教程一不会用到，后面慢慢讲）
private :

};
#endif // !__StartMenu_H__


//#ifndef __StartMenu_H__，#define __StartMenu_H__关于这个作用无非就是防止头文件的重复包含和编译
2.在写StartMenu.cpp之前 ，我们还要创建一个StdAfx.cpp和StdAfx.h用来把需要包含的类库都放在这个上面，代码很简单
StdAfx.h:
#include "cocos2d.h"//包含cocos2d类库

USING_NS_CC ; //使用cc命名空间


StdAfx.cpp:
@H_502_498@ #include "StdAfx.h"
@H_502_498@ 3.开始写StartMenu.cpp:
@H_502_498@
#include "StdAfx.h"//记住，这个要写在第一个
#include "StartMenu.h"

CCScene * StartMenu::scene()
{
CCScene*scene=CCScene::create();

StartMenu*layer=StartMenu::create();
scene->addChild(layer);

returnscene;
}
bool StartMenu::init()
{
if(!CCLayer::init())
{
returnfalse;
}

CCDirector*pDirector=CCDirector::sharedDirector();//创建一个导演类，用来调用整个场景所需要的变量，比如窗口大小
CCSizewinSize=pDirector->getWinSize();//通过导演类获得窗口的大小

CCSprite*pLoadingImg =CCSprite::create("loading.png");//创建一个精灵类，来存放一张背景图片
pLoadingImg->setPosition( ccp(winSize.width / 2,winSize.height / 2));//图片放在正中央
this->addChild(pLoadingImg);//场景添加图片
returntrue;
}
//1.菜单是一个场景，场景要有一个导演来调度资源的排布
//2.精灵类在cocos2d中很常见，创建一个图片可以用一个精灵类CCSprite
//3.添加图片经常用this->addChild();

4 .接下来可以运行看看效果了，把AppDelegate.cpp中
#include"StartMenu.h"
然后把
bool AppDelegate::applicationDidFinishLaunching()
函数里面的
CCScene *pScene =HelloWorld::scene();改成CCScene*pScene =StartMenu::scene();
点击F5调试运行，可以看到如下效果。成功加载了背景！！
@H_502_498@
@H_502_498@ 接下来继续添加logo和菜单选项了，代码会有点多，但是只有几个知识点，就是菜单类的学习和一些设置图片锚点等等
@H_502_498@
#include "StdAfx.h"
#include "StartMenu.h"
#include "About.h"

CCScene * StartMenu ::scene()
{
CCScene *scene = CCScene ::create();
StartMenu *layer = StartMenu ::create();
scene->addChild(layer);
return scene;
}

// on "init" you need to initialize your instance
bool StartMenu ::init()
{
if ( ! CCLayer ::init() )
{
return false ;
}
CCDirector * pDirector = CCDirector ::sharedDirector();
CCSizewinSize = pDirector->getWinSize();

CCSprite*pLoadingImg =CCSprite::create("loading.png");//用CCSprite创建一张背景图Loading,然后设置它在窗口的摆放位置，然后加进场景里面
pLoadingImg->setPosition( ccp(winSize.width / 2,winSize.height / 2));
this->addChild(pLoadingImg);

//仿照上面的创建一个logo图，设置图片的锚点，一样放进场景里面
CCSprite*plogoImg =CCSprite::create("logo.png");

plogoImg->setAnchorPoint( ccp(0.5,1));

plogoImg->setPosition( ccp(winSize.width / 2,winSize.height-60));
this->addChild(plogoImg);
//创建菜单项的方法可能有点复杂，但是思路很清晰
//1.首先同样用CCSprite创建一个菜单项正常，被点击，不能使用三种状态的图片，后面有个CCRectMake是（0，0）表示从图像的0，0（左上角）
//点开始，（126，33）表示截取一张完整图像中的宽126，高33的部分图像
//这么做有个很简单的原因是做美术的时候总是把多张图放在一起整合成一张图，避免太多的图片资源导致混乱。
//2.接着用CCMenuItemSprite创建一个菜单项，然后把三种不同的状态加进去
//3.后面有个Menu_selector(StartMenu:menuCallback);用来表示菜单项被点击的时候会响应事件（通常是切换场景）
//4.最后要给项设置一个节点标志setTag()，用来识别是哪个菜单项被创建
//这样一个菜单项创建完毕，后面两个菜单项依法炮制创建出来
CCSprite*pNewNormalItemImg =CCSprite::create("menu.png",CCRectMake(0,126,33));
CCSprite*pNewSelectedItemImg =CCSprite::create("menu.png",33,33));
CCSprite*pNewDisabledItemImg =CCSprite::create("menu.png",66,33));
CCMenuItemSprite*pNewItem =CCMenuItemSprite::create(pNewNormalItemImg,pNewSelectedItemImg,pNewDisabledItemImg,this,menu_selector(StartMenu::menuCallback));
pNewItem->setTag(1);

//仿照第一个菜单项创建
CCSprite*pOptionNormalItemImg =CCSprite::create("menu.png",CCRectMake(126,33));
CCSprite*pOptionSelectedItemImg =CCSprite::create("menu.png",33));
CCSprite*pOptionDisabledItemImg =CCSprite::create("menu.png",33));
CCMenuItemSprite*pOptionItem =CCMenuItemSprite::create(pOptionNormalItemImg,pOptionSelectedItemImg,pOptionDisabledItemImg,menu_selector(StartMenu::menuCallback));
pOptionItem->setTag(2);

//仿照第一个菜单项创建
CCSprite*pAboutNormalItemImg =CCSprite::create("menu.png",CCRectMake(252,33));
CCSprite*pAboutSelectedItemImg =CCSprite::create("menu.png",33));
CCSprite*pAboutDisabledItemImg =CCSprite::create("menu.png",33));
CCMenuItemSprite*pAboutItem =CCMenuItemSprite::create(pAboutNormalItemImg,pAboutSelectedItemImg,pAboutDisabledItemImg,menu_selector(StartMenu::menuCallback));
pAboutItem->setTag(3);
//三个菜单项创建完毕之后，就要把它们合并成一个菜单了
//用CCMenu 创建一个菜单把三个菜单项包含进去
//设置每个菜单项之间的距离是30:alignItemsVerticallyWithPadding(20);
CCMenu*pMenu =CCMenu::create(pNewItem,pOptionItem,pAboutItem,NULL);
pMenu->alignItemsVerticallyWithPadding(20);
pMenu->setPosition( ccp(winSize.width / 2,winSize.height/2-60));
addChild(pMenu);
return true ;
}


void StartMenu ::menuCallback(CCObject*pSender)
{
intnTag = ((CCNode*)pSender)->getTag();
switch(nTag)
{
case1:
{
CCLOG("New Click");
}
break;
case2:
{
CCLOG("Option Click");
}
break;
case3:
{
CCLOG("About Click");
CCScene*scene =About::scene();
CCDirector::sharedDirector()->replaceScene(CCTransitionPageTurn::create(1.2,scene,false));
}
break;
}
}
运行一下效果：
5.最后怎么点击一个菜单项就切换进入游戏:
写StartMenu:menuCallback()方法:
我们要实现的是点击New Game选项就进入进入游戏场景:
在此之前要先建立游戏场景类:GameLayer.cpp和GameLayer.h
代码就不贴了 只是设置了一个背景图，读者可以仿照StartMenu菜单类写，贴一下StartMenu:menuCallback()方法:
void StartMenu ::menuCallback(CCObject*pSender)
{
intnTag=((CCNode*)pSender)->getTag();
switch(nTag)
{
case1:
{
CCScene*GameLayerScene=GameLayer::scene();
CCDirector::sharedDirector()->replaceScene(GameLayerScene);
}
break;
case2:
break;
case3:
break;

}
}
运行结果,切换成功



教程一结束：源码下载

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签