Make something A.Typical, part 2

This is a post by Henri, our super brilliant artist in this series of developer diaries. I’ll just step aside, and let him take center stage:

Heya,

My time to post something here.
Arvind wanted a graphics-related article out of me, so I’ll empty my heart here then.

1. The untypical rpg art of the A.Typical RPG
For me, the difference between an average JRPG -clearly our influence- and A.Typical RPG is that, as a comic artist by nature, my natural approach to graphics is this flowy (or shakey) lineart and bold colors. Everything is done in free form, without a locked 32×32 pixel grid, where you plant cloned trees and grass stumps. These visuals are closer to a point´n´click adventure game (those I love), with less areas to visit, but each having its own history and logic, and its own unique moment in the narrative. I’m not exactly sure which way would’ve been faster, mimicking a tile-look or throwing this in free form, but ultimately, I felt like this is something I am more comfortable with, and I can actually pull off doing 10 different settings and tons of characters like this. Its way easier to finish a gargantuan task that you´re comfortable doing, than a small task that you´re not so comfortable with, pretty much. Same I apply for any illustration that I have to work on. As in, non-game things.

2. Arvind´s sketch
Leon_Kilean: so yea I’ll work out the girl´s dorm
Arvind: cool
Leon_Kilean: I’ll just go along what you’ve sketched.
Arvind: sure thing, ask me if there’s any help you need

So that’s pretty much how it starts. We use Dropbox to share our files. Its just the right program for us, since I can just edit some graphics-file (we use .png, mostly) and it automatically updates at Arvind´s end. He comments on it, I add something. So, lets open up the girl´s dorm sketch.

I tend to add some empty space around the levels, something that Arvind doesn’t add much of, since he works purely from the code/gameplay side. For me, empty represents time for the player to walk around and discover things, arty farty nonsense areas. Sink in. But this one I wanted to keep intact, for two reasons. First being, its very closely tied to a certain gameplay-event, so I cant just add and reshape the areas without breaking that. Second, I found something interesting in the shape as it is. A Small room, a single screen, sorta claustrophobic. It serves as both a intimate space, story-wise, and a gameplay-related tense moment, which I mentioned earlier, but wont spoil any further.

The first thing I work out is the walls and the floor. Strong green for the walls, dark red on the floor. There´s a tricky part on the right top. The bathroom. Vertical walls are ok, but horizontal walls that are in the middle of the screen space are pretty tricky, since the player should be able to move both in front and behind these, and he should ALWAYS see what he is doing.

3. Trickery
After about 5ish hours of work and a few cups of coffee in the bladder or out of it,
we’ve accomplished this much.

As I said, the bathroom was tricky. What I chose to do is, paint the horizontal wall you can go behind as cracked. Either it really IS broken like that, or its just for the player.. Use your imagination. The blue rugs in the bathroom are very important, since they imply that there´s a doorway/some empty space you can walk thru.

Then, the flowers I cloned, all light effects and shadings are on their own layers, props and things are on their own layers.. or in their own groups. Group folders are so cool, learn those. The cool thing with grouped layers is, you can have stuff like a master alpha channel for the whole group, and it affects all the layers inside the group. So basically, I drew the broken wall as totally opaque, with the flowers and whatever detail layers it has, and THEN added an alpha mask on the WHOLE group, the wall and its goodies, and made the GROUP transparent. Easier to edit the stuff like that. I always try to keep my files as dynamic as possible, especially important with games, since there usually are plenty of changes.

4. Overlay and the final piece

I rest for a day or two, clear my brains a bit.
And then I spend a good 3ish hours on finishing the level up.

Notice that I painted some posters on the transparent, broken wall. I didn’t have to edit any alpha channel settings, I can just add new layers into my broken wall-group and they´re automatically affected by the master alpha channel, which gives it that translucent look. No hassle, all is automatic. Sweet Photoshop, how I love you.

Oh and in case I didn’t mention, the level looks like this, in the files:

A.Typical RPG´s level graphics are actually on two planes. There´s the ground plane, and then there´s an overlay, that draws on top of the player. So I separate all the light and shading effects, and things that are on top of the player, and make an own file out of those.

5. Final words and IOTY

–Before I shoot myself. Nah kidding. But I just had such an dramatic sub-title.
Okey so I hope we’ve all learned something out of this, or if not, at least entertained ourselves for a few mins. Do keep watching/following/worshipping us, oh and feedback and comments – we love that stuff, keep it coming!

´till later,
-Henri