原文: Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts

大家好,我是 Lynn。我很高兴宣布上线 Learn to Code RPG,这是我们在过去八个月中一直在秘密开发的项目。

社区的志愿贡献者们正在协作将游戏翻译为不同语言版本。(欢迎大家参与中文版翻译协作,请点击指南了解如何参与。)

Learn to Code RPG 是一款交互式视觉小说游戏,你将在其中自学编程,结交科技行业的朋友,并实现成为开发人员的梦想。🎯

这款游戏具有:

  • 时长几个小时 🎮
  • 原创设计和音乐 🎨
  • 600 多道计算机科学测试题 📚
  • 50 多个彩蛋 🚀
  • 6 种不同的结局 👀
  • 友好的角色和可爱的猫 🐱
  • 小游戏! 👾

这是第一个版本,我们希望将来添加更多内容。未来的版本将包含更多角色场景支线任务设计音乐,当然还有小游戏。(快速刷 CS 题目和生存模式,来玩吗?)我们还计划将其本地化为不同的语言......🌎 想象空间是无限的 ✈️

你可以在 itch.io 免费下载游戏

如果你想了解这款游戏、我的开发过程等等更多信息,请继续阅读。这是一个非常视觉化的开发日志(我们的游戏是也是视觉小说),我相信你会喜欢它。

img_1-1
Learn to Code RPG - 一款你通过角色扮演学习编程的游戏

背景

先分享一些我的背景。

我从小就喜欢故事丰富的电子游戏。🧒🏻

我对游戏开发的兴趣激发了我在大学主修计算机科学。2021 年 6 月,我毕业于芝加哥大学,获得计算机科学联合学士和硕士学位。

2021 年 7 月,当我计划搬到旧金山开始我的软件开发职业生涯时,Quincy 向我提出了这个游戏的想法。

一款让你学习编程、结交朋友、探索科技文化并最终进入科技行业的游戏。🎯

尽管我涉足 Unity 和 Ren'Py 等游戏开发引擎,并在业余时间创建了一些小型的兴趣项目,但这是我第一次(基本上是)独自作为一个团队从头开始构建游戏。也就是说,我对这个让我的游戏开发梦想成真的机会感到有些不知所措。🤯

有一句话是:如果你在火箭飞船上获得座位🚀,请不要问什么座位!

所以我就答应了。

Screen-Shot-2021-12-18-at-12.56.15
我怎么能拒绝 CupcakeCPU 提供的工作机会?🧁

从无到有(from zero to hero):如何在四个月内打造一款游戏

故事

故事的想法从一开始就很明确:男主角/女主角决定学习编程,克服旅途中的障碍,结识同伴和导师,最终获得大奖——一份很棒的开发人员工作。

我从英雄之旅的经典写作框架开始,或者说,17 阶段的单一神话。

(自从我开始制作这款游戏以来,我一次又一次地希望我在大学里至少上过一门创意写作课。😅)

以下是我在十七个阶段中的第一阶段和第三阶段的大纲,是从我的 Google Doc 摘录的:

1. 冒险的召唤

英雄旅程的第一阶段经常向观众展示主角当前(有时是相当平凡)的存在。

主角毕业后和她的父母一起搬回了家。她不确定自己的职业生涯会是什么样子,所以她整天都在浏览职位机会。她申请了一些销售和咨询工作,但被拒绝了。

2. 超自然援助

在旅程的这个阶段,主角寻找一个圣人般的人物,并可能在此过程中获得特殊物品或技能。

Annika 是主角在大学里最好的朋友,有一天打电话给主角。Annika 很兴奋,因为她花了 6 个月的时间来提高她生疏的 CS 技能(通过在大学里审核了几门 CS 课程),她刚刚获得了一个入门级的 Web 开发角色。安妮卡询问主角的情况;很高兴主角也在考虑学习编程;并鼓励主角,只要她有正确的学习方法和资源,她就可以做到。Annika 向主角介绍了她使用的资源。

角色

游戏中有四个主要角色,包括玩家控制的主角:

  • 主角 Lydia,刚从大学毕业。(在游戏的未来版本中,我们可能会呈现一些不同的主要角色供玩家选择。)
  • Annika,主角的大学好友
  • 成为主角导师的 Marco
  • Layla,主角在她第一份开发工作中的入职伙伴

我开始通过在 Pinterest 上收集图像来设计角色。然后 Quincy 和我委托一位艺术家在线创建角色精灵和初始图像。

在下面的图片中,你可以看到 Pinterest 角色灵感(版权属于他们的原始艺术家)和最终设计。

Untitled265_20211217211947
关于 Lydia 的设计灵感来源 + 最终角色卡片
Untitled265_20211217212148
关于 Annika 的设计灵感来源 + 最终角色卡片
Untitled265_20211217211928
关于 Layla 的设计灵感来源 + 最终角色卡片
Untitled265_20211217211832
关于 Marco 的设计灵感来源 + 最终角色卡片

既然我们有了主要角色,我们还需要给 Lydia 增加更多的角色深度,这样她就不会整天一个人坐在房间里敲代码了?也许她可以在她的房间里放一只猫?🐱

然后就加入了 Lydia 的猫 Mint(我作为临时艺术家创作了 Mint,以便我们的艺术家可以专注于角色。数字艺术🎨是我仅次于游戏开发的第二大爱好。)

mint
Mint 跟大家打招呼!

图形

完成字符图形后,你可能会认为大部分图形已经完成。但没那么快!顾名思义,视觉小说需要更多的图形来讲述一个吸引人的故事。

例如,在下图中,除了字符精灵外,还有背景图像和一些 GUI 组件,如文本框。

Screen-Shot-2021-12-18-at-12.40.00
基本图形组件:GUI、角色精灵、背景

为了创建背景图像,我对库存图像应用了特殊效果滤镜以添加类似水彩的纹理。这样,角色的配色方案就可以完美地融入背景。

Untitled266_20211217213638
上:库存图片,下:添加滤镜

为了表现一天中时间的流逝,我通过以编程处理颜色来更改背景图像的照明。(如果你对实现细节感兴趣,请查看我们的 GitHub 仓库!)

color
四种光照模式

为了激发动力,每当我想拖延的时候,我都会切换创意工具,并涂鸦在整个游戏中出现的杂项物品。🤣

这样我们的游戏就有了饼干、吐司、比萨饼、炸鸡等等!

ezgif.com-gif-maker-7-
美味!

代码

我使用了我最熟悉的游戏引擎 Ren'Py Visual Novel Engine。我重用了我以前的兴趣项目中的很多代码——例如,眨眼睛的角色精灵节奏小游戏

blink2
角色们眨眼睛 😉
Screen-Shot-2021-12-17-at-19.33.39-1
节奏小游戏,你能拿到满分吗?

我还整合了一些开源 Ren'Py 代码,例如动态文本标签的代码羽毛图标文本的代码

awesome
动态文本标签,考虑无障碍访问时可以关闭
Screen-Shot-2021-12-17-at-22.05.37
羽毛图标非常适合创建清晰、简单的 GUI

我将避免在这里深入研究代码库(因为我不知道何时停止😆)。只知道它有很多代码,包括逻辑和 GUI。请参阅下面的 Ren'Py Lint 报告。

呼……我们现在可以转向更直观的东西吗?

Ren'Py 7.4.8.1895 lint 报告,生成于:Fri Dec 17 22:11:43 2021
统计数据:
游戏包含 1,335 个对话块,总计 15,390 个单词和 85,105 个字符,平均每个块包含 11.5 个单词和 64 个字符。
游戏包含 40 个菜单、20 个图像和 49 屏。

进度跟踪器

即使是一个人的项目也需要一个项目经理,那为什么不做我自己的项目经理呢?

我使用 Trello 来跟踪我的流程并与他人协作。我甚至为不同类别的任务用颜色编码标签,如编程、UI/UX、写作等,如下图所示,位于待办事项列中的第一张卡片上。

哇,完成了好长一串任务啊!😤

trello
我的 Trello 看板

待办正在进行列中的所有内容都移至已完成列。

我的收获

太棒了!八个月后(四个月的想法酝酿,加上四个月的密集编程、写作和艺术创作),我们可以将 Learn to Code RPG 呈现给你了。

在游戏中的四个月里,Lydia 从一名有抱负的工程师成长为一名从事开发工作的工程师。🎯

在现实世界的四个月里,我从一个有抱负的游戏开发者成长为一个真正的游戏开发者。👾

你肯定会想问这个问题:你从整个过程中获得了什么?

好吧,就像任何创作过程一样,游戏开发并不容易。我非常幸运有一个支持我的团队:我们的艺术家 Noa 创作了角色艺术,Quincy 创作了很棒的原创音乐曲目,以及 freeCodeCamp 团队的成员帮助校对和测试游戏。

Screen-Shot-2021-12-17-at-22.26.07
我的 GitHub 贡献区分了我编写代码的日子与我集思广益、写作或绘画的日子🤪

我在技术技能(通过寻找创造性的方式在 Ren'Py 中构建事物)、非技术技能(通过担任我自己的项目经理)以及更多(通过管理预期、克服冒名顶替综合症和寻求工作与生活的平衡)都得到了提升。

Screen-Shot-2021-12-18-at-12.33.25
你知道什么是冒名顶替综合症吗?👻 当然!

这绝不是一件容易的事,但结果值得每一秒的努力。更重要的是,我期待你玩游戏并提供反馈,以便我可以在未来的版本中改进这款游戏。

我希望你喜欢玩 Learn to Code RPG,就像我喜欢创造它一样! 🙌

LearnToCodeRPG 链接

你可以在 itch.io 下载游戏。

所有代码都在 GitHub 仓库里。

你还可以观看游戏预告片,并与你的朋友分享:

想看看游戏是什么样的吗?可以看 Ania 和我一起录的视频。

这是游戏的官方媒体资料

如果你有兴趣自己构建视觉小说游戏,请查看我的这篇文章