Seeing that makes me want to try and do things their way for doing some toon explosions. :0
There are a couple of iOS games and just about every recent anime that uses 3D uses this technique as well. Doing with practical particles just will not work as good as drawing/modeling each frame in this case.
I found some time to do some more translations last weekend, will post later.
Not sure if I'll be able to post, I just registered to get involved in this discussion so here goes...
I've put this discussion in my favourites as I keep checking back to see whats new, and I am really amazed by everyones input so far...its been very helpful to my work on my masters which I'm currently doing, and is a part of my final project...
Im not a technical person, I have been animating in TV for almost 8 years, so I know what to do in that area, but have very limited knowledge in pretty much everything else...
I always was fascinated by toon shaded work, especially stuff like the naruto games, but when I saw guilty gear xrd I was blown away...
so for my final project on my masters, I decided to do my original characters which I have been trying to make a comic out of, into an animation
I still have another 3 months to go, but I wanted to share what Ive been doing which is currently a test and not part of my final piece..
I had a theory that even if the toon shader or whatever setup you have isnt amazing, you can still get some decent quality looking anime/cel shaded looking work if you animate it using the same principles used in traditional anime.
My supervisor suggested I try to reproduce a shot from anime using my characters, and see how close I can get it
its still a wip, but I think its slowly getting there...
as for the shaders Im using, Im currently on softimage (yes the dying software), and im using the plugin 3Dlight (better ink lines I think than standard softimage).
and im only using two passes, the toon pass, and a shadow pass.
I tried using vertex colour to isolate areas for shadow and all that, but it didnt work well for me, so I dropped that.
I still havent done any texturing, I will get to that later.
anyways, just wanted to share and show you how I've been approaching this by looking at the animation.
if anyone wants any more info or stuff, I'd be happy to share more. but I think Ive written long enough for this first post sorry about that!
I tried to post this a few days ago, but I had just joined, so I dont know if its related to that, but anyway, here it is again.
Ive been watching this thread for a while as part of my masters project research stage, and I wasnt sure how successful I'd be at achieving the look I was going for, but I am now more confident about it and I wanted to share with you guys my two cents on it.
before I do, heres the video, its a side by side comparison of Fatal Fury 2, with my own characters which I did in 3D. My masters is split into a bunch of units for my final project, so for one of them, I have to research a topic. I chose 2D animation principles of Anime for a cel shaded look. Heres the video:
Now Ive been looking at the stuff you guys have been saying, and its been very helpful. I used a couple of different approaches, but in the end, I ended up sticking to the standard toon shader, with a shadow pass. The thing I did though that seemed to work for me, was in modelling. Im not sure what its called in other programs, but in softimage, if you select an edge, and then click on "make hard edges", it helps in defining the ink lines. I did that on the areas I wanted lines to show, and would either nudge it in our out a bit so it picks up the line.
But my main focus was on animation, and I wanted to see if I stuck to the frames/poses of a traditional anime, would the look be achieved...
I literally rotoscoped the animation (it wasnt easy with trying to figure out the camera angles and lenses) and tried my best to keep the exact timing and posing.
I dont know if this helps, but I thought I'd share it with you guys.
for me, its mostly in the animation. the modelling and rendering solution definitely play a major part, but the animation is just as important I think.
Ill be doing my final project using these thechniques, so if anyone is interested, I can post it to you guys here as well by the end of august
Has anyone been able to determine from the scans what tricks they used to smooth out any lumps in the cel shading and that sort of thing?
Yes. It's on scan page 43 and is in fact the method that Muzz and Pior debated and tested earlier, ie normals are tweaked by baking them from a proxy model (like that half capsule for Ramlethal's hair).
They also have what's basically a baked ambient occlusion texture that helps them keep always-on shadows on some areas like muscle details (top row on same page).
There seems to be one more thing baked into the textures which I think is a bias/mask for self-shadowing (ie you can define some areas that won't receive cast shadows) but for that it's a bit of a guess (but was mentioned in the translated texture bit as "shadow amount").
I am amazed by the overall consistency of the visuals, given how much the look depends on manually tweaked "tricks". It really shows some amazing teamwork and leadership.
- Manually painted vertex color mask to control edge thickness ;
- Manually tweaked vertex AO mask for self shadowing ;
- Manually created proxy meshes for normals smoothing ;
- Carefully defined "shadow color texture" to give that rich colored look to the parts in shadow ;
- A dedicated head model for closeups - not more detailed, but rather, with more subtle proportions of the facial features compared to the action model seen from far away ;
- UVs being split and carefully nudged for every "hand drawn" line so that there is no visible texture jaggies as the line gets thinner. This one really blows my mind :
[edit - hotlinking seems down ... I was referring to the example images for the lineart effect on Sol's shoulders. Awesome stuff !]
If I understand the article, did they use a texture map to define how easily each part of the body is in shadow? As if they are tweaking the normals on runtime to be in the light or not? If so, it's ingenious.
This is a testament to hard work and co-ordination. Not only is this the best 2d simulation in games, it blows everything i've seen in actual animation before where they are using 3d to blend in with the 2d animation.
Kind of interesting to see how wrong i was with the hand animated shadow map idea haha, but the normal tweaking is way more effective than i thought it could be.
There is no mistaking it, this is a ground breaking achievement regardless of the actually quality of the game. It also goes to show that no fancy shader trick will ever do anime out of the box, as you have to hand design flaws for every part of the model to make the iillusion complete.
It also goes to show that no fancy shader trick will ever do anime out of the box, as you have to hand design flaws for every part of the model to make the iillusion complete.
If I understand the article, did they use a texture map to define how easily each part of the body is in shadow? As if they are tweaking the normals on runtime to be in the light or not? If so, it's ingenious.
Like Pior said, so good!
The normals aren't modified on runtime other than by bone deformations. Instead, there's an ambient term on each vertex (it's artist-painted, not determined by occlusion) plus the ILM texture, as they call it, which adds or substract to the light value to manually push it towards light or shadow. If no one does it before me I'll post a rough translation soon.
Kind of interesting to see how wrong i was with the hand animated shadow map idea haha, but the normal tweaking is way more effective than i thought it could be.
The shadow map isn't hand animated but light is! Each character is only lit by his own local light, which they tweak on a frame by frame basis if necessary, so it still allows for ocntrol without being as time consuming as textures.
The article is the first in a new series of technical articles on 4gamer by Zenji Nishikawa about game graphics, and Guilty gear Xrd, which came out in arcades in february, is an obviously good candidate. There's a lot in common between this article and the recent one in CGWorld but they aren't formally linked AFAIK.
The game runs in UE3, chosen because it was cheap (UE4 had just come out so there were big discounts), mature and stable with a lot of support behind it, and they didn't want to spend tons of time implementing their own engine (they tried on GG Overture and it didn't turn out too well). it'd also make ports to home consoles easy. They didn't have a lot of programmers, so the scripting possibilities were also a big plus since non-programmers could change some parts of the game directly. So they ported their whole gameplay engine from previous games to UE3 so they could use their usual tools with it. 3D modeling program is Softimage, and the same shaders were created in UE3 and softimage so modelers could directly see what the final result would be like.
Team of 25 that includes four programmers, three planners in charge of game design, 12 artists. Add to that a hundred persons they outsource work to.
First concept emerged in 2008, production started in 2011. They made a prototype movie that convinced them to use 3D graphics. Production ramped up to full scale mid-2012 and continued until the end of 2013. They'd experimented with 3D graphics since 2007 but hadn't found them to be expressive enough and there wasn't much of a point in using them over sprites while screen resolution remained low.
The game runs on Sega's Ringedge 2 arcade system, OS is 32 bit embedded windows XP. The arcade version runs at 60FPS in 1280x720 (the PS3 version will be the same while the PS4 version will be in 1080p). It doesn't use MSAA but FXAA for anti-aliasing. The scene budget is about 800K polygons, 550K for the background and 250K for the characters, but each actual character is about 40K, the remainder is for all the stuff they can spawn on-screen.
There are separate heads for wide shots and close-ups. It's not LoD, in that wide shot head don't necessarily have lower poly counts, instead they have features that are still readable and expressive from afar, bigger eyes and all that. See Milia for an example (close-up head, viewed at fight resolution, full fighting character with close up head, wide shot head, fight resolution, full character). Sol, the hero, has 460 bones, though some characters use up to 600. Faces have 170 bones, with a lot of them being used to change the face shape to look more 2D.
They use forward rendering, not deferred, though there's something about a z prepass. That means each character is rendered four times (z and color, once for the outline mesh and once for the actual mesh). About 160mb of texturs per scene, 70-80 different shaders, all made in UE.
Physical accuracy isn't a factor, everything is at the service of the anime look. Backgrounds have no real lighting, all the shadows are painted in. There is one light per scene that's exclusively used to cast character shadows on the ground. Characters don't receive light from the environment, instead they each have their own local light source, that is animated on a frame by frame basis to get the best look (environment lighting looking subpar, local lighting looking good).
The basis of the shading is a classical cel shader, ie if incident light is over a threshold value the surface is lit otherwise it's shadowed, but the shadows will give away the polygonal nature of the character so there's a number of measures to affect the light response and make it more anime-like.
R channel of the vertex color is a shadow bias, ie it's like ambient occlusion except artist-directed. Pixels that have a lower value will be more easily in shadow (occlusion term, model without it, model with it). There's a second shadow bias in the green channel of a lighting control texture (ILM texture) that allows to make areas always be lit or shadowed and essentially can fake self-shadowing. Characters only cast shadows on the ground, not on themselves.
Vertex normals are adjusted to simplify the light response and eliminate small scale polygonal shadows. Apparently the export from Softimage to UE3 automatically regenerated normals so they had to rewrite it. Faces were adjusted by hands, other parts by transferring normals from proxy objects, with the examples of Sol's pants or character hair in general.
Specular highlights are controlled by the R and B channels of the ILM texture. R is specular intensity, B is specular size. See this close-up of I-no where the left side and right side of her top have different specular size
That takes care of the outlines, which occur on edges, but not inner lines. Just drawing them into the texture would show texel jaggies or blurry areas, so instead they used a trick they called "Motomura lines" (Motomura being the lead modeler and tech artist): all the lines are drawn strictly axis-aligned in textures, and instead you use the texture coordinates to control direction and thickness, including the start and end of lines. That way they stay sharp no matter the distance, but you'll even benefit from the texture filtering. Outlines are drawn in the alpha channel of the lighting control texture.
There'll be a second part covering animation but that's all for now.
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).
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.
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.
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.
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 2D 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:
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.
As we've seen in the previous part the light is adjusted on a frame by frame basis but really, any little tweak will be. In particular, in cinematic moves where the camera moves around even the character's nose may be moved around to look perfect on each frame.
May's instant kill cinematic move. You have to speed it up 2x to get the actual arcade speed:
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.
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.
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).
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!
Replies
www.youtube.com/watch?v=Qqm7BFDuClE
lookin forward to seein more of that pdf translated!
Someone just now linked me this thread :thumbup:
Unreal Engine 4, 6 shadow textures, detect light angle and change the texture and alpha using If Nodes and Lerp Nodes
Quick GIF with very few frames only to show the effect, the transition is much more fluid on the engine.
I found some time to do some more translations last weekend, will post later.
I've put this discussion in my favourites as I keep checking back to see whats new, and I am really amazed by everyones input so far...its been very helpful to my work on my masters which I'm currently doing, and is a part of my final project...
Im not a technical person, I have been animating in TV for almost 8 years, so I know what to do in that area, but have very limited knowledge in pretty much everything else...
I always was fascinated by toon shaded work, especially stuff like the naruto games, but when I saw guilty gear xrd I was blown away...
so for my final project on my masters, I decided to do my original characters which I have been trying to make a comic out of, into an animation
I still have another 3 months to go, but I wanted to share what Ive been doing which is currently a test and not part of my final piece..
I had a theory that even if the toon shader or whatever setup you have isnt amazing, you can still get some decent quality looking anime/cel shaded looking work if you animate it using the same principles used in traditional anime.
My supervisor suggested I try to reproduce a shot from anime using my characters, and see how close I can get it
its still a wip, but I think its slowly getting there...
as for the shaders Im using, Im currently on softimage (yes the dying software), and im using the plugin 3Dlight (better ink lines I think than standard softimage).
and im only using two passes, the toon pass, and a shadow pass.
I tried using vertex colour to isolate areas for shadow and all that, but it didnt work well for me, so I dropped that.
I still havent done any texturing, I will get to that later.
anyways, just wanted to share and show you how I've been approaching this by looking at the animation.
if anyone wants any more info or stuff, I'd be happy to share more. but I think Ive written long enough for this first post
anyways, here's the link to the test:
[ame="
Bader
Ive been watching this thread for a while as part of my masters project research stage, and I wasnt sure how successful I'd be at achieving the look I was going for, but I am now more confident about it and I wanted to share with you guys my two cents on it.
before I do, heres the video, its a side by side comparison of Fatal Fury 2, with my own characters which I did in 3D. My masters is split into a bunch of units for my final project, so for one of them, I have to research a topic. I chose 2D animation principles of Anime for a cel shaded look. Heres the video:
[ame="
Now Ive been looking at the stuff you guys have been saying, and its been very helpful. I used a couple of different approaches, but in the end, I ended up sticking to the standard toon shader, with a shadow pass. The thing I did though that seemed to work for me, was in modelling. Im not sure what its called in other programs, but in softimage, if you select an edge, and then click on "make hard edges", it helps in defining the ink lines. I did that on the areas I wanted lines to show, and would either nudge it in our out a bit so it picks up the line.
But my main focus was on animation, and I wanted to see if I stuck to the frames/poses of a traditional anime, would the look be achieved...
I literally rotoscoped the animation (it wasnt easy with trying to figure out the camera angles and lenses) and tried my best to keep the exact timing and posing.
I dont know if this helps, but I thought I'd share it with you guys.
for me, its mostly in the animation. the modelling and rendering solution definitely play a major part, but the animation is just as important I think.
Ill be doing my final project using these thechniques, so if anyone is interested, I can post it to you guys here as well by the end of august
https://www.youtube.com/watch?v=cnIetPo9N6Y
I liked those softimage shots from Aksys, it was hella clean even outside the engine. Makes me want to try achieving that.
It looks so much better in person. All those existing scans are terrible quality.
I was considering getting it professionally translated.
http://www.cgsociety.org/index.php/CGSFeatures/CGSFeatureSpecial/the_making_of_bet_shean
Another visually stunning fight where the cinematic sequence feels like a real anime fight.
(requires Chrome set to 2x speed, played from the actual Youtube page of the video)
[ame="
The Naruto games have always had excellent 3d work. I buy the games for that alone.
(At least I think they are new, sorry if they have been posted already)
http://www.gamespot.com/videos/e3-2014-guilty-gear-xrd-sign-ramlethal-vs-bedman/2300-6419652/
http://www.gamespot.com/videos/e3-2014-guilty-gear-xrd-sign-ky-vs-millia/2300-6419650/
Has anyone been able to determine from the scans what tricks they used to smooth out any lumps in the cel shading and that sort of thing?
Yes. It's on scan page 43 and is in fact the method that Muzz and Pior debated and tested earlier, ie normals are tweaked by baking them from a proxy model (like that half capsule for Ramlethal's hair).
They also have what's basically a baked ambient occlusion texture that helps them keep always-on shadows on some areas like muscle details (top row on same page).
There seems to be one more thing baked into the textures which I think is a bias/mask for self-shadowing (ie you can define some areas that won't receive cast shadows) but for that it's a bit of a guess (but was mentioned in the translated texture bit as "shadow amount").
http://www.4gamer.net/games/216/G021678/20140703095/
That part's only about rendering, there'll be another one about animation.
- Manually painted vertex color mask to control edge thickness ;
- Manually tweaked vertex AO mask for self shadowing ;
- Manually created proxy meshes for normals smoothing ;
- Carefully defined "shadow color texture" to give that rich colored look to the parts in shadow ;
- A dedicated head model for closeups - not more detailed, but rather, with more subtle proportions of the facial features compared to the action model seen from far away ;
- UVs being split and carefully nudged for every "hand drawn" line so that there is no visible texture jaggies as the line gets thinner. This one really blows my mind :
[edit - hotlinking seems down ... I was referring to the example images for the lineart effect on Sol's shoulders. Awesome stuff !]
So good !!
Like Pior said, so good!
This is a testament to hard work and co-ordination. Not only is this the best 2d simulation in games, it blows everything i've seen in actual animation before where they are using 3d to blend in with the 2d animation.
Kind of interesting to see how wrong i was with the hand animated shadow map idea haha, but the normal tweaking is way more effective than i thought it could be.
There is no mistaking it, this is a ground breaking achievement regardless of the actually quality of the game. It also goes to show that no fancy shader trick will ever do anime out of the box, as you have to hand design flaws for every part of the model to make the iillusion complete.
The normals aren't modified on runtime other than by bone deformations. Instead, there's an ambient term on each vertex (it's artist-painted, not determined by occlusion) plus the ILM texture, as they call it, which adds or substract to the light value to manually push it towards light or shadow. If no one does it before me I'll post a rough translation soon.
The shadow map isn't hand animated but light is! Each character is only lit by his own local light, which they tweak on a frame by frame basis if necessary, so it still allows for ocntrol without being as time consuming as textures.
Original article there
The article is the first in a new series of technical articles on 4gamer by Zenji Nishikawa about game graphics, and Guilty gear Xrd, which came out in arcades in february, is an obviously good candidate. There's a lot in common between this article and the recent one in CGWorld but they aren't formally linked AFAIK.
The game runs in UE3, chosen because it was cheap (UE4 had just come out so there were big discounts), mature and stable with a lot of support behind it, and they didn't want to spend tons of time implementing their own engine (they tried on GG Overture and it didn't turn out too well). it'd also make ports to home consoles easy. They didn't have a lot of programmers, so the scripting possibilities were also a big plus since non-programmers could change some parts of the game directly. So they ported their whole gameplay engine from previous games to UE3 so they could use their usual tools with it. 3D modeling program is Softimage, and the same shaders were created in UE3 and softimage so modelers could directly see what the final result would be like.
Team of 25 that includes four programmers, three planners in charge of game design, 12 artists. Add to that a hundred persons they outsource work to.
First concept emerged in 2008, production started in 2011. They made a prototype movie that convinced them to use 3D graphics. Production ramped up to full scale mid-2012 and continued until the end of 2013. They'd experimented with 3D graphics since 2007 but hadn't found them to be expressive enough and there wasn't much of a point in using them over sprites while screen resolution remained low.
The game runs on Sega's Ringedge 2 arcade system, OS is 32 bit embedded windows XP. The arcade version runs at 60FPS in 1280x720 (the PS3 version will be the same while the PS4 version will be in 1080p). It doesn't use MSAA but FXAA for anti-aliasing. The scene budget is about 800K polygons, 550K for the background and 250K for the characters, but each actual character is about 40K, the remainder is for all the stuff they can spawn on-screen.
There are separate heads for wide shots and close-ups. It's not LoD, in that wide shot head don't necessarily have lower poly counts, instead they have features that are still readable and expressive from afar, bigger eyes and all that. See Milia for an example (close-up head, viewed at fight resolution, full fighting character with close up head, wide shot head, fight resolution, full character). Sol, the hero, has 460 bones, though some characters use up to 600. Faces have 170 bones, with a lot of them being used to change the face shape to look more 2D.
They use forward rendering, not deferred, though there's something about a z prepass. That means each character is rendered four times (z and color, once for the outline mesh and once for the actual mesh). About 160mb of texturs per scene, 70-80 different shaders, all made in UE.
Physical accuracy isn't a factor, everything is at the service of the anime look. Backgrounds have no real lighting, all the shadows are painted in. There is one light per scene that's exclusively used to cast character shadows on the ground. Characters don't receive light from the environment, instead they each have their own local light source, that is animated on a frame by frame basis to get the best look (environment lighting looking subpar, local lighting looking good).
The basis of the shading is a classical cel shader, ie if incident light is over a threshold value the surface is lit otherwise it's shadowed, but the shadows will give away the polygonal nature of the character so there's a number of measures to affect the light response and make it more anime-like.
R channel of the vertex color is a shadow bias, ie it's like ambient occlusion except artist-directed. Pixels that have a lower value will be more easily in shadow (occlusion term, model without it, model with it). There's a second shadow bias in the green channel of a lighting control texture (ILM texture) that allows to make areas always be lit or shadowed and essentially can fake self-shadowing. Characters only cast shadows on the ground, not on themselves.
Vertex normals are adjusted to simplify the light response and eliminate small scale polygonal shadows. Apparently the export from Softimage to UE3 automatically regenerated normals so they had to rewrite it. Faces were adjusted by hands, other parts by transferring normals from proxy objects, with the examples of Sol's pants or character hair in general.
Specular highlights are controlled by the R and B channels of the ILM texture. R is specular intensity, B is specular size. See this close-up of I-no where the left side and right side of her top have different specular size
Shadow color is controlled by the SSS texture. Basically on a lit surface the response will be something like (light color + ambient color) * texture color, while in shadow the response is ambient color * texture color * SSS color, so you can tint the shadows. Don't read too much into the name since it doesn't actually do any scattering.
There's no post effect at all for the outlines. They're generated by drawing a dark, expanded version of the model with front face culling instead of back face culling then drawing the normal model over it, a classic method, however the way most use it isn't expressive enough. So, the Alpha channel of the vertex color controls outline thickness (Sol without line thickness and with it, Venom without and with), but not just that, the green channel controls how much it scales with distance from the camera, and the blue channel is a Z-offset. This offset will push the vertex "back" into the z-buffer, effectively making the outline invisible when in front of close objects. It's used to simplify the outlines of hair and small features, see Chipp's hair without z-offset and with it.
That takes care of the outlines, which occur on edges, but not inner lines. Just drawing them into the texture would show texel jaggies or blurry areas, so instead they used a trick they called "Motomura lines" (Motomura being the lead modeler and tech artist): all the lines are drawn strictly axis-aligned in textures, and instead you use the texture coordinates to control direction and thickness, including the start and end of lines. That way they stay sharp no matter the distance, but you'll even benefit from the texture filtering. Outlines are drawn in the alpha channel of the lighting control texture.
There'll be a second part covering animation but that's all for now.
Hell maybe throw down the gauntlet in a civil war.
Maybe Pior and Haz?
Dammit pior, i need more personal art from you, I'm feeling deprived here
http://www.4gamer.net/games/216/G021678/20140714079/
[ame="
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:
[ame="
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
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 2D 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:
[ame="
Part of May's storyboard:
http://www.4gamer.net/games/216/G021678/20140714079/screenshot.html?num=034
http://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:
[ame="
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.
As we've seen in the previous part the light is adjusted on a frame by frame basis but really, any little tweak will be. In particular, in cinematic moves where the camera moves around even the character's nose may be moved around to look perfect on each frame.
May's instant kill cinematic move. You have to speed it up 2x to get the actual arcade speed:
[ame="
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!
I want to buy you a beer for doing that!
Thanks Chev you really rock.