I am currently a third year at UOIT's Game Dev Courses. This blog is for advanced game programming courses such as Computer Animation+ Algorithm, Intermediate graphics and game engines.
In this blog we are talking about toon shading, its uses and how to create it. This is part 2 of my blog about toon shading, this time we are going into edge detection. For part 1 about cel shading click here.
What is edge dection
Edge detection used when we want to outline a specific object in the scene, whether it be for visual appeal or for game play features. The outline is usual a black line around the object, however sometimes it can be different colors depending on its purpose.
Uses of Edge detection
The first use of edge detection is for enhancing the visual appeal/style of the game. This is gives the game a more comic book or Anime/Manga feeling to it if designed right. In the picture above we are seeing edge detection being applied to borderlands from 2K games and Gearbox studios. Edge detection here allows the NPC and gun to stand out from the environment.
The second use of edge detection would be for gameplay uses, where it would indicate to the player of something important. This would literally highlight the object of interest, and inform/warn the player of this object. In this picture, from Left 4 Dead, a Valve game, we are having this highlight to inform the player of other allied players, so we don't shoot them. However L4D goes beyond that and uses the highlighting as in game feed back to tell the status of their allies. Whether they be yellow for being in danger, or red for being low in health, this is an excellent implementation .
How To Use Edge detection
Ask yourself, how do you detect where edges of objects end in real life? Do we say there is an edge when there is a solid change in colour? If we did that to the program it would detect all the changes in colour, and create edges there like in the picture below. Thats not what we want, despite it looking cool :D
To properly do this we need the normals of each object to help us out. For a quick review, normals are a vector that which is can tell the orientation of the object, and commonly used for lighting. Normals are of the the object are the right way to go, as the program can now properly tell where each object ends, and where a new one begins.
However to do edge detection, we also need to use an FBO, click here for my tutorials on FBOs. The reason being we need the scene's normals, however it is more efficient if we use a shader prior edge detection, which will output the normals of all the objects in the scene. We will apply this shader to the full screen quad, which the FBO is being applied to, after rending the scene to the FBO. This makes it a "post processing of the scene" where we apply the edge detection for all the objects.
Hope you learned a thing or 2 from this, this blog took a deal of effort to write. Note doing this to individual objects, like how we did it for the player in L4D, is a totaly different story.
When I say the words "Toon shading, what comes to mind?"
A cartoon / anime series? A game based off this series? If you though of the images below you are correct!
Toon shading is a 2 step process which involves 2 thing Cell shading, and Edge detection
This week I'll focus on how to do Cell Shading, the 1st part.
Cel shading vs normal shading
Normally with "shading" on the object in the scene, the dark shadow on the object will linearly(gradually) increase as the object. As shown below in the graph, as the object's distance from the light decreases on the object.
However with cell shading we want this type of graph.
This will give us "blocks" of shading on the objects due to the fact its broken up or a "piece wise function. To help with this process we would sample from the picture below to give the cel shading its effect.
And- voila, we are done our with our shader, getting the effect to the image below.
For a continuation of toon shading and edge detection, click here. Sorry I couldn't get any deeper into the code, however time is currently of the essence, hopefully you still get the gist of it.
In earily 2010 EA was hyping up for the release of its
anticipated Command and Conquer 4, the last installment of the highly renowed
Tiberium RTS series.For one of its
promotional acts, they decided to release one of the older games in the series
Command and Conquer (2):Tiberian Sun, released in 1999. I immediately downloaded
the game as soon as it was released, due to its sci-fi nature. This was also
due to the fact I enjoyed the 1st C&C, developed by Westwood
studios, despite playing it 14 years after its release.
Marco Molecule
Interesting in C&C: Tiberian Sun not only were some of
the units 2d sprites, but also units that were 3D volume pixels(VOXEL). This
was the first time I discovered what a voxel was, essentially a 3d version of a
pixel. A voxel is point in the data structure, or our case the 3d model, which
contain information about its color, opacity, and other visual aspects. Unlike
points, their position aren’t directly expressed, therefore their position in
the object is interpolated. From these properties, voxels are good at creating
3d models which are made of multiple materials, or contain MANY strange
contours, such as this marco molecule. Because of all these features, Voxels
were large in their sizes, however we have developed compression and
manipulation methods to reduce these sizes.
In the game, infantry units were designed to be 2D sprites,
while mechanical units were 3D Voxels. This design choice was most noticeable,
as vehicles looked different from infantry. Animation would also look
different, where voxel units could rotate 360 degrees, the pixel were unable
to. Unfortunately this design choice was as the result of Westwood’s new publisher,
EA which pushed for the game to have a earlier release date. Though full voxel
units were present in future games, like Red Alert 2, a lot of gameplay
features, were lost due to this push.
Crysis environments using Voxel
Despite the fact voxels are not used widely today, as they
once were in the early 2000, they still have a major application in the world.
Voxels are used for rendering in the medicial world, and surprisingly still in
the videogame world. The CryEngine 2 and 3, uses a combination of height maps and
voxels to generate its terrain. Unreal engine 4 uses real-time global
illumination with full secondary lighting and specular reflections with voxel raycasting. In CT scans,
values stored in voxels are based on the opacity of material to X-rays. Since voxels
can contain multiple scalar values ; in ultrasound scans with density and
volumetric flow data are captured as separate channels of data relating each
voxel in the data structure.
In the end, despite the graphical inconsistency, I still
enjoyed the game for many reasons. One of which was the atmosphere, enhanced both
by the music, graphics, and great cut scenes. The game’s sci-fi and post-apocalyptic
atmosphere, transferred over to its sequel, Command and conquer 3: Tiberium
wars. Despite playing a 10 year old game, the game still was fun, and memorable.
During the early 2007, the new generation of consoles had just begun with the PS3 and Wii less than a year old. With this the year was an exciting time for the PS3 to show case upcoming games which utilize its powerful Cell Processor, and prove its power to the industry. One of these games that caught my eye was Ratchet and Clank Future:Tools Of Destruction. Not only because the PS2 games R&C were on of my favorite games, but also because of it unique animation/visual style.
Here is a pretty hilarious cut scene early on in the game, which should be enjoyed by anyone Exaggeration is used in the time it takes for ratchet to fall asleep, as Ratchet gets knocked out abruptly. Exaggeration and staging are used again to knock out Clank, with the camera shifting to show the glove, and the silly "Bong" sound. Not to mention there is a follow through where clank falls on the chair, fast asleep and slouching. Staging used later with the cloud and dream like atmosphere to make it mysterious. Also there is a focus on the main building where clank must go, which is seen in this part a lot. Finally timing is also used the 3rd part of the cut-scene, to make it look like clank is disoriented and just woken up from a dream. Also notice that Ratchet's face is being squashed and stretched as he talking to Clank, giving the audience the feeling hes yelling at Clank. All of this gives this scene a great cartoonish feeling.
Here's another great in game cut-scene. Staging is used here,first with the fact that we see the camera zoom in on his face when we hear the 2 robots voices, and rachet looking in anticipation of each direction the robots. Also with staging ratchet's position seems to be inbetween the two old robots, but he was actually behind them. When Tawlyn (the girl) comes in, she shows anticipation of touching down on the ground when her jet packs were done. Following through is done on Tawlyn's hair, on the robot's antenna and armor as they react according to their movements. Tawlyn shows exaggeration through her face, and body when she tells of how she dislikes the sounds of bodies popping in airlocks. A bit of timing shows awkward Tawlyn feels that Ratchet doesn't know his race. Finally Clank's abrupt but right answer appeals to the audience how witty and intelligent he is.
Now for some gameplay
One of the game's major praises was how the game engine could handle huge amounts of the game's currency, Bolts, at once. Theses blots, seen to be done through particle effects, can be seen to spawn every time ratchet breaks boxes, or later on destroying enemies. These bolts once, spawned, will be attracted to Ratchet, flying towards him in a huge swarm. However through careful analysis, not all the bolts will go to Rachet the same way. Some will go directly, while other arch around the other bolts, and some will even come after all the initial bolts have come.
There seems to a bolt manager involved here, only allowing a specific amount of bolts to be attracted to rachet at once, stored in some sort of linked list. Once Ratchet collects his bolt(s), these bolts will be destroyed, removed from the list and give Ratchet their value. Once this happens the manager looks for any other bolts which are collected by the player, but have not yet been attracted towards the player and activates them. Also this manager will constantly look for any bolts within the range of Rachet, checking if the player has collected them or not.
When Ratchet collects a large golden bolt, there some designs of animation shown here. Large golden bolts give you money, however they main purpose of it is a collectable used to unlock awesome cheats. Collecting the bolt at 0:52 of the video shows 3 animation techniques of anticipation, appeal and secondary action. The anticipation is Ratchet getter ready to accept the bolt, secondary action is him cheering after he has received the bolt, and appeal is the 2 previous techniques, combined with the music.
The animation technique "follow through and overlapping action" used for ratchets ears/tails and the smuggler hat when he speaks to ratchet. If you look carefully when ratchet walks, his tail and ears will sway and flap in the wind, giving him life. Also the smuggler, in the upcoming cut scene, will have his head moving alot, similarly his hat will react in a similar manner.
At 2:30 a cutscene starts and with every word they say, they use body language, as a form of exaggeration, convey their emotions. At 2:57 when Clank asks who didn't kill the last cragmite, the camera zooms in as act of staging, to emphasize how important the Lombaxes are.
Finally we can see animation being incorporated as a game mechanic after the cutscene. 4:38 as the little cop bots seem to notice the player, there is an animation executed, to show anticipation of the bot charging Ratchet. Also at 5:00 if you pay attention to the robot fish guards, they have a secondary animation of the fishes jumping up and down after their suit is destroyed. In fact if you play the game you can even kill these fish for extra gold.
With all these examples of good animation, the game won many praises from reviewers and currently holding a 89 on Meta critic. The game had a great engine which gave it a visual style said to be similar to Pixar movies. This game was a great edition to the PS3's small library at the time, and was one of the reasons why I bought a PS3 later on in the year.
When I was younger, one of my first played games was Civilization 3, a game of epic scale, and immense value. In 2005, I saw on the store flyers that my favorite game had been given a equal and I immediately went out to purchase this game. At first I was overwhelmed by the amount of new concepts that they had implemented, but there was a force which kept pushing me forward, to keep playing. One of the driving factors was how beautifully the game had evolved, from plain isometric game in Civ3, to a living and breathing world in Civ4.
One thing that was improved was the units, not only did they have new animations, but now they also spoke too. With this improvement, the developers used a new 3D engine, Gamebryo, instead of using the existing one. With the units, they are basic 3D models, mostly likely animated using key frame animation, due to the number of idle animations which they have. One positive advantage of 3D,as the developer said, was it was easy to modify units for different scenarios. For example if we wanted to make a race specific version of the archer unit, we could just apply another texture for the skin and armor.When a unit is selected, there is a 3d circle rotating around that unit, to do this the circle rotates around the center of the tile, which is where the unit is centered.
With the units, they truly show their animation when they are in combat. First off the unit's model will rotate on the spot to face the direction of the unit which they are being attacked from, or attacking. In the situation the unit is mechanical, a tank or helicopter, and is losing the fight, its textures will change to show it is more damaged with bullet holes and fire. Fire is shown as a particle effect when the units are dying/dead, always rising from the center of unit's body. When the unit dies, it will show its death animation, made using keyframes, usually resulting in their body falling to the ground or blowing up. Strangely enough the infantry in general all share a similar death animation.
Finally the game's immersiveness was fully enhanced with the living and breathing environments of Civ 4. In Civ 4 the developers decided to give life to their game tiles, whether it be the many land masses, the improvements in the , or all 32 resources by animating them. As seen in the video, the forest tile seems contain many tree objects, and these trees will disappear if it is in the way of a road or a unit is on the tile. With resources they will have 2 different animations, 1 without being used and one which is not being used, such as the pigs in the video. With time, technology advances, and land improvements will change, such as a aluminum farm, instead of wooden shed. For this change, a model change is involved whenever a civilization advances in the game's 6 technological eras.
With all this in mind, the creators wanted a more modifiable game, to allow fans to create easier, but better Mods. Game data and rules are stored in Civ 4's XML files, and a SDK for the game was released in April 2006 to allow for AI customization. Major parts of the interface, map generation, and scripted events are written entirely in Python and can be customized. With this, 3 expansion packs, containing new scenarios, units and Civilizations were released, on a yearly basis along with the dozens of amazing mods.
That year Civilization 4 receiving many near perfect or perfect reviews, while being nominated for many awards including best PC game and game of the year.The jump from Civilization 3 to 4 was such a great leap, it sets a great example of what any game should do for an excellent sequel. In the end Civilization 4 is truly an amazing game, one which will suck you in and make you waste hours on the game. A game which will truly make you say the words
