lunes, 4 de mayo de 2009

Primer "Dev Notes"

Bueno hace mucho que no pongo nada nuevo en el Blog, así que les voy a dar un pequeño Tour acerca del proceso completo de realización de una simple idea hasta la terminación de la misma.

Esto trata del mapa que estoy haciendo, como verán en posts anteriores estoy creando el entorno de mi mapa o también conocida como "3D Skybox".
La verdad estaba bastante escueto de ideas... ya no sabia que hacer sin caer en redundancia, hasta que se me ocurrió hacer una especie de fabrica/albergue, lo que fuere de ladrillos, amplias ventanas e inmensas chimeneas, claro que el jugador no podrá entrar en el, es solo parte de la zona que rodea el área de juego.
Y de aquí el primer Tip del mapper:
Si no sabes que hacer, copia a los demás :b.
Siguiendo eso lo primero que se me ocurrió fue el mapa de Counter Strike: Source.


cs_compound

Así que me pareció la "inspiración" perfecta, ahora solo manos a la obra...
Ponemos el Source SDK, entramos en Hammer y empezamos creando un rectángulo de lo que me parece el tamaño de la estructura en el CSS, ósea 640 de alto y ancho y 1024 de largo, de aquí viene el segundo y tercer...
Tip2: Usen siempre las medidas de múltiplos de 2 (8, 16, 32, 64, 128, 256, 512, 1024, sumas entre ellos y etc.) les será mucho mas fácil para texturar, mantener la simetría y hacer que todo encaje bien.
Tip3: Cuando creen un sólido nuevo háganlo usando la textura Nodraw(la amarilla q se puede ver) y luego seleccionan con el Texturador solo las caras que son visibles por el jugador, por Ej.: La cara de abajo de un cubo inmóvil nunca será vista por el jugador pero el juego igual la creara y eso es usar memoria del juego al pedo, también es una cara mas a la que se le creara sombra cuando compiles el mapa eso entonces dará de resultado + peso en el archivo final y + tiempo para que compile el mapa, por eso USEN SIEMPRE NODRAW, si quieren un mapa jugable.

Luego me dispuse a Texturar "Solo las partes visibles" ya que de este Cubo que tiene 6 caras el jugador solo vera 2. Por lo cual el ahorro de performance es evidente, sobre todo en grandes construcciones.
En la siguiente imagen ya se ve con la textura de ladrillos pero antes hay un paso crucial...
TIP4: Cuando tengan que alinear las texturas al sólido SIEMPRE usen primero las Devs textures, son muy útiles a la hora de alinear bien ya que tienen las dimensiones de la textura que elegiste pero al ser una cuadricula es fácil detectar los bordes de la textura y hacerlos coincidir con los del sólido. Para encontrarlas solo pongan DEV_ en el explorador de texturas.


Bueno una vez listas las paredes base, solo quedaban los detalles, como por Ej. Las columnas y ventanas, las cuales encontré un par(glasswindow015a; glasswindow015b) que me parecían que calzaban justas, pero una de ellas tenía transparencia(glasswindow015a) y ya que es un edificio sin interior, quedo descartada...
Si bien la textura de las ventanas no me convenció del todo proseguí, agregué algunas puertas al frente y compilé el mapa para ver como quedo en el juego...

La verdad no me terminaban de convencer las ventanas, para colmo estas como verán brillan y parece que dentro están las luces prendidas, no es por el consumo de luz (Cuak...) pero llamaba demasiado la atención, así que me metí en las GCFs de los juegos source( Source Materials.gcf) y busque la textura primero que me había gustado(la transparente).
Algo que tienen las Texturas en los juegos Source es que se componen de 2(o mas) partes que son el "Material" y la textura/s el material le indica al juego donde esta la textura y las propiedades que esta tiene como pueden ser: Transparencia, reflección, phong, color, animación, etc.
Entonces le pegue un ojo a la textura(glasswindow015a.vtf)
Note claro, que esta al ser una textura transparente tenia un canal Apha(el que saben usar las imágenes PNG para la transparencia)

OK de ahora en más tratare de explicar esto también mostrando los parámetros en el material que causan cada efecto.

Bueno aquí sito lo que decía el Material original de la ventana.

"LightmappedGeneric"
{
// Original shader: BaseTimesLightmapAlphaBlend
"$translucent" 1
"$basetexture" "Glass/glasswindow015a"
"$surfaceprop" "glass"
"%keywords" "c17industrial,c17skyscraper,wasteland"
}
Bueno empezare a enumerar lo que hay:
"LightmappedGeneric" le indica a que shader pertenece esta textura al juego en este caso es el mas comúnmente utilizado por las texturas aplicadas a los sólidos(brushes) de los mapas.
"$basetexture" Es el parámetro que le indica que textura usa este material. Algo muy útil ya que si bien el material puede estar en una carpeta(yo copie el material a materials/Inaki) y la textura en la carpeta especificada(glass) se puede utilizar la textura original, solo modificando el material.
"$translucent" 1 le esta indicando al juego que el canal Alpha de la textura esta siendo utilizado para obtener la transparencia(también que las luces pueden atravesar el sólido y los NPCs ver a través)
Así es la textura:


Y esté es el canal Apha de la imagen anterior(siempre en escala de grises).
Claro que como esta textura busca ser transparente los vidrios son los que mas oscuros están ya que cuanto más blancos son los pixeles del Alpha más visibles son los pixeles de la textura base. Entonces lo blanco es solido lo negro transparente.


Bien como yo quería sacar la transparencia lo único q debía hacer era quitar el parámetro "$translucent" cosa muy fácil, pero luego se me ocurrió que ya que estaba podía darle reflección a la textura(tal vidrio visto desde afuera que se ve como espejo por estar oscuro dentro) entonces lo que debía hacer era agregar otro parámetro al Material: "$envmap" "env_cubemap" esto lo que hace es hacer la textura reflexiva.
"LightmappedGeneric"
{
// Original shader: BaseTimesLightmapAlphaBlend
// "$translucent" 1
"$basetexture" "Glass/glasswindow015a"
"$surfaceprop" "glass"
"%keywords" "c17industrial,c17skyscraper,wasteland"

// New Stuff al agregar // la linea es emitida.
"$envmap" "env_cubemap"
}
Pero es toda reflexiva no hace que tenga partes mas reflectantes que otras, esto hace ver irreal todo.
Entonces que se puede hacer?? Crear una mascara de reflección, al igual que en una mascara Alpha es en escala de grises, solo que al contrario de la transparencia Cuanto mas blanco es el Píxel de la mascara mas Refleja el Píxel de la textura base.
Esto se especifica con el parámetro: "$envmapmask" "ubicación y nombre de la textura q hace de mascara de reflección"

Entonces habrá que crear una textura para la mascara de reflección que se vera así:
Banco=Refleja; Negro=Opaco

Pero tambien existen otros 2 parámetros que sirven para usar el canal Apha de la textura base o una textura de Relieve(Bump, Normal map), los cuales son:
"$basealphaenvmapmask" 1
"$normalmapalphaenvmapmask" 1
Las palabras hablan por si solas, no creo que deba especificar cual es cual.

Bueno voy a al punto por que estoy explicando demasiado al pedo.
Sucede, que cuando se quiere incluir(para usar) la Mascara de reflección como el canal Alpha de la textura base, este(el canal Apha) debe estar en negativo(invertido blanco=negro negro=blanco) Ósea que por eso de las causalidades JUSTO el canal Alpha de la textura base que esta pensado para que sea transparente es lo invertido de la mascara de reflexión... se matan 2 pájaros de 1 tiro, y siquiera se debe crear(modificar) una textura, solo agregando el parámetro al Material:

"LightmappedGeneric"
{
// Original shader: BaseTimesLightmapAlphaBlend
// "$translucent" 1
"$basetexture" "Glass/glasswindow015a"
"$surfaceprop" "glass"
"%keywords" "c17industrial,c17skyscraper,wasteland"

// New Stuff
"$envmap" "env_cubemap"
"$basealphaenvmapmask" 1
}
Tanto quilombo para terminar escribiendo eso nomás... (Solo para Uds. yo lo sabia del principio :b)

Bueno reabrí el Hammer(ya que así se actualizo la base de datos de materials) y ya esta nuestro material modificado, remplazando la textura anterior, pongo la nueva y ya que estoy me agrego mas detalles y una completa estación de rebaje de electricidad XD.



Bueno, al final parece al pedo todo, ya que ahora con la reflección se ve hasta más brillante que las ventanas anteriores.
A no desesperar!!!
Los Materiales tienen Parámetros para toda necesidad y gusto :b

Así que (finalmente) agregamos un ultimo parámetro "$envmaptint" que Permite modificar la intensidad de la Reflección por canales de colores(RGB) así que también se puede hacer que refleje en un color especifico y todo ;). Pero aquí solo queremos hacer menos reflexiva la ventana.
"LightmappedGeneric"
{
// Original shader: BaseTimesLightmapAlphaBlend
// "$translucent" 1
"$basetexture" "Glass/glasswindow015a"
"$surfaceprop" "glass"
"%keywords" "c17industrial,c17skyscraper,wasteland"

// New Stuff
"$envmap" "env_cubemap"
"$basealphaenvmapmask" 1
"$envmaptint" "[ .75 .75 .75 ]"
}
Y bueno los dejo con el resultado final...

Comenten Ratas, me mate escribiendo...

3 comentarios:

  1. Que bueno seria iñaki que pongas un articulo en css al palo de todo esto :D.

    ResponderEliminar
  2. La verdad siquiera conosia la comunidad :b.
    Veo despues si pongo algo, pasa que ya he puesto cosas que como estas en otras comunidades pero nunca me dieron pelota. asi q me hice un blog y al diablo.

    ResponderEliminar
  3. CSS AL PALO, no es una comunidad, es una pagina, dedidacada a todo lo que tenga que ver con CSS, incluyendo distintas comunidades. :D

    Pegate una vuelta y si te interesa me avisas y posteamos algo.

    http://cssalpalo.com
    cssalpalo@gmail.com

    saludos !

    ResponderEliminar