PlanetSwitch Planet3DS PlanetVita PlanetiPhone Classics Forum

PGN-ID:[?] (Nicht eingeloggt)
PlanetDS PlanetGameboy


Sonstiges: Developer Diary - The Creation of a Switch Game

Michael Grönert, am 26.12.2016, Seite 23 von 25

Artikel mögen: Weitersagen:

BadToxic Discord Server | GameMaster Discord Server | BadToxic on Twitter
BadToxic on Instagram | BadToxic's Dev Instagram | BadToxic on YouTube

2016- Part 1: Welcome to the world of video game development!
2017- Part 2: It all begins with a first idea
- Part 3: The requirements
- Part 4: Final preparations
- Part 5: Ready to go
- Part 6: GONG! The first mini game
- Part 7: The Inventory
- Part 8: Saving & Loading
- Part 9: Skill tree & Menus
- Part 10: Achievements & Notifications
2018- Part 11: Day and weather change
- Part 12: Network Gaming
- Part 13: Companion Pet
- Part 14: Support for Android and iOS
- Part 15: Pairs - Find matching cards
- Part 16: Integrating Pairs into GameMaster
2019- Part 17: Statistics
- Part 18: Fizhy
- Part 19: Porting Fizhy over to GameMaster & AI
- Part 20: Creating a Community
- Part 21: Shaders and Particles
2020- Part 22: Overworld Landscaping
- Part 23: 3D manga-style characters
- Part 24: "Cooking" hamburgers together
- Part 25: Character Individualization

Part 23: 3D manga-style characters
It's time to change our game characters. This flat Paper Mario style also has a certain charm but I would like to strive for something much better. So far, very simple 2D graphics were used, which I made over ten years ago for my first games. Low-resolution pixel-style sprites - flat images in a three-dimensional world - that can be a matter of taste, of course. But if we look at it from a technical point of view, the decision becomes easy: Suppose we want different characters, different genders, ages and sizes. We may want to dress them differently. For every combination of these (and possibly other) values, you would have to make multiple images for each type of movement or animation of the character - an amount of effort too large for me alone. So we need a generic approach, where as much as possible can be reused.

What are the options?
OK, I do not want to make the sprite variant any worse than it is. Of course you could also use tricks here and combine several pictures to save yourself a lot of drawings. For example, different hairstyles and clothes could be placed on top of the body. Or we also assemble the body from individual parts, such as torsos in various forms. Then you could scale the body part images individually, so you do not need different variants. This could be done with blend effects to change skin and clothing colors. As you may have noticed you can generalize, automate and simplify it more and more, but at what cost? Of course, the computational effort increases drastically when you suddenly have to draw ten graphics with different scales and blend modes instead of only one. And of course, the distortions that may be caused by scaling do not look so nice.

There are animation programs that can combine these things in perfection and produce professional results. I'd like to introduce you to one of those that made it to my final selection - Spine. Spine is a 2D animation software that connects single frames to bones which can then be moved. In addition, individual areas of an image can be scaled to different degrees, which can create stunning effects. You can do it so good that 2D images even look three-dimensional. But see it yourself in an example on YouTube:

With this solution you would have to draw much less, but also much better. Because edgy pixel graphics do not fit with such liquid movements - if you want to use the potential of Spine.

Another option I've considered is modeling and using voxel objects. In the end, they are angular pixel graphics as well, just in 3D instead of 2D. These in turn I could animate fluidly without making it look ill-fitting. We know voxels from Minecraft, for example, or when it comes to animating angular and inflexible bodies - Lego games and movies. Construction with small blocks is something I think I can handle a lot better than modeling high-resolution 3D figures. In another context, I've also tried this with the free software MagicaVoxel. How to do this you can see in my timelapse video in which I build the Monas in Jakarta (Indonesia):

To animate the afore mentioned voxel characters or 3D characters in general you can download free animations for humanoid characters from Mixamo for example. It is not necessary to animate everything yourself. Although this variant with voxels and ready-to-use animations is very appealing, nevertheless I continue to look for something better. Since I often see games that feature manga characters that look better and more professional than the rest of the game, I specifically research them. In addition, manga characters would suit my game quite well. And indeed I find something: VRoid Studio for making three-dimensional manga-style characters. For this software I have also made a video in which I experiment with different values:

You first select the gender or directly from a template. All sorts of things can be changed, such as lengths and thicknesses of the limbs and several details of the face, which can portray many different emotions. There are web portals where users can offer their works (characters and clothes) under different licenses. Here I also found the black dress, free and commercially usable, which can be seen in the video. Also, I show how hairstyles can be created relatively easily.

My choice is made
With how impressed I am with these manga characters and how easy they are to create, it makes my decision rather easy. I’m also taking into consideration that the aforementioned Mixamo animations also work with these characters. So far so good, but how do I get such a character into my game? The .vrm format offered by VRoid Studio is not supported by Unity. The steps I have taken to accomplish this may already be out of date at the time this diary entry was written, so I will not go into them in detail. In addition to two Unity plugins (UniVRM and VRMtoPMXExporter), post-processing in Blender was also required. There are also easier ways, depending on how much control you want to have over the individual components. For example, you can have a single texture for the entire character in the end, or you can have individual texture images for all components of clothing and body. If you want to see the available methods, just search for "Vroid Studio To Unity" on YouTube .

Now it's time to move and animate the character. The movements already exist with our current sprite character. But instead of mirroring it vertically depending on the direction so that it can at least look to the left and right, we will now rotate the character around the Y axis so that he can always look exactly in the walking direction. And instead of constantly switching the pictures for an animation, the individual body parts have to be moved smoothly. As announced, we are using ready to use animations from Mixamo. We find what we are looking for using the search term "walking".

Walk animations in Mixamo

Here we choose what we like and a format that is supported by Unity. You can choose directly from a "FBX for Unity (.fbx)", which we would like to use "Without Skin". We can also set how many frames per second we want and whether we want a "keyframe reduction".

With these settings we download an animation

In Unity, we then have to adjust a few settings such as setting the animation type to "Humanoid". We can leave most of it unchanged. But we have to estimate some things by trying them out. For example, it can happen that we have to make adjustments in the "Animations" tab, such as "baking" root transform positions on certain axes into the pose. It’s also worth mentioning that the animations move our character directly, so our walk animation really lets the player walk forward and not only moves the legs. With exactly these settings we can influence such effects.

We have to adjust a few options in Unity

And then appropriate animation processes and transitions can be modeled. To do this, we create various states in the "Animator" tab of Unity, each of which stands for an animation and connect them to each other via transitions. The transitions each require conditions that must be met in order for them to be triggered, such as a variable taking a certain value.

States and transitions in the animator

In the screenshot above you can already see further animations with their transitions. For example, if the player interacts with a bank, they change to the "Sitting Idle" state. After a few seconds, another seating animation is started at random, which is supposed to make the character sit a little differently in order to create a realistic variety.

Bent down or straight - various seating animations

One important thing I would like to mention: In almost all downloaded animations I notice problems with the alignment or rotation of the feet. These are partially twisted by an unrealistic 180°. Google shows that this is a common problem. In order to eliminate it, "IK" ("Inverse Kinematics") checkboxes must be checked. These can be found at different places in the Animator tab. If you'd like to find out why these settings are necessary, the best way may be doing a Google Search. Unfortunately, I have to say that the problems cannot be solved in this way with all animations, as far as I have learned so far.

Important option for correcting foot alignment

I think I have written enough on the topic for now - I mentioned different possibilities for character design and slightly deepened my first choice. I say goodbye with a video of my first manga style character in motion.

Next time we'll start implementing another mini game, so to speak. This time it will (at first) take place directly on the "world map" instead of in a virtual console. And it should satisfy hunger… 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!

Gehe zu Seite:
Vorherige Seite | Nächste Seite

Kommentare verstecken

- Kommentare

- Noch keine Kommentare vorhanden -

Um Kommentare zu schreiben, bitte oben einloggen oder jetzt Registrieren!