【Box2D】14.Box2D C++ 教程-画自己的图像

2019-10-25

https://blog.csdn.net/Const_Gong/article/details/51459237

声明：本教程翻译自：Box 2D C++ turorials - Drawing your own objects，仅供学习参考。

画自己的图像

从之前的话题中可以看出，很显然使用debug draw不能做出视觉上具有吸引力的游戏。通常我们都会使用我们自己的方法在场景中画图像，然后访问Box2d获取物体的物理信息以此知道在哪里画图像。在本次话题中，我们将会专门定义一个类用作渲染游戏实体，然后我们来看看如何保证实体的物理状态。

现在所有实体类将会进行自身渲染，但是之后我们在其它话题中使用。那些话题中的焦点就不再是渲染图形，所以这里我们在一个圆弧上，画了一张带有微笑的笑脸，并且保证其能够正确移动和旋转。

那么在本话题中，让我们创建一个四方形空的区域作为开始。

    FooTest() {        
      // a static body
      b2BodyDef myBodyDef;
      myBodyDef.type = b2_staticBody;
      myBodyDef.position.Set(0, 0);
      b2Body* staticBody = m_world->CreateBody(&myBodyDef);
  
      // shape definition
      b2PolygonShape polygonShape;
    
      // fixture definition
      b2FixtureDef myFixtureDef;
      myFixtureDef.shape = &polygonShape;
      
      // add four walls to the static body
      polygonShape.SetAsBox( 20, 1, b2Vec2(0, 0), 0);// ground
      staticBody->CreateFixture(&myFixtureDef);
      polygonShape.SetAsBox( 20, 1, b2Vec2(0, 40), 0);// ceiling
      staticBody->CreateFixture(&myFixtureDef);
      polygonShape.SetAsBox( 1, 20, b2Vec2(-20, 20), 0);// left wall
      staticBody->CreateFixture(&myFixtureDef);
      polygonShape.SetAsBox( 1, 20, b2Vec2(20, 20), 0);// right wall
      staticBody->CreateFixture(&myFixtureDef);
    }

让我们调用我们的游戏实体类Ball，它能滚动和弹跳：

  // outside and before the FooTest class
  class Ball {
  public:
    // class member variables
    b2Body* m_body;
    float m_radius;
  
  public:
    Ball(b2World* world, float radius) {
      m_body = NULL;
      m_radius = radius;
    }
    ~Ball() {}
  
  };
  
  // FooTest class member variable
  std::vector<Ball*> balls;

(为了完成最后的编译，你需要在文件顶部添加#include语句。)注意现在在实体内直接存储了Box2D物体的引用，我们会让每一个实体自身存储其对应的物理实体的引用。为了渲染一个漂亮的笑脸，为Ball类添加一个渲染方法。这里有一个需要注意的地方，那就是让笑脸的中心作为(0,0)点，但是不让其旋转。默认的渲染半径设置为1。

    // Ball::render
    void render() {
      glColor3f(1,1,1);// white
  
      // nose and eyes
      glPointSize(4);
      glBegin(GL_POINTS);
      glVertex2f( 0, 0 );
      glVertex2f(-0.5, 0.5 );
      glVertex2f( 0.5, 0.5 );
      glEnd();
      
      // mouth
      glBegin(GL_LINES);
      glVertex2f(-0.5,  -0.5 );
      glVertex2f(-0.16, -0.6 );
      glVertex2f( 0.16, -0.6 );
      glVertex2f( 0.5,  -0.5 );
      glEnd();
  
      // circle outline
      glBegin(GL_LINE_LOOP);
      for (float a = 0; a < 360 * DEGTORAD; a += 30 * DEGTORAD) 
        glVertex2f( sinf(a), cosf(a) );
      glEnd();
    }

这里只有两件事需要做。在FooTest构造函数中，在空的区域设置完成之后，添加一个Ball对象实体到场景中(如果你希望添加析构函数的话，在析构函数里应该对所添加的Ball对象进行删除)。

  // add ball entity to scene in constructor
  Ball* ball = new Ball(m_world, 1);
  balls.push_back( ball );

最后，为了真正画出小球实体我们需要添加Step()方法。如果你把这个方法放到Test::Step()之后，那么小球会显示在debug draw所画的图像之上。

  // in Step() function, after Test::Step()
  for (int i = 0; i < balls.size(); i++)
    balls[i]->render();

现在我们有了一个小球实体，但是它显示在默认的(0,0)点并且我们不会希望我们的物理引擎这么做的，是吧？让我们在Ball类的构造函数中对球的圆弧进行设置。现在可以明显的看出为什么Ball的构造函数需要传递b2World指针了吧：

    // Ball class constructor
    Ball(b2World* world, float radius) {
      m_body = NULL;
      m_radius = radius;
  
      // set up dynamic body, store in class variable
      b2BodyDef myBodyDef;
      myBodyDef.type = b2_dynamicBody;
      myBodyDef.position.Set(0, 20);    
      m_body = world->CreateBody(&myBodyDef);
  
      // add circle fixture
      b2CircleShape circleShape;
      circleShape.m_p.Set(0, 0); 
      circleShape.m_radius = m_radius; // use class variable
      b2FixtureDef myFixtureDef;
      myFixtureDef.shape = &circleShape;
      myFixtureDef.density = 1; 
      m_body->CreateFixture(&myFixtureDef); 
    }

好的，现在场景中有了一个物理实体，但是我们的笑脸并没有被画到物理实体的位置。为了达到这个目的，让我们为Ball类在渲染之前添加另外一个方法来设置OpenGL的平移变换。取决于你所使用的API，可能有比这里列举的更好的方法来完成这个功能。

    // in Ball class
    void renderAtBodyPosition() {
          
      //get current position from Box2D
      b2Vec2 pos = m_body->GetPosition();
      float angle = m_body->GetAngle();
  
      //call normal render at different position/rotation
      glPushMatrix();
      glTranslatef( pos.x, pos.y, 0 );
      glRotatef( angle * RADTODEG, 0, 0, 1 );//OpenGL uses degrees here
      render();//normal render at (0,0)
      glPopMatrix();
    }

别忘了在更新渲染方法Step()中调用新创建的renderAtBodyPosition()。现在即便你关掉debug draw显示(在testbed右边控制面板中取消所勾选的‘Shapes’勾选框)，你自定义的渲染代码仍然会渲染出一个笑脸小球，并显示在正确的位置以及进行正确的旋转。

为了更加有趣，我们可以在小球以不同速度移动的时候改变其颜色。例如，像这样设置颜色：

  //in Ball::render
  b2Vec2 vel = m_body->GetLinearVelocity();
  float red = vel.Length() / 20.0;
  red = min( 1, red );
  glColor3f(red,0.5,0.5);

那么往场景中添加一堆小球如何呢？只要在FooTest构造函数中多循环几次就行：

  // in FooTest constructor
  for (int i = 0; i < 20; i++) {
    Ball* ball = new Ball(m_world, 1);
    balls.push_back( ball );
  }

既然我们在Ball类中考虑了球的大小变量，或许我们可以让小球的大小也变成随机的：

  for (int i = 0; i < 20; i++) {
    float radius = 1 + 2 * (rand()/(float)RAND_MAX); // random between 1 - 3
    Ball* ball = new Ball(m_world, radius);
    balls.push_back( ball );
  }

啊哦…有不对劲的地方，小球之间的碰撞貌似不再正确。如果你想构造一个复杂一点场景，你需要考虑这一问题，然而你已经自信满满的让debug draw在你花哨的图形面前消失。但是既然我们手中有debug draw，而且它可以作为第二方案来查看物理引擎到底发生了什么：

好吧，虽然再次使用debug draw让人有些纠结，但是我只是想说明用debug draw能够更有效的保证开发进度。最后，问题出在物理实体的大小上，所以我们只要调整一下图形的缩放代码就ok了：

  // inside Ball::renderAtBodyPosition
  glPushMatrix();
  glTranslatef( pos.x, pos.y, 0 );
  glRotatef( angle * RADTODEG, 0, 0, 1 );
  glScalef( m_radius, m_radius, 1 ); //add this to correct size
  render();
  glPopMatrix();