Pixelation

Critique => Pixel Art => Topic started by: mikemayday on March 17, 2012, 11:08:37 pm

Title: Dwarf Fortress Sprites - dwarves, tree, boulder, grass
Post by: mikemayday on March 17, 2012, 11:08:37 pm
Hello! I'm trying some work on ~3/4 top-down small graphics for Bay12games' Dwarf Fortress. I'd be very happy to receive constructive criticism. Please shoot me with both technical tips and general stylistic ideas (composition, colour, shapes).

I'm posting the steps on this one (first attempts were horrible, ugh!). It's going to be animated. It's my first tree ever! (http://mayday.w.staszic.waw.pl/gobticons1/smile2.gif)

(http://mayday.w.staszic.waw.pl/~mayday/upload/treewip.png) (http://mayday.w.staszic.waw.pl/~mayday/upload/treewip3.png) (http://mayday.w.staszic.waw.pl/~mayday/upload/treewip4.png)
Title: Re: Small game sprites- no.1: a tree!
Post by: Facet on March 18, 2012, 02:02:07 am
Hi there & welcome :), Your newest tree looks great! lovely colours & sense of form and a huge improvement from your first attempts. However it doesn't conform to 3/4 perspective which seems to be a common issue. I made you a little diagram that I hope will help (in retrospect I shouldn't have pixeled it; it's a bit messy) ;)  

(http://i.imgur.com/qA7Bv.png)

Once you've decided on your viewing angle; in this case 3/4, try and make sure everything conforms to those proportions; in the case of the tree, that ellipse. I like to visualise objects as a series of stacked discs (like the Michelin man) to help me estimate quickly but make sure you're thinking about the whole form and how it connects to the ground, not just superficial, surface elements. On the left is a series of cross-sections through the tree and on the right is a wireframe or skin sketched on top; I use these as guides to wrap shading and details onto.
Title: Re: Small game sprites- no.1: a tree!
Post by: mikemayday on March 18, 2012, 01:32:38 pm
Thanks for the tip! That's a great way to keep track of the perspective!

I am actually not sure what to do with the view. The frontend is supposed to use square tiles, which suggests straight top-down view (though that could probably be changed). I'm thinking of keeping things symbolic (there will be no sense of scale to the sprites anyway) and having the sprites viewed mostly from the front- that way I could convey more detail on the creatures (those bother me the most)

The biggest problem is that the graphics set has to combine a clear representation of the terrain map (from a design perspective as well) AND clean/readable creature/object graphics.
I feel like I'd be more free to pixel the way I want when drawing things from about the eye-level, but at the same time I understand the need for a sense of uniformity to the tileset.
Huge dilemma for me! Guess I'll try doing a bit of both and see how it works.

E: yeah, I did some renders to check what things look like and I think 1/2 topdown is the most I can manage here :P
1/4 (http://mayday.w.staszic.waw.pl/~mayday/upload/1-4%20topdown.png)
1/2 (http://mayday.w.staszic.waw.pl/~mayday/upload/1-2%20topdown.png)
3/4 (http://mayday.w.staszic.waw.pl/~mayday/upload/3-4%20topdown.png)
Title: Re: Small game sprites- no.1: a tree!
Post by: jams0988 on March 18, 2012, 05:37:57 pm
Quote
E: yeah, I did some renders to check what things look like and I think 1/2 topdown is the most I can manage here Tongue
Your 1/2 looks like what most people call 3/4 anyway, hahah. Should be fine. X3
I like your tree, but like Facet said, it's a little weird seeing something so large from directly to the side. It really does draw attention to the perspective. For smaller characters, most games get away with fudging the perspective, so I don't think it should matter too much if you draw those from more of a side view.

What program are you using for the 3D renders? I like the texture on those things. Cool white clay look. I haven't played with Maya or Lightwave in years, now... X3
Title: Re: Small game sprites- no.1: a tree!
Post by: mikemayday on March 18, 2012, 07:46:43 pm
Well, so here's this:
(http://mayday.w.staszic.waw.pl/%7Emayday/upload/treewip5.png)
I feel like it came out too ROUND... but maybe it's still not enough 'from above'?

About the renders- well it appears most people would be wrong because these are EXACTLY 1/4, 1/2 and 3/4 :P I made them in Blender- and this is the default material! It's really ugly in general but I'm using a scene I've set up for nice, natural lighting (all the light comes from the skysphere texture).
Title: Re: Small game sprites- no.1: a tree!
Post by: Facet on March 18, 2012, 08:21:23 pm
Ah, so you're aiming for the fabled 'RPG perspective' which is quite often a strange mash-up :)

Symbolic can look good too; perhaps pure profile sprites on a top-down field especially if they're not going to be scaled or animated? (I haven't played DF) but I think it's important to define what you're aiming for from the start for the sake of consistency. Using basic 3D renders as a guide is great if you still want to achieve that viewpoint but perhaps quickly sketching a mock-up of a whole DF screen could help you figure out where and when to bend or break rules.
Title: Re: Small game sprites- no.1: a tree!
Post by: jams0988 on March 18, 2012, 09:25:16 pm
Quote
About the renders- well it appears most people would be wrong because these are EXACTLY 1/4, 1/2 and 3/4
Hahah, exactly. XD
That's why you can draw them in 1/2 instead! =D

And that's Blender, eh? I played with Blender a year or two ago, but I don't remember the default material looking like that. Hmm. Maybe they changed it, or maybe I have a terrible memory.
I'm liking the new tree. It feels like the trunk and the leaves might be on two different perspective planes, though. It's hard to tell for me, though. Maybe making the trunk slightly wider at the top than the bottom would help, but you don't have much room to do that with such a small sprite. Maybe just a pixel or two?
Title: Re: Small game sprites- no.1: a tree!
Post by: mikemayday on March 18, 2012, 09:53:45 pm
Facet: I'll try both options and do some mockups. Gotta make sure everything clicks together!

jams: the default material has stayed exactly the same. It's just that using typical Blender Lighting it looks like cheap shiny plastic. Like I said, it's all in the global illumination- it makes materials behave differently.

I changed the trunk a bit before reading your post and now I've added two pixels at the top. I'm not sure if it made a difference, really :/
Anyway, some animation!
(http://mayday.w.staszic.waw.pl/~mayday/upload/anitree1.gif)
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: jams0988 on March 18, 2012, 11:40:34 pm
Quote
I changed the trunk a bit before reading your post and now I've added two pixels at the top. I'm not sure if it made a difference, really :/
Whattt? It made a huge difference, hahah! Much better looking. =D
The shape of the roots has a lot to do with that too though, I think. It's much more obvious that we're seeing it from the top with the roots the way they are now. Like the animation!
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: mikemayday on March 19, 2012, 12:52:15 pm
Trying out the messed-up perspective. Somehow it doesn't bother ME- what about you guys?
The creatures lovingly 'borrowed' from RedShrike (who agreed to donating his graphics for the project, yay!), tiles by Dusty (temporarily).

(http://mayday.w.staszic.waw.pl/~mayday/upload/rpgperspective.gif)
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: Cyangmou on March 19, 2012, 02:05:52 pm
I think it won't bother anyone as long as you keep environment perspective on it's own consistent and the charakter perspective as well. From my experience i can say that it starts to look odd if you'll mix up 1/4 1/2 and 3/4 (as you rendered) so that it looks that each thing has it's own perspective. And the angle between the charakters and the environment shouldn't be to big - If you think of Zelda-perspective like backgrounds with sideview sprites the credibility isn't the best as long as you don't use a very low-res and simple style (e.g. 8x8 NES sprites with high symbolic look).
I really like the stuff you have so far, keep on working.
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: jams0988 on March 19, 2012, 03:37:54 pm
Looking great, imo. What's with the patchwork grass, though? Is it staying like that? That'd be interesting...
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: mikemayday on March 19, 2012, 04:07:52 pm
The patchwork is due to the way the visualizer currently works - it transfers data from DF pretty directly- thus it retains the colour variation of the grass tiles that is present in DF. (it doesn't help that in DF every tile is a different species of grass... hopefully that will be changed).
Title: Re: Small game sprites- no.1: a tree (now animated)!
Post by: mikemayday on March 19, 2012, 09:01:37 pm
Ok, here's some old stuff I've been reworking lately. The frontend will be using different zoom levels and I'd like to have dedicated icons for at least both 16px and 32px.
So while I work on some larger icons I'm interested in your opinions on these fellas.
The original civilian dwarves were made by Tocky- fantastic lineart and old-school colours- but sadly those colours didn't match the rest of the graphics that have already been made for DF. Back then I remade them to some more vibrant colours.

The soldiers are: recruit, wrestler, swordsman, axeman, hammerman, maceman, spearman, pikeman, lasher, crossbowman, bowman, blowgunman

(http://mayday.w.staszic.waw.pl/~mayday/upload/16pxdwarves.png)
Title: Re: Small game sprites- 16px dwarves
Post by: jams0988 on March 19, 2012, 10:18:00 pm
Quote
The patchwork is due to the way the visualizer currently works - it transfers data from DF pretty directly- thus it retains the colour variation of the grass tiles that is present in DF. (it doesn't help that in DF every tile is a different species of grass... hopefully that will be changed).
DF....? Dwarf Fortress? I'm not familiar with the game, sadly. =(
Does it really have so many random tiles everywhere like that? Is it a really pulled out view or something?
The grass actually does look kind of cool like that, anyway. In a charming nonsensical sort of way, at least. =)
Title: Re: Small game sprites- 16px dwarves
Post by: mikemayday on March 20, 2012, 12:28:29 am
Yup, Dwarf Fortress and charming+nonsensical is a perfect two word description of the game :)
In the game itself the grass only alternates between two shades of green and four symbols. The visualiser pulled out the game inner data though- hence the wacky patchwork- which, I agree, looks interesting.

Now, I've cleaned up the tree animation a bit:
(http://mayday.w.staszic.waw.pl/~mayday/upload/tree6.gif)

And this guy is up for critique:
(http://mayday.w.staszic.waw.pl/~mayday/upload/manager.png)

step2: (trying out various thinks, tell me what you think works and what doesn't!).
(http://mayday.w.staszic.waw.pl/~mayday/upload/manager2.png)
Title: Re: Small game sprites- 16px dwarves + 32px dwarf
Post by: API-Beast on March 20, 2012, 01:22:50 am
Actually your renders aren't accurate as you rendered them with a perspective camera and not with a orthographic one (as you have always in a 2D game). That makes quite some difference. I've made some similar renders before, no idea if they help:
http://files.mrbeast.org/ArtStuff/LPC/30.png ~3/4 view
http://files.mrbeast.org/ArtStuff/LPC/50.png ~1/2 view
http://files.mrbeast.org/ArtStuff/LPC/70.png ~1/4 view
Title: Re: Small game sprites- 16px dwarves + 32px dwarf
Post by: mikemayday on March 20, 2012, 02:17:01 am
Well, the subject of those renders was the sphere, not the cube. And I think drawing a sphere with elements of linear perspective wouldn't clash with the surrounding cubical geometry being orthographic- the outline stays the same.
EDIT: just to explain more- I also thought it'd be a GOOD idea to just draw the tree in linear perspective, that's why I did those renders this way. But when it only comes down to half a pixel of a difference...
Title: Re: Small game sprites- 16px dwarves + 32px dwarf
Post by: mikemayday on March 20, 2012, 10:32:54 pm
Did some more work on the 16px military. It's tiny!

(http://mayday.w.staszic.waw.pl/~mayday/upload/dwarven_military.png)

And just a boulder.
(http://mayday.w.staszic.waw.pl/~mayday/upload/boulder.png)
Does it match the tree in style?

I'm gonna have to do my own grass tile now I guess. Sad! Dusty's tiles are all very good, but that grass is a masterpiece. Don't know what else to do besides copying it :/
Title: Re: Dwarf Fortress Sprites - dwarves, tree, boulder.
Post by: jams0988 on March 24, 2012, 12:56:07 am
Boulder is nice and matches your tree. =)
Your little guys are a bit hard to read though, especially in regards to what they're holding. Are these meant to be viewed at 1x, or?
Title: Re: Dwarf Fortress Sprites - dwarves, tree, boulder.
Post by: mikemayday on March 25, 2012, 10:36:03 pm
Yeah... with crits from Pixeljoint I've been through quite a few iterations now, but I'm not happy with any of them in the end. They ARE supposed to be viewed at 1X.
Maybe it helps that they're supposed to be viewed on a darker background in the game? Anyway, try these:

(http://mayday.w.staszic.waw.pl/~mayday/upload/dwarves2.png)
(http://mayday.w.staszic.waw.pl/~mayday/upload/military6.png)

I actually prefer them with the darker armour and brighter weapons.

And also, here's my try at a grass tile:

(http://mayday.w.staszic.waw.pl/~mayday/upload/grasstile.png)

(http://mayday.w.staszic.waw.pl/~mayday/upload/grasspalette1.png)

(http://mayday.w.staszic.waw.pl/~mayday/upload/grasspalette2.png)
Title: Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass
Post by: Seiseki on March 28, 2012, 09:52:52 am
Wow that grass looks great!

For the tree animation, it looks really off..
If you imagine the wind blowing at the leaves, it needs to be gradual from one side to the other, instead of all the leaves suddenly twitching in one direction and back.
Title: Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass
Post by: jams0988 on March 29, 2012, 07:30:09 am
Quote
For the tree animation, it looks really off..
If you imagine the wind blowing at the leaves, it needs to be gradual from one side to the other, instead of all the leaves suddenly twitching in one direction and back.
That's true when a breeze first starts pushing a tree, I guess, but while the tree's actually being blown on, the leaves just jiggle around everywhere randomly:
http://www.youtube.com/watch?v=LbWhFyYFC1k

His tree animation is pretty decent as-is, imo. It'd be better if the outline actually moved, though.
And of course it'd be even better if it had intro and outro frames for when the breeze starts and ends, like you said.

I'm not sure about the grass, though. I understand you're using symbols for your trees and enemies and stuff, so their relatives sizes aren't going to make any sense, but having the grass texture so large looks very strange to me. Don't most games with maps panned this far out just have basically flat green surfaces for grass? That's basically all you should see of grass from so far away, anyway...
(http://oyster.ignimgs.com/wordpress/www.ign.com/3634/2012/02/final-fantasy-tactics-advance-gba.485343.jpg)
I think something more along those lines would work better for what you're doing!
Title: Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass
Post by: Charlieton on March 29, 2012, 07:22:22 pm
I did a screen capture from an emulator of that same scene, 'cus I felt like it and thought an unsmoothened reference picture could provide better info.

(http://i.imgur.com/dIlxU.png)

Other than that, I'd like to say that I really like seeing such nice art for Dwarf Fortress! Keep it up.