AuthorTopic: Dwarf Fortress Sprites - dwarves, tree, boulder, grass  (Read 12593 times)

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile
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!

« Last Edit: March 25, 2012, 10:36:18 pm by mikemayday »

Offline Facet

  • 0010
  • *
  • Posts: 425
  • Karma: +3/-0
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #1 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) ;)  



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.
« Last Edit: March 18, 2012, 04:59:49 am by Facet »

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #2 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
1/2
3/4
« Last Edit: March 18, 2012, 08:40:49 pm by mikemayday »

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #3 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

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #4 on: March 18, 2012, 07:46:43 pm
Well, so here's this:

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).

Offline Facet

  • 0010
  • *
  • Posts: 425
  • Karma: +3/-0
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #5 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.

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #6 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?

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree!

Reply #7 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!

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Small game sprites- no.1: a tree (now animated)!

Reply #8 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!

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree (now animated)!

Reply #9 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).

« Last Edit: March 24, 2012, 10:42:39 pm by mikemayday »

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: Small game sprites- no.1: a tree (now animated)!

Reply #10 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.
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Small game sprites- no.1: a tree (now animated)!

Reply #11 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...

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree (now animated)!

Reply #12 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).

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- no.1: a tree (now animated)!

Reply #13 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

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Small game sprites- 16px dwarves

Reply #14 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. =)

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- 16px dwarves

Reply #15 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:


And this guy is up for critique:


step2: (trying out various thinks, tell me what you think works and what doesn't!).
« Last Edit: March 20, 2012, 12:55:13 am by mikemayday »

Offline API-Beast

  • 0010
  • *
  • Posts: 292
  • Karma: +0/-0
    • beast_pixels
    • http://pixeljoint.com/p/35725.htm
    • View Profile

Re: Small game sprites- 16px dwarves + 32px dwarf

Reply #16 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

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- 16px dwarves + 32px dwarf

Reply #17 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...
« Last Edit: March 20, 2012, 05:25:22 am by mikemayday »

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Small game sprites- 16px dwarves + 32px dwarf

Reply #18 on: March 20, 2012, 10:32:54 pm
Did some more work on the 16px military. It's tiny!



And just a boulder.

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 :/
« Last Edit: March 21, 2012, 03:41:27 am by mikemayday »

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Dwarf Fortress Sprites - dwarves, tree, boulder.

Reply #19 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?

Offline mikemayday

  • 0001
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile

Re: Dwarf Fortress Sprites - dwarves, tree, boulder.

Reply #20 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:




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

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





« Last Edit: March 26, 2012, 02:15:42 pm by mikemayday »

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass

Reply #21 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.

Offline jams0988

  • 0010
  • *
  • Posts: 346
  • Karma: +0/-1
    • View Profile

Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass

Reply #22 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...

I think something more along those lines would work better for what you're doing!
« Last Edit: March 29, 2012, 07:32:55 am by jams0988 »

Offline Charlieton

  • 0010
  • *
  • Posts: 167
  • Karma: +1/-0
  • awkward dancer
    • View Profile

Re: Dwarf Fortress Sprites - dwarves, tree, boulder, grass

Reply #23 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.



Other than that, I'd like to say that I really like seeing such nice art for Dwarf Fortress! Keep it up.
Det skulle vara lätt för mig att säga att jag inte gillar dig, men det gör jag; tror jag