Castle Paradox

[St. Ajora]

To celebrate me not being dead, here's another art thread. This is sort of a "technique" thread showing the process I went through to get an enemy from a piece of paper to my game.


Step 1: Scanning

The image above is a pencil sketch with highly increased contrast. There's really not a lot to say about this step, except that the darker your lines are in this step, the easier step 2 will be.

It's worth noting that your sketch doesn't have to be that great. This sketch, for example, is much better than it needs to be for my purposes here. A pixel in the finished product represents several millimeters on paper.


Step 2: Outlining

Click on the images to enlarge them.

Now, reduce the image to whatever the intended sprite size is. The monk will be a "huge enemy," so I made sure that the height of his sprite, the larger dimension, was 80.

With the resize, you'll notice that your pencil sketch doesn't look so good anymore. At this scale, you can't simply change the contrast to make the outline instantly appear. You'll have something like the picture on the left up there.

Add a new layer to your picture and dim the transparency on the pencil layer. This is the easiest setup to draw the pixel outline. If you're not working in a good paint program, you can do it, too, it's just harder.

This step is also fairly easy. You should get something like what's on the right. Yes, his left leg is a little wonky, but that comes from the sketch. I'll fix that before the sprite is done.


Step 3: Color

I highly recommend that at this point, you import your outline graphic into the OHRRPGCE. For this step, merely choose which colors go in which areas. Anyone should know how to do this.

Don't choose too many colors if you plan on shading it. Note that the headband and the vest are the same color, as are the wristbands and the hair. Choose the lightest color for that area so that the shading will darken it, unless you're making a very shiny object that will have a shine spot on it.

If you're going for a flat, cartoony look, this is an acceptable place to stop.

Step 4: Shading

I have not yet done this to the monk sprite, nor am I really the best one to talk about shading. But, since I'm here, a few tips.

Hopefully you limited yourself to five or so colors in step 3. For each color, give yourself two more shades of it if possible; if you have too many for that, choose your most important colors and give them priority.

Figure out which direction the light is coming from. Ideally, this should be the same throughout the game. Now, picture your sprite as a 3-D object. If light is hitting it from that direction, where does the light not hit?

From there, use your style of shading and best judgment. There are many, many styles of shading, depending on what look and feel you're going for. Discussion of dithering and other techniques is beyond the scope of this post, but hopefully you learned something here.

---

Good luck with your graphics! I'll make sure to post the finished monk sprite here when it's ready.

[LeRoy_Leo]

Very good. I was wondering exactly how this could be accomplished. Thanks for taking the guess work out of it in advance.

[St. Ajora]

I did say I hadn't finished yet... but since you asked so nicely, here's a screenshot with the finished monk and other flashy graphics.



Unfortunately, JPG has dramatically decreased the image quality, so it's hard to see exactly what I did there. It's worth pointing out, however, that I did some tweaking with the outline to get it how I wanted. The leg and chest are different and I removed the nose entirely.

Incidentally, the wisp enemies were drawn using the same technique:


...as were all the monsters in the other screenshots. The extra detail in the sketch here is striking, though, which makes me want to release an "Art of" book along with the game, like Amano's concept art books.

[LeRoy_Leo]

Thank you, Miss Ajora. Those heads are fricken awsome. The emotion in their faces is a little bland, but what does a head have to laugh about these days?

One more question. Where did you do that background? The leaves and smudging in the trees and ground looks familiar to me.
_________________
Planning Project Blood Summons, an MMORPG which will incinerate all of the others with it's sheer brilliance...

---msw188 ---
"Seriously James, you keep rolling out the awesome like gingerbread men on a horror-movie assembly line. "

[Shadowiii]

This is way off topic (and may come off as harsh) but those hero graphics look way too much like FFV heroes. Of course, I'm one to talk, being the maker of FF6 style NPCs, but the point still stands.

The monk is nice, but his chest area seems to be done more with a gradiant then actual shading. I like his pants, though. The whisps are nice too, though they look a tad flat.

Did you draw that backdrop? It looks quite awsome (though it is green trees with red leaves on the ground )
_________________
But enough talk, have at you!

[St. Ajora]

The graphical style was intentional, as I said in the screenshots thread, so maybe that's a compliment. Take a look at the walkabouts, which are also FFV-style, except formatted for 20x20.

As far as shading goes... I also said that I'm not the best one to talk about shading. I hate how the vest looks, too.

The background, since both of you asked, was done in Paint Shop Pro, using some very easy techniques. I think that background took me around twenty minutes to do, maybe a bit more. Those techniques I'll keep to myself, at least for now.

Red leaves on the ground, green on the trees is actually normal in a forest. Didn't you just have a forest avatar? You should know that. The leaves fall, gather, and turn red. Now, what's not normal is pinecones without any pine trees and maple leaves with no maple trees. I could also complain about the relative size of the leaves... but let's just say that it's all for aesthetic purposes anyway. Maybe all the other trees are behind the "camera."