AuthorTopic: Best way to skew textures for isometric art  (Read 4737 times)

Offline Vinik

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

Best way to skew textures for isometric art

on: February 09, 2018, 02:07:45 pm
Hello everyone. When doing isometric art I often find myself wishing to skew tiles or textures that were previously drawn flat/square. I do think that drawing directly on isometric planes often gives the best results, but some textures are tricky at iso, and often you already have a texture/tile at a 16x16 square and just want to have the closest rendering of that same pattern as slanted wall tiles, so making a quick skewed projection is good start, and you can tweak later for depth, detail, fixes etc.

That said, aseprite wont skew selections (it can rotate nicely with rotsprite/quickrotation), so it can be used for quick diamond shaped ground tiles (by rotating and then squashing), but not for wall tiles (upward skew of one of the square sides). Ms paint CAN skew, but only at integers so it works great for 1x1 slanted walls at 45°, but not for isometric 2x1 walls (22.5°, cant do it). Any tools suggestions for something like that?

Thank you all in advance.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Best way to skew textures for isometric art

Reply #1 on: February 09, 2018, 03:19:18 pm
This method is a bit tedious, but it's not so bad if you put a whole bunch of textures in the same image and do them all together:
Select the entire image. Deselect the first two columns of pixels. Shift down 1 pixel. Deselect the first two columns of pixels of the remaining selection. Shift down 1 pixel. Repeat until you're done.
Make sure you leave space at the bottom of the image so that nothing goes off-canvas.

Deselecting two columns can be done by nudging your selection over two pixels, most editors allow doing this with the keyboard, so it's just a couple of quick taps. You can also save a lot of time by arranging your textures vertically in a narrow image, so there are fewer columns that you have to move.

Photoshop allows skewing at arbitrary angles, so if you have access to it, you could use that. However, the angle you want is arctan(1/2), or about 26.56 degrees, not 22.5.



Edit: The method of shifting the pixels down is trivial to automate. In case none of your programs support scripting, here's a HTML5 tool that takes an image and skews it using that method. It will not work with very large images due to browser limits on the canvas size, but it'll work with reasonably sized images. It's just a single HTML page with some JavaScript on it, so you can just save the page to use it locally without visiting the website.
« Last Edit: February 09, 2018, 04:04:19 pm by eishiya »

Offline Vinik

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

Re: Best way to skew textures for isometric art

Reply #2 on: February 09, 2018, 05:39:30 pm
Wow eishiya, you are a life saver  :)

As soon as you explained the method I was already seeing a for-loop code to automate it, and then you just wrote it for me, I feel like I should be paying you lol.

Thank you very much, I will make everything much easier. Also, thanks again for the help a few months ago on the isometric shading. Dev is going well on the programming side, so I will invest more time in the art now.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Best way to skew textures for isometric art

Reply #3 on: February 09, 2018, 10:45:54 pm
No problem :D And no need to pay me, but I'm /eishiya on Ko-Fi if you really want to.

I look forward to seeing these textures you're working on, and the rest of your game! As I recall you had quite a complex isometric environment going. I hope you'll make a devlog thread for it in the Devlogs & Projects forum when you've got more visuals to show.

Offline surt

  • 0011
  • **
  • Posts: 570
  • Karma: +0/-0
  • Meat by-product
    • not_surt
    • http://pixeljoint.com/p/2254.htm
    • View Profile
    • Uninhabitant

Re: Best way to skew textures for isometric art

Reply #4 on: February 10, 2018, 12:17:42 am
Most pixel editors have this kind of functionality.
GraphicsGale has it in menu under Image -> Slope.
Pro Motion has it under Brush -> Shear.

Offline Vinik

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

Re: Best way to skew textures for isometric art

Reply #5 on: February 10, 2018, 05:38:48 am
@eishiya, I will do a log soon, getting the pseudo 3d collisions working took ages with all that z-jumping, ramp climbing and sliding, so I didn't advanced much on the art past the plain color collision maps and some early shots. I didn't wanted to spend too much time making it look pretty until the gameplay was ready, but the iso primitives worked well with autotiling. These ramp-like walls use only 16 elongated tiles for each angle, and now I have to make plain shapes look like real stuff like stairs, "hi-tech-looking" metal walls, crystals and whatnot:


@surt yeah, I figured aseprite would have this, just too useful not to be there but it isn't.

Offline Vinik

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

Re: Best way to skew textures for isometric art

Reply #6 on: February 10, 2018, 08:25:39 pm
Just an update to show that the method worked nicely with very simple brick textures and a little color swap for the diagonal walls


It is not great but it is fast and I can also tweak it after to feel less flat