Author Topic: Isometric Axial Scaling  (Read 4516 times)

0 Members and 1 Guest are viewing this topic.

Offline Octopusbeak

Isometric Axial Scaling
« on: June 29, 2015, 11:25:33 PM »
I am working on drawing a player vehicle. I drew the first of eight images/orientations in isometric view, facing southwest. I wanted to get the scale right for each of the directions, based on the first image.

Perhaps most artists guess the proportion, or draw an appropriately sized/proportioned ellipse, or maybe even do the math (in which case I have nothing new). Anyway, I did the math for simutrans pixel art isometric, where the diagonals or 'sides' of the object are diagonal lines of slope 1/2 and -1/2. Standard drafting isometric has diagonals of 30º and -30º from horizontal, so the attached image only applies to pixel art.

To use: You start with a vehicle image facing one orientation. You project its length (T, I, or S) down to the ground, and measure it in pixels: X wide or Y tall. Then you use the proportions or formulas to convert the length to another orientation, and draw from that. It's also applicable to buildings and other features, but probably less practical.

I think it's neat that the proportions are based around sqrt(2), although I don't have a simple explanation of why it's that way. Maybe I overlooked a much simpler approach?

Anyway, hope this is useful.



Also,

I was making a color palette of the special colors (day/night) to share, when I noticed the chart on the wiki page was very messed up! The RGB values do not match the displayed color, and the displayed color doesn't match the HEX value.

What ARE the correct colors? Once I finish the palette I'll share it, but I don't want to spread incorrect info.
« Last Edit: June 30, 2015, 12:17:53 PM by Isaac.Eiland-Hall »

Offline gauthier

Re: Isometric Axial Scaling
« Reply #1 on: June 30, 2015, 09:21:05 AM »
Your maths are right but it's much more convenient to use a pattern. You can find mine here. I also attached my palette of special colors, the top set has the true special colors (they all work well, I have used this palette for years), the window color marked with a red dot does not give the same color as the three others at night. The bottom palette has colors which differ from the top ones of only one RGB unit. I use them to remove unwanted special colored pixels.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2548
  • Total likes: 279
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Isometric Axial Scaling
« Reply #2 on: June 30, 2015, 10:27:58 PM »
I was making a color palette of the special colors (day/night) to share, when I noticed the chart on the wiki page was very messed up! The RGB values do not match the displayed color, and the displayed color doesn't match the HEX value.
Are you talking about this page?

It looks perfect to me.

Offline Octopusbeak

Re: Isometric Axial Scaling
« Reply #3 on: June 30, 2015, 10:34:39 PM »
Gauthier,

Thanks for the palette and vehicle template! I think those should both be in the simutrans graphic archive templates. I'm making vehicles for pak.128, so I will double the template dimensions.

I just found another palette on this template, which AGAIN does not match either your palette or the wiki. It seems the green is "29 219 8" instead of "30 219 9" as on yours. The circle guides on it are far from circular though. I edited the template, one version without circles and one version with. The scaling chart helps with making isometric circles too... measure the diagonal, multiply by sqrt(2) and that is width of ellipse. Divide by two for height.

I copied your color palette meticulously, and wrote down the RGB values of each color in an image file (attached and INCORRECT). I opened your palette later, in 'preview' to double-check my work. The RGB values were different than initially. I'm only taking samples from the top of the two color selections. I then opened both your palette and my copy on a different computer, to check the RGB values with photoshop. Even MORE variation in the values. I suspect I don't know something about the PNG image format, or the color sampling tool.

EDIT: Mac OSX apparently has issues with color consistency. PNG images also can vary, apparently. Both computers I checked the colors on have OSX. I've gotten three or four different values for supposedly the same color in the same file throughout today. Going to experiment with different operating systems, and see if .gif or .tiff is more consistent. Knowledge or input on the subject welcome!

An_dz,
I was talking about that page. The daytime red color, at least on my browser, lists the RGB values as "001 221 001". Daytime green is "096 132 167". I attached a screenshot for whatever it's worth.
« Last Edit: July 01, 2015, 05:58:22 AM by Octopusbeak »

Offline gauthier

Re: Isometric Axial Scaling
« Reply #4 on: July 01, 2015, 07:37:19 AM »
Quote
I think those should both be in the simutrans graphic archive templates. I'm making vehicles for pak.128, so I will double the template dimensions.
The graphic archive is not that official, it's just a source of information amongst others. The templates I gave you are from my tutorial, which is linked in my signature. You can find useful things in it, although less mathematical and theoretical than what you find on the graphic archive.
My tutorial, as everything on SNFOS'site, is fit for pak128, you don't have to double anything.

Quote
I just found another palette on this template, which AGAIN does not match either your palette or the wiki. It seems the green is "29 219 8" instead of "30 219 9" as on yours. The circle guides on it are far from circular though.
The colors are good for me. The only mistake is the code of the special green, the decimal code is wrong, it does not even match the hexadecimal code on its left. The rest looks okay. About the circle guides, I don't really understand what the blue circles are for, indeed they are not round if projected on the floor.

Quote
I copied your color palette meticulously, and wrote down the RGB values of each color in an image file (attached and INCORRECT). I opened your palette later, in 'preview' to double-check my work. The RGB values were different than initially. I'm only taking samples from the top of the two color selections. I then opened both your palette and my copy on a different computer, to check the RGB values with photoshop. Even MORE variation in the values. I suspect I don't know something about the PNG image format, or the color sampling tool.

EDIT: Mac OSX apparently has issues with color consistency. PNG images also can vary, apparently. Both computers I checked the colors on have OSX. I've gotten three or four different values for supposedly the same color in the same file throughout today. Going to experiment with different operating systems, and see if .gif or .tiff is more consistent. Knowledge or input on the subject welcome!
Weird ...

Offline Octopusbeak

Re: Isometric Axial Scaling
« Reply #5 on: July 01, 2015, 08:11:23 AM »
I didn't see that tutorial before. I can't imagine there is a more complete tutorial than that. It is beautiful! Thanks for making it!
« Last Edit: July 01, 2015, 08:34:42 AM by Octopusbeak »

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2548
  • Total likes: 279
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Isometric Axial Scaling
« Reply #6 on: July 05, 2015, 09:27:43 PM »
I fixed the charts in the wiki. Only the RGB was wrong for green and red. The purple was totally wrong, and it's wrong in your palette @gauthier.

Just checked the source and purple is #E100E1.

Offline gauthier

Re: Isometric Axial Scaling
« Reply #7 on: July 06, 2015, 07:56:24 AM »
I fixed the charts in the wiki. Only the RGB was wrong for green and red. The purple was totally wrong, and it's wrong in your palette @gauthier.

Just checked the source and purple is #E100E1.
Purple works fine here :/

Offline Ters

  • Coder/patcher
  • Devotee
  • *
  • Posts: 4577
  • Total likes: 167
  • Helpful: 106
  • Languages: EN, NO
Re: Isometric Axial Scaling
« Reply #8 on: July 06, 2015, 02:32:04 PM »
I fixed the charts in the wiki. Only the RGB was wrong for green and red. The purple was totally wrong, and it's wrong in your palette @gauthier.

Just checked the source and purple is #E100E1.

These are the colors I figure makeobj pays attention to:

Code: [Select]
0x244B67, // Player color 1
0x395E7C,
0x4C7191,
0x6084A7,
0x7497BD,
0x88ABD3,
0x9CBEE9,
0xB0D2FF,

0x7B5803, // Player color 2
0x8E6F04,
0xA18605,
0xB49D07,
0xC6B408,
0xD9CB0A,
0xECE20B,
0xFFF90D,

0x57656F, // Dark windows, lit yellowish at night
0x7F9BF1, // Lighter windows, lit blueish at night
0xFFFF53, // Yellow light
0xFF211D, // Red light
0x01DD01, // Green light
0x6B6B6B, // Non-darkening grey 1 (menus)
0x9B9B9B, // Non-darkening grey 2 (menus)
0xB3B3B3, // non-darkening grey 3 (menus)
0xC9C9C9, // Non-darkening grey 4 (menus)
0xDFDFDF, // Non-darkening grey 5 (menus)
0xE3E3FF, // Nearly white light at day, yellowish light at night
0xC1B1D1, // Windows, lit yellow
0x4D4D4D, // Windows, lit yellow
0xFF017F, // purple light
0x0101FF, // blue light

Note that these do not seem to match the colors used when displaying images.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2548
  • Total likes: 279
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Isometric Axial Scaling
« Reply #9 on: July 07, 2015, 02:00:51 AM »
Ah ok, now I see, it's in bild_besch.cc, I was looking in simgraph16.cc.

Strange that purple is the only one that is different, any reason for such? Shouldn't it be the same just like all others?

Offline Ters

  • Coder/patcher
  • Devotee
  • *
  • Posts: 4577
  • Total likes: 167
  • Helpful: 106
  • Languages: EN, NO
Re: Isometric Axial Scaling
« Reply #10 on: July 07, 2015, 04:36:37 AM »
Strange that purple is the only one that is different, any reason for such? Shouldn't it be the same just like all others?

You'll just have to check the revision log and see what the message was for the change, unless it's been that way since the dawn of Simutrans' version control. In any case, the colors in bild_besch.cc are fixed as a compatibility constraint for existing pak source images.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2548
  • Total likes: 279
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Isometric Axial Scaling
« Reply #11 on: July 07, 2015, 11:51:01 PM »
Build 688 introduced the purple in simgraph16.cc, it was already 0xE100E1.

Build 4380 moved the colours from image_writer.cc to bild_besch.cc, it was already 0xFF017F.

Build 689 introduced the purple in image_writer.cc, it was already 0xFF017F.

It was always like this. I don't know why they are different, but it makes sense as it's meant to be purple and 0xFF017F is pink.

Offline Octopusbeak

Re: Isometric Axial Scaling
« Reply #12 on: July 11, 2015, 12:53:43 AM »
I've made the change to Linux, for what it's worth, and all the colors are now behaving as expected. To boot, Gimp and Inkscape work well.

In an older thread, Prissi said to save images posted on the forum by 'save attachment as' instead of 'save image as', or some browsers may modify the color. I know Mac OS was partially responsible for changing colors, but perhaps the browser (FF) shared some of the blame. Glad to have it sorted out now.

Purple works fine here :/
Is there a fast way of previewing night colors like you have done for the image attached to your post?

Thanks again for the help

Offline gauthier

Re: Isometric Axial Scaling
« Reply #13 on: July 11, 2015, 02:57:32 AM »
I just made a quick fake locomotive using my palette, centered on 128px square image, as source image.

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2548
  • Total likes: 279
  • Helpful: 89
  • D'oh
    • by An_dz
  • Languages: PT, EN, (it, de)
Re: Isometric Axial Scaling
« Reply #14 on: July 12, 2015, 05:50:53 AM »
Is there a fast way of previewing night colors like you have done for the image attached to your post?
On Windows there's Shades.