This course focuses on teaching you how to use stable diffusion as a tool instead of going into the technical details. To understand some big terms like VAEs or embeddings, you will need to have some machine learning background and do some research on your own.

You will need to have access to a local GPU to try out the course material. Cloud access to GPU (with the exception of Google Colab) would work too. It's unfortunate, but Google Colab has banned Stable Diffusion code from running in their notebooks.

In this tutorial, we will cover the following topics:

1. How to use Stable Diffusion

2. How to train your own model for a specific character or art style (LoRA models)

3. How to use Control Net, a popular Stable Diffusion plugin

4. How to use Stable Diffusion's API Endpoint

Check out the course video below on the freeCodeCamp.org YouTube channel. Under the video are additional resources.

Install stable diffusion

Download models

Download VAE for Model "Counterfeit"

i Download Embeddings

Train a Lora

Further Reading

Disclaimer: We respect the work of artists and acknowledge that AI-generated art using Stable Diffusion is a tool that can be used to enhance creativity, but it does not replace the value of human creativity and originality.

I'm excited to announce the launch of Learn to Code RPG v1.5, a year after the launch of Learn to Code RPG v1. (Fun fact: we're calling it v1.5 instead of v2 because we have grand plans for v2, which we plan to release in early 2023.)

What is Learn to Code RPG?

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 working as a developer. 🎯

The game features:

• Hours of gameplay 🎮

• Original art and music 🎨

• 1,000+ Computer Science quiz questions 📚

• 50+ achievements you can unlock 🏆

• 6 different endings 👀

• 10+ characters you can make friends with, and an adorable cat 🐱

• Minigames 👾

• A renown system, a money system, and fun items you can buy for your cat and to customize your room 🏠

Learn to Code RPG v1.5 Game Trailer

You can also watch the game trailer below and share the YouTube video with your friends:

You can download the game and play it for free. It's available for PC, Mac, and Linux on itch.io. And on Android from the Google Play Store.

If you'd like to learn more about the game itself and the development process, read on.

We'll walk you through the story, characters, graphics, and code. I'm sure you'll enjoy it. And it may even inspire you to code your own video game.

How LearnToCodeRPG Went From v1 to v1.5

The Team

When Lynn created v1, she was working solo on the game, juggling writing, coding, and some asset creation.

With this release, to give Lynn more time to focus on coding, KayLa took care of the writing. Nielda helped brainstorm features and create art assets.

Want to see a teamwork showcase? Here's one for the item shop. After purchasing furniture from the shop, the player will see the furniture in their room.

• Lynn programmed the shop, the items, and the room customization

• KayLa and Nielda came up with ideas for the items

• KayLa wrote fun flavor text for the items

• Nielda created all the assets – the room and the items – by tracing over 3D assets and applying textures over them

The Learn to Code RPG Main Story

In v1 (or what we call the Prologue), the story started as our protagonist, Lydia, decided to get a job in the tech industry. She needed to learn to code, make friends in the industry, find mentors, tackle technical interviews, and eventually arrive at her goal – a shiny new developer job.

Building from the Prologue story, in v1.5 (or what we call Arc I) Lydia starts working as a full-stack developer. She now needs to interact with her new colleagues on a day-to-day basis and react to events that arise.

She will be faced with all the things a real-world software engineer faces – changes in project requirements, communicating with project managers, learning from senior developers, and so on.

Does this look like a familiar scene from working in tech to you?

Outside of work, Lydia can also go hang out at Hacker Space with friends she made back when she was first learning to code.

At Hacker Space, Lydia might run into old acquaintances who are also looking for a job. She can decide whether or not to give them a referral.

She can also give back to the community by mentoring high school students with their projects.

There is never a shortage of fun things to do at Hacker Space. 😄

The Characters

To give the characters more depth, we brainstormed using the character card format shown below. Here's the character card for Lydia:

Lydia meets many new colleagues in this arc and our character list has been greatly expanded.

When designing the characters, sometimes our artist Noa will experiment with hair color and style variations until we land on a design that we are happy with:

Mala's different designs. Which is your favorite?

Here's also a sneak peek into one of the many characters and their many expressions:

Darius's many faces

Of course, everyone's favorite, Mint the kitty, is still the key emotional support for this story arc. 🐱

The Graphics

Now moving on to other graphics besides character sprite art. Just like in v1, we again created background images by applying a watercolor-like filter to real-world images.

Since a lot of story takes place at the company Lydia is working at, we also tried to find stock images that are coherent in color scheme, like the ones below:

Background images for the company Lydia's working at

The Code

Just like in v1, I used the game engine that I'm most familiar with, the Ren'Py Visual Novel Engine.

During this year of development, a really exciting piece of news for the Ren'Py community is that Ren'Py 8 now supports Python 3. This is exciting to me.

Compared to Python 2.7 (which we used in Ren'Py 7.4 when we developed Learn to Code RPG v1), Python 3 brings in a lot of new features that positively impact our development.

This also means that I had to spend a little time to migrate from Python 2.7 to Python 3 in our project. (It was a small Git commit, trust me 🤓).

Now some exciting stats – Ren'Py's built-in linter is perfect for gathering stats for comparisons between v1 and v1.5:

# v1
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.

# v1.5
Ren'Py 8.0.3.22090809 lint report, generated at: Tue Dec 20 19:22:05 2022
Statistics:
The game contains 3,339 dialogue blocks, containing 41,214 words and 220,501
characters, for an average of 12.3 words and 66 characters per block.
The game contains 68 menus, 19 images, and 51 screens.

From the stats we can see that we've nearly tripled the story content. Woohoo! 🤩

Next Steps for LearnToCodeRPG: From v1.5 to v2

Hooray! After a whole year of development, we've taken v1 to new heights and are now presenting you with Learn to Code RPG v1.5.

What's more exciting: we are only just getting started. Just as Quincy always likes to say, the sky is the limit. ✈️

Here are some things you can look forward to in v2, or even sooner, between v1.5 and v2:

• 🌎 Localization: All the text in v1 has been fully translated into Portuguese, and we have an active community working on translating the game into other world languages. You can help too, by starting here.

• 🎭 More story and characters (shhh... we have 10+ characters planned and some drawn already)

• 📚 Expanded bank of quiz questions and spaced repetition to help you learn more efficiently.

• 💻 Auto-update from inside the game so that you can stay up-to-date with the latest bug fixes, features, and storylines.

• ... and more on our holiday wishlists! 🎁

Last but not least, we hope you enjoy playing this game as much as we enjoyed developing it! 🥳

Links

You can find the game on itch.io here:

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

If you haven't read about how v1 of the game took shape, here's an article for you:

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:

We hope you enjoy learning what it's like to work in tech by playing the Learn to Code RPG. 🧑‍💻

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.

Learn to Code RPG – A game where you role play learning to code

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.

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:

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.

Lydia inspiration art + final character card

Annika inspiration art + final character card

Layla inspiration art + final character card

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 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.

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.

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!)

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!

Yummy!

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.

Blinking characters 😉

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.

Kinetic text tag, which can be turned off for accessibility

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? 😤

My Trello board

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

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.

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).

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! 🙌

Learn to Code RPG Links

You can find the game on itch.io here:

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:

Fact Sheet

Developer

freeCodeCamp.org, a 501(c)(3) nonprofit

Platform

Windows/Mac/Linux

Available on

itch.io

Price

Free

Source Code

GitHub

Release Date

December 22, 2021

Developer Contact

Quincy Larson, quincy@freecodecamp.org

Lynn Zheng, lynn@freecodecamp.org

Description

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. 🎯

In this game, your choices shape and drive the story forward: What will you do on a day-by-day basis? Learn to code? Work as a barista? Visit the Hacker Space? Or chill, relax in the park, or cuddle with a kitten over some video games?

Will you stick to your dream – getting a job in the tech industry – and more importantly, keep that job? The choice is in your hands.

Features

• 2+ hours of gameplay 🎮

• Original art and music 🎨

• 600+ CS quiz questions 📚

• 50+ Easter Eggs you can tweet about 🚀

• 6 different endings 👀

• Friendly characters and an adorable cat 🐱

• Minigames! 👾

Dev Log Article

https://www.freecodecamp.org/news/learn-to-code-rpg/

Screenshots

Learn to Code RPG Splash art

Learn to Code RPG Game Menu

Hanging out at the Hacker Space with your best friend Annika

Chill at home with your cat Mint

Take CS quizzes

Quiz question explanation screen

NPCs

Rhythm Minigame

Videos

Trailer

Let's Play

Logo

Character Cards

I'm Lynn, a software engineer and a recent graduate from the University of Chicago. This is the third course in my Coding Interview Crash Course Series. Feel free to check out my YouTube channel, Lynn's DevLab, to stay updated on this series.

This crash course is about Graph Traversal. If you just want to dive right in, you can find the course here (and linked at the bottom of this article). If you want a little more info, read on. 😎

Introduction

We will cover two common graph traversal techniques: Depth-First Search (DFS) and Breadth-First Search (BFS).

We will first learn about how they work and how to implement them in code. Then we will see the algorithms in action by solving a LeetCode problem as well as looking at how I applied Graph Traversal when implementing an algorithm for my game, Clicky Galaxy (also my first game in Unity when I was learning Unity 😉).

Clicky Galaxy, a game I made when learning Unity

Course Outline

This course video runs for 1 hour and features:

• A high-level description of Graphs, DFS, and BFS

• DFS implementation

• BFS implementation

• How to find a path between a source and a destination node

• LeetCode Demo: 785. Is Graph Bipartite?

• Clicky Galaxy Demo and Graph Traversal in Unity C# 🚀

Graphs are a favorite interview subject among top tech companies like Google, Microsoft, and Facebook. More importantly, it's also fun and useful in practical software engineering like Game Development. Let's crunch this topic together in my course!

Definition of a Graph

We will use the following graph to show the traversal path for the two traversal algorithms.

We may represent the graph by mapping each node to its list of neighbors, as shown in this Python snippet:

graph = {
    0: [1, 4],
    1: [0, 2, 3, 4],
    2: [1, 3],
    3: [1, 2, 4],
    4: [0, 1, 3]
}

How to Use Depth-First Search

As its name suggests, DFS prioritizes depth in its search.

For a given node (say 1), after visiting one of its neighbors (say 0), instead of visiting the rest of the neighbors (nodes 2, 3, and 4) immediately, it caches those neighbors and immediately resumes its visit on 0's neighbors. Only when it has exhausted the depth will it return to those cached neighbors.

Iterative Implementation

def dfs(graph, start):
  visited, stack = set(), [start]
  while stack:
    node = stack.pop()
    if not node in visited:
        # perform some operations on the node
        # for example, we print out the node
        print('Now visiting', node)
    visited.add(node)
    for neighbor in graph[node]:
      if not neighbor in visited:
        stack.append(neighbor)
  return visited

In this template, the commented lines are where we can perform some operations on the node: for example, printing out its value, checking for equality, and so on.

We keep track of a set named visited to avoid visiting the same node multiple times where there is a cycle in the graph, like in our example graph above.

Running this code on the graph we defined above results in the output below:

Now visiting 0
Now visiting 4
Now visiting 3
Now visiting 2
Now visiting 1

How to Use Breadth-First Search

BFS prioritizes breadth in its search. For a given node, it visits all of its immediate neighbors before moving onto the neighbors' neighbors.

Iterative Implementation

def bfs(graph, start):
  visited, queue = set(), deque([start])
  while queue:
    node = queue.popleft()
    if not node in visited:
        # perform some operations on the node
        print('Now visiting', node)
    visited.add(node)
    for neighbor in graph[node]:
      if not neighbor in visited:
          queue.append(neighbor)
  return visited

Running this code on the graph we defined above results in the output below:

Now visiting 0
Now visiting 1
Now visiting 4
Now visiting 2
Now visiting 3

How to Find a Path Between a Source and a Destination

Now that we've seen how to use DFS and BFS to traverse the entire graph and print out the whole traversal history, we can make some small changes to the templates to find a path between any two nodes in the graph (if such path exists).

On a graph where each edge has the same weight, BFS is equivalent to Dijkstra's Shortest Path Algorithm. It finds the shortest path (path with the fewest number of nodes) between a source node and a destination node. This is a nice property that a path search with DFS doesn't have.

Here's how we adapt the DFS template to return a path given a src and a dst node:

def dfs_path(graph, src, dst):
  stack = [(src, [src])]
  visited = set()
  while stack:
    node, path = stack.pop()
    if node in visited:
      continue
    if node == dst:
      return path
    visited.add(node)
    for neighbor in graph[node]:
      stack.append((neighbor, path + [neighbor]))
  return None

Similarly for BFS:

def bfs_path(graph, src, dst):
  visited, queue = set(), deque([[src]])
  while queue:
    path = queue.popleft()
    node = path[-1]
    if node in visited:
      continue
    if node == dst:
      return path
    for neighbor in graph[node]:
      queue.append(path + [neighbor])
  return None

Let's Solve a LeetCode Problem!

Let's now apply what we learned about Graph Traversal to solve a problem on LeetCode, 785. Is Graph Bipartite?

According to this article, a modified BFS algorithm is all we need:

Following is a simple algorithm to find out whether a given graph is Bipartite or not using Breadth First Search (BFS).

1. Assign RED color to the source vertex (putting into set U).

2. Color all the neighbors with BLUE color (putting into set V).

3. Color all neighbor’s neighbor with RED color (putting into set U).

4. This way, assign color to all vertices such that it satisfies all the constraints of m way coloring problem where m = 2.

5. While assigning colors, if we find a neighbor which is colored with same color as current vertex, then the graph cannot be colored with 2 vertices (or graph is not Bipartite)

Plugging our template, the solution is as simple as follows. Check out my video for a line-by-line explanation.

RED = 0
BLUE = 1
from collections import deque

class Solution:
    def isBipartite(self, graph: List[List[int]]) -> bool:
        if not graph:
            return False
        queue, visited = deque([]), set()
        for v in range(len(graph)):
            if v in visited:
                continue
            queue.append(v)
            node_colors = {v: RED}
            while queue:
                node = queue.popleft()
                visited.add(node)
                my_color = node_colors[node]
                for neighbor in graph[node]:
                    if neighbor in node_colors and node_colors[neighbor] == my_color:
                        return False
                    if not neighbor in visited:
                        queue.append(neighbor)
                    node_colors[neighbor] = RED if my_color == BLUE else BLUE

        return True

Graph Traversal in Action: Clicky Galaxy, A Game by Me

One more fun demo about Graph Traversal: Clicky Galaxy 🚀, a casual match-three game I built when I was learning Unity.

In the game, you move a planet to an empty cell and score when there are three or more identical planets aligned horizontally or vertically. A planet can only move horizontally or vertically, and its movement path cannot be obstructed by other planets.

I applied Graph Traversal to check for a valid path between the planet the player clicked on and the destination cell to determine if the planet can move to that cell.

Each cell in the grid is a node and has four immediate neighbors: up, down, left, and right. As I want to find a short path between the source and the destination (if there exists one), BFS pathfinding is ideal for my use case.

Here is how my code looks like in C#. I used a helper named GetNeighbors to get the four immediate neighbors, ignoring out-of-bound ones.

List<Vector2Int> BreadthFirstSearch(Vector2Int srcIndices, Vector2Int dstIndices) {
    // identify a path from srcIndices to dstIndices, could be null
    // the path include src and dst
    HashSet<Vector2Int> visited = new HashSet<Vector2Int>();
    Queue<List<Vector2Int>> pathQueue = new Queue<List<Vector2Int>>();

    List<Vector2Int> startPath = new List<Vector2Int>();
    startPath.Add(srcIndices);
    pathQueue.Enqueue(startPath);

    while (pathQueue.Count > 0) {
        List<Vector2Int> path = pathQueue.Dequeue();
        Vector2Int node = path[path.Count - 1];
        if (visited.Contains(node)) {
            continue;
        }
        if (node == dstIndices) { // done
            return path;
        }
        visited.Add(node);
        List<Vector2Int> neighbors = GetNeighbors(node);
        foreach (Vector2Int neighbor in neighbors) {
            Sprite sprite = GetSpriteAtIndices(neighbor.x, neighbor.y);
            if (sprite == null) { // can visit this next
                List<Vector2Int> newPath = new List<Vector2Int>(path);
                newPath.Add(neighbor);
                pathQueue.Enqueue(newPath);
            }
        }
    }

    return null;
}

List<Vector2Int> GetNeighbors(Vector2Int indices) {
    // return the four immediate neighbors, left, right, up, down
    List<Vector2Int> neighbors = new List<Vector2Int>();
    if (indices.x >= 0 && indices.x < gridDimension && indices.y >= 0 && indices.y < gridDimension) {
        if (indices.y >= 1) {
            neighbors.Add(new Vector2Int(indices.x, indices.y - 1));
        }
        if (indices.y < gridDimension - 1) {
            neighbors.Add(new Vector2Int(indices.x, indices.y + 1));
        }
        if (indices.x >= 1) {
            neighbors.Add(new Vector2Int(indices.x - 1, indices.y));
        }
        if (indices.x < gridDimension - 1) {
            neighbors.Add(new Vector2Int(indices.x + 1, indices.y));
        }
    }
    return neighbors;
}

And my game came together really well with this algorithm!

Final Thoughts

In this crash course, we learned about the two Graph Traversal algorithms, DFS and BFS. We saw them in implementation first and then in action in a LeetCode problem as well as in my game.

If you enjoyed Graphs, think about how they relate to Trees. Spoiler alert! Pre-order traversal in trees is essentially DFS in graphs and level-order traversal in trees is essentially BFS in graphs. 🤫

Try figuring this out on your own or watch my crash course on Tree Traversal for a refresher. Trust me, algorithms can be fun! 😃

Resources

Watch the course here:

Access the code template on my GitHub:

Check out Clicky Galaxy on my GitHub:

Stay up-to-date with the whole crash course series:

And lastly, feel free to subscribe to my YouTube channel for more content like this :)

In case you've seen my previous tutorial on this topic, stick with me as this version features lots of updates.

You can follow along with this tutorial using the code on my GitHub:

If you want, you can dive right into my video tutorial on YouTube – or read on for more details. 😎

What to Expect from this Tutorial

Here is an example of the Discord AI chatbot that we will have built by the end of this tutorial.

Chat demo with my bot in Discord. I drew the bot's icon 😊

My chatbot project started as a joke with a friend when we were playing video games.

I'm honestly surprised by how popular it became – there were 5.9k views of my previous tutorial, plus, when I deployed my bot to a 1k+ user server, people flooded it with 300+ messages in an hour, effectively crashing the bot. 😳 You can read more about my deployment post-mortem in this post.

Since a lot of people are interested in building their own bots based on their favorite characters, I updated my tutorial to include an in-depth explanation on how to gather text data for any character, fictional or non-fictional.

You may also create a custom dataset that captures the speech between you and your friends and build a chatbot that speaks like yourself!

Other updates in this tutorial address changes in Hugging Face's model hosting services, including API changes that affect how we push the model to Hugging Face's model repositories.

Outline of this Tutorial

The video version of this tutorial runs for a total of one hour and features the following topics:

1. Gather text data for your character using one of these two methods: find pre-made datasets on Kaggle or make custom datasets from raw transcripts.

2. Train the model in Google Colab, a cloud-based Jupyter Notebook environment with free GPUs.

3. Deploy the model to Hugging Face, an AI model hosting service.

4. Build a Discord bot in either Python or JavaScript, your choice! 🤩

5. Set up the Discord bot's permissions so they don't spam non-bot channels

6. Host the bot on Repl.it.

7. Keep the bot running indefinitely with Uptime Robot.

To learn more about how to build Discord bots, you may also find these two freeCodeCamp posts useful – there's a Python version and a JavaScript version.

How to Prepare the Data

For our chatbot to learn to converse, we need text data in the form of dialogues. This is essentially how our chatbot is going to respond to different exchanges and contexts.

Is Your Favorite Character on Kaggle?

There are a lot of interesting datasets on Kaggle for popular cartoons, TV shows, and other media. For example:

• Rick and Morty

• Harry Potter

• The Big Bang Theory

• Game of Thrones

We only need two columns from these datasets: character name and dialogue line.

Example dataset: Harry Potter movie transcript

Can't Find Your Favorite Character on Kaggle?

Can't find your favorite character on Kaggle? No worries. We can create datasets from raw transcripts. A great place to look for transcripts is Transcript Wiki. For example, check out this Peppa Pig transcript.

Example: Peppa Pig transcript

Using a regular expression like ([a-zA-Z|\s]+): (.+), we can extract out the two columns of interest, character name, and dialogue line.

Try it out on this Python regex website yourself!

How to Train the Model

Under the hood, our model will be a Generative Pre-trained Transfomer (GPT), the most popular language model these days.

Instead of training from scratch, we will load Microsoft's pre-trained GPT, DialoGPT-small, and fine-tune it using our dataset.

My GitHub repo for this tutorial contains the notebook file named model_train_upload_workflow.ipynb to get you started. All you need to do is the following: (please refer to the video for a detailed walkthrough)

1. Upload the file to Google Colab

2. Select GPU as the runtime, which will speed up our model training.

3. Change the dataset and the target character in code snippets like:

data = pd.read_csv('MY-DATASET.csv')
CHARACTER_NAME = 'MY-CHARACTER'

Running through the training section of the notebook should take less than half an hour. I have about 700 lines and the training takes less than ten minutes. The model will be stored in a folder named output-small .

Want an even smarter and more eloquent model? Feel free to train a larger model like DialoGPT-medium or even DialoGPT-large. Model size here refers to the number of parameters in the model. More parameters will allow the model to pick up more complexity from the dataset.

You may also increase the number of training epochs by searching for num_train_epochs in the notebook. This is the number of times that the model will cycle through the training dataset. The model will generally get smarter when it has more exposure to the dataset.

However, do take care not to overfit the model: If the model is trained for too many epochs, it may memorize the dataset and recite back lines from the dataset when we try to converse with it. This isn't ideal as we want the conversation to be more organic.

How to Host the Model

We will host the model on Hugging Face, which provides a free API for us to query the model.

Sign up for Hugging Face and create a new model repository by clicking on New model. Obtain your API token by going to Edit profile > API Tokens. We will need this token when we build the Discord bot.

Follow along with this section in my video to push the model. Also, remember to tag it as conversational in its Model Card (equivalently its README.md):

---
tags:
- conversational
---

# My Awesome Model

You will know that everything works fine if you are able to chat with the model in the browser.

How to Build the Discord Bot

Go to the Discord Developer's page, create an application, and add a bot to it. Since our chatbot is only going to respond to user messages, checking Text Permissions > Send Messgaes in the Bot Permissions Setting is sufficient. Copy the bot's API token for later use.

Sign up for Repl.it and create a new Repl, Python or Node.js for JavaScript, whichever you are working with.

Let's store our API tokens for Hugging Face and Discord as environment variables, named HUGGINGFACE_TOKEN and DISCORD_TOKEN respectively. This helps keep them secret.

Copy my Python script for a Python bot and my JS script for a JS bot. Note that for the JS bot, because of a version incompatibility with Repl.it's Node and NPM, we will need to explicitly specify a lower version of the Discord API in package.json.

"dependencies": {
    "discord.js": "^12.5.3",
}

With that, our bot is ready to go! Start the Repl script by hitting Run, add the bot to a server, type something in the channel, and enjoy the bot's witty response.

How to Keep the Bot Online

One problem with our bot is that it halts as soon as we stop the running Repl (equivalently, if we close the Repl.it browser window).

To get around this and keep our bot running indefinitely, we will set up a web server to contain the bot script, and use a service like Uptime Robot to pin our server every five minutes so that our server stays alive.

In my video tutorial, I copied the server code from these two freeCodeCamp posts (Python version, JavaScript version). Then, I set up the monitor on Uptime Robot. Now my bot continues to reply to my messages even if I close the browser (or shut down my computer all together).

Congratulations on reaching the end of this tutorial! I hope you enjoyed creating the bot and have fun chatting with your favorite character! 🥳

Tutorial Video Link

More About Me and My Chatbot Project

I'm Lynn, a software engineer at Salesforce. I graduated from the University of Chicago in 2021 with a joint BS/MS in Computer Science, specializing in Machine Learning. Come say hi on my personal website!

I post fun project tutorials like this on my YouTube channel. Feel free to subscribe to catch up on my latest content. 😃

Want to learn more about my bot? Check out this 15-minute real-time chat demo featuring me, my friend, and my bot!

Interested in the model I trained? Check it out on Hugging Face:

My chatbot was so popular on a 1k+ user server that... it crashed. 🤯 Read about my deployment post-mortem in this post:

Thanks for reading!

I'm Lynn, a software engineer and a recent graduate from the University of Chicago. This is the second course in my Coding Interview Crash Course Series. Feel free to check out my YouTube channel, Lynn's DevLab, to stay updated on this series.

This crash course is about Tree Traversal. If you just want to dive right in, you can find the course here (and linked at the bottom of this article). If you want a little more info, read on. 😎

Who is the Course for and What are Tree Traversal Algorithms? 🌳

You will get the most of this course if you already know a bit about the Tree data structure. Check out these tutorials if you need a refresher.

We will cover the traversal algorithms for both Binary Trees and N-ary Trees (in which each parent node has an arbitrary number of children).

If you have heard about Binary Search Trees (BST) before, that's a special type of Binary Tree so the techniques we are going to learn here also apply.

Trees are a favorite interview subject among top tech companies like Google, Microsoft, and Facebook, so let's crunch this topic!

We will learn about four traversal techniques and solve their corresponding LeetCode problems hands-on.

The four techniques are:

• Pre-order (Depth-First Search, DFS)

• Post-order

• In-order

• Level-order (Breadth-First Search, BFS).

Course Outline

This course video runs for a total of 30 minutes and features:

• A high-level description of the four traversal techniques: pre-order, post-order, in-order, and level-order

• Recursive implementations of pre-order, post-order, and in-order (Note: this doesn't apply to level-order)

• Iterative implementations of pre-order, post-order, in-order, and level-order

• An extension of the templates from Binary Trees to N-ary Trees

Let's dive into each of the four techniques below.

Tree Traversal Demonstration Using an Example Tree

We will use the following tree to demonstrate the output from the four traversal techniques.

Note that this tree is a simple Binary Tree, not a Binary Search Tree (BST). A BST is a special type of Binary Tree, so our techniques also apply. Also, in-order traversal becomes especially interesting when we work with a BST, as we will see below.

An example Binary Tree. Note that it's not a Binary Search Tree (BST).

Given this tree, the traversal result from the four techniques are as follows:

• Pre-order: 1, 2, 4, 5, 3

• Post-order: 4, 5, 2, 3, 1

• In-order: 4, 2, 5, 1, 3

• Level-order: 1, 2, 3, 4, 5

Pre-order Traversal

Pre-order traversal is also known as Depth-First Search (DFS) if we analyze the tree as a graph and take the tree root node as our starting node in the search.

As in the example above, we go all the way down to the leftmost node before visiting any other node that is a left child of some parent node.

Pre-order traversal allows us to explore roots before leaves, and is hence ideal for tasks like copying a tree.

Post-order Traversal

Post-order traversal does the opposite of pre-order traversal, allowing us to explore leaves before roots.

In-order Traversal

In-order traversal is especially useful for flattening a tree into an array representation.

For a Binary Search Tree like below, in-order traversal outputs an array in a sorted, non-decreasing order: -4, 3, 2, 5, 18.

Binary Search Tree example

Level-order Traversal

Level-order traversal is also known as Breadth-First Search (BFS) if we consider the tree as a graph and start our search from the tree root node.

We visit every node on the current level (depth) before moving onto those on the next level. Effectively, we visit the immediate neighbor of (one step away from) our current node before visiting neighbors that are farther away.

How to Implement these Four Techniques

We will use the following definition for a node of a Binary Tree:

# Definition for a binary tree node.
# class TreeNode:
#     def __init__(self, val=0, left=None, right=None):
#         self.val = val
#         self.left = left
#         self.right = right

Recursive implementation

Recursive implementations are the most straightforward. The most important thing to remember is the order in which we concatenate the results from the two recursive calls (one on the left subtree and one on the right subtree) with the value of the current node.

def preorder(root):
    if not root:
        return []
    return [root.val] + preorder(root.left) + preorder(root.right)

def postorder(root):
    if not root:
        return []
    return postorder(root.left) + postorder(root.right) + [root.val]

def inorder(root):
    if not root:
        return []
    return inorder(root.left) + [root.val] + inorder(root.right)

Iterative implementation

Compared to recursive implementations, iterative implementations are non-trivial. Most require that we use either a stack or a queue to keep track of the nodes that we need to visit.

def preorder(self, root):
    if not root:
        return []
    ret = []
    stack = [root]
    while stack:
        node = stack.pop()
        ret.append(node.val)
        # note that we append the right child before the left child
        if node.right:
            stack.append(node.right)
        if node.left:
            stack.append(node.left)
    return ret

def postorder(self, root):
    if not root:
        return []
    from collections import deque
    ret = deque()
    stack = [root]
    while stack:
        node = stack.pop()
        ret.appendleft(node.val)
        if node.left:
            stack.append(node.left)
        if node.right:
            stack.append(node.right)
    return ret

The implementation for in-order traversal looks quite different from pre-order and post-order:

def inorder(self, root):
    if not root:
        return []
    ret = []
    stack = []
    while root is not None or stack:
        while root is not None:
            stack.append(root)
            root = root.left
        root = stack.pop()
        ret.append(root.val)
        root = root.right
    return ret

Lastly, we have level-order traversal, where we will output the result as [[nodes on the first level], [nodes on the second level], [nodes on the third level], ...].

def levelorder(self, root):
    if not root:
        return []
    ret = []
    from collections import deque
    queue = deque([root])
    while queue:
        ret_row = []
        # fixed size for current level
        for _ in range(len(queue)):
            node = queue.popleft()
            ret_row.append(node.val)
            if node.left:
                queue.append(node.left)
            if node.right:
                queue.append(node.right)
        ret.append(ret_row)
    return ret

N-ary Trees

We now extend our templates from handling Binary Trees to handling N-ary Trees. We use the following definition for the node of an N-ary Tree:

class Node:
    def __init__(self, val=None, children=[]):
        self.val = val
        self.children = children

To extend our iterative implementations to handle N-ary Trees, all we need to do is to make sure that we are appending the child nodes that we will visit in a correct order.

Recall that in pre-order traversal, we appended the right child before the left child. So when appending the children of a node of an N-ary Tree, we need to reverse the list of children.

def preorder(self, root):
    if not root:
        return []
    ret = []
    stack = [root]
    while stack:
        node = stack.pop()
        ret.append(node.val)
        # reverse the list of children
        for child in node.children[::-1]:
            stack.append(child)
    return ret

For the other traversal techniques, since we are appending the children from the left to the right, we can iterative over the list of children normally:

def postorder(self, root):
    if not root:
        return []
    from collections import deque
    ret = deque()
    stack = [root]
    while stack:
        node = stack.pop()
        ret.appendleft(node.val)
        for child in node.children:
            stack.append(child)
    return ret

def levelorder(self, root):
    if not root:
        return []
    ret = []
    from collections import deque
    queue = deque([root])
    while queue:
        ret_row = []
        # fixed size for current level
        for _ in range(len(queue)):
            node = queue.popleft()
            ret_row.append(node.val)
            for child in node.children:
                queue.append(child)
        ret.append(ret_row)
    return ret

And now we can apply our tree traversal templates to trees that have an arbitrary number of children at each node.

Conclusion

In this crash course on tree traversal, we learned four techniques: pre-order, post-order, in-order, and level-order. We discussed how they differ and what tasks they are best for.

We also implemented them both in a recursive fashion and in an iterative one. Last but not least, we extended the techniques to deal with not only Binary Trees, but N-ary Trees.

I hope now you feel more confident about tree traversal interview questions. This is also a nice segue into the topic of my next crash course on graph traversal.

With the knowledge of pre-order traversal and level-order traversal, DFS and BFS won't be completely out of the blue for you 🤓 I will even talk about how I applied graph traversal when developing an algorithm for my match-three game, Clicky Galaxy, so stay tuned!

Resources

Watch the course here:

Access the code template on my GitHub:

Check out the whole crash course series:

And lastly, feel free to subscribe to my YouTube channel for more content like this :)

This tutorial is relevant even if your application doesn't use Python - for example, you are building a game in Unity and C# which doesn't have robust libraries for onset detection.

If that is the case, you may export the detected onset timestamps to a text file to read into your engine of choice.

If you prefer a video tutorial to an article, here's the video version of this tutorial.

Applications of Music Onset Detection

I came across this music onset detection technique when I was building a rhythm game and wanted a way to automatically generate beat maps for any song.

Check out the end of this article for my open-source rhythm game and my step-by-step course on how I built it.

My rhythm game showcase

Besides building a rhythm game, this technique has a lot of other applications.

For example, detecting onsets is usually the first step in music information retrieval and analysis.

Another example could be that we are building a game in which there are combat scenes. We may detect the onsets in the BGM and spawn an enemy at every onset. This can create a unique pacing in our game.

I'll demonstrate how to detect music onsets using two different Python packages for audio signal processing, Aubio and librosa. Both packages detect onsets pretty accurately. The small difference is that librosa works for the OGG format while Aubio doesn't.

How to Set up the Development Environment

We will be installing our packages in a virtual environment.

In the command line, we create a virtual environment named python-aubio-librosa as follows. -m stands for module.

$ python3 -m venv python-aubio-librosa

Then we activate the virtual environment:

$ . python-aubio-librosa/bin/activate

Note that if you try to activate the environment using the following command, you will get an error:

$ ./python-aubio-librosa/bin/activate
-bash: ./python-aubio-librosa/bin/activate: Permission denied

Once your environment is activated, the name of the environment will show in parentheses:

(python-aubio-librosa) $ ...

We can check that if we invoke python or pip, the invoked programs will be those in our virtual environment instead of the system-level ones.

If we haven't activated our environment, the output will point to the system-level programs.

$ which python
/usr/bin/python
$ which pip
/usr/local/bin/pip

Once we have activated our environment, the output will point to the local ones.

(python-aubio-librosa) $ which python
/Users/USERNAME/Desktop/python-aubio-librosa/bin/python
(python-aubio-librosa) $ which pip
/Users/USERNAME/Desktop/python-aubio-librosa/bin/pip

How to Install and Use Aubio

We will install Aubio via pip:

(python-aubio-librosa) $ pip install aubio

The function that we will use to generate a list of onset timestamps as floating point numbers in seconds is as follows. This function comes from Aubio's official documentations, so we can just use it without learning about the nitty-gritty details (like FFT, Fast-Fourier Transformations) in audio signal processing.

from aubio import source, onset

def get_onset_times(file_path):
    window_size = 1024 # FFT size
    hop_size = window_size // 4

    sample_rate = 0
    src_func = source(file_path, sample_rate, hop_size)
    sample_rate = src_func.samplerate
    onset_func = onset('default', window_size, hop_size)

    duration = float(src_func.duration) / src_func.samplerate

    onset_times = [] # seconds
    while True: # read frames
        samples, num_frames_read = src_func()
        if onset_func(samples):
            onset_time = onset_func.get_last_s()
            if onset_time < duration:
                onset_times.append(onset_time)
            else:
                break
        if num_frames_read < hop_size:
            break

    return onset_times

Then, we write a main function that takes in the path to an audio file, and outputs the onset timestamps to a file, keeping the first four decimal places in each float, one float per line.

def main():
    file_path = '../game/audio/my-music.mp3'
    onset_times = get_onset_times(file_path)
    # remove extension, .mp3, .wav etc.
    file_name_no_extension, _ = os.path.splitext(file_path)
    output_name = file_name_no_extension + '.beatmap.txt'
    with open(output_name, 'wt') as f:
        f.write('\n'.join(['%.4f' % onset_time for onset_time in onset_times]))

Let's invoke the script from the command line. Aubio might raise a warning about accuracy but my experimentation shows that Aubio is still pretty accurate.

(python-aubio-librosa) $ python generate_beatmap_aubio.py 
[mp3 @ 0x7fe671031e00] Estimating duration from bitrate, this may be inaccurate

An example output file would look like below. For a short 15-second music clip, Aubio detected 26 onsets. These are the timestamps that we can use for our application.

An example output file consisting of onset timestamps

And that's it for Aubio.

How to Install and Use Librosa

Similar to Aubio, we will install librosa also via pip:

(python-aubio-librosa) $ pip install librosa

Compared to Aubio, librosa's library methods are easier to use. librosa.load returns a NumPy array x and a sampling rate sr, which we pass to librosa.onset.onset_detect to get a list of onset frames.

Finally we convert onset frames into onset timestamps, and write each timestamp to an output file like we did for Aubio.

import librosa

def main():
    file_path = '../game/audio/my-music.ogg'
    x, sr = librosa.load(file_path)
    onset_frames = librosa.onset.onset_detect(x, sr=sr, wait=1, pre_avg=1, post_avg=1, pre_max=1, post_max=1)
    onset_times = librosa.frames_to_time(onset_frames)
    # remove extension, .mp3, .wav etc.
    file_name_no_extension, _ = os.path.splitext(file_path)
    output_name = file_name_no_extension + '.beatmap.txt'
    with open(output_name, 'wt') as f:
        f.write('\n'.join(['%.4f' % onset_time for onset_time in onset_times]))

The output file will be in the same format as shown above for Aubio.

Conclusion

Thanks for reading and I hope you are ready to apply this onset detection technique to your next project. 🎶

As a recap of the differences between Aubio and Librosa, both detect onsets pretty accurately based on my experimentation.

Aubio is more restricted in terms of audio file formats: it raises a warning about accuracy for MP3 files and doesn't handle OGG files.

On the flip side, Librosa is able to handle most common audio file formats: MP3, OGG, FLAC, and M4A. Librosa's library interface is also easier to use than Aubio's, especially for those of us who aren't pros in signal processing.

Check out the resources below if you'd like to learn more or get inspired for your next project!

Resources

You can check out the code used in this tutorial on my GitHub or watch the video version of this tutorial on YouTube.

If you are interested in building a rhythm game, check out my open-source one built in Python on GitHub and my Udemy course in which we will build the game from the ground up.

If you'd like to know whether the course is for you, check out my course promotional video on YouTube and free sample lectures on Udemy.

My YouTube channel also features other fun project tutorials like building a Discord AI Chatbot, and, a series of coding interview crash courses I'm developing. Hope to see you there!

In it, we will learn about an all-purpose coding template for solving backtracking problems and apply it to two LeetCode hard problems. Ready to crunch your next coding interview? Let's go!

If you just want to dive right in, you can find the course here (and linked at the bottom of this article). If you want a little more info, read on. :)

Who is the Course for and What is the Backtracking Algorithm?

This course is suitable for anyone who is preparing for coding interviews, especially those who are looking to hone their skills in solving backtracking problems.

Backtracking is a common category for questions in coding interviews. The algorithm for solving those problems usually involves recursion and building incrementally on previous states to arrive at the ultimate valid solution.

Backtracking is a favorite topic among top tech companies like Google, Microsoft, and Facebook, precisely because it requires robust reasoning and coding competence to nail those questions.

However, because of its recursive nature and complex problem definition, backtracking problems are usually a major source of confusion among devs who are preparing for coding interviews.

To address this confusion, this crash course aims to arm with you a concise, 20-line template that you can apply to the majority of backtracking problems.

Course Outline

This course runs for a total of 40 minutes and the structure is as follows:

• An 8-minute introduction to the template

• A 15-minute hands-on code-along session for LeetCode Question 51. N-Queens

• A 15-minute hands-on code-along session for LeetCode Question 37. Sudoku Solver

The All-Purpose Template

For your convenience, I've copied the template over. This is exactly the same template that I use for my coding interviews, or when I'm developing algorithms for my indie games. I even used it once in my research on a non-convex optimization problem.

def is_valid_state(state):
    # check if it is a valid solution
    return True

def get_candidates(state):
    return []

def search(state, solutions):
    if is_valid_state(state):
        solutions.append(state.copy())
        # return

    for candidate in get_candidates(state):
        state.add(candidate)
        search(state, solutions)
        state.remove(candidate)

def solve():
    solutions = []
    state = set()
    search(state, solutions)
    return solutions

The first three are all helper functions, and the last and most important one, solve, is essentially the one that a LeetCode problem is asking you to write.

Solving LeetCode Problems Hands-On

We will next apply this template to solving two LeetCode hard problems: LeetCode Question 51. N-Queens and LeetCode Question 37. Sudoku Solver.

To illustrate the flexibility of the template, see below for how we solve the N-Queens problem by doing nothing fancy other than adapting the four functions (renaming solve to solveNQueens). The complete code for either problem is available in my GitHub gist.

Watch the video course to follow along my analysis and adaptation of the template.

class Solution:
    # solveNQueens is essentially the solve function
    def solveNQueens(self, n: int) -> List[List[str]]:
        solutions = []
        state = []
        self.search(state, solutions, n)
        return solutions

    def is_valid_state(self, state, n):
        # check if it is a valid solution
        return len(state) == n

    def get_candidates(self, state, n):
        if not state:
            return range(n)

        # find the next position in the state to populate
        position = len(state)
        candidates = set(range(n))
        # prune down candidates that place the queen into attacks
        for row, col in enumerate(state):
            # discard the column index if it's occupied by a queen
            candidates.discard(col)
            dist = position - row
            # discard diagonals
            candidates.discard(col + dist)
            candidates.discard(col - dist)
        return candidates

    def search(self, state, solutions, n):
        if self.is_valid_state(state, n):
            state_string = self.state_to_string(state, n)
            solutions.append(state_string)
            return

        for candidate in self.get_candidates(state, n):
            # recurse
            state.append(candidate)
            self.search(state, solutions, n)
            state.pop()

Check out the video course here:

You can access the template as well as the solutions to the two LeetCode problems (N-Queens and Sudoku Solver) in my GitHub gist:

Final Thoughts

Remember that practice makes perfect, so do try applying this template to more backtracking problems on LeetCode. Best of luck crunching your next coding interview!

For more content like this, check out my YouTube channel:

A Visual Novel might be the game genre you are looking for. And this tutorial is here to help set you up in 10 minutes, with minimal coding experience required. Let's get started!

Tool Introduction and Setup

We will be using the Ren'Py Visual Novel Engine, which is built on top of Python 2.7. As Python itself is a scripting language, you will be able to "script" your visual novel project in Ren'Py.

Since the arrival of Python 3, Python 2.7 has been sunsetted and is no longer actively maintained. Rest assured - Python 2.7 has all the features we need to create an awesome visual novel. Moreover, the newest release of Ren'Py, Ren'Py SDK 7.4, provides a compatibility mode for Python 3. The developers also express the hope of integrating fully with Python 3 in the next release, Ren'Py 8.0.

How to Download and Set up Ren'Py

You can download the latest version of Ren'Py for your operating system (Windows, Mac, Linux) on its official site.

Once you have downloaded and installed Ren'Py, you may open the Ren'Py launcher, select one of the starter projects (Tutorial, The Question) on the left, and click on Launch Project.

Check out the Tutorial to get a sense of the full power of this engine, or The Question to see a very basic visual novel that you can make in 10 minutes.

The Ren'Py Launcher

How to Create a New Project in Ren'Py

Let's create a new project. I called mine Forest Hike🌲, featuring a simple scene where two kids explore a forest trail.

Pay attention to the resolution you choose: The default is 1280 x 720. When we add images, our background images should also conform to these dimensions.

How to Run the Boilerplate Project

Launch the boilerplate project. Press Start from the main menu. After two brief lines of dialogue, the script ends and we are brought back to the main menu.

Running the boilerplate project

How to Script Our Project

Let's start scripting our game based on the boilerplate.

Text Editors like Sublime Text and Atom both have syntax highlighting for Ren'Py scripts ending in .rpy. Check out this Sublime Text package and this Atom package.

The two lines of dialogue we saw are located in script.rpy. Open that file and its content should look like the following. Just like in Python, lines that start with # are comments and won't be evaluated as part of the Ren'Py script. The comments and the code below are pretty self-explanatory.

# Declare characters used by this game
define e = Character("Eileen")


# The game starts here
label start:

    # Show a background
    scene bg room

    # This shows a character sprite
    show eileen happy

    # These display lines of dialogue.
    e "You've created a new Ren'Py game."
    e "Once you add a story, pictures, and music, you can release it to the world!"

    # This ends the game.
    return

The label is used for control flow, which we will cover in the following section.

The return statement on the last line is what brought us back to the main menu.

How to Declare Characters and Add Dialogues

Let's replace the boilerplate character declaration and dialogues with those from our story. Here is how my story goes:

define laura = Character('Laura')
define tom = Character('Tom')

label start:

    laura "Wait up, Tom!"
    laura "Tom!"
    laura "I said wait up!"
    laura "...Tom?"
    tom "Boo!"
    laura "Yikes... not again."
    tom "Are you scared?"
    laura "Not at all."
    laura "Running off like that is dangerous, you know."
    laura "We are in the forest. We could get lost."
    tom "Okay okay mom. I won't do it again."

    return

How to Add Images and Transitions

If you aren't an artist yourself, you may consider looking for assets in the creative commons domain. itch.io, a marketplace for indie games, is a great place to look for assets.

I found this set of character sprites for my project. For the background images, I simply applied artistic filters to creative commons pictures, giving real-life pictures a nice watercolor aesthetic.

I put all my images inside game/images. Note that it's okay to use whitespaces in the image file names.

A conventional way of organizing image assets

Then we add to script.rpy those images as well as some transitions. Ren'Py applies transitions when it sees keywords like with and at. You can read more about transitions in Ren'Py's ATL (Animation and Transition Language) docs.

label start:
    scene bg forest day with fade
    show laura angry
    laura "Wait up, Tom!"
    laura "Tom!"
    laura "I said wait up!"
    laura "...Tom?"
    hide laura
    scene bg forest day with vpunch
    show tom happy at right with moveinbottom
    tom "Boo!"
    show laura angry at left with moveinleft
    laura "Yikes... not again."
    tom "Are you scared?"
    laura "Not at all."
    show laura sad
    laura "Running off like that is dangerous, you know."
    laura "We are in the forest. We could get lost."
    tom "Okay okay mom. I won't do it again."

    return

With the addition of visuals, our story is coming together nicely.

How to Add Choices

A game with different branches and endings more than doubles the fun. Adding a choice menu to a Ren'Py script is simple:

menu:
    "Which way should we go?"

    "Left":
        tom "Let's check out the trail on the left!"
    "Right":
        tom "Right is always the right way to go!"

How to Use Python Variables and Control Flow

We may define Python variables in a Ren'Py script and alter the flow of our story depending on their values. Python statements start with a $ or an indented python: block.

Adding variables to our previous choice menu:

menu:
    "Which way should we go?"

    "Left":
        tom "Let's check out the trail on the left!"
        $ is_lost = True
    "Right":
        tom "Right is always the right way to go!"
        $ is_lost = False
scene bg forest noon with Dissolve(3.0)
scene bg forest dusk with Dissolve(3.0)
show laura sad at left with moveinleft
laura "It's getting late. Are you sure we aren't lost?"
if is_lost:
    show tom sad at right with moveinleft
    tom "I hope not, but I have a bad feeling about this."
else:
    show tom happy at right with moveinleft
    tom "We are fine. Look! There's the end of the trail."
    tom "I'm the best scout around."

See the end of this post for my handcrafted resources for working with Python in Ren'Py.

How to Play Music

According to Ren'Py's Audio docs, playing music and sound effects is as easy as the following:

play music "mozart.ogg"
play sound "woof.mp3"

How to Save and Load the Game

Ren'Py has done all the heavy lifting for us and has a built-in save and load system.

Saving the game

Loading the game

Other Customization You Can Do

Currently in our dialogue, the entire line of text is displayed at once, instead of character by character. We may change the variable preference.text_cps (CPS stands for character per second) in options.rpy like this.

default preferences.text_cps = 20

Setting a custom CPS displays the text one character at a time at a given rate

There is even more that we can customize in gui.rpy (GUI stands for Graphic User Interface, which includes the textbox and menu choice items that we have seen) or screens.rpy.

What Else is Ren'Py Capable of?

Ren'Py's capability extends way beyond displaying text and images. I may go as far as to say that Ren'Py is about as capable and versatile as Python itself.

With the Pygame module, it is possible to create complex mini games in Ren'Py. I myself have created and open-sourced a few mini games, including a chess engine that integrates with the Stockfish chess AI as well as a rhythm game engine that automatically generates the beat map for any music file.

My chess game demo

My rhythm game demo

Resources

This tutorial should help get you started with Ren'Py. It's always useful to refer to the official documentation as you learn the more advanced features to add buzz to your project.

I've also created some course material to help you brush up on Python fundamentals and their capabilities in Ren'Py scripts.

Check out my course intro video on YouTube:

Thanks for reading and have fun telling your story!

In the first hour, Deployment Hell struck and I had to take the bot down for maintenance. Another hour passed and I managed to patch up my bot and send it back.

Now my bot is up and running and more resilient than ever. As for me, I survived and even thrived in Deployment Hell 🔥. In this deployment postmortem, I'm going to show you how.

I sent my AI chatbot into the server at 2 pm on June 2nd, and hype started gathering around it. The chat went on for a while and all was nice and smooth.

At 3:20 pm, everything started falling apart: My free-tier API key reached its hourly request limit, and I had no choice but to take down the bot and the server for maintenance.

Never mind the typos in my message 😅 This incident caught me totally unprepared

Despite being struck by Deployment Hell in the first hour on the first day of my project debut, I knew I need to sit down, take a deep breath, and recover from this incident.

What Went Well with Deployment

As a first step, I didn't forget to congratulate myself on what went well despite this mishap. Clearly, people were enthusiastic about chatting with my chatbot, to the extent that we went over rate limit.

Moreover, in the brief hour when I observed people interact with my bot in real time, I discovered several good design choices that I've consciously, unconsciously, or subconsciously made.

Avoid Feature Creep At All Costs During Development

I originally developed my code for a tutorial, so I kept my code as simple and readable as possible, without complicated features that won't serve my bot's main use case: chatting.

That said, I marked down TODOs and stretch goals in my code, hoping to get back to those if necessary. For example:

 # TODO: cache chat history in DB and load
 # TODO: after each user input and bot input,
 # append them to conversation history for the next query
 ...
 # FIXME: better make this try-except block more fine-grained

As I observed users interacting with the bot, I'm actually relieved that I didn't implement the memory cache feature. Several users were talking with the bot at once, each along their different conversation thread. If I were to keep track of the conversation history, I would have to create a unique log for each user, further complicating database operations.

Abide by the Principle of Least Privilege

One thing I learned in my Computer Security class is the Principle of Least Privilege (PoLP) – granting an application the minimum amount of access it needs to do its job.

My chatbot only needs two low-level security permissions: View Channel for reading users' messages, and Send Text Messages for replying to users.

Of course I could have given it more fancy permissions like those shown below in the image, just in case it needs any. But that would have violated PoLP and who knows whether my malfunctioning bot will bring down anything else with it when it fails?

Permission settings for Discord bots

Other Observations from Deploying My Bot

Despite its ephemeral lifespan, my bot offered me an opportunity to conduct user research in the real world. This is a server with 1000+ users, not my cozy dev server where my friends and I hang out and take turns to politely exchange lines with the bot.

Here, I observed several interesting user behaviors:

• People tend to ask the bot open-ended questions instead of factual ones. Because I built my bot based off a video game character, when developing the AI model, I was keen on making sure the model learns the canon information about the character, like name, age, and role in the game. I was relieved when I saw that people are much more curious about the bot character's preference for ice cream flavor than their factual place of birth.

• People use a lot of emoticons :), emojis 😃 and GIFs as they text. However, these will most likely be treated as <UNKNOWN> tokens in the AI model's tokenizer, which means I should sanitize user inputs.

I was also very fortunate to receive direct feedback from friendly people on the server. One feature request that I got was to make the bot attach its response to a user's message thread, instead of just dumping its response in the channel.

Buzzing with excitement from people's enthusiasm and armed with insights from user research, I was ready to patch up my bot and send it back as soon as possible.

What I Needed to Fix

As a good development habit, I kept my code well-organized and modularized, so switching from the production bot back to my development bot requires no more than copy-pasting the dev bot's API key.

Once I was running on my dev server, I sat down to identify the types of problems I needed to tackle.

Fatal Crashes

The fatal bug that caused me to take down my bot was that I hit an hourly API rate limit. I took the obvious approach of keeping redundancy in my system: Keep an alternative API key, and once the primary one runs out, switch over to the alternative, and then switch back at the turn of the hour.

Workaround aside, I noted that this is a short-term solution. If I need to properly scale up my system, I should make an estimate of the number of requests per hour, as I'll discuss at the end of this section.

New Features for Usability

I decided on several new features that will make my bot more user-friendly. Some highlights are:

• As some server people suggested, I re-programmed the bot so that instead of dumping responses to different user messages into the channel, it directly responds to each user message in the message's thread.

• I sanitized user inputs by removing Unicode emojis and Discord-specific <:some_hilarious_gif> tags. This will limit <UNKNOWN> tokens that my AI model will receive and help it generate better responses.

• I implemented a magic command $ignore [message] that allow users to send a message to the channel without triggering a bot response. This feature comes from my observation that, whenever the bot says something funny or smart (or both!), users will remark on that by sending a text intended for their friends (and not the bot) to the channel. It'd be annoying to still receive a bot response on a remark intended for a friend. Hence, I hope that this magic command will address this user pain point.

• I implemented magic commands for the server moderators to interface with my bot (stopping or rebooting) so that they can keep the bot under control without having to access my Repl.it server. This makes both my job and theirs easier.

Future-proof Logging

In my cozy dev server, there is little complexity, whereas on this 1000+ user server where 40% of users are online at any given moment, complexity explodes.

There are multiple channels besides the chat channel dedicated to my bot, multiple user roles and permission levels, multiple users typing at the same time, and so on.

While I certainly cannot prevent all possible failure scenarios, what I could do is to protect the important part of my code with a try-except block and log out all information that might reveal the cause of a failure. Since real-time system bugs are subtle and difficult to reproduce, logging will save me lots of headaches down the road.

except Exception as e:
            print(e, 'Offending channel', message.channel, 
            'Offending message', message.content, 
            'Offending bot response', bot_response, 
            sep='\n', end='\n\n')

Scalability

Estimating under some system constraints is where basic statistics and heuristics come in. Hugging Face's model Inference API imposes two limits on the scalability of my system:

1. A 10k tokens (characters) per hour rate limit, which is about 300 queries.

2. A 30k tokens per month quota for free-tier accounts, which is about 900 queries.

Wonder how I get the numbers? Fun fact: 1) 10k characters is between 1430 and 2500 words. We will take 2100 since Discord messages usually use simple, short words. 2) The average length of a text message is 7 words. 2100 / 7 = 300 messages

After processing these numbers, the fact that I hit the per-hour rate limit during the first hour of my bot debut is quite a remarkable feat. People are clearly hyped about my witty chatbot. 🥳

Suppose the hype recedes and life goes on, consider now a hypothetical scenario where 20 users (2% of the 1000+ on the server) regularly chat with my bot, each for 25 lines, in the two hours following dinner. This produces a total of 500 queries in two hours (or 250 per hour), meaning that my bot is safe from the per-hour rate limit of 300.

However, in a month, 500 * 30 = 15,000 queries, 15 times more than my quota of 900. If my bot is indeed this popular, I would need to switch to a higher-tier subscription plan to ensure that it remains available.

From Tutorial Code to Production Code

Compared to my tutorial code which strives to be simple, readable, and educative, my production code is longer, more complicated, but also more robust.

What Makes a Great Side Project

Having emerged from Deployment Hell, like my bot, I'm more resilient than ever and have gained new insights about the principles and challenges in real-world software engineering.

As a final takeaway, I reflect on what makes my Discord AI chatbot this popular. (On June 3rd, a day when it's up 24 hours, it had already busted the monthly 30k quota on both my account and one I borrowed from a friend, totaling 2,000+ messages. 🤓)

I have completed and polished various side projects that received positive feedback, but none of them were as half popular as this one. In retrospect, it's not too hard to see why.

Among projects that I'm most proud of, I built a chess engine and a rhythm game engine for the Ren'Py Visual Novel (VN) game development engine. Both are rated 5-star on itch.io, a popular platform for publishing indie games.

These projects, however, are open-source engines intended for developers to integrate into their VN games more than standalone playables that can entertain players for hours.

In comparison, my Discord AI chatbot manages to capture each of the following elements that distinguishes a great side project from a good one:

• Audience: I'm fortunate to have this friendly server with 1000+ users who are open to experimenting with the bot and provide me with helpful feedback.

• Accessibility: For people to enjoy my chabot, there is nothing special they need to add to their routine - not even opening up a new web app - they just log into Discord as usual, and voilà, the bot is here to chat!

• Interactivity: Without interactive components, even the most visually-astonishing game will fail to retain players' attention. Nothing to worry about for my chatbot though: Like a loyal friend, it always has something to quip about whenever you need a good chat.

If you'd like to learn more about my methodology for working on side projects, check out my previous blog post:

Also check out my chatbot tutorial!

You can also try this out in JavaScript:

Live2D is a technology that allows artists to easily transform traditional 2D illustrations to create fluid expressions and motions.

The most popular software for Live2D modeling and animation is Cubism, which also provides well-documented SDK for web, native apps, and the Unity game development engine.

In this tutorial, I will walk you through how to build on top of Cubism's official Live2D Web SDK sample and deploy it to Heroku, a popular cloud app-hosting platform.

How to Set Up the Environment

To follow along with this tutorial, clone my GitHub repo and checkout the start branch. The finished project is on the develop branch.

I've also recorded a video tutorial on YouTube.

git clone https://github.com/RuolinZheng08/heroku-live2d.git
git checkout start

# update the submodule, Cubism's Live2d Web Framework
git submodule update --init

Install Node.js and npm using Homebrew:

# if you need to install homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# homebrew will install node and npm at the same time
brew install node

I'll be using Visual Studio Code as my main IDE, but you may follow along using any editor of your choice.

How to Run the Starter Code Locally

The directory structure is as follows. Our web app will be served from Samples/TypeScript/Demo.

.
├─ .vscode          # Visual Studio Code project setting
├─ Core             # Live2D Cubism Core JavaScript and TypeScript source code
├─ Framework        #  Source code for the rendering and animation features
└─ Samples
   ├─ Resources     # Live2D model files and web image assets
   └─ TypeScript    # [IMPORTANT] TypeScript sample project

Inside the heroku-live2d directory, run the following commands:

cd Samples/TypeScript/Demo/

npm install

npm run-script build

npm run-script serve

Navigate to http://localhost:5000/Samples/TypeScript/Demo/ and you should be able to see a Live2D character.

To interact with the model, hold down your mouse cursor and the character's head and eyes will follow your cursor. Tap on the body of the character to see a special animation. Tap on the gear icon in the top right corner to switch between different models.

Mark from Samples/Resources/Mark

How to Deploy to Heroku

The starter code uses npm, TypeScript, and webpack.

To deploy our project to Heroku, we need to create a package.json file that Heroku can use to build our project in our project root directory. We also need to modify Samples/TypeScript/Demo/package.json and the webpack configuration in Samples/TypeScript/Demo/webpack.config.js.

Top-level package.json

The boilerplate package.json for a Node.js Heroku app looks like this:

{
    "name": "heroku-live2d",
    "description": "Live2D Cubism Heroku Demo",
    "scripts": {
        "start": ...,
        "build": ...
    },
    "dependencies": {
        ...
    }
}

Inspect the dependencies and devDependencies attributes in Samples/TypeScript/Demo/package.json and add both sets of dependencies as dependencies to heroku-live2d/package.json.

Remember that when building and serving locally, we used npm run-script [build|serve] from inside the Samples/TypeScript/Demo directory.

Therefore, to run these npm commands from the project root, we need to prepend cd Samples/TypeScript/Demo before the npm commands. The build command, for example, will become:

cd Samples/TypeScript/Demo && npm run-script build

With these changes, the top-level package.json should look like this:

{
    "name": "heroku-live2d",
    "description": "Live2D Cubism Heroku Demo",
    "scripts": {
        "start": "cd Samples/TypeScript/Demo && npm run-script start",
        "build": "cd Samples/TypeScript/Demo && npm run-script build"
    },
    "dependencies": {
        "@typescript-eslint/eslint-plugin": "^2.18.0",
        "@typescript-eslint/parser": "^2.18.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.0",
        "eslint-plugin-prettier": "^3.1.2",
        "prettier": "^1.19.1",
        "rimraf": "^3.0.1",
        "serve": "^11.3.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.5",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1",
        "whatwg-fetch": "^3.0.0"
    }
}

Samples/TypeScript/Demo/package.json

On localhost, we were running on port 5000. However, Heroku will dynamically assign our web app a port stored in a variable $PORT. Therefore, we need the npm run-script start command inside Samples/TypeScript/Demo/package.json to start the webpack server on port $PORT.

Append to scripts > start > webpack-dev-server --progress so it looks like this:

"scripts": {
    "start": "webpack-dev-server --progress --port $PORT",
    ...
}

Samples/TypeScript/Demo/webpack.config.js

Add disableHostCheck to the configuration of devServer and remove port since we have configured it dynamically above.

module.exports = {
    ...,
    devServer: {
        contentBase: path.resolve(__dirname, '../../..'),
        watchContentBase: true,
        inline: true,
        hot: true,
        port: 5000, // delete this line
        host: '0.0.0.0',
        disableHostCheck: true, // add this line
        compress: true,
        useLocalIp: true,
        writeToDisk: true
    },
    ...
}

Add watchOptions so that our node_modules won't be watched. If we don't do this, we will run into an error about exceeding the maximum number of watchers when we deploy to Heroku.

module.exports = {
    ...,
    watchOptions: {
        ignored: /node_modules/
    },
    ...
}

Deploy to Heroku

To download the Heroku command line client, run

brew tap heroku/brew && brew install heroku

Log into Heroku from the command line using heroku login.

Create a Heroku app and append some numbers (for example, 123) to the app name to ensure uniqueness.

heroku create heroku-live2d-NUMBERS

Set up Node.js as the buildpack:

heroku buildpacks:set heroku/nodejs

Add and commit your project using git. Note that we don't necessarily need git push:

git add .
git commit -m "Ready to deploy to heroku"

Push the project to Heroku, assuming you are following along on the start branch. You can always check the branch you are on and push from that branch.

# check which branch we are on
git branch

# the syntax is
# git push heroku GIT_BRANCH_NAME:HEROKU_BRANCH_NAME
git push heroku start:master

You may need to wait for a few minutes for the build process to complete.

After that, navigate to YOUR-HEROKU-APP-NAME.herokuapp.com/Samples/TypeScript/Demo. In my case, the URL is https://heroku-live2d.herokuapp.com/Samples/TypeScript/Demo/. The Live2D characters will be there to greet you :)

Notice that the highlighted URL is already on Heroku

How to Redirect index.html to Samples/TypeScript/Demo

You might have noticed that YOUR-HEROKU-APP-NAME.herokuapp.com shows a list of the directory structure instead of the Live2D models. We can solve this by adding a dummy top-level index.html that redirects to Samples/TypeScript/Demo.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- Just a dummy html to redirect to my subdirectory -->
    <meta http-equiv="refresh" content="0; url=Samples/TypeScript/Demo">
</head>

<body>

</body>

</html>

Rerun the deployment command git push heroku start:master. Now when you visit YOUR-HEROKU-APP-NAME.herokuapp.com, you will be automatically redirected to the Live2D model page.

Congratulations on making it to the end of this tutorial! You now have a Live2D Web App deployed to Heroku.

I hope you enjoyed this tutorial. Let's keep in touch! Connect with me on LinkedIn, GitHub, Medium, or check out my personal website.

Resources & Links

My GitHub repo for this tutorial

My Heroku App

My YouTube Video Tutorial

Cubism's Official SDK Documentation

This engine will be integrated into a kinetic novel game, The Wind at Dawn, at that game’s completion.

In this post, I’d like to share some key learnings, technical and non-technical, that I gathered from pushing this one-person project from start to finish in a month.

_[My Chess Engine Project on GitHub](https://github.com/RuolinZheng08/renpy-chess" data-href="https://github.com/RuolinZheng08/renpy-chess" class="markup--anchor markup--figure-anchor" rel="noopener" target="blank)

Appreciate the Value of Rewriting Old Code

For CS projects at school, I seldom have the opportunity or experience the need to revisit my code.

However, this is not the case when I work on my passion projects: I love to take every opportunity to improve their usability and reusability in the hope that my code will be of value to other developers.

This chess engine is based on a chess engine I created in Ren’Py and vanilla Python while teaching myself Python during my first summer break in college.

That old chess engine is, in turn, based on a project in my college Intro to CS class (a chess GUI game written in Racket, a functional programming language). That is to say, I’ve rewritten my code twice to produce this final chess engine.

For my first rewrite, I simply “translated” the chess logic (for determining whether a move is legal, endgame conditions, and so on.) from Racket to Python. I also experimented with Object-Oriented Programming, wrote a minimax chess AI following online tutorials, and implemented the GUI in Ren’Py.

Since I only knew the very basics of chess and wrote my chess logic per my school project grading spec, my first chess engine didn’t support special moves like en passant, castling, or promotion.

To address this issue in my second rewrite, I researched open-source Python libraries and found python-chess, a library with full support for chess moves and endgame conditions like claiming a draw when threefold repetition occurs.

On top of that, it has also integrated Stockfish, a chess AI, and this integration will enable my chess engine to configure the strength of the chess AI.

These two features added great value to my chess engine version 2.0 and allowed me to focus on the more important aspects of my rewrite, which I will describe below.

Read the Documentation and Keep Compatibility in Mind

It has become my habit to skim through the documentation of the libraries that I need for my project before jumping into the design and the code. This helps me evaluate any issue with dependency and compatibility that might arise.

This Ren’Py GitHub issue points to the fact that Ren’Py uses Python 2 and hasn’t yet been ported to Python 3. So I recognized that I needed a version of python-chess that supports Python 2, as the latest version only supports Python 3.7+.

Fortunately, version 0.23.10 supports both Python 2.7 and Python 3.4+. I ultimately settled on version 0.23.11 as it is the last version that still supports Python 2.7.

Having sorted through dependency and compatibility issues, I was ready to move on to design and coding.

Follow Software Engineering Best Practices

Note: A lot of terms mentioned in this section are from Agile/Scrum.

Gather Feature Requirements for Project Design

While it is tempting to jump straight into coding, I cannot stress enough the importance of design.

Think about design as a high-level roadmap that clearly delineates the starting point, milestones, and ending points of the project. This lets developers refer to when they are waist-deep in intricate implementation details.

This is especially important for extracurricular projects as they don’t usually have a detailed, highly-technical spec, whereas most school projects do.

For my chess engine, I identified the following rewrites/additional features:

• Integrate the chess logic from python-chess

• In my Ren’Py GUI code, replace the chess logic and chess AI I wrote with the chess logic and Stockfish APIs from python-chess

• Support various gameplay modes: Player vs. Player, Player vs. Computer (where Player can choose to play as black or white), adjustable strength of the chess AI via adjustments to Stockfish’s configuration parameters

• Develop a Ren’Py GUI for pawn promotion

• Develop a Ren’Py GUI for claiming a draw in the case of threefold repetition or the fifty-move rule

Develop a Proof of Concept Prototype

A Proof of Concept (POC) prototype helps me gauge the time and effort needed to implement the required features.

For my chess engine POC, I integrated python-chess with my original Ren’Py GUI code. I made sure its set of features was minimum yet readily extensible:

• I integrated python-chess with my original Ren’Py GUI code and was able to move pieces around

• I only implemented Player vs. Player in order to postpone integrating Stockfish for chess AI

• I only allowed non-promotion moves so as to postpone developing the GUI for pawn promotion

Identify the Project’s Definition of Ready and Definition of Done

My project’s Definition of Ready (DoR) naturally follows from my initial investigation about library version compatibility and my POC.

In parallel, my project’s Definition of Done (DoD) follows from the feature requirements I identified from my design phase.

Deliver a Minimum Viable Product, or better yet, a Minimum Lovable Product

Promotion UI

When I was in the design phase gathering requirements, I knew that there were a lot of stretch goals to my project — perhaps even more than I could ever accomplish.

So it was important for me to implement the very basic set of required features, deliver a Minimum Viable Product (MVP), and gather feedback to iterate on it.

Better yet, I’d like to deliver a Minimum Lovable Product (MLP) on my first iteration. The minute difference is that whereas an MVP requires nothing more than functional features, an MLP has a lovable user experience by design.

For instance, to implement pawn promotion moves, for an MVP I could ask users to press different keys to select the piece type they want to promote to (like B for bishop and K for knight).

For an MLP, I would implement a UI with piece-type-shaped buttons that change colors when hovered or selected.

Be Your Own Project Manager

If you find keeping track of the list of features (plus the ever-growing list of bugs and fixes) overwhelming, you are not alone. It’s time to be your own project manager.

I found Trello to be an amazing tool both for single-person projects and large-team projects.

This is how I usually organize my Trello board for a coding project:

The Trello Board for My Chess Engine Project

Have four lists: Backlog (for features to be triaged), TODO, Doing, and Done.

Have color-coded labels:

• Ready for QA: A red label to get the attention of my teammates

• Impact: low (yellow) vs. high (orange), determined by the amount of impact a feature or a bug fix will generate. For example, a slightly misaligned UI panel is of low impact where a deterministically crashing bug is of high impact.

• An estimate of the time it will take to implement: trivial (< 1 hour, teal), medium (1–2 hours, light blue), and difficult (2–4 hours, dark blue).
  My other rule of thumb is, if I estimate that a card will take more than 4 hours to implement, I should probably break it down into several finer-grained cards.

• Color serves as a great visual cue: I always tackle cards with orange and teal tags (high impact and low time commitment) before tackling those with yellow and difficult tags (low impact but high time commitment).

Write Documentation and Reflect on Your Learning

Having pushed every single Trello card from TODO to Doing to Done and fixed every nasty bug, is it finally time to call a project done? Yes and no.

To maximize my learning from a project, I find it immensely worthwhile to reflect on my takeaways, technical or soft skills:

1. Write a clear, concise README in the GitHub project repository. This helps other developers understand and become interested in the project.

2. Write a blog post (like the one I’m writing now) about the higher-level aspects, for example, architecture overview, feature design, challenges and solutions, and so on.

My README Section about Integrating My Chess Engine into Other Game Projects

My README Section Comparing the Two Versions of My Chess Engine

Credits & Links

Many thanks to Tim Min for prompting me to work on this project, for his contributions (new feature ideas + QA) on the Trello board, and for holding me accountable. Tim is the writer of the kinetic novel game, The Wind at Dawn.

• My chess engine GitHub repository

• The public Trello board for this chess engine project

• Ren’Py: a Visual Novel Game Development Engine

• python-chess: a pure Python chess library

Let's stay in touch! Connect with me on LinkedIn, GitHub, Medium, or check out my personal website.