Guilty gear follow up on animation
And there we go. Same caveat as last time, there may be omissions or errors but hopefully not too many. If you notice any just tell me (and if you don't have a Polycount account bug me on Shoryuken or SA or wherever else I may be, same nick).
Secrets of anime-like 3D graphics, part 2
Opening statement: you can slap toon shading on something but it takes a conjunction of other things to make it feel 2D.
In a fighting game using 2D stages, a background would be a series of 2D layers using parallax movement, ie as the action moves left and right different parts of the background will be visited but layers that are supposed to represent far away objects will only move at a fraction of the camera speed to simulate the effect of perspective. Perspective comes naturally with 3D graphics but in Xrd's case it's actually massively faked: far away elements are in fact much closer than they appear but have been significantly scaled down and deformed to trick the eye (hotel view 1, hotel view 2, in situ). That's because they still want the perspective and movement to be art-directable and outside of the confines of the standard perspective transform. Notably, big objects would have to be placed far away, so far that they'd appear almost static to the viewer, but you actually want that left-right background movement in a fighting game, so they're brought closer so they can move better.
practical result featuring I-no's stage:
GUILTY GEAR Xrd -SIGN-?
- YouTube
In 2D games, you only need to design and draw the part of the stage that is behind the fighters, since the camera is always pointing the same way, but for certain cinematic moves and scenes the camera in Xrd will orbit the action or otherwise change angles so they've actually modeled 360° backgrounds for the stages. Forget that for the story cutscenes that take place out of stages though, the backgrounds in those are billboards or very simple geometry.
Background characters close to the fight are 3D models but distant characters and crowds also are billboards, for obvious performance reasons.
3D game character animation is usually almost entirely bone-based plus maybe shape keys, but that places limits to the kind of movement you can animate, so in Xrd characters have swappable parts to allow them to actually change mesh topology. Example 1, Faust's burst, with his base mesh on the left and the alternate torso on the right. Milia and her multiple living hair shapes in the next three pictures.
Additionally, the bone themselves have a higher degree of freedom than usual, so the characters can fake 2D flaws. For example facial features can move around the face to better match drawings (Bedman in his instant kill cinematic as he'd appear without deformation, the suggested 2D corrections and the final result). It's not enough for the more symbolic anime faces (like round eyes or May's >_< faces) so for those there are swappable heads (and about now you should be realizing the "wide shot heads" we saw in part 1 are a feature of that same system).
Characters also needed to fake or exaggerate perspective in ways changing the camera's field of view couldn't achieve so this was done through allowing bone scaling on all three axes. UE3's animation system can't do that out of the box, they had to code it themselves and cite it as a great advantage to having access to the source code. And once they had that in, that meant they'd also opened the door to all kinds of muscle motions, cartoony squash'n'stretch animations and deformations. A big punch will get a big fist and so on. Bone scaling is now a feature in UE4 and they like to think it's because of Xrd.
May's victory pose and the actual deformation
Playing around with Ky's skeleton
Slayer flexing those arms
Sol in Softimage with his bone scale settings
Since the camera will orbit the action during finishing moves, they needed special effects like smoke and flashes to be plausible in 3D. They tried billboard but it didn't look convincing enough, so after unsuccessfully trying methods that'd save them time like multiple spheres for smoke they just went with brute force. That is to say, each frame of the smoke effect is its own mesh. In the same spirit, a character like Zato, who can basically melt into a smadow, has a completely separate and animated intermediate model for the melting effect. Most of those effects are simple and don't have outlines, they don't cast light on surrounding objects so as to keep the fight clear and readable.
Now, toon shading isn't exactly a new technique and players are familiar with it, yet when footage of Xrd was made public there was considerable debate as whether it was full 3D or not. What "betrays" 3D is not the visual appearance but the movement. Usually when a game uses toon shading it'll still animate at 30 or 60 fps, while TV animation is usually around 12 or 8 fps. 3D can even be a problem with 3D series, you can take the well known example of a popular anime show that uses toon-shaded models of the characters doing mocapped dance routines during the ending credits (just click on one of those), and it feels kinda off or at the very least certainly not like 2D.
Guilty gear is basically animated on a basis of 15fps, not 12 like a TV show, but it's actually a bit more complex that that. In the TV industry, 24fps is considered full animation like the kind Disney use, 8-12 is limited animation. Guilty Gear, due to its videogame nature, uses storyboards that have a basis of 60FPS for the numbering and for each animation frame you specify for how many game frames it should be held. You're not simply lowering the general framerate, you're banishing interpolation altogether! If you take an f-curve based animation and just lower the framerate, it doesn't look like 2D animation, it just looks like a crappy engine spitting out a crappy framerate. So you're really animating pose to pose all the time.
Sol with f-curve animation at 60 FPS for the first half and then the same at 15fps. Neither feels 2d:
? - YouTube
Part of May's storyboard:
http://www.4gamer.net/games/216/G021678/20140714079/screenshot.html?num=034http://www.4gamer.net/games/216/G021678/20140714079/screenshot.html?num=035 (that one has the timeline with frame count for that sequence)
and the resulting poses:
?20?
?? - YouTube
Do note the whole game logic is still 60fps, so even though your jump may only have 4 or 5 animation frames its trajectory will still be a perfect 60fps parabola. Basically your poses are handled like sprites would have been in a 2D game.
A small primer on fighting game internals: in a 2D fighting game the gameplay is usually really just 2d axis-aligned boxes moving around and colliding. A character is really represented by defensive hurtboxes and offensive hitboxes, themselve animated pose to pose, and when a character's hitbox overlaps an opponent's hurtbox it means an attack has landed. No need for more complex collision volumes, boxes are simple and easily tweakable (as they essentially determine which move works against which, balancing a game means moving them around). Hitboxes in red, hurtboxes in blue.
Problem is, gameplay happens on a 2D plane but the models representing it are volumes. That means because of the perspective transform they get distorted (well, more or less sheared, mathematically speaking) the further they are from the vanishing point, which in turn means they don't match their hitboxes (which are on a plane and thus don't get sheared) like they do in the middle of the screen. Specifically, visually they get wider. Since it's important for players to have their characters accurately represent the boxes, a transformation is applied to compensate the effect. The most direct way would be to use a parallel projection (ie no perspective for the characters) but they went for a compromise and sought a balance, ie the characters' projection is a hybrid projection, 30% perspective and 70% parallel. So you still feel perspective change but the effect is actually considerably lessened.
100% perspective
100% parallel
30%/70% hybrid
That technique was pioneered by Street Fighter 4. The correction is strictly horizontal though, the vertical component of the projection is 100% perspective as gameplay still seemed to work fine (notably, the screen area is wider than it is high, so the characters can't distort as much).
Sprite graphics are flat and subject to the painter's algorithm. They behave as layers, everything you draw will just be drawn on top of what was previously there and nothing will ever intersect. 3D models on the other hand operate as volumes and if two characters overlap, they will clip into each other thanks to the z-buffer. You can't just move one character behind the other because the perspective will give it away. What you can do, though, is use a z-offset. Rather than pushing back the character in the world itself, you change his depth value after the perspective transform, pushing him back into the z-buffer (you may remember a z-offset was already used to hide some outlines in the first part). That makes it possible to have two characters conceptually occupy the same space but still not intersect and instead layer like sprites (normal view, top view, as you can see, same space but no intersection). So usually the attacking character is about one meter in front of the opponent. The z-offset goes back to zero for moves like throws that do need characters to overlap. They had fears about whether this'd look alright for big characters, but it does.
In the standard fight view jumping characters move in front of the top gauges, while during cinematic moves all the gauges are on the top layer. Pretty standard fighting game convention there.
To handle fighters facing different directions 2D games usually just flip the sprites. Same for Xrd. Unlike a game like SF4 that remaps poses in the other direction to preserve asymmetrical features, for the sake of emulating the 2D look Guilty Gear's approach is really just to flip the model along the X axis (and change the culling order). However, this time around characters have various things written on their clothes and accessories. All the texts are decals and on their own texture, and when the character is flipped the texture coordinates of that texture are flipped as well, so the text still appears the right way round. The decal texture is greyscale, where neutral gray means no change and going towards white or black will respectively lighten or darken the model, so it's yet another instance of painting with the light level.
Everything's rendered in a 64 bit color buffer (16 bits per channel), and three post-effects are applied. FXAA (without, with), bloom for anything that has luminance over 1.0 (without, with), and a diffusion filter to soften things up a bit (without, with).
Without and with post-effects.
For the arcade version ease of play was the priority so they went with a purely 2D view during fights, but they may include full 3D camera modes in home versions.
They've acquired a lot of stylized rendering know-how on this project, and note that to further extend these 3D techniques it is absolutely necessary to analyse what makes 2D anime work. They think in the future these techniques can and will be applied to other games and genres with even more surprising results.
---
And that's it! I can only hope future 4gamer technical articles will be as informative!
http://www.polycount.com/forum/showthread.php?t=121144&page=10other
http://www.polycount.com/forum/showthread.php?t=121144&page=11
Developer
