从2D时钟到3D旋转立方体：手把手教你用小龙/小熊猫C++玩转EGE和raylib
在编程学习的过程中，没有什么比通过实际项目来掌握新技能更有效了。今天，我们将通过两个视觉上引人入胜的项目——一个使用EGE库的2D模拟时钟和一个使用raylib的3D旋转立方体——来探索C++图形编程的奇妙世界。这两个项目不仅能让你的代码活起来，还能让你直观地理解不同图形库的特点和适用场景。
1. 环境准备与工具选择
在开始我们的图形编程之旅前，选择合适的开发环境至关重要。对于C++图形编程初学者来说，小龙Dev-C++和小熊猫C++是两个非常友好的选择。
开发工具对比：
| 特性 | 小龙Dev-C++ | 小熊猫C++ |
|---|---|---|
| 支持的图形库 | EGE, EasyX, raylib | EGE, raylib, FreeGLUT等 |
| 跨平台支持 | 仅Windows | Windows和Linux |
| 安装方式 | 标准安装程序 | 安装版和绿色版可选 |
| 更新维护 | 持续更新 | 持续更新 |
| 初学者友好度 | 高 | 极高 |
提示：如果你是Windows用户且主要关注2D图形，小龙Dev-C++是个不错的选择；如果你需要跨平台支持或对3D图形更感兴趣，小熊猫C++可能更适合你。
安装步骤非常简单：
- 访问官网下载最新版本
- 运行安装程序（小龙）或解压绿色版（小熊猫）
- 启动IDE，新建项目即可开始编码
2. EGE入门：打造精美2D时钟
EGE(Easy Graphics Engine)是一个轻量级的2D图形库，特别适合初学者入门图形编程。让我们通过创建一个模拟时钟来体验EGE的魅力。
2.1 项目结构与基础设置
首先，我们需要设置EGE项目的基本框架：
#include <stdio.h> #include <math.h> #include <egegraphics.h> const int WIDTH = 800; const int HEIGHT = 600; int main() { initgraph(WIDTH, HEIGHT); // 初始化图形窗口 setbkcolor(BLACK); // 设置背景色 cleardevice(); // 清屏 // 主循环代码将在这里 getch(); // 等待按键 closegraph(); // 关闭图形窗口 return 0; }2.2 绘制时钟表盘
时钟的核心是表盘和指针。让我们先绘制静态的表盘部分：
void drawClockFace(int cx, int cy, int rad) { setcolor(WHITE); setlinestyle(SOLID_LINE, 0, 2); // 绘制外圆 circle(cx, cy, rad); // 绘制刻度 for (int i = 0; i < 60; i++) { int len = (i % 5 == 0) ? 20 : 8; // 小时刻度更长 double angle = i * 6 * PI / 180; // 每6度一个刻度 int x1 = cx + rad * sin(angle); int y1 = cy - rad * cos(angle); int x2 = cx + (rad - len) * sin(angle); int y2 = cy - (rad - len) * cos(angle); line(x1, y1, x2, y2); } // 绘制中心点 setfillcolor(WHITE); fillellipse(cx, cy, 5, 5); }2.3 添加动态指针
时钟的灵魂在于它的动态指针。我们需要根据当前时间计算指针位置：
void drawClockHands(int hour, int minute, int second, int cx, int cy, int rad) { // 计算各指针角度（弧度） double secAngle = second * 6 * PI / 180; double minAngle = minute * 6 * PI / 180 + secAngle / 60; double hourAngle = hour * 30 * PI / 180 + minAngle / 12; // 绘制时针 setlinestyle(SOLID_LINE, 0, 8); setcolor(WHITE); line(cx, cy, cx + rad*0.5*sin(hourAngle), cy - rad*0.5*cos(hourAngle)); // 绘制分针 setlinestyle(SOLID_LINE, 0, 5); setcolor(LIGHTGRAY); line(cx, cy, cx + rad*0.7*sin(minAngle), cy - rad*0.7*cos(minAngle)); // 绘制秒针 setlinestyle(SOLID_LINE, 0, 2); setcolor(RED); line(cx, cy, cx + rad*0.9*sin(secAngle), cy - rad*0.9*cos(secAngle)); }2.4 实现实时更新
最后，我们需要让时钟动起来，实时显示当前时间：
int main() { // ...初始化代码... int cx = WIDTH / 2, cy = HEIGHT / 2; int rad = (WIDTH < HEIGHT ? WIDTH : HEIGHT) / 2 - 20; // 设置XOR绘图模式，便于擦除 setwritemode(R2_XORPEN); while (!kbhit()) { // 获取当前时间 SYSTEMTIME tm; GetLocalTime(&tm); // 绘制静态表盘 drawClockFace(cx, cy, rad); // 绘制指针（第一次绘制） drawClockHands(tm.wHour, tm.wMinute, tm.wSecond, cx, cy, rad); // 显示数字时间 char timeStr[20]; sprintf(timeStr, "%02d:%02d:%02d", tm.wHour, tm.wMinute, tm.wSecond); setcolor(WHITE); outtextxy(cx - 30, cy + rad / 2, timeStr); // 延时1秒 Sleep(1000); // 擦除指针（通过再次绘制） drawClockHands(tm.wHour, tm.wMinute, tm.wSecond, cx, cy, rad); } // ...清理代码... }3. raylib进阶：创建3D旋转立方体
现在，让我们转向更高级的3D图形编程。raylib是一个功能强大但易于上手的跨平台游戏开发库，非常适合3D图形入门。
3.1 初始化3D场景
3D编程的第一步是设置场景和摄像机：
#include <raylib.h> #include <math.h> int main() { // 初始化窗口 const int screenWidth = 800; const int screenHeight = 600; InitWindow(screenWidth, screenHeight, "3D旋转立方体"); // 初始化摄像机 Camera3D camera = { 0 }; camera.position = (Vector3){ 10.0f, 10.0f, 10.0f }; camera.target = (Vector3){ 0.0f, 0.0f, 0.0f }; camera.up = (Vector3){ 0.0f, 1.0f, 0.0f }; camera.fovy = 45.0f; camera.projection = CAMERA_PERSPECTIVE; // 设置目标帧率 SetTargetFPS(60);3.2 创建3D立方体
在raylib中，创建和渲染3D对象非常简单：
// 主游戏循环 while (!WindowShouldClose()) { // 更新摄像机位置，实现环绕效果 float time = GetTime(); camera.position.x = cos(time) * 15.0f; camera.position.z = sin(time) * 15.0f; // 开始绘制 BeginDrawing(); ClearBackground(RAYWHITE); // 开始3D模式 BeginMode3D(camera); // 绘制立方体 DrawCube(Vector3{0, 0, 0}, 2.0f, 2.0f, 2.0f, VIOLET); DrawCubeWires(Vector3{0, 0, 0}, 2.0f, 2.0f, 2.0f, BLACK); // 绘制参考网格和坐标轴 DrawGrid(10, 1.0f); DrawAxis(); EndMode3D(); // 显示FPS DrawFPS(10, 10); EndDrawing(); } CloseWindow(); return 0; }3.3 添加旋转动画
为了让立方体更有活力，我们可以让它自身旋转：
// 在循环开始前定义旋转角度变量 float rotationAngle = 0.0f; // 在主循环中更新旋转角度 rotationAngle += 0.5f; if (rotationAngle > 360) rotationAngle -= 360; // 修改立方体绘制代码，添加旋转参数 DrawCubeV(Vector3{0, 0, 0}, Vector3{2.0f, 2.0f, 2.0f}, VIOLET); DrawCubeWiresV(Vector3{0, 0, 0}, Vector3{2.0f, 2.0f, 2.0f}, BLACK);3.4 增强视觉效果
我们可以通过添加光照和材质来提升视觉效果：
// 在初始化后设置光照 SetCameraMode(camera, CAMERA_ORBITAL); // 修改立方体绘制代码，使用更高级的模型 Model cube = LoadModelFromMesh(GenMeshCube(2.0f, 2.0f, 2.0f)); // 在主循环中绘制模型而不是原始立方体 DrawModel(cube, Vector3{0, 0, 0}, 1.0f, VIOLET); DrawModelWires(cube, Vector3{0, 0, 0}, 1.0f, BLACK); // 不要忘记在程序结束时卸载模型 UnloadModel(cube);4. EGE与raylib深度对比
通过这两个项目的实践，我们可以清晰地看到EGE和raylib的不同特点和适用场景。
核心特性对比：
| 特性 | EGE | raylib |
|---|---|---|
| 主要用途 | 2D图形、教学演示 | 2D/3D游戏开发 |
| 跨平台支持 | 仅Windows | 全平台(Windows, Linux, macOS等) |
| 3D支持 | 无 | 完整支持 |
| 学习曲线 | 非常平缓 | 中等 |
| 文档质量 | 中文文档丰富 | 英文文档为主 |
| 性能 | 适合简单应用 | 高性能，适合游戏 |
| 社区生态 | 国内社区活跃 | 国际社区更活跃 |
选择建议：
- 如果你是教育用途或只需要简单的2D图形，EGE是更好的选择
- 如果你需要开发跨平台应用或涉及3D图形，raylib更合适
- 对于游戏开发，raylib提供了更完整的游戏开发框架
- 对于教学演示和小型工具开发，EGE更简单易用
注意：两个库都可以在小龙Dev-C++和小熊猫C++中使用，但raylib在小熊猫C++中的跨平台支持更好。
5. 常见问题与调试技巧
在实际开发过程中，你可能会遇到一些问题。以下是一些常见问题的解决方案：
EGE常见问题：
图形窗口不显示
- 确保调用了
initgraph函数 - 检查是否有杀毒软件阻止了程序运行
- 尝试以管理员身份运行程序
- 确保调用了
中文显示乱码
// 在程序开始时设置字符集 setfont(16, 0, "宋体");动画闪烁严重
- 使用双缓冲技术：
initgraph(WIDTH, HEIGHT, INIT_RENDERMANUAL); setbkmode(TRANSPARENT);
raylib常见问题：
3D模型不显示
- 检查摄像机位置和朝向
- 确保模型在摄像机视野内
- 检查模型加载是否成功
跨平台编译问题
- 在Linux上需要安装OpenGL开发库
- 确保小熊猫C++配置了正确的编译选项
性能优化技巧
// 在资源加载时 SetTextureFilter(texture, FILTER_BILINEAR); // 在主循环中避免频繁资源加载/卸载
调试技巧：
- 使用
printf或DrawText输出变量值 - 逐步构建场景，先验证简单图形再添加复杂元素
- 利用IDE的调试功能设置断点
- 查阅官方示例代码和文档
