用一个简单游戏的制作教程,让你能从头到尾的了解一下,怎么样为你的smart phone去制作一个2d游戏。

安装 Cocos2d-x

Cocos2d-x 3.x配备的新的安装程序,所以入门从未如此简单!!!

只需要下载最新的cocos2d-x安装程序(3.4版本或者其他版本),在终端输入python setup.py将cocos添加到环境变量

setup

脚本运行后你需要重启下你的终端或者设备以使配置生效。

Hello World

首先让我们先创建一个简单的Hello World项目。

打开终端切换到你打算放置项目的目录,然后输入 cocos new,你将获得如下提示:

new

根据提示信息输入cocos new -p com.wangshaui.helloworld -l cpp HelloWorld,获得如下信息则表示创建成功

create

运行已创建完成的项目,将得到以下效果

run

点击左下角的按钮将退出游戏。在本教程中,你将和Cocos2d-x 一起见证奇迹。

忍者登场!

在忍者登场之前,你将需要做一些美术工作...

第一步,下载这个项目的资源包。解压这个文件,并且将资源文件放在Resource文件夹中

第二步,打开HelloWorldScene.cpp。记住,这里的代码是用来显示上图所示场景的,并且这将成为一个建立游戏的好地方。在你修改它之前,先好好看看这部分实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    boolHelloWorld::init()
    {
    //////////////////////////////
    // 1. super init first
    if( !Layer::init() )
    {
        returnfalse;
    }
 
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
 
    /////////////////////////////
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.
 
    // add a "close" icon to exit the progress. it's an autorelease object
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback,this));
 
    closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));
 
    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
 
    /////////////////////////////
    // 3. add your codes below...
 
    // add a label shows "Hello World"
    // create and initialize a label
 
    auto label = Label::createWithTTF("Hello World","fonts/Marker Felt.ttf", 24);
 
    // position the label on the center of the screen
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));
 
    // add the label as a child to this layer
    this->addChild(label, 1);
 
    // add "HelloWorld" splash screen"
    auto sprite = Sprite::create("HelloWorld.png");
 
    // position the sprite on the center of the screen
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
 
    // add the sprite as a child to this layer
    this->addChild(sprite, 0);
 
    returntrue;
}

如果要添加一个忍者到场景中,你认为该怎么做。

你认为你该怎么做?这里有一些提示:

  • 在你不久前添加进项目中的ResourcePack中找到忍者的图片。
  • 你仅仅只需要修改一行代码!!

解决方法

在HelloWorldScene.h中加入一个私有变量,代码如下:

1
Sprite* _player;

在HelloWorldScene.cpp中加入如下代码:

1
2
3
_player = Sprite::create("player-hd.png");
_player->setPosition(visibleSize.width/8,visibleSize.height/2);
this->addChild(_player);

让我们看看这个忍者在不打怪兽的时候会做些什么,构建并运行项目。

player

然而,忍者用他一生去训练就是为了战斗!所以接下来你将要添加一些怪兽去挑战忍者!

一个凶猛的怪兽出现了

接下来你想在你的场景中加入一些怪兽。对于一个有经验的忍者来说,一个静止的怪兽是没有挑战的,所以要做一点有趣的事情,那就是让这些怪兽动起来。你将要创造一个怪兽让它略微向右偏离屏幕,并且为他们建立一个Aciton,告诉他们要从右边移动到左边。

将下面的代码加入到HelloWorldScene.cpp中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
voidHelloWorld::addMonster(floatdt)
{
//1
Size visibleSize = Director::getInstance()->getVisibleSize();
 
Sprite* MonsterExample = Sprite::create("monster-hd.png");
MonsterExample->setPosition(
                            visibleSize.width + MonsterExample->getContentSize().width,
                            MonsterExample->getContentSize().height/2+CCRANDOM_0_1()*(visibleSize.height - MonsterExample->getContentSize().height/2));
//2
Monster.push_back(MonsterExample);
this->addChild(Monster.back());
//3
MoveTo* Move = MoveTo::create(3, Vec2(-Monster.back()->getContentSize().width/2,Monster.back()->getPosition().y));
Monster.back()->runAction(Move);
}

接下来让我一步一步的讲解:

  1. 获取屏幕的分辨率。
  2. Monster是一个std::vector<sprite*>类型的变量用于存储怪兽。
  3. 你将会用到Cocos2D动作MoveTo:,让怪兽从起始点(略微偏离屏幕向右)移动到终点(略微偏离屏幕向左),使其迅速的从屏幕右边移动到左边。

你已经见到过了动作中的转动动作,然后Cocos2D提供了大量非常好用的内置动作,比如移动动作、旋转动作、渐隐动作、动画动作等等。

  • MoveTo: 这个动作是用来控制怪兽移动的,在这里是用来使怪兽从屏幕右边移动到左边。这段路程的持续时间是需要设置的,它表示怪兽穿越屏幕所需要的时间,持续时间越短,忍者的速度就会越快.

好,现在你有方法添加一个怪兽到你的场景中。然而一个怪兽对于一个有经验的忍者是很难构成威胁的,所以让我们创建一个怪物刷新器。

Cocos2d拥有一个调度程序,允许你每X.X秒回调一次,这样你就能创建一个怪物刷新器,让它每X秒加入一个新的怪兽到场景中。

打开HelloWorldScene.cpp并且加入如下代码在init方法中。

1
this->schedule(schedule_selector(HelloWorld::addMonster),1);

这样就会添加一个回调计时器让以前添加的addMonster方法每1秒添加一个怪兽

注意,当你创建addMonster方法时,这里会有一个名为dt的参数,这个代表增量时间,就相当于找出之前时间与当前的不同的地方,调度器要求每一个方法都拥有这样一个参数。然而你不会在这个教程中用到这个。

构建并运行,现在你能看见众多的怪兽飞过屏幕!

monster

Hadouken

 不幸的是你的忍者还没有足够的等级去发射火球,所以你需要依靠你专业的投射基恩能够去消灭这些怪兽。    握住你的手里剑并且让我们添加一些投掷动作。    你又将用到MoveTo:,这并不像之前的移动那样简单,但也仅仅需要从_player->getPosition移动到点击点就完成了。如果你想沿着你点击的方向投掷手里剑穿越整个屏幕,你只需要用上一点点数学知识。   你必须从原点到点击点构造一个三角形并且再用同样的比例构造一个更大的三角形 — 而且你知道你想要的终点是在屏幕之外。

去做一些计算,它是真的有帮助,如果你知道一些基本的数学矢量知识的话(例如一些轻松加减向量的方法),Cocos2D包含有一个好用的矢量处理功能,就比如ccpAdd和cppSub。


学会触摸

在HelloWorldScene.h中添加如下代码:

1
2
3
virtualboolonTouchBegan(Touch* pTouch, Event* pEvent);
virtualvoidonTouchMoved(Touch* pTouch, Event* pEvent);
virtualvoidonTouchEnded(Touch* pTouch, Event* pEvent);

并且添加一个私有变量:

1
EventListenerTouchOneByOne* touch_listener;

这个变量用来监听单点触摸事件。

在HelloWorldScene.cpp中的init中添加如下代码:

1
2
3
4
5
6
0