News:

Use the "Forum Search"
It may help you to find anything in the forum ;).

Gas Station Art

Started by Asterix909, June 05, 2009, 03:19:30 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Asterix909

I can't let dantedarkstar have all the fun making new art... so I tried my hand at something:


It's a gas station! I have no idea how I am suppose to make art, so I just kinda fumbled around and did my best...
I made it in photoshop, pixel by pixel. I used some art/textures from graphics.simutrans.com, specifically from the parts kit located here: http://graphics.simutrans.com/displayimage.php?album=9&pos=16
(Both cars, the door, wall and the sidewalk texture)


It is created in many different layers, so I can easily modify much of it. Let me know what you think...

VS

Wow, thanks! For "no idea" it's really a good start! It isn't there (yet), but a few changes and it's almost done :D

First: shading. I am not sure if you omitted it on purpose or not, so skip this part if you already know. The sun shines from left, along the grid, so in the current view, the side with windows will be darker and the other brighter. (sky light on both, direct sun on the one) Roof is in Simu traditionally brightest part (sun at 60°) but that's for same colour (vehicles) and does not translate 100% to houses (roof different from walls).


Second: rotations. Again if you already know, feel free to skip. Generally large buildings in Simu have 4 rotations and uneven shape. If you stick to strictly rectangular base, you can do away with only 2 rotations, and if base is square, one suffices. Since you made this 2x1, at least two rotations are needed (2x1 & 1x2). There is no definite rule on what to do with shading, but since there have been maybe 10 buildings with all 4 rots and oceans of legacy square-based content, it's more consistent to rotate the building but leave sun at same place. Which means, sun is always to the left. This part is quite confusing to describe in words :( Anyway, it means you need 2 versions which you can get by simply flipping the image, and then shade them as if the sun was coming from left.


Third: windows - they should be grey. Take a look at our special colours:


Upper line colour, lower line what happens in game or some other interpretation.

There are two dark greys that glow in the dark (upper line dark, lower yellow), intended exactly for windows :) That's how windows on most of current houses look like, and that's one change that will help. Why not blue? Well. The idea is, windows partially act as mirrors. When you look at them upwards from street level, they reflect blue sky. But in Simu you are far above the landscape and thus you see in them reflection of ground, which is darker. Also, sky is a better source of light than ground ;) And lastly, insides of buildings are during day usually darker than outside, so that contributes to the effect as well.


Four, grounds. Again, there isn't any guideline set in stone, but you have them lighter than the average. There is the "standard 128 pavement" which you can grab here. And asphalt, which... umm, well, there isn't any place we would have it as a texture, but you could sample it from a screenshot of the 80 kph road. Anyway, neither is that important, only "a tad darker" is what matters.


Five: window frames and sills or what is that called. This actually has a lot to do with shading. The important part is, you have one colour on the whole frame. Which gets a "No." Again it's really simple to improve. The way you have it now, it seems like the whole structure is flat part of wall, which doesn't help :) Real windows are almost always inset into the wall. That, in turn, creates an opportunity to sort of shade this part. We're looking at angle, so we won't see all four sides, but only two, the ones to the left and bottom. They will be darker, since they are in the depression in wall. Look at my version below...


Six... I lack a good title for this part, maybe small junk :) The picture, as is, lacks some little thingies here and there to break the uniformity of straight lines. Think water hydrant, newspaper stand, phone booth, flower pots, chimneys, antennas and so on. Ads on walls are also excellent way to break up the geometry. Simply something, somewhere. There doesn't have to be much and it will be probably the last touch. It's more or less the same with large walls and windows. Large areas with same (or no) pattern in picture = bad.


Here's a little test to show what I meant with windows (picked a random dark colour) and stuff.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Asterix909

Awesome thanks for the feedback.

I figured shading was necessary, but I didn't know where the sun was for sure, I avoided all shadows for now. I can put them in.

Again, I assumed I'd need to make a rotated view, but again, I was not sure exactly how the rules worked. I didn't know if I could just 'flip' it and adjust shadows, or if I had to had a legit side view.

Windows... I'm a little confused... I guess I do not understand the chart you showed...

As for the ground: Ok! I will try and adjust it.

I can also make the window frames 3d- I kinda skimped on them.

I was planning on including some extra clutter once I got the 'structures' done. But I like your example because I couldn't think of anything for the roof of the building...

Asterix909

Quote from: VS on June 05, 2009, 06:03:25 PM
And asphalt, which... umm, well, there isn't any place we would have it as a texture, but you could sample it from a screenshot of the 80 kph road.
erm... excuse my ignorance but: is there an image available online somewhere? I don't have access to the game right now.

KrazyJay

VS, your words of advice are written in very basic English, it makes it easy for most Simuthaners to understand. Maybe you can make this post sticky for others (like me) to try making a building as well or include it in a tutorial :D. This was actually one of the first times I understood how to make a building for Simutrans, although it still seems to be a very difficult thing to do.
Played Simutrans in:
~ The Netherlands ~ United Kingdom ~ Taiwan ~ Belgium ~


Simutrans player

vilvoh

Quote from: Asterix909 on June 05, 2009, 06:35:10 PM
is there an image available online somewhere? I don't have access to the game right now.

You can get the road textures from pak128 templates at graphics.simutrans.com (link)

Escala Real...a blog about Simutrans in Spanish...

Asterix909

#6
Quote from: vilvoh on June 05, 2009, 07:19:53 PM
You can get the road textures from pak128 templates at graphics.simutrans.com (link)
Yeah but I do not know which texture is the 80km/h road one:-/

I added in the shadows now that I know the proper angle:-) and shaded the off-sun sides.
I ripped off VS's suggestion for a roof decoration and his window design, and added in my ideas for other stuff (handicap space/sign, bathroom door, poster, garbage can, shrub, grass patch w/flowers.) as well as changed the sidewalk texture to the city pavement.

Here it is without the texture:


And here it is with the texture it had...


EDIT:
whoops, I notice I forgot to delete some shadow overflow on the edge of the building...

there we go:


EDIT EDIT:

here is the other angle:




hows it all looking?

VS

#7
It starts looking veeeeery nice! :) If and when I get some time (should learn or last exam, uf) I'll test how it looks in game.

The one thing that completely baffles me is, you said you had no idea how to do it - and you did it! Better than I ever could, actually - I know the theory and such, but desperately fail at buildings :)

EDIT: Almost forgot. As to the windows, they're good like that, or they can be filled with some of the special colours. Is this chart better?
http://graphics.simutrans.com/albums/userpics/10003/simucolors.png

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dantedarkstar

This looks really nice, Asterix.

QuoteI can't let dantedarkstar have all the fun making new art... so I tried my hand at something:
Yes ! Let the avalanche begin and we will have opensource pak128 in no time !  ;D

It's nice to know I inspired somebody :)

Oh yes, one small hint/remark: make sure to hunt all special colors out of the shaded texture at the ground. I know that in my sand quarry I got loads of night-glowing pixels on the roofs and walls because I applied some Light layers. You can't hunt them down before you merge the whole thing into single layer (at least I couldn't in GIMP, maybe you can do that in Photoshop).
Links+Tutorial: Make heightmap of any part of world !
http://forum.simutrans.com/index.php?topic=2210.0

Asterix909

Quote from: VS on June 05, 2009, 08:56:06 PM
It starts looking veeeeery nice! :) If and when I get some time (should learn or last exam, uf) I'll test how it looks in game.
I assume you need png format? I can upload those.
Quote from: VS on June 05, 2009, 08:56:06 PM
The one thing that completely baffles me is, you said you had no idea how to do it - and you did it! Better than I ever could, actually - I know the theory and such, but desperately fail at buildings :)
I know photoshop... and I used to do airplane textures for IL2... so I guess the skills carried over.
Quote from: VS on June 05, 2009, 08:56:06 PM
EDIT: Almost forgot. As to the windows, they're good like that, or they can be filled with some of the special colours. Is this chart better?
http://graphics.simutrans.com/albums/userpics/10003/simucolors.png
That chart makes much better sense to me:-) thanks

Quote from: dantedarkstar on June 05, 2009, 09:19:20 PM
This looks really nice, Asterix.
Yes ! Let the avalanche begin and we will have opensource pak128 in no time !  ;D
Darn straight!

Quote from: dantedarkstar on June 05, 2009, 09:19:20 PM
It's nice to know I inspired somebody :)
You did! I saw how nice your quarry looked and figured I could try too.
Quote from: dantedarkstar on June 05, 2009, 09:19:20 PM
Oh yes, one small hint/remark: make sure to hunt all special colors out of the shaded texture at the ground. I know that in my sand quarry I got loads of night-glowing pixels on the roofs and walls because I applied some Light layers. You can't hunt them down before you merge the whole thing into single layer (at least I couldn't in GIMP, maybe you can do that in Photoshop).
I will need to do that. I did not know how the colors worked when I started so I may have some bad colors mixed in... I do not think I can search them before flattening the image in photoshot...

VS

Yes, PNG; if you can, 24-bit (without alpha). But I can do that as well.

As to special colours, it's probably easiest to flatten the image for export and cutting, and only then use Shades. You can paint the specials back (where wanted) again with it as well.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dantedarkstar

I actually managed to find a way to clear the unwanted special color pixels in GIMP before merging, so that you can have fully clean, layered source. You have to use "pick by color" with "sample merged" option for the tool checked. If you have then a handy palette of special colors in the corner of the picture, you can pick one by one to see where exactly on the resulting, merged picture such colors will appear. Then, you have to go to the layer that caused the unwanted pixels and tweak it so that in the end the color is not special (you can use the selection you just got to limit yourself to just the pixels in question), or you could add "special colour fixing" layer. Anyway, you can do that in GIMP. Don't know if it's possible in Photoshop.

(goes back to finishing sand quarry)...
Links+Tutorial: Make heightmap of any part of world !
http://forum.simutrans.com/index.php?topic=2210.0

VS

Sure, checking before helps a lot, too. But you can not tell beforehand if adding layers with transparency (meaning actually the places not completely transparent) will not result in some of these colours.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

AABatteries

VS already said something about PNG.  I noticed that it looked like it was saved as a JPG, which is NOT what you want to do with pixel art.  JPG WILL RUIN your work.  I always save mine as PNG.

VS

I assumed these were only previews, so using jpg wasn't a crime :)

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dantedarkstar

Seems like I was in too much hurry to be happy about fixing special colors. Somehow when GIMP selects colors from picture merge he does it differently than when actually merging. I'm completely baffled about this discrepancy. I guess cleaning with each merge is necessary :(
Links+Tutorial: Make heightmap of any part of world !
http://forum.simutrans.com/index.php?topic=2210.0

AABatteries

Ehhh!!!

FORGOT THIS POST.

Asterix909

I will try and get a png version uploaded tomorrow- heading to bed for now.
I only have access to photoshop on one of my home computers, the one I am not on right now and I don't want to get it started up:-)


Asterix909

I had a busy weekend, so I didn't get around to doing this until now:



There are some png format saves if anyone wants to play around with them...
There are still some things I'd like to do, like play with the special colors to try and set up lighting effects. I also still need to hunt through the image for any existing special colors. And, now that I think of it, I guess that means I can't have that drop shadow on the window, because if the window is a special color, it will be messed up.

Oiy. I wish I has photoshop on my game machine... or... I wish I had simutrans on my photoshop machine... 

PS: sorry for not cropping the images... I keep forgetting to until after I upload them:-)

VS

Where are all the comments? :o

You are right about windows. That's the one choice... special or nicer.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dantedarkstar

There's more than one "window" color. There are at lest two or three of them. Maybe you could find the pair that will work well for the shaded windows.

Aside from that, looks very good !
Links+Tutorial: Make heightmap of any part of world !
http://forum.simutrans.com/index.php?topic=2210.0

vilvoh

imho, some shadows from q-mart building are too dark.

Escala Real...a blog about Simutrans in Spanish...

prissi

If Q-Mart is a real brand, one should rather display something like a carrot or so ... would make it also multilingial by design.

VS

Ha, good catch. Although I see more companies under that name...

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Asterix909

Quote from: prissi on June 15, 2009, 09:49:25 AM
If Q-Mart is a real brand, one should rather display something like a carrot or so ... would make it also multilingial by design.
I was originally thinking of writing the shop sign in blurred gibberish, so it would be obvious that text was there, but not discernible what the text said. But then decided that Q-Mart would just become gibberish anyways and that worked for me. The problem is the 'GAS' sign. I couldn't think of anything better to put on it. It was too small for me to make it look like a gas prices sign (someone with more skill may do better), so I just left it in English.

On a side note, I have been pretty busy recently so I have not even played simutrans in the last week much less worked ont he art. Hopefully that will change soon.

VS


My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Asterix909

#26
I fixed some of the reserved color issues, but then got distracted and have not worked on it much since then.

I have a question: do the special colors only apply if they are the exact hex/decimal value indicated?

I am able to filter the image for certain colors, and I have some of the special colors popping up - for example, 77,77,77 (dark window lit at night) happens to pop up in the pavement in a couple of spots. I went through and changed the pixels by one decimal (i.e., from 77,77,77 to 76,77,77). Will that be enough?


EDIT:
Well, rather than waiting for reply I will just post the images now and if needed I can go and change those suspect pixels even further.


Right now, hopefully, the windows and the door are the only special colors in the image.

(lol, I accidently saved the files as "gassation..." and not "gasstation..." - boy oh boy I couldn't figure out why they were not showing!)

VS

Yes, it will be enough, they are exact - the whole triplet must match. As author of Shades, I can tell you that all fixes in it are done by flipping one bit and it has been enough for years :D

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Asterix909

(see edit to my last post- you responded while I was typing)

Zeno

Really nice job Asterix. Full tank, please!!  :D

Asterix909

Could someone please advise me to what steps to take to make the art game ready?
(or do it yourself ;D)

I played around trying to make the Q Mart sign something more generic (like a symbol or icon of sorts) but the size really restricted me and everything came out as random squigglies. So I think I am ready to call it as finished (assuming game testing goes well, naturally I'll fix anything that may pop up in testing it in game).

On a side note, if anyone thinks they can improve it, or want to use part of it, feel free too. Except for a couple of textures and elements (i.e., the cars) taken from the sample file I cited previously, its all original. I'd love to see it go in pak128, but as I said, if someone can make it even better, I'd rather the better image be implemented:-)

VS

I had a long tutorial-post but crashed and it all went away. I am spent for today - I'll write it again, but not today :(

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Asterix909

Quote from: VS on July 06, 2009, 09:33:19 PM
I had a long tutorial-post but crashed and it all went away. I am spent for today - I'll write it again, but not today :(
Oiy... I know that frustration. I'll be patient:-)

VS

Oops, and so I again forgot about you :(

In short... the game puts everything together from sprites, sized as squares of pak "size". So since we are talking about pak128, there will be squares 128x128. Think about it as a "picture excel", with square cells and pictures.

Obviously the relationship between placement of these image parts on the pictures you feed ("excelized") and placement within game (on isometric grid) is not straightforward. When you look at a normal "ground tile":

it is in fact part of a whole 128x128 block.

Splitting a "compact" graphic spanning over several ground tiles into these basic blocks is what must be done.

Here is a helper graphic:

It has different colour for every part created by overlapping the four ground tiles and another four directly on them. In z-axis the blocks simply stack on each other.

When you align this with your graphic (in another layer in graphic editor), selecting the respective pieces will allow you to extract the blocks.

This helper template is certainly useful, but has too much stuff to be hard to understand. (I made it originally for coal mine with tower.) All you need are the two tiles. So here is a quick edit with just the two tiles you need:

(for the other direction, simply flip it :) ).

I hope it's now pretty clear what to do - align graphic with template, cut from it the parts and rearrange them into a grid (excel!). Save result as PNG.

This is the graphic related part. Second part is writing up the information that actually tells the game what to do. These are DAT files (simply because they have extension .dat) - and these are plain text (like .txt, .ini, .bat etc...).

I am attaching the current gas station, so that you can take a look at how it is in reality. The picture file has four parts to the left, the unused space to the right is filled with preview, some text and stuff...

When you open the dat file with notepad, you will see a list of assignments in form blah=blah. Their names are pretty self-explanatory. First thing you will want to change for your gas station is name. It is imperative that no two objects of any kind share the same name in a running game. or strage things may happen ;) So you'll want to change that to something... perhaps name=asterix_gas_station

Most of the other numbers are already good. For future, you'll need to understand that dims=1,2 says the house is 1x2 tiles. Needs_ground=1 says that there are holes in the house that show the earth underneath it. I don't know if your building does have them. If not, set that to 0 to make the display a little bit faster when looking at the building (in other words, this determines whether ground and house are drawn on screen, or just the house).

The problematic part is where you see BackImage[...]=blahblah.K.L

These lines say which part of the "excelized" graphic belongs where. The numbers in brackets in front of equals sign reference certain positions in isometric grid, after = is file name of graphic (without .png!) and then .K.L These two numbers reference the "cell" of graphic to use, like in excel you get A2, here it is .0.1 etc. If you simply replace in picture the parts of graphic with yours, the references don't need updating, so you are again lucky ;) Deciphering the sequences of numbers is always tiresome. More on that here if you feel adventurous and want to understand that to the last bit.

So then you are prepared to compile the object. Please try following the (already excellent) information here:
http://simutrans-germany.com/wiki/wiki/tiki-index.php?page=en_doPak
and if you can't get it to work, tell us!

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

VS

I guess it does not matter any more, but I just added this to pak128...

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!