Behind the Scenes #6: Beginning to End (Patreon)

In this month's installment of my Behind the Scenes series, I'm covering the creation of a scene from beginning to end, starting from the initial idea all the way up through the finished, playable version. My primary focus will be on the writing but I'll also touch on planning and executing art plus coding the scene. I'll also zoom in close on the flowcharts I often share in the bimonthly game status updates so you can see exactly what I write as I plan.

If you're new to the series, these posts are my way of sharing my process for creating a visual novel. They're very lengthy and in-depth, but if you're getting started with your own VN or are just interested in how the game gets made, this series is for you. You can see the first five posts in the Behind the Scenes collection.

This post is unusual in that I'll be talking about scenes that no one has played as of this writing—meaning you might consider all of this a major spoiler. In particular, I'll be focusing on the morning after at Matt's place and the frat house, sequences which will both be featured in the upcoming dev build for Seniors and Graduates. If you'd rather wait to play either the dev build or final release before reading this post, I encourage you to click away. If you otherwise don't care about spoilers, consider this an early sneak peek!

From Idea to Flowchart

I previously talked about brainstorming the game's plot and characters in Behind the Scenes #3: The Big Picture, which covers the beginning of the writing process from initial idea through forming the broad road map for the story. 

The road map is basically a collection of loosely sketched out ideas, and in order to turn those ideas into a game, I need to focus in on each character's storyline, consider how the scene concepts will play out, and then actually outline what'll go down.

When it came time to plan the Morning After Update, I sat down and organized all my thoughts using Arcweave, an online program for game developers. (It has a lot of features, but I mostly just use it to make colorful flowcharts.) First, let's look at the early portion of the frat house section of the game; bigger versions of all images can be seen in the gallery:

There's a fair amount going on here, so let's take it node by node. Each node is organized by what a block of code will be.

Rise and Shine: This is the start of this sequence, picking up after you wake up in Owen's bed. What I wrote in the node is a brief summary of what I want to cover in this particular story beat. It and the following node could have been one summary except that as I wrote this, I also considered what new art will be associated with each of the segments. For this first node, I need a background (BG) of Owen's bedroom in the morning...

Speaking of Owen: ...and in the second node, the dialogue will be over a CG of Owen. I use a specific naming convention for all my assets, which you can read about in Behind the Scenes #4. "W1" stands for "Week 1," and this particular picture is what I consider a "tease"—a sexy image of a character that isn't part of a full hookup. (If you've seen Sneak Peek #28, you'll notice that the description in the node doesn't match the CG I made. These charts aren't set in stone and details often change as I write or create the art.)

So about last night...: This new node is signifying that we've transitioned away from the CG back to sprites, and also that I'll need to end the block with a menu that lets you choose your path forward.

Gotta Go!: This is the start of one branching path—what happens if Connor wants to get out of there as fast as possible! What's written in the node itself is the primary content of the story beat. Below is basically a "note to self" reminding me of various interactions from previous choices that need to be addressed.

Can we talk?: This is the other path, which turns into a longer scene between Connor and Owen. This section will end with another menu. It also has a CG. "Hangout" CGs are associated with parts of the story where Connor is having a conversation, on a date, or otherwise hanging out with someone. These are not explicitly sexual CGs, generally.

Evan?: Lastly, let's zoom back to that little node sitting all by itself. This is because the idea to let you stay with Evan at the end of the party came much later. In this case, I didn't do extensive outlining, just took basic notes and then wrote the scene. And for the record, the Evan CG for this one is definitely one to look forward to 🤤🍑

And the flowchart continues, branching ever further as you choose how your Connor reacts to the events of the night before. You can really see why flowcharts become necessary the further things branch—trying to write this without a plan first would lead to a mess. Especially since these events are happening at the same time in the timeline of the game—when you leave Owen's room later, you will not encounter Julian in the same place as if you left Owen's room immediately.

You can also see that up 'til now all the nodes and notes have been yellow, which is Owen's color and what I associate with the frat house generally. When something specific to another character comes up, I often use a color associated with them, like green for Julian and fuchsia for Evan. All of this is to help me see at a glance what characters I have art planned for.

This chart continues on until it links up to a different chart as Connor moves through the story, these linked nodes ultimately creating a map through the maze of the narrative.

From Flowchart to Script

Let's switch to an alternate place to wake up in the morning—Matt's apartment. This section was the first I planned for this part of the game, so the flowchart is less organized than the frat party. It was written by story beat rather than designed to make coding easier. I transitioned to the latter as I learned how better to plan for a visual novel rather than a typical novel.

There are four ways to begin the Matt's apartment morning after sequence. If you hooked up with Leo, you can either wake up in Leo's room or Matt's room. You can also have passed out drunk in Matt's room, or newly added, chose to sleep over after Matt passed out rather than walk back to the dorms.

Let's zoom in specifically at the two alternates for what happens if you hooked up with Leo:

These  concurrent nodes are more or less the same, but later in the creation process they actually diverged quite a bit. For instance, if you slept in Matt's bed, you wake up with Matt looking at you confused. The CG with Connor running into him in the hallway only happens if you wake in Leo's room.

That's because the charts are here to organize the storylines in a coherent format, but I don't necessarily adhere to them exactly. For some scenes, like this one, I use them as a starting point and then move details like Connor deciding his feelings on Leo later in the sequence, where it ultimately made more sense pacing-wise.

Here's where we get into actually writing the scenes. A visual novel is basically all dialogue and inner monologue, so when I sit down to write, I'm prepared to have a conversation with myself while I play act as both characters. 

This is a skill that doesn't necessarily come easily to everyone but I think can be learned. I've been writing so long that it's second nature to be able to swap back and forth between character mindsets, but something that helps facilitate that is what I wrote about in Behind the Scenes #3. At that stage of the process, I defined not just the demeanor of each character but their speaking styles and quirks. I also have reference points to different character archetypes, letting me consider similar characters I've read about or watched while I consumed other media.

Matt is particularly easy to write because of the conceit given at the very start of the game—he and Connor are "mind twins." They grew up together and influenced each other's opinions, feelings, and speech. They both get a little shy when revealing sexual things before their horniness erases the bashfulness. They both make stupid puns, they both good-naturedly call each other out for it, and they both drop "dude" a lot when talking to each other.

Where they diverge is Matt had a different high school experience, basically being someone in Connor's shadow who wanted attention but didn't really get it. Now he's a year removed from high school and has become someone more confident in his appearance and sexual prowess, plus between acting and the fawning of other guys, he's getting the validation he craved for so long. In fact, he's become a bit of a validation addict.

Then Connor reenters his life and long-repressed feelings have come back. Matt at times finds himself falling back into their high school dynamic while also starting to show Connor who he's become.

This is a lot to keep in mind and might seem counter to my saying Matt is easy to write. But once I have the basics and have written the initial scenes with each character, their thought process starts to become second nature. Again, I know this isn't a skill everyone has, but it doesn't mean it isn't one you can develop. A good way to practice, actually, is real life improv by way of one of my favorite hobbies—D&D and other tabletop role playing games. Just the act of creating a character and then inhabiting them as you interact with others doing the same can help you learn how to inhabit the mind of someone else.

Anyway, let's turn back to the script. We've established I have a good sense of self for both Connor and Matt, and since I've already spent awhile considering what this scene will be, I'm able to just sit down and banter with myself while keeping in mind what needs to happen to propel the plot forward. In my Word document, it looks like this:

(A few things later changed, like fixing the "some in a spacesuit" typo and swapping "herbaceous" in for "floral" when talking about Leo's shampoo.)

Much how I broke down the frat party morning by code blocks, I have to keep that in mind as I write... but only to an extent.

Primarily, each new line of monologue will be a new screen as you click through. This means I have to consider both the pacing of your clicks as well as the length of each line, since there's only so much space at the bottom of the screen.

But thinking too hard about code can inhibit the flow of my conversation with myself, so I actually mostly ignore coding, using shorthand for each time I need to add something like a menu or an alternate version of dialogue.

So in this first part you'll see #came face, #came chest, #else, which is signifying to me that when I actually code the game, these will be alternates based on what you chose during the Leo hookup. Each note is preceded by #, which in the program I use to code highlights the line in green, making it easier for me to spot where I need to do these if/elif/else sections.

I also play fast and loose with the art here. For instance, the first few lines involve a CG of Connor's eyes barely open, then fully open and blurry, and then a full clear image of one of Leo's spacesuits. After that it fades into the normal sprite format. None of these images are placed here in the script even though I decided on them as I wrote. Their placement is just kept in the back of my mind for later.

Now, I only do this because I'm the one who'll be coding my own writing. If I had someone else coding for me, I'd be a lot more specific about what should be shown where. I still wouldn't do the initial drafting with too much code in mind, to avoid distracting myself from the scene itself, but I would insert it as I read back over.

Menus with differing dialogue can be a little tricky, but I basically just write down the different options (Elated, Confused, Disappointed) and then take it one section at a time, trying to inhabit the different mindsets Connor can have. If I again feel it'll ruin my flow, I'll often just write one of the options and type something like #PLACEHOLDER for the others, then write them later on.

Let's see a little bit if dialogue:

Based on the flowchart, you can probably spot where the CG that's noted there will be inserted. What you can also see is another case of alternate dialogue, the "sexual tension" flag having been set if you propositioned and/or nudged Matt's knee the day before. 

The letters before each line, "c" and "mt," stand for Connor and Matt respectively. It's already been defined within the code that when the game sees these letters before dialogue, that dialogue should be attributed to that character. Each time you change an expression, you can also type the image name after the name code to tell the game to swap sprites.

...Which is of course missing in the script. It's another instance of this only working because I do my own coding. As I write, I have a general idea of what each character will express with each click, but I only fully decide on it when I'm coding.

From Script to Code

I've written enough by now that I'm typically pretty confident in my first drafts, but that doesn't mean what I wrote doesn't need edited and revised. I save time by doing the coding and editing simultaneously.

Basically, as I adapt this from a script to something readable by the game, I take the time to fully re-read what I wrote and make changes on the fly. It's in this re-reading that I also decide exactly what each person will express now that I'm in an observant editor mode rather than writer mode.

Here's some of the script from above adapted into code:

I use a program called Visual Studio Code (VSCode) to code the game, which has a handy extension that does what's called syntax highlighting, color-coding everything so I can tell what's dialogue, what's a variable, etc. If you want to read more details on the very dry coding process, check out Behind the Scenes #4.

What you can see here is some much-needed organization with the insertion of the actual variable (choice flag) for the sexual tension alternate dialogue, as well as see what I mean by comments that are preceded by a hashtag turning green.

You can also see where I slipped in the CG, first by hiding the Connor expression and then inserting the CG (scene) with an hpunch (screen shake). (One of the inspirations for the presentation of this VN is the Ace Attorney games, so whenever I shake the screen I imagine a whiplash sound!)

All of the Connor expression changes were decided as I re-read what I wrote. Connor's sprite is actually a screen overlay; the more typical way to show a sprite in a Ren'Py game is like this:

The combo of Matt's name code plus the image name automatically changes the on-screen sprite when this dialogue is shown. This is also an instance where the on-the-fly expression decisions came in. This could have been Matt's curious expression, but I decided it made more sense for Matt's face to be unreadable. It adds some tension because Connor still has no idea if his longtime friend is mad at him.

Another purpose of deciding expressions this way is it determines specifically what assets I need so I can create just those images. I'll generally start with a single image, like Matt's standard expression, and then each time I introduce a new sprite I'll note it like this in the file that defines images:

I can then check this file when it comes time to make the sprites to see what I need. In the meantime, when I play through the game I'll see the standard expression as a placeholder.

Inserting the Art

So now's a good time to talk about when the art comes into the picture. It's not listed at a specific point above because art is often made entirely out of order depending on time availability or even just when inspiration hits.

Backgrounds usually get created early on once I know where scenes will take place, especially if I basically already have it set up and just need a lighting change. For this section, I just took Leo's bedroom background and swapped the nighttime lighting for a sunrise:

Sprites, as we've established, often start as one or two expressions that I'm pretty confident I'll need, like Matt's standard/default sprite. Then whenever I had the time after coding his scenes, I got the remainder made:

I save everyone's expressions as presets so I can easily and quickly put the character in the right pose. Once those needed expressions are created, I queue up a bunch of renders. Each sprite takes between 5 - 10 minutes to render on my current rig.

CGs in particular come at different times, mostly when I get specific inspiration for what I want a CG to be. This could be at the flowchart stage, for example, which was the case with this CG for the "run into Matt" part that was outlined:

Since this CG came before anything was scripted, it actually changed the flow of the scene when it was written. Connor and Matt were always going to run into each other, but I didn't actually plan for Connor to be in just underwear with a very visible hardon. 

With the art ending up that way, I added the details about needing to pee really bad and not being able to get his pants on. I also removed Connor hearing Matt leave the bathroom before he exits Leo's room. That change rippled throughout, adding a "gotta pee!" moment to each variation of the scene, giving Connor a moment to escape Matt and try to collect himself.

Scene Variations

Something I didn't mention above is how I layer the writing of each variant scene. Essentially, I start by picking a "perfect" path for each storyline and write the continuation of that first. So for this scene, I focused on hitting all of Matt's scenes with max lust & romance: Going to his apartment at the start of the game, inviting him to orientation, hanging out in the afternoon after Will's class, propositioning him, hanging out that night, nudging Matt's knee to indicate he's into him, and then hooking up with Leo.

I will often begin a writing session by playing through a sequence like this to determine the right "feel" for what Connor and Matt might think and say. But of course this sequence can play out many different ways.

There are some scenes that are basically the same coding-wise, but differ in dialogue & internal monologue. So once I have written what could be considered the ideal scenario, I'll go through an alternate path and begin writing new lines for the existing scene, then adjust the code accordingly.

A good example of this is the version of the morning with no Leo hookup. I followed the same path above, but this time had Connor go to bed sober, then wrote through everything that happens from there. I then used the exact same framework for Connor having passed out drunk, since both sequences start in the same place and go through the same plot beats, except Connor is now very hungover. I write the alternate versions and then pop it in where it's needed. In addition to obvious stuff like being hungover, I also write alternate scenes for cases where you focused on Leo instead of Matt or focused on both of them. 

Keeping in mind all of the different threads is very, very tricky, even with lots of pre-planning. Doing the various playthroughs plus adapting already realized scenes to accommodate a different perspective helps me keep things coherent not just for you as a player, but me as a writer.

Pulling it All Together

This has been a long journey, but at long last all the pieces are in place and we have a playable sequence. This is both the best part and the worst—worst in that it's testing and I'll find stuff I mucked up, but it's also really cool to see it the scene finally be real.

Let's see how it looks!

That's what I've got for you today! This is a long one, but there's always a ton more that could be elaborated on. That's what future Behind the Scenes posts are for 🙂

The dev build containing these fully realized sequences will be available as a sneak peek for Seniors & Graduates soon—I'll make an announcement as soon as it's ready to play!