Fake products in games + Making Of "Wood-Be-Gone" spray

     Coming across a fake product in a video game is a very common thing to happen to the player and placing such products in the game is a design practice that game developers/designers have been doing for ages now. This practice of course is also done in other formats of media outside gaming such as films, tv shows, comics, paintings, etc. I personally believe that fake products typically stand out the most in games because usually the player gets a better chance to explore and find something on their own time where as in a film, the viewer might miss something placed in a frame or not catch it the first time they watch the movie.

But why? What is the point?
This is going to sound like basic design for beginners or something that is just common sense, but artist and designers are constantly looking for ways to make their game world or film, art project (what ever work they are doing) feel as believable as possible. What is one way they can achieve this? Simply ask themselves, "What kind of products would the player expect to find in this world?", "What kind of products do the characters use in their own world?' etc. Maybe you are working on a modern day city environment so people should expect to come across things like vending machines, billboard signs that advertise a new phone, etc. Or maybe you are working on a futuristic world that takes place in space. The player would expect to come across more futuristic and advanced products instead of your regular bag of chips and cigarette packs. The products along with every other art asset should be as consistent as possible in order to not break any immersion in the world that the viewer or player is experiencing. Of course this is just my own opinion and not a mandatory design rule. The world can still be immersive while at the same time feature out of place items/products, but it can be much harder to pull off.

Optional and mandatory products/items.
It really is not hard to come across such items in games and almost any game you play most likely does have it's own set of products placed throughout the world. The GTA series with it's line of food products and drinks is a good example. One I could think of off the top of my head is the Sprunk energy drink you can find. The Dead Rising series is another excellent example of a game that maybe has hundreds of fake products. Speaking of Dead Rising, this brings me into my next point. Some games feature fake products that are just there to make the world believable while other games create product brands that are absolutely mandatory to use in order to progress in game. A game that did a great job of doing this was again Dead Rising. Introduced in Dead Rising 2, the Zombrex was a key item to have. You might be thinking "so what? every game has key items the player must get" - That is true, but what made Zombrex so unique was how important the game made it seem. There were ads for it, branding and everyone in the game was aware of it and how important it was. You are in a world in which a zombie outbreak has happened, but a semi cure has been found to prevent you or loved ones from turning into zombies if bit and you could get this product in places like pharmacies, over the counter. Dead Rising 2 made it feel like an actual real product in the game world. While it was a mandatory item to have, the game never really forced you to go out and get it. It nagged you to get it, but you didn't have to listen if you didn't want to. However, it made the player very aware of how important it is to have and naturally, the player would keep track of time and go out to try and find this product just to have it on hand. Like in real life, if you go grocery shopping you always make sure to grab that one really important necessary thing, like toilet paper for example. It added a bit more immersion to the whole experience and just made the world you are exploring feel more believable.

Every detail counts.
This is kind of more related to the paragraph before I talked about optional and mandatory products in games. Sorry to keep jumping back and forth between subjects. But, going back to talking about design and making the world as believable as possible. To many, placement of fake products is just a minor detail that is often just looked past. Often, the player won't even really care if they come across something like this. And it really isn't that big of a deal. I'm not even sure if this post was worthy of having it's own large article written out. But I am running out of ideas for my blog. Anyway, I personally love coming across small details like this in games. I like taking the time to just look around the world a bit and see what products it has to offer and compare them to real world items even. (I know, I am a huge loser) But as an artist you want to try and pay attention to these small details, learn from them and see how you can incorporate them into your own works and make them more believable. The fact that the designers and developers took the time to create a their own line of products and fake brands just for the sake of their creation to make the game world (or movie) feel as immersive as possible shows how dedicated and passionate they are about their craft and is something that I personally do appreciate seeing.

Anyway, this was just my own little theory and views on the idea of fake products in games. I'm sure not everyone agrees or feels the same, but I think it is an interesting subject to talk about relating to game design. I tried to word this as best as I could, but the post was kind of all over the place. Apologies if I didn't really make much sense in today's article. With that said, I also have a new "Making Of" that I would like to share. I decided to design my own fake product for one of my upcoming games that I am currently developing. Below is where I discuss the process and share the workflow of how I created "Wood-Be-Gone Bug Spray" - An original fake product by ME!

     Product design is something that I never really payed much attention to until one day I visited a local Chinese store in my area. It was my first time there and there were a lot of products I have never seen or heard of before in my life. For some reason almost everything stood out to me and was very eye catching because of how well the packaging was designed. Bright, colorful and full of character I suddenly became interested in all of it. I would stop, look at something and say "the packaging on these items is done so well!" and then it dawned on me how important product design actually is. Having nice packaging, branding, and eye catching designs are just as important as the actual product itself.

Anyway, that was just a little short story of what got me interested in product design. Let's get into this fake bug spray I made.

"Wood-Be-Gone!" is a fake bug spray I created for my upcoming game. This is a common item that the player will come across. It is also a usable item that could be picked up and used against enemies. I don't want to get into too much detail right now, but quick summery: there has been an outbreak of these new type of insects in the game that carry a deadly (fictional) disease that has gone viral in the games world. The spray is used to instantly these bugs. The bugs typically travel in packs and the spray acts as a quick solution to neutralize any threat they impose. This is an item that will aid the player through their journey. As for the name "Wood-Be-Gone", it will be explained in the game why it is named that.

Break Down:
First I started out with the modeling. This was a very simple and quick process. Since I was modeling a spray can, I started out with just a basic cylinder shape and then modeled in things like the metal rims, the spray cap, etc. The whole model is just a circular cylinder. Nothing fancy and nothing over complicated. After modeling, I quickly layed down some base colors (which change by the end of this) and marked my seems to prepare for unwrapping.

Texturing the model:

This was probably the most time consuming part of the process because I wanted to make it look like an actual real life product. I began by adjusting my UV map, baking base colors and exporting my diffuse and uv map out. I brought those maps into GIMP and experimented with various concepts and designs until I finally created a texture I was happy with.

uv map layout

initial design I created.

I would constantly switch between blender and gimp to see what my texture looked like on the 3d model.

texture test

The Logo Design:

Everything on the texture map is made from scratch bit by bit. I didn't want to just go get some stock clipart or texture images and create the design out of that. Again, I was aiming to create a believable looking product that would make sense in my game world. The game has these very unique bug models that I created a while ago and I wanted the bug spray can to be advertised in the game as something that fights against those specific insects. So I took the actual bug model, which is this:

bug from my game.

And I created black 2D silhouettes out of the 3D model as icons and branding logos for the bug spray.

"Wood-Be-Gone" logo/branding

Text Logo:

For the text logo, I decided to give it a wooden texture. Kind of a burnt wood kind of appearance instead of just a basic boring black and white text logo.

Text Logo made of REAL WOOD!

More Texturing and finishing touches:
I eventually decided that yellow wasn't a good color to represent the bug spray can and instead created a nice gradient purple to serve as the can's main color.

That's better!

More details and touchups:

Even better!

Final touch:

Now it's PERFECT!

With a ton of other Blender props I made:

Inside The Unity Engine:
Once I finished, just like any other model I made, I exported my new bug spray product to the Unity engine. It will be used as an in game item after all. Down the road I will program this item to actually have functionality and fight against enemy bugs. In the meantime, here is what it will look like in game:

Taking it a step further with Cycles:
Even though the actual game asset was done at this point, part of me still wanted to create a semi photo-real rendering of the product to see if I can fool anyone into thinking that it actually is a real product. So I went back in Blender, switched over to the Cycles render engine and setup a scene, lighting, skybox, etc to create a good looking high res billboard ad for the product.

Scene setup and previews

Test renders and tweaking until it was right.

Final Render:

Does this look like a real product to you?

I made this turtle... His name is Frog.

Found my HAPPY ZEN place.

Was bored the other day. Cracked open Blender3d and created a new character. Made this turtle you see here. His name is "Frog".

Early WIP Blender Renders

Why is his name Frog? Isn't it a turtle?

Final Model In Unity Engine.

Look at that constant facial expression it has. So chill. So relaxed. This turtle is obviously either super high or really drunk to the point where he doesn't even know what he is. So... lets just call him Frog from here on out. My newest character. Frog the turtle.

Also, I made it possible to customize his skin for unlimited color variations and combos!

What am I doing with my life.......................

Making of the "Samer Khatib Show" (COMPLETE PROJECT!)

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:

Blender3D

Gimp

Unity Engine

PlayMaker

Cinema Director

Helios

Audacity

Camtasia