I rarely post these "Making Of" articles because it is too much effort and I am very lazy to write up a huge long post. However, I always enjoyed behind the scenes types of things. Reading articles about how something was created, watching people speed modeling or speed drawing, documentaries of a games development cycle, etc. I always found these interesting, entertaining and informative. I enjoy seeing other peoples workflows and today I will share mine.
Recently I posted a very short animated video to my YouTube channel called
"The Samer Khatib Show"
The final result
What is this?
The video starts off by showing a fairly bizarre looking TV talk show kind of set.
There are two couches which have wooden mannequins awkwardly sitting on them, a desk with the snowconesolid mascot (My Logo) and radio sitting on top, and a bunch of misplaced props such as trees, bushes, and an odd looking vehicle in the background. The camera then cuts to the desk and virtual Samer Khatib (snowconesolid) quickly rises out from the ground. The character begins talking and claims to be the greatest indie game developer ever.
On the set of The Samer Khatib Show
The remainder of the video focuses on the character as he brags about how good he thinks his games are. Virtual Snowconesolid is a new alternate internet persona I created which represents a very exaggerated, big headed, egocentric version of my real self as a game developer. A parody character to occasionally make fun of the indie game scene, video games in general, off topic subjects and myself of course.
Freeze!
This is the first appearance of the character and the so called "Samer Khatib Show". The video isn't perfect and the voice over is slightly out of sync, the video is very short, and animations could be better. There is a lot of room for improvement. This is just a first test run of hopefully the start of something new and wonderful as I dive into the world of YouTube content creation. With that said, I really like how it all turned out and I plan doing a lot more short YouTube skits as well as re-use the character for many game projects in the future for years to come. So "The Samer Khatib Show" wasn't a one time thing and this isn't the only time Virtual Snowconesolid will make an appearance.
Creation
Although short, a lot of time and effort went into creating this 45 second animation. As I was working on it, I constantly stopped every couple minuets to take a screenshot of where I currently was at in the project so that I could later share the experience here on the blog.
In the past, these "Making Of" articles I have written up only consisted of how I created a certain character model. Today, I will cover the entire project. Everything from modeling the character, setting up the scene in the Unity engine to rendering out a complete animation for YouTube.
So grab some coffee because this is going to be a long post.
The Beginning : A Rough Sketch
We live in a time where digital art is a more superior format. We have all these technologies to help us create literally anything we want. However, as much as I love the digital format I still believe that traditional pencil and paper is one of the most powerful set of tools an artist or anyone really can use. When you grab a blank sheet of paper and a pencil you experience true creative freedom without any limits. You can quickly brain storm your ideas, take quick notes, random thoughts, mindless fun doodles and so on! This is generally where all ideas usually start. Born on paper and then evolve into something bigger. Okay sorry, i'm just rambling now and getting off topic. Anyway, here is just a quick rough sketch of the character before becoming a full 3d animated model.
Okay, obviously nothing really fancy. I didn't want to spend too much time just doodling around. Kind of a generic looking character design but it helps to have something to look at and reference off of when you go into your 3d software to begin modeling. It isn't necessary either. I don't always sketch a character on paper then model it. Actually, most of the time I just go straight into Blender3D and begin modeling. In this case however, I knew that I wanted to make a character that was more of a virtual version of myself and not end up being a character that came together from random thoughts such as Lana The Lemon from Potato Thriller.
Modeling until it's juuussst right!
I'm going to be skipping over a couple of the basic steps in this section because they are just the same steps I listed in my other "Making Of" posts. I am only going to be talking about the more important steps of the creation process. If I mention something and don't show a picture of it and you want to see what I am talking about check out some of my older making of articles like this one or this one or thiiisss one. Anyway, for this particular character model I used the box modeling technique. And for those of you who aren't familiar with the terminology, the box modeling technique is pretty much where you poly model the entire character model from just a basic cube. I mentioned in the past that this is my preferred 3d modeling style opposed to other techniques such as sculpting the character because I feel like box modeling is the fastest way to get a character created and I feel like I am more efficient when I poly model my 3d models. Just a personal preference though. Everyone has their own way of doing things.
The Head
When making a character model, the first thing I start working on before anything else is the head and face of the model. I find that the head is usually what takes the most time when creating a character. Also, I feel like the head is the most important part because the head/face are really the most distinctive features of the model. This is what will truly define the model and make it recognizable. Like I said, I started with just a basic cube. Modeled a head, features like eyes, mouth, nose, teeth, ears and a really bad hairstyle.
I know what you are thinking, this looks really weird and nothing like the final character shown in the images at the beginning of this post. Keep in mind, this was still the first iteration of the model and an early work in progress. I spent a lot of time tweaking the entire model until it felt just right. Keep reading to see its evolution.
All The Naked Glory!
Skipping ahead, I later modeled the rest of the body and rigged the character with Blender Rigify. You may have also noticed that the model has actual colors on it and isn't just the bland default grey that all 3d models start off as. I kept on laying down base colors as I modeled. This is just me trying to plan ahead for when I go into texturing the model. As I mentioned earlier, check out my older Making Of posts to see the steps I just listed above (rigging, base colors, etc) in more detail.
beautiful naked pose
Screenshot of weight painting to correct some issues the rig had so that it can deform properly.
Fabulous Flowing Hair!
After modeling the body and creating a rig for the character I decided to revisit the head area and begin working on that some more until I liked the way it looked. If you noticed in the images above, the character is suddenly bald. Where did his hair go? I didn't like the original hair I designed. I scrapped that and then began just modeling a variety of different hair styles.
As of this post, I have created 4 different hair pieces that the character can switch out and wear. I plan on creating more hairstyles for future use as I continue using the character for different projects.
Wigs for everyone!
The first hairstyle is the manly samurai warrior man bun
Still naked at this point by the way
The second one is called "The Charlie Sheen" because I used his hair as inspiration. This hair style is based off of his typical long bangs in the front cleanly trimmed everywhere else.
The third style is the old English fancy rich boy cut. I don't know why I call it that, but it just seems like a fancy type of hair style.
And finally the "Toon Link Wig". This is the forth hair style and character default. Probably the one I will use the most. The hairstyle is shamelessly inspired off of Toon Link's hair style as he appeared in the legend of Zelda Wind Waker.
Wire Framez
For 3d nerds, here are the only two screenshots I took of the wire frame for the model. I put this after the hair section, because I took these wire frame screenshots of the model wearing the samurai hair.
The Nose Job
As I was working on this character, I would sometimes take a break to share the wip screenshots on Twitter or on the Unity forums. A lot of people where making fun of my nose. Some calling me names like birdman, others making fun of how big and pink it was. This hurtful comments got to me and made me feel very insecure about my nose. Everyone thought I was ugly. After having my feelings hurt, I decided to make a dramatic change in my life. I had to get rid of my hideous natural nose, do what all the celebrities do and get a new nose! I got a nose job and it changed my life forever!
Seriously though, thanks everyone for the feedback about the nose. I'm glad I listened to you guys. Anyway, I removed his original and remodeled one to be more consisted with the overall design of the character. His new nose became the same color as his skin and actually attached to his face. This was a good improvement.
But.. part of me kind of liked the original awkward big nose I made for him. I was sad to see it go. I still wanted that nose. So what did I do? Instead of just scrapping it, I decided to turn his original big nose into a pair of novelty goofy glasses that he can wear anytime!
SEE!
Also, I could re-use these new glasses I created as just a regular pair of glasses and mustache as well.
by the way, you might of noticed the color in these images are a bit better then the previous ones. His hair and skin doesn't look shiny. There is some pink on the tip of his nose and ears, etc. That's because I had done some texture work at this point. The idea for the goofy glasses was actually one of the last things I created for the model. So when I took these screenshots, I already had done a bunch of other things which I will get into. I am just trying to keep a consistent blog post here.
Clothes and Customizable character
Jumping back to before I textured the model. I created clothes for the character because he has been naked for a very long time. Unlike most of my other character models, I had customization in mind for this one. I plan on using this character model for more than one project and long term use. So, of course I might want to be able to easily change him for future purposes. When it comes to character models, especially game character models, its a very common practice (or was a common practice) for the entire model to be part of one unified mesh. Maybe these days it isn't necessarily as much of an important practice as it was back around older gen hardware. For this model, since I want to have the ability to just jump back one day and change something, I decided to leave every piece a separate part. So for example, the head isn't actually connected to the rest of the body its a separate model. The feet are separated so they can be swapped out with shoes, the torso can be swapped out with just a shirt so it doesn't have to render out the polygons of the parts that won't show but it will still give the illusion that the model is wearing a shirt over his body, etc. Everything works perfectly with the rig and can just be swapped out with a different piece of clothing or accessory at anytime. The character is fully customizable.
Beautiful glowing skin! - Texturing
As I mentioned earlier, I was laying down base colors along the way as I modeled. This helped speed things up with the texturing process. I kept things simple. I wasn't aiming to create a realistic character. I was creating a cartoony character. After all the modeling was complete, I began marking seams on every single mesh. Then I unwrapped to a 1024x1024 texture map, layed out my uvs and baked out the base colors I had setup. Then I baked out the Ambient Occlusion (AO) to a separate map.
Once the AO map was finished, I went into Gimp and combined my base colors and AO map into one texture map. Took it back into blender and cleaned it up a bit. Here is what the final texture map looks like. (Note: this is only for the skin, I also created textures for the clothes and other stuff.)
The final textured character model in Blender.
Face Expressions
This character model is especially unique compared to some of my older models because for the first time ever I actually have animated facial expressions! I am very happy about this because in the past I would always model my character models with just one constant stiff face expression. It made them seem dull and unbelievable. However, this time I knew I wanted to make the character actually appear to be talking and that I was going have close up cuts on the face. Obviously as you can see in the animation the facial expressions are still a bit awkward. Definitely not Pixar animation quality. But it's something. The character can actually move his mouth around for the first time in snowconesolid productions history and I am proud of that. I actually spent the most time working the face expressions and figuring out a way to animate them within the unity engine. The main reason it took me so long was because I was experimenting with a number of different ways to animate in the engine. I tried shape keys (which Unity does support however, is hell to actually animate or create a good result from within the engine. Hopefully in future releases of the engine, we will be given a better way to use shape keys and possibly even have them animate) I also tried baking shape key animations which worked to some degree but wasn't what I was looking for. I attempted to create a face rig for my model which didn't end up good at all since face rigging isn't something I am very skilled at. And motion capture was never an option for me.
In the end I came up with my own way to animate the face inside of the Unity engine. So what I did was create all the different facial expressions separately. And then in Unity I set up my own state machine to transition between the different facial expressions. So I can simply just tell the state machine manager what facial expression I want it to put on the character model depending on how I would want him to react. In the video above you really only see the character model transition between 2 facial expressions (closed mouth and open mouth) but really he has many other face expressions that I could use.
heads for each face expression.
I have done something similar just one other time before in the past and that was for this Donkey character I created a while back. I created a number of different facial expressions just like I did for this character model. The only difference was that those never transitioned between each other. I never set up a way for them to do so.
Inside the Unity Engine - Character Testing and Setup
Creating the multiple face expressions in Blender was the last thing I did. Once that was done I bundled everything up and exported the entire character in the Unity engine. I set up the character to work with Unity's Animator (Mecanim) component. I set up the materials and created a state machine manager to handle transitions between facial expressions (as I mentioned in the previous section)
After doing a couple of character tests and prepping the model I got sidetracked and just started goofing around in the engine for fun. I ended up taking my character model, posing him in some test scenes I created and rendering out silly images which actually turned out pretty cool to look at (well I think they look cool at least) Here are a couple of renders from the Unity engine I created
I like how these images turned out and also they are useful because they are good examples to show how the character model looks like in scenes with different lighting as well as show the possibilities that can be created with his different facial expressions. The first image gives off this evil tone to it while the second image portrays sadness. The third image is kind of funny because his standing on the beach screaming at something we don't know about. And the fourth render is just goofy because there are hamburgers all over and the model in the background has sort of a creepy smile on him.
Setting the Stage for The Samer Khatib Show
The character is finally complete at this point and I moved on to create the world he will be in. From the start I was planning on creating a TV show type set and had a good idea of what I wanted to do.
Back into blender, I created a couple pieces of furniture such as couches and a desk. Textured the models and exported them into the Unity engine.
I set up a very basic environment that kind of looked like it could be a set of a talk show but at the same time looks nothing like a tv talk show at all. I was very empty and boring. It was missing the magic of a talk show setup. I knew it needed way more work.
For reference I went to google and just looked up images of late night talk shows like The Tonight Show with Jimmy and Conan. I looked at their sets and wanted to create a similar feeling in my scene but at the same time add some of my own flavor to it. Make it me. Have that Samer Khatib vibe to it.
I began hammering away until I had created a set that had my name written all over it.
I had a ton of other assets in my Unity project already available to me (which I have created all my self of course. I never asset flip. Every model you see is created from scratch)
So I modified one of my couches, I put a miniature version of my mascot on the host desk and just started laying props around until I made it feel like a set with a wacky twist to it.
After hours of editing, re-positioning props and tweaking the lighting, the set of the Samer Khatib Show is born!
Final Set
Directing The Animation Inside Of The Unity Engine
If you are familiar with the Unity engine and tried to create a cutscene with it before you probably know how painful it is. The Unity Engine is not a video editor. For years I have been blindly animating cutscenes in the Unity engine. Creating massive state machines to control camera cuts. Spending weeks to make one simple short animated scene and I just took it. I accepted it and thought that this is just how people create cutscenes in game engines. It's a regular work flow. It was hell! I was a fool! Then, I discovered Cinema Director - A sequence and Cutscene editor for the Unity engine.
This plug-in made creating cutscenes fun again. No more terrible work arounds! Its like a video editor. You can direct and control any of your objects. This tool saved my life! Seriously though, if you are planning on creating cutscenes in the Unity engine for your game or animation I highly recommend this plug-in. It is everything creating cutscenes should be like. Anyway, back to my project. I used this plug-in to direct what will happen and essentially create the entire animation really.
Rendering with Helios
The animation is finished now but how do I capture this in video format? This was suppose to be the easiest step out of everything but had me scratching my head for days. I tried everything to capture my animation. Fraps, Bandicam, everything! I found myself constantly running into frame rate issues as well as poor quality output. Then a friend told me about Helios (also a plug-in for the Unity engine)
I swear I am not trying to advertise these plugins and I am not sponsored by the devs of these tools. But Helios is definitely another 5 star Unity plug-in that I highly recommend if you want to create a high quality animation within the Unity engine. Helios is an offline renderer and works similar to the rendering features in Blender. It will capture every single frame for you and can be forced to playback at 60 fps without any loss in quality. Speaking of quality, Helios can render out up to 8K resolution! DAAAAMNN SON!
For this animation I used Helios and rendered out at 60 frames at resolution of 1280x720 (YouTube Quality).
Final Video
I'll leave this last part short. For the voice over, I used Audacity to record my own voice.
Then I took the sound file and clips I rendered out with Helios, brought them into Camtasia video editor - Put it all together, created a video and uploaded to YouTube.
NOTE: I mentioned in the beginning of the post that the voice is a tad out of sync. This is something I will work on to improve for future animated videos.
.....And that's it. That is the making of "The Samer Khatib Show."
Thanks for Reading. For those interested, below is a complete list of all the tools I used to create everything.
List of Tools Used:
