Monday, June 30, 2014

Blend textures to add subtle wear and tear

I want to talk about tiles. Tiles are a nice texture to use because they have a lot of innate detail. They have grout, which provides opportunities for nice normal maps and variations in phong/envmap specularity, they can have cracks on them which looks cool, and the tiles themselves can have cool designs or just alternating colours. The problem with tiles though is that this inherent detail is misinterpreted for ease of use. As nice as it is to slap a tile texture down and give yourself a pat on the back as you sip you freshly prepared congratulatory cognac on the rocks, it's not at all that simple - as usual, como siempre.

Tiles are actually a pain in the ass to lay down in real life. I tiled my toilet and bathroom once. It was horrible. You have to cut here, lay there, measure this, and it's all such work. This experience led me to look at game tiles in a different light. No longer can I drop a tile texture down, rotate it 45 degrees and think no one will look twice.

Edging

Let's start with a nice hallway, again.

Just slap it down, yo

So yeah, this has a bit of detail, and with some props could be passable, but it's not good enough, and taking a bit more time can give us some much nicer results. So lets do some basic edging and see if we can improve the general look with minimal effort.

Starting to improve a bit

So making a tile edge looks a bit nicer, and is more in line with real world tile construction methods. But what happens when people use our tiles?

Ground wear and tear

Tiles have a tendency to be walked on, and if our boogalooing goes to plan, dived, slid and bled on. With all that corrosive denim jeans slide action, our tiles will get worn. They also may get cracked and broken. The wearing doesn't take place uniformly though, think about the parts of your floor that get walked on the most, this is where the tiles will become worn. Usually you'll see that the tiles in the center of the hallway are lighter and smoother than those at the edges, where they get less erosion from peoples feet. We can add these details with a little bit of advanced thinking, and a bit of computer trickery. It's time to get your creative wicks wet, seatbelts on.

TUTORIAL TIME!!!!

We're going to rip out that tile texture from hl2, adjust it a bit and then make a new, cooler tile texture, and put it all back in. First youre going to need GIMP (or photoshop if you're that way inclined) and VTFedit, as well as a text editor, but notepad will do (textedit for our microsoft brothers).

First, lets find our tile texture, here it is: C:\Program Files\steam\steamapps\common\SourceFilmmaker\game\hl2\materials\tile\tilefloor001a.vtf. Let's just copy it over to our DA directory, for posterity: C:\Program Files\steam\steamapps\sourcemods\DAB\materials\tile\ (keep that directory open , we'll be coming back). Open it in VTFEdit, and save it out as a png. To do that you'll need to select 'export', as VTFEdit only 'saves' vtf files. Now, open your png in GIMP or PS, and fiddle with the brightness, saturation and contrast. What we're trying to do here is adjust the texture so it looks more worn and faded. I also ran it through a 'selective gaussian blur' to make it look a bit smoother. It helps to have the original texture on one layer and your adjusted output on another, for easy switching and comparison. Here's what I did:

Hey that's smooth

Now crack open VTFEdit again, import your png (ctrl+i) and save it out as a .vtf into the DA directory, but rename it to tilefloor001a_blend01.vtf. We're going to make a fancy blend texture to have the worn parts fade in nicely, and we're going to do that through some tricky source engine sorcery (or SOURCE-ery get it??). Copy and paste tilefloor001a.vmt from and into its own directory, and rename it to "tilefloor001a_blend.vmt". Now open that sucker in your text editor. Now go read this, I'll be right here.

Back? Good. We're going to be using that puppy for our fade from nice to worn. You should be able to write the vmt yourself, but just in case, here is mine: (I didn't use the blendmodulate texture but feel free)

"WorldVertexTransition"
{
"$basetexture" "tile/tilefloor001a"
"$basetexture2" "tile/tilefloor001a_blend01"
"%tooltexture" "tile/tilefloor001a_blend01_tooltexture"
"$surfaceprop" "tile"
"$surfaceprop2" "tile"
}

Our alert boogalooers would have noticed the use of a tool texture there. Tooltextures are nice to make for your fellow mappers, but aren't completely necessary. If you want to make one, it won't be seen in game so keep it low res. Mine is 128x128 pixels. In order to make it, have both the new and old textures on seperate layers, select half of the image (usually in a diagonal line from bottom left to top right) and feather your selection by 50. Delete the selected half of the top layer and then resize your image and save it out. It also needs to be converted to vtf.

Finally, we're ready to use our texture in game. Blend textures can only be used on displacements so go read this. Also when using displacements try to have your displacement brush as close to a square as you can, to get nice even subdivisions. For my oblong hallway I'm going to split it up into two so I can get closer to the squares I want.

To make a displacement, shift+a into texture mode, select your faces, click across to the displacements tab and hit 'create'. I'm going to leave the power at 3, and even that is a bit overkill for our little hallway. Make sure you have applied our blend texture to the displacement faces.

Note the subdivisions aren't too stretched

Now hit the 'paint alpha' button and get painting.

I think tutorial time can be over now. You can play around with the displacement material all you like, and maybe go back to GIMP or PS and adjust the texture as you see fit. Here's what I did with my little scene:

Simple

So this is a quick little example of how to edit existing assets and add just a bit more detail to your environment. It beats decalling everything and with a little work and a critical eye you'll be able to add life to your environments. Stuff gets worn in real life and an old tile floor is a good example of this. Other examples are wooden floors that lose their shine, dirt gets walked over floors, concrete floors change colour a lot over time. Consider using this in your maps where relevant.

6 comments:

  1. Superb article! Thanks for sharing. The current announcements about windows from larch timber. Goto to that site. Home design stories on that site

    ReplyDelete
  2. Hi! Superb information! Particularly attractive. I advance haircut here. Be happy.

    ReplyDelete
  3. Доброе утро! Рекомендуем справочник выпускаемых медицинских средств. В путеводитель включены сведения о более чем 700 нынешних медикаментах, производимых отечественными и зарубежными фармкомпаниями. О любом лекарстве представлена полнейшая инфа: состав и форма выпуска, лечебные свойства, показания к применению, правила эксплуатации, вероятные побочные эффекты, противопоказания, взаимодействие со спиртными напитками и взаимодействие остальными лекарствами, также возможность употребления при беременности, грудном вскармливании. В путеводитель введен тематический указатель, где представлена инфа о том, какое медицинское средство необходимо применять при каких-то состояниях, заболеваниях, синдромах. Справочник базируется на мед сайте. Не болейте! Доцетаксел, Амлодипин / беназеприл, Метабисульфит натрия, Дитранол, Азапропазон, Карбалдрат,

    ReplyDelete
  4. Очень немногие компании-производители косметических средств в состоянии похвалиться тем, что их продукция попала в разряд победителей, предпочитаемых членами королевских династий. Компания Lebel Cosmetics уже свыше трех десятков лет поставляет свою продукцию в японский императорский дом. Логично, что, заслужив титул косметики номер один в Японии, продукция для окрашивания волос Лебел Materia легко завоевала европейский рынок и уже покорила сердца большого количества граждан стран Северной Америки.

    ReplyDelete
  5. Раздвижные двери и окна – PSK-портал монтируются в целях экономии незаполненного, свободного пространства. Обычные типы раскрываются вовнутрь дома, что занимает довольно значительную часть места в помещении. Нынешние модели дают возможность избежать этой проблемы, увеличить воздушный и световой поток в помещении.
    Параллельно-раздвижные окна и двери – это системы, кои владеют довольно широкой площадью остекления. Для обеспечения способности открывания створок имеются нижние и верхние полозья, посредством которых механизм легко и бесшумно двигается.
    Движение происходит при помощи ходовых роликов, кои содержат опору как компонент армирования, дающим возможность совершенно равномерно распределить вес по по всей двери. Они дают возможность створке двери передвигаться в различных режимах (сдвига, наклона).
    Высота створки окна или двери должна быть меньше 2360 мм, а ширина створки окна или двери будет меняться от 670 мм до 1,60 метра. В зависимости от общего веса (может составлять от 100 кг до 200 кг), на параллельно-раздвижное окно ставится определенная фурнитура для гарантии надежного функционирования створок, продления срока правильной работы. Ширина свободного проема имеет возможность достигать 2 метров.
    PSK-порталы могут похвастаться замечательными герметичными характеристиками, повышенными показателями звуко-, термоизоляции, предлагают должный уровень противовзломности, идеально подойдут для всех видов нынешних профилей. При сборке используют опоясывающие щеточные уплотнители, кои ощутимо улучшают функционирование створок.
    В случае, если вам хочется оформить лоджию, балкон, большой загородный дом или городскую квартиру согласно модным тенденциям в стиле, то компания-изготовитель СВ Окна сделает и выполнит монтаж параллельно-раздвижных окон и дверей.

    ReplyDelete