AuthorTopic: [C+C] [WIP] Exodus (Espiritus iudicium/ Espiritus botanica)  (Read 14710 times)

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [C+C] [WIP] Tree-judge-armour-thingy

Reply #30 on: January 27, 2015, 11:04:32 am
i know nothing about FF but it seems to ME if it was a dude that turned into a tree, it makes more sense the tree is wearing the armour instead of having some root holding it up (which is basically like trying to hold something up with ur foot).

i had another idea that there are vines wrapped all around the tree which do all the mobile arm-waving stuff and give stretch range to the sword attack as well as maybe being able to do an entangle move.

and by the way u could even give him a sword and shield and then have the scaled just hanging off some overhead branch for the reference to FF.

any chance u could drop ur character into a rough sketch of how the game is laid out at actual game res?
im trying to get an idea of the res and scale of this guy vs the HUD and hero sprites.
he seems pretty high res right now.

Offline lolzolaura

  • 0001
  • *
  • Posts: 27
  • Karma: +0/-0
    • View Profile
    • My Deviantart

Re: [C+C] [WIP] Tree-judge-armour-thingy

Reply #31 on: January 27, 2015, 12:33:18 pm
The screen I am working with is 544*416px. This is standard size for RPG Maker, fyi.

so the layout would be like this.

You have your party on the right, as per classic FF. Enemy/enemies on the right. And your battle screen at the bottom.
Everything is placed on a 32*32px grid, with subdivisions at 16px and 8px.

Hero sprites are being worked on though. And the size of the party battlers can vary too. Someone made a nice format for animated battlers, so yeah. With the Idle sprite fitting in 32*64px, and using the full 96*96px for the animations.

EDIT:

So more like this. Tried to make him less box-y, and now it's more of a tree-guy instead of just a tree with a needlessly sophisticated root.

Full new palette in the upper right corner.

ANOTHER EDIT: couldn't help but give our buddy a face.
« Last Edit: January 27, 2015, 08:51:10 pm by lolzolaura »

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: [C+C] [WIP] Tree-judge-armour-thingy

Reply #32 on: January 28, 2015, 08:27:10 pm
Edit:
<-- single frame

Quite a bit of improvement overall. The texturing on the bark looks better too. That said, I've got a few things to point out though. I (mostly) addressed these in the following animation:


<-- animation

Firstly, there's one major thing you might want to be aware of in the new composition -- it's called "flyswatting".

In the case of your tree's value-contrast and silhouette combined, the image looks like a bug splattered on the page. It's difficult to see this unless you step back completely and look at the image objectively in its 2D contours/edges placed against the negative space, while also keeping in mind the contrast in color values across the form (as well as the 3d form itself in terms of light and shadow being cast).

The reason your image looks flattened is because, number one, your lighting isn't casting shadows which therefore leads to number two, which is that your image appears formless, which is probably caused by the fact that you were probably not considering its 3d form (or much of anything else aside from the subject matter you intended to draw.) This is definitely a beginner's mistake, but if it's not corrected, you could be drawing for years without realizing what's wrong with your art. :(

Thankfully there's hope -- you just need to be careful where you place your lighting values, and also be conscious of your silhouette while constructing your overall 2D form (i.e. limb-placement -- in this case, take that literally -- which must be placed in interesting ways in relation to the overall silhouette) in order for your drawing to appear interesting at first glance. I cannot stress how important this is because if the viewer doesn't care for your drawing at first glace, he's not likely to stick around to look at the details you painstakingly worked on either.

In this particular case, regarding colors, you have 5 values to work with -- and that's plenty. You have the lightest color (which should be used sparingly and only on the places you want to draw attention to) and you can use (up to) the next-to-darkest color to shade any closer parts of the form (i.e. anything that uses the brightest highlight color). The highlighted areas draw attention to themselves as being more important since they appear closer. Since our brains are wired to care about the things closer to us first (as they are likely to be the most dangerous!), we notice lighter stuff (such as the shine off a snake's scales) before we notice anything else. Only then does our brain process the darker areas (which generally get lumped into the silhouette in our brain) so that, ultimately, we will notice details in those areas *much* less and devote more processing power to the more important (read: dangerous) elements first.

===============
  Form Composition:
===============
You can think of the silhouette and darker areas as the brain's peripheral vision -- with that, everything is, by definition, much less detailed and more imprecise, which means more shape and color variation is required to get its attention. The more homogenous these 'peripheral' areas are, the less your brain cares about them -- this is the reason the silhouette must be interestingly-shaped and also the reason you must offer a reasonable amount of variation in light and dark areas across the whole sprite (in order to break it up).

Regarding the 3D form's casting of shadows onto other parts of the form (and the depth of the part of the form you are currently rendering), you can represent the deeper (more-shaded) areas with the second-brightest color as the highlight would be used on the closer forms and shade down to the darkest possible color (colors 2-4, with color 5 being the darkest color [and generally only used for outlining and emphasis] with color 2 being the brightest highlight on the deeper areas). In terms of shading, it is sometimes easier to use texture to make the form interesting (rather than shading it directly) because you don't have to be exact with it as long as your representation reads well (and, in pixel art, this is a HUGE time-saver) and this allows pixels to be more efficient than regular digital art in some cases.

================
  Shape Composition:
================
As a beginner pixel-artist, one might look at my edit, and at first glance think "whoa! how'd he do that??" -- but this reaction simply stresses how important the above information is to learn. Representing forms must be learned first before trying to refine them (after all, although a tree might appear formless at first glance, everything in nature has something behind it driving the formation of its eventual shape.)

If you open up a program like Graphics Gale, and look at the two image frames in the animation above, back and forth, it will be clear to you that the number of edits I made on this piece is relatively small -- and are also very simple too. At first glance, you might think it to look like a few random pixels placed in the shadowy areas -- and you'd be partially right -- except I placed them carefully with special care as to which values I used at what places, ensuring I had enough shadow between certain areas to define their form.

================
  Regarding shadows: 
================
It's always good to place the most-used color you want in a given area down first (but **don't** use the outline color in there though, and this applies even when you don't use a traditional outline!!) -- After filling this area, add lighter and darker colors to define detail and texture later -- but only after you have established a light direction and then used it to cast the respective shadows and placed them where you may. This is pretty fast in pixel art, especially when working with 4 colors -- after all, just as soon as you're done setting up your lights and shadows, you're generally almost done -- the only stuff that's really left is texturing and refinement. And that leads me to my last point:  Save refinements (such as texturing) for last.

===============
  To sum it all up:
===============
It's better to have a well-composed image with proper lighting representing the shapes and forms than one with refined lighting and details but also fundamentally broken shapes and forms. The latter (fundamentally broken 2D shapes and 3D forms) is the ultimate reason your image looks flyswatted.

In your case, this is because, alongside an incomprehensible and uninteresting silhouette, the bright highlights are used across the entire shape of the silhouette -- this blends every line and every part of the form into a single-colored shape (keep in mind, we're talking about the brain's perception here) making a single, large, bright, formless shape. The key reason for this is that all the colors being so similar makes the shape appear "homogenous" and the brain unconsciously interprets this homogenous shape as a lumped together single blob of color.

To illustrate this, try looking at your latest image with squinted eyes, and then try to discern where the individual shapes are -- now do the same to my edit -- Which is easier to see, and why is this so?





Hopefully you understand now that, to fix this, you'll have to "break-up" the shapes. This is best done by breaking shapes into imaginary 'layers' (in this case, just two) across the image to give a sense of depth in some areas. This can be done easily with 4 colors because 'layer 1' consists of colors 1-3 (which appears closer to us) and 'layer 2' consists of colors 2-4 (which appears slightly farther from us depending on the intensity of the color values chosen), which ultimately gives the illusion of depth across the whole image without you even having to be entirely conscious of it while you're doing it. When you focus on breaking up the 2D shapes by way of using depth to accomplish this, you automatically achieve a sense of 3D space without much effort. The lighting still is required to cast shadows on the form properly -- but these don't have to be accurate when the shape a shadow would make would break-up an existing shape up too much. In this case, the shadow can be consciously omitted for the sake of better readability of the image.

The below image should help you to recognize these "shapes" so that you can understand the difference in why my edit reads so much better as a whole than the original:

My Edit:


Your Original:


As you can see, there are a lot more shapes broken up in my edit than there are in the original. The brain distinguishes the boundaries by these broken imaginary 'lines' which are generally led by the highlights and darkness when separating the shapes using depth. As you can see in my original edit, it is quite effective.
« Last Edit: January 28, 2015, 11:36:42 pm by astraldata »
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/

Offline Decroded

  • 0100
  • ***
  • Posts: 1285
  • Karma: +3/-0
  • Oh hai
    • View Profile

Re: [C+C] [WIP] Exodus (Espiritus iudicium/ Espiritus botanica)

Reply #33 on: January 28, 2015, 11:34:15 pm
I'd go for stronger shading than that as it still appears a bit flat.
But most of all I guess if there's a theme that the dude somehow turned from a human into a tree, then it makes sense to primarily have some limbs that resemble the original human form.
And then add just a few extra branches selectively instead of just making so many of them to fill the square.
The way he looks now reminds me of a mime in a box:


Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO

Re: [C+C] [WIP] Exodus (Espiritus iudicium/ Espiritus botanica)

Reply #34 on: January 28, 2015, 11:50:00 pm
I'd have to agree with Decroded --

My edit was only intended to show you the basic idea of how to represent forms a bit more carefully, and also explain how to break them up for better readability.

To help with this, you can definitely throw more shadows on the tree than what I did in my edit. It should definitely help the depth to add an extra color or so to the palette and try using it to describe depth with a third 'layer' alongside better shading of the existing forms.

(Hint: trees have lines the bark follows -- use these to round out the forms better -- and also shade the trunk more like a cylinder instead of a flat piece of wood.)

Regarding the tree as a human idea, you could have some armor dangling from it like breastplates and more things that resemble toes and fingers/clothing/etc. to imply the idea that something horrible just happened to this guy (i.e. a pretty frightened look on the tree guy's face.)
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/