Final Fantasy VII scene reconstruction using Blender (Part 1)

This post is the first part of a series, you can read the next posts here:

Part II - Final Fantasy VII scene reconstruction using Blender (Part 2)
Part III - Importing the reconstructed Final Fantasy VII scene into Three.js

Hello everyone, welcome to another of my Final Fantasy reverse engenieering posts. In this time I will show you how to reconstruct the scenarios from Final Fantasy VII.

Final Fantasy VII

When this game came out in 1997 featured incredible art and graphics, for rendering a highly detailed scenario it made use of a technique popular back then called pre-rendered backgrounds. There are some other games that made use of that technique like Resident Evil 1 and so. So this way of remaking the scenarios would probably work for every game making use of that technique.

Resident Evil 1

The scenarios are first 3d modelled using some sort of 3d complex software, or even hand painted like in the Chaos Rings series, you can even use real photographs! The only thing you have to end up with is:

Render, walmesh and camera displayed using Makou Reactor

  • The background image or render.
  • The collision mesh (walkmesh).
  • The camera placement.

Then, the background is painted as a still image on the game window, and the walkmesh is loaded in the game's 3D world, but not displayed.
Then, the camera is set, the 3D objects as characters and so are placed and interact (collide) with the walkmesh, but you have the illusion that they are interacting with the objects displayed in the background.

Chaos Rings features hand painted backgrounds

There is one way to extract all this needed information directly from tha games data, using the ultimate Final Fantasy VII data extraction tool called Makout Reactor.

But in this case I want to recreate the process of making some Final Fantasy VII scene,and even apply this process for creating new scenes.
First, it is pretty easy to get the background render, you can use Makou Reactor or you can even look for them in Google images, you can use a picture, a drawing, whatever. But what about the walkmesh? and the camera?. I'm going to explain how to use Blender for getting both.

First from the still image, we will make use of a very good Blender addon called Blam, you can get it from their github page or directly download the addon zip file.
Once you have installed the addon you can follow the steps along with their super simple and effective tutorial video. I will show how do I get the camera from this Final Fantasy VII first mission backdrop.

Example backdrop

Basically what do you have to do is open the image in Blender's movie editor, and using the Grease Pencil Tool draw two lines representing the image's X axis in a layer, and two lines reprsenting the Y axis in another layer. You can use things like floor tiles or any visual reference contained in the image to place the lines.

In my case:
Lines properly placed

Then in the left side menu, just make sure that Layer 1 is set to X and Layer 2 is set to Y (you can change this or even use another axis, but in this case it is my setup). And click on Calibrate.

Camera calibration settings

The camera will then be automatically transformed into the scene's camera, also, the image itself will be set as the camera's background image.

Calibrated camera

The next step is create a plane.
Now look at the camera's both position and rotation.

These values are important

We are copying each one of those values and setting them also for the plane. The plane should end up like this:

Plane placed

Then set a texture for the plane, use the background image. The four corners of the plane are going to be set to the four corners of the image. The image is going to be distorted, but we are going to fix that in a moment.

Plane texture applied

The step now is to set the moving coordinates of the 3D view to local, this way you can move the plane away from the camera, but always facing it perfectly, set the view of the 3D viewport to camera (numpad 0) and adjust the plane to the borders of the camera view moving the plane away and scaling it. Once it matches, the image will have its original pixel ratio again.

A perfect match

After doing that you can create a plane, place it between the camera and the background plane, and extruding and moving its vertices you can create your own walkmesh. Just remember not to move up or down the vertices that are on the same plane, in my example only the vertices before the stairs have a different vertical coordinate.

Rough walkmesh

Once you have the walkmesh, you place an object on it.

Everything looks ok

You will notice it looks good, at least until you place it behind a table, a corner or whatever. Then this happens.

Now is not looking good

We should fix this. So let's see how to do it in the next part of this tutorial.