Sonstiges: Developer Diary - The Creation of a Switch Game
Michael Grönert, am 26.12.2016, Seite 21 von 25
BadToxic Discord Server | GameMaster Discord Server | BadToxic on Twitter
BadToxic on Instagram | BadToxic's Dev Instagram | BadToxic on YouTube
Part 21: Shaders and Particles
Today we will look at Shaders (originally used for shading - the production of appropriate levels of light, darkness, and color within an image). Shaders are hardware or software modules that implement certain rendering effects. In our case, shaders are small programs that can run efficiently on directly dedicated units of the graphics card. They are written in special languages, such as GLSL (OpenGL Shading Language), or HLSL (High Level Shading Language). If a device or graphics card is missing the shader units, the shaders have to be calculated with the CPU, which is much slower, or they have to be omitted completely. But do not worry, this time I won’t go too deep into the technical details, either. We’re gonna take a look at the results that we want to achieve with shaders rather than their concrete implementation.
Objectives: generation switching
We want to develop the mini games in GameMaster. From simple pixel graphics we know from Game Boy to pretty 3D graphics. In theory, this means we would have to make our own graphics for each variant - a huge effort. But there are tricks to make our graphics look older and more pixelated without much work. "Post Processing" shaders allow us to manipulate individual pixels and their colors to make the result look like it's on a weaker device with limited technology. One can imagine that, for example, four or more pixels are combined to one which has the mean value of the pixel colors. In the case of our GameGuy, which should be similar to a Game Boy, we are restricted to four colors or grayscale. So our pixels get the color closest to those four.
A monochromatic 8-bit version with four shades of gray
I can reuse the fish and bait graphics from my older Fizhy version but still have to rework the fish for the 8-bit variant. Of course, there's a lot more that needs to be done for the 2D versions, like putting on the water and the basin, or adjusting camera settings, but since today's diary entry is about the shaders, I’ll limit myself to the graphical results.
Same goes for the next stage of development, which is similar to an NES (Nintendo Entertainment System). An NES can already display 16 to 25 of 52 colors simultaneously. The shader does not have to be that strict, it just has to look like that and this is easier.
The colored 8-bit version
For this version I add a few landscape details from the Japanese zen garden. But something is missing for the right retro feeling. The picture resembles a typical NES game but at that time the TV also contributed greatly to the look. This can also be recaptured with a shader. For this I use a CRT shader simulating a cathode ray tube screen. Roughly speaking, it makes it look like the pixels of a CRT monitor are visible in their individual colors red, green and blue. Furthermore the typical curvature of the picture surface.
Again the colored 8-bit version, but with CRT effect
Next, I'm offering a 16-bit version, which roughly resembles a SNES (Super Nintendo Entertainment System). With its 15-bit color palette, this console already provides for a tremendous upgrade. For this I model an extra variant of the Japanese zen garden, which I also use for the 8-bit edition. Again, the CRT effect is appropriate.
The 16-bit version, on the left with CRT effect, on the right without
The following 32-bit version you already know from previous diary entries. But also for this I create two special shader variants for experimentation fun.
The pencil shader gives the world an appropriately penciled look
First we have a variant here that should look as if it had been drawn with a pencil. And second, my personal favorite, a neon version. Whether and how I will reasonably incorporate this into the game, I do not know for sure. Maybe I'll just offer it for fun.
A neon shader - I love this variant
Visual effects
Shaders are not only suitable for post-processing the image but can also generate specific visual effects. I have already implemented a few of them in Fizhy. However, most of these effects are realized via particle systems which is another technique altogether. It can be used to animate a large number of objects. For example, particle systems are used to simulate fire, smoke or explosion effects. If you compare the following Fizhy screenshot with an older version, you see that a lot has happened. Actually, the differences can be seen best in the moving picture.
The usual 3D (32 bit) version
First, you’ll recognize some bulges on the ground. These are realized via shaders and move at a constant pace. In fact, this looks like water reflections on the floor. Usually this is done by projecting textures onto the desired area. I discovered this alternative while experimenting with shaders and consider it quite efficient. Next, you can see a kind of blue fog in the water, which should increasingly limit the field of view in the distance. This is realized using particles, although shaders can usually achieve a good fog effect, too. I opted for this less efficient method because it was problematic in my shader experiments to be able to see the fog-free surface through the water. Certainly this problem could be solved in another way but the area is new to me and I want to move forward. Furthermore, you can see small bubbles which rise randomly and preferably with the movement of a bait, rising up to the water surface. These too are particles that use small images. Finally, there is a particle effect which occurs when a bait is thrown into the water, seen in the next screenshot.
Particle splash effect when a bait falls into the water
Impossible objects
Now we get to something very special. Shaders can also show effects that are not possible in reality. Imagine a portal, for example. Like a window to another place, another time or reality. Or you walk around the same pillar three times to suddenly come out somewhere else. A perfect example of something that drives a lot of such effects to the extreme is the game Antichamber.
At first, I only studied these techniques out of interest, not because I planned their use from the start. But I would like to introduce a cornerstone of these techniques, which already makes it into the game. I create some kind of playing card which carries its own three-dimensional world in itself. This world is visible only through the "window" of the card, you can not look around it. In a way similar to a holographic effect which adorns some trading cards but not limited to a few angles. In the following video you can see a finished example of such a card.
I want to create these cards for all mini games and they are meant to be a kind of trophy for "beating" each mini game. What exactly that means, I'll decide later. For example, you may have to find all or a certain percentage of achievements.
To roughly explain the functionality: All objects within the card world have certain materials, all of which have the same index as a shader variable. The card window has a kind of shader mask with the same index and acts as a counterpart. The shaders are instructed to draw the pixels of the objects only when overlaid by a mask of identical index. I provide a simple version of this card as a free download. Firstly on GitLab, where you also have a WebGL preview and on the other hand, as my very first product there, on the Unity Asset Store. For the latter, a little more effort was needed in form of polished pictures in different sizes, explanatory texts and adherence to a number of guidelines. In fact, I had to send in my card three times until it passed the multiple-week-long verification process. Theoretically, this store could of course serve as a source of income, but currently I do not plan on doing this. Here you would have the advantage of being able to import the card directly into your own project without any effort.
Now you have already seen some examples of what is possible with shaders and particles. With that I want to come to an end for today. Next time we’ll take a little trip into the landscaping of our "overworld" and deal with grass which even bends when you walk through it.
Do you prefer to read this diary in the developer's mother tongue? Then click here to read this diary entry in the original German language!
ANZEIGE:
Um Kommentare zu schreiben, bitte oben einloggen oder jetzt Registrieren!