Animal Frenzy - Process of Creating an Animal - Part 4 Body Outline

Now we have the basic base down for the fox, we can give it an Outline.


When we talk about an Outline or "Ink lines", these are somewhat of a hold over from the classic days of Cel or Traditional Animation, but it's still a really good design idea for a lot of characters as it makes certain parts of a character "pop".


Click the Images to see the Full Picture!







I've demonstrated this with the picture above where we have two circles. The circle on the right clearly "pops" out of the picture far more than the one on the left.

There are other practical reason's why you might decide to use an outline, but for now I'm just going to stick with "Because it makes it look good!".

There are several different techniques you can use when creating your outline, but I am just going to talk about two of them.






The first, most well known, most used and most ugly (at least to me) is the basic Stroke Outline built into Adobe Illustrator (shown above). The Stroke Outline adds a mathematically perfect outline around the desired shape. While this all sounds alright in theory, I find that in practice it makes the characters look far too Computer Generated. There's no style or character to a basic stroke outline and can make your work look very Amateurish.

You can download various Illustrator Brushes that will change the way your Stoke appears, but I'm going to show you how you can do it manually - without learning anything new!






The Second method - the one I will be using on the Fox drawing, is Simply a new shape drawn behind the shape you wish to have the outline! Take a look at the picture above and compare it to the last. There is a lot to be said for some Randomness! Don't try and copy my lines exactly, make it your own! Thats the whole point! When people start using the same brushes, in the same way, you get a lot of artwork that just, well, looks the same! Try and put some of yourself into your designs - it's the only way to make them unique.

This method of creating a darker shape behind your artwork is a common one used by Professional Animators. It gives you great control over how your outline looks, as well as solving a lot of other animation problems caused by other outline methods.






Like before, I start by turning the Visability Off for all of the layer's I don't need to see. This makes it a lot easier to draw around the shape you need. I then make a New Layer and place it underneith the layer of the shape I am going to draw. Remember to keep Renaming your layers as you go!






I now start to draw around outside of the shape leaving a small gap between the line of the shape and where I'm drawing. It would be a bit pointless to just draw straight over the line of the shape, because you wouldn't see any of the shape you're creating!






Before you know it, you've got a really nice looking shape, with an outline! Remember, don't try and make it perfect, the unique choppyness is what you're looking for here!

All you need to do now is use the same technique you used for the head on the rest of the body parts.







I made a new outline shape for each individual part - including the individual shapes that make up the different parts of a limb - like the legs. Otherwise you will have problems when it comes to animating.

Animal Frenzy - Process of Creating an Animal - Part 3 Body Base

Now that we have the base shape for the head, it's time to start working on the rest of the body.

Right before we do, we need to Rename the Layer we just drew the base of the head on. It's really important to get into the habbit of renaming your Layers. It will help you later on when you have lots of shapes and are trying to remember where you put them all.


Click the Images to see the Full Picture!



To Rename a Layer, simply Double Click on the layer you wish to rename in the layers window. This opens up the Layer Options window. The two most important bits in this new window are the Name and Colour. Changing the Name, renames your layer as I was just speaking about. I renamed my layer to "Head Base" - you can name your layer whatever you like so long as you understand it later on. Colour changes the colour of the Vector Line of all of your shapes on that layer. The vector line is the thin coloured line you see as you draw your shape with the Pen Tool, or as you tweak it with the Direct Selection Tool. You might be thinking "What do I care whether its Blue or Green?" and to some degree you're probably right. But once you start drawing a green shape on a green background, the last colour you're going to want your vector line to be, IS GREEN. Be sure to click OK to accept the changes.






The easiest way to navigate around your image is to press and hold the Space Bar. This turns your cursor into a small white hand as shown above. Simply click and drag your mouse while the Space bar is pressed down and you can drag yourself around the screen! This is so much easier than trying to use the scroll bars on the sides of the screen...


As before, I create a New Layer for my geometry and Lock the old layer so I don't get them all mixed up.






I Start as I did with the head and draw around the path of the drawing.
When you are drawing something that you know will be behind another shape, you don't need to worry too much about what it looks like because it wont be seen. Unless of course you will be revealing it through animation - like the body behind an arm.






Because the body is behind the head, we need to move the body layer below the head layer. This is done by clicking and dragging the layer with your body shape, below the layer with your head shape. Don't forget to Rename your layers as you go!






As you draw more and more shapes using up more and more layers you might find your screen starting to get very full up. You will also find it very difficult to see the drawing you are working from. It would be very tedious having to make all of your different shapes transparent and then opaque again in the transparency window every time you wanted to see them. The best way to solve this problem is using the "Toggle Visability" in the Layers window. This allows you to click a layers visability On or Off with ease. Each layer's Visability Toggle is located directly left of the Lock Toggle in the form of an Eye Icon (as shown above).

Remember to keep the different limbs as seperate shapes!
Otherwise you will have a lot of trouble when it comes to animating your character.






Using the different techniques I have talked about and also using some educated guess work, I was able to finish drawing the base layer for the different parts of the character.

As you start vectoring various characters, you will come across parts of a character that are partly behind one object while in front of another - similar to the Tail of our Fox. Because the tail is only wrapped around the one thing (the foxes body), we can get away with just "drawing what we see". Also, because of the complexity (the shooshyness) that would make a good animation for a fox tail, any movements would have to be drawn as a new image rather than just moving or rotating the body part (like the movement of an arm).






On the note about Animation - Notice how I have drawn the Foxes front left leg and back left leg. I have drawn two different shapes for the limbs in relation to where the bone joints would be. These are both on the same layer. This is to make more realistic animation while using the same shapes without having to draw another image (unlike what will have to be done with the tail).

All we need to do with the Main Base of the Fox now is to add the Outline!



Continue to Part 4 - Head Outline

Animal Frenzy - Process of Creating an Animal - Part 2 Head Base

Back to the Foxture!


We begin by creating a Base Layer for each main part of the character (head, body, arms etc). All of our extra parts will be Layered on top (eyes, mouth, hair details etc).

I personally like to start with the head. It's entirely up to you where you start so long as you get your base layer down first.


Click the Images to see the Full Picture!


I have selected a Fill Colour at the lower left side of the screen by Double Clicking on it and setting a colour. I then set the Stroke Colour to "No Fill". This is because I will be using a different technique later on for the character's outline.




After these are set, I begin to draw around the shape of the head.
Straight away I hit a sharp corner. If I clicked again, the Handle would drag the curve way over to the right, as shown above.




When dealing with sharp corners, a simple technique is to just click once again on top of the Vector Point you just created. This deletes the handle leading into the next line, but keeps the handle you just used for your previous line.



Using Only the techniques I've already discussed, I was nearly able to complete the Base Shape for the full head. Sometimes you will find that the shape you are creating is covering part of the drawing behind. Most of the time you'll be able to just make an educated guess then Tweak it after. If on the other hand your shape is pretty complex and you really want to see the drawing then you can do so by clicking on the Transparency Window and changing the Opacity value. 0 is fully Transparent while 100 is fully Opaque. Knocking it down a bit will allow you to see the drawing behind while still being able to see the shape you are drawing pretty well.






We finally have our first shape!
Now it's important that you understand the two different types of Selection Tool.
On the top left of the Tool Bar, you will see two different cursor icons. While they might look similar, they both have very different uses.



The first one, is the Selection Tool indicated by a black cursor icon. This tool is used for the selection of an entire object or shape. When you click on a shape with this tool a Bounding Box will appear around the outside. You will mainly use this tool for Moving a shape around the screen. You can also use it to Resize the shape by Dragging the Points on the Bounding Box (Hold shift while doing this to constrain the proportions). Another use for the Selection Tool is to Rotate a shape by placing your cursor just Outside of the Bounding Box Points - this turns your mouse cursor into a Circling or Curving Arrow (shown above). Just Click and Drag your mouse when your cursor looks like this to rotate the shape (Pressing Shift during rotate will increment in 45 degree angles).




The second one, is the Direct Selection Tool indicated by the grey cursor icon. This tool is used to "Directly" edit the geometry of your shapes. That's not as complicated as it sounds - it really just means you're able to edit the shape similar to how you created it with your pen tool. When you click on a shape with this tool, rather than have a bounding box, you are able to see the Lines of the Shape just as you do when you use your pen tool. You can then Move the different Vector Points by just Clicking and Dragging them around, or you can edit the Curve Handle by clicking on the vector point Once, then Click and Drag the Handle for that point to edit it's corresponding curve.


These Selection Tools are Invaluable when you are tweaking your shapes after you have drawn them!


Continue to Part 3 - Body Base

Animal Frenzy - Process of Creating an Animal - Part 1 Beginning

Animal Frenzy is our Key Stage 1 Group Project Game. Our aim for the game is to teach 5-7 year olds part of the National Curriculum for Science. This includes but not restricted to Animals and the Environment.

Over the next few posts I am going to describe the process we are taking in our creation of the Animals and how they will be animated. I will be using Adobe Illustrator to create the Vector and Adobe Flash for the Animation.



Click the Images to see the Full Picture!





We start our design process with a posed drawing of the character. This is really important so that you get a really nice feel of the character's personality and how they might act within the game. It is also important to have clearly drawn features and un-obstructed limbs - but in the case of the fox, it isn't difficult to imagine what the limbs will look like behind the tail.



When we have our drawing imported into Illustrator we need to Create a New Layer and Lock the layer with the drawing on. This is to prevent any chance of drawing on, or editing the original picture.






I will be using the Pen Tool for the majority of the drawing.
This tool is used to create Shapes that you then Tweak and Layer Up to complete a full image, or in our case an Animal Character.






A single click with the Pen Tool creates a point that when you single click again somewhere else, you create a Straight Line.






To get Curves in your lines, you need to Click and Drag with the Pen Tool. This will create Handles that you can then Tweak to change the Curve within the line.




The idea is to create Full Shapes that can then be used together with other shapes to make a full image. Try and avoid crossing the lines over as you will get some very messy results... Unless of course that is what you're looking for!

One more thing of note when using the Pen Tool is being able to move the Handle of your Next curve without deleting it (with the single click) or without deleting/editing the Handle to the Previous line.
This is done by pressing and holding the Alt key and dragging your Handle before you go to draw your next line. This allows you to have nice smooth curvy transitions into your next line without any sharp edges.

These are the very basics for using the Pen Tool. There are many other techniques you can use in your creation of a Vector image so I will explain them as and when I use them.


Continue to Part 2 - Head Base

Toward a Critical Vocabulary for Games

Video Games have been around for quite a long time now, but the industry still lacks a Universal Comprehensive Critical Vocabulary. Unlike other professions like medicine, Games aren't set in stone. There is no Right or Wrong in games design, only Trial and Error. If you were studying Medicine you would be diving into hundreds of years worth of comprehensive study. You would be studying something that is already there with little room for any interpretation. Every bone in the body has been mapped and categorized. Medicine is, for the most part, "set in stone". This is the complete opposite to the study of Games.

Games predate history so why the heck hasn't anyone developed a Universal Comprehensive Critical Vocabulary for Games?

In Greg Costikyan's article "I Have No Words & I Must Design" he talks of games as being "Plastic". I prefer the term "Putty" because games can be moulded into anything you can imagine, constantly changing and evolving to create the experience you want the player to have or what the player wants to have. Plastic to me means something that once it has been made, it can't be changed - that sets it in stone. While I agree that once you have made your game, there would be little reason to want or need to change it so long as you made it well - more so for board games as you can't simply release a new patch with any changes or fixes to it. However, if we are talking about Modern Video Games then they are absolutely 100% Putty. Changes and fixes can be released with the ease of an automatic update. Team Fortress 2 for the PC and Halo Reach for the Xbox 360 do this very well. They both release regular game updates and changes to keep the players engaged with new content.

This "Puttyness" is what makes it so difficult to create that dreaded Critical Vocabulary.

Everyone has their own idea of what is right and wrong in a game. Something one person likes, another person would hate. This is what starts the Target Audience Hierarchy. Age and Gender along with Console Platform lead onto Game Genre's such as First Person Shooter, Platform, Adventure, Strategy and so on... These are all attempts to create Categories in which we can start to have a Meaningful discussion about games. This all of course leads onto "Gameplay" - a thorn in the side of many designers. As you read Costikyan's article you begin to see that saying a game has good or bad gameplay just isn't good enough! What makes it good? What makes it bad? What makes your opinion any better than mine!?
The idea behind a Critical Vocabulary isn't only to be able to talk about games meaningfully, but to also dissect games in such a way that you are then able to take those "game chunks" and add them into your own game to get the same effect.

During my study into the theory of Games Design, I will be keeping my blog up to date with many different aspects that build up to create that infamous Critical Games Vocabulary.

Strange Words to Describe Games...

Paidea, Ludus, Agon, Alea, Ilinx, Mimicry....

I don't know about you, but when I first saw these words I thought they were just another language, yet it turns out they do have English meaning.

Paidea - To Play purely for pleasure, or just "playings sake".

Ludus - To be constrained or have to abide by a set structure or set of rules.

Agon - To be in competition against another entity.

Ilinx - The aspects of movement and how things generally move around.

Mimicry - To experience as closely as you can something else as a simulation or in roleplay.

Taking apart a game using these main aspects as a base reference is far different than my last blog post where I analysed a KS1 game using Costikyan's "Interaction, Goal, Struggle, Structure, Endogenous Meaning" form.

For this analysis, I have decided to compare two completely different and highly successful games to see how it turns out.
I will be comparing The Sims 3 with Call of Duty: Modern Warfare 2.

   

With Paidea in mind, the clear winner for pure play has to be The Sims 3. It's a completely open sandbox style game. Or as Will Wright would put it, a "software toy". You have no real game restrictions other than to just play with everything you are given. Your character died? Who cares! It's not game over... I've known people to intentionally kill their poor characters in more and more horrific ways (myself included)...
That is a long way away from the objective driven Call of Duty: Modern Warfare 2. It's pretty simple, "Kill or be Killed". You can't just put the pad down and walk away to make a cup of tea while you're playing this game - not unless you want to come back to someone using you as target practice anyway. While this game is extremely fun to play, if you were to work from various game analysis authors opinion of what makes a game, it would beg the question as to whether or not you are actually "playing" *hmmm*.

Ludus also has a pretty obvious winner which has to be Modern Warfare 2. The Objective based gameplay along with the strict rules and structure means that it has a very strong sense of Ludus about it. This is the biggest difference between the two games as one focuses on allowing the player to play the game however they want to while the other focuses on setting the player very strong active goals.

This leads directly onto...
Agon, where Modern Warfare 2 has again, a very strong influence. It is an extremely competitive game, I mean seriously, this is the kind of game that people will play constantly just to out-do each other. I remember seeing one person's message on Xbox Live (translated) "Give me a game of Modern Warfare 2 any time from 7am to 12pm, I'm really good". Even if you are good at this genre of game, chances are you will go online and get completely pummeled by people who are on the game most of their lives. Then you'll start learning good ways of not dying before moving up to getting any kind of a good kill-streak.
The Sims 3 has a very loose sense of competition. There are very few ways that I could think that it has any real competition. One would be by finishing your life time goal first, or if you're playing in the same town as one another then owning most of the businesses.
Unlike Modern Warfare 2 these goals aren't set in the game. There isn't a "Player vs Player" or "PVP" game mechanic so anything along those lines would have to be made-up by the players. There isn't even a struggle against computer characters - they're all quite happy staying as they are in their own little pre-fabricated world, so there's no worry of fighting for that promotion against your neighbour!

The way in which the two games move is completely different so when you talk about Ilinx you're not talking about one having more than the other, only that they each have their own way of going about it. In The Sims 3 you have a top down view of your character and world. This works really well for the game as you could be controlling several characters in the same game, jumping from one to the other. It's definitely a tried and tested method as this is the preferred camera angle for a Real Time Strategy game where you could be controlling literally hundreds of characters at any one time. You just point and click where you want the character to go or what you want them to do and they obey. This method however, requires a lot of AI coding as the character isn't being directly controlled by the player. As you can imagine this can be extremely frustrating when the characters you are trying to move don't move as you expect them to.
This is miles apart from the control method of Modern Warfare 2. For starters, you have a "First Person" view mode meaning you see the world from the eyes of the character you are playing. This works best with shooting games as it gives you far more accuracy and control in your ability to shoot exactly where you want to shoot. You also get absolute control over your character's movement in the game world so there is no need for any AI intervention. The only thing you need to rely on is your own reflexes, so long as the game is responsive enough. The controller input plays an important part in such lightning fast gameplay because many will find that using a control pad to play a First Person Shooter can be very difficult to start with - an analogue stick just doesn't compare to the speed and accuracy of a mouse. This is probably why FPS games don't tend to join console and PC gamers together in the same servers, as PC gamers would have a massive advantage.

Above all else and despite all these games differences, they both have one big thing in common. They both try to simulate the world in their own way using Mimicry. I say "in their own way" because if either were an absolute simulation they would lose much of their character, pace and overall level of fun.  
The Sims 3 is a game of life, you play yourself, (or anyone you can imagine) and either work to make their life prosperous or a complete misery. You can have a whole load of fun along the way like having affairs or stealing things from other peoples houses. There is really so much to The Sims 3 that it would be pointless me trying to list them all out with any kind of meaning. Lets just say there is plenty for you to do.
Modern Warfare 2 simulates real-world warfare. You get a really good sense of what it might be like working in the military like taking orders and completing objectives, but that, I think, is where the core similarities end. The game needs to be "arcadey" for it to be fast paced and fun. If the game were built to be extremely realistic you certainly wouldn't dream of running into a building rambo style blasting over 10 middle eastern folk's heads off while they were playing a nice game of cards, would you?

This leads onto an extremely important factor of Mimicry - they're not all things that you would do in the real world. In The Sims 3 you might find it fun or just funny to watch a couples relationship break down after you've just set them up, but I doubt there are many people that could say they would enjoy doing it in the real world. Then again, that's probably a bad example... Lets take Modern Warfare 2 for instance... You might enjoy blowing people's head's off, but the brain connection of you actually killing someone just isn't there. It doesn't make you want to go out and murder people for fun. I think that this is one place the media gets games completely wrong, but then they're happy so long as their story sells.

I think the comparison between these two games has really shown the uses of Paidea, Ludus, Agon, Ilinx and Mimicry. What is most interesting is how our games had only one of them in common, yet they are both highly successful and respected in their own genre.