The task

So as you may know, I was apart of a little project called Into the page, codenamed Comics Case.
The whole point of the game is to be apart of an investigation through a comic book in which you are the detective.
The comic feel was vital, and the idea to immerse yourself into the comic as well. The team knew right away that they wanted seamless transition from 3D to 2D. A seamless transition from the comic's case to a 3D room full of gameplay.
​
We knew right away that it was going to be tricky and as a part of preproduction, I was tasked to make this idea a reality... And I'm proud to say that I managed to do that in a couple of days during pre production.
Picture
I'm supposed to transition from this 2D drawing to a 3D room

The inspiration

I love movies. Using my pass, I used to watch an average of two movies per week. If a movie was very interesting, I checked out making offs and tricks used in movie.

Georges Méliès is behind the famous first special effect with the rocket crashing into the moon's right eye socket in his "trip to the moon" short movie.
​
I knew I couldn't stuck a full 3D room with walls on every side inside the comic's case. So, inspired by Méliès early work, I thought about giving the illusion that the 3D room is inside the case instead of actually doing it.
Picture
Illusion was early movies trademark

The theory

  • Using filters, I could make the room invisible for the comic's camera
    • Camera Filters allow some visual elements to be invisible and some others to be rendered
  • So it would mean that we're reading the comics inside the room without realizing it.
    • Once a room is over we load the next one, or we load the correct room right away
  • The comic's case is actually a screen representing the room from an orthographic point of view.
  • It switches from orthographic to perspective while zooming inside the case.
  • Once zoomed it. Use another camera with filters to hide the comic, but see the 3D room
Picture
The theory at work during pre production with free Unity assets

The steps

Setup tool for rendering screen

Test it out in dev scene

Render it in game

This is still not a perfect rendition. To live it, you might want to play the game!