Tag Archives: tutorial

How to Make a Visual Novel in Unreal Engine 4

Posted on by

A little over a year ago, I set out to complete a strange task: I wanted to build a visual novel in Unreal Engine 4. To some people this seemed like using a rifle to shoot a fly. I was even prepared to admit they were right. But once I got deeper into the UE4 engine, I didn’t regret a single thing.

Why UE4?

The short answer to why I love using Unreal Engine 4 is this: the engine can accomplish just about anything I imagine, and it can do so quickly. It’s a wonderful engine to work with and it’s capable of so much.

That said, Ren’Py is still a wonderful tool to create traditional visual novels. If you don’t plan on adding 3D elements or complex mini-games to your narrative, then there’s probably no reason for you to switch to UE4. BUT if you want to expand the boundaries of a traditional visual novel and set yourself apart from the other VNs out there, I can assure you that UE4 might be a great tool to accomplish that.

Screenshot from our UE4 visual novel, Echoes of the Fey: The Last Sacrament

How to Get Started?

When I started my first VN project in UE4, I struggled to find helpful resources. Not many people had tried to create a traditional VN system within UE4. I found a VN marketplace plugin, but it only functioned for very small-scale projects, and was completely unwieldy in terms of handling a large script or rewrites. So after a lot of searching and banging my head against the computer screen, I set about building my own system from scratch.

Now, one game and many months later, I want to share what I’ve learned with the game dev community at large. I’ve started a video tutorial series that will help you build the foundation of a VN system within UE4. This system is designed to handle large-scale projects and gameplay elements beyond just dialogue. You can begin by writing your script in a typical Open Office or Word document, then convert it into a spreadsheet and import it into UE4.

Watch the Video Tutorials Online

Part 1: https://youtu.be/qj_6dfzqaO0

  1. Create your text scene in a spreadsheet (4:05 )
  2. Create a structure in UE4 (8:45 )
  3. Import your first scene as a datatable (13:02 )

Part 2: https://youtu.be/KuHardkG37M

  1. Create a Scene Template Blueprint (1:09)
  2. Create an NPC character actor to launch the scene (2:56)
  3. Enabe click events (6:30)
  4. Spawn Scene Template when NPC is clicked (9:15)
  5. Feed the datatable rows into the Scene Template (13:57)

Part 3: https://youtu.be/ljaf1PHGq1Y

  1. Track the scene array with a Row variable (1:36)
  2. Create a widget to display the dialogue (4:08)
  3. Set text variables within the widget (9:18)
  4. Create widget from Scene Template and track as variable (11:14)
  5. Set widget variables from the Scene Template Blueprint (13:18)

Part 4: https://youtu.be/w7LxY8fZzdc

  1. Add dialogue widget to viewport (0:44)
  2. Track whether the row is finished displaying (2:11)
  3. Add an input to advance the text (4:26)
  4. Increase row number for next line (5:23)
  5. Enable input on the Scene Template (7:00)
  6. End scene and destroy actors when scene is finished (7:58)

In the tutorial series created so far, I don’t yet get to branching dialogue or character sprites. But if people find this first series useful, I may go on to create tutorials about that later. You can also find my posts about the VN system on the UE4 Forums.

Meanwhile, we’re running a Kickstarter for our current visual novel project, Echoes of the Fey – Fantasy Visual Novel Series! If you enjoy my work or find my resources helpful, please support us!

post

How to set up a panning system (like Danganronpa) in Ren’py

Posted on by

For my next release, Serafina’s Crown, I want to use the programming knowledge I’ve accumulated from my first two games to add a lot of fun and new features to the experience. One really big thing I wanted to add was a scene in a large room that pans from one character to another, sort of like the game Danganronpa. But if you’ve ever used Ren’py, you know that setting this up isn’t easy.

Picture something like what’s in my picture above, but zoomed in so only one character shows on the screen at a time. Sounds simple, right? But this is actually difficult to achieve in Ren’py if you want to keep your characters dynamic (changing expressions or moving if needed).

I went to the Ren’py forums for help, and they suggested I try using the layer systems. It required a lot of tweaking, but I finally got it to work. So I thought I would share my system here in case anyone else finds it useful.

For reference, my background is a 5000 pixel-wide layer. My characters are sized 800 x 1200 pixels. The screen size of my game is 1280 x 720.

First, I defined my own layer called pan in the options script:

Code:

init -1 python hide:

config.layers = [ ‘master’, ‘pan’, ‘transient’, ‘screens’, ‘overlay’ ]

Then I defined camera angles and character placements using transforms in my own init code. This part required a whole lot of trial and error. The “a_characters” position the overall layer, or camera angle; the “p_characters” place the character on a certain point. For some reason, the xpos needed to be very different for each, even though you’d think they’d be the same. But these are the coordinates that worked for me:

Code:

init python:

def cameraMove(x):

global currentX
currentX = x
return currentX

transform a_center:

xpos currentX
linear 0.4 xpos -1700 yalign 0.0
cameraMove(0)

transform a_Arken:

xpos currentX
linear 0.4 xpos 0 yalign 0.0
cameraMove(0)

transform p_Arken:

xpos 50 yalign 0.0

transform a_Serafina:

xpos currentX
linear 0.4 xpos -1250 yalign 0.0
cameraMove(-1250)

transform p_Serafina:

xpos 1400 yalign 0.0

transform a_Reuben:

xpos currentX
linear 0.4 xpos -2000 yalign 0.0
cameraMove(-2000)

transform p_Reuben:

xpos 2200 yalign 0.0

transform a_Kendal:

xpos currentX
linear 0.4 xpos 1700 yalign 0.0
cameraMove(1700)

transform p_Kendal:

xpos -1450 yalign 0.0

I created the function cameraMove(x) so that I would have a global variable keeping track of the camera’s location. Otherwise, when the camera panned from one direction to another, it would always start at the center and *then* pan to a character (very headache-inducing). This way it’s a lot smoother each time.

And finally, here’s the code I use for the scene itself:

Code:

label Duma:

$ currentX = -1700

with None
show Arken onlayer pan zorder 1 at p_Arken
show Serafina at p_Serafina onlayer pan
show Reuben at p_Reuben onlayer pan
show Kendal at p_Kendal onlayer pan
show Duma onlayer pan zorder 0 at a_center behind Arken, Serafina, Reuben, Kendal
with dissolvea “Praise be upon the gods; praise be upon Darzia. I call to form a special session of the Royal Duma of Queen Belatrix Grandil… who can no longer preside, may she rest in peace.”
a “Members of the Petit Duma, please announce your presence.”show layer pan at a_Serafina
s “Serafina, of House Elborn.”

show layer pan at a_Reuben
r “Reuben, of House Jeridar.”

show layer pan at a_Kendal
k2 “Kendal, of House Terrace.”

show layer pan at a_Arken
show Arken 2 onlayer pan at p_Arken
a “May it be heard …”

And there you have it. The camera pans around the room from one character to the next.

I noticed that while using the layer system, you need to mention the layer and sprite placement every time (hence I couldn’t just say “show Arken 2” when he changed expressions; I needed to say “show Arken 2 onlayer pan at p_Arken.” But if it works, it works. So I’m just excited I’ll be able to pull this off!

post

Animating Speech

Posted on by
*This post is from my Tumblr a  while back, but I thought it might be useful to re-post it here!*

After creating my Serafina’s Saga animation (20 friggin minutes of animated frames), I thought I’d share some of my knowledge thus far, particularly tips and shortcuts that work for me. The images I’ll use are from this scene of the animation; watch it to see my personal speech-animation style in action.

Any aspiring animator has probably seen a diagram of mouth shapes corresponding to every consonant and vowel. I found Preston Blair’s diagrams most useful when I started out. But personally, I wanted my mouth movements to be slightly more realistic than Blair’s, which are very exaggerated. At the same time, I didn’t want to go to the anime extreme of just making a mouth flap up and down with very little emphasis.

I don’t claim to be a top expert, but I suspect that what I’ve learned so far would be useful to other people starting out, or other animators searching for a medium between Looney Tunes and Japanese anime styles. Therefore, I have gradually developed my own speech diagram and I hope you will find it useful (please forgive the fact that my current examples are drawn at a slight angle).

CONSONANTS

The good news is that for most consonants, you can get away with using a single drawing: the gritted teeth.

image

(K, G, H, S, Z, CH, J…)

This mouth position is my favorite because it can be the most expressive. You can turn the gritted teeth into a grin, a snarl, or a frown while the character is talking. For a sinister character, you can emphasize the jut of the canines over the bottom teeth. You can also leave the mouth in this position in between words, giving it additional exposure.

Due to the fact you will probably use this mouth position frequently and it has the potential to convey so much emotion, I suggest you put a lot of thought into how you draw hard consonants so you can use the position to its full potential.

image

Once you have finished developing your hard consonant mouth position, make an altered version with slightly drooped lips for what I call the soft consonant. You will probably use this for a lot of the same letters, but in the context of different words. For instance, consider how the shape of your mouth making the K sound changes between saying “I kicked” vs “walker” (okay random examples but hopefully you get the idea). When saying “I kicked,” the vowels around the K make it a hard consonant. When saying “walker,” the mouth will be in a lower, softer shape, forming the soft consonant.

image

Honestly, I use this position mostly for the letter L and hardly ever use it otherwise. The key is to show the top teeth and a little bit of tongue behind them. I don’t particularly like drawing it and I find that whenever I use it—for whatever reason—it looks like the character’s making the L sound, even if I’m using it for D or TH.  Of all the possibilities other than L for this position, I find that the hard or soft consonant drawings work better.

image

Without a doubt, this is my least favorite mouth position to draw. It necessitates those awkward creases in the lip and it makes the character look like a chipmunk. But let’s face it, sometimes they need to make the F or V sound. In which case, just go ahead and draw the damn mouth position.

image

This one is pretty straightforward, fortunately. The B,P, or Ms are basically just closed mouths. However, you might want to pinch the edges and narrow the lips from the neutral position (like they’re pursing or puckering) to give the sounds emphasis.

THE “OOH” (OR KISS-KISSY) POSITION

image

I’m putting this mouth position into its own category because it can be used for W, R, or OO sounds. Personally, I find it very hard to draw, but I always end up using it far more frequently than I expect. The key to drawing it is to form an “O” shape in the middle of the mouth, but make it small enough so the character isn’t making an OH sound. If you still have trouble, just imagine that your character is about to give someone a kiss.

Kind of like the hard and soft consonants, I usually make two versions of this position, one more exaggerated than the other or even showing teeth. Alternate between the two depending on the word, or use the less extreme positions as transitions. A mouth moving from EE to OO can be far too extreme otherwise.

VOWELS

image

Take your hard consonant mouth position, pry the mouth open, and you’ve got your basic EE or I sound. But before you claim victory, make sure to turn the mouth up at the edges, almost as if your character is smiling. This will distinguish it from the next position.

image

When making the A or EH sound, the mouth pinches slightly at the edges, giving it a reverse slope of the EE position.  Occasionally, you might need to make more versions that are even wider or narrower. If you need to make this position more extreme, don’t show the bottom teeth, and maybe show a little bit of tongue in the back of mouth. In which case you’re shifting it towards the next mouth position…

image

This position is another awkward one to draw, because either you show the tongue way in the back of the mouth, or you hide it and thus make the whole mouth look like a drooping black hole. I leave that to your discretion. But make sure you give that arching shape to the top and lower lip, implying the AH or UH sounds. Pretend your character is opening his or her mouth for a doctor’s thermometer.

image

And at long last, here is the OH position, which basically forms a wide oval. Similar to AH position, you might want to show a tongue in this drawing so it’s not a huge black hole, but I usually choose not to, because the big black hole is partially what distinguishes the OH sound.

***

And that pretty much wraps it up! But first, a few more tips:

  • One of my most frequent mistakes starting out was to close the mouth whenever the character paused between words. I soon realized this wasn’t very natural, especially when I put it VA recordings over it. People usually breathe or leave their mouths slightly open between words. When in doubt, use the hard or soft consonant positions to fill pauses!
  • Don’t draw every single letter in a word; it simply isn’t necessary, and will probably make the character look ridiculous. Watch yourself in a mirror saying the words and figure out which sounds your mouth emphasizes. Then pick which mouth positions to draw and utilize.
  • On the other hand, sometimes you will need to use two mouth positions for one sound. For instance, I provided one mouth position for “OH,” but if I actually animated the word “OH,” the OH mouth position would be followed by the OO position. Usually you just have to feel this out as you go.
  • Although I’ve provided most of the mouth positions I use here, sometimes I need to draw a lot of in-betweens. Stay flexible and be willing to draw more in-between positions if these just aren’t cutting it.
  • On a more technical note, I suggest animating the frames in Photoshop’s timeline and then bringing them into After Effects for timing. Right click on your movie and choose “Enable Time Remapping” to start matching the mouth movements to your sound clip. Once you do that, you might need to go back into Photoshop for tweaking, but it will save you the hassle of trying to figure out all the timing on your own.

All right, that’s all I’ve got for now! I hope you find this helpful!