cocos2dx第一个游戏项目helloworld（一）

一：创建游戏项目。选择计算机菜单栏中的“运行”，输入cmd打开命令行，进入cocos2dx引擎安装的bin目录下，并将下图的这个名为cocos的文件拖入命令行中。

 

 

      拖入命令行后在其后添加代码:new helloworld -p com.css.helloworld -l cpp -d F:\cocosProjects 然后回车效果如图：

 

 

      执行至此，说明第一个项目helloworld创建完毕。new helloworld -p com.css.helloworld -l cpp -d F:\cocosProjects 这句代码的含义是 new + 项目名 -p(p是package的意思，表示包名) +包名 -l (l是language的意思，表示helloworld项目的编程语言是C++即CPP) +编程语言（cocos2dx可选3种：cpp,lua,js）-d(d表示directory目录的意思)+项目保存目录。

现在，找到项目保存目录，双击进入helloworld，先删除一些暂时用不到的文件夹。留下如下目录，然后双击win32文件夹，使用visual studio 2013或以上版本打开helloworld.sln文件：

 

 

二：运行项目。打开文件后，点击本地调试器运行，若出现对话框，则选择“是”。

      如果是第一次运行，此过程会比较缓慢，可以先泡杯茶，磕磕瓜子等。因为第一次需要编译cocos2dx引擎的源代码。出现下图，说明运行成功。

       第一个游戏项目运行成功！兴奋吧？笔者第一次看到它，也是非常的兴奋。在右下角有个关闭按钮，点击则游戏窗体会退出。除此之外，此项目没有任何的可交互性了。这就是“简单”的helloworld。

三：简析helloworld。找到helloworldScene.cpp文件，双击打开：

      找到helloworldScene.cpp的init函数。笔者去掉了较多的绿色注释，整理后的代码如下：

1. bool HelloWorld::init()

2. {

3. if ( !Scene::init() )

4. {

5. return false;

6. }

7. auto visibleSize = Director::getInstance()->getVisibleSize();

8. Vec2 origin = Director::getInstance()->getVisibleOrigin();

9. auto closeItem = MenuItemImage::create(

10. "CloseNormal.png",

11. "CloseSelected.png",

12. CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

13.  

14. closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,

15. origin.y + closeItem->getContentSize().height/2));

16. auto menu = Menu::create(closeItem, NULL);

17. menu->setPosition(Vec2::ZERO);

18. this->addChild(menu, 1);

19. auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);

20. label->setPosition(Vec2(origin.x + visibleSize.width/2,

21. origin.y + visibleSize.height - label->getContentSize().height));

22. this->addChild(label, 1);

23. auto sprite = Sprite::create("HelloWorld.png");

24. sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

25. this->addChild(sprite, 0);

26. return true;

27. }

      先从较为简单的开始讲解。找到这行代码：auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);这句代码创建了一个label，label可以用来显示文字。解释一下此行代码里createWithTTF的三个参数："Hello World"就是显示的内容，读者可以修改为其他内容（不要直接写中文，否则会乱码，有时间笔者会写一篇关于乱码处理）"fonts/Marker Felt.ttf"这句是控制文字格式，后面的24控制显示的文字大小。

 

       在auto label = Label::createWithTTF的下方有一句：label->setPosition()，它是用来控制label的位置的函数。我们可以看到setPosition接受一个Vec2类型的对象，它就是一个点，由X坐标与Y坐标组成。

       此处的X坐标为：origin.x + visibleSize.width/2。

       Y坐标为：origin.y + visibleSize.height - label->getContentSize().height。

我们可以看到Hello World位置在正中间的较上方的位置。visibleSize.width是可见视野的宽度，它的一半，自然就是最中间了（细心的读者可以发现visibleSize是通过Director::getInstance()->getVisibleSize()的方法获取的，没错）。

 

       而label->getContentSize()会返回label的大小，height属性代表它的高度。于是乎：

visibleSize.height - label->getContentSize().height相当于“可见视野高度”-“label的高度”，那自然刚刚好把label内容完全（紧贴地）显示在最上方了。有人问，笔者你是不是省略了origin的解释，好吧，我再叨叨下。

Director::getInstance()->getVisibleOrigin()返回的是一个Vec2对象，而它的X坐标和Y坐标都是0（可自行打断点跟踪），于是就对label的位置没什么影响了。

 

       再来看setPosition()下面这句代码this->addChild(label, 1)，这句代码相当于把label加进游戏里，我们当然要加进游戏里，不然单单创建一个label有啥用484？后面的参数1代表绘制层级，层级高的会遮挡层级低的。

 

       我们再回到前面一点，看看这句代码auto closeItem = MenuItemImage::create()。它创建了一个菜单项，笔者来为大家解释下参数："CloseNormal.png"是菜单项正常情况下，显示的图片；"CloseSelected.png"是菜单项按下情况下，显示的图片；CC_CALLBACK_1(HelloWorld::menuCloseCallback, this)里面的menuCloseCallback函数是一个“回调函数”，在菜单项被按下之后，将会调用这个函数。第一次听到“回调函数”的读者也许会感到困惑，

其实“回调函数”相比普通的函数区别仅在于，它不会马上被调用，需要在某种情况下被触发。比如我们按下菜单的时候。CC_CALLBACK_1是一个宏定义，绑定了是哪个回调函数：HelloWorld::menuCloseCallback和“它的归属”是“this”也就是HelloWorld指针本身。

 

       对项目不熟悉的读者，也许找"CloseNormal.png"这张图片需要时间。它就在resource目录下：

 

 

       读者可以把自己的图片复制到这个目录，然后把auto closeItem = MenuItemImage::create()里面的图片替换成自己的图片名字，感受一下菜单项的变化。closeItem->setPosition在讲述label的时候讲过，大家意会即可。不过这里的情况特殊和label有一点点区别，笔者以后也许会讲区别在哪，目前它不影响我们理解。

 

       再来看看下面的auto menu = Menu::create()，这句代码创建了一个菜单，有菜单项当然要有菜单，因为一个菜单可以有很多菜单项嘛，菜单项需要依赖菜单而存在，因此closeItem被作为Menu::create()的参数了。

Menu::create()可以有多个菜单项，每个参数用逗号隔开即可，注意在最后需要加个"NULL"，为什么呢？这和

C++里面的“可变参数”有关系，有兴趣的可以自行百度，笔者暂不解释，大家记住即可。

然后就是熟悉的menu->setPosition(Vec2::ZERO);设置菜单位置，this->addChild(menu, 1);把创建好的菜单

添加进游戏里面去。

 

最后，再找到这句代码auto sprite = Sprite::create("HelloWorld.png");它创建了一个精灵，读者可以把精灵

理解成图片，读者可以试试把"HelloWorld.png"改成自己的图片名。

后面的sprite->setPosition()和this->addChild(sprite, 0);笔者就不重复解释了。这篇先介绍这么多，若笔者会

抽空写下一篇cocos2dx第一个游戏项目helloworld（二）会继续讲一些HelloWorld项目的内容。