All Posts By

Kate Holden

Ars Harmonia Concept Art

By | Games Design | No Comments

I did pretty much all the art for this game, and I wanted to share some character designs as production art I did for it because we worked really hard making this game!

So I was first given a list of the cast and also setting details. It’s a fantasy setting but in a place very much like contemporary America, so I wanted the characters to look like people you could actually meet, particularly to make the main character stand out as this stranger from somewhere else.

Fira was the first character I designed. I really like Fira a lot as a character and my aim was that she was this ordinary, cute high school girl who is kind of mature for her age and in a lot of clubs at school.

Finding a look for the main character would prove much harder because it needed to look professional, practical, mysterious and unique all at the same time!

Fira came out super-cute. I think she’d be a nice person to hang out with haha! I go for simple art for concepts.

There’s no point in wasting time on making character designs super presentation polished because they’re not going in the game, you may need to do many different ones and when it’s  a small team, people can ask you directly pretty easily about details as and when its needed!

Next I concentrated on our demon girl [I’ve removed all spoiler names from images in this post in case you didn’t play yet!]

I first designed what she looked like before she was a demon, then copied that lineart and built the demonic features on top. I was really happy with this design, but the problem was brought up that the crystalline growths would be hard to model and rig. So I redid the design with smooth, flowing growths instead:

The look of them was kind of inspired by the “Sacrifice” Cie’th enemies in FFXIII. The original idea for giving her crystalline growths was to do something interesting and distinctive with the concept of “ice demon”. Also. a thing about me as a designer; I am neither a goth nor a punk, but if you give me the slightest opportunity I will design goths and punks because I think they’re awesome.

Next, I designed Erich, or…tried to…

I fundamentally misunderstood Erich as a character while skimming the information given. I’d been told he was the tallest character, and I knew he was a scientist who enjoyed kind of gorey stuff as an artform… So I assumed he was like this…middle aged creeper.

This wasn’t what was wanted from the character, however. Bishop wanted him to be younger, more late-twenties kind of aged, and to be a trustworthy confidant and a likeable comic relief, so I redesigned him to be more fun:

The crocs are a fun detail; I remembered a news report when crocs were the big trend about nurses being told they couldn’t wear them because they build up static and potentially damage the delicate and vital electrical equipment in a hospital, so they seemed like a perfect choice for a kind of iffy doctor!

So, then we got Jamison. My idea for Jamison was simple:

He’s the “perfect” boyfriend by standards of a teenage girl, the most popular guy in school and very charming, so I looked at members of currently popular boybands like One Direction and based him on that look.

So finally, the main heroine. Smart and professional, but dressed in clothes she could fight in, a mysterious stranger who looks foreign no matter which country she’s in.

I based her face on interesting looking mixed race actresses. I wanted a grey and purple theme because she’s kind of off the scale of conventional human law and morality and hard to discern.The short trousers with boots give her an interesting silhouette.

The theme of 7 needed to be somewhere on her person, so I gave her that tiepin in the shape of the kanji for 7.

So we get the production art for the cast looking like this!

I coloured them in a comic bookish sort of style rather than just cel-shading, since I only needed to do one bust portrait per character I could spend a lot detail on them than the portraits in Vacant Sky!

Play Ars HarmoniaPlay Ars Harmonia

Time to tackle PBR

By | Tutorial | No Comments

PBR! It’s short for: Physical Based Rendering!  It’s important and if you’re planning on going into games, you need to start learning about it because it’s going to dominate the industry very quickly! Unreal Engine 4 uses it for starters and hoo boy that engine’s gonna get some use with those features and that price point! Let’s look at some games with PBR:

Ryse

tumblr_inline_n6135oUGA31qh79fh

Killzone Shadowfall

tumblr_inline_n6139hW4LP1qh79fh

The Order 1886

tumblr_inline_n613bjJO7l1qh79fh

 

BASICALLY: WOW.

tumblr_inline_n613d34UVj1qh79fh

*ahem* aaanyway. Let’s get analytical here. Even if you’re not an expert on games graphics, you should notice a few things. The lighting looks fantastic!!! (this is partially thanks to IBL which I discussed in my last post, IBL and PBR are BFFs), the characters have a somehow more solid and less plasticky appearance than we were accustomed to last gen, and finally OH MY GOD, THOSE METALS.

So what is PBR and how does it work? Well, the best I can manage is that it’s a new type of rendering which simulates light in a much more realistic way than we used to be able to. How it does this I….er… I don’t…know. Or rather, my knowledge of physics doesn’t really go deep enough to explain it! Here’s a clever person explaining it though! (top comment).

Now even though I don’t really know how it works on a deep level, that doesn’t really matter because basically: materials behave like real things. This actually means that it doesn’t matter if you know all the clever computery stuff going on arguably to a lesser degree than with the old rendering!

There are new maps, so let’s look at those. With PBR, the maps are all on the different RGBA channels of a single image. The easiest way to work with them is to make them individually and then pack them with a program. I use Alloy’s texture packer which came with the alloy package for Unity. So here are some clothes for a certain dapper character in an upcoming game sitting in the Unity editor here (still needs some work on the AO and other tweaks)…

tumblr_inline_n614tuFglM1qh79fh

So… what are the new maps?

Diffuse Map

Almost identical to the diffuse you’d have on any other model! Easy! The only difference is that you shouldn’t cheat shadows. At all. It’ll look weird. So just do purely what the colour of that part of the model is! You don’t even need to cheat things like fabric weave unless it’s a fabric like denim where the raised parts tend to go lighter, since the weave detail will be on your normal and AO.

The Normal Map

Unchanged. Hooray!

The Specular Map

Gloss is now obsolete, so it’s just spec. Pretty much unchanged, though you may find slightly higher values work better.

Ambient Occlusion (AO)

Unchanged, a core part of PBR, so if you’re not accustomed to them, start getting used to using them!

Metal Map

…Well this is new! Fortunately it’s super simple. On the metal map, anything that is metal colour it white. If it’s not metal, make it black. There are next to no instances where a thing is kind of metal (if it’s a non-metal thing coated in metal, it’s metal, if it’s a metal thing coated in non-metal, it’s non-metal). Basically “Is this part of the map made of metal? Y/N

tumblr_inline_n616ijdCnJ1qh79fh

Here we see links of the chain, the buckles etc. marked out in white. Everything else is black.

Roughness:

Roughness is the new gloss. Also known as “microsurface” because “roughness” can be a bit misleading, after all, when I ask you to think of a “rough” surface, you might be thinking of burlap or gritstone, but in this case we’re talking on a much more subtle scale.

Here are some Alloy assets. An ingot of gold and a basic sphere I’ve put a nice rock material of theirs onto:

tumblr_inline_n617lyu9Qo1qh79fh

Now If I lower the roughness:

tumblr_inline_n617ldxeFA1qh79fh

Notice how the rock now looks wet, and the gold looks very smooth and shiny and highly polished, like a piece of aluminium foil or gold leaf? Remember how a couple of posts ago, I said that wet things look more glossy because water fills in all the small indentations on the surface making light reflect more directly? Basically “roughness” is talking about very small indentations on the surface of an object that make the shine less crisp. An object can still be bumpy but have a low roughness value, like this slate material:

tumblr_inline_n6183nQvo71qh79fh

Or be smooth but have a high roughness like this steel which has a kind of brushed finish:

tumblr_inline_n618a2rGBS1qh79fh

To make a roughness map, I find inverting your spec then bumping up the brightness is a pretty effective quick solution. I don’t recommend ever going any darker than about a light-mid grey personally unless you want a thing to look wet, like very smooth glass or very very highly polished metal. Generally most metals will oxidise very quickly in contact with air and gain microsurface roughness, so it’s unrealistic in most cases to have roughness too low. Too low a roughness value and everything in your game will look as though it’s been shrinkwrapped in clingfilm or is soaking wet or made of jelly!

tumblr_inline_n618rnqE4I1qh79fh

Yeah, let’s try to avoid this.

The glow map

Thankfully works exactly the same as ever.

So there you go! PBR looks great when it’s used all together and it’s definitely the future of games graphics! Try it yourself! Even if you can’t afford Alloy, there are some free resources now, like Lux! ????

Understanding IBL

By | Tutorial | No Comments

Okay, so before I talk about PBR, I need to talk about IBL.

If you’re saying “whuuuut” I don’t blame you! Unless you’re friends with a game graphic artist or a 3D animator, it is unlikely that you hear terms like Specularity or Normal Map on a daily basis, never mind these new specialist technologies!

I’m going to put this in simple terms because honestly I am not a physicist and couldn’t explain in detail how anything works on more than a very basic level!

IBL = Image based lighting

Or, in other words: IBL = make everything shiny in my game look twice as awesome.

Okay, so as I said last time, specularity is how reflective a thing is. It’s very important to understand that everything is reflective. Some things are more reflective than others, but if a thing reflected literally no light, it’d look like a weird black shape cut out of reality. So, everything reflects light, okay.

Let me just show you a picture of the stuff from the last post I did, but instead of the Marmoset IBL shaders, using just generic shaders…

tumblr_inline_n5z15rN7Sa1qh79fh

 

Compared to IBL…

tumblr_inline_n5z17hAtdK1qh79fh

 

Pay particular attention to that little barbell looking metal dealie on the right there (it’s an earring, looks a little weird out of context and blown up big so I can see it!).

Why does image 2 look so much more realistic and also more modern!?

Okay, well, in the first image, the computer is throwing our simulated light at the models and it’s reflecting off appropriate to what we’ve told it is reflective with our spec map. If you were in a hypothetical situation in which your object was floating in a blank black void with no walls or floor, no atmosphere and just a single source of yellow light projected from a circular light source, this is how it would look.

The closest thing I can think of to those conditions would be…

tumblr_inline_n5z1o29aGL1qh79fh

So here we have a cool guy on the moon! There’s no atmosphere to diffuse or colour the light, so the light is coming very strongly from one direction and is very harsh (that’s why his visor is gold-plated to stop it blinding him!) with very dark ,crisp, black shadows. There IS a floor however, and those grey moon rocks and just are reflecting some light back, so we have a reflection in his visor and can see a small amount of light being reflected back on the underside of his gloves etc. HMMM…

REFLECTION, EH?

Yessss… are you getting it now? The thing that makes a shiny thing in CG art look more realistic? The light around you isn’t just coming straight from the sun or a lamp! It’s bouncing all around your surroundings and you and everything around you are reflecting that reflected light, and that’s why when you look at a shiny thing in real life, you don’t just see a round point shine, you see a distorted image of what’s nearby, coloured appropriately!

BUT. When we’re making a game in real time, we can’t calculate reflections from the environment in real time like that! The processing power would be too much! So…as usual… we cheat!

IBL works by using a pre-made static panorama image, and using that as a guide for the lighting. It’s not 100{bea7752067925c33ccbba0b143945eb5f050c98892607a9111f548bbc646f319} accurate, but it’s a lot more realistic looking than lighting coming from a flat coloured source! So this:

tumblr_inline_n5z2ok4EjD1qh79fh

Is reflecting based on this:

tumblr_inline_n5z2p5tWlZ1qh79fh

We can change the image too:

tumblr_inline_n5z2waT0JA1qh79fh tumblr_inline_n5z2wyXbKo1qh79fh

Notice how the shirt behind ALSO changes based on the colour, shape and intensity of the light shining on it because, while the effect is more subtle on a matte fabric surface, it’s still there!

Obviously for the BEST result, it’d be best to take a picture of the actual surroundings in your game and use those as your image.

So if you’re wondering why there’s this jump in graphical quality between the PS3/XB360 and the PS4/XB1 that seems greater than a mere increase in polys would allow for, especially on metal things, but can’t place your finger on why, the short answer is Image Based Lightning plus Physical Based Rendering, which I’ll go into next time!

To be a Games Designer: Make Games

By | Games Design | No Comments

One of the most common questions people ask you when you say you’re a Games Dev, and I’m sure all other Games Devs will nod here, is “How did you become a Games Dev?”

“ How do I become a Games Dev? 

The truth is, there is no one correct path in terms of work or education. I can’t say “Oh yeah, do exactly what I did, get a really low mark in AS level art due to lack of understanding of the difference between illustration and fine art and a teacher with no clue how to deal with me, go to Uni to do English Lit/Japanese on a whim, go into freelance illustration and comics with a factory job on the side to save up for an MA in Games Design and join a small hobby group that’ll turn into a games company! EASY!” Yeah, that’s…a really roundabout way and it wouldn’t work for everybody.

In actuality, what you do in terms of education is secondary to the bigger question: Do you actually like making games?

And no, I don’t mean “do you think making games sounds like a cool job?” or “do you like playinggames?” or “Would you like to be famous for making games?” I mean do you genuinely enjoy the process of designing and making them?

If you claim to enjoy making games and to want to make games but have produced absolutely no mods, no micro games, not even like half-finished ones, no game assets and picked up none of the skills required to be a games dev under your own steam, never taught yourself or tried these things for fun…. If you have seriously never picked up Ren’Py or RPGmaker or AGS or Unreal Ed or Game Maker etc…. I am calling bullshit on your claim. Yes, I am straight up calling bullshit. You don’t actually want to be a Games Dev, you have zero interest in making games, you just like the idea of being a Games Dev because you like playing games and it sounds like a way cooler and more fun job than working in a standard office job or whatever.

I started designing my first characters and levels for games when I was about 6 years old. I loved Sonic (the old 2D ones, it was the 90s) and I would design characters and come up with what their abilities were, and I’d draw up ideas for Sonic zones based on things I saw or read about, and would come up with obstacles Sonic or my invented characters would have to overcome in those environments and draw them up. In my early teens I discovered I could open the texture files for models in ms paint and edit them, and would make my own little mods to enjoy, like adding cool scars to faces or making the character look like a Warhammer Space Marine. I created a whole army list for Warhammer just for fun (it was horribly unbalanced but the fact remains I wrote up history, I drew designs for how the hypothetical models would look, I wrote up stat charts and I playtested them!) I learned to make simple levels in Unreal Ed, I got into the RPGmaker community and made art for games and experimented with making games myself, learning to import graphics and sound, like voice clips I’d recorded, I taught myself about text adventures and the like. I wrote up and ran campaigns for Dungeons and Dragons and the like. Even though the tools were very limited back then compared to now, I was interested enough in making games, passionate enough about it, to want to spend time doing it in my free time.

If you compare how I was about say, playing the flute, there was a marked difference. I played the flute in high school (in the UK, High School is age 11-16 to clarify), I did so because playing instruments was what smart, middle class kids like me did and because my sister played the flute. I was terrible at it and if I’d had any self-awareness I should have given it up. I was terrible because I wasn’t passionate about playing the flute, I didn’t enjoy it, I almost never picked up that flute under my own volition just for love of playing it! I just liked the idea of being a flortist like my big sis. I spent years looking back on teenage me as this huge flake who didn’t put in effort, but now as a games dev, I realise that I actually taught myself a lot of stuff as a teenager I still use now, and created a lot of work. I drew tonnes and taught myself things like anatomy, colour theory, perspective and composition. I taught myself things about games design and making them, and not because some teacher was telling me to; because I enjoyed it!

Being a Games Dev is not always fun. it’s a very involved job with a ridiculously huge skillbase for one particular job title/Unit course, and if you work for a major company, or even sometimes as an indie dev, there will be long hours and crunches and not particularly great pay yet a really high skill and experience level required.

I got to be a games dev because I love making games enough that I was happy to make them as a hobby for nothing. I contacted somebody else who was the same way inclined and we worked well together and we ended up forming a little games company, releasing some titles and running a successful kickstarter and getting attention from big companies I can’t talk about due to NDAs. It could’t have happened if I didn’t enjoy making games enough to do it for nothing in my free time out of pure passion for the act of making games.

If your computer’s had drive isn’t full of docs where you’ve written up game ideas, drawings you’ve done of designs for levels or characters, attempts at making RPGmaker or Game Maker or Ren’Py games or mods etc. etc. There is nothing I can do to make you a Games Dev or tell you how to be one because YOU are the obstacle. If your hard drive is like that, just keep doing it and try to finish some things and connect with like-minded people and collaborate to make finished things. Enter the Ludum Dare competition then refine and sell what you made or release it as freeware! You’ll become a Games Dev. It’ll happen!

A beginners guide on texturing 3D models

By | Tutorial | No Comments

One of my primary jobs at Project BC is texturing. Texturing is what changes a 3D model from something that looks like a statue into something the player can believe is a person or an object within the world of the game.

When I started texturing, I was absolutely clueless about what the different “maps” actually did, so I’m gonna explain here in simple terms what they do and hopefully it’ll help!

Okay so here’s a fancy render of a model:

auria_quickening

And here are the clothes I textured for it in Unity Editor (so this is closer to how they’d look in game):

tumblr_inline_n5pt0jr1ma1qh79fh

These were pretty much the last textures I did before we moved to working in Physical Based Rendering, which uses different textures. I will talk about PBR and how to work with it in another post and just explain the standard texture maps this time. These are set up with Marmoset Occlusion shaders and Skyshop, so use Image Based Lighting (IBL) hence those gorgeous reflections.

The Diffuse Map:

This is the map that will always be there, even if the others are not. Diffuse is how much light the object scatters when light hits it. In layman’s terms, that roughly boils down to “what colour is it?”

Some engines only allow for a diff map, and that’s what gives old games that distinctive kind of flat, cartoonish look.

There’s a reason Vaan’s abs look painted on…

tumblr_inline_n5pu13CWxS1qh79fh

…It’s because Vaan’s abs are painted on:

tumblr_inline_n5pu21L9291qh79fh

(Thanks to Ultimecia for ripping all these texture files and making them accessible! These are, of course, from Final Fantasy XII, one of the best looking games on the PS2. The textures are absolutely fantastic.)

As you can see, if all you have is a diff map, you have to paint fine shadows and detail onto the model (I guess unless you had a phenomenal polycount which just isn’t feasible for games) and also you had to paint on shine to the metal to give the illusion of shinyness. This method can look quite nice if you’re aiming for a distinctive painterly or cartoon look like WoW or FFXII, though limits you to certain light intensities, colours and directions to look right!

The Diff map for our jeans here looks like:

 

tumblr_inline_n5pwbjP9um1qh79fh

IMPORTANT NOTE: While it appears I’ve painted on shadows like the FF12 characters here, in actuality I’ve simply used the AO shadows as a guide to make the denim appear faded on the creases. You can see what I mean about a diff being just colour if I show you the shirt:

tumblr_inline_n5pwjmTGJe1qh79fh

…yeah that sure is some plaid pattern, huh?

If we take out everything but the Diff on our clothes here we get:

tumblr_inline_n5pujyUwye1qh79fh

PS2tastic! (I had to turn up the light a bit because they reflect so much less light now!) these still look a bit more detailed than PS2 graphics because the textures are about 2x or more the resolution a PS2 game would use, but they still have that flat “the details have been painted onto the fabric” look.

So next comes, all together now…

The Normal map:

Normal maps allow us to make the computer’s simulated light behave as though there are details on the model that are not on the poly mesh. We use them to add things like seams and winkles to garments, or even weave texture, pores and creases to skin, to smooth out polygon edges etc. Usually a normal map is made by making the original model very high poly using something like zbrush, lowering the polycount to something a game can handle, but applying the data for how light interacted with the high poly version to the low poly version giving the illusion of extra detail.

Normal maps look like this:

tumblr_inline_n5pw80ieJN1qh79fh

This one was created through a combined effort. Bishop took the jeans model and exported the fabric wrinkles from the high poly version to apply to the low poly version, then I took my diff map and used the denim texture, seams and zips I’d put into place and ran them through a fantastic program called nDo, which plugs into photoshop, to export these small texture details, and then to mix it together with the existing map.

Adding the normals, we get some nice detail:

tumblr_inline_n5px7aF00E1qh79fh

…but those metal things still look kind of dull, don’t they? If we want to really feel PS3/360 era, we want the metals to shine as we move through an environment! How do we do that?

The Specular (and Gloss!) map:

Specularity is something I had trouble understanding because it’s “Shinyness”, but then you’re told that Gloss is ALSO Shinyness and it’s like “Dammit, I’m an artist, not a physicist!” So let me try to explain this as best I can. If Diffuse is how much light and what wavelengths your modelscatters around all over the place, specularity is how much light and what wavelengths it reflectsback the way they came. So the most specular a thing could get would be a very clear mirror and…about the least specular thing I can think of off the top of my head would be…a piece of felt. It is perfectly plausible to have a thing have a dark diffuse texture but still be shiny, like say, a piece of coal! So what’s gloss? Gloss is how smooth the surface the light is reflecting off is. A glossy surface will reflect light back more sharply, resulting in crisper reflections. Surfaces that are wet will be more glossy looking because the liquid gets into all the little cracks and fills them in making the surface smoother for light to reflect off. Rough surfaces, even if they’re shiny and reflect a lot of light, distort the light so that the reflections aren’t mirror crisp.

A spec map looks like this:

 

tumblr_inline_n5py7m4P8N1qh79fh

The lighter it is, the more shiny, or, to be more accurate, the more reflective that part is. So our metal bits, like the zips and studs are considerably brighter than the fabric here. I also made the studs a nice gold colour so they’d reflect with a brassy sheen. I made this spec using nDo, which can generate it from a normal map, but then brightened the metal bits and coloured the studs manually because nDo is automated and wouldn’t know on its own that those bits I want to be metallic.

Applied to our models…

tumblr_inline_n5pynfup0b1qh79fh

Ooooh.

tumblr_inline_n5pyqoPOFP1qh79fh

Sexy.

So what can I do to go better than that!? I mean, they’re looking pretty good now, right? Well, there’s one last subtle thing we can do to just make them a bit nicer and it’s called…

The Ambient Occlusion (AO) map:

Okay so the AO is a map that at first I really didn’t get, but now I love them. Let me explain. When your computer simulates light, particularly light in a game, the simulation is really limited compared to real life light. You will simply not be able to have that number of photons bouncing around in real time, it’s not feasible. This means that your graphics will lack the kind of subtle shadows we’re used to seeing every day in our environment, So to make our models look more realistic we… cheat. We make a map that tells the computer, “even if your lights don’t put a shadow here, I want you to put a shadow here, ok?”

And so we get the AO map. They’re often quite subtle looking:

 

tumblr_inline_n5pzk9YAEa1qh79fh

This one is relatively dark and detailed to get the rough fabric of the jeans looking nice, but also makes sure that we get a nice defined shadow under Auria’s bum to get the shape to define well. I’ve used this technique before on a face to make sure a shadow would fall under the character’s hair too.

Resulting in:

tumblr_inline_n5q1je0zD61qh79fh

Ooooh. Let’s turn that light down a touch…

tumblr_inline_n5q1mpdNMa1qh79fh

Not too shabby!

BUT WAIT! WE MISSED A MAP! A really cool map! One that isn’t on here, but…

Remember how in FFXIII, Lightning had a shoulderpad with glowing bits on?

tumblr_inline_n5q20eggKR1qh79fh

Look at all this glowing stuff! We have Lightning’s shoulderpad, but we also have the eyes and details on those Psicom guys glowing too. How do we do that!? Well, it may sound surprising, but if you want something to glow, you use…

The Glow (and Emissive!) Map:

The great thing about glow maps is that they’re actually super-easy to make. They look so cool that I’d assumed they’d be really difficult, but no, they’re not. Just make a map that’s all black except for what’s glowing. The brighter the colour you put down, the brighter it’ll glow. Wow, yeah, it’s seriously that simple. Just consider making sure your diff map isn’t too bright already under the glow, or whenever light shines on the glowing area, it’ll go extra bright, which isn’t very realistic. So what’s the emission map? It’s an additional map that tells the computer if it should treat that glowing part of the texture as a light source when you’re baking in lightmaps (which I’m not gonna go into here because they’re more a level building thing) for characters and standalone models, they’re not really essential.

So here’s a lightmap of some things that glow in a furniture pack, ie. TV, monitor, clock, phone, lamp, ceiling light:

tumblr_inline_n5q2meo9IV1qh79fh

So in the scene…

tumblr_inline_n5q2xtXpLs1qh79fh

 

These things are “self-Illuminated” and will always glow, even if no light shines on them (note, there’s a little bloom effect added here too in post, that’s not a consequence of just the glow map, but glow combined with a touch of bloom looks really nice!)

So I hope that was educational! There are more maps, like heightmaps etc. but I’m not gonna go into them. You can make pretty good looking models just with these!