In the last article I tried to explain how I work on renders. The main steps after modeling are texturing, lighting and calculations. As a result I have a picture in raw 3D, so now we need to filanize it. We’re still in what I called the Production stage: 5 - Compositing.
When you work with 3D and want a beautiful picture, there are 2 possibilities:
1 - you work carefully on every detail and setting until you are fully satisfied of the result. It will take hours.
2 - you make a nice picture and you improve it in compositing (Photoshop, After Effects for the most famous softwares). It is a good compromise time/quality.
Note: I’m not sure of the good english translation for compositing here (in French, I mean “retouche”). In the case of film-making, compositing is usually made during the Post-Production stage, when most of the film is done.
Here, the game is far from finished. I chose to sort the whole picture creation process in the Production stage as there will be other important things to work on during the Post-Production stage. Anyway, there’s no rule, and this is only representative of my own methodology. What I mean by compositing in this article is: changing the hue, contrasts, fixing a few bugs, add special effects, using different layers such as Z-depth, working on the skies and backgrounds…
Reminder: at the end of the previous part, we had the following raw 3D render:
The pic needs more depth, more contrast probably, and maybe a subtle color adjustment. But we can’t change the intensity and colors of the 3D lights anymore. It’s too late, unless we make a new 3D render.
Important: From now on, we’re talking of pictures (jpg, bmp…), with no information about the previous 3D process. This can be obvious for many people, but still it is important to understand that you cannot change the details of the picture (grass, textures, light, models…) without making again a render in your 3D software. What I mean is that sometimes, if something cannot be fixed in compositing, you need to recalculate the whole 3D picture. It can be a huge loss of time. As we said in the previous part, it can easily take hours to render the 3D scenes.
So let’s talk of the different possibilities we have to improve a picture. This is what I call compositing (retouche). I have made a non-exhaustive list of techniques.
The most obvious idea is to work on colors. I personally find the original pic too yellow. Yellow tints are interesting, because they remind the sun. But if you’re not careful, it can be pejorative and remind, for example, a yellow blot of sauce on your new white t-shirt. This is a bit what I feel when I look at the yellow areas in the 3D render above. We can make it more reddish, as if the sun was low in the sky.
Well I know it’s too much below. The result is deliberately overdone, so you can see the difference.
However, most of the time changing colors is not enough to make a nicer picture. That’s where it is interesting to add special effects (FX). FX can be a ‘lens flare’ to simulate the reflection of the Sun in the camera lens. Or it can be smoke, particles, light rays… There are probably infinite possibilities as soon as you start playing with them.
One more time, I have deliberately overdone the process. I chose to add light rays to simulate the sun going through the foliage, and I have also added a lens flare on the lantern. For the final picture it needs to be more subtle
You can also work on blurs. Blurry areas can hide some problems in your pictures, which is often useful if you don’t have the time to re-render the 3D scene.
They can also help to focus on a specific part of the picture. And blurs can be beautiful too!
Here we just forget the trees on the sides to focus on the tunnel:
Let’s finish with 2 useful filters. It often happens that the raw 3D render is a little bit blurry (this can be due to the anti-aliasing filters in the 3D software). It is a good idea to sharpen the final pic.
Also, there are many filters that simulate the different qualities of a camera lens, such as noise, grain, or also film damage, TV effects… These are very helpful ones for the immersion in a sci-fi project, when strange events can happen! It can make you feel oppressed.
And this is it for the most common effects I can show in this part. There are more possibilities, that require to work with several additional passes. I often do that with an Ambiant Occlusion pass and a Z-depth pass. Working with passes brings more sense to the word “Compositing”.
There is, for example, a good illustration of the possible passes on the site core-cg.com
This is probably a bit more technical and I want to keep this “making of” quite easy to understand for everyone.
To conclude, I will simply show the result of my compositing. The first picture is the Raw 3D render (same as before), and the second one is the Final one, after this compositing process.
I hope you like the result. This is the end of the explanations on the 3D Production part. All I have to do is apply this whole process to all the environments and videos of the game CATYPH!
Next time I will explain how I use these pictures in the game engine, Visionaire Studio.
I think this game looks great!
Thank you Savatage79! I really want to show more of the game, but it would probably spoil everything.
At least I will post new pics soon and a 2nd gameplay video later.
It is difficult for me to explain how I create CATYPH, particularly in english language, but I hope it’s interesting for some of you (or will be interesting, if you prefer to read it later). I want to explain the technical process to everyone, without sounding too difficult. I think that the previous explanations were quite accessible, even without knowing anything in game development.
Well, I hope so! I’m also quite restrained by the 4000 characters limitation of the forums, so I can’t develop the text as much as I want. But it’s ok, or it would probably be too long.
Yeah, the explanations of the technical process are really interesting, I’m loving it!
Also, don’t feel restrained by the character limit. There’s no limit on the number of posts you can make in a row…
Before I continue with the explanations of the Production stage, I would like to summarize the creation of the environements with a series of screenshots. You can easily compare the view in 3dsmax and the result in game.
The 2 next pictures will show exactly what I see in the 3d software when I work. Each scene that is opened in 3dsmax is usually visible in 4 views:
That you can easily switch, in order to see additional views, such as:
In these views, you can select each 3d object, light, model, or camera, and define its parameters.
In the screenshot below, nothing was selected in the scene, and as a result you can have the option on the very right to create new objects, such as a box, cone, sphere, etc… (see the buttons in the very right column?)
These primitive objects are the ones we usually use to create new advanced objects, with the technique of Box Modeling that we saw before.
In this other screenshot, a camera was selected (it is visible in white, in the bottom left corner). When a camera is selected, the options of the very right column change, and display the different parameters of the camera. You can change for example the lens, field of view, the type of camera (free or targeted), and many other settings such as the depth of field and environment ranges.
It’s probably not really obvious with these small screen captures, but there really are a lot of possible parameters.
While working, the most important view is the one on the bottom right, which was set here to be the Camera view. It shows exactly what I want the player to see in the game. This view is, as we say, “shaded”, which means that the textures, materials, shadows and other effects are visible in realtime, but as a preview only (very poor quality).
On the contrary, the 3 other views in each of the screenshots above is set to “wireframe”, which means that we can only see the edges of the geometry. It makes the display much faster. Each object of the scene has a different wire color, in order to distinguish them.
When the Camera view is good and when I am happy with the result, I can start the Render stage, that was explained before. Now, can you see more or less all the steps of production in these screenshots ? (from modeling to rendering)
To make things more clear, I kept only the camera view in the next pictures, so you can compare it with the final result.
I think that the last article concluded the visual development of the game. You now know how I create the characters and environments, and you probably understand better some technical terms such as 3D modeling or rendering. We’re close to the end of the Production stage (2 last parts to go with). Let’s see the 6th one: export to game engine.
I know that everything written until now is not always accurate or easy to understand, but I hope you got the main ideas. We have finished with the biggest part of the development from my point of view: how to create a world in 3D. This 3D world, after the render stage, is now a series of jpg & png pictures, and video transitions or cutscenes.
It is time to prepare all the separated elements in order to use them in the next stage of the development: import in the game engine (Visionaire Studio). If you remember well,I had anticipated this work in part 3, when I created the cameras: I explained how I cut the video sequences in several ones. Do not hesitate to read again this part (3 - animation, camera position) if you feel that you need to.
Now we have our first puzzle. It’s an easy one, with a few switches to turn on or off.
Here’s a screenshot of the first puzzle from the Catyph Trailer #1:
That kind of puzzle is quite easy to create in Visionaire. The most important is to prepare the different elements that will move, or will be interactive. From the above picture, we can think of the switches themselves, the light bulb that will turn on or off, and the visual aid icons.
All the interactive elements have to be saved in a separate picture. The background picture will be the same puzzle, without all of these interactive pieces. Then we will add PNG pictures with alpha, or jpg pictures (to save disk space), as layers above the background.
In order to have these separated elements, we have to anticipate this need and prepare them in the 3d software.
Here’s the 3D scene:
In this 3d scene, I have already selected (in white) some of the interactive parts that we need to separate. I will render each of them in small PNG pictures, one after the other.
I have listed all these pieces below:
The white areas around these pics is saved as transparency (alpha).
I also have to anticipate the action to turn on the light bulb. Here it is more difficult to render the transparency because of the lighting effect that spreads on the background, making different ranges of gradients. So I prefer to render a jpg picture that I crop correctly:
I will have to place this picture at the exact x & y position later, but it won’t be a big problem.
Now that we have isolated these important pieces of the puzzle, we can hide them in the 3d software, and render the background alone:
That’s it for the 3D elements.
All that is left is the additional elements such as the visual aid and the special effects (FX).
The FX of this scene is a short animation of rain. I have created it in After Effects with a famous particle plugin. This whole animation will load in memory, so I have made it very short. It also needs to loop forever in order to reproduce the incessant rain idea.
Here’s a single frame of the whole rain animation:
The white area is transparency again.
I followed the same procedure and used After Effects to animate small icons for the Visual Aid (blue dots and red arrow).
And I think we have everything we need.
I’m sure you have guessed what happens now: we need to create a stack of layers in Visionaire, in order to recreate the puzzle with all of these separated elements.
This is the result we can expect:
This picture was made for an illustrative purpose, in order to check that all the pieces will work with each other. What I mean is that the puzzle is not finished yet. We have the graphics ready, that’s true, but there is still one more stage to complete: scripting the actions that will link everything in the game.
This is what we’ll see next time, when I will import these separated elements in a new scene of Visionaire Studio, and show you how to make a list of actions and add simple scripts in order to finalize the puzzle.
We finally reached the final stage of the Production process! I would like to thank the people who supported this Making Of until now and I hope you liked it. Feel free to ask questions if you need more details on some points. Let’s go with the 7th and last part: development and puzzle scripting.
If you remember well, in part 6 I had prepared the 3D renders to use them in Visionaire Studio. I made separate elements such as PNG pictures, that will help me to create the scenes of the game.
A few words about Visionaire
It is true that the previous parts of this Making Of were quite complicated if you’re not a graphic designer. Not everyone owns a 3d software and knows how to use it, even if some of them are accessible (i.e Blender, licence free, with a lot of existing tutorials).
Happily you can also create an adventure game without a 3d software. If you’re good at drawing things or taking photos, you can make a game with Visionaire quite easily at home. You can paint beautiful watercolors and scan them: they will become great backgrounds in your game project.
Visionaire Studio 4 “indie single user” version is available for 49€ and allows to create commercial indie games such as Catyph.
Since version 4, you can export your games to Windows, Mac and Linux.
Originally, Visionaire is meant to produce 3rd person adventure games like Deponia, so you can of course spend some time on the animation of a hero, and work on the adventure of your dreams. If you’re fond of Monkey Island, Machinarium or Myst, simply choose the style you prefer and create your own game with your own style (retro/pixelated, realistic, cartoon…).
Please be careful not to purchase the old version 3, which is still available from the main page of the site.
If you’re really happy with your games, you can also purchase more advanced versions, such as the “mobile” version that allows export to Android/iOS (490€), or a “pro” version that will allow you to work with several people and distribute your game physically (1490€) with no limits.
Luckily I’m making Catyph on my own, so the cheap indie version is perfect!
There is an evaluation version available too, if you’re curious:
It could be a good idea to get familiar with it, if you want to understand my explanations.
The main idea behind Visionaire is to allow everyone to create an adventure game without writing a single line of code. It sounds magical, but still it doesn’t prevent from “writing” scripts. In Visionaire, a script is a list of several pre-defined Actions that you select in a list. There are plenty of possibilities and you can probably create everything you want.
How it works:
You first need to create a new scene in Visionaire, with a background picture and several “hotspots” (clickable areas).
On the very left of the editor, there is the list of scenes I have created for the prototype of Catyph.
Then, this is what a basic scene looks like (picture below). I have just imported the background that I had prepared previously, for the puzzle with the switches:
The scene of this puzzle is selected in the list, and the list of objects for this scene is empty - we just have a “back” (background) layer selected in blue (can you see it?).
Then you have to create a new scene-Action, followed by a new hotspot-Action. There are 2 tabs named “Actions” in the editor. The tab at the top is for the whole selected scene, while the other tab at the bottom of the screen is for each seperated object (layer) of the scene.
The scene-Actions are somehow the conditions (“trigger”) that allow the main scripts to run. They are as simple as the following examples:
- on left click, do…
- on right click, do…
- when mouse enters action area, do…
- at the beginning of the scene, do…
They tell the engine when to start exactly the other Actions in the scene. When it is defined, you can enter the hotspot-Actions. There is a very long list of them, separated in different categories (character actions, scene actions, audio, video, interface, etc…). For example:
- place character at position (x, y)
- show/hide scene named…
- fade to scene named…
- play sound “file.wav”
- display narration text “I’m happy, are you?”
- show/hide cursor
As a result, when you read the 2 Actions simulatenously, it gives a logical sentence:
i.e At the beginning of the scene, display narration text: “Congratulations!”.
I think I’ll be pointing wannabe-devs to this thread when they ask about software like Visionaire or other aspects of AG development…
Interesting stuff, Simon!
Now that we’re familiar with the system of scenes and Actions, we can develop the puzzle. The main idea is to switch on or off the 8 buttons, in order to create the good combination. Each button has been set with a Variable (named Condition), set either to True or False.
At the beginning of the scene, the Condition for each of the 8 buttons is set to True.
In the following picture, you can see the first switch selected. As long as the condition “button1” is true, the switch is down.
If the player clicks on a switch that is down, the current picture of the switch must disapear and then show the up switch button instead: the condition is set to False.
In Visionaire, it is translated as follow:
On left click, Change condition “button1” to false
Then we must check the Conditions for all the buttons and see if the combination we expect is correct.
We do so by clicking on the round button under the light bulb. If the result is good, we turn on the light bulb.
I have done it for the button1 (I check a combination of 1 button for the example, but in the end the puzzle needs to check the 8 buttons):
In the picture above, you can see the following list of Actions:
Change Condition “ButtonLamp_Pushed?” to true
Pause for 500 ms
Change Condition “ButtonLamp_Pushed?” to false
If condition “button1” is false
KeeperDoor_CodeFound” to true
Pause for 2 seconds
Switch to scene “0001domekeeperpath11”
That you can translate as follow:
- Prevent the Player to click during the script -> hide the mouse cursor
- Animate the round button to simulate the fact that it was pressed (show it pressed for 500 milliseconds, then hide the pressed button).
- Check if the button1 is up or down.
- If the combination (of 1 button in the example) is as expected, then the puzzle is solved and the light turns on.
- Pause the game for 2 seconds (to give some time to see the light turned on)
- go back to the scene of the door, that will be opened.
- End of the script
- show the cursor—> The player can click again.
The puzzle is solved and the door is opened.
I must not forget to give the possibility to go back to the previous scene without solving the puzzle. This is done with the “red arrow” cursor on the left.
Finally, the player goes back to the scene of the door. If the good combination of switches was found, the door is opened. Else, it is closed.
Animations and more
It is possible to go further in the development and add much more Actions. The puzzle illustrated here was easy to program, but sometimes there are a lot of Conditions and Variables to check.
It is very difficult in Visionaire to optimize the list of scripts in order to save memory and cpu. Most of the time, you work with quite a lot of “if…else…” Actions together, so you cannot really reduce the number of Actions in your scene and make something clean.
When you have finished with your puzzle, you may want to add animations here and there, for a more lively result. What I did in this region called Kynan, is that I have added an incessant rain effect. It is an animation of about 35 frames that runs in loop in front of your screen.
Can you see the dark raindrops in the down right window of the above screen? They are blured on purpose, because they flow on the glass of your helmet.
It is a loopable animation, and as you can see in the picture, there is a timeline of 36 frames, that represent the total of pictures played during the game.
By default, Visionaire will play this animation once, and probably not at the right speed.
We have the possibility to change the settings as follow:
The most important ones are:
- the speed (the frame makes a pause for x milliseconds before the next one)
- the Infinite loop
- the possibility to play forward or backward.
And I will conclude with a short manual script in LUA language, that corresponds to another Action that was not listed by default in Visionaire. First, let me explain the situation:
the Rain animation above was created in a resolution of 960 x 400 pixels. It is twice smaller than the game resolution (1920 x 800).
The reason is to save memory, because the rain is a PNG sequence with transparency, which can prove quite heavy. The full sequence of 36 frames will be saved in RAM as long as the rain loops on your screen. To avoid problems on low PC configs, I chose to reduce the rain resolution.
However, in order to fill the screen with the rain effect, we have to artificially double its size. Do you follow me?
There is a simple LUA code that allows to scale an active animation, so I used it to scale the Rain.
This line will check within all the active animations in the game, for an animation named Rain. Then it will scale its size to 200%.
It’s quite an easy code to understand, and LUA is very useful to develop more advanced puzzles. Someone with good skills in programming will have infinite possibilities to create a game, even if an Action is not available in the editor!
And so ends the Production part. Next time I will try to share a playable prototype demo of Catyph, which will introduce the Post-production stage.
I think I’ll be pointing wannabe-devs to this thread when they ask about software like Visionaire or other aspects of AG development…
Interesting stuff, Simon!
Thanks a lot Timovie! I’m glad that you’re still around to read my stuff:)
People who want to be more familiar with Visionaire can visit this site:
The main features are explained, which allows everyone to begin with Visionaire.
As announced two weeks ago in the last part of this Making Of, I decided to share with you a playable prototype of Catyph. I find it interesting, because it illustrates quite well the different things that were described in the Making Of. After you play this prototype, if you are curious, you can read the previous pages of this thread from the beginning, which may give you a better idea of what I was talking about in the Production stage.
The word ‘Prototype’ is important, because what you will see cannot be considered exactly as a demo. It’s more an experiment made for myself in order to see the possibilities of Visionaire Studio and the different options I had to create the game. This prototype is not something I had considered to share in public, on the contrary of a demo. That is the biggest difference between a prototype and a demo.
Even though it is playable (you can move between different scenes), it is also very short and limited. The inventory is disabled, such as the menu and the datalog. You can open the door of the small building (which is quite easy), but you cannot open the gate on the opposite path. The storyline is absent too.
I think this prototype describes quite well all the work there is still to do on the game, from the Production Part (previously explained) to the final touch: localisation, proofing, music and sfx, beta-testing… This is also why I decided to share it now, because it is a good summary of the whole game development process, with all the troubles I can encounter now and later.
As an early build, it probably contains issues and spellings. The texts were not proofed here.
It was initially created with Visionaire Studio version 3.7, and updated in Visionaire 4.0. Visionaire 4 gives more possibilities and allows Catyph to run the video transitions without showing a black screen after each move. However, I find that VS4 requires more system resources, and as a result, the game can be quite slow sometimes. It is important to say that this prototype has not been well optimized. The game may not run on low configs.
The events take place in the desertic region of Kynan, where incessant methane rains fill the seas of hydrocarbons of moon Tytaah. You make your first steps on this land, just after the end of the original Catyph short film (this one: http://vimeo.com/84080449)
There is no end in this early version, you must quit the prototype by yourself by pressing Escape. For more details on the gameplay, please read the short Readme.txt included with the files.
Your feedback is welcome, you can send your comments here or get in touch with me by email. Thank you!
Redist: people running Windows XP probably need to install the following package:
This definetely ends the Production stage of the Making Of.
I took a little break on my game, it loads for the lights ...
I will try your demo! with pleasure,
and I send you an email (in French) right after!
Congratulations for your job!
Edit: don’t work for me: miss MSVCR110.dll in my PC :p
Edit: don’t work for me: miss MSVCR110.dll in my PC :p
WHAT?! Visionaire Studio doesn’t create clean-fully-working builds? I hope it’s just on your PC…
This sounds like the beginning of problems
Maybe the new version 4.01 will fix this issue.
If anyone else has the same problem, please let me know!
Game works well here, I like the effects, the rain effect. Can anything be done inside the room?
Another unrelated question: when will ASA be available on Steam?