热门搜索:
您现在的位置是：首页 > 文章详情

Xcode与C++之游戏开发：Pong游戏

日期：2019-02-23点击：467

Xcode与C++之游戏开发：Pong游戏

接下来在前两天游戏骨架的基础上实现一个经典的乒乓球(Pong)游戏。游戏是这样的，一个球在屏幕上移动，玩家控制球拍来击打球。可以说乒乓球游戏是游戏开发者的 “Hello World” 项目。

绘制游戏中的物体
乒乓球球拍我们使用矩形来表示。绘制填充矩形，SDL 有 SDL_RenderFillRect 函数，它接受一个 SDL_Rect 代表的填充矩形，而矩形颜色由当前的绘图颜色决定。换句说，现在我们不改变绘图颜色，它默认就会使用那个幸福浪漫的蒂芙尼蓝。当然，颜色一摸一样，我们是看不见的。为了看得出矩形，将它修改成蓝色。

在 Game::GenerateOutput() 交换缓冲区之前写入：

  // 设置绘制颜色
  SDL_SetRenderDrawColor(mRenderer, 0, 0, 255, 255);
1
2
要绘制矩形，需要指定一个 SDL_Rect 结构体。这个结构体有4个参数，左上角的点x/y坐标，还有矩形的高和宽度。在绝大多数的图形库中，包括 SDL，窗口左上角的点的坐标是(0, 0)，x正半轴是向右，y正半轴是向下的（和数学上的相反）。

假设我们要在屏幕上方绘制矩形作为游戏的墙，可以使用下面的 SDL_Rect 的定义：

  // 顶部墙的参数
  SDL_Rect wall {
    0, // 左上 x 坐标
    0, // 左上 y 坐标
    1024, // 宽度
    kThickness // 高度
  };
1
2
3
4
5
6
7
宽度被硬编码成1024，一般来说这需要根据窗口尺寸自动修正，后面会考虑修正这个问题。thickness 是一个 const int 常量，被设置成15，这是为了方便调整墙的厚度。

C++ 不推荐使用 #define 宏预定义，更推荐使用 const

在头文件声明之后加入：

const int kThickness = 15;
1
最后，用 SDL_RenderFillRect 绘制矩形，传入 SDL_Rect 指针：

SDL_RenderFillRect(mRenderer, &wall);
1
这样游戏窗口上面多了一道墙，类似的，可以画出底部的墙和右边的墙，只需要通过改变 SDL_Rect 的参数。比如，下面那道墙左上角的 y 坐标就是 768 - thickness（因为窗口初始化时高度被初始化为768）。

  // 绘制底部墙
  wall.y = 768 - kThickness;
  SDL_RenderFillRect(mRenderer, &wall);
  
  // 绘制右边的墙
  wall = {
    1024 - kThickness,
    0,
    kThickness,
    1024
  };
  SDL_RenderFillRect(mRenderer, &wall);
1
2
3
4
5
6
7
8
9
10
11
12
左边的墙呢？留着给玩家打乒乓球。

墙硬编码可能问题不大，乒乓球球和球拍就不能硬编码了。随着游戏循环，球拍是要会动的。实际游戏编程中，球和球拍应该抽象成类，但是现在我们姑且先用变量代替一下硬编码。

首先，先定义一个 Vector2 结构体来存储 x 和 y 坐标。这个定义放到 Game.hpp 之中：

// Vector2 结构体仅存储 x 和 y 坐标
struct Vector2
{
  float x;
  float y;
};
1
2
3
4
5
6
接着添加两个 Vector2 的成员变量到 Game 类中，一个作为球拍 mPaddlePos，一个作为球 mBallPos。

  // 球拍位置
  Vector2 mPaddlePos;
  // 球的位置
  Vector2 mBallPos;
1
2
3
4
之后在初始化时 Game::Initialize() 赋予一个合理的初始值。

  // 初始化球拍和球的坐标
  mPaddlePos.x = 10.0f;
  mPaddlePos.y = 768.0f / 2.0f;
  mBallPos.x = 1024.0f / 2.0f;
  mBallPos.y = 768.0f / 2.0f;
1
2
3
4
5
x和y在这里是中心坐标，不符合 SDL_Rect 的要求。因此要先把x和y坐标转换成左上角的点。

  // 绘制球拍
  SDL_Rect paddle {
    static_cast<int>(mPaddlePos.x),
    static_cast<int>(mPaddlePos.y - kPaddleH / 2),
    kThickness,
    static_cast<int>(kPaddleH)
  };
  SDL_RenderFillRect(mRenderer, &paddle);
  
  // 绘制球
  SDL_Rect ball {
    static_cast<int>(mBallPos.x - kThickness / 2),
    static_cast<int>(mBallPos.y - kThickness / 2),
    kThickness,
    kThickness
  };
  SDL_RenderFillRect(mRenderer, &ball);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
其中，kPaddleH 也是个 const int 常量，用来控制球拍的长度(可控制难度)，将其设置为 100.0f。

const float kPaddleH = 100.0f;
1
这样乒乓球的所需要物体，或者说简陋的素材就完成了。看看效果。



接下来，就要把静态变成动态，完成游戏循环和交互逻辑的编写。

更新游戏
在编写游戏循环的时候，有一点是值得特别关注的，就是时间。务必记住一点，游戏循环不是连续的，它只是刷新频率带来的错觉。游戏中的时间和现实的物理时间也未必一样。这是开发的时候需要特别注意的。

由时间引出了刷新频率的问题，假如最早的游戏在 8MHz 的处理器下运行，有这样的代码：

// x 坐标更新五个像素
enemy.mPosition.x += 5;
1
2
那么，如果在 16MHz 的处理器上运行呢？刷新的速率翻了一倍，会导致游戏速度快了一倍。游戏的难度陡然上升，完全有可能将困难的挑战变成不可能。为了解决这个问题，游戏将使用增量时间(delta time)——上一帧到现在的时间流逝长度。

要采用增量时间，就需要转换思考的角度，从每帧移动的像素数量转变成每秒移动的像素数量。所以，我们把速度调整为150每秒，采用增量时间，这样更加灵活：

// 每秒更新150个像素
enemy.mPosition.x += 150 * deltaTime;
1
2
现在，代码与帧速无关了，无论是 30 FPS 还是 60 FPS，都能照常运行。实际游戏编程时，大部分都需要采用增量时间。

为了计算增量时间，SDL 提供了 SDL_GetTicks 函数返回从 SDL_Init 调用以来的毫秒数。通过存储上一帧的 SDL_GetTicks 的结果在成员变量里，就可以使用现在的值来计算增量时间。

首先，声明一个 mTicksCount 作为 Game 的成员变量，并在构造函数中初始化为0。

在 Game.hpp 的 Game 中增加代码：

  // 记录运行时间
  Uint32 mTicksCount;
1
2
构造函数中初始化为0：

Game::Game()
:mWindow(nullptr)
,mRenderer(nullptr)
,mIsRunning(true)
,mTicksCount(0)
{
  
}
1
2
3
4
5
6
7
8
使用 SDL_GetTicks 的代码在 Game::UpdateGame 中实现：

void Game::UpdateGame()
{
  // 增量时间是上一帧到现在的时间差
  // (转换成秒)
  float deltaTime = (SDL_GetTicks() - mTicksCount) / 1000.0f;
  
  // 更新运行时间(为下一帧)
  mTicksCount = SDL_GetTicks();
}
1
2
3
4
5
6
7
8
9
仔细想想，这代码还是有问题的。有一些依赖于物理的游戏（比如平台跳跃类），行为会根据帧速率而有所不同。最简单的解决方案就是限制速度，强制游戏循环需要等到一个增量时间。例如，目标帧速 60 FPS，一帧完成仅需要 15ms，则强制附加 1.6ms。

SDL 已经为我们提供了限制帧速的方法。例如，要限制至少帧与帧之间间隔 16ms，可以在 UpdateGame 一开始附加上代码：

void Game::UpdateGame()
{
  // 等到与上一帧间隔 16ms
  while (!SDL_TICKS_PASSED(SDL_GetTicks(), mTicksCount + 16))
    ;
  
  // 增量时间是上一帧到现在的时间差
  // (转换成秒)
  float deltaTime = (SDL_GetTicks() - mTicksCount) / 1000.0f;
  
  // 更新运行时间(为下一帧)
  mTicksCount = SDL_GetTicks();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
除了关注最短间隔，我们也应该关注最长间隔。例如，在调试的时候中断了游戏，那么一段时间之后恢复运行，游戏将产生一个突跃。为了解决这个问题，只需要设定一个增量时间的最大值。

  // 固定增量时间最大值
  if (deltaTime > 0.05f)
  {
    deltaTime = 0.05f;
  }
1
2
3
4
5
球拍位置
在乒乓球游戏中，我们可以通过键盘输入 W 向上移动球拍，S 向下移动球拍。可以定义一个 mPaddleDir 表示方向，-1 表示球拍向上(负y)，1 表示球拍向下移动。

  // 球拍方向
  int mPaddleDir;
1
2
记得在构造函数中初始化，

Game::Game()
:mWindow(nullptr)
,mRenderer(nullptr)
,mIsRunning(true)
,mTicksCount(0)
,mPaddleDir(0)
{
  
}
1
2
3
4
5
6
7
8
9
控制游戏的位置通过键盘输入，因此代码放到 ProcessInput 中。

  // 通过 W/S 更新球拍位置
  mPaddleDir = 0;
  if (state[SDL_SCANCODE_W])
  {
    mPaddleDir -= 1;
  }
  if (state[SDL_SCANCODE_S])
  {
    mPaddleDir += 1;
  }
1
2
3
4
5
6
7
8
9
10
注意这里是加上和减去，而不是采取直接赋值为 -1 和 1，因为这样才能确保玩家同时按两个键时mPaddleDir 是0。接下来，在 UpdateGame 中根据增量时间和方向，更新球拍位置。除此之外，还需要防止球拍超出窗口，必须限制在有效范围内。

  // 根据方向更新球拍位置
  if (mPaddleDir != 0)
  {
    mPaddlePos.y += mPaddleDir * 300.0f * deltaTime;
    
    // 确保球拍不能移出窗口
    if (mPaddlePos.y < (kPaddleH / 2.0f + kThickness))
    {
      mPaddlePos.y = kPaddleH / 2.0f + kThickness;
    } else if (mPaddlePos.y > (768.0 - kPaddleH / 2.0f - kThickness))
    {
      mPaddlePos.y = 768.0f - kPaddleH / 2.0f - kThickness;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
在这里，速度是300个像素每秒。现在，可以编译运行一下看看了。

更新球的位置
更新球的位置就有一点点复杂了。球拍仅仅在一维(y)上运动，而乒乓球可是在二维平面上运动。另外，球碰到墙和球拍会反弹，从而改变它的方向。因此，需要使用球的速度和对它进行碰撞检测。

由于球在二维平面上运动，因此对速度的表示采用的是矢量分解。添加一个 Vector2 成员变量 mBallVel，初始化成 (-200.0f, 235.0f)，代表一开始球向x负方向以每秒200像素移动，同时向下每秒移动235像素。换句话说，向左下移动。

  // 球的速度
  Vector2 mBallVel;
1
2
在 Game::Initialize() 中进行初始化：

  mBallVel = {-200.0f, 235.0f};
1
接下来，需要编写能够将球从墙上弹回的代码。用于确定球是否与墙壁碰撞的代码类似于检查球拍是否在屏幕外。如果球的y位置小于或等于球的高度，则球与顶壁碰撞。一个问题是，碰撞之后怎么运动。

应该不难想到，假如球从上到下，那么碰到底部的墙将反弹向上。类型的，碰撞到右边，则反弹向左。基于矢量的原理，仅仅只需要在相应的分量上乘以 -1，改变方向即可。

  // 球是否和顶部墙相碰
  if (mBallPos.y <= kThickness && mBallVel.y < 0.0f)
  {
    mBallVel.y *= -1;
  }
  else if (mBallPos.y >= (768 - kThickness) && mBallVel.y > 0.0f)
  {
    // 球和底部墙相碰
    mBallVel.y *= -1;
  }
1
2
3
4
5
6
7
8
9
10
对速度进行校验是有必要的，否则可能导致球粘在墙上。

球与墙的碰撞稍微简单一点，与球拍的碰撞就比较复杂了。

如果球在球拍的正上方和正下方，这就是没碰撞了；(球的y坐标和球拍的y坐标差值大于球拍的高度的一半）
检查球的x坐标是否和球拍一致，并且球不处于远离状态。
  // 是否和球拍相交
  float diff = mPaddlePos.y - mBallPos.y;
  // 取绝对值
  diff = (diff > 0.0f) ? diff : -diff;
  if (
      // y分量差距足够小
      diff <= kPaddleH / 2.0f &&
      // 球拍的x范围内
      mBallPos.x <= 25.0f && mBallPos.x >= 20.0f &&
      // 球正向左运动
      mBallVel.x < 0.0f
    )
  {
    mBallVel.x *= -1.0f;
  }
  // 如果球出了窗口，结束游戏
  else if (mBallPos.x <= 0.0f)
  {
    mIsRunning = false;
  }
  // 如果球碰到右边的墙，则反弹
  else if(mBallPos.x >= (1024.0f - kThickness) && mBallVel.x > 0.0f)
  {
    mBallVel.x *= -1.0f;
  }
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
最终

这样，游戏届的“Hello World”的Pong游戏就编写完成了，最后，改一下窗口标题，换成 Pong，就可以了。但是，我们把 Pong 游戏的各个游戏对象都放到了 Game 中，这不利于扩展。这就是我们之后将进一步讨论的游戏对象。



下一篇：Xcode与C++之游戏开发：Pong游戏
--------------------- 
作者：谷雨の梦 
来源：CSDN 
原文：https://blog.csdn.net/guyu2019/article/details/87551008 
版权声明：本文为博主原创文章，转载请附上博文链接！
原文链接：https://yq.aliyun.com/articles/691243
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章