Hi, everybody – Lynn here. It's my great pleasure to announce the launch of Learn to Code RPG, a project we've been developing in secret for the past eight months.

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

The game features:

  • Hours of gameplay 🎮
  • Original art and music 🎨
  • 600+ Computer Science quiz questions 📚
  • 50+ Easter Eggs you can discover 🚀
  • 6 different endings 👀
  • Friendly characters and an adorable cat 🐱
  • Minigames! 👾

This is a first release and we hope to add more content to it in the future. Future releases will have more characters, scenarios, side quests, art, music, and, yes, minigames. (CS quiz speed run and survival mode, anyone?) We are also planning to localize it into different languages. 🌎 The sky is the limit here. ✈️

You can download it and play it for free on itch.io.

If you'd like to learn more about the game itself, my development process, and so on, read on. This is a very visual devlog (our game is a Visual Novel for a reason) and I'm sure you will enjoy it.

img_1-1
Learn to Code RPG – A game where you role play learning to code
ADVERTISEMENT

Where It All Started

Let's start with a bit of background about me.

I've always loved story-rich video games since I was little. 🧒🏻

My interest in game development inspired me to major in Computer Science in college. In June 2021, I graduated from the University of Chicago with a joint Bachelor's and Master's degree in Computer Science.

In July 2021, as I was planning my move to San Francisco to start my career as a software developer, Quincy reached out to me about this game idea.

A game where you learn to code, make friends, explore the tech culture, and eventually break into the tech industry. 🎯

Although I dabble in game development engines like Unity and Ren'Py and have created small passion projects in my own time, this would be my first time building a game from the ground up, on a (mostly) one-person team. That is to say, I was a little overwhelmed by this opportunity to make my game development dream come true. 🤯

Well, you know the saying: If you’re offered a seat on a rocket ship 🚀, don’t ask what seat!

So I said yes and dove right in.

Screen-Shot-2021-12-18-at-12.56.15
Who am I to turn down an offer from CupcakeCPU? 🧁

From Zero to Hero: How to Build A Game In Four Months

The Story

The story idea was pretty clear from the beginning: The hero/heroine makes the decision to learn to code, conquers obstacles along the journey, meets allies and mentors, and eventually gets to the grand prize – a shiny developer job.

I started with the classic writing framework of The Hero's Journey, or, the 17-stage monomyth.

(Since I started working on this game, time and again I wish I'd taken at least one creative writing class in college. 😅)

Here's a glimpse into my outline for the first and the third stage out of the 17 stages, straight from my Google Doc:

1. The Call to Adventure

the first stage of the hero’s journey often presents to the audience the current (and sometimes rather mundane) existence of the protagonist.

Main Character (abbreviated MC) graduates and moves back with her parents. She isn’t really sure what her career is going to look like so she spends her days working gigs and browsing job openings. She has applied to some sales and consulting jobs but they turned her down.

3. Supernatural Aid

in this stage of the journey, the protagonist seeks out a sage-like figure and possibly gains a special item or skill in the process.

Annika, MC’s best friend in college, calls MC one day. Annika is excited because she just got an entry-level web dev role, after spending 6 months to brush up her rusty CS skills (from auditing a few CS classes in college). Annika asks about how MC is doing; is delighted that MC is also considering learning to code; and encourages MC that she can do it if she has the right study method and resources.
Annika introduces MC to the resource she uses.

ADVERTISEMENT

The Characters

Including the main character which the player controls, we have four major characters in the game:

  • The main character, Lydia, a recent graduate from college. (In future releases of the game we may be able to present a few different main characters the player can choose from.)
  • Annika, the main character's college best friend
  • Marco, who becomes the main character's mentor
  • Layla, the main character's onboarding buddy at her first dev job

I started designing the characters by collecting images on Pinterest. Then Quincy and I commissioned an artist online to create the character sprites and splash image.

In the images below, you can see the Pinterest character inspirations (copyright belongs to their original artists) and the final design side-by-side.

Untitled265_20211217211947
Lydia inspiration art + final character card
Untitled265_20211217212148
Annika inspiration art + final character card
Untitled265_20211217211928
Layla inspiration art + final character card
Untitled265_20211217211832
Marco inspiration art + final character card

Now that we have the main cast, what else do we need to add more character depth to Lydia, so that she is not sitting in her room alone all day long grinding code? Maybe she could use a cat in her room? 🐱

And enter Mint, Lydia's cat. (Art by me as a makeshift artist so that our artist could focus on the characters. Digital art 🎨 is my second biggest hobby after game dev.)

mint
Mint says hi!

The Graphics

With the character graphics done, you may think that concludes the bulk of the graphics. But not so fast! A visual novel is, as its name suggests, visual, and so it needs a lot more graphics to tell an appealing story.

For example, in this image below, besides the character sprites, there is the background image and some GUI components like the textbox.

Screen-Shot-2021-12-18-at-12.40.00
Basic graphic components: GUI, character sprites, background

To create the background images, I applied special effect filters to stock images to add a watercolor-like texture. This way, the color scheme of our characters blends perfectly into that of the background.

Untitled266_20211217213638
Top: stock image. Bottom: with filters

To illustrate the passage of time in a single day, I changed the lighting of the background images by applying color manipulation programmatically. (Check out our GitHub repo if you are interested in the implementation details!)

color
Four modes of lightning

For a motivation boost, whenever I feel like procrastinating, I switch my creative gears and doodle miscellaneous items that show up throughout the game. 🤣

And that's how we got in-game cookies, toast, pizza, fried chicken, and more!

ezgif.com-gif-maker-7-
Yummy!
ADVERTISEMENT

The Code

I used the game engine that I'm most familiar with, the Ren'Py Visual Novel Engine. I reused a lot of code from my old passion projects – for example, blinking character sprites and a rhythm minigame.

blink2
Blinking characters 😉
Screen-Shot-2021-12-17-at-19.33.39-1
Rhythm Minigame. Can you get a perfect score?

I also incorporated some open-source Ren'Py code like the code for kinetic text tags and the code for feather icon text.

awesome
Kinetic text tag, which can be turned off for accessibility
Screen-Shot-2021-12-17-at-22.05.37
Feather icons are awesome for creating crisp, simplistic GUI

I will refrain from diving into the codebase here (because I won't know when to stop then 😆). Just know that it's a lot of code, both for the logic and the GUI. See the Ren'Py Lint report below.

Phew... Can we now move on to something more visual?

Ren'Py 7.4.8.1895 lint report, generated at: Fri Dec 17 22:11:43 2021
Statistics:
The game contains 1,335 dialogue blocks, containing 15,390 words and 85,105 characters, for an average of 11.5 words and 64 characters per block.
The game contains 40 menus, 20 images, and 49 screens.

The Progress-Tracker

Even a one-person project needs a project manager, so why not be my own project manager?

I used Trello to track my process and collaborate with others. I even color-coded labels for different categories of tasks, like coding, UI/UX, writing, and so on as shown in the image below on the first card in the Backlog column.

And wow, isn't that a long scroll of tasks done? 😤

trello
My Trello board

Everything in the TODO and Doing column is moved to Done, and that brings us to...

ADVERTISEMENT

My Takeaway

Hooray! After eight months (four months of the idea brewing, plus four months of intense coding, writing, and art making), we present to you Learn to Code RPG. 🥳

In four in-game months, Lydia has grown from an aspiring engineer into an engineer with a dev job. 🎯

In four real-world months, I've grown from an aspiring game developer into a game developer who's actually built a game. 👾

Naturally here comes the million-dollar question: What's my takeaway from this entire process?

Well, like any creative process, game development isn't easy. I'm extremely fortunate to have a team supporting me: our artist Noa who created the character art, Quincy who created the awesome original music tracks, and proofreaders and playtesters from the freeCodeCamp staff.

Screen-Shot-2021-12-17-at-22.26.07
My GitHub contributions tell apart the days when I code vs. the days when I brainstorm or write or draw 🤪

I've grown both in terms of technical skills (by finding creative ways to build things in Ren'Py), non-technical skills (by acting as my own project manager), and more (by managing expectations, overcoming imposter syndrome, and seeking a work-life balance).

Screen-Shot-2021-12-18-at-12.33.25
Do you know what imposter syndrome is? 👻 You bet I do!

It was by no means an easy ride, but the outcome is worth every second of hard work. More importantly, I look forward to you playing the game and providing feedback so that I can make the game better in future releases.

I hope you enjoy playing Learn to Code RPG as much as I've enjoyed creating it! 🙌

You can find the game on itch.io here:

Learn to Code RPG by freeCodeCamp.org
Learn to code, make friends in tech, and get a dev job 🎯
KGkTTn

And here's the GitHub repo with all the code.

You can also watch the Game Trailer on YouTube and share it with your friends:

Want to see what the game is like? Check out the Let's Play with Ania and Lynn.

And here's the official press kit for the game.

If you are interested in building a Visual Novel Game yourself, check out this article of mine:

How to Make a Visual Novel Game in 10 Minutes – Python Ren’Py Tutorial
Do you have a story idea that you’d like to turn into a novel? How about addingvisual appeal and interactivity to that novel? A Visual Novel [https://en.wikipedia.org/wiki/Visual_novel] might be the gamegenre you are looking for. And this tutorial is here to help set you up in 10minutes, with m…
Screen-Shot-2021-06-21-at-14.23.10-1