Here we are with another update, this time to bid farewell to 2018. I can’t deny that it was a rough and bumpy year, following a health issue that forced us to slow down in the animation department + managing to combine our part-time jobs with the development of the game, but overall we were capable of push through and finish some significant milestones. The final boss has been a massive challenge in terms of scale, composition, and playability, but we worked against the clock since the last update to complete most of its animations, only with the character sequences remaining (basically end-game cutscenes). Multiple stage designs and a ton of environmental effects were done too, some of which are shared on this post.

On another note, there is an issue that we wanted to address regarding Kickstarter updates: since most of the mechanics, enemies, and levels are already designed and build, we’ll be having trouble showcasing additional content further on. For the remaining tasks, we’re gonna implement the new subjects and assemble the reverse map. Both elements take part in the “twist” of the game and could potentially ruin the experience of most backers if revealed, so it will be hard to post interesting stuff further on… Hopefully, we’ll manage.

Also, taking on the reverse map or Side B stages we can say that most of the graphics are made and now need to be attached to the original objects of all chapters inside the level editor (walls, vents, platforms, etc.) and that takes a LOT of time.

Our design is not exactly like the one from Castlevania: Symphony of the Night in which the levels are flipped upside down. On PLFC a specific event will trigger a change that affects the entire map, modifying most background sprites and adding new enemies, traps, and situations to all scenarios. It’s a challenging process that requires a ton of planning in order to preserve the core terrain structure while adding substantial gameplay changes. We just finished a chapter of the game that relies heavily on this technique, wanna see how it’s made?

Stage A and Stage B

There are multiple things that we have to take in consideration in order to develop a stage with two modes.

¨

At first hand, we have to define the structural design of the rooms, which should remain as similar as possible in both versions to facilitate the level composition in Unity (sometimes key elements are relocated, or certain parts that couldn’t be accessed appear unlocked, but the playable core is still very similar).

This kind of design is no easy task, considering that the position where we leave certain objects affects the way players can access the rest of the rooms. In some cases, enemies such as floor saws, machine guns, cameras, and even fans can hinder our progress if we do not take into account the disposition of the rooms and the location of their interactive objects.

¨

This is an example of a level with an interconnected structure, in which every room has A and B variants. In mode A the player will have to redirect the energy of certain sectors to unlock new areas and move forward, using a series of generators distributed through multiple stages.

¨

Once each puzzle is solved, and the energy has been returned to this floor, the level changes its design to B mode where new enemies and routines are loaded. The structure is practically identical, only the sprites that represent the current state of the rooms are replaced.

Same sprites with different color palettes

Speaking of graphics, in Paradise Lost we do not use real-time lighting, and all the scenarios that require two game modes have to be redrawn with a different color scheme. This may seem laborious, but it is not as hard as it looks. Most of the time the walls and other decoratives of the background are the only sprites that require a full-color overhaul. The rest of interactives and characters are affected by a LUT file (color grading) applied to the camera on each chapter. This parameter changes the general color information, unifying the tones of all the elements.

A sample of objects and characters that don’t require recoloring. LUT blending does the trick

This workflow is essential because it allows to color-blend the common interactives that are placed all around the game without needing to create new animation tables or different sprites for each mode. With a little knowledge of color grading, it is relatively easy to find the value of curves or adequate contrast, avoiding the use of lightning in real time with normal maps (our process is completely ad hoc, having its pros and cons).

Color change has a narrative purpose too, setting the mood of the events that occur during the adventure.

¨

Depending on the level, some sprites are created to redecorate an existing object: glass cracks, dirt, abandoned paraphernalia, etc.

Swap

¨

All the work needed to swap the sprites can be performed at a relatively fast pace thanks to a useful tool that we included in the level editor called “Replace instances”. This small but valuable piece of code helps us replace an existing prefab of the stage with another one from the project folder, maintaining the position of said object in the scene and its order in the layer (and thus preventing it from suddenly step above other sprites).

Puzzling

DNA recognition

¨

We’ve also completed a few parts that required the use of the host ability to unlock panels with the help of the G.E.R. scientists. In some cases, Subject W won’t be able to access certain interactives (a fingerprint is needed), so the Host skill needs to be used to control humans and unlock them. Only specific scientists can access a panel, and the color of the ID will determine if they have the necessary rank to use it (keep in mind that not all will let us see their card, and we’ll have to work our way around them to identify the correct ID without making a fuss).

¨

These characters give us access to new sections or activate key components. Most hand panels are associated with a central computer next to the thing that we want to unlock, in which the number of individual panels required is shown (in most situations several codes are needed to give us access). Hand panels are scattered through the map, forcing players to explore each point before being able to advance into the next section of the game.  

Pattern puzzles

¨

These mechanisms require a pattern of pulses that have to be followed in the correct order, determined by a random code generated on the central screen.

¨

The bar below the sequence will show us the time left to perform the necessary pulsations, having to use both Subject W and a decoy alternatively (the symbol to be executed in the pattern is shown next to each button).

¨

If we follow the pattern with no errors, a linked element will be unlocked in the same way as the aforementioned hand panels, giving us access to new areas. If we fail the puzzle resets with a new sequence.¨

It may seem simple, but when new elements are added to the mix such as placing different enemies in the room, altering the complexity of the pattern or simply increasing the distance between buttons, we manage to create interesting variations of a straightforward mechanic.

Boom, flash, drip

The animation of effects is one of the most challenging and experimental tasks that one could face. They don’t have joints, nor their movement is restricted by weight. The frame-to-frame poses can be more organic, allowing more freedom without sacrificing quality.  

Regardless of the technique used for each element, we can also alter the speed/framerate drastically to obtain realistic and smoother sequences. Let’s take a look at some of them.

Fired up

¨

Even if they look complicated, flames are one of the easiest effects to create, and all because they do not require a specific animation pattern (meaning that you do not have to follow with accuracy the previous frames of the timeline).

Slowing down this sample you can see that the freehand technique works perfectly on flames

You have to follow a series of basic rules to create fire:

• Always start from the bottom of the sprite (or surface which the flame will be attached to) and consume it / make it disappear upwards
• Apply a fast animation rate (10 or less fps) to disguise any possible imperfection between frames and also showcase more motion
• Add exterior and interior radiance to the shape to give it vividness

The filters bring the animation to life: orange outer glow and a white inner glow

Another tip: different flares can be grouped to make a wall of fire in any way you want.

Blast from the past  

Explosions are a step up from the previous effect. They require more precision than flames, although once the technique is put to practice they can be created with relative simplicity.

The principle is the same as that of the flare only this time with circles: the fireball ascends as the action progresses and it gets smaller until it disappears. The transition from yellow to orange creates the illusion of fire dying out (others use smoke and soot effects during the consumption of the blast, Metal Slug style).

¨

The first step is to define a palette that goes from whitish yellow to orange. This will set the color transition of the fireballs.

The main animation it’s as simple as draw a highlighted circle that contracts while going up. We stop applying white light at the middle of the sequence.

Now we can mix different sizes of fireballs, adjusting their position with each frame (It’s important to attach them to the central one). Giving body to the explosion is simple: draw an irregular cloud that follows the fireballs on the layer below (its color will start with the first frame in the lightest orange and end with the darkest one).

After this, we can add details like darker shadows on the lower part of the cloud. Debris and kinematic lines at the sides of the fireballs will improve the animation tremendously. It seems complicated but, with a little bit of expertise, you can even generate an explosion from a single cloud without drawing separate fireballs.

If the explosion starts fast and decelerates progressively the bursting effect will be more intense and realistic. You can also add an alpha degree to the latest frames of the animation to make the cloud disappear.

Electrified!

¨

This effect is very easy to perform: we can do it freehand style or follow a path around the shape.

¨

Basically, what you have to do is draw a line on a continuous zigzag pattern, leaving a wide margin between each frame (wider distance + lesser frames = more abrupt).

¨

The rays should be of a white-blueish color with a phosphorite glow around it. You can also add a flickering effect to the object (add a layer with the object’s form filled in blue with outer glow and duplicate the frame lowering the alpha level. This two frames will be copy+pasted through the rest of the animation).

Lightning bolt

¨

This electric columns not only add a touch of drama to the cutscenes but also affect the playable situations of the level in question, disorienting the player on key gameplay moments (sorry but not sorry :P)

A lightning effect can be developed in many different ways, although for us -given the scale and style of our sprites- this is the most effective method: we start by making a stroke with a thickness of 4~ pixels and slim it as time goes by until we reach 1px. The sequence is divided into groups associated with the number of pixels of each frame (4 to 1px would be four groups). So, if our animation consists of eight frames, the beam will have the first two frames at 4px, the next two at 3px, other 2 to 2px and the last two at 1px.

¨

To give dynamism we can alter the orientation of the branches and reduce the movement while erasing its pixels until it disappears. The faster the animation speed, the more realistic will look (the differences between each frame will be less noticeable too).

The radiance of the thunderbolt is achieved by the addition of a blue glow (or a blur) with the shape of the first frame in the layer below. To mimic the light cadence that can be observed in the sky during a storm we have to maintain this glow going at least twice the time of the main animation while fading it to alpha.

¨

Finally, we release a white flash (affecting the whole scene) triggered at the first frame and blend it to alpha rapidly. The beam’s initial strike is repeated during three cells approx. so we can see the lightning bolt in the back while the flash fades.

Take an umbrella

¨

First step of a rainfall: determine what kind of downpour are you going to represent. In Paradise Lost, this precipitation comes with a massive storm outside of the G.E.R. building, so the first thing that we established was the orientation of the drops, drawing them in 45 degrees to simulate the force of the wind.

¨

Its development is relatively simple; we draw a white line that is blended to alpha on top and make it follow a guide drawn from side to side of the surface for about five frames.

Establishing a random rain pattern

¨

¨

Now we duplicate the cells and relocate the frames multiple times in other positions, giving the feeling of randomness. The higher the speed, the more intense it will appear.

The impact of the drops on the glass is simulated by drawing concentric circles growing from one pixel, all of them blended to alpha progressively. We repeat the process used for the falling drops, duplicating and scattering each wave.

¨

With both drops and circles finished we can establish a closed loop, masked within the bounds of the glass. Add some thunderbolts, and we got ourselves a perfect storm!

Splatterhouse

The spilling of fluid has two basic rules to follow:

• Start your animation from a single stream that loses thickness with each frame
• Pull the liquid down simulating the effect of gravity
• Always follow a concave parable, no matter the direction of the spill

The onion skin shows the principles previously outlined. As with the rest of the effects, this kind of animation works better at higher rates of fps, so little imperfections won’t be relevant.
¨

¨

To simulate volume add more layers upon the first stream and scatter the rest of splatters. Not much to add about it, except that you can erase parts of the spill in the last frames to kill the animation in mid-air.

Other stuff

Stuck fans

¨

We’ve already shown the conduct fans in previous gameplay videos where you can see how they block paths. To avoid getting chopped into a salad, we must reach their switch, either sneaking the decoy through grills and conducts or using other skills to access them. Now we’ve included fans surrounded by dust and mold, accumulated by the lack of use.

¨

To start them, players will have to look for an additional energy source able to reactivate their switch and unclog the blades.

Accessing the HD

¨

Most rooms of the game display machinery behind the playable layer, but the lack of animation of these objects made some places look a little dull. On an attempt to spice up the backgrounds with an easy solution we decided to add led lights that can be attached to any mechanic component.

These bulbs are no bigger than 1px, and each of them has a different color pattern (8 animations in total), giving the sensation of hard drives running in real time.

¨

We think that this simple yet effective resource brings life to the levels and creates a notion of realism around you.

Security Cameras 2.0.  

¨

As seen above this lines, the security camera was conceived to check the surface of a room between two given points. As we tested all the skills and came up with new mechanics, we realized that a simple tweak could provide us with a ton of new possibilities.

¨

Now we can give cameras fixed positions, so players need to move them away from their scan limits, keep them busy while Subject W stays unnoticed to other enemies, and so on. It is fun to discover new ways to give you a headache  😀

Aaaand that’s all, folks. With the animation scheme of the last levels/bosses already done, next months we’ll be focused on the remaining cutscenes while implementing the B levels.

As much as we want to, we can’t commit to a specific ETA yet; there are a bunch of cutscenes that need to be completed (at least they are mid-game scenes and don’t require as much animation as the latest boss / end-game videos). Also, the inclusion of the B stages will be a time-consuming labor so we’ll try to speed things up and keep you up to date. As always, thanks for staying with us through this journey.

PS: Wish you all a happy and fulfilling 2019. Our new year’s resolution: finish the damn game!  (ಥ﹏ಥ)