Some time ago strolling around the net I was caught in a Cuphead trailer, I was amazed by the care details of this game, I had the feeling of being catapulted into an American cinema in the 30s. The trailer has fantastic colors, the game is designed and colored in the 30s style and is looked at with the eyes of a 30s people. As I was looking at it has flashed into my mind: how would I look at Cuphead today in 2017 ?
Movies of that time were affected by film defects due to time and use: scratches, dust, mould, finger grease and unstoppable vinegar syndrome. Scratches and dust are already contained in Cuphead, also in the best conditions of perfect preservation in a fresh and dry place and the absence of fingerprints there remains the problem of vinegar syndrome, which is related to the emulsion of the colour films of that time. The film begins to lose the image’s blue and green components, slowly degrading to the sepia colour and then increasingly to the red.
We’ll see how to create and apply this effect to the game by means of shaders. On the net there are shaders for many games, but what are they and how do you make a shader?
The tutorial is addressed to those who would like to approach the shader world but don’t know from where to start. I will try to avoid the use of overly specialized terms or concepts, this will be a journey to give a methodology and the first rudiments of digital image processing theory and application.
To create a video-game, procedures are applied (rendering) that allow to generate a digital image using appropriate programs from a set of information: three-dimensional objects description, viewpoint, lighting, etc.. These images aren’t created directly on screen, but are temporarily stored in the graphics card memory and are sent to the monitor later. Before sending these images to the monitor, they can be further modified (post-processing) through the algorithms implementation, the algorithm implementation activity is known as “Shading”, the specific algorithm implemented is known as “Shader”.
Well! Now the time has arrived to dirty our hands: to reach the first steps we need to be clear not only from an intuitive point of view, what is the color, brightness and contrast of an image also from a way mathematical/geometric.
1. GRAYSCALE IMAGES
These black-and-white images are also images with tones, from black to white. From a digital point of view, they are 8-bit images (256 grey tones) from Black (value 0) to White (value 255).
We represent this image using a Cartesian diagram (Fig. 1.0) where on the abscissa we put the gray tones of the original image and on the ordinate the gray tones of the displayed image. In this space that we will say “of images”, the gray tones of the original image and the one displayed are in a biunivocal correspondence (1:1) and the relation that represents them is a segment (set of discrete points) that is an angle of 45° with the abscissa axis.
Grayscale Image – Brightness
Grayscale Image – Contrast
SweetFX and Reshade_Files
Cuphead Sepia 1
Cuphead Sepia 2