Animating Chapter and Scene Transitions

Visual novels are equal parts “visual” and “novel”, but what really helps tie them together is mixing the visuals with the story to better illustrate what’s going on in the words- to put it more precisely, adding animation to scenes! While I won’t be adding any intensive animation like body parts moving, there’s plenty of other things to animate. So let’s take a look at some of the animations in Crimson Waves on the Emerald Sea!

Chapter Transitions

I wrote Crimson Waves on the Emerald Sea from the mindset that I was writing a manga- that is to say, I wrote it with the intention of each scene being set up in a dynamic way with characters moving around. CWES doesn’t have any choices. I wanted this experience to be more akin to reading something rather than making the optimal choices.

CWES is also different from past works in that it has dual protagonists, Cecil and Nemo. Each chapter signifies a swapping of perspective- sometimes this also means a passage of time, like a few hours, and sometimes it’s immediate. To illustrate this swap to players as well as give a bit of a breather, I created a transition screen for each chapter.

The transition is pretty simple but elegant, as you can see! The decoration image has a custom transition attached to make it dissolve that way (ImageDissolve). Both of the text lines change dynamically depending on the chapter.

At first the text was just dissolving in, but it looks much better dropping in softly, don’t you think?

I’ve considered making the decoration change color depending on who’s point of view you’re changing to, but that’s for later.

Scene Animations

There’s a lot of other animations in CWES, so I’ll quickly go over some of them! The first we’ll look at is establishing shots for scene transitions.

For most of the new backgrounds/locations, there will be an establishing shot of sorts like above. These panning shots are to mimic the character looking around the place for the first time.

In the above video, the two have set out on foot in the countryside. With mountains and farmland as far as the eye can see, a panning shot from top to bottom looks the best. The full panning shot is a little longer in the game.

Another type of animation is character movement. While the images themselves are 2D and don’t have individual parts animated (like blinking or lip flaps), they do move around the screen!

To show this off, let’s look at Cecil from the scene above but a little later on.

There’s several different ways for the characters to move around the screen, with these simple shakes being one of the smaller ways. Cecil is one of the more animated characters since he’s younger.

Even just a little character movement really goes a long way!

Another character movement we’ll look at is Lucie moving towards Nemo. In this scene, her and Cecil are standing a few feet away from Nemo while Ambrose is standing right beside him. To make it look more dynamic, I made it look like Lucie was weaving around Cecil and Ambrose.

It looks a lot more interesting seeing her move left and right instead of just forward, doesn’t it? To give a further illustration, here’s the code for this movement in Ren’Py:

    show lucie:
        ease 1.0 zoom 1.1 xalign 0.8
    show ambrose:
        linear 0.5
        ease 0.7 xalign 3.0
    pause(0.8)
    show cecil behind lucie
    show lucie:
        ease 1.0 zoom 1.2 xalign -0.25
    pause(0.8)
    show ambrose behind lucie
    pause(0.1)

It might seem like a lot’s going on, but it’s pretty simple when you get down to it! First, Lucie eases forward and slightly to the right for 1 second. After half a second, Ambrose begins to move to the right for 0.7 seconds. After 0.8 seconds (so when Lucie is almost done with her first movement and Ambrose is halfway through moving), Cecil moves behind Lucie- this is an immediate motion. Then, Lucie moves forward again and left for 1 second. After 0.8 seconds, Ambrose moves behind Lucie, when her movement is almost done.

To wrap it all up, let’s take a look at all of this together- scene transition, characters moving, and the chapter transition.

There’s even more animation in this scene going on that I can’t show for spoilers. I hope you look forward to seeing it yourself in the full game!

— Arimia

Leave a Reply

Your email address will not be published. Required fields are marked *