EtherTK 解构《武士零》 - 冲刺特效

冲刺特效也就是俗称的“残影”,《武士零》中玩家几乎所有的冲刺操作都会或多或少地伴随着这种特效,在本次重现的思路中,残影由一系列透明度随时间变化的剪影风格序列帧构成,当然,考虑到赛博朋克的艺术风格,这些残影的颜色也主要应该由红色和蓝色构成——
武士零冲刺演示

着色器代码

想要实现剪影风格的渲染也很简单,简单来说可以使用如下的 shader 代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
in vec2 textureCoord;

out vec4 FragColor;

uniform sampler2D texture1;

uniform vec3 color;
uniform float alpha;

void main()
{
vec4 textureColor = texture(texture1, textureCoord);
if (textureColor.a == 0)
FragColor = vec4(0, 0, 0, 0);
else
FragColor = vec4(color, alpha);
}

因为要在外部程序中控制透明度渐变从而实现消逝的过程,所以我们传入了 alpha 这个 Uniform 值,由于原始素材中没有使用半透明的像素,所以我们直接将传入的透明度作为了最终的片段透明度输出,如果需要考虑到原始素材中的半透明像素,那么只需要将 FragColor = vec4(color, alpha); 变更为 FragColor = vec4(color, alpha * textureColor.a);

阅读更多

EtherTK 解构《武士零》 - 蒙版光照

其实与光照的死磕在很久之前便已经开始了,在开发第一代使用 OpenGL 可编程渲染管线的引擎时,便实现了一套简单的 2D 光照算法,那时候更多的还是借鉴自 LearnOpenGL 的 3D 光照思路,但是在对《武士零》的研究过程中,发现如果仅制作 2D 游戏的话,使用源自上个游戏技术世代的蒙版贴图,配合现代化的渲染管线,可以更简明地实现更符合艺术效果的光照效果(至少在像素风格的 2D 游戏看来是这样),本文将对该过程的探索过程进行阐述。

本文及相关程序所使用的实现依然为 EtherTk,不过由于需要更精确自由的渲染逻辑,所以底层实现由 SDL Renderer 变更为了 OpenGL。

基于公式计算的光照

此节内容更多参考自:投光物 - LearnOpenGL CN

对于游戏中的光照公式可以简化为:物体受光 = 环境光 + 聚光灯(点光源可以看作是外切角为 360° 的聚光灯),而整个世界是一片漆黑没有任何光照的,环境光作为让场景中各物体雨露均沾接受光照的光源,为物体提供了最基础的光照贡献——简单理解,在不使用光照进行渲染的场景中,不经任何处理绘制的物体纹理贴图相当于被赋予了环境光强度为 1 的白色光照;而聚光灯的技术核心,更多的是使用统一的公式和参数描述指向性光源的外形,从而计算得到世界中受此影响的像素片段。

对于聚光灯的处理,首先要计算的便是处理其径向衰减,逆向思考一下,聚光灯也可以看做是指向性的点光源,所以在处理径向衰减的思路和点光源完全相同。虽然我向来不喜欢将晦涩的数学公式搬上台面,但是无奈光照这种基于物理和经验的模拟,很难找到除去公式之外的第二种表述方式——当然,这样方便了我们,即使不能完全理解,也是可以直接套用公式实现不错的效果:
径向衰减公式

阅读更多

EtherTK 解构《武士零》 - 动态文本

动态文本在很多拥有文字故事讲述的游戏中都各有体现,从拥有相当文本体量的 Galgame 类型游戏的经典打字机特效,到《武士零》《传说之下》这类融合了更多文字动态效果的游戏,动态文本在提升交互体验、增加画面质感、表达作者情绪 等方面均发挥了不小的作用。

考虑到《武士零》这款游戏对于团队在下一阶段的作品很有参考和学习的价值,于是便开始尝试从程序功能角度去解构这一部优秀的作品,动态文本作为相对简单的功能,便被优先提上了日程;在 EtherTk 的基础上,实现了相对丰富的动画文本效果,并提供了类似 Markdown 的轻量标记语法,使得策划同学可以在文案阶段对游戏内的文本动态效果进行设计,从而减轻引擎内工作量。

EtherTK 是我个人在旧有开源项目 EtherEngine 基础之上重构实现的一套工具集,核心理念便是 All In One Toolkit,用来方便使用 Lua 脚本快速开发和算法功能等验证;虽然 EtherTk 源代码现阶段仍未公开,但在本功能的实现过程中主要使用的 Graphic 模块主要是对 SDL Renderer 渲染管线相关功能的 1:1 封装,只要对 SDL2 全家桶的使用较为熟悉,便完全可以理解动态文本实现的相关思路。

下面对该功能的实现过程进行简要描述(先放一张游戏内的效果)。

《武士零》游戏内文本效果

阅读更多

GMTK - How To Think Like A Game Designer

MDA:A Formal Approach to Game Design and Game Research

一种用于游戏设计和游戏研究的规范化方法

M:mechanics 机制

用于描述 How The Game Works,如游戏规则,游戏系统,按钮功能,背包容量等等,如玩家的最大子弹数等。

D:dynamics 动态响应

用于描述 How The Player Atcs,如子弹数量和武器充足且容易获取时,玩家更倾向于使用爽快的射击和虐杀,当武器和攻击受限时,玩家会更倾向于潜行、暗杀等技巧性的玩法。

A: aesthetics 美学

用于描述 How The Player Feels,与图形和艺术风格等概念有别,此处更体现在玩家的直观感受上,如疯狂的射击能够带给玩家强大且不可阻挡的感觉。

阅读更多

面向猛新的小游戏制作 - EasyX 超级马里奥

近些日子有同学与我聊起来学校的小学期任务是用 EasyX 做一款超级马里奥,不由得来了兴趣,毕竟在一个月左右的时间内,以大多数同学的编程水平,在只提供了图形接口功能的 EasyX 图形库基础上去实现一个包含渲染、音频、数据存档和物理模拟的一个卷轴关卡游戏,本身的难度还是有的,更何况即便是单个功能可以花费点时间探究予以实现,但当整个程序作为一个具有游戏逻辑的系统时,就考验语法之上的架构能力了,如何使用面向对象进行类的划分,系统之间如何通信进行数据的传递,如何将输入与渲染的结果动态地呈现在窗口中……如果要相对完美地实现这些功能,对编程经验还是有一定的考验的。

念及在初学编程时对 EasyX 的旧情,便想挑战一下,看看现在的自己多少时间可以完成一个功能相对完整的超级马里奥。结果便是差不多花费了总计三天左右,在工作之余的摸鱼时间中、牺牲了部分休息时间,完成了一份有效代码约 1.5K 行,稍具可玩性的游戏程序,想到可能自己在编程过程中的思路可能对使用 EasyX 的初学者具有启发意义,便写下这篇文章,希望借此抛砖引玉。

在开始正文之前,请注意以下提醒:

  • 本文的读者是“猛新”而不是“萌新”,所以如果你对 C++ 的基础语法几乎一无所知,那么建议你先学习基础后再来阅读本文,否则配上本人特有的花里胡哨代码风格可能让你产生不必要的畏难情绪;
  • 正如上文所述,由于本项目只是一次心猿意马的随写,尽管考虑到了减少不必要的技术依赖(如习惯的 XML/JSON 存档),但是在代码风格上,还是可能会用到些许的 C++ 新特性或 STL 模板,这不是坏事,但是可能需要希望理解此些部分的同学多搜索一下相关内容补课;
  • 面向对象的设计和资源生命周期的管理等方面,站在完成者的角度来讲并不完美,但是考虑到深究会让代码体系变得更加复杂晦涩,且本身作为随写内容没有重构的必要,但是对于大部分初学的同学还是相对有参考价值的,如果你能注意到这些问题,并提出更优雅和安全的设计,那么恭喜你,你的编码水平已经脱离仅是让编译器不报错的阶段,开始向着代码架构的方向前进了;
  • 本文只是以点带面地讲述思路和技术关键点,并不是一篇手把手教你如何用 C++ 实现一个超级马里奥的教程,但是项目完整的代码工程和可以发布单文件版本下载链接我会放到文章最后,感兴趣的同学可以下载体验,请确保自己的电脑上装有 VisualStudio 2019/2022,并且安装了 EasyX 图形扩展
阅读更多

小说,日记,博客

应该是接触文学作品比较早的缘故,从小我便对文字创作有着比较浓厚的兴趣,从一开始不痛不痒的日记,到后来逐渐轮廓分明的小说,虽然文笔不见得随着岁月长进许多,但是笔下的内容却有了不小的变化。

记得小时候父母是鼓励我写点东西的,愿意拿出最精致的笔记本,任由我在上面写下稚嫩的文字。现在已经不记得最开始时写过什么,只记得后来更多的是天马星空的想象,一些在那时候的自己看起来充满想象力的英雄故事,或者是类似《玩具总动员》剧情中的玩具世界的故事——那时候玩具堆中最多的便是乐高,于是充满无限可能的方块世界大概是那时候的创作灵感。其实想象力应该至少是平均水平,父母说我小时候,可以躺在床上看着电风扇,联想到大飞机,然后是环游世界,故事可以不停歇地讲半个小时,虽然这些我都早已忘记。

在应试教育的大背景下,更早地开始动笔写点东西,似乎可以更轻松地应对学校生活中的语文课程,尤其是作文这个大BOSS。但是事实上我对作文的兴趣并不大,小学中学时写的记叙文,大致是要你用浅薄的人生经历讲述出起承转合的精彩故事,把一场感冒描述成鬼门关体验卡,把一次旅行描述成大总统的周游列国;到了高中,记叙文被斩落马下,应对高考的议论文成为了新宠,什么并列式、对照式、层进式,然后三段论等种种条条框框,配合唯分数论的枷锁,完美地将你塑造成阅卷老师想要的样子。这大抵是十分不自由的,于是高中时的我,竟然重拾了小时候创作小说的爱好,在枯燥的议论文缝隙中间,写点属于我自己的文字。

阅读更多

欢迎来到 Voidmatrix 的博客

重剑无锋,大巧不工

欢迎光临我的小破站,这里记录了一些本人在学习过程中产出的笔记、对于所见所闻的感悟,以及一些可能存在的、带有极强主观性和局限性的技术分享或讨论,如果你有不同的意见或者想对作者说的话,欢迎联系:Voidmatrix@qq.com

关于自己

  • 🚩廉价且功能不完善的游戏引擎内核 EtherEngine 的开发者,正在参与新一代自研引擎的制作,更多内容详见《自研引擎二三事》
  • 🏬曾任职国内游戏大厂的一线程序员,现在是与时代潮流背道而行的全职独立游戏开发者;
  • 📖拥抱开源,目前仍在不断探索游戏领域底层技术,如:图形、网络和脚本;
  • 🎞️正在创作《从零开始的C++游戏开发》系列教程,更多内容详见《视频被培训机构选做直播课了,但是我却很担忧…》
  • ❤️喜欢敲代码💻,打游戏🎮,业余健身爱好者🥊,尝试各种美食🍔,以及几乎所有肥宅喜欢的东西🥵。

关于博客

确实,缺少评论系统等功能和炫酷的开屏动画对于传统意义的个人博客来说似乎显得有点背离时代了,不过想到整个网站是由 Markdown 笔记一键导出的,没有自行车倒也合理,不过,这也是计划的一部分,庞大而臃肿的博客系统反而是我在一直试图甩掉的事情。(如果你对这件事好奇,可以来这里看看:《小说,日记,博客》

如果你有幸发现了这里,欢迎点击页面最上方的条目查看你感兴趣的栏目,如果觉得有用,也可以将本页面加入收藏夹,或者通过上文提到的联系方式与我交换博客友链,在收到消息后我一定会第一时间回复并将它按照先后顺序添加到我这简陋的博客上。

就是这样,祝大家玩的愉快~

DirectX 11 Tutorials 5 - 纹理贴图

原文链接:http://www.rastertek.com/dx11s2tut05.html

本教程将介绍如何在 DirectX 11 中使用纹理,纹理使我们能够通过将照片和其他图像应用到多边形面上,为场景添加真实感。

例如,在本教程中,我们将使用如下图像:

纹理贴图

然后将其应用于上一教程中的多边形,以生成如下内容:

纹理效果

我们将使用的纹理格式是 .tga 文件,这是支持红色、绿色、蓝色和 alpha 通道的常见图形格式。你可以使用任何通用图像编辑软件创建和编辑 targa 文件,这种文件格式一般是可以直接使用的。

在我们进入代码之前,我们应该讨论纹理贴图是如何工作的。

阅读更多

DirectX 11 Tutorials 4 - 缓冲区、着色器和 HLSL

原文链接:http://www.rastertek.com/dx11s2tut04.html

本教程将介绍如何在 DirectX 11 中编写顶点和像素着色器,还将介绍如何在 DirectX 11 中使用顶点和索引缓冲区,这些是渲染 3D 图形时需要理解和利用的最基本概念。

顶点缓冲区

首先要理解的概念是顶点缓冲区,为了说明这个概念,让我们以球体的 3D 模型为例:

3D球体模型图1

3D 球体模型实际上由成百上千个三角形组成:

3D球体模型图2

球体模型中的每个三角形都有三个点,我们称每个点为顶点,因此,为了渲染球体模型,我们需要将构成球体的所有顶点放入一个特殊的数据数组中,我们称之为顶点缓冲区;一旦球体模型的所有点都被放置到了顶点缓冲区中,我们就可以将顶点缓冲区发送到 GPU,来将模型渲染出来。

阅读更多

DirectX 11 Tutorials 3 - 初始化 DirectX 11

原文链接:http://www.rastertek.com/dx11s2tut03.html

本教程将首次介绍如何使用DirectX 11,我们将讨论如何初始化和关闭 Direct3D,以及如何将内容渲染到窗口。

更新后的框架

我们将向框架中添加另一个类,该类将处理所有 Direct3D 系统的功能。我们称之为 D3DClass,更新后的框架图如下:

框架示意图

正如你所见,D3DClass 位于 GraphicsClass 内部;在之前的教程提到过,所有与图形有关的类都将封装在 GraphicsClass 中,所以我们新增的 D3DClass 类放到这里最为合适。

现在,让我们看看对 GraphicsClass 所做的更改。

阅读更多