Sonstiges: Developer Diary - The Creation of a Switch Game
Michael Grönert, am 26.12.2016, Seite 22 von 25
BadToxic Discord Server | GameMaster Discord Server | BadToxic on Twitter
BadToxic on Instagram | BadToxic's Dev Instagram | BadToxic on YouTube
Part 22: Overworld Landscaping
Following up on our previous diary entry, we continue with graphic effects. We want to upgrade our hitherto dull landscape outside the mini games. In this regard, today we are dealing with two topics. On the one hand a special tree and on the other grass which moves in the wind but also reacts to the players.
The special thing about a Pythagoras tree is that it's not a plant but a fractal. That is, geometrical figures that repeat recursively according to mathematical specifications. In this case it is the Pythagoras theorem which presumably everyone may know from school mathematics. It states that the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares on the other two sides. Or expressed in a formula ("Pythagorean equation"), which probably should have been easier to remember: a²+b²=c².
Illustrating the Pythagorean theorem on Wikipedia
Said tree now uses these forms recursively and adds more triangles and squares with identical aspect ratios to the first squares. The whole thing can be quickly understood by looking at the following video, in which I implemented my older (2013) implementation of such a tree with the Game Maker: Studio game development software.
You can try a HTML5 version directly in your browser, or download from my homepage. The edges of the base square can be changed freely, as well as the upper corner of the overlying triangle. This can already generate many different fractals. A few colors and textures can make the whole thing more interesting and the optional wind brings it to life
Now I was after imitating the whole in unity in 3D. Since the third dimension does not really matter in the calculations, this should not be more difficult. However, the used languages and techniques differ widely, so it still was a challenge. I will spare you the mathematical details, but for those interested I provide the source code on GitLab.
Such recursions can even quickly make a PC of today show its limits. It remains questionable in which form I will use this tree finally in the game. However, it is likely that there will be no Pythagorean forest, meaning such resource-hungry trees will be a rarity.
Now to something that will improve the almost desolate landscape - a meadow. In order to implement grasses, shrubs, flowers and more in Unity, there are many different approaches. However, I opt for certain requirements that severely limit this selection. I want our players (and possibly other things) to be able to interact with the grass and that the grass is moving in the wind. For example, the blades of grass should bend aside when a player steps on them and then straighten up again after that.
I search specifically and extensively for instructions and sample code on this topic and find it. In the end, I try to create a combination of different examples. I do not want to withhold the most important findings: Linden Reid’s “Waving Grass Shader in Unity“ and Minions Art’s “Quick Game Art Tips - Interactive Grass Shader“. The efficient way to do this with shaders has the disadvantage that I find it hard to understand everything in this area but that's something you have to deal with. Theoretically, everything is explained in detail in the mentioned tutorials and can be carried over for the most part. In practice, unfortunately, not everything is always so easy and there can be contradictory prerequisites if you want to combine two different shaders.
Wavy wind from Linden Reid’s Tutorial
The linked tutorials already describe most of it, which is why I do not want to look at everything in detail, but I'll give you summaries. The wind, which seems to be spreading in a wave, is realized by a scrolling gradient.
Gradient texture from Linden Reid’s Tutorial
Blades of grass are bent in accordance with the brightness about their position in the gradient. For example, you can assign bright for right and dark for left. In addition, the elapsed time is added to these coordinates, causing the waves to move in a steady state (as if the gradient was scrolling endlessly).
Blades of grass bend interactively in Minions Art’s Tutorial
The interaction with the grass is simpler to understand and it is easy to get an idea how it can be implemented. But without experience with shaders, every little thing can be a challenge. For example: How do I get the position of an object in the game into the shader? Luckily, since we do not write any very technical diary entries here, you'll be spared going over what else can go wrong, even if you already have tutorials with sample code. Long story short, blades of grass bend in the opposite direction to an object that they are supposed to interact with as soon as it falls below a certain distance. That sounds easy, right? Since the above graphic and the linked tutorial already well illustrated and explained the subject, I will leave it here already.
And that's how it all looks in practice, in GameMaster. In the video we also see blue mushrooms, which glow in the dark, as well as flowers. The 3D models used have different LOD (Level of Detail) variants. This means depending on how far the camera is from them, the models either have more or less details. This is to make sure that individual objects are less computationally intensive if they are in the picture in larger numbers at the same time. This, however, has the disadvantage that the different model variants, with respect to our grass shaders, also behave differently, since they use different numbers of points (or vertices). One would have to configure the values of the shaders per model and detail level in order to achieve the best possible results. Much of my time on this topic has been taken up by optimizing these values.
With this I finish today's entry. Next time, we're taking our game character to a new dimension, and with it the overall look of our game - we're using three-dimensional manga-style characters from VRoid Studio. See you soon!
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!