小游戏和GUI编程(4) | 基于 SFML 的黑客帝国字符雨

2024-02-10 18:20
文章标签 编程 字符 gui 小游戏 黑客帝国 sfml

本文主要是介绍小游戏和GUI编程(4) | 基于 SFML 的黑客帝国字符雨，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

小游戏和GUI编程(4) | 基于 SFML 的黑客帝国字符雨

文章目录

  • 小游戏和GUI编程(4) | 基于 SFML 的黑客帝国字符雨
    • 1. 简介
    • 2. 规划
    • 3. 一个字符的下落
    • 3. 一个雨滴的下落
    • 4. 每个雨滴都是独一无二的
    • 5. 重构后， 降落多个雨滴
    • 6. 总结
    • 7. 参考

1. 简介

使用 SFML 实现黑客帝国字符雨的动态下落效果。

2. 规划

  • 一个字符下落
  • 一个雨滴的下落
  • 每个雨滴都是独一无二的
  • 重构后， 降落多个雨滴

3. 一个字符的下落

请添加图片描述

显示 SFML 窗口， 在窗口的中轴线上绘制一个降落的 H 字母， 字母是绿色的， 背景是黑色的。 每更新一帧， H 的位置就下降 16 个像素。 H 字母的大小也是 16 像素。

由于降落的比较快， 手动控制帧率为 10 FPS.

关键代码:

window.setFramerateLimit(10);...window.clear();sf::Text text;
text.setFont(font);
text.setFillColor(sf::Color::Green);
text.setCharacterSize(16);
text.setString(std::string(1, 'H'));
text.setPosition(x, y);
y = (y + 16) % win_height;
window.draw(text);window.display();

完整代码:

#include <SFML/Graphics.hpp>int main()
{constexpr int win_width = 640;constexpr int win_height = 480;sf::VideoMode videomode(win_width, win_height);const std::string title = "Matrix Rain SFML";sf::RenderWindow window(videomode, title);window.setFramerateLimit(10);sf::Font font;const std::string asset_dir = "../Resources";if (!font.loadFromFile(asset_dir + "/Arial.ttf")){printf("Error: font not found\n");return 1;}int x = win_width / 2;int y = 0;while (window.isOpen()){sf::Event event;while (window.pollEvent(event)){if (event.type == sf::Event::Closed) { window.close(); }}window.clear();sf::Text text;text.setFont(font);text.setFillColor(sf::Color::Green);text.setCharacterSize(16);text.setString(std::string(1, 'H'));text.setPosition(x, y);y = (y + 16) % win_height;window.draw(text);window.display();}return 0;
}

3. 一个雨滴的下落

一个雨滴的下落， 说的是一个动态的过程， 由于它下落的很快， 可以同时显示它的多个位置， 因此纵向方向绘制多个字符， 就表示出了一个时间间隔内的雨滴降落轨迹。

    std::string seq = "abcdefghijklmnopqrstuvwxyz";for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color::Green);text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16;text.setPosition(x, y);window.draw(text);}

雨滴轨迹中最下方的是现在的位置， 颜色最深， 最上面的颜色最浅。 因此可以根据雨滴的的长度和位置， 使用渐变的颜色， 来表达雨滴的轨迹:

    std::string seq = "abcdefghijklmnopqrstuvwxyz";for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16;text.setPosition(x, y);window.draw(text);}

雨滴的轨迹， 是从上往下降落的， 因此当我们只关注单个雨滴的颜色最深的绿色字符时， 它的位置应该是从上往下的:

int base_y = 0;while(window.isOpen())
{std::string seq = "hello world";for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16 + base_y;text.setPosition(x, y);window.draw(text);}base_y = (base_y + 16) % win_height;
}

效果:
请添加图片描述

4. 每个雨滴都是独一无二的

每个雨滴对应的字符串是不同的（字符数量， 字符内容）， 出现位置也不相同。

对于单个雨滴， 首先随机化它的出现位置， 也就是 x 坐标； 而在这个雨滴降落到窗口最下方之前， x 坐标需要保持不变； 当降落到窗口最下方时， 重新随机化 x 坐标:

x = rand() % (win_width / 16) * 16;while (window.isOpen())
{std::string seq = "hello world";for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16 + base_y;text.setPosition(x, y);window.draw(text);}base_y = base_y + 16;if (base_y >= win_height){base_y = 0;x = rand() % (win_width / 16) * 16;}
}

请添加图片描述

对于字符内容、 字符长度， 也需要在每次雨滴到达窗口最下方的时候更新:

static std::string get_random_seq(int& seqlen)
{seqlen = rand() % 10 + 5;std::string seq(seqlen, ' ');for (int i = 0; i < seq.size(); i++){seq[i] = (rand() % 26) + 'a';}return seq;
}std::string seq = get_random_seq(seqlen);
int base_y = 0;
while (window.isOpen())
{window.clear();for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16 + base_y;text.setPosition(x, y);window.draw(text);}base_y = base_y + 16;if (base_y >= win_height){base_y = 0;x = rand() % (win_width / 16) * 16;seq = get_random_seq(seqlen);}window.display();
}

5. 重构后， 降落多个雨滴

首先， 针对单个雨滴的降落， 把之前的面向过程的写法重构为 OOP 写法. 通过封装为 class Rain, 提供的 drop() 方法完成了渲染， 使得 main loop 代码变得清爽：

#include <SFML/Graphics.hpp>static std::string get_random_seq(int& seqlen)
{seqlen = rand() % 10 + 5;std::string seq(seqlen, ' ');for (int i = 0; i < seq.size(); i++){seq[i] = (rand() % 26) + 'a';}return seq;
}class Rain
{
public:Rain(int a_win_width, int a_win_height, sf::Font& a_font){seqlen = rand() % 10 + 5;seq = get_random_seq(seqlen);x = rand() % (win_width / 16) * 16;font = a_font;base_y = 0;win_width = a_win_width;win_height = a_win_height;}std::string seq;int seqlen;int x;sf::Font font;int base_y;int y = 0;int win_width;int win_height;void drop(sf::RenderWindow& window){for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16 + base_y;text.setPosition(x, y);window.draw(text);}base_y = base_y + 16;if (base_y >= win_height){base_y = 0;x = rand() % (win_width / 16) * 16;seq = get_random_seq(seqlen);}}
};int main()
{srand((unsigned)time(NULL));constexpr int win_width = 640;constexpr int win_height = 480;sf::VideoMode videomode(win_width, win_height);const std::string title = "Matrix Rain SFML";sf::RenderWindow window(videomode, title);window.setFramerateLimit(10);sf::Font font;const std::string asset_dir = "../Resources";if (!font.loadFromFile(asset_dir + "/Arial.ttf")){printf("Error: font not found\n");return 1;}Rain rain(win_width, win_height, font);while (window.isOpen()){sf::Event event;while (window.pollEvent(event)){if (event.type == sf::Event::Closed) { window.close(); }}window.clear(sf::Color::Black);rain.drop(window);window.display();}return 0;
}

其次， 为了渲染多个雨滴， 每个雨滴的都需要执行 drop() 函数。 由于 drop() 函数里的最后判断重置的代码， 和构造函数里重复了， 因此进一步提取出 reset() 成员函数。

最终代码

#include <SFML/Graphics.hpp>static std::string get_random_seq(int& seqlen)
{seqlen = rand() % 20 + 8;std::string seq(seqlen, ' ');for (int i = 0; i < seq.size(); i++){seq[i] = (rand() % 26) + 'a';}return seq;
}class Rain
{
public:Rain(int a_win_width, int a_win_height, sf::Font& a_font){srand((unsigned)time(NULL));font = a_font;win_width = a_win_width;win_height = a_win_height;reset();}void reset(){seq = get_random_seq(seqlen);x = rand() % (win_width / 16) * 16;base_y = 0;}std::string seq;int seqlen;int x;sf::Font font;int base_y;int y = 0;int win_width;int win_height;void drop(sf::RenderWindow& window){for (int i = 0; i < seq.size(); i++){sf::Text text;text.setFont(font);text.setFillColor(sf::Color(0, ((i+1) * 1.0/seq.size())*255, 0));text.setCharacterSize(16);text.setString(std::string(1, seq[i]));y = i * 16 + base_y;text.setPosition(x, y);window.draw(text);if (y >= win_height){reset();break;}}base_y += 16;}
};int main()
{constexpr int win_width = 800;constexpr int win_height = 600;sf::VideoMode videomode(win_width, win_height);const std::string title = "Matrix Rain SFML";sf::RenderWindow window(videomode, title);window.setFramerateLimit(10);sf::Font font;const std::string asset_dir = "../Resources";if (!font.loadFromFile(asset_dir + "/Arial.ttf")){printf("Error: font not found\n");return 1;}std::vector<Rain> rains(40, Rain(win_width, win_height, font));for (int i = 0; i < rains.size(); i++){rains[i].reset();}while (window.isOpen()){sf::Event event;while (window.pollEvent(event)){if (event.type == sf::Event::Closed) { window.close(); }}window.clear(sf::Color::Black);for (auto& rain: rains){rain.drop(window);}window.display();}return 0;
}

最终效果：

请添加图片描述

6. 总结

本文提供了基于 SFML 的仿黑客帝国的雨滴下落效果的的动态窗口显示， 从最简单的单个字符下落显示， 到最终的多雨滴、随机出现位置、序列长度随机化， 每一步都给出了代码和基本的解释。 在简介阶段只做了初步的任务划分， 在每一小节则进一步细化需求， 通过一步或多步实现了效果， 并在必要的时候（单个雨滴到多个雨滴）时， 通过重构代码， 降低了代码调用的复杂度， 从而为多个雨滴的降落效果提供了便利。

7. 参考

  • https://www.cnblogs.com/zjutzz/p/17067234.html

这篇关于小游戏和GUI编程(4) | 基于 SFML 的黑客帝国字符雨的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/697778。

相关文章

Linux 网络编程 --- 应用层

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码： 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口，https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【编程底层思考】垃圾收集机制，GC算法，垃圾收集器类型概述

【编程底层思考】垃圾收集机制，GC算法，垃圾收集器类型概述

Java的垃圾收集（Garbage Collection，GC）机制是Java语言的一大特色，它负责自动管理内存的回收，释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍： 一、垃圾收集机制概述： 对象存活判断：垃圾收集器定期检查堆内存中的对象，判断哪些对象是“垃圾”，即不再被任何引用链直接或间接引用的对象。内存回收：将判断为垃圾的对象占用的内存进行回收，以便重新使用。
阅读更多...
Go Playground 在线编程环境

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow
阅读更多...
深入理解RxJava：响应式编程的现代方式

深入理解RxJava：响应式编程的现代方式

在当今的软件开发世界中，异步编程和事件驱动的架构变得越来越重要。RxJava，作为响应式编程（Reactive Programming）的一个流行库，为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava？💯 响应式编程的优势💯 RxJava的核心概念
阅读更多...
函数式编程思想

函数式编程思想

我们经常会用到各种各样的编程思想，例如面向过程、面向对象。不过笔者在该博客简单介绍一下函数式编程思想. 如果对函数式编程思想进行概括，就是f(x) = na(x) , y=uf(x)…至于其他的编程思想，可能是y=a(x)+b(x)+c(x)…，也有可能是y=f(x)=f(x)/a + f(x)/b+f(x)/c… 面向过程的指令式编程 面向过程，简单理解就是y=a(x)+b(x)+c(x)
阅读更多...
Java并发编程之——BlockingQueue（队列）

Java并发编程之——BlockingQueue（队列）

一、什么是BlockingQueue BlockingQueue即阻塞队列，从阻塞这个词可以看出，在某些情况下对阻塞队列的访问可能会造成阻塞。被阻塞的情况主要有如下两种： 1. 当队列满了的时候进行入队列操作2. 当队列空了的时候进行出队列操作123 因此，当一个线程试图对一个已经满了的队列进行入队列操作时，它将会被阻塞，除非有另一个线程做了出队列操作；同样，当一个线程试图对一个空
阅读更多...
生信代码入门：从零开始掌握生物信息学编程技能

生信代码入门：从零开始掌握生物信息学编程技能

少走弯路,高效分析;了解生信云,访问 【生信圆桌x生信专用云服务器】 : www.tebteb.cc 介绍 生物信息学是一个高度跨学科的领域，结合了生物学、计算机科学和统计学。随着高通量测序技术的发展，海量的生物数据需要通过编程来进行处理和分析。因此，掌握生信编程技能，成为每一个生物信息学研究者的必备能力。 生信代码入门，旨在帮助初学者从零开始学习生物信息学中的编程基础。通过学习常用
阅读更多...
rtmp流媒体编程相关整理2013(crtmpserver,rtmpdump,x264,faac)

rtmp流媒体编程相关整理2013(crtmpserver,rtmpdump,x264,faac)

转自：http://blog.163.com/zhujiatc@126/blog/static/1834638201392335213119/ 相关资料在线版(不定时更新，其实也不会很多，也许一两个月也不会改) http://www.zhujiatc.esy.es/crtmpserver/index.htm 去年在这进行rtmp相关整理，其实内容早有了，只是整理一下看着方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2