Sonstiges: Developer Diary - The Creation of a 3DS/Switch Game
Michael Grönert, am 26.12.2016, Seite 18 von 24
BadToxic Discord Server | GameMaster Discord Server | BadToxic on Twitter
BadToxic on Instagram | BadToxic's Dev Instagram | BadToxic on YouTube
Part 18: Fizhy
It's time for a new game! Let’s tackle the third mini game! It's a remake of the first game I've released to the public in the app stores of Apple and Google - Fizhy. It is a puzzle game based on the principle of the Nintendo classic Dr. Mario. You can also try the old version yourself before you read more about it and get it for free and ad-free for iOS and Android.
Instead of explaining the exact functionality of the game, I allow myself to quote the description from the app stores:
The baits are thrown into the middle of the pond and slowly sink down.
They can be moved right, left or down and be rotated in 90° intervals.
Once a chain of at least four parts is built, all involved fish are biting and reeled in.
Compete with others by trying to claim a bigger high score. Creating several chains in the same move awards more points.
Unlock increasingly harder levels and visit three worlds with different difficulties, each featuring a unique environment with 20 levels. (Or are there even more?)
Can you unlock all the achievements?
Or even make it to the top of the highscore list (leaderboard), by gaining the most points?
Swipe your finger across the screen to move the baits. Alternatively, you can use a gamepad that is compatible with your device.
A special feature of this game is the optional stereoscopic view, which allows you the play the game in 3D.
For this to work you have to either connect your device to a 3D TV, put it in a VR glasses holder or just squint.
The game offers a variety of settings, which allows you to optimize for graphic quality or speed,
disable the groovy background music, to use another language or to activate the color blindness mode, which maximizes the difference in color intensity in order to compensate for visual impairments.
The new edition
As with our second mini game, we're also developing this as a stand-alone project before integrating it into GameMaster. Unfortunately, since we're working with the Unity 3D development environment and the old game was implemented with GameMaker, we'll have to do it all from scratch. Also the “GameMaker Language” (gml) scripting language used in GameMaker is very different from C#, making it difficult to reuse individual codes. Above all, the graphics should be greatly improved and raised to true 3D. For this I have selected a setting to my liking: A Japanese zen garden. In fact, the graphics are the biggest challenge in this mini project and should enable me to learn new things in this field, which will help me later in the main project.
The implementation is almost trivial compared to the effort I spend on designing the world, especially if you've already programmed everything before. One after the other, baits are thrown into the water which fall down a field at the same time intervals. So we need a timer that keeps some code running by calling it again after a fixed number of milliseconds. Here it is especially important to use the real elapsed time and not to count the number of cycles of the main code. For example, we set the frames per second (FPS) to 60 and could therefore assume that after a run, or after a frame, 1/60 seconds have passed. However, this is the ideal case, which rarely corresponds to reality. As the bait falls, it can be moved left, right and down, or rotated 90° clockwise or counterclockwise. Turning is a bit of a hassle as we can not rotate the bait object around a certain point without it sticking out of the grid. Every rotation requires a translation.
It is not rotated around a certain point.
In fact, I made it so that it can only rotate between 90° back and forth and the other orientations (180° and 270°) are realized by swapping the two parts of the bait. This makes it easier for me to manage the references between all the bait (sub)objects later. Finally, if a bait can not continue falling because it has landed on the ground, on another bait or on a fish, all bait and fish on the field will be checked for chains of objects of the same color. At least four objects must be connected horizontally or vertically without interruption so that they can be "cleared". The affected objects are then marked and successively dissolved, or fish pulled ashore in further time steps. It must be noted that an object can be part of a horizontal and vertical connection, so theoretically it would be cleared twice. By catching several fish in succession without throwing in a new bait, combos are created that give more points. After each catch, the score gets doubled. Furthermore, it must be noted that after clearing or catching, other bait parts may no longer rest and fall again. Thus, new combos can be created again before another bait can be thrown. If this chain reaction is completed, it is checked whether all fish were caught - if so, the level is done. If there is no room left where the bait is dropped, the game is lost.
The title screen
The spatial world
Creating a three-dimensional environment is much more complex than drawing the backgrounds for the old version of Fizhy. Only by modeling objects one could fill many diary entries. In fact, I use the modeling software Blender to fix something. However, I have neither the time nor the experience to create everything myself within an acceptable time frame and with a suitable level of quality. That's why I'm looking for a variety of resources, free-for-commercial-use 3D objects and textures. This way I can gradually search for all relevant components as they are to be seen in the result. Fortunately, I quickly stumble upon a Japanese garden, which was already well done: Japanese teahouse with garden free 3D model. However, no textures are included here and there is enormous disorder in the hierarchy of the many thousands of objects. So I invest a lot of time to sort the objects meaningfully so that they can also be influenced hierarchically. For example, leaves should be subordinate to their branches and these to their tree trunk. I set the object groups to be enabled and disabled for different graphic detail levels. These levels can be set in the options of the game.
Graphic details can be adjusted in the options
For many objects, I completely forgo textures and assign monochrome materials to them only. This of course saves space, is easier to render and gives the game a special comic-like touch. Even though the garden is starting to take shape, it still looks static and thus unrealistic. That's why I decide to put some wind into it and deal with this topic for the first time. Finally, it boils down to make all trees and shrubs completely new as "Unity Trees", which can be efficiently affected by wind. For the first time, I streamed a bit of development for this topic on twitch (see the Unity3D Collection on my Twitch Account xybadtoxic). Don’t be surprised if the video is no longer available at the time of the release of this diary entry, videos will be automatically removed after a while. But if there is any interest in it, I could do it more often. In the video you can see the different steps that are necessary to create trees. That's why I will not write it down in detail. With a skybox I bring more movement to the world - a sky in the background, which moves slowly.
There is so much more...
There is a lot more hidden work in the finished game, but these should have been the most-important topics. On top of that, there are the touch controls with their swipe gestures which have to be perfectly balanced. Relevant are the distance a finger has to travel before a bait moves and above all the time intervals between the individual movements. A UI (User Interface) must be designed, the points counted and stored along with other data, such as the leveling progress. Another challenge was to match the field and the camera so that the space could be used perfectly on an arbitrarily large screen. Especially the formats of the screens are very different today. Tablets are almost square while current smartphones like the iPhone X have an extra-wide screen. The UI has to scale accordingly, since with new devices, the pixel density is so high that individual buttons would otherwise be too tiny. Then there is the creation of the store entries for Google Play and iTunes with a lot of text and information in possibly several languages as well as taking many screenshots and other images in all sizes and formats. Also, there are always platform-specific complications that have to be overcome. All in all, I've spent over 100 hours of work on this game, as I can tell from my time tracking application. An amount effort I will not invest into every mini game. But I was also able to learn a lot of new things and for some "fans" of my Fizhy game, I liked to invest a bit more time.
And with that, I want to say goodbye for this entry. The new game Fizhy Zen can also be found on Android and iOS to see for yourself. And it will be no small feat to implement this game into GameMaster. See you next time!
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!