LEVEL UP Your Visual Novel Sprites!

one of the most disappointing things I can see as an artist is a Sprite sitting there through the whole story and they'll try to Spruce it up with different Expressions maybe a CG but it feels like such a lost opportunity we have the context of a thousand years of theater and over a hundred years of films comics and animation to draw from in terms of how we can move actors or characters throughout a scene but still I don't think a lot of visual novels really take advantage of that in the way they should so let me share a few techniques you can use with just simple non-animated Sprites that can not only keep your visual novels more engaging but also help show the story to your reader so first let's start with some basics of theater staging ancient Greek Theater started with just one actor at a time but eventually you had up to three actors on stage at any given time and suddenly stagecraft was important to help communicate to the audience where their attention should be drawn and the easiest way to do that was with depth by being at the front of the stage they become a visual focal point it had the most attention from the crowd but over the centuries they set it up drawing another meaning the closer to the audience the more the character was opening up to the audience so from a distance the character isn't revealing much about themselves and their context within the scene is a bit more important but the nearer to the front the more the characters separated from that context until they're very close to the audience see what a difference it makes when the character is close to the reader or far away with two or more characters on the screen though this depth can suggest different levels of interaction between the characters in a full shot the conversation can seem casual or inconsequential and a medium shot the standard one it's a more personal conversation but close up Suddenly this scene seems secretive or intimate now what if one character's opened up more to the audience than the other character in the scene well now you're dealing with another element proximity if you separate these characters apart there's an emotional distance there while the closer you put them the more they read is a cohesive whole a team so if you mix distance plus proximity we get a sense that we are getting into this character's head while they are emotionally distant from the second or if you go for a far shot with these characters vastly separated we are primarily focused on the gulf between them more than anything going on with them individually the height difference between characters can also be pretty important in these situations if the second person's eye line far away is higher than the first character it looks like they have more power than them well if the character's eye line in front is higher than the character behind it can look like they have more power in theater they'll also use stage sets to suggest the power height Dynamic but we're not even going into the background stuff right now because if we did this video would be way way longer and then finally we have Direction Let's Take These two far apart characters and have them facing together it looks like what they're interested in is the gulf between them facing apart from one another though and now they are not at all interested in each other but face them together and suddenly there focused on some outside force and doing it apart and these three elements alone can add a lot of interest to a scene when you mix them together in different amounts over the course of a scene maybe the characters start a part at first but over the scene come together as we get to know them better until finally at the end we can see they've become a team facing off against the world now these are all elements of theater staging but a static spray obviously can't do the one thing that theater is most famous for ACT but we can fake it now if you already have rigged animated Sprites great that's super useful but for most Sprites I don't think it's entirely necessary because there are a lot of little techniques you can use to give static Sprites a lot of life so let's go over three animation principles that are especially useful for Sprites easing overshooting and squash and stretch when you tell a character to move from here to here most programs will interpret that as a linear movement if you tell it to go a full screen length in a second it will be halfway across the screen in half a second but with easing we can change the speed of that movement over time if we ease we'll slowly start to move to the next position then hurry up and then when we almost get to the next position we'll slow down a little bit this makes motion a lot more organic and smooth looking we can also ease in where we start slow and finish Fast and ease out where we start fast and finish slow there are a lot of other ease movement types but these are the main ones that we'll be using especially with overshooting overshooting is when we actually want to go past our Target point a little bit before sliding back where we wanted to be this usually gives things a nice punch to movement and this is something we want to keep in mind for squash and stretch movement when you hear about squash and stretch you'll usually see it in context of a bouncing ball but what you're seeing is really an object that can't overshoot because it's hitting the floor so in reaction its body mass is squashing and stretching because the energy has nowhere else to go so let's combine these techniques together and really just think of ways that a character can enter a scene we could have them slide in linearly or have them suddenly ease out into the scene maybe we could have them run in excitedly with overshooting or have them run in and stop suddenly each of these movements has a very different feel to it but these are still all along the x-axis now let's think of some ways they can enter a scene with some rotation and verticality in the mix maybe they can jump into the scene or slide and rotate in head first maybe they snap in out of nowhere or stamp into place and that's just interesting ways to enter a scene there's a lot of other emotions you can imply just by moving them around like a little finger puppet happy with a good little jiggle proud with a scale up scared with a little bit of shaking surprised with a jump panicked with some flips and running side to side confused with a little tilt and defeated with a tilt in a fall now there's a lot of other Expressions you can probably make with your Sprite but the best way to figure them out is just to make a puppet draw the character on a piece of paper it doesn't have to look that great cut it out stick it on a pen or popsicle stick then read some lines from your visual novel and try to get your little popsicle stick puppet to act along with the lines you'd be surprised how much expression you can get from one of these little guys now let's focus on the camera itself is a useful way to get more out of your Sprites and look at some things we can learn from film what makes film different from theater is that in a theater performance you'll be watching from one static perspective for the entire show well with film you'll be watching from the perspective of the camera so let's look at what different things we can do when we factor in the camera framing because we control the camera we can decide how the actors will fit within the frame of that camera from shot to shot and in camera we can copy a lot of techniques of theater staging but there are a lot of interesting twists that don't necessarily translate from theater like tilting we can actually rotate the camera to give different perspective on the character we can also adjust the angle of sprite as looked at renpai unity in most game engines offer some 3D camera support so you can view the Sprite from a bird's eye view which can make the character look less powerful or a worm's eye view which can make them look bigger and stronger you can also combine these types of shots with a tilt to generate a better composition that fills the frame a bit better on a stage you only have so much space to move but in film you can have characters run across the screen in a single direction for as long as you need left to right movement is generally associated with forward progress while right to left movement is seen as going against the flow and you kind of feel like you're moving against obstacles if you've ever played any 2D Platformers you've probably noticed going left to right is sort of a default we can also adjust the negative space of a scene negative space is how we handle character positioning in relation to the environment if we put the characters in the middle of the screen the emphasis is on the characters but if we put more space in the direction they're facing or moving towards then you're emphasizing what the characters can see some sort of plan foreseeable events or things off screen that the characters are aware of but with more space behind the characters then the emphasis is on what the characters can't or won't see this sort of shot is used to give a sense of foreboding maybe we want to frame things other than a character's face by Framing other elements of a character sprite we can let them communicate with some non-verbal body language or make it harder to scrutinize a character's Intentions by focusing on a non-communicative pose I made a short visual novel that really explored the options I had available just with film Framing and you'd be surprised how much emotion you can get out of a faceless character this way lighting and lens adjustments theater lighting is a thing but because of the sheer diversity of capture methods using lenses I really want to emphasize how much game cameras manipulate lighting and images for instance blur can be a good way to suggest that a player's vision is being affected by blurring the contents of the screen but you could also blur certain objects more than others to suggest film Focus add that along with various lighting adjustments and that can give a very tight only different intention to that effect in renpai you can use tint color to apply a rose-colored overlay on the screen and we can adjust the brightness and contrast to make the camera lighter and brighter if we blur the foreground and background images more than the character in the mid ground now looks like you're falling in love with the character or we can turn up the brightness of the background cut the brightness of the character down to Black and blur him slightly and now you've just woken up and it's too bright to see everything clearly it would take me all day to go over the different combinations of effects and lighting available to you and I went over most of them in maren Pai action editor video but honestly just watch a lot of movies and try to imagine how to replicate interesting shots in engine it will come in handy camera Edge cameras come in different aspect ratios but filmmakers have been using a variety of custom frames to change the tone of the shot narrow the edges down for a more cinematic aspect ratio or use an iris to focus in on one character or object on screen an angled frame can give the scene more energy or you can make a character feel trapped with a tight frame or you can go French new wave and show multiple aspects of your same character sprite separated from one another more contemporary movies have been using a trick where they'll create a thinner aspect ratio but when they want something to pop it'll make it break through that frame and of course comic books are the Champs of this sort of stuff fit your characters inside a burst effect inside of a thought balloon or make your frames into a spotlight on your characters just tons of different ways you can frame your characters and finally Cuts Transitions and pacing the default transition from pose to pose and visual novels seems to be the fade in Fade Out which is fine but when we're manipulating our Sprite with code in all these different ways we have some really interesting possibilities for how we can transition from pose to pose that we'll want to consider instead like a simple cut this Associates a particular shot with a particular dialogue and gives us a lot of control about the context this dialogue can be seen in on the other hand a pan transition transitioning from one shot to the other over time can be used over multiple dialogue segments for one movement which can help give the sense that the Dynamics of the scene are changing over time test how the pacing of your visual novel changes with these different types of shots and again it's worth looking back at films to see how directors have used these techniques to effectively tell their stories the benefit to all these different techniques is that you can show instead of just tell your story for instance let's have a simple benign dialogue between two characters did you buy some shoes no I forgot that's fine we can go together later super simple straightforward but now let's retell that story with a few stylistic flourishes did you buy some shoes no I forgot that's fine we can go together later but now this simple narrative has a little bit more going for it in this first shot the character is close up left of frame facing to the right this character expects that the other character bought shoes and because the camera is so close up we can tell this is something meaningful and close to them when the camera pans out the first character is further away and their eye line is shorter than the second characters the second character is not only higher but they're only partially visible on screen we can barely see their face no I forgot doesn't just mean they forgot to buy some shoes they are completely dismissing the first character and forgetting to buy shoes is just an aspect of that dominance of that second character over the first finally the second character has left the screen entirely and the First characters cut down to a silhouette in a narrow framed Spotlight the line that's fine we can go together later is not important for that second character to hear This Is A Lie the First characters telling themselves trying to deny their Solitude this is all very different from that first version of events with these visual techniques it takes a lot of pressure off of you as a writer to explain or demonstrate a lot of these character Dynamics and gives you an opportunity to make your game more textually Rich because there's one more thing we can learn from the world of comics and manga and it's a culmination of all this stuff we have already learned here because text is also a character yeah it's weird that in visual novels we kind of ignore the visual Power of Words on the screen because unlike comics and manga that have to pack all these words on a single page we can Dole out this text as fast or as slow as we want over time and that's a lot of power so let's use some of these techniques we've been using for your Sprites and apply them to your text proximity text closer to a character's mouth is more intimate and truthful than text far away movement text that moves left to right and or downward feels more Progressive and natural than text that moves upward or from right to left depth text that's displayed smaller and closer together reads as a more cohesive block of text but it feels less intimate while larger text feels closer and more intimate when it can freely span across the entire screen negative space text in front of a character's field of view feels assuring and natural full text behind the character feels suspicious and a little dishonest pacing larger portions of text will slow the reader down and lets you vary the Rhythm in terms of how the reader digests passages of text while there is a lot of power in only using one word at a time and obviously there are tons of other examples for how text can be used in your visual novel that can also enrich your narrative now to easily get started on actually implementing these ideas in code my renpai action editor video is a great start to learn how to dynamically position elements in renpai but if you're just looking for more ideas on how to make your VN more exciting try this video right here

Channel: Visual Novel Design

Views: 48,248

Keywords: visual novel, game sprite, game camera, renpy camera, visual novel sprite, visual novel character

Id: dG2735WWytI

Length: 15min 31sec (931 seconds)

Published: Sun Nov 13 2022