笔记：利用 Cocos2dx 3.2 与 Box2D制作一个跑酷游戏（上）

最近写lua写得没有力气了，所以想让脑袋放松一下，刚好看到有人在用swift做游戏：

Swift游戏实战-跑酷熊猫 

于是脑子一短路，就想到了利用这些素材来做一个游戏。

本来不想记笔记的，但是由于选择物理引擎的时候遇到诸多问题，所以选择记录下来，目前只做了个雏形，需要再完善一点。

需要知识：

1 cocos2dx-3.2 基本知识

2 box2d有一定的了解。

由于比较简单，所以把所有代码给上了先，然后再简单介绍下遇到的问题之类的东西。

首先是主角，熊猫类：

Panda.h

#ifndef __PANDA_H__
#define __PANDA_H__

#include "cocos2d.h"
USING_NS_CC;

class Panda : public cocos2d::Node
{
public:
    Vector<SpriteFrame*> run_frames;
    Vector<SpriteFrame*> jump_effect_frames;
    Vector<SpriteFrame*> roll_frames;
    Vector<SpriteFrame*> jump_frames;
    Animation * run_anim;
    Animation * jump_anim;
    Animation * jump_effect_anim;
    Animation * roll_anim;
    Sprite * shape;
    Animation * anim;
    int cur_state;//current state
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  
    //play status RUM||ROLL||JUMP etc
    void play(unsigned int state);

    void updateState();
    // implement the "static create()" method manually
    CREATE_FUNC(Panda);

    int getCurrentState();
    //panda 4 states
    enum {
        RUN = 1,
        JUMP = 2,
        JUMP2 = 3
    };
};

#endif // __PANDA_H__

#include "Panda.h"
#include "cocos2d.h"

USING_NS_CC;

bool Panda::init()
{
    if(!Node::init())
        return false;
    
    run_frames = Vector<SpriteFrame*>(8);
    roll_frames = Vector<SpriteFrame*>(8);
    jump_effect_frames = Vector<SpriteFrame*>(4);
    jump_frames = Vector<SpriteFrame*>(8);
    char str[40] = {0};
    for(int i=1; i<=8;i++)
    {
        sprintf(str,"jump.atlas/panda_jump_0%d.png",i);
        auto frame = SpriteFrameCache::getInstance()->getSpriteFrameByName(str);
        if( frame != NULL )
        {
            jump_frames.pushBack(frame);
        }

        sprintf(str,"roll.atlas/panda_roll_0%d.png",i);
        auto frame_0 = SpriteFrameCache::getInstance()->getSpriteFrameByName(str);
        if( frame_0 != NULL )
        {
            roll_frames.pushBack(frame_0);
        }

        sprintf(str,"run.atlas/panda_run_0%d.png",i);
        auto frame_1 = SpriteFrameCache::getInstance()->getSpriteFrameByName(str);
        if( frame_1 != NULL )
        {
            run_frames.pushBack(frame_1);
        }

        sprintf(str,"jump_effect.atlas/jump_effect_0%d.png",i);
        auto frame_2 = SpriteFrameCache::getInstance()->getSpriteFrameByName(str);
        if( frame_2 != NULL )
        {
            jump_effect_frames.pushBack(frame_2);
        }
    }

    run_anim = Animation::createWithSpriteFrames(run_frames,0.05f);
    run_anim->retain();
    roll_anim = Animation::createWithSpriteFrames(roll_frames,0.05f);
    roll_anim->retain();
    jump_anim = Animation::createWithSpriteFrames(jump_frames,0.05f);
    jump_anim->retain();
    jump_effect_anim = Animation::createWithSpriteFrames(jump_effect_frames,0.05f);
    jump_effect_anim->retain();
    shape= Sprite::createWithSpriteFrameName("run.atlas/panda_run_01.png");
    addChild(shape);
    return true;
}

void Panda::play(unsigned int state)
{
    Action * animate;
    switch(state)
    {
    case RUN:
        cur_state = Panda::RUN;
        animate = RepeatForever::create(Animate::create(run_anim));
        animate->setTag(100);
        shape->runAction(animate);
        break;
    case JUMP:
        cur_state = Panda::JUMP;
        animate = Animate::create(jump_anim);
        animate->setTag(200);
        shape->stopActionByTag(100);
        shape->runAction(animate);
        break;
    case JUMP2:
        animate = Sequence::create(Animate::create(jump_effect_anim),Animate::create(roll_anim));
        animate->setTag(300);
        cur_state = Panda::JUMP2;
        shape->runAction(animate);
        break;
    }
}

int Panda::getCurrentState()
{
    return cur_state;
}

void Panda::updateState()
{
    if (shape->getActionByTag(200) == nullptr && shape->getActionByTag(300) == nullptr)
    {
        play(Panda::RUN);
    }
}

然后是场景类，里面有一些逻辑处理：

#ifndef __GAMEMAIN_H__
#define __GAMEMAIN_H__

#include "cocos2d.h"
#include "Panda.h"
#include "Box2DBox2D.h"
#include "GLES-Render.h"

USING_NS_CC;
//whether show assets
#define SHOW_DEBUG true
//draw scale of physics world
#define DRAW_SCALE 30.0f
#define ALL_ALHA 0.5f

class GameMain : public cocos2d::Layer
{
public:
    //physic engine related
    b2World * world;
    Map<b2Body,Sprite> * map;
    b2Body * panda_body;
    //objects move speed
    float speed;
    Sprite * far_bg;
    Sprite * middle_bg_0;
    Sprite * middle_bg_1;
    Size cSize;
    Size visibleSize;
    Layer * platform_container;
    Panda * panda;
    GLESDebugDraw * debugDraw;
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();

    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    virtual void onEnter();
    
    virtual void onExit();

    void update(float dt);

    virtual bool onTouchBegan(Touch * touch, Event * event);
    virtual void onTouchEnded(Touch * touch, Event * event);
    virtual void onTouchMoved(Touch * touch, Event * event);

    virtual bool onContactBegin(const PhysicsContact& contact);
    // implement the "static create()" method manually
    CREATE_FUNC(GameMain);

     //
    // Overrides
    //
    virtual void draw(Renderer *renderer, const Mat4 &transform, uint32_t flags) override;
private:
    void create_ground();
    void gen_step(const std::string& res, float posX, float posY);
    void init_physics_world();
};

#endif // __HELLOWORLD_SCENE_H__

#include "GameMain.h"
#include "cocos2d.h"
#include "Box2DBox2D.h"
#include "GLES-Render.h"
USING_NS_CC;

Scene* GameMain::createScene()
{
    auto scene = Scene::create();
    auto layer = GameMain::create();
    scene->addChild(layer);
    return scene;
}


bool GameMain::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    speed = 5.0f;
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = CC_CALLBACK_2(GameMain::onTouchBegan,this);
    listener->onTouchEnded = CC_CALLBACK_2(GameMain::onTouchEnded,this);
    listener->onTouchMoved = CC_CALLBACK_2(GameMain::onTouchMoved,this);

    Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);

    visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("panda.plist");//add panda animate
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("scene.plist");//add scene resources

    middle_bg_0 = Sprite::create("bbg_snow_bone.jpg");
    cSize = middle_bg_0->getContentSize();
    middle_bg_0->setPosition(visibleSize.width*0.5, visibleSize.height*0.5);
    middle_bg_0->setVisible(SHOW_DEBUG);
    addChild(middle_bg_0);

    init_physics_world();

    //gen_step();
    create_ground();

    //init panda and its physics data
    Point p(visibleSize.width/2,visibleSize.height/2);
    b2BodyDef bodyDef;
    bodyDef.type = b2_dynamicBody;
    bodyDef.position.Set(p.x/DRAW_SCALE, p.y/DRAW_SCALE);
    panda_body = world->CreateBody(&bodyDef);
    b2MassData massdata;
    massdata.mass = 100.0f;
    panda_body->SetMassData(&massdata);

    b2PolygonShape shape;
    shape.SetAsBox(50.0f/DRAW_SCALE, 100.0f/DRAW_SCALE);

    b2FixtureDef fixtureDef;
    fixtureDef.shape = &shape;
    fixtureDef.density = 1.0f;
    fixtureDef.friction = 0.3f;
    panda_body->CreateFixture(&fixtureDef);

    panda = Panda::create();
    panda->setPosition(visibleSize.width/2, visibleSize.height/2);
    Size panda_size = Size(50.0f,100.0f);
    panda->play(Panda::RUN);
    this->addChild(panda);
    panda_body->SetUserData(panda);
    panda->setVisible(SHOW_DEBUG);
    
    gen_step("platform_l.png",51.0,100.0f);
    gen_step("platform_m.png",196.0f,100.0f);
    gen_step("platform_r.png",392.0f,100.0f);
    return true;
}

void GameMain::init_physics_world()
{
    b2Vec2 gravity;
    gravity.Set(0.0f,-10.0f);
    world = new b2World(gravity);
    world->SetAllowSleeping(true);
    world->SetContinuousPhysics(true);
    debugDraw = new GLESDebugDraw(DRAW_SCALE);
    uint32 flags = 0;
    flags += GLESDebugDraw::e_shapeBit;
    flags += GLESDebugDraw::e_aabbBit;
    flags += GLESDebugDraw::e_centerOfMassBit;
    debugDraw->SetFlags(flags);
    world->SetDebugDraw(debugDraw);
}

void GameMain::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
    world->DrawDebugData();
    Layer::draw(renderer,transform,flags);
}

void GameMain::create_ground()
{
    b2BodyDef ground_def;
    ground_def.position.Set(visibleSize.width/2/DRAW_SCALE, visibleSize.height/2/DRAW_SCALE);

    b2Body * ground_body = world->CreateBody(&ground_def);

    /***/
    //bottom
    b2PolygonShape ground_shape;
    ground_shape.SetAsBox(visibleSize.width/2/DRAW_SCALE,0,b2Vec2(0,-visibleSize.height/2/DRAW_SCALE),0);
    ground_body->CreateFixture(&ground_shape,0);
    //top
    ground_shape.SetAsBox(visibleSize.width/2/DRAW_SCALE,0,b2Vec2(0,visibleSize.height/2/DRAW_SCALE),0);
    ground_body->CreateFixture(&ground_shape,0);
    //left
    ground_shape.SetAsBox(0,visibleSize.height/2/DRAW_SCALE,b2Vec2(-visibleSize.width/2/DRAW_SCALE,0),0);
    ground_body->CreateFixture(&ground_shape,0);
    //right 
    ground_shape.SetAsBox(0,visibleSize.height/2/DRAW_SCALE,b2Vec2(visibleSize.width/2/DRAW_SCALE,0),0);
    ground_body->CreateFixture(&ground_shape,0);
}

bool GameMain::onTouchBegan(Touch * touch, Event * event)
{
    Sprite * ball = Sprite::create("apple.png");
    ball->setVisible(SHOW_DEBUG);
    Size contentSize = ball->getContentSize();
    addChild(ball);
    b2BodyDef ballDef;
    ballDef.type = b2_dynamicBody;
    ballDef.position.Set(touch->getLocation().x/DRAW_SCALE, touch->getLocation().y/DRAW_SCALE);
    b2Body * ballBody = world->CreateBody(&ballDef);
    ballBody->SetUserData(ball);
    b2MassData massData;
    massData.center = b2Vec2(contentSize.width/2/DRAW_SCALE,contentSize.height/2/DRAW_SCALE);
    massData.mass = 50;
    b2CircleShape ballShape;
    ballShape.ComputeMass(&massData,1.5f);
    ballShape.m_radius=45.0f/DRAW_SCALE;
    b2FixtureDef ballFixture;
    ballFixture.density = 10.0f;
    ballFixture.friction = 1.0f;
    ballFixture.restitution = 0.6f;
    ballFixture.shape = &ballShape;

    ballBody->CreateFixture(&ballFixture);
    ballBody->SetGravityScale(10);
    /**
    float vx = touch->getLocation().x > panda->getPositionX() ? 100.0f : -100.0f;
    panda->updateState();
    int cur_state = panda->getCurrentState();
    if( cur_state == Panda::RUN )
    {
        panda_body->ApplyForce(b2Vec2(vx,1000),panda_body->GetPosition(),true);
        panda->play(Panda::JUMP);
    }else if(cur_state == Panda::JUMP)
    {
        panda_body->ApplyForce(b2Vec2(vx,800),panda_body->GetPosition(),true);
        panda->play(Panda::JUMP2);
    }*/
    return true;
}

void GameMain::update(float dt)
{
    world->Step(dt,10,10);
    b2Body* b = world->GetBodyList();
    while (b)
    {
        b2Body* bNext = b->GetNext();
        Sprite * sp = (Sprite *)b->GetUserData();
        if( sp != nullptr )
            sp->setPosition(b->GetPosition().x*DRAW_SCALE,b->GetPosition().y*DRAW_SCALE);

        b = bNext;
    }
}

//generate floors
void GameMain::gen_step(const std::string& res, float posX, float posY)
{
    Sprite * sp = Sprite::create(res);
    sp->setPosition(posX, posY);
    addChild(sp);

    Size contentSize = sp->getContentSize();

    b2BodyDef bodyDef;
    bodyDef.position.Set(posX/DRAW_SCALE, posY/DRAW_SCALE);
    b2Body * body = world->CreateBody(&bodyDef);

    b2PolygonShape shape;
    shape.SetAsBox(contentSize.width/DRAW_SCALE, contentSize.height/DRAW_SCALE);

    b2FixtureDef fixtureDef;
    fixtureDef.shape = &shape;
    fixtureDef.density = 1.0f;
    fixtureDef.friction = 0.3f;
    body->CreateFixture(&fixtureDef);
    sp->setVisible(SHOW_DEBUG);
}

bool GameMain::onContactBegin(const PhysicsContact& contact)
{
    log("Contacted...");
    return true;
}

void GameMain::onTouchEnded(Touch * touch, Event * event)
{

}

void GameMain::onTouchMoved(Touch * touch, Event * event)
{

}

void GameMain::onEnter()
{
    Layer::onEnter();
    this->schedule(schedule_selector(GameMain::update),0.03f);
}

void GameMain::onExit()
{
    delete world;
    delete debugDraw;
    Layer::onExit();
    this->unschedule(schedule_selector(GameMain::update));
}

需要注意：

1 所有的熊猫动作打包成一个plist，所有的场景素材打包到另一个plist

这就是我们在场景类的init方法里面预加载的两个文件：

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("panda.plist");//add panda animate
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("scene.plist");//add scene resources

资源目录应该是这样的：

2 去cocos2d-x-3.2 estscpp-testsClassesBox2DTestBed下面将GLES-Render.h和GLES-Render.cpp拷到项目里面来，因为Box2d没有b2Debug的实现，这个是我们手头上需要的实现。

3 使用Box2d的时候极有可能会出现编译连接错误，找不到Box2d相关的类，这个时候需要将cocos2d-x-3.2externalBox2D编译一下，然后在项目的连接器中加入引用：

4 通过b2World::SetDebugDraw(b2Draw * draw)将GLESDebugDraw实例设置为world的debugDraw之后，每帧调用world->DrawDebugData()是不会生效的，只有复写Layer::draw()方法并在其中调用此方法才会显示debugDraw。

由于debugDraw是调用显卡去渲染的，所以debugDraw是位于场景最底层的，当你把所有场景内的显示对象的通过setVisible设置为false的时候，你就可以看到了。

可以设置SHOW_DEBUG的值来设置显示对象的visible。

如下：

 

 可以看到下面的debugDraw有点测漏了。

5 cocos2dx 3.2内置了chipmunk物理引擎，用起来比较简单，但是我之前学习ActionScript的时候有用过Box2d，并且Box2d的功能比较强大一些，所以选择了Box2d。ActionScript还有一个效率比Box2d稍强的无力引擎：Nape

以下是一开始用chipmunk实现的一些功能的代码：

#include "GameMain.h"
#include "cocos2d.h"

USING_NS_CC;

Scene* GameMain::createScene()
{
    auto scene = Scene::createWithPhysics();
    scene->getPhysicsWorld()->setDebugDrawMask(PhysicsWorld::DEBUGDRAW_ALL);
    scene->getPhysicsWorld()->setUpdateRate(0.5);
    auto layer = GameMain::create();
    scene->addChild(layer);
    return scene;
}


bool GameMain::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    speed = 5.0f;
    
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = CC_CALLBACK_2(GameMain::onTouchBegan,this);
    listener->onTouchEnded = CC_CALLBACK_2(GameMain::onTouchEnded,this);
    listener->onTouchMoved = CC_CALLBACK_2(GameMain::onTouchMoved,this);

    auto contact_listener = EventListenerPhysicsContact::create();
    contact_listener->onContactBegin = CC_CALLBACK_1(GameMain::onContactBegin,this);

    Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    Director::getInstance()->getEventDispatcher()->addEventListenerWithFixedPriority(contact_listener,1);

    visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("panda.plist");//add panda animate
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("scene.plist");//add scene resources

    middle_bg_0 = Sprite::create("bbg_snow_bone.jpg");
    cSize = middle_bg_0->getContentSize();
    middle_bg_0->setPosition(visibleSize.width*0.5, visibleSize.height*0.5);
    middle_bg_1 = Sprite::create("bbg_snow_bone.jpg");
    middle_bg_1->setPosition(visibleSize.width*1.5, visibleSize.height*0.5);
    addChild(middle_bg_0);
    addChild(middle_bg_1);

    gen_floor();

    panda = Panda::create();
    panda->setPosition(visibleSize.width/2, visibleSize.height/2);
    Size panda_size = Size(50.0f,100.0f);
    panda->play(Panda::RUN);
    auto panda_body = PhysicsBody::createBox(panda_size);
    panda_body->retain();
    panda->setPhysicsBody(panda_body);
    this->addChild(panda);
    
    auto edge_sp = Sprite::create();
    auto edge_body = PhysicsBody::createEdgeBox(visibleSize,PHYSICSBODY_MATERIAL_DEFAULT,3);
    edge_sp->setPosition(visibleSize.width/2, visibleSize.height/2);
    edge_sp->setPhysicsBody(edge_body);
    edge_sp->setTag(0);
    addChild(edge_sp);
    return true;
}

bool GameMain::onContactBegin(const PhysicsContact& contact)
{
    log("Contacted...");
    return true;
}

bool GameMain::onTouchBegan(Touch * touch, Event * event)
{
    log("Touched.....");
    int cur_state = panda->getCurrentState();
    panda->getPhysicsBody()->applyForce(Vect(500.0f,500.0f));
    if( cur_state == Panda::RUN )
    {
        panda->play(Panda::JUMP);
    }else if(cur_state == Panda::JUMP)
    {
        panda->play(Panda::JUMP2);
    }
    return true;
}

void GameMain::onTouchEnded(Touch * touch, Event * event)
{

}

void GameMain::onTouchMoved(Touch * touch, Event * event)
{

}

void GameMain::update(float dt)
{
    /**
    middle_bg_0->setPositionX(middle_bg_0->getPositionX()-speed);

    if(middle_bg_0->getPositionX() < -cSize.width*0.5)
    {
        middle_bg_0->setPositionX(cSize.width*1.5);
    }

    middle_bg_1->setPositionX(middle_bg_1->getPositionX()-speed);
    if(middle_bg_1->getPositionX() < -cSize.width*0.5)
    {
        middle_bg_1->setPositionX(cSize.width*1.5);
    }*/
}

void GameMain::onEnter()
{
    Layer::onEnter();
    this->schedule(schedule_selector(GameMain::update),0.05f);
}

void GameMain::onExit()
{
    Layer::onExit();
    this->unschedule(schedule_selector(GameMain::update));
}

void GameMain::createFloor(int posx,int posy,int w,int h)
{
    
}
//generate floors
void GameMain::gen_floor()
{
    Sprite * sp_l = Sprite::create("platform_l.png");
    auto body_l = PhysicsBody::createBox(sp_l->getContentSize());
    body_l->setDynamic(false);
    sp_l->setPhysicsBody(body_l);
    sp_l->setPosition(50.0f,150);
    addChild(sp_l);
    
    Sprite * sp_m = Sprite::create("platform_m.png");
    auto body_m = PhysicsBody::createBox(sp_m->getContentSize());
    body_m->setDynamic(false);
    sp_m->setPhysicsBody(body_m);
    sp_m->setPosition(sp_l->getPositionX() + (sp_l->getContentSize().width+sp_m->getContentSize().width)/2,150);
    addChild(sp_m);

    Sprite * sp_r = Sprite::create("platform_r.png");
    auto body_r = PhysicsBody::createBox(sp_r->getContentSize());
    body_r->setDynamic(false);
    sp_r->setPhysicsBody(body_r);
    sp_r->setPosition(sp_m->getPositionX() + (sp_m->getContentSize().width+sp_r->getContentSize().width)/2,150);
    addChild(sp_r);
}

建议：

不想吐槽搜索引擎，建议大家遇到问题先尝试自己解决，解决不了的然后可以用国外的搜索引擎搜索一下，或者可以直接去StackFlow去搜索

参考文章：

（翻译）介绍Box2D的Cocos2D 2.X教程：弹球

[Cocos2D-x For WP8]Box2D物理引擎

How to enable Box2d debug draw with Coco2d-x 3.0 beta 2