基础项目实战——3D赛车（c++）

前言
一、渲染引擎
二、关闭事件
三、梯形绘制
四、轨道绘制
五、边缘绘制
六、草坪绘制
七、前后移动
八、左右移动
九、曲线轨道
十、课山坡轨道
十一、循环轨道
十二、背景展示
十三、引入速度
十四、物品绘制
十五、课数字路障
十六、分数展示
十七、重新生成
十八、跳跃功能
十九、课音效播放
二十、音乐播放
二十一、音乐切换

前言

这一期我们一起学期3d赛车这个项目实战，这个项目比之前的那几个难度高了很多，所以做起来会比较复杂，里面会涉及一些数学思想。这个项目做完了之后非常有意思还是值得一做的。

完整工程文件，提取码为1111
（蓝色字体可以点进去）

一、渲染引擎

做这个项目我们要自己到网上下载一些库，要配置环境。所以配置环境可以看我上一期扫雷（蓝色字体可以点进去）

#include <SFML/Graphics.hpp>
using namespace sf;

const int WinWidth = 1024;
const int WinHeight = 768;

int main() {
RenderWindow win(VideoMode(WinWidth, WinHeight), "Racing");
    win.setFramerateLimit(60);  // 设置帧率为 60 帧   
while (win.isOpen()) {
} 
return 0;
}

运行之后我不得到一个不可以移动的窗口。

二、关闭事件

这样就可以关闭和移动窗口了。

    while (win.isOpen()) {
        Event e; 
while (win.pollEvent(e)) { 
if (e.type == Event::Closed) {
                win.close();
            }
        }
    }

三、梯形绘制

这个梯形就代表每一块道路的图案


void DrawTrape(RenderWindow& window, Color c, int x1, int y1, int w1, int x2, int y2, int w2) {
	ConvexShape polygon(4);//梯形的四个定点
	polygon.setFillColor(c);//设置梯形填充的颜色
	polygon.setPoint(0, Vector2f(x1 - w1, y1));
	polygon.setPoint(1, Vector2f(x2 - w2, y2));
	polygon.setPoint(2, Vector2f(x2 + w2, y2));
	polygon.setPoint(3, Vector2f(x1 + w1, y1));
	window.draw(polygon);
}

win.clear();   
DrawTrape(win, Color::White, WinWidth / 2, 500, 200, WinWidth / 2, 300, 100);
        win.display();

在这里插入图片描述

四、轨道绘制

const int roadWidth = 1800;
const int roadSegLength = 180;
const int roadCount = 1884;

对于每个轨道，用一个结构体来实现，小写的 x，y，z 代表，每个轨道的中心，在 3D 世界中的坐标，大写的 X 和 Y，则是 3D 映射到 2D 时的屏幕坐标，大写的 W 代表这条轨道映射到屏幕后，它的宽度。
实现一个带参构造函数，利用初始化列表进行初始化。
然后实现一个 project 函数，代表 3D 到 2D 的映射，camX，camY，camZ 代表的是 3D 相机的位置，接下来我会讲一些数学的概念。听不懂没有关系，只要你能够自己跟着把代码写出来，并且通过修改每个参数，运行后得到你想要的效果就可以了。不用太计较这里的数学计算。
首先，当相机位置 camZ 确定时，z 越大，那么这条轨道就应该越小，所以实现这么一个反比例函数，计算缩放比例 scale。
利用这个缩放比例，可以计算出 X 和 Y，像这样。
最后计算 W，也就是每个轨道的实际屏幕宽度，和 scale 强相关，所以作为系数乘上去。

struct Road {
float x, y, z;
float X, Y, W;
float scale;
Road(int _x, int _y, int _z): x(_x), y(_y), z(_z) {}
void project(int camX, int camY, int camZ) {
        scale = 1.0 / (z - camZ);
        X = (1 + (x - camX) * scale) * WinWidth / 2;
        Y = (1 - (y - camY) * scale) * WinHeight / 2;
        W = scale * roadWidth * WinWidth / 2;
    }
};

定义一个轨道的 vector，每个轨道的 x 和 y 都是 0，z 坐标按照 i 进行平铺。

    vector<Road> roads;
for (int i = 0; i < roadCount; ++i) {
Road r(0, 0, (i+1) * roadSegLength);
        roads.push_back(r);
    }

因为近大远小的关系，所以屏幕上只显示 300 个轨道，对于每个轨道，调用 project 计算投影，传入的是相机的位置，其中 y 代表竖直方向，设定为 1600。
获取当前轨道和前一个轨道，分别为 now 和 pre，利用这两个轨道，可以计算出一个梯形，并且设置好颜色，稍微做点差异化，产生相间的效果。运行看下效果。

 
for (int i = 0; i < 300; ++i) {
            Road& now = roads[i % roadCount];
            now.project(0, 1600, 0);
if (!i) {   
continue;}
            Road& pre = roads[(i - 1) % roadCount];
            Color road = i % 2 ? Color(105, 105, 105) :
DrawTrape(win, road, pre.X, pre.Y, pre.W, now.X, now.Y, now.W);
        }

当然，可以在 i 这里除上一个数，使得两个颜色区分的时候，不会那么密集。看下效果。这里如果你不理解，怎么办呢？你就多试几个数字，试着试着感觉就有了。

Color road = (i/3) % 2 ? Color(105, 105, 105) : Color(101, 101, 101);

五、边缘绘制

Color edge = (i/3) % 2 ? Color(0, 0, 0) : Color(255, 255, 255);

DrawTrape(win, edge, pre.X, pre.Y, pre.W*1.3, now.X, now.Y, now.W*1.3);

六、草坪绘制

Color grass = i / 3 % 2 ? Color(16, 210, 16) : Color(0, 199, 0);

DrawTrape(win, grass, pre.X, pre.Y, WinWidth, now.X, now.Y, WinWidth);

七、前后移动

    for (int i = 0; i < roadCount; ++i) {
Road r(0, 0, (i+1) * roadSegLength);
        roads.push_back(r);
    }
int cameraZ = 0;
while (win.isOpen()) { 
if (Keyboard::isKeyPressed(Keyboard::Up)) cameraZ += roadSegLength;
if (Keyboard::isKeyPressed(Keyboard::Down)) cameraZ -= roadSegLength;
        win.clear();
int roadIndex = cameraZ / roadSegLength;

for (int i = roadIndex; i < roadIndex + 300; ++i) {
            Road& now = roads[i % roadCount];
            now.project(0, 1600, cameraZ );

八、左右移动

除了前后移动，左右也可以移动。同样是控制相机的坐标，定义 cameraX 代表相机的 x坐标。

int cameraZ = 0;
int cameraX = 0;

分别按下左键和右键时，更改 cameraX 的值。

if (Keyboard::isKeyPressed(Keyboard::Left)) cameraX -= 100;

if (Keyboard::isKeyPressed(Keyboard::Right)) cameraX += 100;

然后在这里把 cameraX 代替原来 0 的值。

now.project(cameraX, 1600, cameraZ);

运行，发现露馅了。没事，宽度乘10就好了。

DrawTrape(win, grass, pre.X, pre.Y, 10*WinWidth, now.X, now.Y, 10*WinWidth);

九、曲线轨道

这节课我们想办法让这条路，能够变成弯的，看起来更加的真实，在原来的路上，加上一个曲线因子。

float scale, curve;

Road(int _x, int _y, int _z, float _c): x(_x), y(_y), z(_z), curve(_c) {}

然后在实例化 Road 的时候，当 i 在 0 到 300 之间，曲线因子就是 0.5，否则就是负的 0.5。构造的时候，传参传进去。

float curve =  (i > 0 && i < 300) ? 0.5 : -0.5;

Road r(0, 0, (i+1) * roadSegLength, curve);

然后定义一个 x 和 dx，初始化都为 0，这段代码怎么去理解呢？这里的 now.curve 就理解成加速度，那么 dx 就是速度，而 x 就是位移，这样这条路弯曲起来就看起来非常的连续了，看下效果。

int roadIndex = cameraZ / roadSegLength;
float x = 0, dx = 0;
for (int i = roadIndex; i < roadIndex + 300; ++i) {
            Road& now = roads[i % roadCount];
            now.project(cameraX - x, 1600, cameraZ);
            x += dx;
            dx += now.curve;

十、课山坡轨道

然后我希望这个轨道，有一种跌宕起伏的感觉，三角函数可以做到这一点，所以每个轨道的中心的 y 坐标，用一个三角函数 sin 来实现，振幅 1600，像这样：

相机的位置从 1600 作为基准，再加上起始轨道的 y 坐标，像这样。

int cameraY = 1600 + roads[roadIndex].y;
int minY = WinHeight;

这里的 1600 就可以改成这个 cameraY 了。所以这个 cameraY 的范围，就根据正弦函数的值，变成了 0 到 3200。

now.project(cameraX - x, cameraY, cameraZ);

这时候我们发现，效果好像不对，问题出在哪里呢？
原因是这样的。
需要注意的是，一旦出现跌宕起伏，那么如果出现一个 Y 值最小的轨道，后面比 Y 值大的轨道，就不应该被绘制出来，注意这里用的屏幕坐标系，所以越往上值越小。

int roadIndex = cameraZ / roadSegLength;

float x = 0, dx = 0;
int cameraY = 1600 + roads[roadIndex].y;
int minY = WinHeight;

那么判断当前的 Y 是否比最小的 Y 小，如果小，那么记录这个最小值；否则直接 continue，代表这条轨道不用绘制，来看看效果。

if (now.Y < minY) {

                minY = now.Y;

 
else {        
continue;
 }

十一、循环轨道

然后我们希望整条路，能够产生循环，这样就可以，用有限的 Road 对象来展现无限的路。
计算这条路的总长度 totalLength，如果发现 cameraZ 的位置已经大于总长度了，就减去总长度，如果小于总长度，就变成负数了，那么加上总长度。
其实就是让 cameraZ 的值，始终保持在 [0, totalLength) 之间。

int totalLength = roadCount * roadSegLength;
while (cameraZ >= totalLength) cameraZ -= totalLength;
while (cameraZ < 0) cameraZ += totalLength;

now.project(cameraX - x, cameraY, cameraZ - (i >= roadCount ? totalLength : 0) );

然后你会发现，这里出现了一些断层，这个不是很合理。
根据 PI 计算一下，roadCount 让它是 3.14 的倍数就好了，那就 3.14 乘上 600，变成 1884 ，看下效果。

const int roadCount = 1884;

十二、背景展示

准备一张云的图片，加载一个纹理，并且生成一个精灵。宽度是窗口宽度，高度是窗口高度的一半。

    Texture bg;
    bg.loadFromFile("cloud.png");
Sprite s(bg, IntRect(0, 0, WinWidth, WinHeight/2));

然后在每次绘制轨道的时候，把它绘制出来。

if (now.Y < minY) {
                minY = now.Y;
            }     
else {       
continue;
            }
win.draw(s);

十三、引入速度

引入一个赛车前进的速度，speed 初始化为 0。

int cameraZ = 0;
int cameraX = 0;
int speed = 100;

当键盘按下 UP 和 DOWN 的时候，不再修改 cameraZ 的值，而是修改速度的值，然后最终，cameraZ 把这个速度累加上就好了。
这样一来，往前往后，修改的就是速度，不再是位移。

if (Keyboard::isKeyPressed(Keyboard::Up)) {
if (speed > 1000) speed = 1000;
}
if (Keyboard::isKeyPressed(Keyboard::Down)) {
speed -= 2;
if (speed < 100) speed = 100;
}
cameraZ += speed;

十四、物品绘制

接下来在这条路上，间隔的绘制物品，每个物品在图片的宽高是 450，这个作为常量，根据你图片的大小，进行修改即可。

const int itemSize = 450;

Road 的结构体中，定义一个精灵 spr。

struct Road {
float x, y, z;
float scale, curve;
    Sprite spr;

实现一个 drawItem 的函数，设置好纹理的矩形，缩放比例，以及位置，位置的计算方式比较简单，X 坐标和这条路保持一致，Y 坐标减去 W。然后给它绘制出来。

    s.setScale(W / itemSize, W / itemSize);
    s.setPosition(X, Y - W);
    win.draw(s);
}

然后定义一个物品的纹理对象，加载对应的图片，生成一个精灵对象。

    Texture item;
    item.loadFromFile("item.png");
Sprite sitem(item);

把精灵对象通过传参，传到 Road 对象中。

Road r(0, sin(i/30.0)*1600, (i + 1) * roadSegLength, curve, sitem);

然后一个 for 循环，注意从后往前绘制，否则遮挡关系会不对。为了不产生密集恐惧症，我们可以 % 上一个 20，每 20 个轨道，出现一个物品。

for (int i = roadIndex + 300; i > roadIndex; --i) {
if (i % 20 == 0)
                roads[i % roadCount].drawItem(win);
        }

 Road r(0, 0, (i + 1) * roadSegLength, curve, sitem);

十五、课数字路障

我们把路上的这些物品，显示成一些不同的数字，有数字，有符号。
首先定义这么一个字符串，和这张图片中的每个图片一一对应。

const char charItem[] = "1234567890+*/-%";

然后在 Road 中定义两个变量，operatorIndex 代表符号在 charItem 中的下标，numberIndex 代表数字 charItem 中的下标。

int operatorIndex;
int numberIndex;

接下来就可以开始初始化了，为了数字不会太密集，采用随机数的方式，如果是 200 的倍数，才出现物品。同样是通过随机的方式，尽量不出现 0，因为除 0 和模 0 都没意义。
operatorIndex 等于 -1 代表这个 Road 上没有东西。

    Road(int _x, int _y, int _z, float _c, Sprite _spr): x(_x), y(_y), z(_z), curve(_c), spr(_spr){
if (rand() % 200 == 0) {
            operatorIndex = (rand() % 5) + 10;
            numberIndex = rand() % 10;
if (numberIndex == 9) {
                numberIndex = 0;
            }
        }
else {
            operatorIndex = -1;
        }
    }

然后我们重载原先的 drawItem，并且加入一个新的参数，index 代表的是 charItem 中的下标，xPlacement 则表示 x 方向的偏移。然后 left 和 top 则代表的是在这张图上的（对应数字或者符号）的左上角坐标。

void drawItem(RenderWindow& win, int index, int xPlacement) {
        Sprite s = spr;
int left = (index % 5) * itemSize;
int top = (index / 5) * itemSize;
        s.setTextureRect(IntRect(left, top, itemSize, itemSize));
        s.setScale(W / itemSize, W / itemSize);
        s.setPosition(X + xPlacement*W, Y - W);
        win.draw(s);
    }
void drawItem(RenderWindow& win) {
if (operatorIndex == -1) { 
return;
        }
drawItem(win, operatorIndex, -1);
drawItem(win, numberIndex, 0);
    }

这里的取模就可以去掉了。

for (int i = roadIndex + 300; i > roadIndex; --i) {
            roads[i % roadCount].drawItem(win);
        }

十六、分数展示

我们在窗口的左上角，展示一个分数，并且还是这张图片。先定义一个分数 score，尽量考虑到所有情况，所以初始化 - 的 1234567890。

然后实现一个 DrawNumber 函数，sItem 代表数字对应那个精灵，x 和 y 代表显示在屏幕的左上角坐标。然后把 number 转换成字符串，存储到 ch 中。
遍历这个字符串，并且去 charItem 中找到对应的下标，利用相同的绘制方式，把它绘制在屏幕上。

void DrawNumber(RenderWindow& win, Sprite sItem, int number, int x, int y) {
char ch[100] = {'\0'};
    _itoa_s(number, ch, 10);
int len = strlen(ch);
for (int i = 0; i < len; ++i) {
        Sprite s = sItem;
int index = -1; 
for (int j = 0; charItem[j]; ++j) { 
if (charItem[j] == ch[i]) {
                index = j;    
break;
            }
        }
int left = (index % 5) * itemSize;
int top = (index / 5) * itemSize;
        s.setTextureRect(IntRect(left, top, itemSize, itemSize));
        s.setScale(0.18, 0.18);
        s.setPosition(x + 0.13 * itemSize * i, y);
        win.draw(s);
    }
}

然后调用即可。

    s.setTextureRect(IntRect(0, 0, WinWidth, minY));
            win.draw(s);         
DrawNumber(win, sitem, score, 10, 10);

十七、重新生成

如果每次路过都把数字清空，那么迟早有一天，路上就没有数字了，于是实现一个重新生成的接口，这里做一点小改动，这个 Road 一开始，是通过随机计算的。
当然，如果 generateItem 直接传一个 true，那么必定产生数字。

Road(int _x, int _y, int _z, float _c, Sprite _spr): x(_x), y(_y), z(_z), curve(_c), spr(_spr){
generateItem(false);
    }
void generateItem(bool bAlwaysGen) {
if (bAlwaysGen || rand() % 200 == 0) {
            operatorIndex = (rand() % 5) + 10;
            numberIndex = rand() % 10;
if (numberIndex == 9) {
                numberIndex = 0;
            }
        }
else {
            operatorIndex = -1;
        }
    }

所以当前这条路如果正好出屏幕外，那么就把 i + 1500 的轨道，生成一个新的数字。

now.operatorIndex = -1;
roads[(i + 1500) % roadCount].generateItem(

十八、跳跃功能

为了增加趣味性，可以引入跳跃功能，从而可以跳过这个数字。加入一个状态叫 isJumping ，一开始是 false，代表没有跳跃。
跳跃会改变 z 的坐标，所以 z 代表实际偏移的 z ，dz 代表跳跃时的速度。

bool isJumping = false;
float z = 0, dz = 0;

如果按下空格，当非跳跃状态，则切换到跳跃状态，并且把起跳速度设置为 150。

if (Keyboard::isKeyPressed(Keyboard::Space)) {     
if (isJumping == false) {
                isJumping = true;
                dz = 150;
            }
        }

然后如果一直在跳跃中，则减去 5，这里就是在模拟自由落体，这里的 5 就是加速度，然后 z 累加 dz 的过程，就是模拟的位移和速度，当 z 小于等于 0，说明落地了，isJumping 置为 false。

if (isJumping) {
            dz -= 5;
            z += dz;
if (z <= 0) {
                z = 0;
                isJumping = false;
            }
        }

最后，当遇到数字的时候，如果非跳跃状态，才会生效，否则没有任何效果。

if (now.Y >= WinHeight) {
if (!isJumping && now.operatorIndex != -1) {
                    score = caculateScore(score, now.operatorIndex, now.numberIndex);
                    now.operatorIndex = -1;
                    roads[(i + 1500) % roadCount].generateItem(true);
                }
            }

十九、课音效播放

接下来，我们加入一些音效，让游戏更加的带感。引入一个头文件。

初始化三个音效缓存，分别代表碰到数字、起跳、落地音效。

buffer[1].loadFromFile("jump.mp3"); 
buffer[2].loadFromFile("falldown.mp3");

起跳可以这么写。

if (isJumping == false) {
                sound.setBuffer(buffer[1]);
                sound.play();
                isJumping = true;
                dz = 150;
            }

落地可以这么写。

if (z <= 0) {
                z = 0;
                isJumping = false;
                sound.setBuffer(buffer[2]);
                sound.play();
            }

碰到数字可以这么写。

if (!isJumping && now.operatorIndex != -1) {
                    score = caculateScore(score, now.operatorIndex, now.numberIndex);
                    now.operatorIndex = -1;
                    roads[(i + 1500) % roadCount].generateItem(true);
                    sound.setBuffer(buffer[0]);
                    sound.play();
                }

二十、音乐播放

再加上一个 bgm。

 SoundBuffer buffer[5];
    Sound sound, bgm;
    buffer[0].loadFromFile("get.mp3");
    buffer[1].loadFromFile("jump.mp3"); 
    buffer[2].loadFromFile("falldown.mp3");
    buffer[3].loadFromFile("tianfuyue.mp3");
    buffer[4].loadFromFile("liumaishenjian.mp3");

在窗口 while 之前，调用 play 接口。

bgm.setBuffer(buffer[3]);
bgm.setLoop(true);
bgm.play();

二十一、音乐切换

音乐可以随着赛车的速度，进行切换，当开的快的时候，播放 4 号音乐；否则，播放 5 号音乐。

if (Keyboard::isKeyPressed(Keyboard::Up)) {
            speed += 2;
if (speed > 1000) speed = 1000;
if (speed == 500) {
                speed = 502;
                bgm.setBuffer(buffer[4]);
                bgm.play();
            }
        }
if (Keyboard::isKeyPressed(Keyboard::Down)) {
            speed -= 2;
if (speed < 100) speed = 100;
if (speed == 500) {
                speed = 498;
                bgm.setBuffer(buffer[3]);
                bgm.play();
            }
        }