Starting Out In Game Design Part 1: Character Concept and Modelling in Blender

My wonderful friend Rob Linnow never stops coming up with ideas. Ideas for video games, little gizmos for his home, web apps, toys, commercial products and on and on. At the moment I'm trying to help him realize a video game. It's a terrific education for me. I'm learning character design, rigging, non-linear animation, game logic and coding.

I'm not sure how much Rob wants me to give away at this point, but I'm sure I can tell you he wants characters with interchangeable outfits, and I hit upon the idea of helmets. That way we can keep the basic character's finish and rig very simple, and pretty much go as fancy as we want with the relatively immobile helmets. A quick search on Pinterest yielded the juiciest array, thanks in large part to whoever runs the extraordinary costume blog at flabergastertron.

Pinterest is a dangerous, dangerous place for a designer to visit. Anyone who is interested in the visual (in other words, all humans) should probably put their computer's power cable on a timer if they plan on browsing there, or you just won't escape. It's like having the V&A on your desktop. Deadly addictive.

Next it was time to get thumbnail sketching. I find it's best to keep sketches really tiny at first. It's the scale that your hand thinks at, so thumbnail sketches often have a really spontaneous, natural feel to them. Also, the little movements of the pencil can create lovely tiny gestural marks which it would be hard to execute at a larger scale. These happy accidents can sometimes translate into design features, that's often what happens for me anyway. 

The body of our character is going to be completely rectangular, like a domino. I was particularly taken with the "Thor" helmet with big horns on the left of the image above, so that was the one I decided to develop first. I've fallen in love with Blender's grease pencil tool lately, it's an incredibly useful feature for any designer/3d artist/animator/film maker as it can really streamline the process of going from sketch to model/movie, and is probably the finest storyboarding/animatic tool out there. This thing really does have enormous potential

GP_helmet_sketch.png

It's much easier than trying to find the correct tab in the Properties panel, restrict the image to a single view etc, and in many cases might even be more useful since it's not limited to orthographic views. I then just traced quickly over it using the GP tool, so that I had just an outline drawing of my character to use as a guide while modelling.

I would strongly encourage anyone new to Blender to spend about a week performing basic operations such as adding geometry to your scene, entering edit mode, scaling, extruding, translating and so on. Something really interesting happens if you use Blender intensively for a few days. For one thing you will likely notice how snappy the viewport is. Next, the clever implementation of multiple consecutive keyboard shortcuts really does streamline the modeler's workflow. I have a number of years of experience modeling and animating with C4D, and there is no doubt that modeling is a far, far more pleasant experience in Blender than in C4D; there is no way I could model anywhere near as quickly or as fluidly in C4D, much as I may love it for its speed and utility in other areas.

The next post will be a short piece about how I rigged the character, which again I found to be a very intuitive, smooth process in Blender, very much in line with the modelling workflow. Don't be fooled by the lack of price tag, nor by haters on forums, Blender is tremendously sophisticated, and fun to use.

Learning Processing Day 0003

Exercise 4 - 3:
Or "Why Codecademy Needs an Overhaul and Learning to Code Will Ultimately Open Up Possibilities Hitherto Undreamt Of In Xpresso in C4D"

Have a circle increase in size as the mouse moves around, and have it follow the mouse around:

I think this might be the moment when I realised that I can actually begin to translate the answer to a problem into lines of code.

One of the pitfalls that I have found whilst trying to learn programming on Codecademy (particularly their painfully slow-loading and often cryptically-worded Python course) has been the sense that I am just ticking boxes in order to get on to the next exercise. A glimpse at the Q&A forums on the site as you go along with the exercises seems to prove my point: a lot of perplexed individuals asking questions which show that we are not understanding conceptually what we are doing as we complete the exercises, nor learning sufficiently well as we go along to enable us to use the tools we have already covered.

Something in the Codecademy approach doesn't quite work.

I remember battling my way through giant 500 - 1000 page software manuals in the early 2000s, and dismissing that approach with the explosion of the web and online tuts, but you know what? I know I'm learning in a more solid and fundamental manner by studying processing using a book. It helps too that that book seems to have been written by a master educator with an intuitive understanding of the needs of the beginning programmer.

For posterity, here's the answer I came up with:

int circleSize = 0;
int circleX = 0;
int circleY = 0;

void setup(){
size(200,200);
}

void draw(){
background(0);
stroke(255);
fill(175);
ellipse(circleX, circleY, circleSize, circleSize);
 
circleX = mouseX;
circleY = mouseY;
circleSize += abs (mouseX - pmouseX);
}

Whilst I'm at it, here's a little gif from another exercise, reinforcing the concept of variables, this time using trig functions to change values over time. Does it look like that square is going round and round to you? Of course the possibilities are endless, but what Shiffman is so brilliant at is connecting the learner's brain to the seemingly abstract goings on within the code. I actually jumped ahead a wee bit here because I've got used to using trig functions in Xpresso in C4D. On this point, a friend once asked me what the point of learning to code in C4D is, since Xpresso is so handy. The point is that it's paradoxically less clunky: I'd have to dig about through all the Xpresso submenus for the appropriate function, then grab say a math node, then fill in the relevant variables in the Attribute Manager, then grab say a range finder node, and again fill in the variables...

I understand now that I could potentially do more in a few lines of code than I could do with a mighty spaghetti monster of a an Xpresso rig.
 

float posX_r = 100;//didn't end up using this
float posY_r = 100;
float posX_e = 100;
float posY_e = 100;

float h_e = 10;
float w_e = 10;
float angle = 0;

void setup(){
size (200, 200);
smooth();
}

void draw(){
float x = (sin(angle)+1) * width/2;
float h_r = (cos(angle)+1) * 50;
float w_r = (cos(angle)+1) * 50;
background(255);
stroke(0);
rectMode(CENTER);
fill(125);
rect(x, posY_r, w_r, h_r);
fill(255);
ellipse(posX_e, posY_e, w_e, h_e);
angle += 0.05;

}

Learning Processing Day 0002

Today's Meisterstück is another early exercise in Daniel Shiffman's monumental Learning Processing book.




Using the absolute value of the current mouse position in X, minus the previous mouse position in X, we can calculate the speed of the cursor, and feed that data into the line width, thusly:

void setup() {
size(500, 500);
background(100, 200, 100);
smooth();
}

void draw() {
stroke(0);
strokeWeight(abs(mouseX-pmouseX));
line(pmouseX, pmouseY, mouseX, mouseY);
}


I will take it as read that all who gaze upon the intriguing abstract piece I made with this tool will agree that it is certainly a Meisterstück.


Vote Dan Shiffman for World Teacher!


(Meisterstück aside though, as an aside, man do I feel lucky that by accident of history, English became the lingua franca of programming languages; imagine if it had been German.)

Learning Processing Day 0001

I've started learning Processing.

I think I'll post a daily log of where I'm at in my studies with my new favourite teacher, Daniel Shiffman, who wrote what I suspect may be the finest introduction to programming, in any language, ever. Eventually, I hope to be able to delve into the heady depths and heights of his second book, and follow, at a snail's pace perhaps, in the mighty footsteps of Colin Evoy Sebestyen in his fascinating implementation of Shiffman's attempts to simulate natural systems computationally, using my favourite tools, C4D and AE.

(Drumroll...)

Here's what I want to draw today:

(High-hat)

It's now 10.50 am here; let's see how slowly I can build this in Processing...

(Drumroll...)

(Drumroll continues...)

(Drumroll continues...)

(and continues...)

It's now 11.45 am (on the same day, I'd like to point out)

TA DAAAAH!

And here is the source code:

 

size(500, 500);
background(250, 200, 50);
ellipseMode(CENTER);
rectMode(CENTER);
strokeWeight(3);
fill(60, 50, 75);
//tyres
arc(140, 325, 60, 100, 0, PI, OPEN);
arc(390, 325, 60, 100, 0, PI, OPEN);
//hubcaps
noStroke();
fill(77, 245, 232);
ellipse(140, 325, 20, 40);
ellipse(390, 325, 20, 40);
//car body rectangle
stroke(100, 112, 150);
fill(134, 155, 210);
rect(250, 288, 400, 80);
//car body bubble
arc(250, 250, 300, 200, PI, TWO_PI, OPEN);
//windows
fill(247, 212, 243);
quad(130, 200, 250, 165, 250, 250, 120, 250);
quad(260, 165, 350, 185, 450-90+30, 250, 260, 250);

I know, awesome right?

What is good about taking an hour to program something that would've taken me 30 seconds to do in Ai?
 A little bit of insight in to what's going on under the hood of Ai maybe?
A bonkersly disproportionate amount of excitement also, perhaps?
An astonished, humble respect for the work of others in computer graphics? Uhh, just a little.
Best of all, as you can see from my masterpiece above, it won't be long before I'm performing feats like this.
I love this.