AuthorTopic: Tutorials/Tips : Isometric Sprites?  (Read 7690 times)

Offline Tetiro

  • 0001
  • *
  • Posts: 31
  • Karma: +0/-0
  • Leader of Grandpa Pixel
    • View Profile
    • Grandpa Pixel

Tutorials/Tips : Isometric Sprites?

on: June 24, 2014, 05:26:25 pm
Hey guys,

I've finally fixed my isometric game engine and I fancy doing a proof-of-concept project to really show it off!

One problem. I am so used to top-down and styles I call the zelda-dimensions that isometric is just too out of the world for me!

So I thought to turn to you guys again. You have never steered me wrong. Could someone teach me how to sprite isometric? I'm not worried about the buildings. It's the people and walking animations I need to learn.

Offline Vagrant

  • 0010
  • *
  • Posts: 157
  • Karma: +0/-0
  • At your service.
    • @VagrantPixels
    • http://pixeljoint.com/p/43310.htm
    • View Profile

Re: Tutorials/Tips : Isometric Sprites?

Reply #1 on: June 24, 2014, 10:26:10 pm
I'm in the same boat.

Although, I have a ton of experience with pixelling Final Fantasy Tactics and other similar styles which are iso, I think.

Still, I have a project that happens to be in the early sprite design phases, and I'd like to see what people post here regarding iso styles. The one on my avatar is one of my first attempts.

If I were to suggest something, however, it would be this: head to Pixeljoint and gather as many Isometric references as you could dream of, study them thoroughly, and then begin your own style from that.

Offline Ellian

  • 0010
  • *
  • Posts: 245
  • Karma: +1/-0
    • View Profile
    • This is Ellian

Re: Tutorials/Tips : Isometric Sprites?

Reply #2 on: June 25, 2014, 10:02:00 am
I might have an old tutorial about making isometric tilesets, but it's currently buried deep in a folder with thousands of references I never sorted, so hold on for a bit. :I
EDIT: Of course, I couldn't find it. -___- Hopefully someone here will link that eventually...

Aside from that, work with clear volumes and a lightning that goes well with isometric.
Start with a cube/rectangle, and refine it step by step. Don't work on a lineart first, it's harder to stay in coherent shapes if you do.
I'd also recommend work a lot on the shading; the top always the brighest, and either left or right slightly darker than the other side. It will help making everything coherent.
« Last Edit: June 25, 2014, 10:44:32 am by Ellian »

Offline Lanarky

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

Re: Tutorials/Tips : Isometric Sprites?

Reply #3 on: June 26, 2014, 03:54:46 pm
Ellian, were you thinking of St0ven's isometric tileset tutorials? ;D

If so, I uploaded them all to my google drive. Unfortunately, all of them are .mht files instead .html. They still work in chrome luckily, just a little blurry on the images. They would probably open in internet explorer still, since that's what I used to save them with.

Tetiro, hopefully this will help. I could never find anything for isometric characters, but St0ven's tileset tutorial has a lot of information about the different approaches grid wise, for both illustration, and game development.  :)

Here's the link:
https://drive.google.com/folderview?id=0B3yr5b0DS_wxbjZfR1lMS0NaZkk&usp=sharing

Offline Ellian

  • 0010
  • *
  • Posts: 245
  • Karma: +1/-0
    • View Profile
    • This is Ellian

Re: Tutorials/Tips : Isometric Sprites?

Reply #4 on: June 26, 2014, 09:44:19 pm
I'm not sure this is it... but it does cover what I had in mind!
Good stuff.  ;D

Offline N0ixZ3

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

Re: Tutorials/Tips : Isometric Sprites?

Reply #5 on: August 15, 2014, 02:22:11 am
Old thread but I hope I could help some people with this issue...

An isometric drawing has constant angles of 30 degrees...






My secret for getting it down is simple... ;)



Notice First:
 the grey angles, then the Red centerlines and then the lines that come out horizontally straight (on humans) and where the triangles go (on humans; they go down the side where we see most of the human's side body facing us and this works for the back side if you use the same method except it will show the side that is farthest away from us so the triangle for the front view = we see more of that side, the triangle on the back view = we see less of that side don't screw around with the triangle's angles too much if you want to keep it isometric)

I'm too tired to further explain this but if the picture still isn't making sense, go ahead and say so so I can create a proper step-by-step drawing or possibly a video.

USE THE PICTURE OF THE RED LINES ON THE RIGHT (The one without the circles) TO EXPERIMENT WITH THE TRIANGLES FOR PEOPLE AS ive mentioned above and use the items as reference for it too, think of it as a template.
« Last Edit: August 15, 2014, 02:24:19 am by N0ixZ3 »