AuthorTopic: Box in 12/16 angles OR RTS-units in DDP-style  (Read 6868 times)

Offline dkh

  • 0001
  • *
  • Posts: 52
  • Karma: +0/-0
    • View Profile
    • Indiana Jones and the Fountain of Youth

Box in 12/16 angles OR RTS-units in DDP-style

on: October 28, 2007, 10:39:58 am
Hey,

I'm trying to work on sprites for a real-time strategy game. Since I'm not yet a very accomplished pixel-guy, I stick to the stuff I think I know. So, I recently made that enemy for Dodonpachi and now I think this style might look really good in a strategy-game as well.

The only problem: while Dodonpachi sprites only have to be one-directional (most enemies face down), I need 12 or 16 angles (north, east, south, west and either 2 or 3 directions in between). Now, that sounded pretty impossible at first, but then I realized that the Dodonpachi-style is geometrically very easy, so if I am able to draw a box correctly in all those directions, I should only have to apply the same method to the boxes and shapes on my sprite and, all of the sudden, it all seems pretty doable.

So, I started studying the box in 16 directions, but I can't get it to look right and I start to wonder whether there might be any tricks or anything I don't know about. Here's my current attempt (which I know, sucks - shifting volume, shifting position):



Can anybody give me any tips or quick sketches etc. to help my here. Or, has anybody any experience in drawing the directions for RTS-units? I know that it's common technique to use pre-rendered graphics in those game (mostly because of all the directions, I guess), but I'd really like to stick to pixel art, here.

Oh, and here (shameless self-promotion) is the Dodonpachi-styled enemy that I posted before and now want to turn into a RTS-unit:



Any help is appreciated.

Offline baccaman21

  • 0011
  • **
  • Posts: 549
  • Karma: +0/-0
  • It's critique, don't take it personally.
    • View Profile
    • Linked In

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #1 on: October 28, 2007, 12:19:16 pm
'tis all about construction. But first things first...

you need to work in units divisible by 8's for rotations, this will become apparent as you get further on, but generally when you do rotating units you'd work in 8, 16, 32's 64's and so on...

For the purposes of this example i'm gonna work in 16. But if you look at the F1 car in my sig you'll see it's in 32. Any more than that and you're making it hard on yourself and it's prolly a bit overkill.

You need to look at the object your gonna create and break it down in your mind into smaller elements. And animate each element into a rotation and then combine them.

Then it's 'simply' a case of construction:

- You need to work out a center line where the everything rotates around (that will help eliminate the positioning issue)
- next begin to define the rotational limits of the most extreme elements of the element (draw an elipse that encompases the element {in the the correct plane and attitude obviously})
- Then break that elipse down into segments, half it, half it again and again until you have an elipse that's split into 8, 16, 32, 64 etc...
- This will form the template for the bounding boxes corner points.
- Next up, define the points of your box, then animate them over 16 frames...
- add your details and shading... and bobs your uncle... one spinning thing

Have a look at this to get an idea:


That should set you on the right track especially for the DDP style ships, I hope you see how simple it is to create the basic shapes? The skill is the rendering of those shapes and being able to 'sculpt' them into more interesting shapes... the trick is to work in elements and then construct the whole from those pieces... (like lego) make the components, spin them and then combine... once combined you can then add additional shading, AA and what have you to gel them together...

It's long winded but the results can be fabulous. I can so visualise your ship using this method.

Of course, you could try and render it as a whole, but I think you'll discover it's a lot more difficult that way, as breaking it down will allowyou to focus on each element without getting distracted.

The racing car in my sig was done exaclty like this: the wheels, the areofoils, the chassis, the air intakes, all rendered spinning on the spot then glued into postion after wards on a generic (eliptical) template...

Good luck.

:)





« Last Edit: October 28, 2007, 12:27:10 pm by baccaman21 »
Buy the book - The Animator's Survival Kit by Richard Williams

www.burnzombieburn.com

Offline dkh

  • 0001
  • *
  • Posts: 52
  • Karma: +0/-0
    • View Profile
    • Indiana Jones and the Fountain of Youth

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #2 on: October 28, 2007, 05:24:08 pm
Wow, thanks a lot. That is a very smart technique that looks and works great, I just tried it a few times. On the down-hand, it doesn't work very quick. Granted, I'd get faster as I go along, but whipping all the ship-parts on their own seems - unfortunately - very hard and, as I said, very, very time-consuming.

I had a little problem when I tried putting animated elements together: how do you know where they should go exactly? I did it by eye and it looked okay, but I was a bit unsure about it. Like, your box with the two additional ones at the sides: did you just go through each frame and stick them on there or did you somehow knew where exactly they had to go?

In the meantime, I have also sinned and worked on a little model (despite still preferring pixel-art), maybe I could also take those renders and touch them up.

Offline baccaman21

  • 0011
  • **
  • Posts: 549
  • Karma: +0/-0
  • It's critique, don't take it personally.
    • View Profile
    • Linked In

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #3 on: October 28, 2007, 05:49:08 pm
I had a little problem when I tried putting animated elements together: how do you know where they should go exactly? I did it by eye and it looked okay, but I was a bit unsure about it. Like, your box with the two additional ones at the sides: did you just go through each frame and stick them on there or did you somehow knew where exactly they had to go?

In this example I was quite haphazard and slapped it - knowing roughly where I wanted them to go...

Ideally when you're creating the components you can place a pixel or two as guides that you animate into the rotation... then you 'simply' ;) glue them together after.

In the meantime, I have also sinned and worked on a little model (despite still preferring pixel-art), maybe I could also take those renders and touch them up.

Nasty Sinner indeed!

If you do choose this route another word of advice... one of the issues IMO of rendering a template using 3d apps is that the apps tend to introduce 'true' perspective... (as in a vanishing point) personally I don't like this... particularly when you've got the final results in game you tend to get all this weird ass perspective stuff going on that just looks odd in context...

Better to ditch perspective completely and have no vansihing points.

You seem to have done quite well at minimizing this in this 3D example. If you're app hasn't got the option to "render without perspective" a trick that works is to pull the viewing camera back a few miles (literally) and zoom in to the object... this flattens out any perspective so that it's almost imperceivable...

But to be fair... you should avoid the 3D route... you'll find overall less satisfying when you've finished as you know the CPU's done most of the tough work for you... plus it loses 'soul' somewhere along the line...

That's my opinion anyway...
« Last Edit: October 28, 2007, 05:51:04 pm by baccaman21 »
Buy the book - The Animator's Survival Kit by Richard Williams

www.burnzombieburn.com

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #4 on: October 28, 2007, 07:05:15 pm
i find the best way to go for this, if you get lost, is to draw by hand (or with vector, whichever is faster for you - i still prefer pencil) and then "pixelproximate"  over it.  the math is just too much for opaque pixels to handle at these sizes easily, the brain understands much better on a greater scale.  once you have something that you know works, your pixels will find their own places.

one great program i would suggest for this is idraw which has the added feature of allowing you to use the "unit grid" so that each time you click, it places a properly aligned square fo the size you wanted, allowing you to place "pixels" over a much more detailed image.  it has no practical application in straight-up art, but for tracing it's the shit!

will post later with a sample.


btw, in terms of art i would never condone these techniques.  vehicles for an RTS though are their own animal and getting that to work requires lots of practice with these sort of "training wheels" until you can do it from scratch without a massive headache.
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #5 on: October 29, 2007, 03:53:37 pm
I had a little problem when I tried putting animated elements together: how do you know where they should go exactly? I did it by eye and it looked okay, but I was a bit unsure about it. Like, your box with the two additional ones at the sides: did you just go through each frame and stick them on there or did you somehow knew where exactly they had to go?

In this example I was quite haphazard and slapped it - knowing roughly where I wanted them to go...

Ideally when you're creating the components you can place a pixel or two as guides that you animate into the rotation... then you 'simply' ;) glue them together after.

In the meantime, I have also sinned and worked on a little model (despite still preferring pixel-art), maybe I could also take those renders and touch them up.

Nasty Sinner indeed!

If you do choose this route another word of advice... one of the issues IMO of rendering a template using 3d apps is that the apps tend to introduce 'true' perspective... (as in a vanishing point) personally I don't like this... particularly when you've got the final results in game you tend to get all this weird ass perspective stuff going on that just looks odd in context...

Better to ditch perspective completely and have no vansihing points.

You seem to have done quite well at minimizing this in this 3D example. If you're app hasn't got the option to "render without perspective" a trick that works is to pull the viewing camera back a few miles (literally) and zoom in to the object... this flattens out any perspective so that it's almost imperceivable...

But to be fair... you should avoid the 3D route... you'll find overall less satisfying when you've finished as you know the CPU's done most of the tough work for you... plus it loses 'soul' somewhere along the line...

That's my opinion anyway...

Or you could just set the 3d-camera to "parallel" rendering style, which is an option it really should have.

And about losing soul and stuff like that, just creating the basic-est (jad, destroyevolving the english language since today) shapes in 3d and then pixelling over the renders should be a real time-saver and provide nice results O:
« Last Edit: October 29, 2007, 04:04:31 pm by Jad »
' _ '

Offline dkh

  • 0001
  • *
  • Posts: 52
  • Karma: +0/-0
    • View Profile
    • Indiana Jones and the Fountain of Youth

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #6 on: October 29, 2007, 04:20:03 pm
Heh, no worries, I already did exactly that, I rendered the sprites in parallel perspective so there is no distortion in depth. Good call, though, in my first tests, I ran into exactly that problem and ended up with a very weird feel from all the different perspectives in-game.

Okay, so I have it broke down to two methods to render units in 12 or 16 angles for RTS-games:

  • draw a unit in "DDP-pixel-art"-style in one direction as sketch, then redraw every geometrical element (each box, cube, ramp), rotate those in all angles with the method described above, put them all together and then refine with details like in the sketch image.
  • render images in a 3d-program for all angles, then go over the sprites and touch them up individually with details, shading etc.

Quality-wise, I prefer method #1, but I suppose method #2 is a lot quicker and causes a lot, lot less headache. So, at the moment, I'm trying both ways out to see which I'll stick to. Thanks for your input so far, please feel free and encouraged to write more, especially if you have experience with the problem and managed to overcome it somehow.

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #7 on: October 29, 2007, 05:16:34 pm
I'd say this is just for speed and you probably want your elements as pixelled as possible, so I'd say make extra-blocky versions of your ships (preferrably, speed-wise, with only basic geometrical shapes) and then render purely as a base.

I think the 'touch up a 3d model' tends to do that 'soul destroying' thing to your sprites, whereas simply creating the base in 3d and then doing pixel-shaping upon that will create the best and most efficient results.

But I say try doing it a lot of ways. I think that by simply trying you'll discover the best method. Actually, it's probably personal anyway which way to go, so just try :]
' _ '

Offline baccaman21

  • 0011
  • **
  • Posts: 549
  • Karma: +0/-0
  • It's critique, don't take it personally.
    • View Profile
    • Linked In

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #8 on: October 29, 2007, 06:09:34 pm
meh... speed... rendering in 3D... next you'll be saying the PS3's better than the Megadrive/Genesis!!

Pah... you lot these days, want everything fast and now! what's wrong with taking time and pleasure and enjoy being an artisan of your craft*...? ::)

(Only kidding - you do what you feeling is necessary to acheive the result you want to...)

Just be careful to not let the CPU make all your decisions for you... then you'll just end up with this.... and we wouldn't want that would we?

*no pun intended...
Buy the book - The Animator's Survival Kit by Richard Williams

www.burnzombieburn.com

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: Box in 12/16 angles OR RTS-units in DDP-style

Reply #9 on: October 30, 2007, 12:02:11 am
meh... speed... rendering in 3D... next you'll be saying the PS3's better than the Megadrive/Genesis!!

Pah... you lot these days, want everything fast and now! what's wrong with taking time and pleasure and enjoy being an artisan of your craft*...? ::)

(Only kidding - you do what you feeling is necessary to acheive the result you want to...)

Just be careful to not let the CPU make all your decisions for you... then you'll just end up with this.... and we wouldn't want that would we?

*no pun intended...


Haha, above all, you must preserve PIXEL ART SOUL <3
' _ '