1. |
The first production step of the project is the achievement of the 360 degree panorama: |
|
| |
|
|
- |
|
Creation of the set. We have to prepare the room and dispose all the objects that we want to photograph during the photo shooting. |
| |
|
|
- |
|
Put the camera on a calibrate tripod at the centre of the environment that we have to photograph. You can create a calibrate tripod simply applying a piece of paper measuring-tape (that you have previously prepared) all along the perimeter of the cylindrical central bar, just near the rotating head where the camera is fixed. |
| |
|
|
- |
|
Choose the right photographic lens on the basis of the view we want to get and the distance from the objects. |
| |
|
|
- |
|
Take the photos turning with the calibrate tripod. For having a good panorama, the number of pictures to take depends from the lens used: in most cases, for example using a 35-50 mm lens, 24 shots in portrait mode are necessary, or 18 in landscape mode. In this case, considering that the room was very narrow, 3 images series, taken at 3 different height (everyone constituited by 18 photographs), was carried out. |
| |
|
|
- |
|
Elaborate the 54 images obtained, that will be all stitched toghether with an appropriate software. |
|
|
| |
2. |
The second step consists to take all the photographs that will have to be enlarged and analyzed during the game. Ovviously, you have to photograph all the stages both with the objects to pick up during the game and without them. This is useful to give the player the feeling of really taking them, because they’ll disappear once taken. |
|
| |
| |
3. |
Then, it is necessary to shoot the didactic videos to insert in the game during the high spots. Infact, once the player has found and gathered all the necessary objects, he can see a video showing all the phases of technical procedure teached/learned. The video realized for this videogame are three, each one conceived for making easier the visual learning of:
|
|
| |
|
|
- |
|
Negative film development |
| |
|
|
- |
|
Enlarger use |
| |
|
|
- |
|
Photo development and printing |
|
|
| |
4. |
Now that the shooting work is carried out, we have to proceed with the editing phases. We need different software, for the image processing, for the video processing, for the authoring phase and so on, as you can see in the "software used" section. So, let's see toghether the fundamental moments of the procedure: |
|
|
|
- |
|
Start downloading on the pc the photographs taken and begin to process them. |
|
| l |
|
|
- |
|
We have to stitch them in one unique image (the panorama). So, open the images with PanaVue ImageAssembler, and begin to stitch the vertical ones |
|
| |
|
|
- |
|
In this case choose single column and confirm |
|
| |
|
|
- |
|
This software uses a system of matching points marked with coloured flags. The user has to choose the number of flags to get, then he has to arrange them inside every couples of photos, according with the corresponding colour. It seems difficult but it isn't, only consider that more you're precise, more the stitching will be correct. |
|
| |
|
|
- |
|
In this way we obtain a series of big vertical images, by stitching toghether 3 photographs at a time. |
|
| |
|
|
- |
|
By stitching them all toghether (this time in an horizontal way), we obtain almost the final result, a very long image whose imperfections have to be corrected with an image processing software, such as Photoshop. |
|
| |
|
|
- |
|
With the same software we'll enlarge the panorama canvas into a square of 2048x2048 pixels, since the authoring software that we'll use to ncreate the interactive adventure (Adventure Maker, see in the "software used" section) need this size for the image to be used. At this aim we have to create the superior and inferior portion of the image. |
|
| |
|
|
- |
|
Again, always with Photoshop, we will change the image feeling by modifying the colors and the contrasts. |
|
| |
|

|
- |
|
As we have said, we will use Adventure Maker to create the final game. The next steps are concerning the achievement of material needed by this software. A special section of this site is completely dedicated to it, and you should read it. If you want you can download and see it now. |
| |
|
|
| |
|
|
| |
|
|
| |
|
|
- |
|
Nevertheless, only the central part of the square image will fill the final screen rendered by Adventure Maker. This procedure is anyway necessary to make the view looks more realistic. For this reason, to get a visually correct result, the central part of the square has to be neither too much crushed nor too much lengthen. Maybe you have to make some experiments, before achieving a positive result. See below a screen capture of the final game. |
|
| |
|

|
- |
|
Now we have to elaborate the pictures that show the enlarged portions of the whole environment. We will prepare many images each scene, with and without the objects that the player has to pick up during the game. |
|
| |
|
|
- |
|
Additionally, we can add some graphical elements in the picture to make the frames look better. |
|
| |
|
|
- |
|
Below you can see the image of the chemical powder as cropped from the picture complete with the objects. Saving this portion of the image in .png format (available in any image processing software) allows you to preserve the transparent background, in a way that you can work better on the frames' montage.. |
|
| |
|
|
- |
|
Here you can see how the .png portion with transparent background is positioned in the right place, to obtain the frame with the object. |
|
| |
|

|
- |
|
In Adventure Maker we will have to place the image without the objects as general background of the scene; then, we'll place on it the small object's images as hotspots' backround, in the right position. In this way, when the player will click on the object-hotspot, he will make it disappear from the frame.. |
|
| |
|
|
- |
|
..and appear inside the inventory, giving him the feeling to had really got it. |
|
| |
>  |

|
- |
|
In the following image you can see how the icon that appears in the inventory has been created with IconMaker. |
|
| |
|

|
- |
|
A good way to insert animations in a multimedia application like our videogame is to use Flash. In the next steps we'll see, in broad terms, how some animations of The Dark Room have been produced. Book animation: select the most interesting section of the elearning course to create the browseable manual.. |
|
| |
|
|
- |
|
..we copy and past it in Flash.. |
|
| |
|
|
- |
|
..then we use it inside a customisable Flash open source file available online, creatink a new Flash animation.. |
|
| |
|
|
- |
|
..then we insert it in the Adventure Maker project (as you can read in the Adventure Maker tutorial). During the game, when the user click on the manual.. |
|
| |
|
|
- |
|
..Adventure Maker will show the animation of the browseable book. |
|
| |
|

|
- |
|
The next step is to prepare the 3 videos embedded in the game. For doing this, we have to edit the movies previously recorded during the photo session. We will use Ulead Media Studio for the visual editing. We cut and paste sections of the original movie, adding transition effects between them to reach a more dramatic impact. |
|
| |
|
| |
- |
|
When we edit the movies we can both use the original sound or, better, add a new one. In this last case we have to edit the sound file with a sound editor. In The Dark Room game some music has been arranged with Mp3DirectCut and added to the edited videos. |
|
| |
|

|
|
| |
|